theadam · November 12, 2015 19:04
diff --git a/router-test.html b/router-test.html
 <html>
 <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.0.20/browser.min.js"></script>
  <script src="https://wzrd.in/standalone/router5"></script>
  <script src="https://wzrd.in/standalone/router5-history"></script>
 </head>
 <body>
    <button id="one">one</button>
    <button id="two">two</button>
    <button id="three">three</button>
    <button id="four">four</button>
    <button id="five">five</button>
    <div id="test"> </div>
    <script type="text/babel">
      console.log('test')
      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()

    </script>
 </body>
 </html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.0.20/browser.min.js"></script>
	<script src="https://wzrd.in/standalone/router5"></script>
	<script src="https://wzrd.in/standalone/router5-history"></script>
	</head>
	<body>
	<button id="one">one</button>
	<button id="two">two</button>
	<button id="three">three</button>
	<button id="four">four</button>
	<button id="five">five</button>
	<div id="test"> </div>
	<script type="text/babel">
	console.log('test')
	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()

	</script>
	</body>
	</html>