Skip to content

S
SiB Router
Source
Select Git revision
...
Target
Select Git revision
 
Commits (9)
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 18 deletions
README.md
View file @ e85f7b50
......@@ -52,11 +52,21 @@ Displays a menu and handle the navigation for you.
- **`next`**: The `name` attribute of the `<sib-route>` you want to access.
Example :
Example:
```html
<sib-link next="profile">See profile</sib-link>
```
## sib-analytics
Manage browsing statistics.
`<sib-analytics>` accepts the following attributes:
- **`type`**: the type of web analytics service used (currently supports `'matomo'` or `'google'`).
- **`url`**: URL of the service.
- **`id`**: id of the website on the service.
## Interacting with the router
### bind-resources attribute
......@@ -67,7 +77,7 @@ Example:
```html
<sib-conversation bind-resources></sib-conversation>
```
will result in :
will result in:
```html
<sib-conversation data-src="https://your-domain/your-group-uri/3" bind-resources></sib-conversation>
```
......
examples/analytics.html 0 → 100644
View file @ e85f7b50
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SIB test: sib-router</title>
<script type="module" src="../src/index.js"></script>
<style>
sib-router {
display: block;
text-align: center;
}
sib-route,
sib-link {
display: inline-block;
padding: 0.5em;
margin: 0.2em;
background-color: #ccc;
cursor: pointer;
}
[active]{
background-color: #afa;
}
</style>
</head>
<body>
<sib-analytics type="debug" url="example.com" id="1234"></sib-analytics>
<sib-router default-route="page1" use-hash>
<sib-route name="page1">1st page</sib-route>
<sib-route name="page2">2nd page</sib-route>
<sib-route name="page3">3rd page</sib-route>
</sib-router>
<div id="page1" hidden>
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis,
commodi.</p>
<sib-link next="page2">page 2 ></sib-link>
</div>
<div id="page2" hidden>
<h1>Page 2</h1>
<p>Quos, suscipit pariatur! Nulla fugiat excepturi pariatur fuga delectus
corrupti.</p>
<sib-link next="page3">page 3 ></sib-link>
</div>
<div id="page3" hidden>
<h1>Page 3</h1>
<p>Rem, veniam repudiandae! Error repudiandae sapiente blanditiis natus
libero tenetur.</p>
</div>
</body>
</html>
examples/dialog.html
View file @ e85f7b50
......@@ -5,7 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SIB test: sib-router</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GoogleChrome/dialog-polyfill@master/dist/dialog-polyfill.css">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/GoogleChrome/dialog-polyfill@master/dist/dialog-polyfill.css"
/>
<script type="module" src="../src/index.js"></script>
<style>
sib-router {
......@@ -20,7 +23,7 @@
background-color: #ccc;
cursor: pointer;
}
[active]{
[active] {
background-color: #afa;
}
</style>
......@@ -34,23 +37,35 @@
</sib-router>
<dialog id="page1">
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis,
commodi.</p>
<sib-link next="page2">page 2 ></sib-link>
<div>
<h1>Page 1</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis,
commodi.
</p>
<sib-link next="page2">page 2 ></sib-link>
</div>
</dialog>
<dialog id="page2">
<h1>Page 2</h1>
<p>Quos, suscipit pariatur! Nulla fugiat excepturi pariatur fuga delectus
corrupti.</p>
<sib-link next="page3">page 3 ></sib-link>
<div>
<h1>Page 2</h1>
<p>
Quos, suscipit pariatur! Nulla fugiat excepturi pariatur fuga delectus
corrupti.
</p>
<sib-link next="page3">page 3 ></sib-link>
</div>
</dialog>
<dialog id="page3">
<h1>Page 3</h1>
<p>Rem, veniam repudiandae! Error repudiandae sapiente blanditiis natus
libero tenetur.</p>
<div>
<h1>Page 3</h1>
<p>
Rem, veniam repudiandae! Error repudiandae sapiente blanditiis natus
libero tenetur.
</p>
</div>
</dialog>
</body>
</html>
examples/no-route-name.html → examples/request-navigation.html
View file @ e85f7b50
......@@ -19,14 +19,14 @@
background-color: #ccc;
cursor: pointer;
}
[active]{
[active] {
background-color: #afa;
}
</style>
</head>
<body>
<sib-router default-route="page1" use-hash>
<sib-router default-route="page1" route-prefix="examples/sub-menu.html">
<sib-route name="page1">1st page</sib-route>
<sib-route name="page2" rdf-type="doap:project">2nd page</sib-route>
</sib-router>
......
index.html
View file @ e85f7b50
......@@ -28,6 +28,7 @@
<li><a href="examples/keep-url-id.html">keep-url + id</a></li>
<li><a href="examples/dialog.html">dialog</a></li>
<li><a href="examples/route-with-id.html">route-with-id</a></li>
<li><a href="examples/analytics.html">analytics</a></li>
</ul>
</body>
</html>
package.json
View file @ e85f7b50
......@@ -18,7 +18,7 @@
"releaseRules": [
{"type": "major", "release": "major"},
{"type": "minor", "release": "minor"},
{"type": "/.*/", "release": "patch"}
{"type": "*", "release": "patch"}
]
}],
"@semantic-release/release-notes-generator",
......
src/index.js
View file @ e85f7b50
import SIBRouter from './sib-router.js';
import SIBRoute from './sib-route.js';
import SIBLink from './sib-link.js';
import SIBAnalytics from './sib-analytics.js';
export {
SIBRouter,
SIBRoute,
SIBLink,
SIBAnalytics,
};
src/sib-analytics.js 0 → 100644
View file @ e85f7b50
export default class SIBAnalytics extends HTMLElement {
constructor() {
super();
const type = this.getAttribute('type');
if(type == null) return;
const vendor = SIBAnalytics.vendors[type];
if (vendor == null) return;
vendor.init(this.getAttribute('url'), this.getAttribute('id'));
let url = location.href;
document.addEventListener('navigate', () => {
if (url === location.href) return;
url = location.href;
vendor.navigate(url);
});
}
}
SIBAnalytics.vendors = {
debug: {
init(url, id) {
console.log('sib-analitics:init');
console.log(url, id);
window._sibAnalitics = [];
this.navigate(location.href);
},
navigate(url) {
console.log('sib-analitics:navigate');
window._sibAnalitics.push([new Date(), url]);
console.table(window._sibAnalitics);
},
},
matomo: {
init(url, id) {
var _paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u = url;
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', id]);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.type = 'text/javascript';
g.async = true;
g.defer = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
},
navigate(url) {
_paq.push(['setCustomUrl', url]);
_paq.push(['trackPageView']);
},
},
google: {
init(url = 'https://www.google-analytics.com/analytics.js', id) {
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
(i[r] =
i[r] ||
function() {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(window, document, 'script', url, 'ga');
ga('create', id, 'auto');
ga('send', 'pageview');
},
navigate(url) {
ga('send', 'pageview', url);
},
},
};
SIBAnalytics.vendors.piwik = SIBAnalytics.vendors.matomo;
if (!customElements.get('sib-analytics')) {
customElements.define('sib-analytics', SIBAnalytics);
}