mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-24 12:07:10 -04:00
Refactor view and viewmode.
This commit is contained in:
Lars Jung
parent
24319e1c49
commit
7503d79c06
5 changed files with 386 additions and 187 deletions
|
|
@ -1,8 +1,6 @@
|
|||
#view {
|
||||
@max-icon-size: 32px;
|
||||
|
||||
display: none;
|
||||
|
||||
a, a:active, a:visited {
|
||||
display: block;
|
||||
color: inherit;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 settings = _.extend({}, {
|
||||
modes: modes,
|
||||
sizes: [20, 40, 60, 80, 100, 150, 200, 250, 300, 350, 400]
|
||||
}, allsettings.view);
|
||||
var storekey = 'viewmode';
|
||||
var modeTemplate =
|
||||
var tplSettings =
|
||||
'<div id="settings-viewmode" 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>';
|
||||
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) {
|
||||
|
||||
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});
|
||||
function onChanged(mode, 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) {
|
||||
if (s === size) {
|
||||
view.$el.addClass('view-size-' + s);
|
||||
} else {
|
||||
view.$el.removeClass('view-size-' + s);
|
||||
}
|
||||
});
|
||||
$('#view-size').val(_.indexOf(sortedSizes, size));
|
||||
$('#view-size').val(_.indexOf(sizes, 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 max;
|
||||
var $viewBlock = $(tplSettings);
|
||||
|
||||
settings.modes = _.intersection(settings.modes, modes);
|
||||
|
||||
if (settings.modes.length > 1) {
|
||||
if (modes.length > 1) {
|
||||
_.each(modes, function (mode) {
|
||||
if (_.contains(settings.modes, mode)) {
|
||||
$(modeTemplate.replace(/\[MODE\]/g, mode))
|
||||
.appendTo($viewBlock)
|
||||
.on('click', function () { updateView(mode); });
|
||||
}
|
||||
$(tplMode.replace(/\[MODE\]/g, mode))
|
||||
.on('click', function () {
|
||||
|
||||
view.setMode(mode);
|
||||
})
|
||||
.appendTo($viewBlock);
|
||||
});
|
||||
}
|
||||
|
||||
if (settings.sizes.length > 1) {
|
||||
max = settings.sizes.length - 1;
|
||||
$(sizeTemplate)
|
||||
if (sizes.length > 1) {
|
||||
var max = sizes.length - 1;
|
||||
$(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();
|
||||
addViewSettings();
|
||||
updateView();
|
||||
addSettings();
|
||||
addToggle();
|
||||
onChanged(view.getMode(), view.getSize());
|
||||
|
||||
event.sub('view.mode.changed', onChanged);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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.xStore.put.reset();
|
||||
this.xView.getModes.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.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.xView.getModes.returns(['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.isFalse($('#view').hasClass('view-grid'));
|
||||
assert.isFalse($('#view').hasClass('view-icons'));
|
||||
assert.isTrue(this.xView.setMode.calledOnce);
|
||||
assert.deepEqual(this.xView.setMode.lastCall.args, ['details']);
|
||||
});
|
||||
|
||||
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($('#view').hasClass('view-grid'));
|
||||
assert.isFalse($('#view').hasClass('view-icons'));
|
||||
assert.isTrue(this.xView.setMode.calledOnce);
|
||||
assert.deepEqual(this.xView.setMode.lastCall.args, ['grid']);
|
||||
});
|
||||
|
||||
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.isFalse($('#view').hasClass('view-grid'));
|
||||
assert.isTrue($('#view').hasClass('view-icons'));
|
||||
assert.isTrue(this.xView.setMode.calledOnce);
|
||||
assert.deepEqual(this.xView.setMode.lastCall.args, ['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.isFalse($('#view').hasClass('view-size-40'), 40);
|
||||
assert.isFalse($('#view').hasClass('view-size-60'), 60);
|
||||
assert.isTrue(this.xView.setSize.calledOnce);
|
||||
assert.deepEqual(this.xView.setSize.lastCall.args, [20]);
|
||||
|
||||
$('#view-size').val(1).trigger('change');
|
||||
assert.isFalse($('#view').hasClass('view-size-20'), 20);
|
||||
assert.isTrue($('#view').hasClass('view-size-40'), 40);
|
||||
assert.isFalse($('#view').hasClass('view-size-60'), 60);
|
||||
assert.isTrue(this.xView.setSize.calledTwice);
|
||||
assert.deepEqual(this.xView.setSize.lastCall.args, [40]);
|
||||
|
||||
$('#view-size').val(2).trigger('change');
|
||||
assert.isFalse($('#view').hasClass('view-size-20'), 20);
|
||||
assert.isFalse($('#view').hasClass('view-size-40'), 40);
|
||||
assert.isTrue($('#view').hasClass('view-size-60'), 60);
|
||||
assert.isTrue(this.xView.setSize.calledThrice);
|
||||
assert.deepEqual(this.xView.setSize.lastCall.args, [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.isFalse($('#view').hasClass('view-size-40'), 40);
|
||||
assert.isFalse($('#view').hasClass('view-size-60'), 60);
|
||||
assert.isTrue(this.xView.setSize.calledOnce);
|
||||
assert.deepEqual(this.xView.setSize.lastCall.args, [20]);
|
||||
|
||||
$('#view-size').val(1).trigger('input');
|
||||
assert.isFalse($('#view').hasClass('view-size-20'), 20);
|
||||
assert.isTrue($('#view').hasClass('view-size-40'), 40);
|
||||
assert.isFalse($('#view').hasClass('view-size-60'), 60);
|
||||
assert.isTrue(this.xView.setSize.calledTwice);
|
||||
assert.deepEqual(this.xView.setSize.lastCall.args, [40]);
|
||||
|
||||
$('#view-size').val(2).trigger('input');
|
||||
assert.isFalse($('#view').hasClass('view-size-20'), 20);
|
||||
assert.isFalse($('#view').hasClass('view-size-40'), 40);
|
||||
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'));
|
||||
assert.isTrue(this.xView.setSize.calledThrice);
|
||||
assert.deepEqual(this.xView.setSize.lastCall.args, [60]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue