xwmRON

index.html

doctype html
html
  head
  body
    button(id='one') one
    button(id='two') two
    button(id='three') three
    button(id='four') four
    button(id='five') five
    div(id='test') 

script.js

console.clear()
const Router5 = router5.Router5;
const historyPlugin = router5History;

const GLOBAL_THING = {
  value: 5,
  
  change: function(newval){
    return new Promise((res, rej) => {
      this.value = 'LOADING...';
      this.listener();
      setTimeout(() => {
        this.value = newval;
        if(this.listener) this.listener();
        res(newval);
      }, 1000);
    });
  },
  
  listen: function(listener){
    this.listener = listener;
  }
};

const preloadFns = {
  one: function(params){
    return GLOBAL_THING.change(1)
  },
  two: function(params){
    return GLOBAL_THING.change(2)
  }
};

function mware(to, from){
  fn = preloadFns[to.name]
  if(fn){
    result = fn(to.params);
    return result;
  }
  return true;
}

let router = new Router5([], {
      defaultPath: 'one'
    })
    .addNode('one', '/')
    .addNode('two', '/about')
    .addNode('three', '/contact')
		.addNode('four', '/contact/:id')
    .addNode('five', '/about/copywrite')
		//.usePlugin(historyPlugin())
    .useMiddleware(mware)
		.start();

['one', 'two', 'three', 'four', 'five'].forEach(function(v){
  document.getElementById(v).addEventListener('click', function(){
    router.navigate(v)
  });
});

function updateSpan(){
  document.getElementById('test').innerHTML = GLOBAL_THING.value
}

GLOBAL_THING.listen(updateSpan)
updateSpan()

scripts

<script src="https://wzrd.in/standalone/router5"></script>
<script src="https://wzrd.in/standalone/router5-history"></script>

xwmRON.markdown

xwmRON

A Pen by Captain Anonymous on CodePen.

License.