1
Fork 0

Added automatic-generating breadcrumb component

This commit is contained in:
Jake Howard 2016-01-12 17:11:48 +00:00
parent 0df5a977e4
commit 4898630a3e
3 changed files with 48 additions and 0 deletions

View file

@ -7,6 +7,7 @@ import ProjectImagesTypes from './components/index/project-images-types';
import ProjectImagesMain from './components/index/project-images-main';
import NavBar from './components/navbar/navbar';
import Breadcrumbs from './components/breadcrumbs';
if ($('body').hasClass('index')) { // Render components on index
React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));
@ -16,3 +17,7 @@ if ($('body').hasClass('index')) { // Render components on index
if ($('navbar')) {
React.render(<NavBar />, $('navbar')[0]);
}
if ($('#breadcrumbs')) {
React.render(<Breadcrumbs />, $('#breadcrumbs')[0]);
}

View file

@ -0,0 +1,40 @@
import React from 'react';
let {
Breadcrumb,
BreadcrumbItem
} = require('react-bootstrap');
export default class Breadcrumbs extends React.Component {
render() {
const parts = location.pathname.split('/').slice(1, -1);
var elements = [];
for (var i = 0; i < parts.length; i++) {
var dirs = [];
for (var j = 0; j <= i; j++) {
dirs.push(parts[j]);
}
if (i === (parts.length - 1)) {
elements.push(
<li className="active" href={url}>
{parts[i]}
</li>
);
} else {
var url = '/' + dirs.join('/') + '/';
elements.push(
<li>
<a href={url}>
{parts[i]}
</a>
</li>
);
}
}
return (
<ol className="breadcrumb">
{ elements }
</ol>
);
}
}

View file

@ -9,6 +9,9 @@
<div class="container">
<h1>{% block pageTitle %}{% endblock %}</h1>
</div>
<div class="container">
<div id="breadcrumbs"></div>
</div>
<navbar></navbar>
</div>
{% block content %}{% endblock %}