Added automatic-generating breadcrumb component
This commit is contained in:
parent
0df5a977e4
commit
4898630a3e
3 changed files with 48 additions and 0 deletions
|
@ -7,6 +7,7 @@ import ProjectImagesTypes from './components/index/project-images-types';
|
||||||
import ProjectImagesMain from './components/index/project-images-main';
|
import ProjectImagesMain from './components/index/project-images-main';
|
||||||
|
|
||||||
import NavBar from './components/navbar/navbar';
|
import NavBar from './components/navbar/navbar';
|
||||||
|
import Breadcrumbs from './components/breadcrumbs';
|
||||||
|
|
||||||
if ($('body').hasClass('index')) { // Render components on index
|
if ($('body').hasClass('index')) { // Render components on index
|
||||||
React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));
|
React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));
|
||||||
|
@ -16,3 +17,7 @@ if ($('body').hasClass('index')) { // Render components on index
|
||||||
if ($('navbar')) {
|
if ($('navbar')) {
|
||||||
React.render(<NavBar />, $('navbar')[0]);
|
React.render(<NavBar />, $('navbar')[0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if ($('#breadcrumbs')) {
|
||||||
|
React.render(<Breadcrumbs />, $('#breadcrumbs')[0]);
|
||||||
|
}
|
||||||
|
|
40
static/src/js/components/breadcrumbs.js
Normal file
40
static/src/js/components/breadcrumbs.js
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -9,6 +9,9 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>{% block pageTitle %}{% endblock %}</h1>
|
<h1>{% block pageTitle %}{% endblock %}</h1>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div id="breadcrumbs"></div>
|
||||||
|
</div>
|
||||||
<navbar></navbar>
|
<navbar></navbar>
|
||||||
</div>
|
</div>
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
|
|
Reference in a new issue