mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-25 20:44:53 -04:00
Adds variable icon sizes.
This commit is contained in:
parent
c2f5c46451
commit
aa725f11f8
9 changed files with 458 additions and 124 deletions
|
@ -1,10 +1,12 @@
|
|||
|
||||
modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event'], function (_, $, allsettings, resource, store, event) {
|
||||
|
||||
var modes = ['details', 'list', 'grid', 'icons'],
|
||||
var modes = ['details', 'grid', 'icons'],
|
||||
sizes = [16, 24, 32, 48, 64, 96],
|
||||
|
||||
settings = _.extend({}, {
|
||||
modes: modes
|
||||
modes: modes,
|
||||
sizes: sizes
|
||||
}, allsettings.view),
|
||||
|
||||
storekey = 'viewmode',
|
||||
|
@ -16,6 +18,32 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
|||
'</a>' +
|
||||
'</li>',
|
||||
|
||||
sizeTemplate = '<li id="view-[SIZE]" class="view">' +
|
||||
'<a href="#">' +
|
||||
'<img src="' + resource.image('size') + '" alt="size"/>' +
|
||||
'<span>[SIZE]</span>' +
|
||||
'</a>' +
|
||||
'</li>',
|
||||
|
||||
// sizeSelectorTemplate = '<li id="sizeSelector" class="view">' +
|
||||
// '<span class="element">' +
|
||||
// '<img src="' + resource.image('size') + '" alt="size"/>' +
|
||||
// '<span class="size-current">small</span>' +
|
||||
// '</span>' +
|
||||
// '<span class="sizeOptions hidden"><ul/></span>' +
|
||||
// '</li>',
|
||||
// sizeOptionTemplate = '<li class="sizeOption"/>',
|
||||
|
||||
// viewSelectorTemplate = '<li id="viewSelector" class="view">' +
|
||||
// '<span class="element">' +
|
||||
// '<img src="' + resource.image('view-details') + '" alt="view-details"/>' +
|
||||
// '<span class="view-current">details</span>' +
|
||||
// '</span>' +
|
||||
// '<span class="viewOptions hidden"><ul/></span>' +
|
||||
// '</li>',
|
||||
// viewOptionTemplate = '<li class="viewOption"/>',
|
||||
|
||||
|
||||
adjustSpacing = function () {
|
||||
|
||||
var contentWidth = $('#content').width(),
|
||||
|
@ -25,20 +53,40 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
|||
$view.width(Math.floor(contentWidth / itemWidth) * itemWidth);
|
||||
},
|
||||
|
||||
update = function (viewmode) {
|
||||
updateMode = function (mode) {
|
||||
|
||||
var $view = $('#view');
|
||||
|
||||
viewmode = _.indexOf(settings.modes, viewmode) >= 0 ? viewmode : settings.modes[0];
|
||||
store.put(storekey, viewmode);
|
||||
mode = _.contains(settings.modes, mode) ? mode : settings.modes[0];
|
||||
store.put(storekey, mode);
|
||||
|
||||
_.each(modes, function (mode) {
|
||||
if (mode === viewmode) {
|
||||
$('#view-' + mode).addClass('current');
|
||||
$view.addClass('view-' + mode).show();
|
||||
_.each(modes, function (m) {
|
||||
if (m === mode) {
|
||||
$('#view-' + m).addClass('current');
|
||||
$view.addClass('view-' + m).show();
|
||||
} else {
|
||||
$('#view-' + mode).removeClass('current');
|
||||
$view.removeClass('view-' + mode);
|
||||
$('#view-' + m).removeClass('current');
|
||||
$view.removeClass('view-' + m);
|
||||
}
|
||||
});
|
||||
|
||||
adjustSpacing();
|
||||
},
|
||||
|
||||
updateSize = function (size) {
|
||||
|
||||
var $view = $('#view');
|
||||
|
||||
size = _.contains(settings.sizes, size) ? size : settings.sizes[0];
|
||||
// store.put(storekey, viewmode);
|
||||
|
||||
_.each(sizes, function (s) {
|
||||
if (s === size) {
|
||||
$('#view-' + s).addClass('current');
|
||||
$view.addClass('size-' + s).show();
|
||||
} else {
|
||||
$('#view-' + s).removeClass('current');
|
||||
$view.removeClass('size-' + s);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -51,20 +99,41 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
|||
|
||||
settings.modes = _.intersection(settings.modes, modes);
|
||||
|
||||
if (settings.modes.length > 1) {
|
||||
_.each(modes.reverse(), function (mode) {
|
||||
if (_.indexOf(settings.modes, mode) >= 0) {
|
||||
if (settings.modes.length) {
|
||||
_.each(modes.slice(0).reverse(), function (mode) {
|
||||
if (_.contains(settings.modes, mode)) {
|
||||
$(template.replace(/\[MODE\]/g, mode))
|
||||
.appendTo($navbar)
|
||||
.on('click', 'a', function (event) {
|
||||
update(mode);
|
||||
updateMode(mode);
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
update(store.get(storekey));
|
||||
|
||||
if (settings.sizes.length) {
|
||||
_.each(sizes.slice(0).reverse(), function (size) {
|
||||
if (_.contains(settings.sizes, size)) {
|
||||
$(sizeTemplate.replace(/\[SIZE\]/g, size))
|
||||
.appendTo($navbar)
|
||||
.on('click', 'a', function (event) {
|
||||
updateSize(size);
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// $(sizeSelectorTemplate)
|
||||
// .appendTo($navbar);
|
||||
|
||||
// $(viewSelectorTemplate)
|
||||
// .appendTo($navbar);
|
||||
|
||||
updateMode(store.get(storekey));
|
||||
updateSize(sizes[0]);
|
||||
|
||||
event.sub('location.changed', adjustSpacing);
|
||||
$(window).on('resize', adjustSpacing);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue