Refactor view/content.

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

@@ -1,160 +1,8 @@
-modulejs.define('view/content', ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'view/mainrow'], function (_, $, event, format, location, resource, allsettings, mainrow) {
+modulejs.define('view/content', ['$', 'view/mainrow'], function ($, mainrow) {
 
-    var settings = _.extend({
+    var $content = $('<div id="content"/>').appendTo(mainrow.$el);
-            binaryPrefix: false,
-            hideFolders: false,
-            hideParentFolder: false,
-            setParentFolderLabels: false
-        }, allsettings.view);
-    var itemTemplate =
-            '<li class="item">' +
-                '<a>' +
-                    '<span class="icon square"><img/></span>' +
-                    '<span class="icon landscape"><img/></span>' +
-                    '<span class="label"/>' +
-                    '<span class="date"/>' +
-                    '<span class="size"/>' +
-                '</a>' +
-            '</li>';
-    var contentTemplate =
-            '<div id="content">' +
-                '<div id="view">' +
-                    '<ul id="items" class="clearfix">' +
-                        '<li class="header">' +
-                            '<a class="icon"/>' +
-                            '<a class="label" href="#"><span class="l10n-name"/></a>' +
-                            '<a class="date" href="#"><span class="l10n-lastModified"/></a>' +
-                            '<a class="size" href="#"><span class="l10n-size"/></a>' +
-                        '</li>' +
-                    '</ul>' +
-                    '<div class="empty l10n-empty"/>' +
-                '</div>' +
-            '</div>';
-    var $content = $(contentTemplate);
-    var $view = $content.find('#view');
-    var $items = $view.find('#items');
-    var $empty = $view.find('.empty');
-
-
-    function update(item) {
-
-        var $html = $(itemTemplate);
-        var $a = $html.find('a');
-        var $iconImg = $html.find('.icon img');
-        var $label = $html.find('.label');
-        var $date = $html.find('.date');
-        var $size = $html.find('.size');
-
-        $html
-            .addClass(item.isFolder() ? 'folder' : 'file')
-            .data('item', item);
-
-        location.setLink($a, item);
-
-        $label.text(item.label).attr('title', item.label);
-        $date.data('time', item.time).text(format.formatDate(item.time));
-        $size.data('bytes', item.size).text(format.formatSize(item.size));
-        item.icon = resource.icon(item.type);
-
-        if (item.isFolder() && !item.isManaged) {
-            $html.addClass('page');
-            item.icon = resource.icon('folder-page');
-        }
-
-        if (item.isCurrentParentFolder()) {
-            item.icon = resource.icon('folder-parent');
-            if (!settings.setParentFolderLabels) {
-                $label.addClass('l10n-parentDirectory');
-            }
-            $html.addClass('folder-parent');
-        }
-        $iconImg.attr('src', item.icon).attr('alt', item.type);
-
-        item.$view = $html;
-
-        return $html;
-    }
-
-    function onMouseenter() {
-
-        var item = $(this).closest('.item').data('item');
-        event.pub('item.mouseenter', item);
-    }
-
-    function onMouseleave() {
-
-        var item = $(this).closest('.item').data('item');
-        event.pub('item.mouseleave', item);
-    }
-
-    function onLocationChanged(item) {
-
-        $items.find('.item').remove();
-
-        if (item.parent && !settings.hideParentFolder) {
-            $items.append(update(item.parent));
-        }
-
-        _.each(item.content, function (e) {
-
-            if (!(e.isFolder() && settings.hideFolders)) {
-                $items.append(update(e));
-            }
-        });
-
-        if (item.isEmpty()) {
-            $empty.show();
-        } else {
-            $empty.hide();
-        }
-
-        $content.scrollLeft(0).scrollTop(0);
-    }
-
-    function onLocationRefreshed(item, added, removed) {
-
-        _.each(added, function (item) {
-
-            if (!(item.isFolder() && settings.hideFolders)) {
-                update(item).hide().appendTo($items).fadeIn(400);
-            }
-        });
-
-        _.each(removed, function (item) {
-
-            item.$view.fadeOut(400, function () {
-                item.$view.remove();
-            });
-        });
-
-        if (item.isEmpty()) {
-            setTimeout(function () { $empty.show(); }, 400);
-        } else {
-            $empty.hide();
-        }
-    }
-
-    function init() {
-
-        $content.appendTo(mainrow.$el);
-        $empty.hide();
-
-        format.setDefaultMetric(settings.binaryPrefix);
-
-        $items
-            .on('mouseenter', '.item a', onMouseenter)
-            .on('mouseleave', '.item a', onMouseleave);
-
-        event.sub('location.changed', onLocationChanged);
-        event.sub('location.refreshed', onLocationRefreshed);
-    }
-
-
-    init();
 
     return {
-        $el: $content,
+        $el: $content
-        $view: $view,
-        $items: $items
     };
 });

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

@@ -0,0 +1,60 @@
+modulejs.define('view/item', ['_', '$', 'core/format', 'core/location', 'core/resource', 'core/settings'], function (_, $, format, location, resource, allsettings) {
+
+    var settings = _.extend({
+            setParentFolderLabels: false
+        }, allsettings.view);
+    var template =
+            '<li class="item">' +
+                '<a>' +
+                    '<span class="icon square"><img/></span>' +
+                    '<span class="icon landscape"><img/></span>' +
+                    '<span class="label"/>' +
+                    '<span class="date"/>' +
+                    '<span class="size"/>' +
+                '</a>' +
+            '</li>';
+
+
+    function renderItem(item) {
+
+        var $html = $(template);
+        var $a = $html.find('a');
+        var $iconImg = $html.find('.icon img');
+        var $label = $html.find('.label');
+        var $date = $html.find('.date');
+        var $size = $html.find('.size');
+
+        $html
+            .addClass(item.isFolder() ? 'folder' : 'file')
+            .data('item', item);
+
+        location.setLink($a, item);
+
+        $label.text(item.label).attr('title', item.label);
+        $date.data('time', item.time).text(format.formatDate(item.time));
+        $size.data('bytes', item.size).text(format.formatSize(item.size));
+        item.icon = resource.icon(item.type);
+
+        if (item.isFolder() && !item.isManaged) {
+            $html.addClass('page');
+            item.icon = resource.icon('folder-page');
+        }
+
+        if (item.isCurrentParentFolder()) {
+            item.icon = resource.icon('folder-parent');
+            if (!settings.setParentFolderLabels) {
+                $label.addClass('l10n-parentDirectory');
+            }
+            $html.addClass('folder-parent');
+        }
+        $iconImg.attr('src', item.icon).attr('alt', item.type);
+
+        item.$view = $html;
+
+        return $html;
+    }
+
+    return {
+        render: renderItem
+    };
+});

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

@@ -0,0 +1,106 @@
+modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/settings', 'view/content', 'view/item'], function (_, $, event, format, allsettings, content, viewitem) {
+
+    var settings = _.extend({
+            binaryPrefix: false,
+            hideFolders: false,
+            hideParentFolder: false
+        }, allsettings.view);
+    var template =
+            '<div id="view">' +
+                '<ul id="items" class="clearfix">' +
+                    '<li class="header">' +
+                        '<a class="icon"/>' +
+                        '<a class="label" href="#"><span class="l10n-name"/></a>' +
+                        '<a class="date" href="#"><span class="l10n-lastModified"/></a>' +
+                        '<a class="size" href="#"><span class="l10n-size"/></a>' +
+                    '</li>' +
+                '</ul>' +
+                '<div class="empty l10n-empty"/>' +
+            '</div>';
+    var $view = $(template);
+    var $items = $view.find('#items');
+    var $empty = $view.find('.empty');
+
+
+    function onMouseenter() {
+
+        var item = $(this).closest('.item').data('item');
+        event.pub('item.mouseenter', item);
+    }
+
+    function onMouseleave() {
+
+        var item = $(this).closest('.item').data('item');
+        event.pub('item.mouseleave', item);
+    }
+
+    function onLocationChanged(item) {
+
+        $items.find('.item').remove();
+
+        if (item.parent && !settings.hideParentFolder) {
+            $items.append(viewitem.render(item.parent));
+        }
+
+        _.each(item.content, function (e) {
+
+            if (!(e.isFolder() && settings.hideFolders)) {
+                $items.append(viewitem.render(e));
+            }
+        });
+
+        if (item.isEmpty()) {
+            $empty.show();
+        } else {
+            $empty.hide();
+        }
+
+        content.$el.scrollLeft(0).scrollTop(0);
+    }
+
+    function onLocationRefreshed(item, added, removed) {
+
+        _.each(added, function (item) {
+
+            if (!(item.isFolder() && settings.hideFolders)) {
+                viewitem.render(item).hide().appendTo($items).fadeIn(400);
+            }
+        });
+
+        _.each(removed, function (item) {
+
+            item.$view.fadeOut(400, function () {
+                item.$view.remove();
+            });
+        });
+
+        if (item.isEmpty()) {
+            setTimeout(function () { $empty.show(); }, 400);
+        } else {
+            $empty.hide();
+        }
+    }
+
+    function init() {
+
+        $view.appendTo(content.$el);
+        $empty.hide();
+
+        format.setDefaultMetric(settings.binaryPrefix);
+
+        $items
+            .on('mouseenter', '.item a', onMouseenter)
+            .on('mouseleave', '.item a', onMouseleave);
+
+        event.sub('location.changed', onLocationChanged);
+        event.sub('location.refreshed', onLocationRefreshed);
+    }
+
+
+    init();
+
+    return {
+        $el: $view,
+        $items: $items
+    };
+});

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

