mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2025-05-25 20:44:53 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update layout. Add flexible view sizes.

Browse source
This commit is contained in:
Lars Jung 2014-12-09 01:25:43 +01:00
parent bc7323b717
commit da309e8ee9
7 changed files with 75 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event'], function (_, $, allsettings, resource, store, event) {
var modes = ['details', 'grid', 'icons'];
var sizes = [16, 24, 32, 48, 64, 96, 128, 192, 256, 384];
var sizes = [16, 24, 32, 48, 64, 96, 128, 192, 256];
var settings = _.extend({}, {
modes: modes,
sizes: sizes
@ -15,6 +15,9 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
'</div>';
var sizeTemplate =
'<input id="view-size" type="range" min="0" max="0" value="0">';
var dynamicStyleTag = null;
sizes = settings.sizes.sort(function (a, b) { return a-b; });
function adjustSpacing() {
@ -22,6 +25,52 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
// kept here for later use
}
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) {
min = min || 4;
max = max || 2048;
return Math.min(max, Math.max(min, size));
}
function applyCssSizes(size) {
var dsize = cropSize(size, 16, 96);
var gsize = cropSize(size, 48, 192);
var isize = cropSize(size, 96);
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; }',
'#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-grid .item .label { line-height: ' + gsize + 'px !important; }',
'#view.view-grid .square { width: ' + gsize + 'px !important; }',
'#view.view-grid .square img { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
'#view.view-icons .item { width: ' + (isize*4/3) + 'px !important; }',
'#view.view-icons .landscape img { width: ' + isize + 'px !important; height: ' + isize + 'px !important; }',
'#view.view-icons .landscape .thumb { width: ' + (isize*4/3) + 'px !important; }'
];
applyCss(rules);
}
function update(mode, size) {
var $view = $('#view');
@ -43,15 +92,8 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
}
});
_.each(sizes, function (s) {
if (s === size) {
$view.addClass('size-' + s).show();
} else {
$view.removeClass('size-' + s);
}
});
$('#view-size').val(_.indexOf(_.intersection(sizes, settings.sizes), size));
applyCssSizes(size);
$('#view-size').val(_.indexOf(sizes, size));
adjustSpacing();
}