@projektemacher/storymapjs 0.10.8 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (195) hide show
  1. package/CHANGELOG +81 -0
  2. package/README.md +129 -12
  3. package/dist/assets/{demo-DBpeF31K.js → demo-bWnOyfUw.js} +1 -1
  4. package/dist/assets/harness-C3JUv5Ii.js +1 -0
  5. package/dist/assets/{harness-multi-CYHgI0a9.js → harness-multi-XZNex3tb.js} +1 -1
  6. package/dist/assets/{harness-support-Do7sIp2j.js → harness-support-CjfZIVeb.js} +1 -1
  7. package/dist/assets/main-DQ32hWBM.js +17 -0
  8. package/dist/context.json +13 -2
  9. package/dist/css/storymap.css +1 -1
  10. package/dist/demo.html +3 -2
  11. package/dist/docs/api/assets/navigation.js +1 -1
  12. package/dist/docs/api/assets/search.js +1 -1
  13. package/dist/docs/api/classes/StoryMap.html +777 -269
  14. package/dist/docs/api/functions/MediaType.html +1 -1
  15. package/dist/docs/api/functions/isPresentation3Collection.html +1 -1
  16. package/dist/docs/api/functions/isPresentation3Manifest.html +1 -1
  17. package/dist/docs/api/functions/isSlideshowCollection.html +51 -0
  18. package/dist/docs/api/functions/loadCSS.html +1 -1
  19. package/dist/docs/api/functions/manifestToStorymapData.html +1 -1
  20. package/dist/docs/api/functions/setLanguage.html +1 -1
  21. package/dist/docs/api/functions/slideshowToStorymapData.html +51 -0
  22. package/dist/docs/api/functions/slideshowVersion.html +48 -0
  23. package/dist/docs/api/functions/storymapToManifest.html +1 -1
  24. package/dist/docs/api/functions/validateStorymap.html +1 -1
  25. package/dist/docs/api/functions/validateStorymapAndReport.html +1 -1
  26. package/dist/docs/api/index.html +115 -12
  27. package/dist/docs/api/interfaces/AnimationHandle.html +2 -2
  28. package/dist/docs/api/interfaces/ImagereadyPayload.html +4 -4
  29. package/dist/docs/api/interfaces/LanguageEntry.html +6 -6
  30. package/dist/docs/api/interfaces/LatLngLiteral.html +4 -4
  31. package/dist/docs/api/interfaces/LoadOptions.html +2 -2
  32. package/dist/docs/api/interfaces/MapEvents.html +116 -0
  33. package/dist/docs/api/interfaces/MapMarkerEvents.html +66 -0
  34. package/dist/docs/api/interfaces/MarkerEventPayload.html +57 -0
  35. package/dist/docs/api/interfaces/MediaEvents.html +78 -0
  36. package/dist/docs/api/interfaces/MenuBarEvents.html +114 -0
  37. package/dist/docs/api/interfaces/MessageEvents.html +72 -0
  38. package/dist/docs/api/interfaces/OlLayer.html +1 -1
  39. package/dist/docs/api/interfaces/OlMap.html +1 -1
  40. package/dist/docs/api/interfaces/OlSource.html +1 -1
  41. package/dist/docs/api/interfaces/OlTileLayer.html +1 -1
  42. package/dist/docs/api/interfaces/OlVectorLayer.html +1 -1
  43. package/dist/docs/api/interfaces/OlView.html +1 -1
  44. package/dist/docs/api/interfaces/SlideBackgroundState.html +66 -0
  45. package/dist/docs/api/interfaces/SlideEvents.html +78 -0
  46. package/dist/docs/api/interfaces/SlideNavEvents.html +72 -0
  47. package/dist/docs/api/interfaces/SlideshowPlayerSettings.html +182 -0
  48. package/dist/docs/api/interfaces/SlideshowToStorymapResult.html +60 -0
  49. package/dist/docs/api/interfaces/SlideshowTranslatorOptions.html +65 -0
  50. package/dist/docs/api/interfaces/SlideshowWarning.html +72 -0
  51. package/dist/docs/api/interfaces/StoryMapEvents.html +146 -0
  52. package/dist/docs/api/interfaces/StoryMapMarker.html +763 -0
  53. package/dist/docs/api/interfaces/StorySliderEvents.html +102 -0
  54. package/dist/docs/api/interfaces/StorymapBasemap.html +69 -0
  55. package/dist/docs/api/interfaces/StorymapData.html +12 -6
  56. package/dist/docs/api/interfaces/StorymapDataWrapper.html +2 -2
  57. package/dist/docs/api/interfaces/StorymapDocument.html +2 -2
  58. package/dist/docs/api/interfaces/StorymapError.html +3 -3
  59. package/dist/docs/api/interfaces/StorymapGeoreference.html +5 -5
  60. package/dist/docs/api/interfaces/StorymapGeoreferenceBody.html +4 -4
  61. package/dist/docs/api/interfaces/StorymapGroundControlPoint.html +4 -4
  62. package/dist/docs/api/interfaces/StorymapLanguageMap.html +2 -2
  63. package/dist/docs/api/interfaces/StorymapManifest.html +12 -12
  64. package/dist/docs/api/interfaces/StorymapManifestAnnotation.html +43 -11
  65. package/dist/docs/api/interfaces/StorymapManifestBackground.html +6 -6
  66. package/dist/docs/api/interfaces/StorymapManifestCanvas.html +65 -17
  67. package/dist/docs/api/interfaces/StorymapManifestContentResource.html +8 -8
  68. package/dist/docs/api/interfaces/StorymapManifestFeatureCollection.html +4 -4
  69. package/dist/docs/api/interfaces/StorymapManifestGeoreferencing.html +7 -7
  70. package/dist/docs/api/interfaces/StorymapManifestImageService.html +4 -4
  71. package/dist/docs/api/interfaces/StorymapManifestRange.html +5 -5
  72. package/dist/docs/api/interfaces/StorymapManifestService.html +4 -4
  73. package/dist/docs/api/interfaces/StorymapManifestSpecificResource.html +4 -4
  74. package/dist/docs/api/interfaces/StorymapManifestStatement.html +3 -3
  75. package/dist/docs/api/interfaces/StorymapMapOptions.html +5 -5
  76. package/dist/docs/api/interfaces/StorymapOptions.html +277 -75
  77. package/dist/docs/api/interfaces/StorymapOverlayLayer.html +42 -11
  78. package/dist/docs/api/interfaces/StorymapSlide.html +70 -16
  79. package/dist/docs/api/interfaces/StorymapSlideBackground.html +4 -4
  80. package/dist/docs/api/interfaces/StorymapSlideLocation.html +58 -14
  81. package/dist/docs/api/interfaces/StorymapSlideMarker.html +8 -9
  82. package/dist/docs/api/interfaces/StorymapSlideMedia.html +49 -10
  83. package/dist/docs/api/interfaces/StorymapSlideNarration.html +61 -9
  84. package/dist/docs/api/interfaces/StorymapSlideText.html +4 -4
  85. package/dist/docs/api/interfaces/StorymapTilejson.html +8 -8
  86. package/dist/docs/api/interfaces/SwipableEvents.html +102 -0
  87. package/dist/docs/api/interfaces/TextEvents.html +66 -0
  88. package/dist/docs/api/media/events.md +66 -0
  89. package/dist/docs/api/media/migration-from-knightlab.md +89 -49
  90. package/dist/docs/api/media/slideshow.md +109 -0
  91. package/dist/docs/api/media/storymap-as-iiif-manifest.md +1007 -0
  92. package/dist/docs/api/modules.html +6 -6
  93. package/dist/docs/api/types/ContentState.html +3 -3
  94. package/dist/docs/api/types/FiredEvent.html +43 -0
  95. package/dist/docs/api/types/ImagereadyKind.html +1 -1
  96. package/dist/docs/api/types/MediaTypeMatch.html +5 -5
  97. package/dist/docs/api/types/SwipeDirection.html +36 -0
  98. package/dist/docs/api/types/TileSourceFactory.html +1 -1
  99. package/dist/docs/authoring.html +20 -7
  100. package/dist/docs/events.html +263 -0
  101. package/dist/docs/iiif.html +136 -22
  102. package/dist/docs/migration.html +66 -19
  103. package/dist/docs/readme.html +113 -12
  104. package/dist/embed/index.html +7 -0
  105. package/dist/examples/font-css-false.json +33 -0
  106. package/dist/examples/issue-image-region.json +1 -1
  107. package/dist/examples/layers-control.json +60 -0
  108. package/dist/examples/map-template-provider.json +36 -0
  109. package/dist/examples/multi-media.json +71 -0
  110. package/dist/examples-iiif/annotated-image.json +16 -0
  111. package/dist/examples-iiif/font-css-false.json +114 -0
  112. package/dist/examples-iiif/issue-image-region.json +1 -1
  113. package/dist/examples-iiif/layers-control.json +226 -0
  114. package/dist/examples-iiif/map-template-provider.json +133 -0
  115. package/dist/examples-iiif/multi-media.json +237 -0
  116. package/dist/examples-slideshow/single.json +79 -0
  117. package/dist/examples-slideshow/static/pixel.png +0 -0
  118. package/dist/examples-slideshow/static.json +44 -0
  119. package/dist/harness-multi.html +3 -3
  120. package/dist/harness.html +4 -3
  121. package/dist/index.html +3 -2
  122. package/dist/js/storymap.d.ts +1326 -289
  123. package/dist/js/storymap.js +6690 -4784
  124. package/dist/js/storymap.js.map +1 -1
  125. package/dist/navplace-properties.json +14 -0
  126. package/dist/site.css +54 -36
  127. package/docs/migration-from-knightlab.md +89 -49
  128. package/docs/storymap-as-iiif-manifest.md +199 -126
  129. package/package.json +4 -2
  130. package/schema/storymap.schema.json +334 -34
  131. package/src/core/Util.ts +3 -1
  132. package/src/core/mixins.ts +42 -28
  133. package/src/language/Language.ts +7 -0
  134. package/src/language/locale/.expected-gaps.json +287 -27
  135. package/src/language/locale/de.json +11 -1
  136. package/src/language/locale/en.json +11 -1
  137. package/src/main.ts +51 -0
  138. package/src/map/Map.ts +44 -6
  139. package/src/map/MapMarker.ts +16 -3
  140. package/src/map/openlayers/Map.OpenLayers.ts +787 -62
  141. package/src/map/openlayers/MapMarker.OpenLayers.ts +113 -13
  142. package/src/map/slideView.ts +149 -0
  143. package/src/map/types.ts +2 -0
  144. package/src/media/EmbedUtil.ts +27 -2
  145. package/src/media/Media.ts +27 -4
  146. package/src/media/embedId.ts +6 -0
  147. package/src/media/types/Flickr.ts +14 -3
  148. package/src/media/types/HtmlMedia.ts +66 -0
  149. package/src/media/types/Image.ts +15 -3
  150. package/src/media/types/SoundCloud.ts +1 -1
  151. package/src/media/types/Text.ts +27 -8
  152. package/src/media/types/Twitter.ts +9 -7
  153. package/src/media/types/Vimeo.ts +1 -1
  154. package/src/media/types/YouTube.ts +2 -2
  155. package/src/scss/Typography.scss +15 -15
  156. package/src/scss/VCO.StoryMap.scss +173 -8
  157. package/src/scss/core/Reset.scss +5 -18
  158. package/src/scss/map/VCO.Map.scss +1 -1
  159. package/src/scss/map/VCO.MapMarker.scss +20 -9
  160. package/src/scss/map/openlayers/VCO.Map.OpenLayers.scss +7 -4
  161. package/src/scss/media/VCO.Media.scss +7 -7
  162. package/src/scss/media/types/VCO.Media.Blockquote.scss +1 -1
  163. package/src/scss/media/types/VCO.Media.Text.scss +5 -5
  164. package/src/scss/media/types/VCO.Media.Twitter.scss +4 -4
  165. package/src/scss/media/types/VCO.Media.Wikipedia.scss +2 -19
  166. package/src/scss/site/site.scss +55 -36
  167. package/src/scss/slider/VCO.Slide.scss +49 -11
  168. package/src/scss/slider/VCO.SlideNav.scss +23 -7
  169. package/src/scss/slider/VCO.StorySlider.scss +50 -0
  170. package/src/scss/snapmap/VCO.SnapMap.scss +3 -3
  171. package/src/scss/ui/VCO.Consent.scss +20 -14
  172. package/src/scss/ui/VCO.Layers.scss +119 -0
  173. package/src/scss/ui/VCO.MenuBar.Button.scss +140 -19
  174. package/src/scss/ui/VCO.MenuBar.scss +9 -2
  175. package/src/scss/ui/VCO.Message.scss +14 -0
  176. package/src/slider/Slide.ts +232 -74
  177. package/src/slider/SlideNav.ts +15 -4
  178. package/src/slider/StorySlider.ts +203 -22
  179. package/src/storymap/Consent.ts +22 -0
  180. package/src/storymap/StoryMap.ts +944 -131
  181. package/src/storymap/content-state.ts +3 -8
  182. package/src/storymap/font-css.ts +72 -0
  183. package/src/storymap/from-slideshow.ts +785 -0
  184. package/src/storymap/iiif-shared.ts +228 -0
  185. package/src/storymap/iiif.ts +289 -100
  186. package/src/storymap/to-iiif.ts +131 -44
  187. package/src/types.ts +382 -17
  188. package/src/ui/LayersControl.ts +302 -0
  189. package/src/ui/MenuBar.ts +232 -21
  190. package/src/ui/Message.ts +36 -3
  191. package/src/ui/Swipable.ts +25 -7
  192. package/dist/assets/harness-Cr0rYpvt.js +0 -1
  193. package/dist/assets/main-DXalctuR.js +0 -17
  194. package/src/scss/VCO.StoryMap.Dark.scss +0 -150
  195. package/src/scss/Variables.Dark.scss +0 -57
