Extract sidebar.
This commit is contained in:
parent
faaf71cee9
commit
23eb8b4dc1
3 changed files with 60 additions and 30 deletions
|
@ -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');
|
||||
|
||||
|
|
55
src/_h5ai/client/js/inc/view/sidebar.js
Normal file
55
src/_h5ai/client/js/inc/view/sidebar.js
Normal 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();
|
||||
});
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue