Refactor view and viewmode.

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

@@ -1,8 +1,6 @@
 #view {
     @max-icon-size: 32px;
 
-    display: none;
-
     a, a:active, a:visited {
         display: block;
         color: inherit;

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

@@ -1,12 +1,19 @@
-modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'view/content'], function (_, $, event, format, location, resource, allsettings, content) {
+modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'core/store', 'view/content'], function (_, $, event, format, location, resource, allsettings, store, content) {
 
+    var modes = ['details', 'grid', 'icons'];
+    var sizes = [20, 40, 60, 80, 100, 150, 200, 250, 300, 350, 400];
     var settings = _.extend({
             binaryPrefix: false,
             hideFolders: false,
             hideParentFolder: false,
-            setParentFolderLabels: false
+            modes: modes,
+            setParentFolderLabels: false,
+            sizes: sizes
         }, allsettings.view);
-    var template =
+    var sortedSizes = settings.sizes.sort(function (a, b) { return a - b; });
+    var checkedModes = _.intersection(settings.modes, modes);
+    var storekey = 'view';
+    var tplView =
             '<div id="view">' +
                 '<ul id="items" class="clearfix">' +
                     '<li class="header">' +
@@ -18,7 +25,7 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
                 '</ul>' +
                 '<div id="view-hint"/>' +
             '</div>';
-    var itemTemplate =
+    var tplItem =
             '<li class="item">' +
                 '<a>' +
                     '<span class="icon square"><img/></span>' +
@@ -28,14 +35,111 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
                     '<span class="size"/>' +
                 '</a>' +
             '</li>';
-    var $view = $(template);
+    var $view = $(tplView);
     var $items = $view.find('#items');
     var $hint = $view.find('#view-hint');
 
 
+    function cropSize(size, min, max) {
+
+        return Math.min(max, Math.max(min, size));
+    }
+
+    function createStyles(size) {
+
+        var dsize = cropSize(size, 20, 80);
+        var gsize = cropSize(size, 40, 150);
+        var isize = cropSize(size, 80, 2000);
+        var ilsize = Math.round(isize * 4 / 3);
+        var rules = [
+                '#view.view-details.view-size-' + size + ' .item .label { line-height: ' + (dsize + 14) + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .item .date { line-height: ' + (dsize + 14) + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .item .size { line-height: ' + (dsize + 14) + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .square { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .square img { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
+                '#view.view-details.view-size-' + size + ' .label { margin: 0 246px 0 ' + (dsize + 32) + 'px !important; }',
+
+                '#view.view-grid.view-size-' + size + ' .item .label { line-height: ' + gsize + 'px !important; }',
+                '#view.view-grid.view-size-' + size + ' .square { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
+                '#view.view-grid.view-size-' + size + ' .square img { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
+
+                '#view.view-icons.view-size-' + size + ' .item { width: ' + ilsize + 'px !important; }',
+                '#view.view-icons.view-size-' + size + ' .landscape { width: ' + ilsize + 'px !important; height: ' + isize + 'px !important; }',
+                '#view.view-icons.view-size-' + size + ' .landscape img { width: ' + isize + 'px !important; height: ' + isize + 'px !important; }',
+                '#view.view-icons.view-size-' + size + ' .landscape .thumb { width: ' + ilsize + 'px !important; }'
+            ];
+
+        return rules.join('\n');
+    }
+
+    function addCssStyles() {
+
+        var styles = _.map(sortedSizes, function (size) { return createStyles(size); });
+        $('<style/>').text(styles.join('\n')).appendTo('head');
+    }
+
+    function set(mode, size) {
+
+        var stored = store.get(storekey);
+
+        mode = mode || stored && stored.mode;
+        size = size || stored && stored.size;
+        mode = _.contains(settings.modes, mode) ? mode : settings.modes[0];
+        size = _.contains(settings.sizes, size) ? size : settings.sizes[0];
+        store.put(storekey, {mode: mode, size: size});
+
+        _.each(checkedModes, function (m) {
+            if (m === mode) {
+                $view.addClass('view-' + m);
+            } else {
+                $view.removeClass('view-' + m);
+            }
+        });
+
+        _.each(sortedSizes, function (s) {
+            if (s === size) {
+                $view.addClass('view-size-' + s);
+            } else {
+                $view.removeClass('view-size-' + s);
+            }
+        });
+
+        event.pub('view.mode.changed', mode, size);
+    }
+
+    function getModes() {
+
+        return checkedModes;
+    }
+
+    function getSizes() {
+
+        return sortedSizes;
+    }
+
+    function getMode() {
+
+        return store.get(storekey).mode;
+    }
+
+    function setMode(mode) {
+
+        set(mode, null);
+    }
+
+    function getSize() {
+
+        return store.get(storekey).size;
+    }
+
+    function setSize(size) {
+
+        set(null, size);
+    }
+
     function createHtml(item) {
 
-        var $html = $(itemTemplate);
+        var $html = $(tplItem);
         var $a = $html.find('a');
         var $iconImg = $html.find('.icon img');
         var $label = $html.find('.label');
@@ -178,6 +282,9 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
 
     function init() {
 
+        addCssStyles();
+        set();
+
         $view.appendTo(content.$el);
         $hint.hide();
 
@@ -200,6 +307,12 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
         setItems: setItems,
         changeItems: changeItems,
         setLocation: onLocationChanged,
-        setHint: setHint
+        setHint: setHint,
+        getModes: getModes,
+        getMode: getMode,
+        setMode: setMode,
+        getSizes: getSizes,
+        getSize: getSize,
+        setSize: setSize
     };
 });

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

@@ -1,118 +1,62 @@
-modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'core/store', 'view/sidebar', 'view/view'], function (_, $, resource, allsettings, store, sidebar, view) {
+modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'view/sidebar', 'view/topbar', 'view/view'], function (_, $, event, resource, sidebar, topbar, view) {
 
-    var modes = ['details', 'grid', 'icons'];
+    var tplSettings =
-    var settings = _.extend({}, {
+            '<div id="settings-viewmode" class="block"><h1 class="l10n-view">View</h1></div>';
-            modes: modes,
+    var tplMode =
-            sizes: [20, 40, 60, 80, 100, 150, 200, 250, 300, 350, 400]
-        }, allsettings.view);
-    var storekey = 'viewmode';
-    var modeTemplate =
             '<div id="view-[MODE]" class="button view">' +
                 '<img src="' + resource.image('view-[MODE]') + '" alt="view-[MODE]"/>' +
             '</div>';
-    var sizeTemplate =
+    var tplSize =
             '<input id="view-size" type="range" min="0" max="0" value="0">';
-    var sortedSizes = settings.sizes.sort(function (a, b) { return a - b; });
+    var tplToggle =
+            '<div id="viewmode-toggle" class="tool">' +
+                '<img alt="viewmode"/>' +
+            '</div>';
+    var modes = view.getModes();
+    var sizes = view.getSizes();
 
 
-    function cropSize(size, min, max) {
+    function onChanged(mode, size) {
-
-        return Math.min(max, Math.max(min, size));
-    }
-
-    function createStyles(size) {
-
-        var dsize = cropSize(size, 20, 80);
-        var gsize = cropSize(size, 40, 150);
-        var isize = cropSize(size, 80, 2000);
-        var ilsize = Math.round(isize * 4 / 3);
-        var rules = [
-                '#view.view-details.view-size-' + size + ' .item .label { line-height: ' + (dsize + 14) + 'px !important; }',
-                '#view.view-details.view-size-' + size + ' .item .date { line-height: ' + (dsize + 14) + 'px !important; }',
-                '#view.view-details.view-size-' + size + ' .item .size { line-height: ' + (dsize + 14) + 'px !important; }',
-                '#view.view-details.view-size-' + size + ' .square { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
-                '#view.view-details.view-size-' + size + ' .square img { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
-                '#view.view-details.view-size-' + size + ' .label { margin: 0 246px 0 ' + (dsize + 32) + 'px !important; }',
-
-                '#view.view-grid.view-size-' + size + ' .item .label { line-height: ' + gsize + 'px !important; }',
-                '#view.view-grid.view-size-' + size + ' .square { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
-                '#view.view-grid.view-size-' + size + ' .square img { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
-
-                '#view.view-icons.view-size-' + size + ' .item { width: ' + ilsize + 'px !important; }',
-                '#view.view-icons.view-size-' + size + ' .landscape { width: ' + ilsize + 'px !important; height: ' + isize + 'px !important; }',
-                '#view.view-icons.view-size-' + size + ' .landscape img { width: ' + isize + 'px !important; height: ' + isize + 'px !important; }',
-                '#view.view-icons.view-size-' + size + ' .landscape .thumb { width: ' + ilsize + 'px !important; }'
-            ];
-
-        return rules.join('\n');
-    }
-
-    function addCssStyles() {
-
-        var styles = _.map(sortedSizes, function (size) { return createStyles(size); });
-        $('<style/>').text(styles.join('\n')).appendTo('head');
-    }
-
-    function updateView(mode, size) {
-
-        var stored = store.get(storekey);
-
-        mode = mode || stored && stored.mode;
-        size = size || stored && stored.size;
-        mode = _.contains(settings.modes, mode) ? mode : settings.modes[0];
-        size = _.contains(settings.sizes, size) ? size : settings.sizes[0];
-        store.put(storekey, {mode: mode, size: size});
 
         _.each(modes, function (m) {
             if (m === mode) {
                 $('#view-' + m).addClass('active');
-                view.$el.addClass('view-' + m);
             } else {
                 $('#view-' + m).removeClass('active');
-                view.$el.removeClass('view-' + m);
             }
         });
 
-        _.each(sortedSizes, function (s) {
+        $('#view-size').val(_.indexOf(sizes, size));
-            if (s === size) {
-                view.$el.addClass('view-size-' + s);
-            } else {
-                view.$el.removeClass('view-size-' + s);
-            }
-        });
-        $('#view-size').val(_.indexOf(sortedSizes, size));
 
-        view.$el.show();
+        $('#viewmode-toggle img').attr('src', resource.image('view-' + mode));
     }
 
-    function addViewSettings() {
+    function addSettings() {
 
-        if (settings.modes.length < 2 && settings.sizes.length < 2) {
+        if (modes.length < 2 && sizes.length < 2) {
             return;
         }
 
-        var $viewBlock = $('<div id="settings-viewmode" class="block"><h1 class="l10n-view">View</h1></div>');
+        var $viewBlock = $(tplSettings);
-        var max;
 
-        settings.modes = _.intersection(settings.modes, modes);
+        if (modes.length > 1) {
-
-        if (settings.modes.length > 1) {
             _.each(modes, function (mode) {
-                if (_.contains(settings.modes, mode)) {
+                $(tplMode.replace(/\[MODE\]/g, mode))
-                    $(modeTemplate.replace(/\[MODE\]/g, mode))
+                    .on('click', function () {
-                        .appendTo($viewBlock)
+
-                        .on('click', function () { updateView(mode); });
+                        view.setMode(mode);
-                }
+                    })
+                    .appendTo($viewBlock);
             });
         }
 
-        if (settings.sizes.length > 1) {
+        if (sizes.length > 1) {
-            max = settings.sizes.length - 1;
+            var max = sizes.length - 1;
-            $(sizeTemplate)
+            $(tplSize)
                 .prop('max', max).attr('max', max)
                 .on('input change', function (ev) {
 
-                    updateView(null, settings.sizes[ev.target.valueAsNumber]);
+                    view.setSize(sizes[ev.target.valueAsNumber]);
                 })
                 .appendTo($viewBlock);
         }
@@ -120,11 +64,29 @@ modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'c
         $viewBlock.appendTo(sidebar.$el);
     }
 
+    function addToggle() {
+
+        if (modes.length > 1) {
+            $(tplToggle)
+                .on('click', function () {
+
+                    var mode = view.getMode();
+                    var nextIdx = (modes.indexOf(mode) + 1) % modes.length;
+                    var nextMode = modes[nextIdx];
+
+                    view.setMode(nextMode);
+                })
+                .appendTo(topbar.$toolbar);
+        }
+    }
+
     function init() {
 
-        addCssStyles();
+        addSettings();
-        addViewSettings();
+        addToggle();
-        updateView();
+        onChanged(view.getMode(), view.getSize());
+
+        event.sub('view.mode.changed', onChanged);
     }
 
 

test/tests/unit/view/view.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var ID = 'view/view';
-var DEPS = ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'view/content'];
+var DEPS = ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'core/store', 'view/content'];
 
 describe('module \'' + ID + '\'', function () {
 
@@ -29,8 +29,14 @@ describe('module \'' + ID + '\'', function () {
             binaryPrefix: false,
             hideFolders: false,
             hideParentFolder: false,
-            setParentFolderLabels: false
+            modes: ['details', 'grid', 'icons'],
+            setParentFolderLabels: false,
+            sizes: [20, 40, 60, 80, 100, 150, 200, 250, 300, 350, 400]
         }};
+        this.xStore = {
+            get: sinon.stub(),
+            put: sinon.stub()
+        };
         this.xContent = {$el: null};
 
         this.applyFn = function () {
@@ -43,7 +49,7 @@ describe('module \'' + ID + '\'', function () {
             this.xLocation.setLink.reset();
             this.xResource.icon.reset();
 
-            return this.definition.fn(_, $, this.xEvent, this.xFormat, this.xLocation, this.xResource, this.xSettings, this.xContent);
+            return this.definition.fn(_, $, this.xEvent, this.xFormat, this.xLocation, this.xResource, this.xSettings, this.xStore, this.xContent);
         };
     });
 
@@ -93,11 +99,11 @@ describe('module \'' + ID + '\'', function () {
 
     describe('application', function () {
 
-        it('returns object with 6 properties', function () {
+        it('returns object with 12 properties', function () {
 
             var instance = this.applyFn();
             assert.isPlainObject(instance);
-            assert.lengthOfKeys(instance, 6);
+            assert.lengthOfKeys(instance, 12);
         });
 
         it('adds HTML #view to #content', function () {
@@ -118,6 +124,23 @@ describe('module \'' + ID + '\'', function () {
             assert.lengthOf($('#view > #view-hint'), 1);
         });
 
+        it('adds style to head', function () {
+
+            var styleTagCount = $('head > style').length;
+            this.applyFn();
+            assert.lengthOf($('head > style'), styleTagCount + 1);
+        });
+
+        it('style contains possibly correct text', function () {
+
+            this.xSettings.sizes = [20];
+            this.applyFn();
+            var text = $('head > style').eq(0).text();
+            assert.isTrue(text.indexOf('#view.view-details.view-size-20 ') >= 0);
+            assert.isTrue(text.indexOf('#view.view-grid.view-size-20 ') >= 0);
+            assert.isTrue(text.indexOf('#view.view-icons.view-size-20 ') >= 0);
+        });
+
         it('sets default metric', function () {
 
             this.applyFn();
@@ -181,7 +204,7 @@ describe('module \'' + ID + '\'', function () {
 
             var instance = this.applyFn();
             instance.setItems();
-            assert.isTrue(this.xEvent.pub.calledOnce);
+            assert.isTrue(this.xEvent.pub.calledTwice);
             assert.strictEqual(this.xEvent.pub.lastCall.args[0], 'view.changed');
         });
     });
@@ -198,7 +221,7 @@ describe('module \'' + ID + '\'', function () {
 
             var instance = this.applyFn();
             instance.setItems();
-            assert.isTrue(this.xEvent.pub.calledOnce);
+            assert.isTrue(this.xEvent.pub.calledTwice);
             assert.strictEqual(this.xEvent.pub.lastCall.args[0], 'view.changed');
         });
     });
@@ -215,7 +238,7 @@ describe('module \'' + ID + '\'', function () {
 
             var instance = this.applyFn();
             instance.setItems();
-            assert.isTrue(this.xEvent.pub.calledOnce);
+            assert.isTrue(this.xEvent.pub.calledTwice);
             assert.strictEqual(this.xEvent.pub.lastCall.args[0], 'view.changed');
         });
     });
@@ -246,6 +269,136 @@ describe('module \'' + ID + '\'', function () {
         });
     });
 
+    describe('.getModes()', function () {
+
+        it('is function', function () {
+
+            var instance = this.applyFn();
+            assert.isTrue(_.isFunction(instance.getModes));
+        });
+    });
+
+    describe('.getMode()', function () {
+
+        it('is function', function () {
+
+            var instance = this.applyFn();
+            assert.isTrue(_.isFunction(instance.getMode));
+        });
+    });
+
+    describe('.setMode()', function () {
+
+        it('is function', function () {
+
+            var instance = this.applyFn();
+            assert.isTrue(_.isFunction(instance.setMode));
+        });
+
+        it('.setMode(\'details\') changes #view class to .view-details', function () {
+
+            this.xSettings.view.modes = ['details', 'grid', 'icons'];
+            var instance = this.applyFn();
+            instance.setMode('details');
+            assert.isTrue($('#view').hasClass('view-details'));
+            assert.isFalse($('#view').hasClass('view-grid'));
+            assert.isFalse($('#view').hasClass('view-icons'));
+        });
+
+        it('.setMode(\'grid\') changes #view class to .view-grid', function () {
+
+            this.xSettings.view.modes = ['details', 'grid', 'icons'];
+            var instance = this.applyFn();
+            instance.setMode('grid');
+            assert.isFalse($('#view').hasClass('view-details'));
+            assert.isTrue($('#view').hasClass('view-grid'));
+            assert.isFalse($('#view').hasClass('view-icons'));
+        });
+
+        it('.setMode(\'icons\') changes #view class to .view-icons', function () {
+
+            this.xSettings.view.modes = ['details', 'grid', 'icons'];
+            var instance = this.applyFn();
+            instance.setMode('icons');
+            assert.isFalse($('#view').hasClass('view-details'));
+            assert.isFalse($('#view').hasClass('view-grid'));
+            assert.isTrue($('#view').hasClass('view-icons'));
+        });
+    });
+
+    describe('.getSizes()', function () {
+
+        it('is function', function () {
+
+            var instance = this.applyFn();
+            assert.isTrue(_.isFunction(instance.getSizes));
+        });
+
+        it('returns sorted sizes', function () {
+
+            this.xSettings.view.sizes = [20, 60, 40];
+            var instance = this.applyFn();
+            assert.deepEqual(instance.getSizes(), [20, 40, 60]);
+        });
+
+        it('returns sorted sizes', function () {
+
+            this.xSettings.view.sizes = [60, 40, 20];
+            var instance = this.applyFn();
+            assert.deepEqual(instance.getSizes(), [20, 40, 60]);
+        });
+    });
+
+    describe('.getSize()', function () {
+
+        it('is function', function () {
+
+            var instance = this.applyFn();
+            assert.isTrue(_.isFunction(instance.getSize));
+        });
+    });
+
+    describe('.setSize()', function () {
+
+        it('is function', function () {
+
+            var instance = this.applyFn();
+            assert.isTrue(_.isFunction(instance.setSize));
+        });
+
+        it('.setSize(20) changes #view class to .view-size-20', function () {
+
+            this.xSettings.view.sizes = [20, 40, 60];
+            var instance = this.applyFn();
+            instance.setSize(20);
+            assert.isTrue($('#view').hasClass('view-size-20'), 20);
+            assert.isFalse($('#view').hasClass('view-size-40'), 40);
+            assert.isFalse($('#view').hasClass('view-size-60'), 60);
+        });
+
+        it('.setSize(40) changes #view class to .view-size-40', function () {
+
+            this.xSettings.view.sizes = [20, 40, 60];
+            var instance = this.applyFn();
+            instance.setSize(20);
+            instance.setSize(40);
+            assert.isFalse($('#view').hasClass('view-size-20'), 20);
+            assert.isTrue($('#view').hasClass('view-size-40'), 40);
+            assert.isFalse($('#view').hasClass('view-size-60'), 60);
+        });
+
+        it('.setSize(60) changes #view class to .view-size-60', function () {
+
+            this.xSettings.view.sizes = [20, 40, 60];
+            var instance = this.applyFn();
+            instance.setSize(20);
+            instance.setSize(60);
+            assert.isFalse($('#view').hasClass('view-size-20'), 20);
+            assert.isFalse($('#view').hasClass('view-size-40'), 40);
+            assert.isTrue($('#view').hasClass('view-size-60'), 60);
+        });
+    });
+
     // describe('._.createHtml()', function () {
 
     //     before(function () {

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/sidebar', 'view/view'];
+var DEPS = ['_', '$', 'core/event', 'core/resource', 'view/sidebar', 'view/topbar', 'view/view'];
 
 describe('module \'' + ID + '\'', function () {
 
@@ -10,27 +10,38 @@ describe('module \'' + ID + '\'', function () {
 
         this.definition = modulejs._private.definitions[ID];
 
+        this.xEvent = {
+            sub: sinon.stub(),
+            pub: sinon.stub()
+        };
         this.xResource = {
             image: sinon.stub().returns(util.uniqPath('-image.png'))
         };
-        this.xSettings = {view: {
-            modes: ['details', 'grid', 'icons'],
-            sizes: [20, 40, 60, 80, 100]
-        }};
-        this.xStore = {
-            get: sinon.stub(),
-            put: sinon.stub()
-        };
         this.xSidebar = {$el: null};
-        this.xView = {$el: null};
+        this.xTopbar = {$el: null};
+        this.xView = {
+            $el: null,
+            getModes: sinon.stub().returns(['details', 'grid', 'icons']),
+            getMode: sinon.stub(),
+            setMode: sinon.stub(),
+            getSizes: sinon.stub().returns([1, 2]),
+            getSize: sinon.stub(),
+            setSize: sinon.stub()
+        };
 
         this.applyFn = function () {
 
+            this.xEvent.sub.reset();
+            this.xEvent.pub.reset();
             this.xResource.image.reset();
-            this.xStore.get.reset();
+            this.xView.getModes.reset();
-            this.xStore.put.reset();
+            this.xView.getMode.reset();
+            this.xView.setMode.reset();
+            this.xView.getSizes.reset();
+            this.xView.getSize.reset();
+            this.xView.setSize.reset();
 
-            return this.definition.fn(_, $, this.xResource, this.xSettings, this.xStore, this.xSidebar, this.xView);
+            return this.definition.fn(_, $, this.xEvent, this.xResource, this.xSidebar, this.xTopbar, this.xView);
         };
     });
 
@@ -43,6 +54,7 @@ describe('module \'' + ID + '\'', function () {
 
         util.restoreHtml();
         this.xSidebar.$el = $('<div id="sidebar"/>').appendTo('body');
+        this.xTopbar.$el = $('<div id="topbar"/>').appendTo('body');
         this.xView.$el = $('<div id="view"/>').appendTo('body');
     });
 
@@ -117,26 +129,9 @@ describe('module \'' + ID + '\'', function () {
             assert.lengthOf($('#settings-viewmode > #view-size'), 1);
         });
 
-        it('adds style to head', function () {
+        it('does not add HTML #view-details, #view-grid, #view-icons when only one mode', function () {
 
-            var styleTagCount = $('head > style').length;
+            this.xView.getModes.returns(['details']);
-            this.applyFn();
-            assert.lengthOf($('head > style'), styleTagCount + 1);
-        });
-
-        it('style contains possibly correct text', function () {
-
-            this.xSettings.view.sizes = [20];
-            this.applyFn();
-            var text = $('head > style').eq(0).text();
-            assert.isTrue(text.indexOf('#view.view-details.view-size-20 ') >= 0);
-            assert.isTrue(text.indexOf('#view.view-grid.view-size-20 ') >= 0);
-            assert.isTrue(text.indexOf('#view.view-icons.view-size-20 ') >= 0);
-        });
-
-        it('does not HTML #view-details, #view-grid, #view-icons when only one mode', function () {
-
-            this.xSettings.view.modes = ['details'];
             this.applyFn();
             assert.lengthOf($('#view-details'), 0);
             assert.lengthOf($('#view-grid'), 0);
@@ -145,7 +140,7 @@ describe('module \'' + ID + '\'', function () {
 
         it('does not add HTML #view-size when only one size', function () {
 
-            this.xSettings.view.sizes = [20];
+            this.xView.getSizes.returns([20]);
             this.applyFn();
             assert.lengthOf($('#view-size'), 0);
         });
@@ -153,89 +148,67 @@ describe('module \'' + ID + '\'', function () {
 
     describe('works', function () {
 
-        it('clicking #view-details changes #view class to .view-details', function () {
+        it('clicking #view-details triggers view.setMode(\'details\')', function () {
 
-            this.xSettings.view.modes = ['details', 'grid', 'icons'];
+            this.xView.getModes.returns(['details', 'grid', 'icons']);
             this.applyFn();
             $('#view-details').trigger('click');
-            assert.isTrue($('#view').hasClass('view-details'));
+            assert.isTrue(this.xView.setMode.calledOnce);
-            assert.isFalse($('#view').hasClass('view-grid'));
+            assert.deepEqual(this.xView.setMode.lastCall.args, ['details']);
-            assert.isFalse($('#view').hasClass('view-icons'));
         });
 
-        it('clicking #view-grid changes #view class to .view-grid', function () {
+        it('clicking #view-grid triggers view.setMode(\'grid\')', function () {
 
-            this.xSettings.view.modes = ['details', 'grid', 'icons'];
+            this.xView.getModes.returns(['details', 'grid', 'icons']);
             this.applyFn();
             $('#view-grid').trigger('click');
-            assert.isFalse($('#view').hasClass('view-details'));
+            assert.isTrue(this.xView.setMode.calledOnce);
-            assert.isTrue($('#view').hasClass('view-grid'));
+            assert.deepEqual(this.xView.setMode.lastCall.args, ['grid']);
-            assert.isFalse($('#view').hasClass('view-icons'));
         });
 
-        it('clicking #view-icons changes #view class to .view-icons', function () {
+        it('clicking #view-icons triggers view.setMode(\'icons\')', function () {
 
-            this.xSettings.view.modes = ['details', 'grid', 'icons'];
+            this.xView.getModes.returns(['details', 'grid', 'icons']);
             this.applyFn();
             $('#view-icons').trigger('click');
-            assert.isFalse($('#view').hasClass('view-details'));
+            assert.isTrue(this.xView.setMode.calledOnce);
-            assert.isFalse($('#view').hasClass('view-grid'));
+            assert.deepEqual(this.xView.setMode.lastCall.args, ['icons']);
-            assert.isTrue($('#view').hasClass('view-icons'));
         });
 
-        it('changing #view-size changes #view class to .view-size-*', function () {
+        it('changing #view-size triggers view.setSize(*)', function () {
 
-            this.xSettings.view.sizes = [20, 40, 60];
+            this.xView.getSizes.returns([20, 40, 60]);
             this.applyFn();
 
             $('#view-size').val(0).trigger('change');
-            assert.isTrue($('#view').hasClass('view-size-20'), 20);
+            assert.isTrue(this.xView.setSize.calledOnce);
-            assert.isFalse($('#view').hasClass('view-size-40'), 40);
+            assert.deepEqual(this.xView.setSize.lastCall.args, [20]);
-            assert.isFalse($('#view').hasClass('view-size-60'), 60);
 
             $('#view-size').val(1).trigger('change');
-            assert.isFalse($('#view').hasClass('view-size-20'), 20);
+            assert.isTrue(this.xView.setSize.calledTwice);
-            assert.isTrue($('#view').hasClass('view-size-40'), 40);
+            assert.deepEqual(this.xView.setSize.lastCall.args, [40]);
-            assert.isFalse($('#view').hasClass('view-size-60'), 60);
 
             $('#view-size').val(2).trigger('change');
-            assert.isFalse($('#view').hasClass('view-size-20'), 20);
+            assert.isTrue(this.xView.setSize.calledThrice);
-            assert.isFalse($('#view').hasClass('view-size-40'), 40);
+            assert.deepEqual(this.xView.setSize.lastCall.args, [60]);
-            assert.isTrue($('#view').hasClass('view-size-60'), 60);
         });
 
-        it('inputing #view-size changes #view class to .view-size-*', function () {
+        it('inputing #view-size triggers view.setSize(*)', function () {
 
-            this.xSettings.view.sizes = [20, 40, 60];
+            this.xView.getSizes.returns([20, 40, 60]);
             this.applyFn();
 
             $('#view-size').val(0).trigger('input');
-            assert.isTrue($('#view').hasClass('view-size-20'), 20);
+            assert.isTrue(this.xView.setSize.calledOnce);
-            assert.isFalse($('#view').hasClass('view-size-40'), 40);
+            assert.deepEqual(this.xView.setSize.lastCall.args, [20]);
-            assert.isFalse($('#view').hasClass('view-size-60'), 60);
 
             $('#view-size').val(1).trigger('input');
-            assert.isFalse($('#view').hasClass('view-size-20'), 20);
+            assert.isTrue(this.xView.setSize.calledTwice);
-            assert.isTrue($('#view').hasClass('view-size-40'), 40);
+            assert.deepEqual(this.xView.setSize.lastCall.args, [40]);
-            assert.isFalse($('#view').hasClass('view-size-60'), 60);
 
             $('#view-size').val(2).trigger('input');
-            assert.isFalse($('#view').hasClass('view-size-20'), 20);
+            assert.isTrue(this.xView.setSize.calledThrice);
-            assert.isFalse($('#view').hasClass('view-size-40'), 40);
+            assert.deepEqual(this.xView.setSize.lastCall.args, [60]);
-            assert.isTrue($('#view').hasClass('view-size-60'), 60);
-        });
-
-        it('#view-size uses sorted sizes', function () {
-
-            this.xSettings.view.sizes = [60, 40, 20];
-            this.applyFn();
-
-            $('#view-size').val(0).trigger('change');
-            assert.isTrue($('#view').hasClass('view-size-20'));
-            $('#view-size').val(1).trigger('change');
-            assert.isTrue($('#view').hasClass('view-size-40'));
-            $('#view-size').val(2).trigger('change');
-            assert.isTrue($('#view').hasClass('view-size-60'));
         });
     });
 });