@panoramax/web-viewer 3.2.3-develop-4cdb44ae → 3.2.3-develop-e0ce9866

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/.gitlab-ci.yml +5 -0
  2. package/CHANGELOG.md +2 -1
  3. package/build/index.css +2 -2
  4. package/build/index.css.map +1 -1
  5. package/build/index.js +85 -52
  6. package/build/index.js.map +1 -1
  7. package/build/widgets.html +1 -1
  8. package/docs/reference/components/ui/Loader.md +2 -0
  9. package/docs/reference/components/ui/ProgressBar.md +32 -0
  10. package/docs/reference.md +1 -0
  11. package/mkdocs.yml +1 -0
  12. package/package.json +1 -1
  13. package/public/widgets.html +5 -0
  14. package/src/components/core/Basic.css +2 -0
  15. package/src/components/core/Basic.js +2 -2
  16. package/src/components/core/CoverageMap.js +5 -1
  17. package/src/components/core/Editor.js +6 -0
  18. package/src/components/core/Viewer.css +8 -0
  19. package/src/components/core/Viewer.js +25 -5
  20. package/src/components/layout/CorneredGrid.js +1 -1
  21. package/src/components/ui/Loader.js +22 -22
  22. package/src/components/ui/ProgressBar.js +73 -0
  23. package/src/components/ui/index.js +1 -0
  24. package/src/img/loader_base.jpg +0 -0
  25. package/src/utils/utils.js +9 -0
  26. package/src/img/loader_hd.jpg +0 -0
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}h2{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><h2>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>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><h2>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>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>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>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>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>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></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}h2{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><h2>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>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><h2>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>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>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>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>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>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>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></body></html>
package/docs/reference/components/ui/Loader.md CHANGED
@@ -31,6 +31,8 @@ Component properties.
31
31
  | Name | Type | Default | Description |
32
32
  | --- | --- | --- | --- |
33
33
  | [visible] | <code>boolean</code> | <code>true</code> | Is the loader visible to user ? |
34
+ | [no-label] | <code>boolean</code> | <code>false</code> | Set to true to avoid loading label display |
35
+ | [value] | <code>number</code> | | Progress bar percentage (0-100) |
34
36
 
35
37
  <a name="Panoramax.components.ui.Loader+isVisible"></a>
36
38
 
package/docs/reference/components/ui/ProgressBar.md ADDED
@@ -0,0 +1,32 @@
1
+ <a name="Panoramax.components.ui.ProgressBar"></a>
2
+
3
+ ## Panoramax.components.ui.ProgressBar ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
+ **Kind**: static class of <code>Panoramax.components.ui</code>
5
+ **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
+ **Element**: pnx-progress-bar
7
+
8
+ * [.ProgressBar](#Panoramax.components.ui.ProgressBar) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
9
+ * [new ProgressBar()](#new_Panoramax.components.ui.ProgressBar_new)
10
+ * [.properties](#Panoramax.components.ui.ProgressBar+properties) : <code>Object</code>
11
+
12
+ <a name="new_Panoramax.components.ui.ProgressBar_new"></a>
13
+
14
+ ### new ProgressBar()
15
+ Progress bar with nice styling.
16
+
17
+ **Example**
18
+ ```html
19
+ <pnx-loader value="42" ._t=${viewer._t} />
20
+ ```
21
+ <a name="Panoramax.components.ui.ProgressBar+properties"></a>
22
+
23
+ ### progressBar.properties : <code>Object</code>
24
+ Component properties.
25
+
26
+ **Kind**: instance property of [<code>ProgressBar</code>](#Panoramax.components.ui.ProgressBar)
27
+ **Properties**
28
+
29
+ | Name | Type | Description |
30
+ | --- | --- | --- |
31
+ | [value] | <code>number</code> | Progress bar percentage (0-100) or empty for indeterminate state |
32
+
package/docs/reference.md CHANGED
@@ -47,6 +47,7 @@ Basic UI components:
47
47
  - [MapMore](./reference/components/ui/MapMore.md) : advanced version of the browseable map.
48
48
  - [Photo](./reference/components/ui/Photo.md) : the picture display (Photo Sphere Viewer).
49
49
  - [Popup](./reference/components/ui/Popup.md) : an overlaying popup/modal.
50
+ - [ProgressBar](./reference/components/ui/ProgressBar.md) : a progress bar.
50
51
  - [QualityScore](./reference/components/ui/QualityScore.md) : a A/B/C/D/E grade display and input.
51
52
  - [SearchBar](./reference/components/ui/SearchBar.md) : a search bar.
52
53
  - [TogglableGroup](./reference/components/ui/TogglableGroup.md) : an helper for showing a menu on button click.
package/mkdocs.yml CHANGED
@@ -91,6 +91,7 @@ nav:
91
91
  - MapMore: 'reference/components/ui/MapMore.md'
92
92
  - Photo: 'reference/components/ui/Photo.md'
93
93
  - Popup: 'reference/components/ui/Popup.md'
94
+ - ProgressBar: 'reference/components/ui/ProgressBar.md'
94
95
  - QualityScore: 'reference/components/ui/QualityScore.md'
95
96
  - SearchBar: 'reference/components/ui/SearchBar.md'
96
97
  - TogglableGroup: 'reference/components/ui/TogglableGroup.md'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panoramax/web-viewer",
3
- "version": "3.2.3-develop-4cdb44ae",
3
+ "version": "3.2.3-develop-e0ce9866",
4
4
  "description": "Panoramax web viewer for geolocated pictures",
5
5
  "main": "build/index.js",
6
6
  "author": "Panoramax team",
package/public/widgets.html CHANGED
@@ -261,5 +261,10 @@
261
261
  <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>
262
262
  <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>
263
263
  <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>
264
+
265
+ <h2>Progress bar</h2>
266
+ <div class="test-bench"><h3>Half</h3><pnx-progress-bar value="42"></pnx-progress-bar></div>
267
+ <div class="test-bench"><h3>Indeterminate</h3><pnx-progress-bar></pnx-progress-bar></div>
268
+ <div class="test-bench"><h3>Full</h3><pnx-progress-bar value="100"></pnx-progress-bar></div>
264
269
  </body>
265
270
  </html>
package/src/components/core/Basic.css CHANGED
@@ -33,6 +33,8 @@
33
33
  --widget-font-direct: var(--blue);
34
34
  }
35
35
 
36
+ .pnx-hidden { display: none !important; }
37
+
36
38
  /* Hidden elements on mobile */
37
39
  @container (max-width: 576px) {
38
40
  .pnx-mobile-hidden { display: none !important; }
package/src/components/core/Basic.js CHANGED
@@ -3,7 +3,7 @@ import API from "../../utils/API";
3
3
  import { getTranslations } from "../../utils/i18n";
4
4
  import { DEFAULT_TILES } from "../../utils/map";
5
5
  import { createWebComp } from "../../utils/widgets";
6
- import { isInternetFast } from "../../utils/utils";
6
+ import { isInIframe, isInternetFast } from "../../utils/utils";
7
7
  import PACKAGE_JSON from "../../../package.json";
8
8
  import "./Basic.css";
9
9
 
@@ -72,7 +72,7 @@ export default class Basic extends LitElement {
72
72
  if(testing) { return; }
73
73
 
74
74
  // Show loader
75
- this.loader = createWebComp("pnx-loader", {_parent: this});
75
+ this.loader = createWebComp("pnx-loader", {_parent: this, "no-label": isInIframe() });
76
76
 
77
77
  // Internet speed check
78
78
  this._isInternetFast = null;
package/src/components/core/CoverageMap.js CHANGED
@@ -28,7 +28,10 @@ export default class CoverageMap extends Basic {
28
28
  super();
29
29
 
30
30
  this._mapContainer = document.createElement("div");
31
- this.onceAPIReady().then(() => this._initMap());
31
+ this.onceAPIReady().then(() => {
32
+ this.loader.setAttribute("value", 30);
33
+ this._initMap();
34
+ });
32
35
 
33
36
  // Events handlers
34
37
  this.addEventListener("select", this._onSelect.bind(this));
@@ -73,6 +76,7 @@ export default class CoverageMap extends Basic {
73
76
 
74
77
  this.map = new MyMap(this, this._mapContainer, mapOptions);
75
78
  this.map.addControl(new NavigationControl({ showCompass: false }));
79
+ this.loader.setAttribute("value", 70);
76
80
  this.map.waitForEnoughMapLoaded().then(() => {
77
81
  this.map.reloadLayersStyles();
78
82
  this.loader.dismiss();
package/src/components/core/Editor.js CHANGED
@@ -61,6 +61,8 @@ export default class Editor extends Basic {
61
61
  this._mapContainer = document.createElement("div");
62
62
 
63
63
  this.onceAPIReady().then(() => {
64
+ this.loader.setAttribute("value", 30);
65
+
64
66
  // Check sequence ID is set
65
67
  if(!this.sequence) { this.loader.dismiss({}, "No sequence is selected"); }
66
68
 
@@ -112,6 +114,7 @@ export default class Editor extends Basic {
112
114
  zoom: 15, // Hack to avoid _initMapPosition call
113
115
  });
114
116
  linkMapAndPhoto(this);
117
+ this.loader.setAttribute("value", 50);
115
118
  this._loadSequence();
116
119
  this.map.once("load", () => {
117
120
  if(this.map.hasTwoBackgrounds()) { this._addMapBackgroundWidget(); }
@@ -191,7 +194,10 @@ export default class Editor extends Basic {
191
194
  * @private
192
195
  */
193
196
  _loadSequence() {
197
+ this.loader.setAttribute("value", 60);
194
198
  return this.api.getSequenceItems(this.sequence).then(seq => {
199
+ this.loader.setAttribute("value", 80);
200
+
195
201
  // Hide loader after source load
196
202
  this.map.once("sourcedata", () => {
197
203
  this.map.setPaintProperty("geovisio_editor_sequences", "line-color", this.map._getLayerColorStyle("sequences"));
package/src/components/core/Viewer.css CHANGED
@@ -107,3 +107,11 @@ pnx-viewer:not(pnx-viewer[focus="pic"]) .pnx-only-psv {
107
107
  pnx-viewer .pnx-map .maplibregl-ctrl-attrib {
108
108
  display: none;
109
109
  }
110
+
111
+ /* Override geosearch sizing */
112
+ @media screen and (max-width: 576px) {
113
+ pnx-widget-geosearch pnx-search-bar:not([reduced])::part(container) {
114
+ width: 250px;
115
+ max-width: 40vw;
116
+ }
117
+ }
package/src/components/core/Viewer.js CHANGED
@@ -8,6 +8,7 @@ import Basic from "./Basic";
8
8
  import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../ui/Photo";
9
9
  import MapMore from "../ui/MapMore";
10
10
  import { initMapKeyboardHandler } from "../../utils/map";
11
+ import { isNullId } from "../../utils/utils";
11
12
  import { createWebComp } from "../../utils/widgets";
12
13
  import { fa } from "../../utils/widgets";
13
14
  import { faPanorama } from "@fortawesome/free-solid-svg-icons/faPanorama";
@@ -112,7 +113,7 @@ export default class Viewer extends Basic {
112
113
  slot: "bottom-left",
113
114
  _parent: this,
114
115
  onexpand: this._onMiniExpand.bind(this),
115
- collapsed: this.picture ? undefined : true
116
+ collapsed: isNullId(this.picture) ? true : undefined
116
117
  });
117
118
  this.mini.addEventListener("expand", this._toggleFocus.bind(this));
118
119
  this.grid.appendChild(this.mini);
@@ -135,6 +136,7 @@ export default class Viewer extends Basic {
135
136
  this._moveChildToGrid();
136
137
 
137
138
  this.onceAPIReady().then(async () => {
139
+ this.loader.setAttribute("value", 30);
138
140
  this._initParams = new InitParameters(
139
141
  InitParameters.GetComponentProperties(Viewer, this),
140
142
  this.urlHandler?.currentURLParams()
@@ -153,7 +155,11 @@ export default class Viewer extends Basic {
153
155
 
154
156
  // Init various widgets
155
157
  if(myInitParams.widgets !== "false") {
156
- this.grid.appendChild(createWebComp("pnx-widget-zoom", {slot: "bottom-right", class: "pnx-print-hidden", _parent: this}));
158
+ this.grid.appendChild(createWebComp("pnx-widget-zoom", {
159
+ slot: this.isHeightSmall() ? "top-left" : "bottom-right",
160
+ class: this.isHeightSmall() ? "pnx-only-map pnx-print-hidden" : "pnx-print-hidden",
161
+ _parent: this
162
+ }));
157
163
  this.grid.appendChild(createWebComp("pnx-widget-share", {slot: "bottom-right", class: "pnx-print-hidden", _parent: this}));
158
164
 
159
165
  if(this.map) {
@@ -215,9 +221,12 @@ export default class Viewer extends Basic {
215
221
  super.attributeChangedCallback(name, old, value);
216
222
 
217
223
  // First pic load : show map in mini component
218
- if(name === "picture" && old === null && value !== null) {
224
+ if(name === "picture" && isNullId(old) && !isNullId(value)) {
219
225
  this.mini.removeAttribute("collapsed");
220
226
  }
227
+ if(name === "picture" && isNullId(value) && this.map && this.isMapWide()) {
228
+ this.mini.classList.add("pnx-hidden");
229
+ }
221
230
  if(name === "focus") {
222
231
  this._setFocus(value);
223
232
  }
@@ -325,7 +334,10 @@ export default class Viewer extends Basic {
325
334
  },
326
335
  ...this._initParams.getPSVInit()
327
336
  });
328
- this.oncePSVReady().then(() => alterPSVState(this.psv, this._initParams.getPSVPostInit()));
337
+ this.oncePSVReady().then(() => {
338
+ this.loader.setAttribute("value", 50);
339
+ alterPSVState(this.psv, this._initParams.getPSVPostInit());
340
+ });
329
341
  }
330
342
  catch(e) {
331
343
  let err = !PSSystem.isWebGLSupported ? this._t.pnx.error_webgl : this._t.pnx.error_psv;
@@ -342,7 +354,10 @@ export default class Viewer extends Basic {
342
354
  async _initMap() {
343
355
  await new Promise(resolve => {
344
356
  this.map = new MapMore(this, this.mapContainer, this._initParams.getMapInit());
345
- this.map.once("users-changed", resolve);
357
+ this.map.once("users-changed", () => {
358
+ this.loader.setAttribute("value", 75);
359
+ resolve();
360
+ });
346
361
  });
347
362
 
348
363
  alterMapState(this.map, this._initParams.getMapPostInit());
@@ -609,6 +624,10 @@ export default class Viewer extends Basic {
609
624
  // Add PSV to mini
610
625
  this.mini.appendChild(this.psvContainer);
611
626
  this.mini.icon = fa(faPanorama);
627
+
628
+ // Hide mini icon if no picture selected
629
+ if(isNullId(this.picture)) { this.mini.classList.add("pnx-hidden"); }
630
+ else { this.mini.classList.remove("pnx-hidden"); }
612
631
 
613
632
  this.map.getCanvas().focus();
614
633
  }
@@ -629,6 +648,7 @@ export default class Viewer extends Basic {
629
648
  this.grid.appendChild(this.psvContainer);
630
649
 
631
650
  // Add map to mini
651
+ this.mini.classList.remove("pnx-hidden");
632
652
  this.mini.appendChild(this.mapContainer);
633
653
  this.mini.icon = fa(faMap);
634
654
 
package/src/components/layout/CorneredGrid.js CHANGED
@@ -64,7 +64,7 @@ export default class CorneredGrid extends LitElement {
64
64
  }
65
65
 
66
66
  .row.bottom .corner:not(.middle) { flex-direction: column; }
67
- .row.bottom .corner.left { justify-content: flex-end; align-items: flex-start; }
67
+ .row.bottom .corner.left { flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start; }
68
68
  .row.bottom .corner.middle { justify-content: center; align-items: flex-end; }
69
69
  .row.bottom .corner.right { justify-content: flex-end; align-items: flex-end; }
70
70
 
package/src/components/ui/Loader.js CHANGED
@@ -1,6 +1,6 @@
1
- import { LitElement, html, css } from "lit";
1
+ import { LitElement, html, css, unsafeCSS, nothing } from "lit";
2
2
  import LogoDead from "../../img/logo_dead.svg";
3
- import LoaderImg from "../../img/marker.svg";
3
+ import LoaderBg from "../../img/loader_base.jpg";
4
4
 
5
5
  /**
6
6
  * Loader component display a full page covering for user waiting.
@@ -21,13 +21,16 @@ export default class Loader extends LitElement {
21
21
  display: flex;
22
22
  flex-direction: column;
23
23
  justify-content: center;
24
- gap: 20px;
24
+ gap: 10px;
25
25
  align-items: center;
26
- background: #37474F;
26
+ background-image: url('${unsafeCSS(LoaderBg)}');
27
+ background-repeat: no-repeat;
28
+ background-size: cover;
29
+ background-position: center;
27
30
  z-index: 200;
28
31
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
29
32
  font-weight: 550;
30
- color: white;
33
+ color: var(--black);
31
34
  font-size: 1.4em;
32
35
  text-align: center;
33
36
  visibility: hidden;
@@ -38,24 +41,14 @@ export default class Loader extends LitElement {
38
41
  opacity: 1;
39
42
  }
40
43
 
41
- /* Flashing text */
42
44
  div.label {
43
- animation: blinker 2s linear infinite;
45
+ background-color: rgba(255,255,255,0.5);
46
+ box-shadow: white 0 0 10px;
47
+ padding: 3px 10px;
48
+ border-radius: 50px;
44
49
  }
45
- @keyframes blinker { 50% { opacity: 0.3; } }
46
-
47
50
  /* Logo */
48
- img.logo {
49
- width: 150px;
50
- animation: rotating 1.4s linear infinite;
51
- }
52
- @keyframes rotating {
53
- from { transform: rotate(0deg); }
54
- to { transform: rotate(360deg); }
55
- }
56
- img.logo-dead {
57
- width: 200px;
58
- }
51
+ img.logo-dead { width: 100px; }
59
52
  `;
60
53
 
61
54
  /**
@@ -63,19 +56,25 @@ export default class Loader extends LitElement {
63
56
  * @memberof Panoramax.components.ui.Loader#
64
57
  * @type {Object}
65
58
  * @property {boolean} [visible=true] Is the loader visible to user ?
59
+ * @property {boolean} [no-label=false] Set to true to avoid loading label display
60
+ * @property {number} [value] Progress bar percentage (0-100)
66
61
  */
67
62
  static properties = {
68
63
  _mode: {state: true},
69
64
  _label: {state: true},
70
65
  _isLabelFun: {state: true},
71
66
  visible: {type: Boolean, reflect: true},
67
+ "no-label": {type: Boolean},
68
+ value: {type: Number},
72
69
  };
73
70
 
74
71
  constructor() {
75
72
  super();
76
73
  this.visible = true;
74
+ this["no-label"] = false;
77
75
  this._mode = "loading";
78
76
  this._isLabelFun = false;
77
+ this.value = "";
79
78
  }
80
79
 
81
80
  /** @private */
@@ -104,6 +103,7 @@ export default class Loader extends LitElement {
104
103
  clearTimeout(this._loaderLabelChanger);
105
104
 
106
105
  if(!err) {
106
+ this.value = 100;
107
107
  this._mode = "done";
108
108
  this.visible = false;
109
109
  this.style.transition = "all 0.5s";
@@ -179,8 +179,8 @@ export default class Loader extends LitElement {
179
179
  }
180
180
 
181
181
  return html`
182
- <img class="logo" src=${LoaderImg} alt="" title=${this._parent?._t.map.loading} />
183
- <div class="label">${this._label}</div>
182
+ <pnx-progress-bar .value=${this.value}></pnx-progress-bar>
183
+ ${this["no-label"] ? nothing : html`<div class="label">${this._label}</div>`}
184
184
  `;
185
185
  }
186
186
  }
package/src/components/ui/ProgressBar.js ADDED
@@ -0,0 +1,73 @@
1
+ import { LitElement, css, html } from "lit";
2
+
3
+ /**
4
+ * Progress bar with nice styling.
5
+ * @class Panoramax.components.ui.ProgressBar
6
+ * @element pnx-progress-bar
7
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
8
+ * @example
9
+ * ```html
10
+ * <pnx-loader value="42" ._t=${viewer._t} />
11
+ * ```
12
+ */
13
+ export default class ProgressBar extends LitElement {
14
+ /** @private */
15
+ static styles = css`
16
+ progress, progress::-webkit-progress-bar {
17
+ max-width: 80%;
18
+ width: 300px;
19
+ height: 16px;
20
+ appearance: none;
21
+ -webkit-appearance: none;
22
+ border: 1px solid var(--grey-semi-dark);
23
+ background-color: var(--grey);
24
+ border-radius: 8px;
25
+ overflow: hidden;
26
+ padding: 3px;
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ progress::-webkit-progress-value,
31
+ progress::-moz-progress-bar {
32
+ background-color: var(--blue);
33
+ border-radius: 5px;
34
+ box-sizing: border-box;
35
+ }
36
+
37
+ progress[value=""]::-webkit-progress-value,
38
+ progress[value=""]::-moz-progress-bar {
39
+ animation: indeterminateAnimation 1.5s infinite linear;
40
+ }
41
+
42
+ @keyframes indeterminateAnimation {
43
+ 0% { margin-left: 0%; width: 2%; }
44
+ 15% { margin-left: 0%; width: 20%; }
45
+ 50% { margin-left: 40%; width: 20%; }
46
+ 85% { margin-left: 80%; width: 20%; }
47
+ 100% { margin-left: 98%; width: 2%; }
48
+ }
49
+ `;
50
+
51
+ /**
52
+ * Component properties.
53
+ * @memberof Panoramax.components.ui.ProgressBar#
54
+ * @type {Object}
55
+ * @property {number} [value] Progress bar percentage (0-100) or empty for indeterminate state
56
+ */
57
+ static properties = {
58
+ value: {type: Number},
59
+ };
60
+
61
+ /** @private */
62
+ render() {
63
+ return html`
64
+ <progress
65
+ value=${this.value >= 0 ? this.value : ""}
66
+ max="100"
67
+ title=${this._t?.map.loading}
68
+ ></progress>
69
+ `;
70
+ }
71
+ }
72
+
73
+ customElements.define("pnx-progress-bar", ProgressBar);
package/src/components/ui/index.js CHANGED
@@ -13,6 +13,7 @@ export {default as Map} from "./Map";
13
13
  export {default as MapMore} from "./MapMore";
14
14
  export {default as Photo} from "./Photo";
15
15
  export {default as Popup} from "./Popup";
16
+ export {default as ProgressBar} from "./ProgressBar";
16
17
  export {default as QualityScore} from "./QualityScore";
17
18
  export {default as SearchBar} from "./SearchBar";
18
19
  export {default as TogglableGroup} from "./TogglableGroup";
package/src/img/loader_base.jpg CHANGED
Binary file
package/src/utils/utils.js CHANGED
@@ -35,6 +35,15 @@ export const QUALITYSCORE_POND_RES = 4/5;
35
35
  export const QUALITYSCORE_POND_GPS = 1/5;
36
36
 
37
37
 
38
+ /**
39
+ * Checks if a picture or sequence ID is kinda-null.
40
+ * @param {string|null|undefined} id The ID to check
41
+ * @returns True if null-like
42
+ */
43
+ export function isNullId(id) {
44
+ return [null, undefined, "", BASE_PANORAMA_ID].includes(id);
45
+ }
46
+
38
47
  /**
39
48
  * Find the grade associated to an input Quality Score definition.
40
49
  * @param {number[]} ranges The QUALITYSCORE_*_VALUES definition
package/src/img/loader_hd.jpg DELETED
Binary file