Skip to content

Instantly share code, notes, and snippets.

@davepermen
Created June 11, 2013 15:59
Show Gist options
  • Save davepermen/5758139 to your computer and use it in GitHub Desktop.
Save davepermen/5758139 to your computer and use it in GitHub Desktop.
my routing thingy
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment