@panoramax/web-viewer 4.4.0-develop-3839b5a4 → 4.4.0-develop-d8b38e70

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 (341) hide show
  1. package/{src → build}/components/core/Basic.js +22 -16
  2. package/{src → build}/components/core/CoverageMap.js +19 -14
  3. package/{src → build}/components/core/Editor.js +16 -16
  4. package/{src → build}/components/core/PhotoViewer.js +30 -29
  5. package/{src → build}/components/core/Viewer.js +21 -20
  6. package/build/components/core/index.js +10 -0
  7. package/build/components/index.js +11 -0
  8. package/build/components/index_photoviewer.js +6 -0
  9. package/{src → build}/components/layout/BottomDrawer.js +4 -4
  10. package/{src → build}/components/layout/CorneredGrid.js +1 -1
  11. package/{src → build}/components/layout/Mini.js +5 -4
  12. package/{src → build}/components/layout/Tabs.js +1 -1
  13. package/build/components/layout/index.js +9 -0
  14. package/{src → build}/components/menus/LocationPrecisionDoc.js +4 -6
  15. package/{src → build}/components/menus/MapBackground.js +4 -6
  16. package/{src → build}/components/menus/MapFilters.js +16 -21
  17. package/{src → build}/components/menus/MapLayers.js +20 -24
  18. package/{src → build}/components/menus/MapLegend.js +3 -4
  19. package/{src → build}/components/menus/MiniPictureLegend.js +3 -4
  20. package/{src → build}/components/menus/PictureLegend.js +10 -15
  21. package/{src → build}/components/menus/PictureMetadata.js +12 -19
  22. package/{src → build}/components/menus/PlayerOptions.js +5 -7
  23. package/{src → build}/components/menus/QualityScoreDoc.js +3 -4
  24. package/{src → build}/components/menus/ReportForm.js +8 -9
  25. package/{src → build}/components/menus/SemanticsDoc.js +3 -4
  26. package/{src → build}/components/menus/SemanticsDownload.js +3 -3
  27. package/{src → build}/components/menus/SemanticsFilters.js +7 -8
  28. package/{src → build}/components/menus/SemanticsList.js +11 -18
  29. package/{src → build}/components/menus/SemanticsMetadata.js +8 -11
  30. package/{src → build}/components/menus/Share.js +6 -7
  31. package/build/components/menus/index.js +22 -0
  32. package/build/components/menus/index_photoviewer.js +11 -0
  33. package/{src → build}/components/styles.js +0 -2
  34. package/{src → build}/components/ui/AnnotationsSwitch.js +6 -8
  35. package/{src → build}/components/ui/Button.js +1 -1
  36. package/{src → build}/components/ui/ButtonGroup.js +2 -1
  37. package/{src → build}/components/ui/CopyButton.js +4 -6
  38. package/{src → build}/components/ui/Grade.js +5 -5
  39. package/{src → build}/components/ui/GradeFilter.js +3 -3
  40. package/{src → build}/components/ui/IconSwitch.js +1 -1
  41. package/{src → build}/components/ui/LinkButton.js +1 -1
  42. package/{src → build}/components/ui/ListGroup.js +3 -3
  43. package/{src → build}/components/ui/ListItem.js +1 -1
  44. package/{src → build}/components/ui/Loader.js +8 -7
  45. package/{src → build}/components/ui/Map.js +38 -26
  46. package/{src → build}/components/ui/MapMore.js +7 -7
  47. package/{src → build}/components/ui/Photo.js +29 -27
  48. package/{src → build}/components/ui/Popup.js +4 -4
  49. package/{src → build}/components/ui/QualityScore.js +4 -4
  50. package/{src → build}/components/ui/SearchBar.js +6 -7
  51. package/{src → build}/components/ui/SemanticsEditor.js +14 -15
  52. package/{src → build}/components/ui/SemanticsTable.js +4 -5
  53. package/{src → build}/components/ui/Switch.js +1 -1
  54. package/{src → build}/components/ui/TogglableGroup.js +4 -4
  55. package/build/components/ui/index.js +29 -0
  56. package/build/components/ui/index_photoviewer.js +21 -0
  57. package/{src → build}/components/ui/widgets/CopyCoordinates.js +5 -5
  58. package/{src → build}/components/ui/widgets/GeoSearch.js +10 -10
  59. package/{src → build}/components/ui/widgets/Legend.js +9 -8
  60. package/{src → build}/components/ui/widgets/LevelSelect.js +9 -7
  61. package/{src → build}/components/ui/widgets/MapFiltersButton.js +5 -5
  62. package/{src → build}/components/ui/widgets/MapLayersButton.js +5 -5
  63. package/{src → build}/components/ui/widgets/OSMEditors.js +8 -8
  64. package/{src → build}/components/ui/widgets/PictureLegendActions.js +4 -4
  65. package/{src → build}/components/ui/widgets/Player.js +6 -7
  66. package/{src → build}/components/ui/widgets/SemanticsFiltersButton.js +6 -7
  67. package/{src → build}/components/ui/widgets/Zoom.js +6 -6
  68. package/build/components/ui/widgets/index.js +16 -0
  69. package/build/components/ui/widgets/index_photoviewer.js +7 -0
  70. package/build/editor.html +94 -10
  71. package/{src → build}/img/arrow_triangle.svg +0 -1
  72. package/{src → build}/img/arrow_turn.svg +0 -1
  73. package/build/index.html +111 -1
  74. package/build/index.js +6 -95
  75. package/build/index_photoviewer.js +4 -0
  76. package/build/map.html +97 -1
  77. package/build/package.json +141 -0
  78. package/build/photo.html +85 -1
  79. package/build/servers.js +3 -4
  80. package/{src → build}/utils/API.js +33 -33
  81. package/{src → build}/utils/InitParameters.js +11 -9
  82. package/{src → build}/utils/MapStyleComposer.js +39 -37
  83. package/{src → build}/utils/PhotoAdapter.js +1 -0
  84. package/{src → build}/utils/PresetsManager.js +4 -4
  85. package/{src → build}/utils/SemanticsMapProtocol.js +3 -4
  86. package/{src → build}/utils/URLHandler.js +16 -14
  87. package/{src → build}/utils/geocoder.js +5 -5
  88. package/{src → build}/utils/i18n.js +21 -20
  89. package/build/utils/index.js +17 -0
  90. package/build/utils/index_photoviewer.js +14 -0
  91. package/{src → build}/utils/indoor.js +9 -5
  92. package/{src → build}/utils/map.js +15 -11
  93. package/{src → build}/utils/picture.js +22 -17
  94. package/{src → build}/utils/semantics.js +9 -5
  95. package/{src → build}/utils/utils.js +8 -4
  96. package/{src → build}/utils/widgets.js +2 -2
  97. package/build/viewer.html +120 -35
  98. package/build/viewer_indoor.html +90 -8
  99. package/build/widgets.html +410 -1
  100. package/package.json +81 -204
  101. package/.dockerignore +0 -7
  102. package/.gitlab-ci.yml +0 -78
  103. package/CHANGELOG.md +0 -853
  104. package/CODE_OF_CONDUCT.md +0 -134
  105. package/Dockerfile +0 -14
  106. package/build/index.css +0 -36
  107. package/build/index.css.map +0 -1
  108. package/build/index.js.map +0 -1
  109. package/build/photoviewer.css +0 -36
  110. package/build/photoviewer.css.map +0 -1
  111. package/build/photoviewer.js +0 -86
  112. package/build/photoviewer.js.map +0 -1
  113. package/build/static/media/atkinson-hyperlegible-next-latin-400-normal..woff +0 -0
  114. package/build/static/media/atkinson-hyperlegible-next-latin-400-normal..woff2 +0 -0
  115. package/build/static/media/atkinson-hyperlegible-next-latin-ext-400-normal..woff +0 -0
  116. package/build/static/media/atkinson-hyperlegible-next-latin-ext-400-normal..woff2 +0 -0
  117. package/config/env.js +0 -104
  118. package/config/getHttpsConfig.js +0 -69
  119. package/config/getPackageJson.js +0 -25
  120. package/config/jest/babelTransform.js +0 -29
  121. package/config/jest/cssTransform.js +0 -14
  122. package/config/jest/fileTransform.js +0 -40
  123. package/config/jest/mocks.js +0 -230
  124. package/config/modules.js +0 -134
  125. package/config/paths.js +0 -76
  126. package/config/pnpTs.js +0 -35
  127. package/config/webpack/persistentCache/createEnvironmentHash.js +0 -9
  128. package/config/webpack.config.js +0 -825
  129. package/config/webpackDevServer.config.js +0 -131
  130. package/docs/03_URL_settings.md +0 -218
  131. package/docs/05_Compatibility.md +0 -83
  132. package/docs/09_Develop.md +0 -141
  133. package/docs/90_Releases.md +0 -27
  134. package/docs/images/class_diagram.drawio +0 -144
  135. package/docs/images/class_diagram.jpg +0 -0
  136. package/docs/images/comparative_3drender.jpg +0 -0
  137. package/docs/images/indoor_level.png +0 -0
  138. package/docs/images/screenshot.jpg +0 -0
  139. package/docs/index.md +0 -159
  140. package/docs/reference/components/core/Basic.md +0 -211
  141. package/docs/reference/components/core/CoverageMap.md +0 -220
  142. package/docs/reference/components/core/Editor.md +0 -252
  143. package/docs/reference/components/core/PhotoViewer.md +0 -320
  144. package/docs/reference/components/core/Viewer.md +0 -398
  145. package/docs/reference/components/layout/BottomDrawer.md +0 -35
  146. package/docs/reference/components/layout/CorneredGrid.md +0 -29
  147. package/docs/reference/components/layout/Mini.md +0 -45
  148. package/docs/reference/components/layout/Tabs.md +0 -46
  149. package/docs/reference/components/menus/LocationPrecisionDoc.md +0 -15
  150. package/docs/reference/components/menus/MapBackground.md +0 -32
  151. package/docs/reference/components/menus/MapFilters.md +0 -37
  152. package/docs/reference/components/menus/MapLayers.md +0 -15
  153. package/docs/reference/components/menus/MapLegend.md +0 -32
  154. package/docs/reference/components/menus/MiniPictureLegend.md +0 -15
  155. package/docs/reference/components/menus/PictureLegend.md +0 -45
  156. package/docs/reference/components/menus/PictureMetadata.md +0 -32
  157. package/docs/reference/components/menus/PlayerOptions.md +0 -15
  158. package/docs/reference/components/menus/QualityScoreDoc.md +0 -15
  159. package/docs/reference/components/menus/ReportForm.md +0 -15
  160. package/docs/reference/components/menus/SemanticsDoc.md +0 -15
  161. package/docs/reference/components/menus/SemanticsDownload.md +0 -15
  162. package/docs/reference/components/menus/SemanticsFilters.md +0 -33
  163. package/docs/reference/components/menus/SemanticsList.md +0 -97
  164. package/docs/reference/components/menus/SemanticsMetadata.md +0 -15
  165. package/docs/reference/components/menus/ShareMenu.md +0 -32
  166. package/docs/reference/components/ui/AnnotationsSwitch.md +0 -32
  167. package/docs/reference/components/ui/Button.md +0 -40
  168. package/docs/reference/components/ui/ButtonGroup.md +0 -36
  169. package/docs/reference/components/ui/CopyButton.md +0 -41
  170. package/docs/reference/components/ui/Grade.md +0 -32
  171. package/docs/reference/components/ui/GradeFilter.md +0 -42
  172. package/docs/reference/components/ui/IconSwitch.md +0 -53
  173. package/docs/reference/components/ui/LinkButton.md +0 -45
  174. package/docs/reference/components/ui/ListGroup.md +0 -22
  175. package/docs/reference/components/ui/ListItem.md +0 -39
  176. package/docs/reference/components/ui/Loader.md +0 -56
  177. package/docs/reference/components/ui/Map.md +0 -150
  178. package/docs/reference/components/ui/MapMore.md +0 -150
  179. package/docs/reference/components/ui/Photo.md +0 -495
  180. package/docs/reference/components/ui/Popup.md +0 -56
  181. package/docs/reference/components/ui/ProgressBar.md +0 -32
  182. package/docs/reference/components/ui/QualityScore.md +0 -45
  183. package/docs/reference/components/ui/SearchBar.md +0 -63
  184. package/docs/reference/components/ui/SemanticsEditor.md +0 -113
  185. package/docs/reference/components/ui/SemanticsTable.md +0 -32
  186. package/docs/reference/components/ui/Switch.md +0 -49
  187. package/docs/reference/components/ui/TogglableGroup.md +0 -39
  188. package/docs/reference/components/ui/widgets/CopyCoordinates.md +0 -32
  189. package/docs/reference/components/ui/widgets/GeoSearch.md +0 -36
  190. package/docs/reference/components/ui/widgets/Legend.md +0 -58
  191. package/docs/reference/components/ui/widgets/LevelSelect.md +0 -16
  192. package/docs/reference/components/ui/widgets/MapFiltersButton.md +0 -37
  193. package/docs/reference/components/ui/widgets/MapLayersButton.md +0 -15
  194. package/docs/reference/components/ui/widgets/OSMEditors.md +0 -15
  195. package/docs/reference/components/ui/widgets/PictureLegendActions.md +0 -32
  196. package/docs/reference/components/ui/widgets/Player.md +0 -34
  197. package/docs/reference/components/ui/widgets/SemanticsFiltersButton.md +0 -15
  198. package/docs/reference/components/ui/widgets/Zoom.md +0 -15
  199. package/docs/reference/utils/API.md +0 -389
  200. package/docs/reference/utils/InitParameters.md +0 -68
  201. package/docs/reference/utils/MapStyleComposer.md +0 -408
  202. package/docs/reference/utils/PanoraMapProtocol.md +0 -28
  203. package/docs/reference/utils/PresetsManager.md +0 -43
  204. package/docs/reference/utils/SemanticsMapProtocol.md +0 -43
  205. package/docs/reference/utils/URLHandler.md +0 -114
  206. package/docs/reference.md +0 -99
  207. package/docs/shortcuts.md +0 -11
  208. package/docs/tutorials/aerial_imagery.md +0 -21
  209. package/docs/tutorials/authentication.md +0 -10
  210. package/docs/tutorials/custom_widgets.md +0 -59
  211. package/docs/tutorials/indoor_maps.md +0 -50
  212. package/docs/tutorials/map_style.md +0 -83
  213. package/docs/tutorials/migrate_v4.md +0 -153
  214. package/docs/tutorials/migrate_v5.md +0 -103
  215. package/docs/tutorials/semantics_overlays.md +0 -74
  216. package/docs/tutorials/synced_coverage.md +0 -43
  217. package/mkdocs.yml +0 -131
  218. package/public/editor.html +0 -53
  219. package/public/index.html +0 -70
  220. package/public/map.html +0 -55
  221. package/public/photo.html +0 -43
  222. package/public/servers.js +0 -15
  223. package/public/viewer.html +0 -79
  224. package/public/viewer_indoor.html +0 -48
  225. package/public/widgets.html +0 -366
  226. package/scripts/build.js +0 -217
  227. package/scripts/doc.js +0 -79
  228. package/scripts/start.js +0 -172
  229. package/scripts/test.js +0 -52
  230. package/src/components/core/index.js +0 -12
  231. package/src/components/index.js +0 -13
  232. package/src/components/index_photoviewer.js +0 -8
  233. package/src/components/layout/index.js +0 -9
  234. package/src/components/menus/index.js +0 -22
  235. package/src/components/menus/index_photoviewer.js +0 -13
  236. package/src/components/ui/index.js +0 -29
  237. package/src/components/ui/index_photoviewer.js +0 -23
  238. package/src/components/ui/widgets/index.js +0 -16
  239. package/src/components/ui/widgets/index_photoviewer.js +0 -9
  240. package/src/index.js +0 -8
  241. package/src/index_photoviewer.js +0 -6
  242. package/src/utils/index.js +0 -17
  243. package/src/utils/index_photoviewer.js +0 -16
  244. package/tests/components/core/Basic.test.js +0 -168
  245. package/tests/components/core/BasicMock.js +0 -25
  246. package/tests/components/core/CoverageMap.test.js +0 -20
  247. package/tests/components/core/Editor.test.js +0 -20
  248. package/tests/components/core/PhotoViewer.test.js +0 -57
  249. package/tests/components/core/Viewer.test.js +0 -85
  250. package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap +0 -96
  251. package/tests/components/core/__snapshots__/Viewer.test.js.snap +0 -188
  252. package/tests/components/ui/CopyButton.test.js +0 -52
  253. package/tests/components/ui/Loader.test.js +0 -55
  254. package/tests/components/ui/Map.test.js +0 -145
  255. package/tests/components/ui/Photo.test.js +0 -437
  256. package/tests/components/ui/Popup.test.js +0 -26
  257. package/tests/components/ui/QualityScore.test.js +0 -18
  258. package/tests/components/ui/SearchBar.test.js +0 -110
  259. package/tests/components/ui/__snapshots__/CopyButton.test.js.snap +0 -33
  260. package/tests/components/ui/__snapshots__/Loader.test.js.snap +0 -56
  261. package/tests/components/ui/__snapshots__/Map.test.js.snap +0 -16
  262. package/tests/components/ui/__snapshots__/Photo.test.js.snap +0 -263
  263. package/tests/components/ui/__snapshots__/Popup.test.js.snap +0 -29
  264. package/tests/components/ui/__snapshots__/QualityScore.test.js.snap +0 -11
  265. package/tests/components/ui/__snapshots__/SearchBar.test.js.snap +0 -65
  266. package/tests/data/Map_geocoder_ban.json +0 -36
  267. package/tests/data/Map_geocoder_nominatim.json +0 -41
  268. package/tests/data/Viewer_pictures_1.json +0 -148
  269. package/tests/setupTests.js +0 -5
  270. package/tests/utils/API.test.js +0 -752
  271. package/tests/utils/InitParameters.test.js +0 -599
  272. package/tests/utils/MapStyleComposer.test.js +0 -697
  273. package/tests/utils/PresetsManager.test.js +0 -123
  274. package/tests/utils/URLHandler.test.js +0 -587
  275. package/tests/utils/__snapshots__/API.test.js.snap +0 -40
  276. package/tests/utils/__snapshots__/MapStyleComposer.test.js.snap +0 -767
  277. package/tests/utils/__snapshots__/URLHandler.test.js.snap +0 -21
  278. package/tests/utils/__snapshots__/geocoder.test.js.snap +0 -37
  279. package/tests/utils/__snapshots__/map.test.js.snap +0 -1249
  280. package/tests/utils/__snapshots__/picture.test.js.snap +0 -327
  281. package/tests/utils/__snapshots__/widgets.test.js.snap +0 -19
  282. package/tests/utils/geocoder.test.js +0 -37
  283. package/tests/utils/i18n.test.js +0 -111
  284. package/tests/utils/map.test.js +0 -200
  285. package/tests/utils/picture.test.js +0 -745
  286. package/tests/utils/semantics.test.js +0 -174
  287. package/tests/utils/utils.test.js +0 -358
  288. package/tests/utils/widgets.test.js +0 -31
  289. /package/{src → build}/components/core/Basic.css +0 -0
  290. /package/{src → build}/components/core/CoverageMap.css +0 -0
  291. /package/{src → build}/components/core/Editor.css +0 -0
  292. /package/{src → build}/components/core/PhotoViewer.css +0 -0
  293. /package/{src → build}/components/core/Viewer.css +0 -0
  294. /package/{src → build}/components/ui/ButtonGroup.css +0 -0
  295. /package/{src → build}/components/ui/Map.css +0 -0
  296. /package/{src → build}/components/ui/Photo.css +0 -0
  297. /package/{src → build}/components/ui/ProgressBar.js +0 -0
  298. /package/{src → build}/components/ui/widgets/GeoSearch.css +0 -0
  299. /package/{src → build}/components/ui/widgets/LevelSelect.css +0 -0
  300. /package/{src → build}/components/ui/widgets/Player.css +0 -0
  301. /package/{public → build}/favicon.ico +0 -0
  302. /package/{src → build}/img/arrow_360.svg +0 -0
  303. /package/{src → build}/img/arrow_flat.svg +0 -0
  304. /package/{src → build}/img/bg_aerial.jpg +0 -0
  305. /package/{src → build}/img/bg_streets.jpg +0 -0
  306. /package/{src → build}/img/loader_base.jpg +0 -0
  307. /package/{src → build}/img/logo_dead.svg +0 -0
  308. /package/{src → build}/img/marker.svg +0 -0
  309. /package/{src → build}/img/marker_blue.svg +0 -0
  310. /package/{src → build}/img/osm.svg +0 -0
  311. /package/{src → build}/img/panoramax.svg +0 -0
  312. /package/{src → build}/img/switch_big.svg +0 -0
  313. /package/{src → build}/img/switch_mini.svg +0 -0
  314. /package/{src → build}/img/wd.svg +0 -0
  315. /package/{src → build}/translations/ar.json +0 -0
  316. /package/{src → build}/translations/be.json +0 -0
  317. /package/{src → build}/translations/br.json +0 -0
  318. /package/{src → build}/translations/cy.json +0 -0
  319. /package/{src → build}/translations/da.json +0 -0
  320. /package/{src → build}/translations/de.json +0 -0
  321. /package/{src → build}/translations/en.json +0 -0
  322. /package/{src → build}/translations/eo.json +0 -0
  323. /package/{src → build}/translations/es.json +0 -0
  324. /package/{src → build}/translations/fi.json +0 -0
  325. /package/{src → build}/translations/fr.json +0 -0
  326. /package/{src → build}/translations/hu.json +0 -0
  327. /package/{src → build}/translations/it.json +0 -0
  328. /package/{src → build}/translations/ja.json +0 -0
  329. /package/{src → build}/translations/ko.json +0 -0
  330. /package/{src → build}/translations/nl.json +0 -0
  331. /package/{src → build}/translations/nn.json +0 -0
  332. /package/{src → build}/translations/pl.json +0 -0
  333. /package/{src → build}/translations/pt.json +0 -0
  334. /package/{src → build}/translations/pt_BR.json +0 -0
  335. /package/{src → build}/translations/sv.json +0 -0
  336. /package/{src → build}/translations/ti.json +0 -0
  337. /package/{src → build}/translations/tr.json +0 -0
  338. /package/{src → build}/translations/uk.json +0 -0
  339. /package/{src → build}/translations/zh_Hant.json +0 -0
  340. /package/{src → build}/utils/PanoraMapProtocol.js +0 -0
  341. /package/{src → build}/utils/services.js +0 -0
