mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2024-09-19 20:28:47 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update viewmode.

Browse source
This commit is contained in:
Lars Jung 2015-04-29 16:23:24 +02:00
parent c3803b2e84
commit a5d04198dc
2 changed files with 41 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,54 +13,45 @@ modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'c
var sizeTemplate =
'<input id="view-size" type="range" min="0" max="0" value="0">';
var sortedSizes = settings.sizes.sort(function (a, b) { return a - b; });
var dynamicStyleTag = null;
function applyCss(rules) {
if (dynamicStyleTag) {
document.head.removeChild(dynamicStyleTag);
}
dynamicStyleTag = document.createElement('style');
dynamicStyleTag.appendChild(document.createTextNode('')); // fix webkit
document.head.appendChild(dynamicStyleTag);
_.each(rules, function (rule, i) {
dynamicStyleTag.sheet.insertRule(rule, i);
});
}
function cropSize(size, min, max) {
return Math.min(max, Math.max(min, size));
}
function applyCssSizes(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 .item .label { line-height: ' + (dsize + 14) + 'px !important; }',
'#view.view-details .item .date { line-height: ' + (dsize + 14) + 'px !important; }',
'#view.view-details .item .size { line-height: ' + (dsize + 14) + 'px !important; }',
'#view.view-details .square { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
'#view.view-details .square img { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
'#view.view-details .label { margin: 0 246px 0 ' + (dsize + 32) + 'px !important; }',
'#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 .item .label { line-height: ' + gsize + 'px !important; }',
'#view.view-grid .square { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
'#view.view-grid .square img { width: ' + gsize + 'px !important; height: ' + gsize + '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 .item { width: ' + ilsize + 'px !important; }',
'#view.view-icons .landscape { width: ' + ilsize + 'px !important; height: ' + isize + 'px !important; }',
'#view.view-icons .landscape img { width: ' + isize + 'px !important; height: ' + isize + 'px !important; }',
'#view.view-icons .landscape .thumb { width: ' + ilsize + '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; }'
];
applyCss(rules);
return rules.join('\n');
}
function addCssStyles() {
var styles = _.map(sortedSizes, function (size) { return createStyles(size); });
$('<style/>').text(styles.join('\n')).appendTo('head');
}
function update(mode, size) {
@ -75,15 +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).show();
content.$view.addClass('view-' + m);
} else {
$('#view-' + m).removeClass('active');
content.$view.removeClass('view-' + m);
}
});
applyCssSizes(size);
_.each(sortedSizes, function (s) {
if (s === size) {
content.$view.addClass('view-size-' + s);
} else {
content.$view.removeClass('view-size-' + s);
}
});
$('#view-size').val(_.indexOf(sortedSizes, size));
content.$view.show();
}
function addViewSettings() {
@ -123,6 +122,7 @@ modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'c
function init() {
addCssStyles();
addViewSettings();
update();
}

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

@ -122,6 +122,15 @@ describe('module \'' + ID + '\'', function () {
this.applyFn();
assert.lengthOf($('head > style'), styleTagCount + 1);
});
it('style contains possibly correct text', function () {
this.applyFn();
var text = $('head > style').eq(0).text();
assert.isTrue(text.indexOf('#view.view-details.view-size-') >= 0);
assert.isTrue(text.indexOf('#view.view-grid.view-size-') >= 0);
assert.isTrue(text.indexOf('#view.view-icons.view-size-') >= 0);
});
});
describe('works', function () {