@@ -1,4 +1,4 @@
-modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'core/store', 'view/content', 'view/sidebar'], function (_, $, resource, allsettings, store, content, sidebar) {
+modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'core/store', 'view/sidebar', 'view/view'], function (_, $, resource, allsettings, store, sidebar, view) {
 
     var modes = ['details', 'grid', 'icons'];
     var settings = _.extend({}, {
@@ -66,23 +66,23 @@ modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'c
         _.each(modes, function (m) {
             if (m === mode) {
                 $('#view-' + m).addClass('active');
-                content.$view.addClass('view-' + m);
+                view.$el.addClass('view-' + m);
             } else {
                 $('#view-' + m).removeClass('active');
-                content.$view.removeClass('view-' + m);
+                view.$el.removeClass('view-' + m);
             }
         });
 
         _.each(sortedSizes, function (s) {
             if (s === size) {
-                content.$view.addClass('view-size-' + s);
+                view.$el.addClass('view-size-' + s);
             } else {
-                content.$view.removeClass('view-size-' + s);
+                view.$el.removeClass('view-size-' + s);
             }
         });
         $('#view-size').val(_.indexOf(sortedSizes, size));
 
-        content.$view.show();
+        view.$el.show();
     }
 
     function addViewSettings() {

test/tests/unit/view/content.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var ID = 'view/content';
-var DEPS = ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'view/mainrow'];
+var DEPS = ['$', 'view/mainrow'];
 
 describe('module \'' + ID + '\'', function () {
 
@@ -10,35 +10,10 @@ describe('module \'' + ID + '\'', function () {
 
         this.definition = modulejs._private.definitions[ID];
 
-        this.xSettings = util.uniqObj();
-        this.xResource = {
-            icon: sinon.stub().returns(util.uniqPath('-icon.png'))
-        };
-        this.xFormat = {
-            formatSize: sinon.stub().returns(util.uniqId()),
-            formatDate: sinon.stub().returns(util.uniqId()),
-            setDefaultMetric: sinon.stub()
-        };
-        this.xEvent = {
-            sub: sinon.stub(),
-            pub: sinon.stub()
-        };
-        this.xLocation = {
-            setLink: sinon.stub()
-        };
         this.xMainrow = {$el: null};
-
         this.applyFn = function () {
 
-            this.xResource.icon.reset();
+            return this.definition.fn($, this.xMainrow);
-            this.xFormat.formatSize.reset();
-            this.xFormat.formatDate.reset();
-            this.xFormat.setDefaultMetric.reset();
-            this.xEvent.sub.reset();
-            this.xEvent.pub.reset();
-            this.xLocation.setLink.reset();
-
-            return this.definition.fn(_, $, this.xEvent, this.xFormat, this.xLocation, this.xResource, this.xSettings, this.xMainrow);
         };
     });
 
@@ -88,11 +63,11 @@ describe('module \'' + ID + '\'', function () {
 
     describe('application', function () {
 
-        it('returns object with 3 properties', function () {
+        it('returns object with 1 property', function () {
 
             var instance = this.applyFn();
             assert.isPlainObject(instance);
-            assert.lengthOfKeys(instance, 3);
+            assert.lengthOfKeys(instance, 1);
         });
 
         it('adds HTML #content to #mainrow', function () {
@@ -100,44 +75,6 @@ describe('module \'' + ID + '\'', function () {
             this.applyFn();
             assert.lengthOf($('#mainrow > #content'), 1);
         });
-
-        it('adds HTML #view to #content', function () {
-
-            this.applyFn();
-            assert.lengthOf($('#content > #view'), 1);
-        });
-
-        it('adds HTML #items to #view', function () {
-
-            this.applyFn();
-            assert.lengthOf($('#view > #items'), 1);
-        });
-
-        it('sets default metric', function () {
-
-            this.applyFn();
-            assert.isTrue(this.xFormat.setDefaultMetric.calledOnce);
-        });
-
-        it('subscribes to 2 events', function () {
-
-            this.applyFn();
-            assert.isTrue(this.xEvent.sub.calledTwice);
-        });
-
-        it('subscribes to location.changed', function () {
-
-            this.applyFn();
-            assert.strictEqual(this.xEvent.sub.firstCall.args[0], 'location.changed');
-            assert.isFunction(this.xEvent.sub.firstCall.args[1]);
-        });
-
-        it('subscribes to location.refreshed', function () {
-
-            this.applyFn();
-            assert.strictEqual(this.xEvent.sub.secondCall.args[0], 'location.refreshed');
-            assert.isFunction(this.xEvent.sub.secondCall.args[1]);
-        });
     });
 
     describe('.$el', function () {
@@ -151,30 +88,6 @@ describe('module \'' + ID + '\'', function () {
             assert.strictEqual(instance.$el.attr('id'), 'content');
         });
     });
-
-    describe('.$view', function () {
-
-        it('is $(\'#view\')', function () {
-
-            var instance = this.applyFn();
-            assert.isObject(instance.$view);
-            assert.lengthOf(instance.$view, 1);
-            assert.isString(instance.$view.jquery);
-            assert.strictEqual(instance.$view.attr('id'), 'view');
-        });
-    });
-
-    describe('.$items', function () {
-
-        it('is $(\'#items\')', function () {
-
-            var instance = this.applyFn();
-            assert.isObject(instance.$items);
-            assert.lengthOf(instance.$items, 1);
-            assert.isString(instance.$items.jquery);
-            assert.strictEqual(instance.$items.attr('id'), 'items');
-        });
-    });
 });
 
 }());

test/tests/unit/view/view.js

@@ -0,0 +1,152 @@
+(function () {
+'use strict';
+
+var ID = 'view/view';
+var DEPS = ['_', '$', 'core/event', 'core/format', 'core/settings', 'view/content', 'view/item'];
+
+describe('module \'' + ID + '\'', function () {
+
+    before(function () {
+
+        this.definition = modulejs._private.definitions[ID];
+
+        this.xEvent = {
+            sub: sinon.stub(),
+            pub: sinon.stub()
+        };
+        this.xFormat = {
+            setDefaultMetric: sinon.stub()
+        };
+        this.xSettings = util.uniqObj();
+        this.xContent = {$el: null};
+        this.xItem = {render: sinon.stub()};
+
+        this.applyFn = function () {
+
+            this.xEvent.sub.reset();
+            this.xEvent.pub.reset();
+            this.xFormat.setDefaultMetric.reset();
+            this.xItem.render.reset();
+
+            return this.definition.fn(_, $, this.xEvent, this.xFormat, this.xSettings, this.xContent, this.xItem);
+        };
+    });
+
+    after(function () {
+
+        util.restoreHtml();
+    });
+
+    beforeEach(function () {
+
+        util.restoreHtml();
+        this.xContent.$el = $('<div id="content"/>').appendTo('body');
+    });
+
+    describe('definition', function () {
+
+        it('is defined', function () {
+
+            assert.isPlainObject(this.definition);
+        });
+
+        it('has correct id', function () {
+
+            assert.strictEqual(this.definition.id, ID);
+        });
+
+        it('requires correct', function () {
+
+            assert.deepEqual(this.definition.deps, DEPS);
+        });
+
+        it('args for each request', function () {
+
+            assert.strictEqual(this.definition.deps.length, this.definition.fn.length);
+        });
+
+        it('has no instance', function () {
+
+            assert.notProperty(modulejs._private.instances, ID);
+        });
+
+        it('inits without errors', function () {
+
+            this.applyFn();
+        });
+    });
+
+    describe('application', function () {
+
+        it('returns object with 2 properties', function () {
+
+            var instance = this.applyFn();
+            assert.isPlainObject(instance);
+            assert.lengthOfKeys(instance, 2);
+        });
+
+        it('adds HTML #view to #content', function () {
+
+            this.applyFn();
+            assert.lengthOf($('#content > #view'), 1);
+        });
+
+        it('adds HTML #items to #view', function () {
+
+            this.applyFn();
+            assert.lengthOf($('#view > #items'), 1);
+        });
+
+        it('sets default metric', function () {
+
+            this.applyFn();
+            assert.isTrue(this.xFormat.setDefaultMetric.calledOnce);
+        });
+
+        it('subscribes to 2 events', function () {
+
+            this.applyFn();
+            assert.isTrue(this.xEvent.sub.calledTwice);
+        });
+
+        it('subscribes to location.changed', function () {
+
+            this.applyFn();
+            assert.strictEqual(this.xEvent.sub.firstCall.args[0], 'location.changed');
+            assert.isFunction(this.xEvent.sub.firstCall.args[1]);
+        });
+
+        it('subscribes to location.refreshed', function () {
+
+            this.applyFn();
+            assert.strictEqual(this.xEvent.sub.secondCall.args[0], 'location.refreshed');
+            assert.isFunction(this.xEvent.sub.secondCall.args[1]);
+        });
+    });
+
+    describe('.$el', function () {
+
+        it('is $(\'#view\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$el);
+            assert.lengthOf(instance.$el, 1);
+            assert.isString(instance.$el.jquery);
+            assert.strictEqual(instance.$el.attr('id'), 'view');
+        });
+    });
+
+    describe('.$items', function () {
+
+        it('is $(\'#items\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$items);
+            assert.lengthOf(instance.$items, 1);
+            assert.isString(instance.$items.jquery);
+            assert.strictEqual(instance.$items.attr('id'), 'items');
+        });
+    });
+});
+
+}());

test/tests/unit/view/viewmode.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var ID = 'view/viewmode';
-var DEPS = ['_', '$', 'core/resource', 'core/settings', 'core/store', 'view/content', 'view/sidebar'];
+var DEPS = ['_', '$', 'core/resource', 'core/settings', 'core/store', 'view/sidebar', 'view/view'];
 
 describe('module \'' + ID + '\'', function () {
 
@@ -10,18 +10,18 @@ describe('module \'' + ID + '\'', function () {
 
         this.definition = modulejs._private.definitions[ID];
 
-        this.xSettings = {
-            view: {}
-        };
         this.xResource = {
             image: sinon.stub().returns(util.uniqPath('-image.png'))
         };
+        this.xSettings = {
+            view: {}
+        };
         this.xStore = {
             get: sinon.stub(),
             put: sinon.stub()
         };
-        this.xContent = {$view: null};
         this.xSidebar = {$el: null};
+        this.xView = {$el: null};
 
         this.applyFn = function () {
 
@@ -29,7 +29,7 @@ describe('module \'' + ID + '\'', function () {
             this.xStore.get.reset();
             this.xStore.put.reset();
 
-            return this.definition.fn(_, $, this.xResource, this.xSettings, this.xStore, this.xContent, this.xSidebar);
+            return this.definition.fn(_, $, this.xResource, this.xSettings, this.xStore, this.xSidebar, this.xView);
         };
     });
 
@@ -41,8 +41,8 @@ describe('module \'' + ID + '\'', function () {
     beforeEach(function () {
 
         util.restoreHtml();
-        this.xContent.$view = $('<div id="view"/>').appendTo('body');
         this.xSidebar.$el = $('<div id="sidebar"/>').appendTo('body');
+        this.xView.$el = $('<div id="view"/>').appendTo('body');
     });
 
     describe('definition', function () {