From 4898630a3e1515658704a60940278ba320ac017e Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Tue, 12 Jan 2016 17:11:48 +0000
Subject: [PATCH] Added automatic-generating breadcrumb component

---
 static/src/js/app.js                    |  5 ++++
 static/src/js/components/breadcrumbs.js | 40 +++++++++++++++++++++++++
 templates/content_base.html             |  3 ++
 3 files changed, 48 insertions(+)
 create mode 100644 static/src/js/components/breadcrumbs.js

diff --git a/static/src/js/app.js b/static/src/js/app.js
index 617e092..67b9754 100644
--- a/static/src/js/app.js
+++ b/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]);
+}
diff --git a/static/src/js/components/breadcrumbs.js b/static/src/js/components/breadcrumbs.js
new file mode 100644
index 0000000..1224430
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/templates/content_base.html b/templates/content_base.html
index 1aa9f18..20b71dc 100644
--- a/templates/content_base.html
+++ b/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 %}