@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

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 (255) hide show
  1. package/.gitlab-ci.yml +13 -6
  2. package/CHANGELOG.md +53 -1
  3. package/CODE_OF_CONDUCT.md +1 -1
  4. package/README.md +1 -1
  5. package/build/editor.html +10 -1
  6. package/build/index.css +12 -12
  7. package/build/index.css.map +1 -1
  8. package/build/index.html +1 -1
  9. package/build/index.js +2126 -14
  10. package/build/index.js.map +1 -1
  11. package/build/map.html +1 -1
  12. package/build/photo.html +1 -0
  13. package/build/static/media/atkinson-hyperlegible-next-latin-400-normal..woff +0 -0
  14. package/build/static/media/atkinson-hyperlegible-next-latin-400-normal..woff2 +0 -0
  15. package/build/static/media/atkinson-hyperlegible-next-latin-ext-400-normal..woff +0 -0
  16. package/build/static/media/atkinson-hyperlegible-next-latin-ext-400-normal..woff2 +0 -0
  17. package/build/viewer.html +12 -1
  18. package/build/widgets.html +1 -0
  19. package/config/jest/mocks.js +201 -0
  20. package/config/paths.js +2 -0
  21. package/config/webpack.config.js +52 -0
  22. package/docs/03_URL_settings.md +14 -16
  23. package/docs/05_Compatibility.md +59 -76
  24. package/docs/09_Develop.md +46 -11
  25. package/docs/90_Releases.md +2 -2
  26. package/docs/images/class_diagram.drawio +60 -45
  27. package/docs/images/class_diagram.jpg +0 -0
  28. package/docs/images/screenshot.jpg +0 -0
  29. package/docs/index.md +135 -0
  30. package/docs/reference/components/core/Basic.md +196 -0
  31. package/docs/reference/components/core/CoverageMap.md +210 -0
  32. package/docs/reference/components/core/Editor.md +224 -0
  33. package/docs/reference/components/core/PhotoViewer.md +307 -0
  34. package/docs/reference/components/core/Viewer.md +350 -0
  35. package/docs/reference/components/layout/BottomDrawer.md +35 -0
  36. package/docs/reference/components/layout/CorneredGrid.md +29 -0
  37. package/docs/reference/components/layout/Mini.md +45 -0
  38. package/docs/reference/components/layout/Tabs.md +45 -0
  39. package/docs/reference/components/menus/MapBackground.md +32 -0
  40. package/docs/reference/components/menus/MapFilters.md +15 -0
  41. package/docs/reference/components/menus/MapLayers.md +15 -0
  42. package/docs/reference/components/menus/MapLegend.md +15 -0
  43. package/docs/reference/components/menus/PictureLegend.md +16 -0
  44. package/docs/reference/components/menus/PictureMetadata.md +15 -0
  45. package/docs/reference/components/menus/PlayerOptions.md +15 -0
  46. package/docs/reference/components/menus/QualityScoreDoc.md +15 -0
  47. package/docs/reference/components/menus/ReportForm.md +15 -0
  48. package/docs/reference/components/menus/ShareMenu.md +15 -0
  49. package/docs/reference/components/ui/Button.md +40 -0
  50. package/docs/reference/components/ui/ButtonGroup.md +36 -0
  51. package/docs/reference/components/ui/CopyButton.md +38 -0
  52. package/docs/reference/components/ui/Grade.md +32 -0
  53. package/docs/reference/components/ui/LinkButton.md +45 -0
  54. package/docs/reference/components/ui/ListGroup.md +22 -0
  55. package/docs/reference/components/ui/Loader.md +56 -0
  56. package/docs/reference/components/ui/Map.md +239 -0
  57. package/docs/reference/components/ui/MapMore.md +256 -0
  58. package/docs/reference/components/ui/Photo.md +385 -0
  59. package/docs/reference/components/ui/Popup.md +56 -0
  60. package/docs/reference/components/ui/ProgressBar.md +32 -0
  61. package/docs/reference/components/ui/QualityScore.md +45 -0
  62. package/docs/reference/components/ui/SearchBar.md +63 -0
  63. package/docs/reference/components/ui/TogglableGroup.md +39 -0
  64. package/docs/reference/components/ui/widgets/GeoSearch.md +32 -0
  65. package/docs/reference/components/ui/widgets/Legend.md +49 -0
  66. package/docs/reference/components/ui/widgets/MapFiltersButton.md +33 -0
  67. package/docs/reference/components/ui/widgets/MapLayersButton.md +15 -0
  68. package/docs/reference/components/ui/widgets/OSMEditors.md +15 -0
  69. package/docs/reference/components/ui/widgets/PictureLegendActions.md +32 -0
  70. package/docs/reference/components/ui/widgets/Player.md +33 -0
  71. package/docs/reference/components/ui/widgets/Zoom.md +15 -0
  72. package/docs/reference/utils/API.md +334 -0
  73. package/docs/reference/utils/InitParameters.md +68 -0
  74. package/docs/reference/utils/URLHandler.md +107 -0
  75. package/docs/reference.md +79 -0
  76. package/docs/shortcuts.md +11 -0
  77. package/docs/tutorials/aerial_imagery.md +19 -0
  78. package/docs/tutorials/authentication.md +10 -0
  79. package/docs/tutorials/custom_widgets.md +59 -0
  80. package/docs/tutorials/map_style.md +39 -0
  81. package/docs/tutorials/migrate_v4.md +153 -0
  82. package/docs/tutorials/synced_coverage.md +43 -0
  83. package/mkdocs.yml +66 -5
  84. package/package.json +22 -17
  85. package/public/editor.html +21 -29
  86. package/public/index.html +17 -12
  87. package/public/map.html +19 -18
  88. package/public/photo.html +55 -0
  89. package/public/viewer.html +22 -26
  90. package/public/widgets.html +306 -0
  91. package/scripts/doc.js +79 -0
  92. package/src/components/core/Basic.css +48 -0
  93. package/src/components/core/Basic.js +349 -0
  94. package/src/components/core/CoverageMap.css +9 -0
  95. package/src/components/core/CoverageMap.js +139 -0
  96. package/src/components/core/Editor.css +23 -0
  97. package/src/components/core/Editor.js +390 -0
  98. package/src/components/core/PhotoViewer.css +48 -0
  99. package/src/components/core/PhotoViewer.js +499 -0
  100. package/src/components/core/Viewer.css +98 -0
  101. package/src/components/core/Viewer.js +564 -0
  102. package/src/components/core/index.js +12 -0
  103. package/src/components/index.js +13 -0
  104. package/src/components/layout/BottomDrawer.js +257 -0
  105. package/src/components/layout/CorneredGrid.js +112 -0
  106. package/src/components/layout/Mini.js +117 -0
  107. package/src/components/layout/Tabs.js +133 -0
  108. package/src/components/layout/index.js +9 -0
  109. package/src/components/menus/MapBackground.js +106 -0
  110. package/src/components/menus/MapFilters.js +400 -0
  111. package/src/components/menus/MapLayers.js +143 -0
  112. package/src/components/menus/MapLegend.js +34 -0
  113. package/src/components/menus/PictureLegend.js +257 -0
  114. package/src/components/menus/PictureMetadata.js +317 -0
  115. package/src/components/menus/PlayerOptions.js +95 -0
  116. package/src/components/menus/QualityScoreDoc.js +36 -0
  117. package/src/components/menus/ReportForm.js +133 -0
  118. package/src/components/menus/Share.js +100 -0
  119. package/src/components/menus/index.js +15 -0
  120. package/src/components/styles.js +383 -0
  121. package/src/components/ui/Button.js +77 -0
  122. package/src/components/ui/ButtonGroup.css +57 -0
  123. package/src/components/ui/ButtonGroup.js +68 -0
  124. package/src/components/ui/CopyButton.js +106 -0
  125. package/src/components/ui/Grade.js +54 -0
  126. package/src/components/ui/LinkButton.js +67 -0
  127. package/src/components/ui/ListGroup.js +66 -0
  128. package/src/components/ui/Loader.js +203 -0
  129. package/src/components/{Map.css → ui/Map.css} +5 -17
  130. package/src/components/{Map.js → ui/Map.js} +148 -156
  131. package/src/components/ui/MapMore.js +324 -0
  132. package/src/components/{Photo.css → ui/Photo.css} +6 -6
  133. package/src/components/{Photo.js → ui/Photo.js} +313 -101
  134. package/src/components/ui/Popup.js +145 -0
  135. package/src/components/ui/ProgressBar.js +104 -0
  136. package/src/components/ui/QualityScore.js +147 -0
  137. package/src/components/ui/SearchBar.js +367 -0
  138. package/src/components/ui/TogglableGroup.js +157 -0
  139. package/src/components/ui/index.js +22 -0
  140. package/src/components/ui/widgets/GeoSearch.css +21 -0
  141. package/src/components/ui/widgets/GeoSearch.js +139 -0
  142. package/src/components/ui/widgets/Legend.js +113 -0
  143. package/src/components/ui/widgets/MapFiltersButton.js +104 -0
  144. package/src/components/ui/widgets/MapLayersButton.js +79 -0
  145. package/src/components/ui/widgets/OSMEditors.js +155 -0
  146. package/src/components/ui/widgets/PictureLegendActions.js +117 -0
  147. package/src/components/ui/widgets/Player.css +7 -0
  148. package/src/components/ui/widgets/Player.js +151 -0
  149. package/src/components/ui/widgets/Zoom.js +82 -0
  150. package/src/components/ui/widgets/index.js +13 -0
  151. package/src/img/loader_base.jpg +0 -0
  152. package/src/img/panoramax.svg +13 -0
  153. package/src/img/switch_big.svg +20 -10
  154. package/src/index.js +7 -9
  155. package/src/translations/br.json +1 -0
  156. package/src/translations/da.json +38 -15
  157. package/src/translations/de.json +5 -3
  158. package/src/translations/en.json +35 -15
  159. package/src/translations/eo.json +38 -15
  160. package/src/translations/es.json +1 -1
  161. package/src/translations/fr.json +36 -16
  162. package/src/translations/hu.json +1 -1
  163. package/src/translations/it.json +39 -16
  164. package/src/translations/ja.json +182 -1
  165. package/src/translations/nl.json +106 -6
  166. package/src/translations/pl.json +1 -1
  167. package/src/translations/sv.json +182 -0
  168. package/src/translations/zh_Hant.json +35 -14
  169. package/src/utils/API.js +109 -49
  170. package/src/utils/InitParameters.js +388 -0
  171. package/src/utils/PhotoAdapter.js +1 -0
  172. package/src/utils/URLHandler.js +362 -0
  173. package/src/utils/geocoder.js +152 -0
  174. package/src/utils/{I18n.js → i18n.js} +7 -3
  175. package/src/utils/index.js +11 -0
  176. package/src/utils/{Map.js → map.js} +256 -77
  177. package/src/utils/picture.js +442 -0
  178. package/src/utils/utils.js +324 -0
  179. package/src/utils/widgets.js +55 -0
  180. package/tests/components/core/Basic.test.js +121 -0
  181. package/tests/components/core/BasicMock.js +25 -0
  182. package/tests/components/core/CoverageMap.test.js +20 -0
  183. package/tests/components/core/Editor.test.js +20 -0
  184. package/tests/components/core/PhotoViewer.test.js +57 -0
  185. package/tests/components/core/Viewer.test.js +84 -0
  186. package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap +73 -0
  187. package/tests/components/core/__snapshots__/Viewer.test.js.snap +145 -0
  188. package/tests/components/ui/CopyButton.test.js +52 -0
  189. package/tests/components/ui/Loader.test.js +55 -0
  190. package/tests/components/{Map.test.js → ui/Map.test.js} +73 -61
  191. package/tests/components/{Photo.test.js → ui/Photo.test.js} +97 -63
  192. package/tests/components/ui/Popup.test.js +26 -0
  193. package/tests/components/ui/QualityScore.test.js +18 -0
  194. package/tests/components/ui/SearchBar.test.js +110 -0
  195. package/tests/components/ui/__snapshots__/CopyButton.test.js.snap +33 -0
  196. package/tests/components/ui/__snapshots__/Loader.test.js.snap +56 -0
  197. package/tests/components/{__snapshots__ → ui/__snapshots__}/Map.test.js.snap +11 -38
  198. package/tests/components/{__snapshots__ → ui/__snapshots__}/Photo.test.js.snap +70 -6
  199. package/tests/components/ui/__snapshots__/Popup.test.js.snap +29 -0
  200. package/tests/components/ui/__snapshots__/QualityScore.test.js.snap +11 -0
  201. package/tests/components/ui/__snapshots__/SearchBar.test.js.snap +65 -0
  202. package/tests/utils/API.test.js +83 -83
  203. package/tests/utils/InitParameters.test.js +499 -0
  204. package/tests/utils/URLHandler.test.js +401 -0
  205. package/tests/utils/__snapshots__/API.test.js.snap +10 -0
  206. package/tests/utils/__snapshots__/URLHandler.test.js.snap +21 -0
  207. package/tests/utils/__snapshots__/{Map.test.js.snap → geocoder.test.js.snap} +1 -1
  208. package/tests/utils/__snapshots__/map.test.js.snap +11 -0
  209. package/tests/utils/__snapshots__/picture.test.js.snap +327 -0
  210. package/tests/utils/__snapshots__/widgets.test.js.snap +19 -0
  211. package/tests/utils/geocoder.test.js +37 -0
  212. package/tests/utils/{I18n.test.js → i18n.test.js} +8 -8
  213. package/tests/utils/map.test.js +126 -0
  214. package/tests/utils/picture.test.js +745 -0
  215. package/tests/utils/utils.test.js +288 -0
  216. package/tests/utils/widgets.test.js +31 -0
  217. package/docs/01_Start.md +0 -149
  218. package/docs/02_Usage.md +0 -831
  219. package/docs/04_Advanced_examples.md +0 -216
  220. package/src/Editor.css +0 -37
  221. package/src/Editor.js +0 -361
  222. package/src/StandaloneMap.js +0 -114
  223. package/src/Viewer.css +0 -203
  224. package/src/Viewer.js +0 -1246
  225. package/src/components/CoreView.css +0 -70
  226. package/src/components/CoreView.js +0 -175
  227. package/src/components/Loader.css +0 -74
  228. package/src/components/Loader.js +0 -120
  229. package/src/img/loader_hd.jpg +0 -0
  230. package/src/utils/Exif.js +0 -193
  231. package/src/utils/Utils.js +0 -631
  232. package/src/utils/Widgets.js +0 -562
  233. package/src/viewer/URLHash.js +0 -469
  234. package/src/viewer/Widgets.css +0 -880
  235. package/src/viewer/Widgets.js +0 -1470
  236. package/tests/Editor.test.js +0 -126
  237. package/tests/StandaloneMap.test.js +0 -45
  238. package/tests/Viewer.test.js +0 -366
  239. package/tests/__snapshots__/Editor.test.js.snap +0 -298
  240. package/tests/__snapshots__/StandaloneMap.test.js.snap +0 -30
  241. package/tests/__snapshots__/Viewer.test.js.snap +0 -195
  242. package/tests/components/CoreView.test.js +0 -92
  243. package/tests/components/Loader.test.js +0 -38
  244. package/tests/components/__snapshots__/Loader.test.js.snap +0 -15
  245. package/tests/utils/Exif.test.js +0 -124
  246. package/tests/utils/Map.test.js +0 -113
  247. package/tests/utils/Utils.test.js +0 -300
  248. package/tests/utils/Widgets.test.js +0 -107
  249. package/tests/utils/__snapshots__/Exif.test.js.snap +0 -43
  250. package/tests/utils/__snapshots__/Utils.test.js.snap +0 -41
  251. package/tests/utils/__snapshots__/Widgets.test.js.snap +0 -44
  252. package/tests/viewer/URLHash.test.js +0 -559
  253. package/tests/viewer/Widgets.test.js +0 -127
  254. package/tests/viewer/__snapshots__/URLHash.test.js.snap +0 -108
  255. package/tests/viewer/__snapshots__/Widgets.test.js.snap +0 -403
