@panoramax/web-viewer 3.2.3-develop-955f2f1e → 3.2.3-develop-649d49a9

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 (26) hide show
  1. package/build/index.css +1 -1
  2. package/build/index.css.map +1 -1
  3. package/build/index.html +1 -1
  4. package/build/index.js +71 -32
  5. package/build/index.js.map +1 -1
  6. package/build/photo.html +1 -1
  7. package/build/viewer.html +1 -1
  8. package/build/widgets.html +1 -1
  9. package/package.json +1 -1
  10. package/public/index.html +2 -2
  11. package/public/photo.html +2 -2
  12. package/public/viewer.html +2 -2
  13. package/public/widgets.html +2 -2
  14. package/src/components/core/Viewer.css +1 -1
  15. package/src/components/layout/BottomDrawer.js +19 -0
  16. package/src/components/menus/MapFilters.js +1 -1
  17. package/src/components/menus/MapLayers.js +1 -1
  18. package/src/components/menus/PictureMetadata.js +9 -7
  19. package/src/components/styles.js +11 -11
  20. package/src/components/ui/ButtonGroup.css +5 -1
  21. package/src/components/ui/Loader.js +1 -1
  22. package/src/components/ui/ProgressBar.js +38 -7
  23. package/src/components/ui/widgets/Legend.js +8 -2
  24. package/src/components/ui/widgets/OSMEditors.js +3 -1
  25. package/src/translations/en.json +1 -1
  26. package/src/translations/fr.json +1 -1
