skinny-widgets
Version:
skinnable web components widgets collection
55 lines (49 loc) • 1.57 kB
HTML
<head>
<link rel="shortcut icon" href="#" />
</head>
<body class="sk-auto sk-theme-jquery sk-auto-notpl">
<script>
const loadTemplates = async () => {
const response = await fetch('/dist/jquery.templates.html')
.then(response => response.text())
.then(text => document.body.insertAdjacentHTML('beforeend', text));
};
loadTemplates();
</script>
<script src="/node_modules/navigo/lib/navigo.min.js"></script>
<script>
class PageAConfB extends HTMLElement {
connectedCallback() {
this.insertAdjacentHTML('beforeend', '<div>PageAConfB</div>');
}
}
class PageBConfA extends HTMLElement {
connectedCallback() {
this.insertAdjacentHTML('beforeend', '<div>PageBConfA</div>');
}
}
customElements.define('page-a-confb', PageAConfB);
customElements.define('page-b-confa', PageBConfA);
</script>
<script src="/dist/sk-compat-bundle.js"></script>
<a href="#page-a" data-navigo>Page A</a>
<a href="#page-b" data-navigo>Page B</a>
<sk-config
theme="jquery"
base-path="/src"
lang="en"
id="configA"
routes='{"page-a": {"PageAConfA": "/examples/spa/page-a-confa.js"}, "page-b": "page-b-confa"}'
ro-use-hash="true"
></sk-config>
<sk-app configSl="#configA" dimport="false"></sk-app>
<sk-config
theme="jquery"
base-path="/src"
lang="en"
id="configB"
routes='{"page-a": "page-a-confb", "page-b": "page-a-confb"}'
ro-use-hash="true"
></sk-config>
<sk-app configSl="#configB" dimport="false"></sk-app>
</body>