package/dist/docs/api/types/SwipeDirection.html ADDED
@@ -0,0 +1,36 @@
1
+ <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>SwipeDirection | StoryMapJS API</title><meta name="description" content="Documentation for StoryMapJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar">
2
+ <div class="tsd-toolbar-contents container"><a href="../index.html" class="title">StoryMapJS API</a>
3
+ <div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/>
4
+ <ul role="listbox" id="tsd-search-results"></ul>
5
+ <div id="tsd-search-status" aria-live="polite" aria-atomic="true">
6
+ <div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header>
7
+ <div class="container container-main">
8
+ <div class="col-content">
9
+ <div class="tsd-page-title">
10
+ <ul class="tsd-breadcrumb" aria-label="Breadcrumb">
11
+ <li><a href="" aria-current="page">SwipeDirection</a></li></ul>
12
+ <h1>Type Alias SwipeDirection</h1></div>
13
+ <div class="tsd-signature"><span class="tsd-kind-type-alias">SwipeDirection</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">&quot;left&quot;</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;right&quot;</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;up&quot;</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">&quot;down&quot;</span></div>
14
+ <div class="tsd-comment tsd-typography"><p>The four swipe directions. <code>&quot;none&quot;</code> is not one: an undecided gesture
15
+ carries <code>null</code>, and the truthiness guard at the fire site treats it as
16
+ &quot;no swipe&quot; rather than a fifth direction.</p>
17
+ </div><aside class="tsd-sources">
18
+ <ul>
19
+ <li>Defined in <a href="https://github.com/cmahnke/StoryMapJS/blob/ffcd40cfccb804f667ff3b975dd61e8cf12bd289/src/ui/Swipable.ts#L65">src/ui/Swipable.ts:65</a></li></ul></aside></div>
20
+ <div class="col-sidebar">
21
+ <div class="page-menu">
22
+ <div class="tsd-navigation settings">
23
+ <details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>
24
+ <h3>Settings</h3></summary>
25
+ <div class="tsd-accordion-details">
26
+ <div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span>
27
+ <ul id="tsd-filter-options">
28
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
29
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
30
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div>
31
+ <div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div>
32
+ <div class="site-menu">
33
+ <nav class="tsd-navigation"><a href="../modules.html">StoryMapJS API</a>
34
+ <ul class="tsd-small-nested-navigation" id="tsd-nav-container">
35
+ <li>Loading...</li></ul></nav></div></div></div><footer></footer>
36
+ <div class="overlay"></div></body></html>
package/dist/docs/api/types/TileSourceFactory.html CHANGED
@@ -33,7 +33,7 @@ through to the default <code>map_type</code> handling.</p>
33
33
  <li><span><span class="tsd-kind-parameter">context</span>: <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">createDefault</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=&gt;</span> <a href="../interfaces/OlTileLayer.html" class="tsd-signature-type tsd-kind-interface">OlTileLayer</a><span class="tsd-signature-symbol">;</span> <span class="tsd-kind-property">options</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/StorymapOptions.html" class="tsd-signature-type tsd-kind-interface">StorymapOptions</a> <span class="tsd-signature-symbol">}</span></span></li></ul></div>
