Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
114 lines (102 sloc) 2.84 KB
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="comp-breadcrumbs">
<template id="breadcrumbs-template">
<style>
.crumb,
.crumb-separator {
padding: 4px;
cursor: default;
}
.crumb {
border: 1px solid transparent;
border-radius: 4px;
}
.crumb:hover,
.crumb:focus {
background-color: #f2f2f2;
border: 1px solid #d4d4d4;
}
.crumb:active {
background-color: #e9e9e9;
border: 1px solid #d4d4d4;
}
.crumb:nth-last-child(2) {
background-color: #d4d4d4;
border: 1px solid #d4d4d4;
}
.crumb-separator:last-child {
display: none;
}
</style>
<div class="breadcrumbs" on-keypress="{{_onKeypress}}">
<template id="crumbs" repeat="{{crumb, index in crumbs}}">
<span class="{{crumb.dots ? 'crumb-separator' : 'crumb'}}"
idx="{{crumb.idx}}" title="{{crumb.tooltip}}"
on-click="{{_onActivateCrumb}}"
tabIndex="0" >{{crumb.value}}</span>
<span class="crumb-separator">&gt;</span>
</template>
</div>
</template>
<script>
(function() {
function activateCrumb(self, crumb) {
var idx = parseInt(crumb.getAttribute('idx'));
if (isNaN(idx)) {
return;
}
var newPath = self.path.slice(0, idx + 1);
if (newPath.join('/') != self.path.join('/')) {
var event = new CustomEvent('pathChange', {
'detail': newPath
});
self.dispatchEvent(event);
}
}
function renderPath(self, path) {
var maxEntries = parseInt(self.getAttribute("maxEntries")) || -1;
var hasShortened = false;
var crumbs = [];
path.forEach(function(pathPart, idx) {
//Skip path entries in the middle
if ((maxEntries >= 1) && (idx >= maxEntries - 1) && (idx < path.length - 1)) {
//Render the dots separator once
if (!hasShortened) {
var tooltipParts = path.slice(maxEntries - 1);
tooltipParts.pop();
crumbs.push({
value: "...",
tooltip: tooltipParts.join(' > '),
dots: true
});
hasShortened = true;
}
return;
}
crumbs.push({
idx: idx,
value: pathPart
});
});
return crumbs;
}
var prototype = {};
prototype.path = [];
prototype.crumbs = [];
prototype.setPath = function(path) {
this.path = path;
this.crumbs = renderPath(this, path);
};
prototype._onActivateCrumb = function(event) {
activateCrumb(this, event.target);
};
prototype._onKeypress = function(event) {
//'Enter' is pressed
if (event.keyCode == 13) {
activateCrumb(this, event.target);
}
};
Polymer('comp-breadcrumbs', prototype);
})();
</script>
</polymer-element>