ranwahle

customElements.define('self-routing-anchor', SelfRoutingAnchor, {extends: 'a'})

ranwahle

import Router from './router.js'; 
// router.js is where our router implementation will be


export default class SelfRoutingAnchor extends HTMLAnchorElement {

    connectedCallback() {
        const router = Router.router;
        this.onclick = evt => {
            evt.preventDefault();

ranwahle

export default class SelfRoutingAnchor extends HTMLAnchorElement {
}

ranwahle

 [
    {path: '/', element: 'div', attributes: {is: 'images-container'}}
    ,
    {
        path: '/addImage',
        element: 'div',
        attributes: {is: 'add-image'}
    }, {
        path: 'image/:index',
        element: 'div',

ranwahle

const newElement = document.createElement(newRouteData.element, newRouteData.attributes);
Object.keys(newRouteData.attributes || {}).forEach(key => {
    newElement.setAttribute(key, newRouteData.attributes[key]);
});

this.appendChild(newElement)

ranwahle

 buildParameters(routeCandidate, urlFragments) {
    const result = {};
    const pathFragments = this.getFragments(routeCandidate.path);
    pathFragments.forEach((fragment, index) => {
        if (fragment.startsWith(':')) {
            const fragmentName = fragment.substring(1);
            result[fragmentName] = urlFragments[index];
        }
    })
    return result;

ranwahle

 const parameters = router.currentSnapshot.params;
 
 //for images/:id route - Get the image content
  this.getImage(parameters.id);

ranwahle

  Notification.requestPermission().then(function(result) {

        // Do something with the permission
    });

ranwahle

 // Let's check whether notification permissions have already been granted
    else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        const notification = new Notification("Hi there!");
    }

    // Otherwise, we need to ask the user for permission
    else if (Notification.permission !== "denied") {
        Notification.requestPermission().then(function (permission) {
            // If the user accepts, let's create a notification

ranwahle

async function mayINotify() {
  return await navigator.permission.query({name: 'notifications'});
} 

// This will return a promise of PermssionStatus object