complete refactor of the sidebar behaviour javascript RES-754
Now all toggling of the sidebar and the related menus is done through the same click handler. HTML has been unified. All sidebar related content is now in a single include file instead of several. Icons for the site tools user tools and trace have been added. The CSS for the whole sidebar still has to be refactored.
This commit is contained in:
Andreas Gohr
parent
285c4f96a7
commit
6c61749bf2
13 changed files with 273 additions and 368 deletions
|
|
@ -1,153 +0,0 @@
|
|||
( function( $, spc ) {
|
||||
|
||||
var addToggleLink = function($elem){
|
||||
$elem.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
|
||||
},
|
||||
|
||||
setContentMinHeight = function(){
|
||||
var $sidebar = $('.page-wrapper').find('> .tools').find('.col-xs-12');
|
||||
|
||||
if($sidebar.length == 1){
|
||||
var h = $sidebar.height(),
|
||||
num = parseFloat(h);
|
||||
if(!isNaN(num)){
|
||||
$('#dokuwiki__content').css('minHeight',num + 100);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
setWideContent = function(){
|
||||
var $openTogglers = $('.main-sidebar').find('.opened').find('.toggler');
|
||||
$openTogglers.trigger( "click" );
|
||||
$('body').addClass('wide-content');
|
||||
},
|
||||
setDefaultContent= function(){
|
||||
$('body').removeClass('wide-content');
|
||||
|
||||
},
|
||||
toggleState = function($toggler){
|
||||
$toggler.toggleClass('closed');
|
||||
$toggler.toggleClass('opened');
|
||||
},
|
||||
focusFirstSubLink = function($elem, is2nd){
|
||||
|
||||
var $foc = (is2nd) ? $elem.find('a')[1] : $elem.find('a')[0];
|
||||
|
||||
if($foc){
|
||||
$foc.focus();
|
||||
}
|
||||
return $foc;
|
||||
},
|
||||
focusLastSubLink = function($elem){
|
||||
|
||||
var $foc = $elem.find('a:last-child'),
|
||||
height = $elem.find('p').scrollHeight;
|
||||
|
||||
if($foc){
|
||||
$foc.focus();
|
||||
}
|
||||
$elem.scrollTop(height);
|
||||
return $foc;
|
||||
},
|
||||
|
||||
mainMenu = function(){
|
||||
var $menu = $('.nav-main').find('> ul');
|
||||
|
||||
try{
|
||||
if($menu.length > 0){
|
||||
var $toggler = $menu.find('> li.level1 > .li'),
|
||||
$submenu = $menu.find('> li.level1 > ul');
|
||||
|
||||
if($toggler.length > 0 && $submenu.length > 0){
|
||||
|
||||
$toggler.addClass('closed');
|
||||
addToggleLink($toggler);
|
||||
$toggler.each(function( index ) {
|
||||
$(this).on( "click", function(e) {
|
||||
e.preventDefault();
|
||||
var $this = $(this);
|
||||
toggleState($this);
|
||||
if($this.hasClass('opened')){
|
||||
var $foc = focusFirstSubLink($this.closest('li.level1'), true);
|
||||
}
|
||||
if($('body').hasClass('wide-content')){
|
||||
setDefaultContent();
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//FIXME: store current nav state with local storage
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}catch(err){
|
||||
|
||||
}
|
||||
},
|
||||
toggleMainContent = function(){
|
||||
var $toggler = $('.togglelink.page_main-content').find('a');
|
||||
$toggler.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
var $link = $(this);
|
||||
|
||||
if($('body').hasClass('wide-content')){
|
||||
setDefaultContent();
|
||||
}else{
|
||||
setWideContent();
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
sideMenu = function(){
|
||||
var $menus = $('.tools').find('.toggle-menu');
|
||||
|
||||
|
||||
try{
|
||||
$menus.each(function( ) {
|
||||
var $menu = $(this);
|
||||
if($menu.length > 0){
|
||||
var $toggler = $menu.find('h6'),
|
||||
$submenu = $menu.find('nav > ul, nav > div');
|
||||
if($toggler.length > 0 && $submenu.length > 0) {
|
||||
|
||||
$toggler.addClass('closed');
|
||||
addToggleLink($toggler);
|
||||
$toggler.each(function (index) {
|
||||
$(this).on("click", function (e) {
|
||||
e.preventDefault();
|
||||
var $this = $(this);
|
||||
toggleState($this);
|
||||
if ($this.hasClass('opened')) {
|
||||
var $elem = ($submenu.is('div')) ? focusLastSubLink($submenu): focusFirstSubLink($submenu,false);
|
||||
}
|
||||
if($('body').hasClass('wide-content')){
|
||||
setDefaultContent();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//FIXME: store current nav state with local storage
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}catch(err){
|
||||
//console.log('err');
|
||||
}
|
||||
};
|
||||
|
||||
$(function(){
|
||||
mainMenu();
|
||||
sideMenu();
|
||||
toggleMainContent();
|
||||
setContentMinHeight();
|
||||
});
|
||||
|
||||
} )( jQuery, spc );
|
||||
|
||||
171
js/sidebar.js
171
js/sidebar.js
|
|
@ -1,54 +1,143 @@
|
|||
/**
|
||||
* Initialize the sidebar to have a toggleable menu system with icon support
|
||||
* Sets up the sidebar behaviour
|
||||
*/
|
||||
jQuery(function () {
|
||||
const $nav = jQuery('#dokuwiki__aside').find('nav.nav-main');
|
||||
const $nav = jQuery('#dokuwiki__aside');
|
||||
if (!$nav.length) return;
|
||||
|
||||
const ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
|
||||
const $elements = $nav.find(ELEMENT);
|
||||
$elements.each(function () {
|
||||
const $me = jQuery(this);
|
||||
/**
|
||||
* closes sidebar
|
||||
*/
|
||||
const setWideContent = function () {
|
||||
$nav.find('div.nav-panel').hide(); // close all panels
|
||||
jQuery('body').addClass('wide-content');
|
||||
};
|
||||
|
||||
// prepare text and the optional icon
|
||||
const data = $me.text().split('@', 2);
|
||||
const text = data[0].trim();
|
||||
const $icon = jQuery('<span>')
|
||||
.text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
|
||||
.wrapInner('<strong>');
|
||||
if (data[1]) {
|
||||
const src = data[1].trim();
|
||||
$icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
|
||||
}
|
||||
/**
|
||||
* opens the sidebar
|
||||
*/
|
||||
const setDefaultContent = function () {
|
||||
jQuery('body').removeClass('wide-content');
|
||||
|
||||
// make the new toggler
|
||||
const $toggler = jQuery('<h6>')
|
||||
.addClass('navi-toggle')
|
||||
.text(text)
|
||||
.prepend($icon)
|
||||
;
|
||||
};
|
||||
|
||||
// wrap all following sibling til the next element in a wrapper
|
||||
const $wrap = jQuery('<div>').addClass('navi-pane');
|
||||
const $sibs = $me.nextAll();
|
||||
for (let i = 0; i < $sibs.length; i++) {
|
||||
const $sib = jQuery($sibs[i]);
|
||||
if($sib.is(ELEMENT)) break;
|
||||
$sib.detach().appendTo($wrap);
|
||||
}
|
||||
$wrap.hide();
|
||||
$wrap.insertAfter($me);
|
||||
/**
|
||||
* Accessibility helper, focuses the first link witih the given element
|
||||
*
|
||||
* @param {jQuery} $elem
|
||||
*/
|
||||
const focusFirstSubLink = function ($elem) {
|
||||
$elem.find('a').first().focus();
|
||||
};
|
||||
|
||||
// replace element with toggler
|
||||
$me.replaceWith($toggler);
|
||||
|
||||
// add toggling the wrapper
|
||||
$toggler.click(function () {
|
||||
$wrap.dw_toggle(undefined, function () {
|
||||
$me.toggleClass('open');
|
||||
});
|
||||
/**
|
||||
* Toggle a navigation panel
|
||||
*
|
||||
* @param {jQuery} $toggler The h6 toggler
|
||||
*/
|
||||
const toggleNav = function ($toggler) {
|
||||
const $panel = $toggler.next('div.nav-panel');
|
||||
const isOpen = $panel.is(':visible');
|
||||
// open sidebar on interaction
|
||||
setDefaultContent();
|
||||
// toggle the panel, focus first link after opening
|
||||
$panel.dw_toggle(!isOpen, function () {
|
||||
if (!isOpen) {
|
||||
focusFirstSubLink($panel);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
});
|
||||
/**
|
||||
* Initialize the content navigation
|
||||
*
|
||||
* It mangles the sidebar content and handles inline Icon configuration
|
||||
*/
|
||||
const initContentNav = function () {
|
||||
const $main = $nav.find('nav.nav-main');
|
||||
if (!$main.length) return;
|
||||
|
||||
const ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
|
||||
const $elements = $main.find(ELEMENT);
|
||||
$elements.each(function () {
|
||||
const $me = jQuery(this);
|
||||
|
||||
// prepare text and the optional icon
|
||||
const data = $me.text().split('@', 2);
|
||||
const text = data[0].trim();
|
||||
const $icon = jQuery('<span>')
|
||||
.text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
|
||||
.wrapInner('<strong>');
|
||||
if (data[1]) {
|
||||
const src = data[1].trim();
|
||||
$icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
|
||||
}
|
||||
|
||||
// make the new toggler
|
||||
const $toggler = jQuery('<h6>')
|
||||
.attr('role', 'heading')
|
||||
.attr('aria-level', '2')
|
||||
.text(text)
|
||||
.prepend($icon)
|
||||
;
|
||||
|
||||
// wrap all following siblings til the next element in a wrapper
|
||||
const $wrap = jQuery('<div>')
|
||||
.addClass('nav-panel');
|
||||
const $sibs = $me.nextAll();
|
||||
for (let i = 0; i < $sibs.length; i++) {
|
||||
const $sib = jQuery($sibs[i]);
|
||||
if ($sib.is(ELEMENT)) break;
|
||||
$sib.detach().appendTo($wrap);
|
||||
}
|
||||
$wrap.insertAfter($me);
|
||||
|
||||
// replace element with toggler
|
||||
$me.replaceWith($toggler);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize the open/close toggling of menu entries
|
||||
*/
|
||||
const initMenuHandling = function () {
|
||||
$nav.on('click', 'h6', function () {
|
||||
toggleNav(jQuery(this));
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Make sure the content area is always as high as the sidebar
|
||||
*/
|
||||
const initContentMinHeight = function () {
|
||||
const $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
|
||||
if ($sidebar.length == 1) {
|
||||
const num = parseFloat($sidebar.height());
|
||||
if (!isNaN(num)) {
|
||||
jQuery('#dokuwiki__content').css('minHeight', num + 100);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize the sidebar handle behaviour
|
||||
*/
|
||||
const initSidebarToggling = function () {
|
||||
const $toggler = jQuery('.togglelink.page_main-content').find('a');
|
||||
$toggler.click(function (e) {
|
||||
e.preventDefault();
|
||||
if (jQuery('body').hasClass('wide-content')) {
|
||||
setDefaultContent();
|
||||
} else {
|
||||
setWideContent();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// main
|
||||
initContentNav();
|
||||
initSidebarToggling();
|
||||
initMenuHandling();
|
||||
initContentMinHeight();
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue