mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2025-05-24 12:07:10 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor code.

Browse source
This commit is contained in:
Lars Jung 2015-05-10 13:05:39 +02:00
parent 7503d79c06
commit 1d7457a4a2
3 changed files with 49 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/_h5ai/client/js/inc/view/viewmode.js
View file

@ -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 =
'<div id="settings-viewmode" class="block"><h1 class="l10n-view">View</h1></div>';
'<div id="viewmode-settings" class="block"><h1 class="l10n-view">View</h1></div>';
var tplMode =
'<div id="view-[MODE]" class="button view">' +
'<img src="' + resource.image('view-[MODE]') + '" alt="view-[MODE]"/>' +
'<div id="viewmode-[MODE]" class="button mode">' +
'<img src="' + resource.image('view-[MODE]') + '" alt="viewmode-[MODE]"/>' +
'</div>';
var tplSize =
'<input id="view-size" type="range" min="0" max="0" value="0">';
'<input id="viewmode-size" type="range" min="0" max="0" value="0">';
var tplToggle =
'<div id="viewmode-toggle" class="tool">' +
'<img alt="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);
}
}

4
test/tests/integration/view.js
View file

@ -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 () {

60
test/tests/unit/view/viewmode.js
View file

@ -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]);
});