@panoramax/web-viewer
Version:
Panoramax web viewer for geolocated pictures
339 lines (328 loc) • 13.7 kB
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, p, nav { 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>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<h1>Panoramax widgets</h1>
<p>Test page for common Panoramax viewer widgets</p>
<nav>
<a href="#button">Button</a>
<a href="#link-button">Link Button</a>
<a href="#copy-button">Copy button</a>
<a href="#button-group">Button Group</a>
<a href="#5stars">5-stars grade</a>
<a href="#quality-score">Quality Score</a>
<a href="#search-bar">Search bar</a>
<a href="#progress-bar">Progress bar</a>
<a href="#tabs">Tabs</a>
<a href="#semantics-editor">Semantics Editor</a>
</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 type="text" value="copypasta3" id="copy-input-1" />
<pnx-copy-button input="copy-input-1"></pnx-copy-button>
</div>
</div>
<h2 id="button-group">Button Group</h2>
<div class="test-bench">
<h3>Full Row x2</h3>
<div>
<pnx-button-group dir="row">
<pnx-button>☹️</pnx-button>
<pnx-button>🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Full Row x3</h3>
<div>
<pnx-button-group dir="row">
<pnx-button>☹️</pnx-button>
<pnx-button>😐</pnx-button>
<pnx-button>🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Full Row mixed</h3>
<div>
<pnx-button-group dir="row">
<pnx-button>☹️</pnx-button>
<pnx-link-button>😐</pnx-link-button>
<pnx-copy-button>🙂</pnx-copy-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Full Column x2</h3>
<div>
<pnx-button-group dir="column">
<pnx-button>☹️</pnx-button>
<pnx-button>🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Full Column x3</h3>
<div>
<pnx-button-group dir="column">
<pnx-button>☹️</pnx-button>
<pnx-button>😐</pnx-button>
<pnx-button>🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Full Column mixed</h3>
<div>
<pnx-button-group dir="column">
<pnx-button>☹️</pnx-button>
<pnx-link-button>😐</pnx-link-button>
<pnx-copy-button>🙂</pnx-copy-button>
</pnx-button-group>
</div>
</div>
<hr class="test-sep" />
<div class="test-bench">
<h3>Outline Row x2</h3>
<div>
<pnx-button-group dir="row">
<pnx-button kind="outline">☹️</pnx-button>
<pnx-button kind="outline">🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Outline Row x3</h3>
<div>
<pnx-button-group dir="row">
<pnx-button kind="outline">☹️</pnx-button>
<pnx-button kind="outline">😐</pnx-button>
<pnx-button kind="outline">🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Outline Column x2</h3>
<div>
<pnx-button-group dir="column">
<pnx-button kind="outline">☹️</pnx-button>
<pnx-button kind="outline">🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Outline Column x3</h3>
<div>
<pnx-button-group dir="column">
<pnx-button kind="outline">☹️</pnx-button>
<pnx-button kind="outline">😐</pnx-button>
<pnx-button kind="outline">🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<hr class="test-sep" />
<div class="test-bench">
<h3>Flat Row x2</h3>
<div>
<pnx-button-group dir="row">
<pnx-button kind="flat">☹️</pnx-button>
<pnx-button kind="flat">🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Flat Row x3</h3>
<div>
<pnx-button-group dir="row">
<pnx-button kind="flat">☹️</pnx-button>
<pnx-button kind="flat">😐</pnx-button>
<pnx-button kind="flat">🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Flat Column x2</h3>
<div>
<pnx-button-group dir="column">
<pnx-button kind="flat">☹️</pnx-button>
<pnx-button kind="flat">🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Flat Column x3</h3>
<div>
<pnx-button-group dir="column">
<pnx-button kind="flat">☹️</pnx-button>
<pnx-button kind="flat">😐</pnx-button>
<pnx-button kind="flat">🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<hr class="test-sep" />
<div class="test-bench">
<h3>Row XL</h3>
<div>
<pnx-button-group size="xl" dir="row">
<pnx-button kind="flat">☹️</pnx-button>
<pnx-button kind="flat">😐</pnx-button>
<pnx-button kind="flat">🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<div class="test-bench">
<h3>Column XL</h3>
<div>
<pnx-button-group size="xl" dir="column">
<pnx-button kind="flat">☹️</pnx-button>
<pnx-button kind="flat">😐</pnx-button>
<pnx-button kind="flat">🙂</pnx-button>
</pnx-button-group>
</div>
</div>
<h2 id="5stars">5-stars grade</h2>
<div class="test-bench"><h3>With a grade</h3><pnx-grade stars="5" /></div>
<div class="test-bench"><h3>Without a grade</h3><pnx-grade /></div>
<h2 id="quality-score">Quality Score</h2>
<div class="test-bench"><h3>Classic no grade</h3><pnx-quality-score /></div>
<div class="test-bench"><h3>Classic 1/5</h3><pnx-quality-score grade="1" /></div>
<div class="test-bench"><h3>Classic 2/5</h3><pnx-quality-score grade="2" /></div>
<div class="test-bench"><h3>Classic 3/5</h3><pnx-quality-score grade="3" /></div>
<div class="test-bench"><h3>Classic 4/5</h3><pnx-quality-score grade="4" /></div>
<div class="test-bench"><h3>Classic 5/5</h3><pnx-quality-score grade="5" /></div>
<hr class="test-sep" />
<div class="test-bench"><h3>Input</h3><pnx-quality-score input="qs" /></div>
<div class="test-bench"><h3>Input 1/5</h3><pnx-quality-score input="qs" grade="1" /></div>
<div class="test-bench"><h3>Input 2/5</h3><pnx-quality-score input="qs" grade="2" /></div>
<div class="test-bench"><h3>Input 3/5</h3><pnx-quality-score input="qs" grade="3" /></div>
<div class="test-bench"><h3>Input 4/5</h3><pnx-quality-score input="qs" grade="4" /></div>
<div class="test-bench"><h3>Input 5/5</h3><pnx-quality-score input="qs" grade="5" /></div>
<div class="test-bench"><h3>Input many</h3><pnx-quality-score input="qs" grade="1,3,5" /></div>
<h2 id="search-bar">Search bar</h2>
<div class="test-bench"><h3>Simple</h3><pnx-search-bar placeholder="Start your search"></pnx-search-bar></div>
<div class="test-bench"><h3>With pre</h3><pnx-search-bar placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
<div class="test-bench">
<h3>Reduced</h3>
<pnx-search-bar reduceable reduced placeholder="Look for a place"></pnx-search-bar>
</div>
<hr class="test-sep" />
<div class="test-bench"><h3>Size md full</h3><pnx-search-bar size="md" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
<div class="test-bench"><h3>Size md reduced</h3><pnx-search-bar size="md" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div>
<div class="test-bench"><h3>Size xxl full</h3><pnx-search-bar size="xxl" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
<div class="test-bench"><h3>Size xxl reduced</h3><pnx-search-bar size="xxl" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div>
<h2 id="progress-bar">Progress bar</h2>
<div class="test-bench"><h3>Half</h3><pnx-progress-bar value="42"></pnx-progress-bar></div>
<div class="test-bench"><h3>Indeterminate</h3><pnx-progress-bar></pnx-progress-bar></div>
<div class="test-bench"><h3>Full</h3><pnx-progress-bar value="100"></pnx-progress-bar></div>
<h2 id="tabs">Tabs</h2>
<div class="test-bench">
<h3>Many</h3>
<pnx-tabs>
<h4 slot="title">Tab 1</h4>
<div slot="content">Tab 1 content</div>
<h4 slot="title">Tab 2</h4>
<div slot="content">Tab 2 content</div>
<h4 slot="title">Tab 3</h4>
<div slot="content">Tab 3 content</div>
</pnx-tabs>
</div>
<h2 id="semantics-editor">Semantics editor</h2>
<script>
window.addEventListener("load", () => {
const semeditors = document.getElementsByTagName("pnx-semantics-editor");
for(let i=0; i < semeditors.length; i++) {
const semeditor = semeditors[i];
const div = semeditor.nextSibling;
semeditor.addEventListener("change", e => {
console.log("Semantics change > evt =", e.detail, "| attr =", semeditor.getAttribute("semantics"));
});
}
});
</script>
<div class="test-bench">
<h3>Empty</h3>
<pnx-semantics-editor _t='{"pnx": {"semantics_editor_error": "The syntax is invalid. Your tags may look like:\nkey=value\nprefix|key=value\nprefix|key[qualif_key=qualif_val]=value"}}'></pnx-semantics-editor>
</div>
<div class="test-bench">
<h3>Filled</h3>
<pnx-semantics-editor semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor>
</div>
<div class="test-bench">
<h3>Many rows</h3>
<pnx-semantics-editor rows="5" semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor>
</div>
<div class="test-bench">
<h3>Custom style</h3>
<style>#pnx-sem-ed3::part(text) { color: blue; }</style>
<pnx-semantics-editor id="pnx-sem-ed3" semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor>
</div>
</body>
</html>