package/public/widgets.html ADDED
@@ -0,0 +1,306 @@
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
+ </head>
28
+ <body>
29
+ <noscript>You need to enable JavaScript to run this app.</noscript>
30
+ <h1>Panoramax widgets</h1>
31
+ <p>Test page for common Panoramax viewer widgets</p>
32
+ <nav>
33
+ <a href="#button">Button</a>
34
+ <a href="#link-button">Link Button</a>
35
+ <a href="#copy-button">Copy button</a>
36
+ <a href="#button-group">Button Group</a>
37
+ <a href="#5stars">5-stars grade</a>
38
+ <a href="#quality-score">Quality Score</a>
39
+ <a href="#search-bar">Search bar</a>
40
+ <a href="#progress-bar">Progress bar</a>
41
+ <a href="#tabs">Tabs</a>
42
+ </nav>
43
+
44
+ <h2 id="button">Button</h2>
45
+ <div class="test-bench"><h3>Text + click</h3><pnx-button onclick="alert('Stuff')">Click to do stuff</pnx-button></div>
46
+ <div class="test-bench"><h3>Icon</h3><pnx-button>⚙️ Settings</pnx-button></div>
47
+ <div class="test-bench"><h3>Active</h3><pnx-button active="true">Settings</pnx-button></div>
48
+ <div class="test-bench">
49
+ <h3>CSS override</h3>
50
+ <div style="width: 50%; display: flex; gap: 5px; max-width: 300px">
51
+ <pnx-button style="width: 50%;">⚙️ Settings</pnx-button>
52
+ <pnx-button style="width: 50%;">🖨️ Print</pnx-button>
53
+ </div>
54
+ </div>
55
+ <hr class="test-sep" />
56
+ <div class="test-bench"><h3>Full</h3><pnx-button kind="full">⚙️ Settings</pnx-button></div>
57
+ <div class="test-bench"><h3>Full active</h3><pnx-button kind="full" active>⚙️ Settings</pnx-button></div>
58
+ <div class="test-bench"><h3>Full L</h3><pnx-button kind="full" size="l">⚙️</pnx-button></div>
59
+ <div class="test-bench"><h3>Full XXL</h3><pnx-button kind="full" size="xxl">⚙️</pnx-button></div>
60
+ <div class="test-bench"><h3>Outline</h3><pnx-button kind="outline">⚙️ Settings</pnx-button></div>
61
+ <div class="test-bench"><h3>Outline active</h3><pnx-button kind="outline" active>⚙️ Settings</pnx-button></div>
62
+ <div class="test-bench"><h3>Outline L</h3><pnx-button kind="outline" size="l">⚙️</pnx-button></div>
63
+ <div class="test-bench"><h3>Outline XXL</h3><pnx-button kind="outline" size="xxl">⚙️</pnx-button></div>
64
+ <div class="test-bench"><h3>Inline</h3><pnx-button kind="inline">⚙️ Settings</pnx-button></div>
65
+ <div class="test-bench"><h3>Inline active</h3><pnx-button kind="inline" active>⚙️ Settings</pnx-button></div>
66
+ <div class="test-bench"><h3>Inline L</h3><pnx-button kind="inline" size="l">⚙️</pnx-button></div>
67
+ <div class="test-bench"><h3>Inline XXL</h3><pnx-button kind="inline" size="xxl">⚙️</pnx-button></div>
68
+ <div class="test-bench"><h3>Superinline</h3><pnx-button kind="superinline">⚙️ Settings</pnx-button></div>
69
+ <div class="test-bench"><h3>Superinline active</h3><pnx-button kind="superinline" active>⚙️ Settings</pnx-button></div>
70
+ <div class="test-bench"><h3>Superinline L</h3><pnx-button kind="superinline" size="l">⚙️</pnx-button></div>
71
+ <div class="test-bench"><h3>Superinline XXL</h3><pnx-button kind="superinline" size="xxl">⚙️</pnx-button></div>
72
+ <div class="test-bench"><h3>Flat</h3><pnx-button kind="flat">⚙️ Settings</pnx-button></div>
73
+ <div class="test-bench"><h3>Flat active</h3><pnx-button kind="flat" active>⚙️ Settings</pnx-button></div>
74
+ <div class="test-bench"><h3>Flat L</h3><pnx-button kind="flat" size="l">⚙️</pnx-button></div>
75
+ <div class="test-bench"><h3>Flat XXL</h3><pnx-button kind="flat" size="xxl">⚙️</pnx-button></div>
76
+ <div class="test-bench"><h3>Superflat</h3><pnx-button kind="superflat">⚙️ Settings</pnx-button></div>
77
+ <div class="test-bench"><h3>Superflat active</h3><pnx-button kind="superflat" active>⚙️ Settings</pnx-button></div>
78
+ <div class="test-bench"><h3>Superflat L</h3><pnx-button kind="superflat" size="l">⚙️</pnx-button></div>
79
+ <div class="test-bench"><h3>Superflat XXL</h3><pnx-button kind="superflat" size="xxl">⚙️</pnx-button></div>
80
+
81
+ <h2 id="link-button">Link Button</h2>
82
+ <div class="test-bench"><h3>None set</h3><pnx-link-button>Click for nothing</pnx-link-button></div>
83
+ <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>
84
+
85
+ <h2 id="copy-button">Copy button</h2>
86
+ <div class="test-bench"><h3>Default + text</h3><pnx-copy-button text="copypasta1"></pnx-copy-button></div>
87
+ <div class="test-bench"><h3>Custom + text</h3><pnx-copy-button text="copypasta2">🌐 Share URL</pnx-copy-button></div>
88
+ <div class="test-bench">
89
+ <h3>Default + input</h3>
90
+ <div style="display: flex; gap: 5px; align-items: center;">
91
+ <input type="text" value="copypasta3" id="copy-input-1" />
92
+ <pnx-copy-button input="copy-input-1"></pnx-copy-button>
93
+ </div>
94
+ </div>
95
+
96
+ <h2 id="button-group">Button Group</h2>
97
+ <div class="test-bench">
98
+ <h3>Full Row x2</h3>
99
+ <div>
100
+ <pnx-button-group dir="row">
101
+ <pnx-button>☹️</pnx-button>
102
+ <pnx-button>🙂</pnx-button>
103
+ </pnx-button-group>
104
+ </div>
105
+ </div>
106
+ <div class="test-bench">
107
+ <h3>Full Row x3</h3>
108
+ <div>
109
+ <pnx-button-group dir="row">
110
+ <pnx-button>☹️</pnx-button>
111
+ <pnx-button>😐</pnx-button>
112
+ <pnx-button>🙂</pnx-button>
113
+ </pnx-button-group>
114
+ </div>
115
+ </div>
116
+ <div class="test-bench">
117
+ <h3>Full Row mixed</h3>
118
+ <div>
119
+ <pnx-button-group dir="row">
120
+ <pnx-button>☹️</pnx-button>
121
+ <pnx-link-button>😐</pnx-link-button>
122
+ <pnx-copy-button>🙂</pnx-copy-button>
123
+ </pnx-button-group>
124
+ </div>
125
+ </div>
126
+ <div class="test-bench">
127
+ <h3>Full Column x2</h3>
128
+ <div>
129
+ <pnx-button-group dir="column">
130
+ <pnx-button>☹️</pnx-button>
131
+ <pnx-button>🙂</pnx-button>
132
+ </pnx-button-group>
133
+ </div>
134
+ </div>
135
+ <div class="test-bench">
136
+ <h3>Full Column x3</h3>
137
+ <div>
138
+ <pnx-button-group dir="column">
139
+ <pnx-button>☹️</pnx-button>
140
+ <pnx-button>😐</pnx-button>
141
+ <pnx-button>🙂</pnx-button>
142
+ </pnx-button-group>
143
+ </div>
144
+ </div>
145
+ <div class="test-bench">
146
+ <h3>Full Column mixed</h3>
147
+ <div>
148
+ <pnx-button-group dir="column">
149
+ <pnx-button>☹️</pnx-button>
150
+ <pnx-link-button>😐</pnx-link-button>
151
+ <pnx-copy-button>🙂</pnx-copy-button>
152
+ </pnx-button-group>
153
+ </div>
154
+ </div>
155
+ <hr class="test-sep" />
156
+ <div class="test-bench">
157
+ <h3>Outline Row x2</h3>
158
+ <div>
159
+ <pnx-button-group dir="row">
160
+ <pnx-button kind="outline">☹️</pnx-button>
161
+ <pnx-button kind="outline">🙂</pnx-button>
162
+ </pnx-button-group>
163
+ </div>
164
+ </div>
165
+ <div class="test-bench">
166
+ <h3>Outline Row x3</h3>
167
+ <div>
168
+ <pnx-button-group dir="row">
169
+ <pnx-button kind="outline">☹️</pnx-button>
170
+ <pnx-button kind="outline">😐</pnx-button>
171
+ <pnx-button kind="outline">🙂</pnx-button>
172
+ </pnx-button-group>
173
+ </div>
174
+ </div>
175
+ <div class="test-bench">
176
+ <h3>Outline Column x2</h3>
177
+ <div>
178
+ <pnx-button-group dir="column">
179
+ <pnx-button kind="outline">☹️</pnx-button>
180
+ <pnx-button kind="outline">🙂</pnx-button>
181
+ </pnx-button-group>
182
+ </div>
183
+ </div>
184
+ <div class="test-bench">
185
+ <h3>Outline Column x3</h3>
186
+ <div>
187
+ <pnx-button-group dir="column">
188
+ <pnx-button kind="outline">☹️</pnx-button>
189
+ <pnx-button kind="outline">😐</pnx-button>
190
+ <pnx-button kind="outline">🙂</pnx-button>
191
+ </pnx-button-group>
192
+ </div>
193
+ </div>
194
+ <hr class="test-sep" />
195
+ <div class="test-bench">
196
+ <h3>Flat Row x2</h3>
197
+ <div>
198
+ <pnx-button-group dir="row">
199
+ <pnx-button kind="flat">☹️</pnx-button>
200
+ <pnx-button kind="flat">🙂</pnx-button>
201
+ </pnx-button-group>
202
+ </div>
203
+ </div>
204
+ <div class="test-bench">
205
+ <h3>Flat Row x3</h3>
206
+ <div>
207
+ <pnx-button-group dir="row">
208
+ <pnx-button kind="flat">☹️</pnx-button>
209
+ <pnx-button kind="flat">😐</pnx-button>
210
+ <pnx-button kind="flat">🙂</pnx-button>
211
+ </pnx-button-group>
212
+ </div>
213
+ </div>
214
+ <div class="test-bench">
215
+ <h3>Flat Column x2</h3>
216
+ <div>
217
+ <pnx-button-group dir="column">
218
+ <pnx-button kind="flat">☹️</pnx-button>
219
+ <pnx-button kind="flat">🙂</pnx-button>
220
+ </pnx-button-group>
221
+ </div>
222
+ </div>
223
+ <div class="test-bench">
224
+ <h3>Flat Column x3</h3>
225
+ <div>
226
+ <pnx-button-group dir="column">
227
+ <pnx-button kind="flat">☹️</pnx-button>
228
+ <pnx-button kind="flat">😐</pnx-button>
229
+ <pnx-button kind="flat">🙂</pnx-button>
230
+ </pnx-button-group>
231
+ </div>
232
+ </div>
233
+ <hr class="test-sep" />
234
+ <div class="test-bench">
235
+ <h3>Row XL</h3>
236
+ <div>
237
+ <pnx-button-group size="xl" dir="row">
238
+ <pnx-button kind="flat">☹️</pnx-button>
239
+ <pnx-button kind="flat">😐</pnx-button>
240
+ <pnx-button kind="flat">🙂</pnx-button>
241
+ </pnx-button-group>
242
+ </div>
243
+ </div>
244
+ <div class="test-bench">
245
+ <h3>Column XL</h3>
246
+ <div>
247
+ <pnx-button-group size="xl" dir="column">
248
+ <pnx-button kind="flat">☹️</pnx-button>
249
+ <pnx-button kind="flat">😐</pnx-button>
250
+ <pnx-button kind="flat">🙂</pnx-button>
251
+ </pnx-button-group>
252
+ </div>
253
+ </div>
254
+
255
+ <h2 id="5stars">5-stars grade</h2>
256
+ <div class="test-bench"><h3>With a grade</h3><pnx-grade stars="5" /></div>
257
+ <div class="test-bench"><h3>Without a grade</h3><pnx-grade /></div>
258
+
259
+ <h2 id="quality-score">Quality Score</h2>
260
+ <div class="test-bench"><h3>Classic no grade</h3><pnx-quality-score /></div>
261
+ <div class="test-bench"><h3>Classic 1/5</h3><pnx-quality-score grade="1" /></div>
262
+ <div class="test-bench"><h3>Classic 2/5</h3><pnx-quality-score grade="2" /></div>
263
+ <div class="test-bench"><h3>Classic 3/5</h3><pnx-quality-score grade="3" /></div>
264
+ <div class="test-bench"><h3>Classic 4/5</h3><pnx-quality-score grade="4" /></div>
265
+ <div class="test-bench"><h3>Classic 5/5</h3><pnx-quality-score grade="5" /></div>
266
+ <hr class="test-sep" />
267
+ <div class="test-bench"><h3>Input</h3><pnx-quality-score input="qs" /></div>
268
+ <div class="test-bench"><h3>Input 1/5</h3><pnx-quality-score input="qs" grade="1" /></div>
269
+ <div class="test-bench"><h3>Input 2/5</h3><pnx-quality-score input="qs" grade="2" /></div>
270
+ <div class="test-bench"><h3>Input 3/5</h3><pnx-quality-score input="qs" grade="3" /></div>
271
+ <div class="test-bench"><h3>Input 4/5</h3><pnx-quality-score input="qs" grade="4" /></div>
272
+ <div class="test-bench"><h3>Input 5/5</h3><pnx-quality-score input="qs" grade="5" /></div>
273
+ <div class="test-bench"><h3>Input many</h3><pnx-quality-score input="qs" grade="1,3,5" /></div>
274
+
275
+ <h2 id="search-bar">Search bar</h2>
276
+ <div class="test-bench"><h3>Simple</h3><pnx-search-bar placeholder="Start your search"></pnx-search-bar></div>
277
+ <div class="test-bench"><h3>With pre</h3><pnx-search-bar placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
278
+ <div class="test-bench">
279
+ <h3>Reduced</h3>
280
+ <pnx-search-bar reduceable reduced placeholder="Look for a place"></pnx-search-bar>
281
+ </div>
282
+ <hr class="test-sep" />
283
+ <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>
284
+ <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>
285
+ <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>
286
+ <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>
287
+
288
+ <h2 id="progress-bar">Progress bar</h2>
289
+ <div class="test-bench"><h3>Half</h3><pnx-progress-bar value="42"></pnx-progress-bar></div>
290
+ <div class="test-bench"><h3>Indeterminate</h3><pnx-progress-bar></pnx-progress-bar></div>
291
+ <div class="test-bench"><h3>Full</h3><pnx-progress-bar value="100"></pnx-progress-bar></div>
292
+
293
+ <h2 id="tabs">Tabs</h2>
294
+ <div class="test-bench">
295
+ <h3>Many</h3>
296
+ <pnx-tabs>
297
+ <h4 slot="title">Tab 1</h4>
298
+ <div slot="content">Tab 1 content</div>
299
+ <h4 slot="title">Tab 2</h4>
300
+ <div slot="content">Tab 2 content</div>
301
+ <h4 slot="title">Tab 3</h4>
302
+ <div slot="content">Tab 3 content</div>
303
+ </pnx-tabs>
304
+ </div>
305
+ </body>
306
+ </html>
package/scripts/doc.js ADDED
@@ -0,0 +1,79 @@
1
+ /*
2
+ * Widely based on https://github.com/jsdoc2md/jsdoc-to-markdown/wiki/How-to-create-one-output-file-per-class
3
+ */
4
+
5
+ const jsdoc2md = require("jsdoc-to-markdown");
6
+ const fs = require("node:fs").promises;
7
+ const path = require("path");
8
+
9
+ const SRC_FOLDER = path.resolve(__dirname, "..", "src");
10
+ const OUTPUT_FOLDER = path.resolve(__dirname, "..", "docs", "reference");
11
+ const MD_LINK_RGX = /\[([^\]]+)\]\(#([^+)]+)\+?([^)]+)?\)/g;
12
+
13
+ // Remove all stuff in docs/reference/ folder
14
+ async function cleanupDocFolder(folder) {
15
+ await fs.rm(folder, {recursive: true, force: true});
16
+ }
17
+
18
+ // Create subfolders in docs/reference/ to match JS files folder tree
19
+ async function createSubFolders(fullFolder) {
20
+ const relPath = path.relative(SRC_FOLDER, fullFolder);
21
+ const docPath = path.join(OUTPUT_FOLDER, relPath);
22
+ await fs.mkdir(docPath, {recursive: true});
23
+ return docPath;
24
+ }
25
+
26
+ // Replace links in generated Markdown to go to relative file instead of same file
27
+ function cleanupMdLinks(clid, md) {
28
+ return md.replace(MD_LINK_RGX, (match, text, link, plus) => {
29
+ if(link == clid || link == `new_${clid}_new` || link.startsWith(clid+".")) { return match; }
30
+
31
+ const linkClassPath = link.split("+")[0].split(".").slice(1);
32
+ const currentClassPath = clid.split(".").slice(1);
33
+ const relPath = path.relative(
34
+ path.dirname(currentClassPath.join("/")+".md"),
35
+ linkClassPath.join("/")+".md"
36
+ );
37
+ return `[${text}](${relPath}/#${link}${plus ? "+"+plus : ""})`;
38
+ });
39
+ }
40
+
41
+ // Create MD file for a single JS file
42
+ async function writeDocs(templateData) {
43
+ const classes = templateData.filter(i => i.kind === "class" && i.name !== "exports");
44
+ for(let cl of classes) {
45
+ console.log("Generating doc for", cl.name);
46
+ const docPath = await createSubFolders(cl.meta.path);
47
+ const template = `{{#class name="${cl.name}"}}{{>docs}}{{/class}}`;
48
+ let output = await jsdoc2md.render({ data: templateData, template: template });
49
+ output = cleanupMdLinks(cl.id, output);
50
+ if(!output.startsWith("ERROR")) {
51
+ await fs.writeFile(path.resolve(docPath, `${cl.name}.md`), output);
52
+ }
53
+ }
54
+ }
55
+
56
+ // Recursive load of JS files
57
+ async function readSingleFolder(folder) {
58
+ console.log("Searching in folder", path.basename(folder));
59
+ let jsfiles = [];
60
+ const files = await fs.readdir(folder);
61
+ for(let file of files) {
62
+ const filepath = path.join(folder, file);
63
+ const stat = await fs.stat(filepath);
64
+
65
+ if(stat.isDirectory()) {
66
+ jsfiles = jsfiles.concat(await readSingleFolder(filepath));
67
+ }
68
+ else if(stat.isFile() && path.extname(filepath) === ".js") {
69
+ jsfiles.push(filepath);
70
+ }
71
+ }
72
+ return jsfiles;
73
+ }
74
+
75
+ // Main code execution
76
+ cleanupDocFolder(OUTPUT_FOLDER)
77
+ .then(() => readSingleFolder(SRC_FOLDER))
78
+ .then(files => jsdoc2md.getTemplateData({ files }))
79
+ .then(writeDocs);
package/src/components/core/Basic.css ADDED
@@ -0,0 +1,48 @@
1
+ /* Colors */
2
+ :root, :host {
3
+ --white: #ffffff;
4
+ --black: #181818;
5
+ --black-pale: #1b1a17;
6
+ --red: #f70000;
7
+ --red-pale: #ff726f;
8
+ --grey: #f5f5f5;
9
+ --grey-pale: #cfd2cf;
10
+ --grey-semi-dark: #808080;
11
+ --grey-dark: #3e3e3e;
12
+ --blue: #2954e9;
13
+ --blue-dark: #0a1f69;
14
+ --blue-semi: #d7dffc;
15
+ --blue-pale: #f2f5ff;
16
+ --blue-geovisio: #34495e;
17
+ --beige: #f5f3ec;
18
+ --yellow: #fec868;
19
+ --orange: #ff6f00;
20
+ --orange-pale: #fffafa;
21
+ --green: #7ec636;
22
+ --green-pale: #f0ffee;
23
+ --widget-bg: var(--white);
24
+ --widget-bg-hover: var(--grey);
25
+ --widget-bg-active: var(--blue);
26
+ --widget-bg-inactive: var(--grey-pale);
27
+ --widget-bg-primary: var(--blue-semi);
28
+ --widget-bg-primary-hover: #e0e7ff;
29
+ --widget-border-div: var(--grey-pale);
30
+ --widget-border-btn: var(--blue);
31
+ --widget-font: var(--grey-dark);
32
+ --widget-font-active: var(--white);
33
+ --widget-font-direct: var(--blue);
34
+ --font-family: "Atkinson Hyperlegible Next", sans-serif;
35
+ overscroll-behavior-y: contain;
36
+ }
37
+
38
+ .pnx-hidden { display: none !important; }
39
+
40
+ /* Hidden elements on mobile */
41
+ @container (max-width: 576px) {
42
+ .pnx-mobile-hidden { display: none !important; }
43
+ }
44
+
45
+ /* Hidden elements on print */
46
+ @media print {
47
+ .pnx-print-hidden { display: none !important; }
48
+ }