davepermen/gist:5758139

## gistfile1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title></title>
    </head>
    <body>
        <p></p>
        <h1></h1>
        <h2></h2>
        <section id="content">

        </section>
        <a href="/yaddaweeehhh">goto yaddaweeehh</a>
        <a href="/yadda">goto yadda</a>
    </body>
    <script>
        var Route = function (routeHandler) {
            return function (path) {
                routeHandler.call({
                    get: function (route, handler) {
                        if (route.exec !== undefined) {
                            // regex way
                            var params = route.exec(path);
                            if (params !== null) {
                                handler.apply({ path: path }, params.slice(1));
                            }
                        } else if (route.indexOf('##') >= 0) {
                            // doublehash (replaces doubledash with finding tokens till the ending '/'s, and make sure it's the full path)
                            var params = new RegExp('^' + route.replace(/##/g, '([^/]+)') + '$').exec(path);
                            if (params !== null) {
                                handler.apply({ path: path }, params.slice(1));
                            }
                        } else if (route === path || (route === '/' && path === '')) {
                            // static route
                            handler.call({ path: path });
                        }
                    },
                    all: function (handler) {
                        handler.call({ path: path });
                    }
                });
            };
        };

        var Path = function () {
            var refreshLinks = function () {
                [].forEach.call(document.querySelectorAll('a[href^="/"]'), function (link) {
                    if (link.getAttribute('data-routed') !== '') {
                        link.setAttribute('data-routed', '');
                        link.addEventListener('click', function (event) {
                            Path.go(link.getAttribute('href'));
                            event.preventDefault();
                        });
                    }
                });
            };
            var handler = undefined;
            var callHandler = function (path) {
                handler(path);
                refreshLinks();
            };
            return {
                go: function (path) {
                    if (history.pushState !== undefined) {
                        history.isActive = true;
                        history.pushState(null, null, path);
                        callHandler(path);
                    } else {
                        location.pathname = path;
                    }
                },
                setup: function (routeHandler) {
                    handler = routeHandler;
                    window.addEventListener('load', function () { callHandler(location.pathname); });
                    if (history.pushState !== undefined) {
                        window.addEventListener('popstate', function () { history.isActive && callHandler(location.pathname); });
                        refreshLinks();
                    }
                }
            };
        }();

        Path.setup(new Route(function () {
            this.get('/yadda', function () {
                document.querySelector('h1').innerHTML = "OMG";
            });
            this.get('/yaddaweeehhh', function () {
                document.querySelector('h1').innerHTML = "<a href='/yaddaNEW'>NEW LINK!!!!</a>";
            });
            this.get('/yaddaNEW', function () {
                document.querySelector('h1').innerHTML = "OMG!!";
            });
            this.get('/blog/##/##/##', function (year, month, day) {
                document.querySelector('#content').innerHTML = "blog entry from " + year + "-" + month + "-" + day;
            });
            this.get('/blog/##', function (year, month, day) {
                document.querySelector('#content').innerHTML = "blog entry from " + year + "-" + month + "-" + day;
            });
            this.get('/', function () {
            });
            this.all(function () {
                document.querySelector('p').innerHTML = this.path;
                console.log(this.path);
            });
        }));
    </script>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title></title>
	</head>
	<body>
	<p></p>
	<h1></h1>
	<h2></h2>
	<section id="content">

	</section>
	<a href="/yaddaweeehhh">goto yaddaweeehh</a>
	<a href="/yadda">goto yadda</a>
	</body>
	<script>
	var Route = function (routeHandler) {
	return function (path) {
	routeHandler.call({
	get: function (route, handler) {
	if (route.exec !== undefined) {
	// regex way
	var params = route.exec(path);
	if (params !== null) {
	handler.apply({ path: path }, params.slice(1));
	}
	} else if (route.indexOf('##') >= 0) {
	// doublehash (replaces doubledash with finding tokens till the ending '/'s, and make sure it's the full path)
	var params = new RegExp('^' + route.replace(/##/g, '([^/]+)') + '$').exec(path);
	if (params !== null) {
	handler.apply({ path: path }, params.slice(1));
	}
	} else if (route === path \|\| (route === '/' && path === '')) {
	// static route
	handler.call({ path: path });
	}
	},
	all: function (handler) {
	handler.call({ path: path });
	}
	});
	};
	};

	var Path = function () {
	var refreshLinks = function () {
	[].forEach.call(document.querySelectorAll('a[href^="/"]'), function (link) {
	if (link.getAttribute('data-routed') !== '') {
	link.setAttribute('data-routed', '');
	link.addEventListener('click', function (event) {
	Path.go(link.getAttribute('href'));
	event.preventDefault();
	});
	}
	});
	};
	var handler = undefined;
	var callHandler = function (path) {
	handler(path);
	refreshLinks();
	};
	return {
	go: function (path) {
	if (history.pushState !== undefined) {
	history.isActive = true;
	history.pushState(null, null, path);
	callHandler(path);
	} else {
	location.pathname = path;
	}
	},
	setup: function (routeHandler) {
	handler = routeHandler;
	window.addEventListener('load', function () { callHandler(location.pathname); });
	if (history.pushState !== undefined) {
	window.addEventListener('popstate', function () { history.isActive && callHandler(location.pathname); });
	refreshLinks();
	}
	}
	};
	}();

	Path.setup(new Route(function () {
	this.get('/yadda', function () {
	document.querySelector('h1').innerHTML = "OMG";
	});
	this.get('/yaddaweeehhh', function () {
	document.querySelector('h1').innerHTML = "<a href='/yaddaNEW'>NEW LINK!!!!</a>";
	});
	this.get('/yaddaNEW', function () {
	document.querySelector('h1').innerHTML = "OMG!!";
	});
	this.get('/blog/##/##/##', function (year, month, day) {
	document.querySelector('#content').innerHTML = "blog entry from " + year + "-" + month + "-" + day;
	});
	this.get('/blog/##', function (year, month, day) {
	document.querySelector('#content').innerHTML = "blog entry from " + year + "-" + month + "-" + day;
	});
	this.get('/', function () {
	});
	this.all(function () {
	document.querySelector('p').innerHTML = this.path;
	console.log(this.path);
	});
	}));
	</script>
	</html>