Bread-Crumbs for Static Files & Directories with Mootools
Recently we were tasked with implementing bread-crumb links on a client's site and not surprisingly, there were some obstacles. Being written initially using Dreamweaver templates (don't ask me why) and leveraging only the most static of technologies throughout, a server-side solution was out of the question.
And so a Javascript solution was only natural; leveraging the ever handy Mootools framework and the already existing, directory structure's naming convention to derive the bread-crumb links and names- the resulting solution was pretty elegant. Mootools v. 1.11 was likewise chosen for reasons unknown, but the example below could be converted to 1.2 version pretty easily.
How it Works
When the page is loaded a new object is instantiated which grabs the url string of the current page and splits it up at the delimiting slashes. The result is a list of bread-crumb links based on the hierarchy of the url structure, dynamically written into an element of your choosing. By url structure, I mean a page who's url is the following...
http://yourdomain.com/about/our-team/john-doe/index.html
...will get the following bread-crumb markup dynamically inserted into the element defined at the bottom of crumbs.js
<div id="breadcrumbs">
<a href="../../">About</a>
>>
<a href="../">Our Team</a>
>>
<a href="">John Doe</a>
</div>
As you can see, the script just generates links to it's parent directory. Provided the directories are named sensibly and configured to serve the default directory index for each level in the hierarchy, the result is a pretty simple and efficient bread-crumb trail system.
The example is using Apache's mod_rewrite module to pass all queries to the index file where the JS object gets instantiated- but the concept is the same, as if these were physical directories and files. Play around with the url string in your browser's address bar and you'll see what I mean.
When investigating the example's implementation, pay special attention to the onDomReady event at the bottom of Crumbs.js- this is where you can set the delimiter character(s) and change the bread-crumb elements id value.
var Crumbs = new Class({
options: {
id: 'crumbs',
delim: '>'
},
folders: [],
currentURL: null,
initialize: function(options) {
currentURL = document.location.toString();
folders = currentURL.split("/");
Object.extend(this.options,options || {});
this.build();
},
build: function() {
var crumbs = this.trail();
try {
$(this.options.id).setHTML(crumbs);
} catch(e) {}
},
depth: function(iterations) {
var iterations=iterations-3;
var depthStr="";
for (i=0;i<iterations;i++) {
depthStr=depthStr + "../";
}
return depthStr;
},
trail: function() {
var str = "";
for (count=3; count<(folders.length-1); count++) {
if(count>3) {
str = str+" "+this.options.delim;
}
var name = this.decode(folders[count]);
str = str+" <a href='"+this.depth((folders.length-count)+1)+"'>"+this.humanize(name)+"</a>";
}
return str;
},
humanize: function(str) {
var re = /[-_\.%]/g;
return str.replace(re," ").capitalize();
},
encode : function (string) {
return escape(this._utf8_encode(string));
},
decode : function (string) {
return this._utf8_decode(unescape(string));
},
_utf8_encode : function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
_utf8_decode : function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while ( i < utftext.length ) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
});
window.addEvent('domready',function(){
var crumbs = new Crumbs({id:'breadcrumbs',delim:'>>'});
});