Adds variable icon sizes.

This commit is contained in:
Lars Jung 2013-08-28 17:12:30 +02:00
parent c2f5c46451
commit aa725f11f8
9 changed files with 458 additions and 124 deletions

View file

@ -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);