From 1d7457a4a2a4f412dfeaee65846677a7bca8486c Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Sun, 10 May 2015 13:05:39 +0200 Subject: [PATCH] Refactor code. --- src/_h5ai/client/js/inc/view/viewmode.js | 39 +++++++-------- test/tests/integration/view.js | 4 +- test/tests/unit/view/viewmode.js | 60 ++++++++++++------------ 3 files changed, 49 insertions(+), 54 deletions(-) diff --git a/src/_h5ai/client/js/inc/view/viewmode.js b/src/_h5ai/client/js/inc/view/viewmode.js index 1cc66149..5ff9da6a 100644 --- a/src/_h5ai/client/js/inc/view/viewmode.js +++ b/src/_h5ai/client/js/inc/view/viewmode.js @@ -1,13 +1,13 @@ modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'view/sidebar', 'view/topbar', 'view/view'], function (_, $, event, resource, sidebar, topbar, view) { var tplSettings = - '

View

'; + '

View

'; var tplMode = - '
' + - 'view-[MODE]' + + '
' + + 'viewmode-[MODE]' + '
'; var tplSize = - ''; + ''; var tplToggle = '
' + 'viewmode' + @@ -18,16 +18,9 @@ modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'view function onChanged(mode, size) { - _.each(modes, function (m) { - if (m === mode) { - $('#view-' + m).addClass('active'); - } else { - $('#view-' + m).removeClass('active'); - } - }); - - $('#view-size').val(_.indexOf(sizes, size)); - + $('#viewmode-settings .mode').removeClass('active'); + $('#viewmode-' + mode).addClass('active'); + $('#viewmode-size').val(_.indexOf(sizes, size)); $('#viewmode-toggle img').attr('src', resource.image('view-' + mode)); } @@ -64,18 +57,20 @@ modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'view $viewBlock.appendTo(sidebar.$el); } + function onToggle() { + + var mode = view.getMode(); + var nextIdx = (modes.indexOf(mode) + 1) % modes.length; + var nextMode = modes[nextIdx]; + + view.setMode(nextMode); + } + 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); - }) + .on('click', onToggle) .appendTo(topbar.$toolbar); } } diff --git a/test/tests/integration/view.js b/test/tests/integration/view.js index 5ce88946..50585c2d 100644 --- a/test/tests/integration/view.js +++ b/test/tests/integration/view.js @@ -111,10 +111,10 @@ describe('view', function () { assert.lengthOf($('#toolbar > #sidebar-toggle'), 1); }); - it('adds HTML #settings-viewmode to #sidebar', function () { + it('adds HTML #viewmode-settings to #sidebar', function () { modulejs.require('view/viewmode'); - assert.lengthOf($('#sidebar > #settings-viewmode'), 1); + assert.lengthOf($('#sidebar > #viewmode-settings'), 1); }); it('adds style to head', function () { diff --git a/test/tests/unit/view/viewmode.js b/test/tests/unit/view/viewmode.js index 34c61e60..fcf64c11 100644 --- a/test/tests/unit/view/viewmode.js +++ b/test/tests/unit/view/viewmode.js @@ -99,114 +99,114 @@ describe('module \'' + ID + '\'', function () { assert.isUndefined(instance); }); - it('adds HTML #settings-viewmode to #sidebar', function () { + it('adds HTML #viewmode-settings to #sidebar', function () { this.applyFn(); - assert.lengthOf($('#sidebar > #settings-viewmode'), 1); + assert.lengthOf($('#sidebar > #viewmode-settings'), 1); }); - it('adds HTML #view-details to #settings-viewmode', function () { + it('adds HTML #viewmode-details to #viewmode-settings', function () { this.applyFn(); - assert.lengthOf($('#settings-viewmode > #view-details'), 1); + assert.lengthOf($('#viewmode-settings > #viewmode-details'), 1); }); - it('adds HTML #view-grid to #settings-viewmode', function () { + it('adds HTML #viewmode-grid to #viewmode-settings', function () { this.applyFn(); - assert.lengthOf($('#settings-viewmode > #view-grid'), 1); + assert.lengthOf($('#viewmode-settings > #viewmode-grid'), 1); }); - it('adds HTML #view-icons to #settings-viewmode', function () { + it('adds HTML #viewmode-icons to #viewmode-settings', function () { this.applyFn(); - assert.lengthOf($('#settings-viewmode > #view-icons'), 1); + assert.lengthOf($('#viewmode-settings > #viewmode-icons'), 1); }); - it('adds HTML #view-size to #settings-viewmode', function () { + it('adds HTML #viewmode-size to #viewmode-settings', function () { this.applyFn(); - assert.lengthOf($('#settings-viewmode > #view-size'), 1); + assert.lengthOf($('#viewmode-settings > #viewmode-size'), 1); }); - it('does not add HTML #view-details, #view-grid, #view-icons when only one mode', function () { + it('does not add HTML #viewmode-details, #viewmode-grid, #viewmode-icons when only one mode', function () { this.xView.getModes.returns(['details']); this.applyFn(); - assert.lengthOf($('#view-details'), 0); - assert.lengthOf($('#view-grid'), 0); - assert.lengthOf($('#view-icons'), 0); + assert.lengthOf($('#viewmode-details'), 0); + assert.lengthOf($('#viewmode-grid'), 0); + assert.lengthOf($('#viewmode-icons'), 0); }); - it('does not add HTML #view-size when only one size', function () { + it('does not add HTML #viewmode-size when only one size', function () { this.xView.getSizes.returns([20]); this.applyFn(); - assert.lengthOf($('#view-size'), 0); + assert.lengthOf($('#viewmode-size'), 0); }); }); describe('works', function () { - it('clicking #view-details triggers view.setMode(\'details\')', function () { + it('clicking #viewmode-details triggers view.setMode(\'details\')', function () { this.xView.getModes.returns(['details', 'grid', 'icons']); this.applyFn(); - $('#view-details').trigger('click'); + $('#viewmode-details').trigger('click'); assert.isTrue(this.xView.setMode.calledOnce); assert.deepEqual(this.xView.setMode.lastCall.args, ['details']); }); - it('clicking #view-grid triggers view.setMode(\'grid\')', function () { + it('clicking #viewmode-grid triggers view.setMode(\'grid\')', function () { this.xView.getModes.returns(['details', 'grid', 'icons']); this.applyFn(); - $('#view-grid').trigger('click'); + $('#viewmode-grid').trigger('click'); assert.isTrue(this.xView.setMode.calledOnce); assert.deepEqual(this.xView.setMode.lastCall.args, ['grid']); }); - it('clicking #view-icons triggers view.setMode(\'icons\')', function () { + it('clicking #viewmode-icons triggers view.setMode(\'icons\')', function () { this.xView.getModes.returns(['details', 'grid', 'icons']); this.applyFn(); - $('#view-icons').trigger('click'); + $('#viewmode-icons').trigger('click'); assert.isTrue(this.xView.setMode.calledOnce); assert.deepEqual(this.xView.setMode.lastCall.args, ['icons']); }); - it('changing #view-size triggers view.setSize(*)', function () { + it('changing #viewmode-size triggers view.setSize(*)', function () { this.xView.getSizes.returns([20, 40, 60]); this.applyFn(); - $('#view-size').val(0).trigger('change'); + $('#viewmode-size').val(0).trigger('change'); assert.isTrue(this.xView.setSize.calledOnce); assert.deepEqual(this.xView.setSize.lastCall.args, [20]); - $('#view-size').val(1).trigger('change'); + $('#viewmode-size').val(1).trigger('change'); assert.isTrue(this.xView.setSize.calledTwice); assert.deepEqual(this.xView.setSize.lastCall.args, [40]); - $('#view-size').val(2).trigger('change'); + $('#viewmode-size').val(2).trigger('change'); assert.isTrue(this.xView.setSize.calledThrice); assert.deepEqual(this.xView.setSize.lastCall.args, [60]); }); - it('inputing #view-size triggers view.setSize(*)', function () { + it('inputing #viewmode-size triggers view.setSize(*)', function () { this.xView.getSizes.returns([20, 40, 60]); this.applyFn(); - $('#view-size').val(0).trigger('input'); + $('#viewmode-size').val(0).trigger('input'); assert.isTrue(this.xView.setSize.calledOnce); assert.deepEqual(this.xView.setSize.lastCall.args, [20]); - $('#view-size').val(1).trigger('input'); + $('#viewmode-size').val(1).trigger('input'); assert.isTrue(this.xView.setSize.calledTwice); assert.deepEqual(this.xView.setSize.lastCall.args, [40]); - $('#view-size').val(2).trigger('input'); + $('#viewmode-size').val(2).trigger('input'); assert.isTrue(this.xView.setSize.calledThrice); assert.deepEqual(this.xView.setSize.lastCall.args, [60]); });