Refactor topbar and crumb.

mkrfile.js

@@ -81,6 +81,7 @@ module.exports = function (suite) {
 
         $(src + ': _h5ai/client/css/*.less')
             .newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
+            .includeit()
             .less()
             .autoprefixer()
             .if(!suite.args.uncompressed, function () { this.cssmin(); })
@@ -135,6 +136,7 @@ module.exports = function (suite) {
         var env = {pkg: pkg};
 
         $(src + '/_h5ai/client/css/styles.less')
+            .includeit()
             .less()
             .autoprefixer()
             .write(build + '/test/h5ai-styles.css', true);
@@ -144,6 +146,7 @@ module.exports = function (suite) {
             .write(build + '/test/h5ai-scripts.js', true);
 
         $(root + '/test/styles.less')
+            .includeit()
             .less()
             .autoprefixer()
             .write(build + '/test/styles.css', true);

src/_h5ai/client/css/inc/crumb.less

@@ -0,0 +1,50 @@
+#crumbbar {
+    overflow: hidden;
+    height: 48px;
+    font-size: 16px;
+    padding: 0 8px;
+    // border-left: 1px solid rgba(0,0,0,0.05);
+
+    a, a:active, a:visited {
+        color: @col;
+        cursor: pointer;
+        text-decoration: none;
+
+        &.active {
+            font-weight: bold;
+            color: @col-text-highlight;
+        }
+        &:hover {
+            color: @col-hover;
+        }
+        &:focus {
+            outline: 0;
+        }
+    }
+    .crumb {
+        display: inline-block;
+        .transition(all 0.2s ease-in-out);
+    }
+    .sep {
+        width: 24px;
+        height: 24px;
+        padding: 12px 0;
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+    }
+    .label {
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 8px;
+    }
+    .hint {
+        width: 16px;
+        height: 16px;
+        padding: 16px 4px 16px 0;
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+    }
+}

src/_h5ai/client/css/inc/topbar.less

@@ -1,4 +1,3 @@
-
 #topbar {
     overflow: hidden;
     flex: 0 0 auto;
@@ -17,6 +16,40 @@
 }
 
 
+#toolbar {
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 1;
+    height: 48px;
+
+    .tool {
+        display: inline-block;
+        cursor: pointer;
+        .transition(all 0.2s ease-in-out);
+
+        img {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            padding: 12px;
+        }
+
+        &:hover {
+            background: rgba(0,0,0,0.03);
+        }
+    }
+}
+
+
+#flowbar {
+    overflow: hidden;
+    flex: 1 1 auto;
+    order: 2;
+    height: 48px;
+    font-size: 16px;
+}
+
+
 #backlink {
     display: block;
     overflow: hidden;
@@ -24,7 +57,6 @@
     order: 99;
     text-align: center;
     padding: 6px 12px;
-    max-width: 80px;
     overflow: hidden;
     height: 36px;
     .transition(all 0.2s ease-in-out);
@@ -47,82 +79,3 @@
         white-space: nowrap;
     }
 }
-
-
-#toolbar {
-    overflow: hidden;
-    flex: 0 0 auto;
-    order: 1;
-    height: 48px;
-
-    .tool {
-        display: inline-block;
-        cursor: pointer;
-
-        img {
-            display: inline-block;
-            width: 24px;
-            height: 24px;
-            padding: 12px;
-            .transition(all 0.2s ease-in-out);
-        }
-
-        &:hover img {
-            background: rgba(0,0,0,0.03);
-        }
-    }
-}
-
-
-#crumbbar {
-    overflow: hidden;
-    flex: 1 1 auto;
-    order: 2;
-    height: 48px;
-    font-size: 16px;
-    padding: 0 8px;
-    // border-left: 1px solid rgba(0,0,0,0.05);
-
-    a, a:active, a:visited {
-        color: @col;
-        cursor: pointer;
-        text-decoration: none;
-
-        &.active {
-            font-weight: bold;
-            color: @col-text-highlight;
-        }
-        &:hover {
-            color: @col-hover;
-        }
-        &:focus {
-            outline: 0;
-        }
-    }
-    .crumb {
-        display: inline-block;
-        .transition(all 0.2s ease-in-out);
-    }
-    .sep {
-        width: 24px;
-        height: 24px;
-        padding: 12px 0;
-        line-height: 48px;
-        display: inline-block;
-        vertical-align: top;
-    }
-    .label {
-        line-height: 48px;
-        display: inline-block;
-        vertical-align: top;
-        padding: 0 8px;
-    }
-    .hint {
-        width: 16px;
-        height: 16px;
-        padding: 16px 4px 16px 0;
-        line-height: 48px;
-        display: inline-block;
-        vertical-align: top;
-    }
-}

src/_h5ai/client/css/styles.less

@@ -3,6 +3,7 @@
 
 @import "inc/general";
 @import "inc/topbar";
+@import "inc/crumb";
 @import "inc/sidebar";
 @import "inc/download";
 @import "inc/filter";

src/_h5ai/client/js/inc/ext/crumb.js

@@ -1,29 +1,24 @@
-modulejs.define('ext/crumb', ['_', '$', 'core/event', 'core/location', 'core/resource', 'core/settings'], function (_, $, event, location, resource, allsettings) {
+modulejs.define('ext/crumb', ['_', '$', 'core/event', 'core/location', 'core/resource', 'core/settings', 'view/topbar'], function (_, $, event, location, resource, allsettings, topbar) {
 
     var settings = _.extend({
             enabled: false
         }, allsettings.crumb);
-    var template =
+    var template = '<div id="crumbbar"/>';
+    var crumbTemplate =
             '<a class="crumb">' +
                 '<img class="sep" src="' + resource.image('crumb') + '" alt=">"/>' +
                 '<span class="label"/>' +
             '</a>';
     var pageHintTemplate = '<img class="hint" src="' + resource.icon('folder-page') + '" alt="has index page"/>';
+    var $crumbbar = $(template).appendTo(topbar.$flowbar);
 
 
-    function update(item, force) {
+    function createHtml(item) {
-
-        if (!force && item.$crumb) {
-            return item.$crumb;
-        }
-
-        var $html = $(template);
-
-        $html
-            .addClass(item.isFolder() ? 'folder' : 'file')
-            .data('item', item);
 
+        var $html = $(crumbTemplate).data('item', item);
+        item.$crumb = $html;
         location.setLink($html, item);
+
         $html.find('.label').text(item.label);
 
         if (item.isDomain() || item.isRoot()) {
@@ -38,36 +33,20 @@ modulejs.define('ext/crumb', ['_', '$', 'core/event', 'core/location', 'core/res
             $html.append($(pageHintTemplate));
         }
 
-        if (item.$crumb) {
-            item.$crumb.replaceWith($html);
-        }
-        item.$crumb = $html;
-
         return $html;
     }
 
     function onLocationChanged(item) {
 
-        var crumb = item.getCrumb();
+        var $crumb = item.$crumb;
-        var $crumbbar = $('#crumbbar');
-        var found = false;
 
-        $crumbbar.find('.crumb').each(function () {
+        if ($crumb && $crumb.parent()[0] === $crumbbar[0]) {
-
+            $crumbbar.children().removeClass('active');
-            var $html = $(this);
+            $crumb.addClass('active');
-            if ($html.data('item') === item) {
+        } else {
-                found = true;
+            $crumbbar.empty();
-                $html.addClass('active');
+            _.each(item.getCrumb(), function (item) {
-            } else {
+                $crumbbar.append(createHtml(item));
-                $html.removeClass('active');
-            }
-        });
-
-        if (!found) {
-            $crumbbar.find('.crumb').remove();
-            _.each(crumb, function (e) {
-
-                $crumbbar.append(update(e, true));
             });
         }
     }

src/_h5ai/client/js/inc/view/topbar.js

@@ -3,7 +3,7 @@ modulejs.define('view/topbar', ['$', 'config', 'view/root'], function ($, config
     var template =
             '<div id="topbar">' +
                 '<div id="toolbar"/>' +
-                '<div id="crumbbar"/>' +
+                '<div id="flowbar"/>' +
                 '<a id="backlink" href="http://larsjung.de/h5ai/" title="powered by h5ai ' + config.setup.VERSION + '">' +
                     '<div>powered</div>' +
                     '<div>by h5ai</div>' +
@@ -14,6 +14,6 @@ modulejs.define('view/topbar', ['$', 'config', 'view/root'], function ($, config
     return {
         $el: $el,
         $toolbar: $el.find('#toolbar'),
-        $crumbbar: $el.find('#crumbbar')
+        $flowbar: $el.find('#flowbar')
     };
 });

test/tests/unit/view/topbar.js

@@ -83,10 +83,10 @@ describe('module \'' + ID + '\'', function () {
             assert.lengthOf($('#topbar > #toolbar'), 1);
         });
 
-        it('adds HTML #crumbbar to #topbar', function () {
+        it('adds HTML #flowbar to #topbar', function () {
 
             this.applyFn();
-            assert.lengthOf($('#topbar > #crumbbar'), 1);
+            assert.lengthOf($('#topbar > #flowbar'), 1);
         });
 
         it('adds HTML #backlink to #topbar', function () {
@@ -139,15 +139,15 @@ describe('module \'' + ID + '\'', function () {
         });
     });
 
-    describe('.$crumbbar', function () {
+    describe('.$flowbar', function () {
 
-        it('is $(\'#crumbbar\')', function () {
+        it('is $(\'#flowbar\')', function () {
 
             var instance = this.applyFn();
-            assert.isObject(instance.$crumbbar);
+            assert.isObject(instance.$flowbar);
-            assert.lengthOf(instance.$crumbbar, 1);
+            assert.lengthOf(instance.$flowbar, 1);
-            assert.isString(instance.$crumbbar.jquery);
+            assert.isString(instance.$flowbar.jquery);
-            assert.strictEqual(instance.$crumbbar.attr('id'), 'crumbbar');
+            assert.strictEqual(instance.$flowbar.attr('id'), 'flowbar');
         });
     });
 });