EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SPR-840: debug sidebar script IE10, styling for mobile menu

Browse source 
debug background-color: qc
This commit is contained in:
Jana Deutschländer 2017-03-02 16:45:22 +01:00
commit b10c27f3f2
6 changed files with 208 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

65
css/area_main-sidebar-nav.less
View file

@ -108,28 +108,62 @@
#dokuwiki__aside { #dokuwiki__aside {
display: none; display: none;
} }
// show when toggled // show when toggled
#dokuwiki__aside.show { body.show-mobile-sidebar {
display: block;
position: absolute; #dokuwiki__aside {
left: 0; display: block;
z-index: 200; // above all
position: absolute;
left: 1.25rem;//left margin of content container
z-index: 200; // above all
box-shadow: @box-shadow-right-bottom;
min-width: 45%;
max-width: 90%;
height: auto;
&:after{
content: "";
position: absolute;
top: 0;
left:0;
bottom:0;
right:0;
width: 100%;
height: 100%;
background: @ini_background;
background: -webkit-linear-gradient(left, @ini_background, @color-content-bg);
background: linear-gradient(left, @ini_background, @color-content-bg);
z-index: 0;
}
> nav{
position: relative;
//display: block;
z-index: 2;
&:first-child{
margin-top: 1.2rem;
}
}
a.nav {
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
.nav-panel,
a.nav{
padding-right: .8em;
}
}
border-right: @ini_border 1px solid;
box-shadow: @box-shadow;;
max-width: 100%;
min-width: 45%;
height: 100%;
background-color: @ini_background;
} }
} }
// FIXME check if the stuff below is still relevant // FIXME check if the stuff below is still relevant
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
@ -158,7 +192,6 @@
} }
} }
} }
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */

5
css/area_nav-breadcrumb.less
View file

@ -151,7 +151,10 @@
right: 0; right: 0;
width: auto; width: auto;
border: 0 none; border: 0 none;
background: @color-site-bg; background: @background_page-header;
background: -webkit-linear-gradient(top, @background_page-header, @color-content-bg);
background: linear-gradient(top, @background_page-header, @color-content-bg);
box-shadow: @box-shadow-bottom;
z-index: 2000; z-index: 2000;
#plugin__qc__out{ #plugin__qc__out{

2
css/base.less
View file

@ -34,6 +34,8 @@
@box-shadow-offset: __box_shadow_offset__; @box-shadow-offset: __box_shadow_offset__;
@box-shadow: __box_shadow__; @box-shadow: __box_shadow__;
@box-shadow-colored: __box_shadow_colored__; @box-shadow-colored: __box_shadow_colored__;
@box-shadow-right-bottom:__box_shadow_right_bottom__;
@box-shadow-bottom: __box_shadow_bottom__;
@th_background: __background_alt__; @th_background: __background_alt__;

298
js/sidebar.js
View file