package/build/viewer_indoor.html CHANGED
@@ -1,9 +1,91 @@
1
- <!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><title>Panoramax Web Viewer - Indoor</title><script src="https://unpkg.com/maplibre-gl-indoorequal@1.3.0/dist/maplibre-gl-indoorequal.umd.min.js"></script><link href="https://unpkg.com/maplibre-gl-indoorequal@1.3.0/maplibre-gl-indoorequal.css" rel="stylesheet"/><style>#viewer{position:relative;width:95%;margin:2.5%;height:400px}#viewer.fullpage{position:fixed;top:0;bottom:0;left:0;right:0;height:unset;width:unset;margin:0}</style><script defer="defer" src="index.js"></script><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><pnx-viewer id="viewer" class="fullpage" endpoint="https://panoramax.openstreetmap.fr/api" map-options='{
2
- center: [-1.55958, 47.2135],
3
- zoom: 19,
4
- indoor: {
5
- apiKey: "iek_yFQp8AMQpK78c8wPyAvbXY3ko6nh",
6
- heatmap: false,
7
- level: "2"
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, shrink-to-fit=no" />
6
+ <title>Panoramax Web Viewer - Indoor</title>
7
+ <script src="https://unpkg.com/maplibre-gl-indoorequal@1.3.0/dist/maplibre-gl-indoorequal.umd.min.js"></script>
8
+ <link href="https://unpkg.com/maplibre-gl-indoorequal@1.3.0/maplibre-gl-indoorequal.css" rel="stylesheet" />
9
+ <style>
10
+ #viewer {
11
+ position: relative;
12
+ width: 95%;
13
+ margin: 2.5%;
14
+ height: 400px;
8
15
  }
9
- }'></pnx-viewer></body></html>
16
+ #viewer.fullpage {
17
+ position: fixed;
18
+ top: 0;
19
+ bottom: 0;
20
+ left: 0;
21
+ right: 0;
22
+ height: unset;
23
+ width: unset;
24
+ margin: 0;
25
+ }
26
+ </style>
27
+
28
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.21.1/dist/maplibre-gl.css" />
29
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.1/index.css" />
30
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/virtual-tour-plugin@5.14.1/index.css" />
31
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin@5.14.1/index.css" />
32
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin@5.14.1/index.css" />
33
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/atkinson-hyperlegible-next/index.css" />
34
+ </head>
35
+ <body>
36
+ <script type="importmap">
37
+ {
38
+ "imports": {
39
+ "@fortawesome/fontawesome-svg-core": "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-svg-core@6.7.2/index.mjs",
40
+ "@fortawesome/free-regular-svg-icons": "https://cdn.jsdelivr.net/npm/@fortawesome/free-regular-svg-icons@6.7.2/index.mjs",
41
+ "@fortawesome/free-solid-svg-icons": "https://cdn.jsdelivr.net/npm/@fortawesome/free-solid-svg-icons@6.7.2/index.mjs",
42
+ "@maplibre/vt-pbf": "https://cdn.jsdelivr.net/npm/@maplibre/vt-pbf@4.3.0/dist/index.es.js",
43
+ "@mapbox/vector-tile": "https://cdn.jsdelivr.net/npm/@mapbox/vector-tile@2.0.4/index.js",
44
+ "@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.1/index.module.js",
45
+ "@photo-sphere-viewer/equirectangular-tiles-adapter": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/equirectangular-tiles-adapter@5.14.1/index.module.js",
46
+ "@photo-sphere-viewer/gallery-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin@5.14.1/index.module.js",
47
+ "@photo-sphere-viewer/markers-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin@5.14.1/index.module.js",
48
+ "@photo-sphere-viewer/compass-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/compass-plugin@5.14.1/index.module.js",
49
+ "@photo-sphere-viewer/virtual-tour-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/virtual-tour-plugin@5.14.1/index.module.js",
50
+ "geojson-vt": "https://cdn.jsdelivr.net/npm/geojson-vt@4.0.2/src/index.js",
51
+ "iconify-icon": "https://cdn.jsdelivr.net/npm/iconify-icon@3.0.2/dist/iconify-icon.mjs",
52
+ "json5": "https://cdn.jsdelivr.net/npm/json5@2.2.3/dist/index.min.mjs",
53
+ "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.2/index.js",
54
+ "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.2/",
55
+ "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.2/lit-html.js",
56
+ "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3.3.2/",
57
+ "lit-element/": "https://cdn.jsdelivr.net/npm/lit-element@4.2.2/",
58
+ "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl@5.21.1/dist/maplibre-gl.js",
59
+ "pmtiles": "https://cdn.jsdelivr.net/npm/pmtiles@4.4.0/dist/esm/index.js",
60
+ "query-selector-shadow-dom": "https://cdn.jsdelivr.net/npm/query-selector-shadow-dom@1.0.0/dist/querySelectorShadowDom.js",
61
+ "@panoramax/web-viewer": "./src/index.js",
62
+ "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.2/reactive-element.js",
63
+ "@mapbox/point-geometry": "https://cdn.jsdelivr.net/npm/@mapbox/point-geometry@1.1.0/index.js",
64
+ "fflate": "https://cdn.jsdelivr.net/npm/fflate@0.8.2/esm/browser.js",
65
+ "pbf": "https://cdn.jsdelivr.net/npm/pbf@4.0.1/index.js",
66
+ "three": "https://cdn.jsdelivr.net/npm/three@0.179.1/build/three.module.js"
67
+ }
68
+ }
69
+ </script>
70
+ <noscript>
71
+ You need to enable JavaScript to run this app.
72
+ </noscript>
73
+
74
+ <pnx-viewer
75
+ id="viewer"
76
+ class="fullpage"
77
+ endpoint="https://panoramax.openstreetmap.fr/api"
78
+ map-options='{
79
+ center: [-1.55958, 47.2135],
80
+ zoom: 19,
81
+ indoor: {
82
+ apiKey: "iek_yFQp8AMQpK78c8wPyAvbXY3ko6nh",
83
+ heatmap: false,
84
+ level: "2"
85
+ }
86
+ }'
87
+ ></pnx-viewer>
88
+
89
+ <script type="module" src="./index.js"></script>
90
+ </body>
91
+ </html>
package/build/widgets.html CHANGED
@@ -1 +1,410 @@
1
- <!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><title>Panoramax Widgets</title><style>body{font-family:sans-serif;padding-bottom:100px}h1,h2,nav,p{text-align:center}.test-bench{display:flex;width:100%;max-width:600px;margin:7px auto;justify-content:space-between;align-items:center}.test-bench h3{margin:0}hr.test-sep{width:100%;max-width:600px}</style><script defer="defer" src="index.js"></script><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><h1>Panoramax widgets</h1><p>Test page for common Panoramax viewer widgets</p><nav><a href="#button">Button</a> <a href="#link-button">Link Button</a> <a href="#copy-button">Copy button</a> <a href="#button-group">Button Group</a> <a href="#5stars">5-stars grade</a> <a href="#quality-score">Quality Score</a> <a href="#search-bar">Search bar</a> <a href="#progress-bar">Progress bar</a> <a href="#tabs">Tabs</a> <a href="#semantics-editor">Semantics Editor</a> <a href="#switch">Switch</a></nav><h2 id="button">Button</h2><div class="test-bench"><h3>Text + click</h3><pnx-button onclick='alert("Stuff")'>Click to do stuff</pnx-button></div><div class="test-bench"><h3>Icon</h3><pnx-button>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Active</h3><pnx-button active="true">Settings</pnx-button></div><div class="test-bench"><h3>CSS override</h3><div style="width:50%;display:flex;gap:5px;max-width:300px"><pnx-button style="width:50%">⚙️ Settings</pnx-button><pnx-button style="width:50%">🖨️ Print</pnx-button></div></div><hr class="test-sep"/><div class="test-bench"><h3>Full</h3><pnx-button kind="full">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Full active</h3><pnx-button kind="full" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Full L</h3><pnx-button kind="full" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Full XXL</h3><pnx-button kind="full" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Outline</h3><pnx-button kind="outline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Outline active</h3><pnx-button kind="outline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Outline L</h3><pnx-button kind="outline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Outline XXL</h3><pnx-button kind="outline" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Inline</h3><pnx-button kind="inline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Inline active</h3><pnx-button kind="inline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Inline L</h3><pnx-button kind="inline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Inline XXL</h3><pnx-button kind="inline" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Superinline</h3><pnx-button kind="superinline">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superinline active</h3><pnx-button kind="superinline" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superinline L</h3><pnx-button kind="superinline" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Superinline XXL</h3><pnx-button kind="superinline" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Flat</h3><pnx-button kind="flat">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Flat active</h3><pnx-button kind="flat" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Flat L</h3><pnx-button kind="flat" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Flat XXL</h3><pnx-button kind="flat" size="xxl">⚙️</pnx-button></div><div class="test-bench"><h3>Superflat</h3><pnx-button kind="superflat">⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superflat active</h3><pnx-button kind="superflat" active>⚙️ Settings</pnx-button></div><div class="test-bench"><h3>Superflat L</h3><pnx-button kind="superflat" size="l">⚙️</pnx-button></div><div class="test-bench"><h3>Superflat XXL</h3><pnx-button kind="superflat" size="xxl">⚙️</pnx-button></div><h2 id="link-button">Link Button</h2><div class="test-bench"><h3>None set</h3><pnx-link-button>Click for nothing</pnx-link-button></div><div class="test-bench"><h3>All set</h3><pnx-link-button target="_blank" href="https://panoramax.fr" title="Do stuff">Click to do stuff</pnx-link-button></div><h2 id="copy-button">Copy button</h2><div class="test-bench"><h3>Default + text</h3><pnx-copy-button text="copypasta1"></pnx-copy-button></div><div class="test-bench"><h3>Custom + text</h3><pnx-copy-button text="copypasta2">🌐 Share URL</pnx-copy-button></div><div class="test-bench"><h3>Default + input</h3><div style="display:flex;gap:5px;align-items:center"><input value="copypasta3" id="copy-input-1"/><pnx-copy-button input="copy-input-1"></pnx-copy-button></div></div><h2 id="button-group">Button Group</h2><div class="test-bench"><h3>Full Row x2</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Row x3</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-button>😐</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Row mixed</h3><div><pnx-button-group dir="row"><pnx-button>☹️</pnx-button><pnx-link-button>😐</pnx-link-button><pnx-copy-button>🙂</pnx-copy-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column x2</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column x3</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-button>😐</pnx-button><pnx-button>🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Full Column mixed</h3><div><pnx-button-group dir="column"><pnx-button>☹️</pnx-button><pnx-link-button>😐</pnx-link-button><pnx-copy-button>🙂</pnx-copy-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Outline Row x2</h3><div><pnx-button-group dir="row"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Row x3</h3><div><pnx-button-group dir="row"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">😐</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Column x2</h3><div><pnx-button-group dir="column"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Outline Column x3</h3><div><pnx-button-group dir="column"><pnx-button kind="outline">☹️</pnx-button><pnx-button kind="outline">😐</pnx-button><pnx-button kind="outline">🙂</pnx-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Flat Row x2</h3><div><pnx-button-group dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Row x3</h3><div><pnx-button-group dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Column x2</h3><div><pnx-button-group dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Flat Column x3</h3><div><pnx-button-group dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><hr class="test-sep"/><div class="test-bench"><h3>Row XL</h3><div><pnx-button-group size="xl" dir="row"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><div class="test-bench"><h3>Column XL</h3><div><pnx-button-group size="xl" dir="column"><pnx-button kind="flat">☹️</pnx-button><pnx-button kind="flat">😐</pnx-button><pnx-button kind="flat">🙂</pnx-button></pnx-button-group></div></div><h2 id="5stars">5-stars grade</h2><div class="test-bench"><h3>With a grade</h3><pnx-grade stars="5"/></div><div class="test-bench"><h3>Without a grade</h3><pnx-grade/></div><h2 id="quality-score">Quality Score</h2><div class="test-bench"><h3>Classic no grade</h3><pnx-quality-score/></div><div class="test-bench"><h3>Classic 1/5</h3><pnx-quality-score grade="1"/></div><div class="test-bench"><h3>Classic 2/5</h3><pnx-quality-score grade="2"/></div><div class="test-bench"><h3>Classic 3/5</h3><pnx-quality-score grade="3"/></div><div class="test-bench"><h3>Classic 4/5</h3><pnx-quality-score grade="4"/></div><div class="test-bench"><h3>Classic 5/5</h3><pnx-quality-score grade="5"/></div><hr class="test-sep"/><div class="test-bench"><h3>Input</h3><pnx-quality-score input="qs"/></div><div class="test-bench"><h3>Input 1/5</h3><pnx-quality-score input="qs" grade="1"/></div><div class="test-bench"><h3>Input 2/5</h3><pnx-quality-score input="qs" grade="2"/></div><div class="test-bench"><h3>Input 3/5</h3><pnx-quality-score input="qs" grade="3"/></div><div class="test-bench"><h3>Input 4/5</h3><pnx-quality-score input="qs" grade="4"/></div><div class="test-bench"><h3>Input 5/5</h3><pnx-quality-score input="qs" grade="5"/></div><div class="test-bench"><h3>Input many</h3><pnx-quality-score input="qs" grade="1,3,5"/></div><h2 id="search-bar">Search bar</h2><div class="test-bench"><h3>Simple</h3><pnx-search-bar placeholder="Start your search"></pnx-search-bar></div><div class="test-bench"><h3>With pre</h3><pnx-search-bar placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Reduced</h3><pnx-search-bar reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><hr class="test-sep"/><div class="test-bench"><h3>Size md full</h3><pnx-search-bar size="md" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Size md reduced</h3><pnx-search-bar size="md" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><div class="test-bench"><h3>Size xxl full</h3><pnx-search-bar size="xxl" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div><div class="test-bench"><h3>Size xxl reduced</h3><pnx-search-bar size="xxl" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div><h2 id="progress-bar">Progress bar</h2><div class="test-bench"><h3>Half</h3><pnx-progress-bar value="42"></pnx-progress-bar></div><div class="test-bench"><h3>Indeterminate</h3><pnx-progress-bar></pnx-progress-bar></div><div class="test-bench"><h3>Full</h3><pnx-progress-bar value="100"></pnx-progress-bar></div><h2 id="tabs">Tabs</h2><div class="test-bench"><h3>Many</h3><pnx-tabs><h4 slot="title">Tab 1</h4><div slot="content">Tab 1 content</div><h4 slot="title">Tab 2</h4><div slot="content">Tab 2 content</div><h4 slot="title">Tab 3</h4><div slot="content">Tab 3 content</div></pnx-tabs></div><h2 id="semantics-editor">Semantics editor</h2><script>window.addEventListener("load",(()=>{const e=document.getElementsByTagName("pnx-semantics-editor");for(let t=0;t<e.length;t++){const n=e[t];n.nextSibling;n.addEventListener("change",(e=>{console.log("Semantics change > evt =",e.detail,"| attr =",n.getAttribute("semantics"))}))}}))</script><div class="test-bench"><h3>Empty</h3><pnx-semantics-editor _t='{"pnx": {"semantics_editor_error": "La syntaxe est invalide. Vos attributs doivent avoir cette forme:\nclé=valeur\npréfixe|clé=valeur\npréfixe|clé[qualif_clé=qualif_val]=valeur\n\nLongueur max des clés : 256 caractères, max des valeurs 2048 caractères.","semantics_editor_example": "clé=valeur\npréfixe|clé=valeur"}}'></pnx-semantics-editor></div><div class="test-bench"><h3>Filled</h3><pnx-semantics-editor semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor></div><div class="test-bench"><h3>Many rows</h3><pnx-semantics-editor rows="5" semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor></div><div class="test-bench"><h3>Custom style</h3><style>#pnx-sem-ed3::part(text){color:#00f}</style><pnx-semantics-editor id="pnx-sem-ed3" semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor></div><h2 id="switch">Switch</h2><div class="test-bench"><h3>Classic</h3><pnx-switch name="sw1">Label text</pnx-switch></div><div class="test-bench"><h3>Switched</h3><pnx-switch name="sw2" checked="true">Label text</pnx-switch></div><div class="test-bench"><h3>Disabled</h3><pnx-switch name="sw3" disabled="true">Label text</pnx-switch></div><div class="test-bench"><h3>Switched disabled</h3><pnx-switch name="sw4" checked="true" disabled="true">Label text</pnx-switch></div><div class="test-bench"><h3>Icon switch</h3><pnx-icon-switch name="isw1"><span slot="icon-left">⏪</span> <span slot="label-left">Left</span> <span slot="icon-right">⏩</span> <span slot="label-right">Right</span></pnx-icon-switch></div></body></html>
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, shrink-to-fit=no" />
6
+ <title>Panoramax Widgets</title>
7
+ <style>
8
+ body {
9
+ font-family: sans-serif;
10
+ padding-bottom: 100px;
11
+ }
12
+ h1, h2, p, nav { text-align: center; }
13
+ .test-bench {
14
+ display: flex;
15
+ width: 100%;
16
+ max-width: 600px;
17
+ margin: 7px auto;
18
+ justify-content: space-between;
19
+ align-items: center;
20
+ }
21
+ .test-bench h3 { margin: 0; }
22
+ hr.test-sep {
23
+ width: 100%;
24
+ max-width: 600px;
25
+ }
26
+ </style>
27
+
28
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.21.1/dist/maplibre-gl.css" />
29
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.1/index.css" />
30
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/virtual-tour-plugin@5.14.1/index.css" />
31
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin@5.14.1/index.css" />
32
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin@5.14.1/index.css" />
33
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/atkinson-hyperlegible-next/index.css" />
34
+ </head>
35
+ <body>
36
+ <script type="importmap">
37
+ {
38
+ "imports": {
39
+ "@fortawesome/fontawesome-svg-core": "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-svg-core@6.7.2/index.mjs",
40
+ "@fortawesome/free-regular-svg-icons": "https://cdn.jsdelivr.net/npm/@fortawesome/free-regular-svg-icons@6.7.2/index.mjs",
41
+ "@fortawesome/free-solid-svg-icons": "https://cdn.jsdelivr.net/npm/@fortawesome/free-solid-svg-icons@6.7.2/index.mjs",
42
+ "@maplibre/vt-pbf": "https://cdn.jsdelivr.net/npm/@maplibre/vt-pbf@4.3.0/dist/index.es.js",
43
+ "@mapbox/vector-tile": "https://cdn.jsdelivr.net/npm/@mapbox/vector-tile@2.0.4/index.js",
44
+ "@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.1/index.module.js",
45
+ "@photo-sphere-viewer/equirectangular-tiles-adapter": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/equirectangular-tiles-adapter@5.14.1/index.module.js",
46
+ "@photo-sphere-viewer/gallery-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin@5.14.1/index.module.js",
47
+ "@photo-sphere-viewer/markers-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin@5.14.1/index.module.js",
48
+ "@photo-sphere-viewer/compass-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/compass-plugin@5.14.1/index.module.js",
49
+ "@photo-sphere-viewer/virtual-tour-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/virtual-tour-plugin@5.14.1/index.module.js",
50
+ "geojson-vt": "https://cdn.jsdelivr.net/npm/geojson-vt@4.0.2/src/index.js",
51
+ "iconify-icon": "https://cdn.jsdelivr.net/npm/iconify-icon@3.0.2/dist/iconify-icon.mjs",
52
+ "json5": "https://cdn.jsdelivr.net/npm/json5@2.2.3/dist/index.min.mjs",
53
+ "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.2/index.js",
54
+ "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.2/",
55
+ "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.2/lit-html.js",
56
+ "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3.3.2/",
57
+ "lit-element/": "https://cdn.jsdelivr.net/npm/lit-element@4.2.2/",
58
+ "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl@5.21.1/dist/maplibre-gl.js",
59
+ "pmtiles": "https://cdn.jsdelivr.net/npm/pmtiles@4.4.0/dist/esm/index.js",
60
+ "query-selector-shadow-dom": "https://cdn.jsdelivr.net/npm/query-selector-shadow-dom@1.0.0/dist/querySelectorShadowDom.js",
61
+ "@panoramax/web-viewer": "./src/index.js",
62
+ "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.2/reactive-element.js",
63
+ "@mapbox/point-geometry": "https://cdn.jsdelivr.net/npm/@mapbox/point-geometry@1.1.0/index.js",
64
+ "fflate": "https://cdn.jsdelivr.net/npm/fflate@0.8.2/esm/browser.js",
65
+ "pbf": "https://cdn.jsdelivr.net/npm/pbf@4.0.1/index.js",
66
+ "three": "https://cdn.jsdelivr.net/npm/three@0.179.1/build/three.module.js"
67
+ }
68
+ }
69
+ </script>
70
+ <noscript>You need to enable JavaScript to run this app.</noscript>
71
+
72
+ <script type="module" src="./index.js"></script>
73
+
74
+ <h1>Panoramax widgets</h1>
75
+ <p>Test page for common Panoramax viewer widgets</p>
76
+ <nav>
77
+ <a href="#button">Button</a>
78
+ <a href="#link-button">Link Button</a>
79
+ <a href="#copy-button">Copy button</a>
80
+ <a href="#button-group">Button Group</a>
81
+ <a href="#5stars">5-stars grade</a>
82
+ <a href="#quality-score">Quality Score</a>
83
+ <a href="#search-bar">Search bar</a>
84
+ <a href="#progress-bar">Progress bar</a>
85
+ <a href="#tabs">Tabs</a>
86
+ <a href="#semantics-editor">Semantics Editor</a>
87
+ <a href="#switch">Switch</a>
88
+ </nav>
89
+
90
+ <h2 id="button">Button</h2>
91
+ <div class="test-bench"><h3>Text + click</h3><pnx-button onclick="alert('Stuff')">Click to do stuff</pnx-button></div>
92
+ <div class="test-bench"><h3>Icon</h3><pnx-button>⚙️ Settings</pnx-button></div>
93
+ <div class="test-bench"><h3>Active</h3><pnx-button active="true">Settings</pnx-button></div>
94
+ <div class="test-bench">
95
+ <h3>CSS override</h3>
96
+ <div style="width: 50%; display: flex; gap: 5px; max-width: 300px">
97
+ <pnx-button style="width: 50%;">⚙️ Settings</pnx-button>
98
+ <pnx-button style="width: 50%;">🖨️ Print</pnx-button>
99
+ </div>
100
+ </div>
101
+ <hr class="test-sep" />
102
+ <div class="test-bench"><h3>Full</h3><pnx-button kind="full">⚙️ Settings</pnx-button></div>
103
+ <div class="test-bench"><h3>Full active</h3><pnx-button kind="full" active>⚙️ Settings</pnx-button></div>
104
+ <div class="test-bench"><h3>Full L</h3><pnx-button kind="full" size="l">⚙️</pnx-button></div>
105
+ <div class="test-bench"><h3>Full XXL</h3><pnx-button kind="full" size="xxl">⚙️</pnx-button></div>
106
+ <div class="test-bench"><h3>Outline</h3><pnx-button kind="outline">⚙️ Settings</pnx-button></div>
107
+ <div class="test-bench"><h3>Outline active</h3><pnx-button kind="outline" active>⚙️ Settings</pnx-button></div>
108
+ <div class="test-bench"><h3>Outline L</h3><pnx-button kind="outline" size="l">⚙️</pnx-button></div>
109
+ <div class="test-bench"><h3>Outline XXL</h3><pnx-button kind="outline" size="xxl">⚙️</pnx-button></div>
110
+ <div class="test-bench"><h3>Inline</h3><pnx-button kind="inline">⚙️ Settings</pnx-button></div>
111
+ <div class="test-bench"><h3>Inline active</h3><pnx-button kind="inline" active>⚙️ Settings</pnx-button></div>
112
+ <div class="test-bench"><h3>Inline L</h3><pnx-button kind="inline" size="l">⚙️</pnx-button></div>
113
+ <div class="test-bench"><h3>Inline XXL</h3><pnx-button kind="inline" size="xxl">⚙️</pnx-button></div>
114
+ <div class="test-bench"><h3>Superinline</h3><pnx-button kind="superinline">⚙️ Settings</pnx-button></div>
115
+ <div class="test-bench"><h3>Superinline active</h3><pnx-button kind="superinline" active>⚙️ Settings</pnx-button></div>
116
+ <div class="test-bench"><h3>Superinline L</h3><pnx-button kind="superinline" size="l">⚙️</pnx-button></div>
117
+ <div class="test-bench"><h3>Superinline XXL</h3><pnx-button kind="superinline" size="xxl">⚙️</pnx-button></div>
118
+ <div class="test-bench"><h3>Flat</h3><pnx-button kind="flat">⚙️ Settings</pnx-button></div>
119
+ <div class="test-bench"><h3>Flat active</h3><pnx-button kind="flat" active>⚙️ Settings</pnx-button></div>
120
+ <div class="test-bench"><h3>Flat L</h3><pnx-button kind="flat" size="l">⚙️</pnx-button></div>
121
+ <div class="test-bench"><h3>Flat XXL</h3><pnx-button kind="flat" size="xxl">⚙️</pnx-button></div>
122
+ <div class="test-bench"><h3>Superflat</h3><pnx-button kind="superflat">⚙️ Settings</pnx-button></div>
123
+ <div class="test-bench"><h3>Superflat active</h3><pnx-button kind="superflat" active>⚙️ Settings</pnx-button></div>
124
+ <div class="test-bench"><h3>Superflat L</h3><pnx-button kind="superflat" size="l">⚙️</pnx-button></div>
125
+ <div class="test-bench"><h3>Superflat XXL</h3><pnx-button kind="superflat" size="xxl">⚙️</pnx-button></div>
126
+
127
+ <h2 id="link-button">Link Button</h2>
128
+ <div class="test-bench"><h3>None set</h3><pnx-link-button>Click for nothing</pnx-link-button></div>
129
+ <div class="test-bench"><h3>All set</h3><pnx-link-button target="_blank" href="https://panoramax.fr" title="Do stuff">Click to do stuff</pnx-link-button></div>
130
+
131
+ <h2 id="copy-button">Copy button</h2>
132
+ <div class="test-bench"><h3>Default + text</h3><pnx-copy-button text="copypasta1"></pnx-copy-button></div>
133
+ <div class="test-bench"><h3>Custom + text</h3><pnx-copy-button text="copypasta2">🌐 Share URL</pnx-copy-button></div>
134
+ <div class="test-bench">
135
+ <h3>Default + input</h3>
136
+ <div style="display: flex; gap: 5px; align-items: center;">
137
+ <input type="text" value="copypasta3" id="copy-input-1" />
138
+ <pnx-copy-button input="copy-input-1"></pnx-copy-button>
139
+ </div>
140
+ </div>
141
+
142
+ <h2 id="button-group">Button Group</h2>
143
+ <div class="test-bench">
144
+ <h3>Full Row x2</h3>
145
+ <div>
146
+ <pnx-button-group dir="row">
147
+ <pnx-button>☹️</pnx-button>
148
+ <pnx-button>🙂</pnx-button>
149
+ </pnx-button-group>
150
+ </div>
151
+ </div>
152
+ <div class="test-bench">
153
+ <h3>Full Row x3</h3>
154
+ <div>
155
+ <pnx-button-group dir="row">
156
+ <pnx-button>☹️</pnx-button>
157
+ <pnx-button>😐</pnx-button>
158
+ <pnx-button>🙂</pnx-button>
159
+ </pnx-button-group>
160
+ </div>
161
+ </div>
162
+ <div class="test-bench">
163
+ <h3>Full Row mixed</h3>
164
+ <div>
165
+ <pnx-button-group dir="row">
166
+ <pnx-button>☹️</pnx-button>
167
+ <pnx-link-button>😐</pnx-link-button>
168
+ <pnx-copy-button>🙂</pnx-copy-button>
169
+ </pnx-button-group>
170
+ </div>
171
+ </div>
172
+ <div class="test-bench">
173
+ <h3>Full Column x2</h3>
174
+ <div>
175
+ <pnx-button-group dir="column">
176
+ <pnx-button>☹️</pnx-button>
177
+ <pnx-button>🙂</pnx-button>
178
+ </pnx-button-group>
179
+ </div>
180
+ </div>
181
+ <div class="test-bench">
182
+ <h3>Full Column x3</h3>
183
+ <div>
184
+ <pnx-button-group dir="column">
185
+ <pnx-button>☹️</pnx-button>
186
+ <pnx-button>😐</pnx-button>
187
+ <pnx-button>🙂</pnx-button>
188
+ </pnx-button-group>
189
+ </div>
190
+ </div>
191
+ <div class="test-bench">
192
+ <h3>Full Column mixed</h3>
193
+ <div>
194
+ <pnx-button-group dir="column">
195
+ <pnx-button>☹️</pnx-button>
196
+ <pnx-link-button>😐</pnx-link-button>
197
+ <pnx-copy-button>🙂</pnx-copy-button>
198
+ </pnx-button-group>
199
+ </div>
200
+ </div>
201
+ <hr class="test-sep" />
202
+ <div class="test-bench">
203
+ <h3>Outline Row x2</h3>
204
+ <div>
205
+ <pnx-button-group dir="row">
206
+ <pnx-button kind="outline">☹️</pnx-button>
207
+ <pnx-button kind="outline">🙂</pnx-button>
208
+ </pnx-button-group>
209
+ </div>
210
+ </div>
211
+ <div class="test-bench">
212
+ <h3>Outline Row x3</h3>
213
+ <div>
214
+ <pnx-button-group dir="row">
215
+ <pnx-button kind="outline">☹️</pnx-button>
216
+ <pnx-button kind="outline">😐</pnx-button>
217
+ <pnx-button kind="outline">🙂</pnx-button>
218
+ </pnx-button-group>
219
+ </div>
220
+ </div>
221
+ <div class="test-bench">
222
+ <h3>Outline Column x2</h3>
223
+ <div>
224
+ <pnx-button-group dir="column">
225
+ <pnx-button kind="outline">☹️</pnx-button>
226
+ <pnx-button kind="outline">🙂</pnx-button>
227
+ </pnx-button-group>
228
+ </div>
229
+ </div>
230
+ <div class="test-bench">
231
+ <h3>Outline Column x3</h3>
232
+ <div>
233
+ <pnx-button-group dir="column">
234
+ <pnx-button kind="outline">☹️</pnx-button>
235
+ <pnx-button kind="outline">😐</pnx-button>
236
+ <pnx-button kind="outline">🙂</pnx-button>
237
+ </pnx-button-group>
238
+ </div>
239
+ </div>
240
+ <hr class="test-sep" />
241
+ <div class="test-bench">
242
+ <h3>Flat Row x2</h3>
243
+ <div>
244
+ <pnx-button-group dir="row">
245
+ <pnx-button kind="flat">☹️</pnx-button>
246
+ <pnx-button kind="flat">🙂</pnx-button>
247
+ </pnx-button-group>
248
+ </div>
249
+ </div>
250
+ <div class="test-bench">
251
+ <h3>Flat Row x3</h3>
252
+ <div>
253
+ <pnx-button-group dir="row">
254
+ <pnx-button kind="flat">☹️</pnx-button>
255
+ <pnx-button kind="flat">😐</pnx-button>
256
+ <pnx-button kind="flat">🙂</pnx-button>
257
+ </pnx-button-group>
258
+ </div>
259
+ </div>
260
+ <div class="test-bench">
261
+ <h3>Flat Column x2</h3>
262
+ <div>
263
+ <pnx-button-group dir="column">
264
+ <pnx-button kind="flat">☹️</pnx-button>
265
+ <pnx-button kind="flat">🙂</pnx-button>
266
+ </pnx-button-group>
267
+ </div>
268
+ </div>
269
+ <div class="test-bench">
270
+ <h3>Flat Column x3</h3>
271
+ <div>
272
+ <pnx-button-group dir="column">
273
+ <pnx-button kind="flat">☹️</pnx-button>
274
+ <pnx-button kind="flat">😐</pnx-button>
275
+ <pnx-button kind="flat">🙂</pnx-button>
276
+ </pnx-button-group>
277
+ </div>
278
+ </div>
279
+ <hr class="test-sep" />
280
+ <div class="test-bench">
281
+ <h3>Row XL</h3>
282
+ <div>
283
+ <pnx-button-group size="xl" dir="row">
284
+ <pnx-button kind="flat">☹️</pnx-button>
285
+ <pnx-button kind="flat">😐</pnx-button>
286
+ <pnx-button kind="flat">🙂</pnx-button>
287
+ </pnx-button-group>
288
+ </div>
289
+ </div>
290
+ <div class="test-bench">
291
+ <h3>Column XL</h3>
292
+ <div>
293
+ <pnx-button-group size="xl" dir="column">
294
+ <pnx-button kind="flat">☹️</pnx-button>
295
+ <pnx-button kind="flat">😐</pnx-button>
296
+ <pnx-button kind="flat">🙂</pnx-button>
297
+ </pnx-button-group>
298
+ </div>
299
+ </div>
300
+
301
+ <h2 id="5stars">5-stars grade</h2>
302
+ <div class="test-bench"><h3>With a grade</h3><pnx-grade stars="5" /></div>
303
+ <div class="test-bench"><h3>Without a grade</h3><pnx-grade /></div>
304
+
305
+ <h2 id="quality-score">Quality Score</h2>
306
+ <div class="test-bench"><h3>Classic no grade</h3><pnx-quality-score /></div>
307
+ <div class="test-bench"><h3>Classic 1/5</h3><pnx-quality-score grade="1" /></div>
308
+ <div class="test-bench"><h3>Classic 2/5</h3><pnx-quality-score grade="2" /></div>
309
+ <div class="test-bench"><h3>Classic 3/5</h3><pnx-quality-score grade="3" /></div>
310
+ <div class="test-bench"><h3>Classic 4/5</h3><pnx-quality-score grade="4" /></div>
311
+ <div class="test-bench"><h3>Classic 5/5</h3><pnx-quality-score grade="5" /></div>
312
+ <hr class="test-sep" />
313
+ <div class="test-bench"><h3>Input</h3><pnx-quality-score input="qs" /></div>
314
+ <div class="test-bench"><h3>Input 1/5</h3><pnx-quality-score input="qs" grade="1" /></div>
315
+ <div class="test-bench"><h3>Input 2/5</h3><pnx-quality-score input="qs" grade="2" /></div>
316
+ <div class="test-bench"><h3>Input 3/5</h3><pnx-quality-score input="qs" grade="3" /></div>
317
+ <div class="test-bench"><h3>Input 4/5</h3><pnx-quality-score input="qs" grade="4" /></div>
318
+ <div class="test-bench"><h3>Input 5/5</h3><pnx-quality-score input="qs" grade="5" /></div>
319
+ <div class="test-bench"><h3>Input many</h3><pnx-quality-score input="qs" grade="1,3,5" /></div>
320
+
321
+ <h2 id="search-bar">Search bar</h2>
322
+ <div class="test-bench"><h3>Simple</h3><pnx-search-bar placeholder="Start your search"></pnx-search-bar></div>
323
+ <div class="test-bench"><h3>With pre</h3><pnx-search-bar placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
324
+ <div class="test-bench">
325
+ <h3>Reduced</h3>
326
+ <pnx-search-bar reduceable reduced placeholder="Look for a place"></pnx-search-bar>
327
+ </div>
328
+ <hr class="test-sep" />
329
+ <div class="test-bench"><h3>Size md full</h3><pnx-search-bar size="md" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
330
+ <div class="test-bench"><h3>Size md reduced</h3><pnx-search-bar size="md" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div>
331
+ <div class="test-bench"><h3>Size xxl full</h3><pnx-search-bar size="xxl" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
332
+ <div class="test-bench"><h3>Size xxl reduced</h3><pnx-search-bar size="xxl" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div>
333
+
334
+ <h2 id="progress-bar">Progress bar</h2>
335
+ <div class="test-bench"><h3>Half</h3><pnx-progress-bar value="42"></pnx-progress-bar></div>
336
+ <div class="test-bench"><h3>Indeterminate</h3><pnx-progress-bar></pnx-progress-bar></div>
337
+ <div class="test-bench"><h3>Full</h3><pnx-progress-bar value="100"></pnx-progress-bar></div>
338
+
339
+ <h2 id="tabs">Tabs</h2>
340
+ <div class="test-bench">
341
+ <h3>Many</h3>
342
+ <pnx-tabs>
343
+ <h4 slot="title">Tab 1</h4>
344
+ <div slot="content">Tab 1 content</div>
345
+ <h4 slot="title">Tab 2</h4>
346
+ <div slot="content">Tab 2 content</div>
347
+ <h4 slot="title">Tab 3</h4>
348
+ <div slot="content">Tab 3 content</div>
349
+ </pnx-tabs>
350
+ </div>
351
+
352
+ <h2 id="semantics-editor">Semantics editor</h2>
353
+ <script>
354
+ window.addEventListener("load", () => {
355
+ const semeditors = document.getElementsByTagName("pnx-semantics-editor");
356
+ for(let i=0; i < semeditors.length; i++) {
357
+ const semeditor = semeditors[i];
358
+ const div = semeditor.nextSibling;
359
+ semeditor.addEventListener("change", e => {
360
+ console.log("Semantics change > evt =", e.detail, "| attr =", semeditor.getAttribute("semantics"));
361
+ });
362
+ }
363
+ });
364
+ </script>
365
+ <div class="test-bench">
366
+ <h3>Empty</h3>
367
+ <pnx-semantics-editor _t='{"pnx": {"semantics_editor_error": "La syntaxe est invalide. Vos attributs doivent avoir cette forme:\nclé=valeur\npréfixe|clé=valeur\npréfixe|clé[qualif_clé=qualif_val]=valeur\n\nLongueur max des clés : 256 caractères, max des valeurs 2048 caractères.","semantics_editor_example": "clé=valeur\npréfixe|clé=valeur"}}'></pnx-semantics-editor>
368
+ </div>
369
+ <div class="test-bench">
370
+ <h3>Filled</h3>
371
+ <pnx-semantics-editor semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor>
372
+ </div>
373
+ <div class="test-bench">
374
+ <h3>Many rows</h3>
375
+ <pnx-semantics-editor rows="5" semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor>
376
+ </div>
377
+ <div class="test-bench">
378
+ <h3>Custom style</h3>
379
+ <style>#pnx-sem-ed3::part(text) { color: blue; }</style>
380
+ <pnx-semantics-editor id="pnx-sem-ed3" semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor>
381
+ </div>
382
+
383
+ <h2 id="switch">Switch</h2>
384
+ <div class="test-bench">
385
+ <h3>Classic</h3>
386
+ <pnx-switch name="sw1">Label text</pnx-switch>
387
+ </div>
388
+ <div class="test-bench">
389
+ <h3>Switched</h3>
390
+ <pnx-switch name="sw2" checked="true">Label text</pnx-switch>
391
+ </div>
392
+ <div class="test-bench">
393
+ <h3>Disabled</h3>
394
+ <pnx-switch name="sw3" disabled="true">Label text</pnx-switch>
395
+ </div>
396
+ <div class="test-bench">
397
+ <h3>Switched disabled</h3>
398
+ <pnx-switch name="sw4" checked="true" disabled="true">Label text</pnx-switch>
399
+ </div>
400
+ <div class="test-bench">
401
+ <h3>Icon switch</h3>
402
+ <pnx-icon-switch name="isw1">
403
+ <span slot="icon-left">⏪</span>
404
+ <span slot="label-left">Left</span>
405
+ <span slot="icon-right">⏩</span>
406
+ <span slot="label-right">Right</span>
407
+ </pnx-icon-switch>
408
+ </div>
409
+ </body>
410
+ </html>