34
34
  <h4 class="tsd-returns-title">Returns <a href="../interfaces/OlLayer.html" class="tsd-signature-type tsd-kind-interface">OlLayer</a> <span class="tsd-signature-symbol">|</span> <a href="../interfaces/OlTileLayer.html" class="tsd-signature-type tsd-kind-interface">OlTileLayer</a> <span class="tsd-signature-symbol">|</span> <a href="../interfaces/OlSource.html" class="tsd-signature-type tsd-kind-interface">OlSource</a> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">undefined</span></h4></li></ul></li></ul></div><aside class="tsd-sources">
35
35
  <ul>
36
- <li>Defined in <a href="https://github.com/cmahnke/StoryMapJS/blob/62f871ee8c2189324f8b92fd4a1c0c138e04de77/src/types.ts#L155">src/types.ts:155</a></li></ul></aside></div>
36
+ <li>Defined in <a href="https://github.com/cmahnke/StoryMapJS/blob/ffcd40cfccb804f667ff3b975dd61e8cf12bd289/src/types.ts#L337">src/types.ts:337</a></li></ul></aside></div>
37
37
  <div class="col-sidebar">
38
38
  <div class="page-menu">
39
39
  <div class="tsd-navigation settings">
package/dist/docs/authoring.html CHANGED
@@ -37,6 +37,7 @@
37
37
  <li><a class="button" href="./migration.html">Migration guide</a></li>
38
38
  <li><a class="button" href="./iiif.html">IIIF docs</a></li>
39
39
  <li><a class="button" href="./authoring.html">Authoring</a></li>
40
+ <li><a class="button" href="./events.html">Events</a></li>
40
41
  <li><a class="button" href="./api/index.html">API docs</a></li>
41
42
  <li><a class="button" href="../index.html#help">Help</a></li>
42
43
  </ul>
@@ -164,7 +165,7 @@ slide.</p>
164
165
  </thead>
165
166
  <tbody><tr>
166
167
  <td><code>FragmentSelector</code> / <code>ImageApiSelector</code> with <code>xywh=x,y,w,h</code></td>
167
- <td>that image-pixel region. <code>xywh=pixel:…</code> works too</td>
168
+ <td>that image-pixel region. <code>xywh=pixel:…</code> works too. A negative origin is clamped to the canvas (targets routinely overshoot it); a region fully outside it is dropped</td>
168
169
  </tr>
169
170
  <tr>
170
171
  <td><code>PointSelector</code> (<code>x</code>, <code>y</code>)</td>
@@ -180,7 +181,7 @@ slide.</p>
180
181
  </tr>
181
182
  <tr>
182
183
  <td><code>SvgSelector</code></td>
183
- <td>preserved; the viewer fits the bounding region, it does not draw the true outline yet</td>
184
+ <td>preserved on the stop; <strong>not resolved and not fitted</strong> — an annotation with only an <code>SvgSelector</code> (no region) is not a stop, because there is no region to fit</td>
184
185
  </tr>