@ -2,163 +2,165 @@
* Sets up the sidebar behaviour * Sets up the sidebar behaviour
*/ */
jQuery(function () { jQuery(function () {
const $nav = jQuery('#dokuwiki__aside'); var $nav = jQuery('#dokuwiki__aside');
if (!$nav.length) return; if (!$nav.length) return;
/** /**
* closes sidebar * closes sidebar
*/ */
const setWideContent = function () { var setWideContent = function () {
$nav.find('div.nav-panel').hide(); // close all panels $nav.find('div.nav-panel').hide(); // close all panels
jQuery('body').addClass('wide-content'); jQuery('body').addClass('wide-content');
}; },
/** /**
* opens the sidebar * opens the sidebar
*/ */
const setDefaultContent = function () { setDefaultContent = function () {
jQuery('body').removeClass('wide-content'); jQuery('body').removeClass('wide-content');
}; };
/** /**
* Accessibility helper, focuses the first link witih the given element * Accessibility helper, focuses the first link witih the given element
* *
* @param {jQuery} $elem * @param {jQuery} $elem
*/ */
const focusFirstSubLink = function ($elem) { focusFirstSubLink = function ($elem) {
$elem.find('a').first().focus(); $elem.find('a').first().focus();
}; },
/** /**
* Toggle a navigation panel * Toggle a navigation panel
* *
* @param {jQuery} $toggler The h6 toggler * @param {jQuery} $toggler The h6 toggler
*/ */
const toggleNav = function ($toggler) { toggleNav = function ($toggler) {
const $panel = $toggler.next('div.nav-panel'); var $panel = $toggler.next('div.nav-panel');
const isOpen = $panel.is(':visible'); var isOpen = $panel.is(':visible');
// open sidebar on interaction // 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('<a>')
.addClass('nav')
.attr('href', '#')
.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', 'a.nav', function (e) {
toggleNav(jQuery(this));
e.preventDefault();
});
};
/**
* 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();
}
});
};
/**
* Show sidebar when accessing the search
*/
const initSearchToggling = function () {
jQuery('.toggleSearch').find('a').click(function (e) {
setDefaultContent(); setDefaultContent();
e.preventDefault(); // toggle the panel, focus first link after opening
jQuery('#qsearch__in').focus(); $panel.dw_toggle(!isOpen, function () {
}); if (!isOpen) {
focusFirstSubLink($panel);
}
});
},
}; /**
* Initialize the content navigation
*
* It mangles the sidebar content and handles inline Icon configuration
*/
initContentNav = function () {
var $main = $nav.find('nav.nav-main');
if (!$main.length) return;
/** var ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
* Open and close the sidebar in mobile view var $elements = $main.find(ELEMENT);
*/ $elements.each(function () {
const initMobileToggling = function () { var $me = jQuery(this),
jQuery('.menu-togglelink').find('a').click(function (e) {
e.preventDefault(); // prepare text and the optional icon
jQuery('#dokuwiki__aside').toggleClass('show'); data = $me.text().split('@', 2),
}); text = data[0].trim();
};
var $icon = jQuery('<span class="ico">')
.text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
.wrapInner('<strong>');
if (data[1]) {
var src = data[1].trim();
$icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
}
// make the new toggler
var $toggler = jQuery('<a>')
.addClass('nav')
.attr('href', '#')
.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
var $wrap = jQuery('<div>')
.addClass('nav-panel');
var $sibs = $me.nextAll();
for (var i = 0; i < $sibs.length; i++) {
var $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
*/
initMenuHandling = function () {
$nav.on('click', 'a.nav', function (e) {
toggleNav(jQuery(this));
e.preventDefault();
});
},
/**
* Make sure the content area is always as high as the sidebar
*/
initContentMinHeight = function () {
var $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
*/
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();
}
});
},
/**
* Show sidebar when accessing the search
*/
initSearchToggling = function () {
jQuery('.toggleSearch').find('a').click(function (e) {
setDefaultContent();
e.preventDefault();
jQuery('#qsearch__in').focus();
});
},
/**
* Open and close the sidebar in mobile view
*/
initMobileToggling = function () {
jQuery('.menu-togglelink').find('a').click(function (e) {
e.preventDefault();
var $body = jQuery('body');
$body.toggleClass('show-mobile-sidebar');
});
};
// main // main
initContentNav(); initContentNav();

1
script.js
View file

@ -6,3 +6,4 @@
/* DOKUWIKI:include js/meta-box.js */ /* DOKUWIKI:include js/meta-box.js */
/* DOKUWIKI:include js/sidebar.js */ /* DOKUWIKI:include js/sidebar.js */
/* DOKUWIKI:include js/breadcrumb.js */ /* DOKUWIKI:include js/breadcrumb.js */

2
style.ini
View file

@ -160,6 +160,8 @@ __nav_direct_background__ = "#FFF"
__nav_direct_color__ = "#286da8" __nav_direct_color__ = "#286da8"
__box_shadow_colored__ = "0 0 .5em rgba(40,109,168,.5)" __box_shadow_colored__ = "0 0 .5em rgba(40,109,168,.5)"
__box_shadow__ = "0 0 .5em rgb(153,153,153,.5)" __box_shadow__ = "0 0 .5em rgb(153,153,153,.5)"
__box_shadow_right_bottom__ = "0.1em 0.3rem 0.5em rgb(153,153,153,.5)"
__box_shadow_bottom__ = "0 0.1em 0.5em rgb(153,153,153,.5)"
__box_shadow_offset__ = ".1em .1em .1em rgb(153,153,153,.5)" __box_shadow_offset__ = ".1em .1em .1em rgb(153,153,153,.5)"
__nav_menu_color__ = "#696969" __nav_menu_color__ = "#696969"
__nav_menu_hover_color__ = "#286da8" __nav_menu_hover_color__ = "#286da8"