Added automatic-generating breadcrumb component

static/src/js/app.js

@@ -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]);
+}

static/src/js/components/breadcrumbs.js

@@ -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>
+    );
+  }
+}

templates/content_base.html

@@ -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 %}