package/build/photo.html CHANGED
@@ -1 +1 @@
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 Photo Viewer</title><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-photo-viewer id="viewer" class="fullpage" sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8" picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"/><script>var servers={meta:"https://api.panoramax.xyz/api",ign:"https://panoramax.ign.fr/api",osm:"https://panoramax.openstreetmap.fr/api",local:"http://localhost:5000/api",dev:"https://panoramax.codeureusesenliberte.fr/api"},urlParams=new URLSearchParams(window.location.search),server=servers[urlParams.get("server")||"meta"];window.onload=()=>{document.getElementById("viewer").setAttribute("endpoint",server)}</script></body></html>
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 Photo Viewer</title><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-photo-viewer id="viewer" class="fullpage" sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8" picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"/><script>var servers={meta:"https://api.panoramax.xyz/api",ign:"https://panoramax.ign.fr/api",osm:"https://panoramax.openstreetmap.fr/api",local:"http://localhost:5000/api",dev:"https://panoramax.codeureusesenliberte.fr/api"},urlParams=new URLSearchParams(window.location.search),server=servers[urlParams.get("server")||"meta"];window.onload=()=>{document.getElementById("viewer").setAttribute("endpoint",server)}</script></body></html>
package/build/viewer.html CHANGED
@@ -1,4 +1,4 @@
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</title><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" map='{
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</title><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" map='{
2
2
  raster: {
3
3
  type: "raster",
4
4
  tiles: [
package/build/widgets.html CHANGED
@@ -1 +1 @@
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></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></body></html>
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></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></body></html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panoramax/web-viewer",
3
- "version": "3.2.3-develop-955f2f1e",
3
+ "version": "3.2.3-develop-649d49a9",
4
4
  "description": "Panoramax web viewer for geolocated pictures",
5
5
  "main": "build/index.js",
6
6
  "author": "Panoramax team",
package/public/index.html CHANGED
@@ -1,8 +1,8 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
3
  <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
6
  <title>Panoramax JS Library</title>
7
7
  <style>
8
8
  body {
package/public/photo.html CHANGED
@@ -1,8 +1,8 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
3
  <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
6
  <title>Panoramax Photo Viewer</title>
7
7
  <style>
8
8
  #viewer {
package/public/viewer.html CHANGED
@@ -1,8 +1,8 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
3
  <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
6
  <title>Panoramax Web Viewer</title>
7
7
  <style>
8
8
  #viewer {
package/public/widgets.html CHANGED
@@ -1,8 +1,8 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
3
  <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
6
  <title>Panoramax Widgets</title>
7
7
  <style>
8
8
  body {
package/src/components/core/Viewer.css CHANGED
@@ -46,7 +46,7 @@ pnx-viewer pnx-mini {
46
46
  z-index: 120;
47
47
  }
48
48
 
49
- @media screen and ((max-height: 400px) or (max-width: 576px)) {
49
+ @media screen and ((max-width: 576px)) {
50
50
  pnx-viewer pnx-mini {
51
51
  min-width: unset;
52
52
  min-height: unset;
package/src/components/layout/BottomDrawer.js CHANGED
@@ -105,6 +105,16 @@ export default class BottomDrawer extends LitElement {
105
105
  drawer.style.maxHeight = `${this._drawerHeight}px`;
106
106
  }
107
107
 
108
+ /** @private */
109
+ attributeChangedCallback(name, old, value) {
110
+ super.attributeChangedCallback(name, old, value);
111
+
112
+ if(name === "openness" && value !== "opened") {
113
+ const content = this.shadowRoot.querySelector(".content");
114
+ if(content) { content.scrollTop = 0; }
115
+ }
116
+ }
117
+
108
118
  /** @private */
109
119
  disconnectedCallback() {
110
120
  super.disconnectedCallback();
@@ -131,6 +141,14 @@ export default class BottomDrawer extends LitElement {
131
141
  /** @private */
132
142
  _onTouchMove(e) {
133
143
  if (!this._isDragging) return;
144
+
145
+ // Check if content has scroll bar, then only move if top scrolled
146
+ const content = this.shadowRoot.querySelector(".content");
147
+ if(content.scrollHeight > content.offsetHeight && content.scrollTop > 0) {
148
+ this._updateDrawerTransform(0);
149
+ return;
150
+ }
151
+
134
152
  this._deltaFingerY = e.touches[0].clientY - this._startFingerY;
135
153
  this._updateDrawerTransform(this._drawerY + this._deltaFingerY);
136
154
  }
@@ -162,6 +180,7 @@ export default class BottomDrawer extends LitElement {
162
180
 
163
181
  // Snap to nearest static position
164
182
  if(snap) {
183
+
165
184
  const pct = y / (this._drawerHeight - 30);
166
185
  if(pct > OPENNESS_Y_PCT_RANGE.opened[0] && pct <= OPENNESS_Y_PCT_RANGE.opened[1]) { this.openness = "opened"; }
167
186
  if(pct > OPENNESS_Y_PCT_RANGE["half-opened"][0] && pct <= OPENNESS_Y_PCT_RANGE["half-opened"][1]) { this.openness = "half-opened"; }
package/src/components/menus/MapFilters.js CHANGED
@@ -350,7 +350,7 @@ export default class MapFilters extends LitElement {
350
350
  ${fa(faMedal)} ${this._parent?._t.pnx.filter_qualityscore}
351
351
  <pnx-button
352
352
  title="${this._parent?._t.pnx.metadata_quality_help}"
353
- kind="outline"
353
+ kind="superinline"
354
354
  @click=${() => this._parent?._showQualityScoreDoc()}
355
355
  >
356
356
  ${fa(faInfoCircle)}
package/src/components/menus/MapLayers.js CHANGED
@@ -129,7 +129,7 @@ export default class MapLayers extends LitElement {
129
129
  <pnx-quality-score></pnx-quality-score>
130
130
  <pnx-button
131
131
  title="${this._parent?._t.pnx.metadata_quality_help}"
132
- kind="outline"
132
+ kind="superinline"
133
133
  @click=${() => this._parent?._showQualityScoreDoc()}
134
134
  >
135
135
  ${fa(faInfoCircle)}
package/src/components/menus/PictureMetadata.js CHANGED
@@ -51,7 +51,7 @@ export default class PictureMetadata extends LitElement {
51
51
  .data-block {
52
52
  display: inline-block;
53
53
  min-width: 50%;
54
- margin: 5px 0;
54
+ margin: 8px 0;
55
55
  box-sizing: border-box;
56
56
  vertical-align: top;
57
57
  }
@@ -61,8 +61,10 @@ export default class PictureMetadata extends LitElement {
61
61
  color: var(--blue-dark);
62
62
  margin: 0 0 5px 0;
63
63
  }
64
+ .data-block h5 pnx-button { vertical-align: middle; }
65
+ .data-block h5 svg.svg-inline--fa { height: 14px; }
64
66
  .data-block div {
65
- font-size: 1em;
67
+ font-size: 0.8em;
66
68
  }
67
69
  ` ];
68
70
 
@@ -169,17 +171,17 @@ export default class PictureMetadata extends LitElement {
169
171
 
170
172
  qualityData = [
171
173
  {
172
- title: this._parent?._t.pnx.metadata_quality_score,
173
- content: html`<div style="display: flex; justify-content: center; gap: 10px; align-items: center;">
174
- <pnx-quality-score grade=${generalGrade} style="font-size: 16px"></pnx-quality-score>
174
+ title: html`
175
+ ${this._parent?._t.pnx.metadata_quality_score}
175
176
  <pnx-button
176
177
  title="${this._parent?._t.pnx.metadata_quality_help}"
177
- kind="outline"
178
+ kind="superinline"
178
179
  @click=${() => this._parent?._showQualityScoreDoc()}
179
180
  >
180
181
  ${fa(faInfoCircle)}
181
182
  </pnx-button>
182
- </div>`,
183
+ `,
184
+ content: html`<pnx-quality-score grade=${generalGrade} style="font-size: 16px"></pnx-quality-score>`,
183
185
  style: "width: 100%"
184
186
  },
185
187
  {
package/src/components/styles.js CHANGED
@@ -151,6 +151,7 @@ export const btn = css`
151
151
  border-radius: 6px;
152
152
  line-height: 12px;
153
153
  font-size: 12px;
154
+ min-width: unset;
154
155
  }
155
156
 
156
157
  .pnx-btn.pnx-btn-sm .svg-inline--fa,
@@ -163,7 +164,7 @@ export const btn = css`
163
164
  height: 24px;
164
165
  line-height: 24px;
165
166
  font-size: 20px;
166
- width: 24px;
167
+ min-width: 24px;
167
168
  }
168
169
 
169
170
  .pnx-btn-xl {
@@ -187,7 +188,7 @@ export const btn = css`
187
188
  height: 56px;
188
189
  line-height: 56px;
189
190
  font-size: 24px;
190
- width: 56px;
191
+ min-width: 56px;
191
192
  }
192
193
 
193
194
  .pnx-btn.pnx-btn-xxl .svg-inline--fa,
@@ -249,13 +250,18 @@ export const btn = css`
249
250
  .pnx-btn-inline,
250
251
  .pnx-btn-inline.pnx-btn-active,
251
252
  .pnx-btn-inline.pnx-btn-active:hover,
252
- .pnx-btn-inline:not(:disabled):hover {
253
+ .pnx-btn-inline:not(:disabled):hover,
254
+ .pnx-btn-superinline,
255
+ .pnx-btn-superinline.pnx-btn-active,
256
+ .pnx-btn-superinline.pnx-btn-active:hover,
257
+ .pnx-btn-superinline:not(:disabled):hover {
253
258
  border: none;
254
259
  color: var(--widget-font);
255
- background-color: var(--widget-bg);
260
+ background: none;
256
261
  }
257
262
 
258
- .pnx-btn-inline:not(:disabled):hover {
263
+ .pnx-btn-inline:not(:disabled):hover,
264
+ .pnx-btn-superinline:not(:disabled):hover {
259
265
  background-color: var(--widget-bg-hover);
260
266
  }
261
267
 
@@ -264,13 +270,7 @@ export const btn = css`
264
270
  .pnx-btn-superinline.pnx-btn-active,
265
271
  .pnx-btn-superinline.pnx-btn-active:hover,
266
272
  .pnx-btn-superinline:not(:disabled):hover {
267
- border: none;
268
273
  color: var(--widget-font-direct);
269
- background-color: var(--widget-bg);
270
- }
271
-
272
- .pnx-btn-superinline:not(:disabled):hover {
273
- background-color: var(--widget-bg-hover);
274
274
  }
275
275
  `;
276
276
 
package/src/components/ui/ButtonGroup.css CHANGED
@@ -1,5 +1,9 @@
1
1
  pnx-button-group > pnx-button {
2
- display: inline-block;
2
+ display: inline-flex;
3
+ }
4
+
5
+ pnx-button-group > pnx-button::part(btn) {
6
+ height: unset;
3
7
  }
4
8
 
5
9
  /* Togglable in group */
package/src/components/ui/Loader.js CHANGED
@@ -74,7 +74,7 @@ export default class Loader extends LitElement {
74
74
  this["no-label"] = false;
75
75
  this._mode = "loading";
76
76
  this._isLabelFun = false;
77
- this.value = "";
77
+ this.value = -1;
78
78
  }
79
79
 
80
80
  /** @private */
package/src/components/ui/ProgressBar.js CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement, css, html } from "lit";
1
+ import { LitElement, css, html, nothing } from "lit";
2
2
 
3
3
  /**
4
4
  * Progress bar with nice styling.
@@ -13,8 +13,8 @@ import { LitElement, css, html } from "lit";
13
13
  export default class ProgressBar extends LitElement {
14
14
  /** @private */
15
15
  static styles = css`
16
- progress, progress::-webkit-progress-bar {
17
- max-width: 80%;
16
+ progress {
17
+ max-width: 80vh;
18
18
  width: 300px;
19
19
  height: 16px;
20
20
  appearance: none;
@@ -25,18 +25,48 @@ export default class ProgressBar extends LitElement {
25
25
  overflow: hidden;
26
26
  padding: 3px;
27
27
  box-sizing: border-box;
28
+ display: block;
29
+ }
30
+
31
+ progress::-webkit-progress-bar {
32
+ background-color: var(--grey);
33
+ }
34
+
35
+ /* Don't merge with -moz below, for some f*ing reason a list selector doesn't work with Chrome */
36
+ progress::-webkit-progress-value {
37
+ background-color: var(--blue);
38
+ border-radius: 5px;
39
+ box-sizing: border-box;
28
40
  }
29
41
 
30
- progress::-webkit-progress-value,
31
42
  progress::-moz-progress-bar {
32
43
  background-color: var(--blue);
33
44
  border-radius: 5px;
34
45
  box-sizing: border-box;
35
46
  }
36
47
 
37
- progress[value=""]::-webkit-progress-value,
38
- progress[value=""]::-moz-progress-bar {
48
+ progress[value=""]::-moz-progress-bar,
49
+ progress:not([value])::-moz-progress-bar {
50
+ animation: indeterminateAnimation 1.5s infinite linear;
51
+ }
52
+
53
+ progress.indeterminate {
54
+ position: relative;
55
+ background-color: var(--grey);
56
+ overflow: hidden;
57
+ }
58
+
59
+ progress.indeterminate::after {
60
+ content: "";
61
+ position: absolute;
62
+ left: 3px;
63
+ top: 3px;
64
+ bottom: 3px;
65
+ width: 20%;
66
+ background-color: var(--blue);
67
+ border-radius: 5px;
39
68
  animation: indeterminateAnimation 1.5s infinite linear;
69
+ pointer-events: none;
40
70
  }
41
71
 
42
72
  @keyframes indeterminateAnimation {
@@ -62,7 +92,8 @@ export default class ProgressBar extends LitElement {
62
92
  render() {
63
93
  return html`
64
94
  <progress
65
- value=${this.value >= 0 ? this.value : ""}
95
+ value=${this.value >= 0 ? this.value : nothing}
96
+ class=${this.value >= 0 ? nothing : "indeterminate"}
66
97
  max="100"
67
98
  title=${this._t?.map.loading}
68
99
  ></progress>
package/src/components/ui/widgets/Legend.js CHANGED
@@ -82,8 +82,14 @@ export default class Legend extends LitElement {
82
82
  <img class="logo" src=${PanoramaxImg} alt="" />
83
83
  <div>
84
84
  Panoramax est le géocommun des photos de rues.
85
- <pnx-link-button title=${this._parent?._t.map.more_panoramax} kind="outline" href="https://panoramax.fr" target="_blank">
86
- ${fa(faInfoCircle, { styles: {height: "12px", "margin-inline": "3px"}})}
85
+ <pnx-link-button
86
+ title=${this._parent?._t.map.more_panoramax}
87
+ kind="superinline"
88
+ href="https://panoramax.fr"
89
+ target="_blank"
90
+ size="sm"
91
+ >
92
+ ${fa(faInfoCircle)}
87
93
  </pnx-link-button>
88
94
  </div>
89
95
  </div>
package/src/components/ui/widgets/OSMEditors.js CHANGED
@@ -106,6 +106,8 @@ export default class OSMEditors extends LitElement {
106
106
 
107
107
  /** @private */
108
108
  render() {
109
+ if(!this._pic) { return nothing; }
110
+
109
111
  // Mobile -> Geo URI
110
112
  if(this._parent?.isWidthSmall()) {
111
113
  return html`
@@ -118,7 +120,7 @@ export default class OSMEditors extends LitElement {
118
120
  `;
119
121
  }
120
122
  else {
121
- const idOpts = this._pic && {
123
+ const idOpts = {
122
124
  "map": `19/${this._pic.gps[1]}/${this._pic.gps[0]}`,
123
125
  "source": "Panoramax",
124
126
  "photo_overlay": "panoramax",
package/src/translations/en.json CHANGED
@@ -32,7 +32,7 @@
32
32
  "search_user": "Search a username…",
33
33
  "share": "Share",
34
34
  "share_links": "Links",
35
- "share_page": "Link to this page",
35
+ "share_page": "Link to this picture",
36
36
  "share_image": "HD Image",
37
37
  "share_rss": "RSS feed",
38
38
  "share_rss_title": "RSS feed of new sequences in the currently visible map area",
package/src/translations/fr.json CHANGED
@@ -32,7 +32,7 @@
32
32
  "search_user": "Rechercher un nom d'utilisateur…",
33
33
  "share": "Partager",
34
34
  "share_links": "Liens utiles",
35
- "share_page": "Lien de la page",
35
+ "share_page": "Lien de la photo",
36
36
  "share_image": "Image HD",
37
37
  "share_rss": "Flux RSS",
38
38
  "share_rss_title": "Flux RSS des nouvelles séquences dans la zone visible sur la carte",