Commit b0f6d4c4 authored by Nicolas Mérigot's avatar Nicolas Mérigot

Merge branch 'feature/cicd' into 'master'

Feature/cicd

See merge request !3
parents 260e22fb 44010f83
Pipeline #2137 passed with stage
in 26 seconds
---
image: node
stages:
- test
- release
test:
stage: test
script:
- echo 'Make your tests here !'
except:
- master
tags:
- sib
publish:
stage: release
before_script:
- npm install -g semantic-release @semantic-release/gitlab
script:
- semantic-release
only:
- master
tags:
- sib
......@@ -12,7 +12,7 @@ An full app example can be found in index.html:
You first need to load the webcomponents polyfill for the browsers that have not implemented them yet, and import the components you want to use in your HTML file:
```html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<link rel="import" href="https://cdn.happy-dev.fr/sib-router/sib-router.html" />
<script type="module" src="https://unpkg.com/@startinblox/router@latest"></script>
```
Then you can use the new tags in your markup, for instance : `<sib-router>`.
......@@ -45,7 +45,6 @@ Displays a menu and handle the navigation for you.
`<sib-route>` accepts the following attributes:
- **id-prefix**: User by `sib-router` to extract the part of the URL that follows the `id-prefix`.
- **active**: This attribute is present on route being displayed by `<sib-router>`. It is automatically added/removed by `<sib-router>` and should not be tinkered manually.
......
......@@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SIB test: sib-router</title>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.js"></script>
<script type="module" src="../sib-router.js"></script>
<script type="module" src="../src/index.js"></script>
<style>
sib-router {
display: block;
......
{
"name": "@startinblox/router",
"version": "0.0.0",
"description": "Startinblox router",
"main": "./src/index.js",
"module": "./src/index.js",
"repository": {
"type": "git",
"url": "git@git.happy-dev.fr:startinblox/framework/sib-router.git"
},
"author": "Startinblox",
"license": "MIT",
"release": {
"branch": "master",
"plugins": [
["@semantic-release/commit-analyzer", {
"preset": "angular",
"releaseRules": [
{"type": "major", "release": "major"},
{"type": "minor", "release": "minor"},
{"type": "/.*/", "release": "patch"}
]
}],
"@semantic-release/gitlab",
"@semantic-release/npm"
]
},
"publishConfig": {
"access": "public"
}
}
import SIBRouter from './sib-router.js';
import SIBRoute from './sib-route.js';
import SIBLink from './sib-link.js';
export {
SIBRouter,
SIBRoute,
SIBLink,
};
export default class SIBLink extends HTMLElement {
constructor() {
super();
this.addEventListener('click', event => this.trigger());
}
trigger() {
const route = this.getAttribute('next')
const resource = this.dataset.src && { '@id': this.dataset.src }
if(!route && !resource) return;
this.dispatchEvent(
new CustomEvent('requestNavigation', {
bubbles: true,
detail: { route, resource },
}),
);
}
}
customElements.define('sib-link', SIBLink);
export class SIBRoute extends HTMLElement {
export default class SIBRoute extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.addEventListener('click', event => this.router.navigate(this.name));
}
get name() {
return this.getAttribute('name');
}
......@@ -35,14 +35,14 @@ export class SIBRoute extends HTMLElement {
encodeId(id) {
if (id) {
return btoa(unescape(encodeURIComponent(id)));
return encodeURIComponent(id);
}
return;
}
decodeId(id) {
if(id) {
return decodeURIComponent(escape(atob(id)));
return decodeURIComponent(id);
}
return;
......@@ -70,7 +70,7 @@ export class SIBRoute extends HTMLElement {
this.view.removeAttribute('hidden');
this.setAttribute('active', '');
this.updateResource();
// Reseting all routers within the selected view
for(let router of this.view.querySelectorAll('sib-router'))
this.updateSubrouter(router);
......@@ -80,90 +80,5 @@ export class SIBRoute extends HTMLElement {
this.removeAttribute('active');
}
}
customElements.define('sib-route', SIBRoute);
export class SIBRouter extends HTMLElement {
constructor() {
super();
window.addEventListener('popstate', event => this.display());
window.addEventListener('requestNavigation', event => {
this.navigate(event.detail.route, event.detail.resource);
})
window.addEventListener('DOMContentLoaded', event => this.display());
}
get useHash() {
return this.hasAttribute('use-hash');
}
get prefix() {
let prefix = this.getAttribute('route-prefix') || '';
if(prefix.slice(-1) == '/')
prefix = prefix.slice(0, -1);
return prefix;
}
get defaultRoute() {
return this.getAttribute('default-route') || '';
}
get currentURL() {
let url = (this.useHash ? location.hash : location.pathname).slice(1);
if(url.startsWith(this.prefix))
url = url.slice(this.prefix.length);
if(url.startsWith('/'))
url = url.slice(1);
return url;
}
get currentRouteName() {
return this.currentURL.split('/')[0] || this.defaultRoute;
}
get routes() {
return this.querySelectorAll('sib-route');
}
display(routeName = this.currentRouteName, resource) {
this.dispatchEvent(new CustomEvent('navigate', {detail: {route: routeName, resource}}));
for(let route of this.routes)
if(routeName == route.name)
route.activate();
else
route.hide();
}
navigate(routeName = '', resource) {
const route = this.querySelector('sib-route[name='+routeName+']');
if(!route) return; //this route is not for me!
const id = resource ? resource['@id'] : null;
const path = route.getPath(this.prefix, routeName, id)
//update current URL
if(this.useHash)
window.location.hash = path;
else
history.pushState({}, routeName, '/' + path);
this.display(routeName, resource);
}
}
customElements.define('sib-router', SIBRouter);
export class SIBLink extends HTMLElement {
constructor() {
super();
this.addEventListener('click', event => this.trigger());
}
trigger() {
const route = this.getAttribute('next')
const resource = this.dataset.src && { '@id': this.dataset.src }
if(!route && !resource) return;
this.dispatchEvent(
new CustomEvent('requestNavigation', {
bubbles: true,
detail: { route, resource },
}),
);
}
}
customElements.define('sib-link', SIBLink);
customElements.define('sib-route', SIBRoute);
export default class SIBRouter extends HTMLElement {
constructor() {
super();
window.addEventListener('popstate', event => this.display());
window.addEventListener('requestNavigation', event => {
this.navigate(event.detail.route, event.detail.resource);
})
window.addEventListener('DOMContentLoaded', event => this.display());
}
get useHash() {
return this.hasAttribute('use-hash');
}
get prefix() {
let prefix = this.getAttribute('route-prefix') || '';
if(prefix.slice(-1) == '/')
prefix = prefix.slice(0, -1);
return prefix;
}
get defaultRoute() {
return this.getAttribute('default-route') || '';
}
get currentURL() {
let url = (this.useHash ? location.hash : location.pathname).slice(1);
if(url.startsWith(this.prefix))
url = url.slice(this.prefix.length);
if(url.startsWith('/'))
url = url.slice(1);
return url;
}
get currentRouteName() {
return this.currentURL.split('/')[0] || this.defaultRoute;
}
get routes() {
return this.querySelectorAll('sib-route');
}
display(routeName = this.currentRouteName, resource) {
this.dispatchEvent(new CustomEvent('navigate', {detail: {route: routeName, resource}}));
for(let route of this.routes)
if(routeName == route.name)
route.activate();
else
route.hide();
}
navigate(routeName = '', resource) {
const route = this.querySelector('sib-route[name='+routeName+']');
if(!route) return; //this route is not for me!
const id = resource ? resource['@id'] : null;
const path = route.getPath(this.prefix, routeName, id)
//update current URL
if(this.useHash)
window.location.hash = path;
else
history.pushState({}, routeName, '/' + path);
this.display(routeName, resource);
}
}
customElements.define('sib-router', SIBRouter);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment