Merge branch 'sidebar' into live
* sidebar: fix problems with ini handling in svg dispatch added profile link to usertools in sidebar finally align the menu items correctly some more list adjustments for sidebar add level1 class to fake inpage lists adjusted language some style adjustments for the sidebar complete refactor of the sidebar behaviour javascript RES-754 style the fake icon use jQuery slector to define the elements directly embed SVGs for better styling very simple styling of the new sidebar behaviour. New sidebar JavaScript logic allow style.ini replacements in SVG dispatcher SVG Dispatch: allow for referencing material design icons add caching and fix <g> wrapping fixed content type header fixed auth check feat: add background-colors to SVG-dispatcher first go at a dispatcher to dynamically recolor SVGs
This commit is contained in:
Andreas Gohr
commit
248d08817b
20 changed files with 729 additions and 897 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 );
|
||||
|
||||
144
js/sidebar.js
Normal file
144
js/sidebar.js
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
/**
|
||||
* Sets up the sidebar behaviour
|
||||
*/
|
||||
jQuery(function () {
|
||||
const $nav = jQuery('#dokuwiki__aside');
|
||||
if (!$nav.length) return;
|
||||
|
||||
/**
|
||||
* closes sidebar
|
||||
*/
|
||||
const setWideContent = function () {
|
||||
$nav.find('div.nav-panel').hide(); // close all panels
|
||||
jQuery('body').addClass('wide-content');
|
||||
};
|
||||
|
||||
/**
|
||||
* opens the sidebar
|
||||
*/
|
||||
const setDefaultContent = function () {
|
||||
jQuery('body').removeClass('wide-content');
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Accessibility helper, focuses the first link witih the given element
|
||||
*
|
||||
* @param {jQuery} $elem
|
||||
*/
|
||||
const focusFirstSubLink = function ($elem) {
|
||||
$elem.find('a').first().focus();
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 class="ico">')
|
||||
.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)
|
||||
.wrapInner('<span class="lbl">')
|
||||
.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