185
186
  </tbody></table>
186
187
  <p>One level of <code>refinedBy</code> is followed, so a fragment refined by a quote works.</p>
@@ -195,7 +196,14 @@ inject script.</li>
195
196
  <code>media.url</code>. The viewer resolves the URL to a player: a <code>.mp3</code>/<code>.wav</code>/<code>.m4a</code>
196
197
  URL renders a native <code>&lt;audio&gt;</code>, a YouTube or Vimeo URL renders that embed,
197
198
  and anything else falls back to a framed website. A <code>Sound</code> body therefore
198
- needs no type of its own beyond <code>id</code> and <code>format</code>.</li>
199
+ needs no type of its own beyond <code>id</code> and <code>format</code>. Playback flags ride
200
+ <code>storymap:</code> members on the painting annotation — <code>storymap:offset</code>
201
+ (start seconds), <code>storymap:loop</code>, <code>storymap:play</code> (<code>auto</code>/<code>click</code>) and
202
+ <code>storymap:stopOnExit</code> — and a <code>motivation: &quot;supplementing&quot;</code> Sound/Video
203
+ body becomes the slide <code>narration</code> with the same flags plus
204
+ <code>storymap:stopAllPrevious</code>. These fields are read from any manifest but
205
+ render only for slideshow tours (the viewer&#39;s <code>slideshow_source</code> marker);
206
+ hand-written manifests keep the long-standing playback.</li>
199
207
  <li>A media body&#39;s <code>label</code> becomes the media caption,
200
208
  <code>accessibilitySummary</code> the alt text, and <code>requiredStatement</code> (or <code>provider</code>)
201
209
  the credit. A <code>thumbnail</code> becomes the media thumb. A sibling <code>TextualBody</code>
@@ -211,14 +219,19 @@ annotations.</li>
211
219
  <li><strong>A point on a map</strong> — <a href="https://iiif.io/api/extension/navplace/">navPlace</a>
212
220
  on the canvas. A <code>Point</code> gives the slide&#39;s location; a <code>Polygon</code> gives the
213
221
  story&#39;s extent (<code>map_bbox</code>). Marker presentation (<code>icon</code>, <code>iconSize</code>,
214
- <code>image</code>, <code>name</code>, <code>line</code>, <code>zoom</code>, <code>use_custom_marker</code>) goes in the Feature&#39;s
222
+ <code>image</code>, <code>name</code>, <code>line</code>, <code>zoom</code>, <code>rotation</code> in degrees clockwise, <code>basemap</code>
223
+ for a per-slide basemap, <code>filter</code> for per-slide image grading, <code>mask</code> for a
224
+ spotlight mask, <code>use_custom_marker</code>) goes in the Feature&#39;s
215
225
  <code>properties</code>. All stops on a canvas share that canvas&#39;s <code>navPlace</code> — the
216
226
  extension does not allow it on an annotation, so there is no per-stop
217
227
  override. Two <code>properties</code> names are marker behaviour, not data:
218
228
  <code>popup: true</code> gives the active marker a card with the slide&#39;s headline and
219
229
  excerpt, and <code>audioBadge: true</code> dots a marker whose slide has narration or
220
- audio. The nine names the reader copies — and the linked-data context that
221
- describes them — are listed in <code>docs/storymap-as-iiif-manifest.md</code>.</li>
230
+ audio. Open the card from code with <code>storymap.openMarkerPopup(n)</code> (it
231
+ navigates to the stop first) and listen for <code>popupopen</code> / <code>popupclose</code>
232
+ with <code>{ marker_number, current_slide }</code>. The thirteen names the reader
233
+ copies — and the linked-data context that describes them — are listed
234
+ in <code>docs/storymap-as-iiif-manifest.md</code>.</li>
222
235
  <li><strong>Chapters</strong> — a <code>Range</code> with a <code>label</code> and no <code>start</code> groups the canvases
223
236
  it lists. A <code>Range</code> whose <code>items</code> order differs from canvas order becomes
224
237
  the slide order instead: a Range <em>is</em> a storyboard.</li>
@@ -236,7 +249,7 @@ round trip in front of the first paint — so the stops on the canvas appear
236
249
  immediately, and a host asks for the rest afterwards:</p>
237
250
  <pre><code class="language-js">await sm.loadAnnotations();
238
251
  sm.on(&quot;annotationsloaded&quot;, (result) =&gt; {
239
- console.log(`added ${result.added} stops`);
252
+ console.log(`added ${result.stops.length} stops`);
240
253
  });
241
254
  </code></pre>
242
255
  <p>One level is followed: a referenced <code>AnnotationPage</code> is read, but a <code>seeAlso</code>
package/dist/docs/events.html ADDED
@@ -0,0 +1,263 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Event reference — StoryMapJS</title>
7
+ <meta name="description" content="Event reference — StoryMapJS documentation" />
8
+ <link rel="stylesheet" href="../site.css" />
9
+ </head>
10
+ <body class="sm-site">
11
+
12
+ <nav class="navbar navbar-dark">
13
+ <ul>
14
+ <li class="logo">
15
+ <a href="../index.html">StoryMap <span>JS</span></a>
16
+ </li>
17
+ </ul>
18
+ <ul class="nav-right">
19
+ <li>
20
+ <a class="button button-dark button-active" href="https://github.com/cmahnke/StoryMapJS"
21
+ >GitHub</a
22
+ >
23
+ </li>
24
+ <li>
25
+ <a class="button button-dark" href="https://github.com/cmahnke/StoryMapJS/issues"
26
+ >Issues</a
27
+ >
28
+ </li>
29
+ </ul>
30
+ </nav>
31
+ <header class="header-product header-product-docs">
32
+ <nav id="navbar-secondary" class="navbar navbar-subnav" aria-label="Page navigation">
33
+ <ul>
34
+ <li><a class="button" href="../index.html#overview">Overview</a></li>
35
+ <li><a class="button" href="../index.html#examples">Examples</a></li>
36
+ <li><a class="button" href="./readme.html">README</a></li>
37
+ <li><a class="button" href="./migration.html">Migration guide</a></li>
38
+ <li><a class="button" href="./iiif.html">IIIF docs</a></li>
39
+ <li><a class="button" href="./authoring.html">Authoring</a></li>
40
+ <li><a class="button" href="./events.html">Events</a></li>
41
+ <li><a class="button" href="./api/index.html">API docs</a></li>
42
+ <li><a class="button" href="../index.html#help">Help</a></li>
43
+ </ul>
44
+ </nav>
45
+ </header>
46
+ <main class="sm-docs">
47
+ <h1>Event reference</h1>
48
+ <p>One table per emitter: the event name, its payload, when it fires, and who
49
+ can subscribe. This is the canonical list;
50
+ <code>docs/migration-from-knightlab.md</code> keeps only the migration differences.
51
+ payloads are also typed — see the <code>*Events</code> maps exported from
52
+ <code>src/main.ts</code> (e.g. <code>StoryMapEvents</code>), which make <code>storymap.on(&quot;change&quot;, …)</code>
53
+ a compile error and infer the handler parameter.</p>
54
+ <p>Every event object carries the payload fields plus the framework&#39;s own
55
+ <code>type</code> and <code>target</code>. <code>target</code> is always the object that fired — in
56
+ particular, a re-fired event&#39;s <code>target</code> is the re-firing viewer, not the
57
+ origin (a payload carrying its own <code>type</code>/<code>target</code> cannot displace them).</p>
58
+ <h2><code>StoryMap</code> — subscribe on the viewer</h2>
59
+ <table>
60
+ <thead>
61
+ <tr>
62
+ <th>Event</th>
63
+ <th>Payload</th>
64
+ <th>Fires when</th>
65
+ </tr>
66
+ </thead>
67
+ <tbody><tr>
68
+ <td><code>change</code></td>
69
+ <td><code>{ current_slide, current_id }</code></td>
70
+ <td>any navigation completes (programmatic, slider, map, back-to-start); exactly once per navigation</td>
71
+ </tr>
72
+ <tr>
73
+ <td><code>loaded</code></td>
74
+ <td>the storymap data</td>
75
+ <td>slider and map both loaded (mapless stories skip the map gate)</td>
76
+ </tr>
77
+ <tr>
78
+ <td><code>title</code></td>
79
+ <td><code>{ title }</code></td>
80
+ <td>the story title resolves</td>
81
+ </tr>
82
+ <tr>
83
+ <td><code>dataloaded</code></td>
84
+ <td><em>none</em></td>
85
+ <td>the storymap document is read, before layout</td>
86
+ </tr>
87
+ <tr>
88
+ <td><code>fontLoaded</code></td>
89
+ <td><code>{ font }</code></td>
90
+ <td>the font theme finishes loading — or fails to (a missing theme never blocks the story)</td>
91
+ </tr>
92
+ <tr>
93
+ <td><code>transitionstart</code> / <code>transitionend</code></td>
94
+ <td><code>{ current_slide, duration }</code> / <code>{ current_slide }</code></td>
95
+ <td>a slide glide starts / elapses (only the latest transition ever ends)</td>
96
+ </tr>
97
+ <tr>
98
+ <td><code>error</code></td>
99
+ <td><code>{ message, source, conflict? }</code></td>
100
+ <td>fetch/validation failure, or a second viewer claiming another locale (<code>conflict: true</code>)</td>
101
+ </tr>
102
+ <tr>
103
+ <td><code>imageready</code></td>
104
+ <td><code>{ source, kind, layer }</code> (<code>kind</code>: <code>&quot;iiif&quot;</code> | <code>&quot;zoomify&quot;</code> | <code>&quot;tiles&quot;</code>; <code>layer</code> may be <code>null</code>)</td>
105
+ <td>an image source is actually attached — the only signal the imagery exists (<code>loaded</code> can fire earlier)</td>
106
+ </tr>
107
+ <tr>
108
+ <td><code>annotationsloaded</code></td>
109
+ <td><code>{ stops, searchService, failed }</code></td>
110
+ <td><code>loadAnnotations()</code> appended external stops</td>
111
+ </tr>
112
+ <tr>
113
+ <td><code>markerclick</code></td>
114
+ <td><code>{ marker_number, current_slide }</code></td>
115
+ <td>a marker is clicked (<code>change</code> alone does not say <em>how</em> the story moved)</td>
116
+ </tr>
117
+ <tr>
118
+ <td><code>popupopen</code> / <code>popupclose</code></td>
119
+ <td><code>{ marker_number, current_slide }</code></td>
120
+ <td>a marker card opens / closes (button, Escape, deactivation, dispose)</td>
121
+ </tr>
122
+ <tr>
123
+ <td><code>basemapchange</code></td>
124
+ <td><code>{ map_type, previous }</code></td>
125
+ <td>the layer switcher swapped the basemap</td>
126
+ </tr>
127
+ <tr>
128
+ <td><code>overlaychange</code></td>
129
+ <td><code>{ index, visible }</code></td>
130
+ <td>the layer switcher toggled an overlay</td>
131
+ </tr>
132
+ </tbody></table>
133
+ <h2><code>Map</code> (engine) — subscribe on <code>storymap._map</code></h2>
134
+ <p><code>markerAdded</code> / <code>markerRemoved</code> fire <strong>only here</strong>, never on the viewer.
135
+ (<code>added</code> / <code>removed</code> from the <code>DomMixed</code> mixin exist on the engine too.)</p>
136
+ <table>
137
+ <thead>
138
+ <tr>
139
+ <th>Event</th>
140
+ <th>Payload</th>
141
+ <th>Fires when</th>
142
+ </tr>
143
+ </thead>
144
+ <tbody><tr>
145
+ <td><code>change</code></td>
146
+ <td><code>{ current_marker }</code></td>
147
+ <td>the engine navigated (consumed internally to drive <code>_navigate</code>)</td>
148
+ </tr>
149
+ <tr>
150
+ <td><code>loaded</code></td>
151
+ <td>the map data</td>
152
+ <td>the engine loaded (guarded against OL <code>loadend</code> repeats)</td>
153
+ </tr>
154
+ <tr>
155
+ <td><code>markerAdded</code> / <code>markerRemoved</code></td>
156
+ <td>the marker</td>
157
+ <td>marker created / destroyed</td>
158
+ </tr>
159
+ <tr>
160
+ <td><code>markerclick</code></td>
161
+ <td><code>{ marker_number }</code></td>
162
+ <td>a marker is clicked (consumed internally to navigate; re-fired on the viewer)</td>
163
+ </tr>
164
+ <tr>
165
+ <td><code>popupopen</code> / <code>popupclose</code></td>
166
+ <td><code>{ marker_number }</code></td>
167
+ <td>a marker card opens / closes (re-fired on the viewer)</td>
168
+ </tr>
169
+ <tr>
170
+ <td><code>imageready</code></td>
171
+ <td><code>{ source, kind, layer }</code></td>
172
+ <td>a source is usable (re-fired on the viewer; <code>layer</code> may be <code>null</code>)</td>
173
+ </tr>
174
+ <tr>
175
+ <td><code>tilesallowed</code></td>
176
+ <td><em>none</em></td>
177
+ <td>deferred tile layers attached after a tile consent grant (engine-only, never re-fired on the viewer)</td>
178
+ </tr>
179
+ </tbody></table>
180
+ <h2>Internal emitters</h2>
181
+ <p>Consumed inside the viewer; a host generally observes their effects through
182
+ the <code>StoryMap</code> events above.</p>
183
+ <table>
184
+ <thead>
185
+ <tr>
186
+ <th>Emitter</th>
187
+ <th>Events</th>
188
+ </tr>
189
+ </thead>
190
+ <tbody><tr>
191
+ <td><code>StorySlider</code></td>
192
+ <td><code>change {current_slide, uniqueid}</code>, <code>loaded</code>, <code>title {title}</code>, <code>colorchange</code>, <code>slideAdded</code>, <code>nav_next</code> / <code>nav_previous</code> / <code>nav_left</code> / <code>nav_right</code> (declared but never fired)</td>
193
+ </tr>
194
+ <tr>
195
+ <td><code>Slide</code></td>
196
+ <td><code>background_change</code>, <code>call_to_action</code>, <code>loaded</code>, <code>added</code>, <code>removed</code></td>
197
+ </tr>
198
+ <tr>
199
+ <td><code>SlideNav</code></td>
200
+ <td><code>clicked</code>, <code>loaded</code>, <code>added</code>, <code>removed</code></td>
201
+ </tr>
202
+ <tr>
203
+ <td><code>Media</code></td>
204
+ <td><code>loaded</code>, <code>media_loaded</code>, <code>media_ended</code> (fired by media subclasses with a playable element — what <code>autoplay_media</code> waits for), <code>added</code>, <code>removed</code></td>
205
+ </tr>
206
+ <tr>
207
+ <td><code>Text</code></td>
208
+ <td><code>loaded</code>, <code>added</code>, <code>removed</code></td>
209
+ </tr>
210
+ <tr>
211
+ <td><code>MapMarker</code></td>
212
+ <td><code>markerclick</code>, <code>popupopen</code>, <code>popupclose</code> (all <code>{marker_number}</code>; consumed by the engine)</td>
213
+ </tr>
214
+ <tr>
215
+ <td><code>MenuBar</code></td>
216
+ <td><code>overview</code>, <code>back_to_start</code>, <code>fullscreen</code>, <code>autoplay_toggle</code>, <code>progress_go {slide}</code> (consumed by the viewer to navigate), <code>collapse {y, collapsed}</code>, <code>basemapchange {map_type}</code>, <code>overlaychange {index, visible}</code> (the last two forwarded from the layer switcher and re-fired on the viewer)</td>
217
+ </tr>
218
+ <tr>
219
+ <td><code>Message</code></td>
220
+ <td><code>clicked</code> (consumed by the slider), <code>loaded</code>, <code>added</code>, <code>removed</code></td>
221
+ </tr>
222
+ <tr>
223
+ <td><code>Swipable</code></td>
224
+ <td><code>dragstart</code>, <code>dragend</code>, <code>dragmove</code>, <code>momentum</code>, <code>swipe_left</code> / <code>swipe_right</code> / <code>swipe_up</code> / <code>swipe_down</code>, <code>swipe_nodirection</code></td>
225
+ </tr>
226
+ </tbody></table>
227
+ <p><code>loaded</code> / <code>added</code> / <code>removed</code> come from the <code>DomMixed</code> mixin (<code>onLoaded</code> /
228
+ <code>onAdd</code> / <code>onRemove</code>); some emitters provide them without ever firing them.</p>
229
+
230
+ </main>
231
+
232
+ <footer class="footer-knightlab">
233
+ <div class="footer-grid">
234
+ <div>
235
+ <div class="footer-brand">StoryMap <span>JS</span></div>
236
+ <ul class="list-social">
237
+ <li>
238
+ <a href="https://github.com/cmahnke/StoryMapJS" title="StoryMapJS fork on GitHub"
239
+ >GitHub</a
240
+ >
241
+ </li>
242
+ <li>
243
+ <a href="https://github.com/NUKnightLab/StoryMapJS" title="Upstream Knight Lab repository"
244
+ >Upstream</a
245
+ >
246
+ </li>
247
+ </ul>
248
+ </div>
249
+ <div class="footer-description">
250
+ <p>
251
+ A TypeScript rewrite of
252
+ <a href="https://github.com/NUKnightLab/StoryMapJS">NUKnightLab/StoryMapJS</a>,
253
+ the original tool by
254
+ <a href="https://knightlab.northwestern.edu/">Northwestern University Knight Lab</a>.
255
+ </p>
256
+ <span class="copyright">
257
+ Released under the <a href="https://opensource.org/license/MPL-2-0">MPL-2.0</a> license.
258
+ </span>
259
+ </div>
260
+ </div>
261
+ </footer>
262
+ </body>
263
+ </html>