mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-25 20:44:53 -04:00
106 lines
3.3 KiB
JavaScript
106 lines
3.3 KiB
JavaScript
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 settings = _.extend({}, {
|
|
modes: modes,
|
|
sizes: sizes
|
|
}, allsettings.view);
|
|
var storekey = 'viewmode';
|
|
var modeTemplate =
|
|
'<div id="view-[MODE]" class="view">' +
|
|
'<a href="#">' +
|
|
'<img src="' + resource.image('view-[MODE]') + '" alt="view-[MODE]"/>' +
|
|
'</a>' +
|
|
'</div>';
|
|
var sizeTemplate =
|
|
'<input id="view-size" type="range" min="0" max="0" value="0">';
|
|
|
|
|
|
function adjustSpacing() {
|
|
|
|
var contentWidth = $('#content').width();
|
|
var $view = $('#view');
|
|
var itemWidth = ($view.hasClass('view-icons') || $view.hasClass('view-grid')) ? ($view.find('.item').eq(0).outerWidth(true) || 1) : 1;
|
|
|
|
$view.width(Math.floor(contentWidth / itemWidth) * itemWidth);
|
|
}
|
|
|
|
function update(mode, size) {
|
|
|
|
var $view = $('#view');
|
|
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(modes, function (m) {
|
|
if (m === mode) {
|
|
$('#view-' + m).addClass('current');
|
|
$view.addClass('view-' + m).show();
|
|
} else {
|
|
$('#view-' + m).removeClass('current');
|
|
$view.removeClass('view-' + m);
|
|
}
|
|
});
|
|
|
|
_.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));
|
|
|
|
adjustSpacing();
|
|
}
|
|
|
|
function init() {
|
|
|
|
var $settings = $('#settings');
|
|
var $viewBlock = $('<div class="block"><h1 class="l10n-view">View</h1></div>');
|
|
var max;
|
|
|
|
settings.modes = _.intersection(settings.modes, modes);
|
|
|
|
if (settings.modes.length > 1) {
|
|
_.each(modes, function (mode) {
|
|
if (_.contains(settings.modes, mode)) {
|
|
$(modeTemplate.replace(/\[MODE\]/g, mode))
|
|
.appendTo($viewBlock)
|
|
.on('click', 'a', function (ev) {
|
|
|
|
update(mode);
|
|
ev.preventDefault();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
if (settings.sizes.length > 1) {
|
|
max = settings.sizes.length-1;
|
|
$(sizeTemplate)
|
|
.prop('max', max).attr('max', max)
|
|
.on('input change', function (ev) {
|
|
|
|
update(null, settings.sizes[parseInt(ev.target.value, 10)]);
|
|
})
|
|
.appendTo($viewBlock);
|
|
}
|
|
|
|
$viewBlock.appendTo($settings);
|
|
|
|
update();
|
|
|
|
event.sub('location.changed', adjustSpacing);
|
|
$(window).on('resize', adjustSpacing);
|
|
}
|
|
|
|
|
|
init();
|
|
});
|