diff options
Diffstat (limited to 'src/dumbymap.mjs')
-rw-r--r-- | src/dumbymap.mjs | 93 |
1 files changed, 3 insertions, 90 deletions
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index edc1521..bb98cea 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs | |||
@@ -152,87 +152,10 @@ export const generateMaps = (container, { delay, mapCallback }) => { | |||
152 | utils.createDocLink | 152 | utils.createDocLink |
153 | ) | 153 | ) |
154 | 154 | ||
155 | // Get anchors with "geo:" scheme | 155 | // Add GeoLinks |
156 | htmlHolder.anchors = [] | 156 | container.querySelectorAll(geoLinkSelector) |
157 | const geoLinkCallback = link => { | 157 | .forEach(utils.createGeoLink) |
158 | link.onmouseover = () => addLeaderLines(link) | ||
159 | link.onmouseout = () => removeLeaderLines(link) | ||
160 | link.onclick = event => { | ||
161 | event.preventDefault() | ||
162 | htmlHolder.anchors | ||
163 | .filter(isAnchorPointedBy(link)) | ||
164 | .forEach(updateMapByMarker(link.xy)) | ||
165 | // TODO Just hide leader line and show it again | ||
166 | removeLeaderLines(link) | ||
167 | } | ||
168 | } | ||
169 | const geoLinks = Array.from( | ||
170 | container.querySelectorAll(geoLinkSelector) | ||
171 | ).filter(l => utils.createGeoLink(l, geoLinkCallback)) | ||
172 | |||
173 | const isAnchorPointedBy = link => anchor => { | ||
174 | const mapContainer = anchor.closest('.mapclay') | ||
175 | const isTarget = !link.targets || link.targets.includes(mapContainer.id) | ||
176 | return anchor.title === link.url.searchParams.get('text') && isTarget | ||
177 | } | ||
178 | |||
179 | const isAnchorVisible = anchor => { | ||
180 | const mapContainer = anchor.closest('.mapclay') | ||
181 | return insideWindow(anchor) && insideParent(anchor, mapContainer) | ||
182 | } | ||
183 | |||
184 | const drawLeaderLine = link => anchor => { | ||
185 | const line = new LeaderLine({ | ||
186 | start: link, | ||
187 | end: anchor, | ||
188 | hide: true, | ||
189 | middleLabel: link.url.searchParams.get('text'), | ||
190 | path: 'magnet' | ||
191 | }) | ||
192 | line.show('draw', { duration: 300 }) | ||
193 | return line | ||
194 | } | ||
195 | |||
196 | const addLeaderLines = link => { | ||
197 | link.lines = htmlHolder.anchors | ||
198 | .filter(isAnchorPointedBy(link)) | ||
199 | .filter(isAnchorVisible) | ||
200 | .map(drawLeaderLine(link)) | ||
201 | } | ||
202 | 158 | ||
203 | const removeLeaderLines = link => { | ||
204 | if (!link.lines) return | ||
205 | link.lines.forEach(line => line.remove()) | ||
206 | link.lines = [] | ||
207 | } | ||
208 | |||
209 | const updateMapByMarker = xy => marker => { | ||
210 | const renderer = marker.closest('.mapclay')?.renderer | ||
211 | renderer.updateCamera({ center: xy }, true) | ||
212 | } | ||
213 | |||
214 | const insideWindow = element => { | ||
215 | const rect = element.getBoundingClientRect() | ||
216 | return ( | ||
217 | rect.left > 0 && | ||
218 | rect.right < window.innerWidth + rect.width && | ||
219 | rect.top > 0 && | ||
220 | rect.bottom < window.innerHeight + rect.height | ||
221 | ) | ||
222 | } | ||
223 | |||
224 | const insideParent = (childElement, parentElement) => { | ||
225 | const childRect = childElement.getBoundingClientRect() | ||
226 | const parentRect = parentElement.getBoundingClientRect() | ||
227 | const offset = 20 | ||
228 | |||
229 | return ( | ||
230 | childRect.left > parentRect.left + offset && | ||
231 | childRect.right < parentRect.right - offset && | ||
232 | childRect.top > parentRect.top + offset && | ||
233 | childRect.bottom < parentRect.bottom - offset | ||
234 | ) | ||
235 | } | ||
236 | // }}} | 159 | // }}} |
237 | // CSS observer {{{ | 160 | // CSS observer {{{ |
238 | // Focus Map {{{ | 161 | // Focus Map {{{ |
@@ -378,16 +301,6 @@ export const generateMaps = (container, { delay, mapCallback }) => { | |||
378 | 301 | ||
379 | // Execute callback from caller | 302 | // Execute callback from caller |
380 | mapCallback?.call(this, mapElement) | 303 | mapCallback?.call(this, mapElement) |
381 | const markers = geoLinks | ||
382 | .filter(link => !link.targets || link.targets.includes(mapElement.id)) | ||
383 | .map(link => ({ xy: link.xy, title: link.url.searchParams.get('text') })) | ||
384 | |||
385 | // FIXME Here may cause error | ||
386 | // Add markers with Geolinks | ||
387 | renderer.addMarkers(markers) | ||
388 | mapElement | ||
389 | .querySelectorAll('.marker') | ||
390 | .forEach(marker => htmlHolder.anchors.push(marker)) | ||
391 | } | 304 | } |
392 | 305 | ||
393 | // Set unique ID for map container | 306 | // Set unique ID for map container |