Extract sidebar.

This commit is contained in:
Lars Jung 2014-09-03 19:13:21 +02:00
parent faaf71cee9
commit 23eb8b4dc1
3 changed files with 60 additions and 30 deletions

View file

@ -2,6 +2,7 @@ modulejs.define('main', ['_', 'core/event'], function (_, event) {
modulejs.require('view/ensure');
modulejs.require('view/items');
modulejs.require('view/sidebar');
modulejs.require('view/spacing');
modulejs.require('view/viewmode');

View file

@ -0,0 +1,55 @@
modulejs.define('view/sidebar', ['$', 'core/resource', 'core/store'], function ($, resource, store) {
var storekey = 'sidebarIsVisible';
var toggleTemplate =
'<li id="sidebar-toggle" class="view">' +
'<a href="#">' +
'<img src="' + resource.image('settings') + '" alt="settings"/>' +
'</a>' +
'</li>';
function update(toggle, animate) {
var $toggle = $('#sidebar-toggle');
var $sidebar = $('#sidebar');
var isVisible = store.get(storekey);
if (toggle) {
isVisible = !isVisible;
store.put(storekey, isVisible);
}
if (isVisible) {
$toggle.addClass('current');
} else {
$toggle.removeClass('current');
}
if (animate) {
$sidebar.stop().animate({
right: isVisible ? 0 : -$sidebar.outerWidth()-1
});
} else {
$sidebar.css({
right: store.get(storekey) ? 0 : -$sidebar.outerWidth()-1
});
}
}
function init() {
$(toggleTemplate)
.on('click', 'a', function (ev) {
update(true, true);
ev.preventDefault();
})
.appendTo('#navbar');
update(false, false);
}
init();
});

View file

@ -7,14 +7,6 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
sizes: sizes
}, allsettings.view);
var storekey = 'viewmode';
var storekeyMenu = 'menuIsVisible';
var menuIsVisible = false;
var sidebarToggleTemplate =
'<li id="menu-toggle" class="view">' +
'<a href="#">' +
'<img src="' + resource.image('settings') + '" alt="settings"/>' +
'</a>' +
'</li>';
var modeTemplate =
'<div id="view-[MODE]" class="view">' +
'<a href="#">' +
@ -70,24 +62,10 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
function init() {
var $sidebar = $('#sidebar');
var $settings = $('#settings');
var $viewBlock = $('<div class="block"><h1 class="l10n-view">View</h1></div>');
var max;
$(sidebarToggleTemplate)
.on('click', 'a', function (event) {
var menuIsVisible = store.get(storekeyMenu);
menuIsVisible = !menuIsVisible;
store.put(storekeyMenu, menuIsVisible);
$sidebar.stop().animate({
right: menuIsVisible ? 0 : -$sidebar.outerWidth()-1
});
event.preventDefault();
})
.appendTo('#navbar');
settings.modes = _.intersection(settings.modes, modes);
if (settings.modes.length > 1) {
@ -95,10 +73,10 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
if (_.contains(settings.modes, mode)) {
$(modeTemplate.replace(/\[MODE\]/g, mode))
.appendTo($viewBlock)
.on('click', 'a', function (event) {
.on('click', 'a', function (ev) {
update(mode);
event.preventDefault();
ev.preventDefault();
});
}
});
@ -108,9 +86,9 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
max = settings.sizes.length-1;
$(sizeTemplate)
.prop('max', max).attr('max', max)
.on('input change', function (event) {
.on('input change', function (ev) {
update(null, settings.sizes[parseInt(event.target.value, 10)]);
update(null, settings.sizes[parseInt(ev.target.value, 10)]);
})
.appendTo($viewBlock);
}
@ -119,10 +97,6 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
update();
$sidebar.css({
right: store.get(storekeyMenu) ? 0 : -$sidebar.outerWidth()-1
});
event.sub('location.changed', adjustSpacing);
$(window).on('resize', adjustSpacing);
}