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

Merge branch 'directNavAndKeyboardAccess' into 'master'

Browse source 
keyboard access + direct link scrolling

See merge request !67
This commit is contained in:
Jana Deutschländer 2017-05-02 17:32:15 +02:00
commit a31688c44e
15 changed files with 167 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
detail.php
View file

@ -232,7 +232,7 @@ include('tpl/favicon_tiles.php');
<div class="breadcrumbs" data-do="<?php echo tpl_getLang('image_detail') ?>">
<div class="togglelink page_main-content">
<a href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle') ?></span></a>
<a id="spr__toggle-content" href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle') ?></span></a>
</div>
<h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_status') ?></h6>

1
js/base/spc.js
View file

@ -103,7 +103,6 @@
try{
var focusobj = document.getElementById(fid);
if(focusobj) focusobj.focus();
if(focusobj) console.log(focusobj);
}catch(err){
this._debug('exception: '+err);
}

4
js/base/velocity.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

130
js/direct.js Normal file
View file

@ -0,0 +1,130 @@
/**
* Sets up the behaviour of direct menu links
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
(function($) {
var $body,
/**
* Register the click handler for the direct links
* should scroll to the page area whether there is a fixed magic matcher bar or not
*
* @param $directMenu
*/
scrollingForDirectNav = function($directMenu) {
$body = $('body');
checkAnchorsOnLoad($directMenu);
registerClickForDirectLinks($directMenu);
},
/**
* register click event listener for direct links
* @param $menu
*/
registerClickForDirectLinks = function($menu) {
$menu.find('a').on('click', function (e) {
e.stopPropagation();
var target = $(this).attr('href');
tasksBeforeScrolling(target);
scrollToTarget(target);
});
},
/**
* scroll to / set focus to target of direct link if value of location hash equals direct link
* @param $menu
*/
checkAnchorsOnLoad = function($menu) {
var hash = window.location.hash;
if (hash) {
$menu.find('a').each(function() {
var target = $(this).attr('href');
if(hash === target) {
tasksBeforeScrolling(target);
scrollToTarget(target);
setFocusOnLoad(target);
}
});
}
},
/**
* todos that needs to be done before the scrolling can start
* @param target
*/
tasksBeforeScrolling = function(target) {
switch (target) {
case '#qsearch__in':
showSearchField(target);
break;
case '#dokuwiki__usertools':
$(target).find('li:first-child').find('a').focus();
break;
}
},
/**
* set focus on target or first link found in target
* @param target
*/
setFocusOnLoad = function(target) {
var $target = $(target);
switch (target) {
case '#qsearch__in':
case '#spr__toggle-content':
$target.focus();
break;
case '#dokuwiki__usertools':
break;
default:
$target.attr('tabindex',0);
$target.focus();
}
},
/**
* trigger content toggle link to make the search field visible otherwise it neither be used for scrolling nor
* for focus setting
* @param target
*/
showSearchField = function(target) {
if($body.hasClass('wide-content')) {
$('#spr__toggle-content').trigger('click');
}
},
/**
* scrolls to the target with an offset of 60px
* @param target
*/
scrollToTarget = function(target) {
// scroll to each target
$(target).velocity('scroll', {
duration: 400,
offset: -60,
easing: 'ease-in-out'
});
};
$(function(){
var $directMenu = $('#spr__direct');
if (!$directMenu.length) return;
scrollingForDirectNav($directMenu);
});
})(jQuery);

7
js/meta-box.js
View file

@ -1,5 +1,10 @@
/**
* Sets up the behaviour of the meta box
*
* @author Andreas Gohr <gohr@cosmocode.de>
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
(function($) {

2
js/plugins/bookcreator.js
View file

@ -1,6 +1,8 @@
/**
* prevents Uncaught TypeError in detail template if bookcreator plug-in is installed
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*
*/
(function($) {

2
js/plugins/folded.js
View file

@ -1,6 +1,8 @@
/**
* prevents Uncaught TypeError in detail template if folded plug-in is installed
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*
*/
(function($) {

3
js/plugins/qc.js
View file

@ -1,5 +1,8 @@
/**
* Add custom QC functionality instead of using the plugin's mechanism
*
* @author Andreas Gohr <gohr@cosmocode.de>
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
jQuery(function () {
var $panel = jQuery('div.qc-output').hide();

6
js/sidebar.js
View file

@ -1,5 +1,9 @@
/**
* Sets up the sidebar behaviour
*
* @author Andreas Gohr <gohr@cosmocode.de>
* @author Michael Große <gohr@cosmocode.de>
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
jQuery(function () {
var $nav = jQuery('#dokuwiki__aside');
@ -266,7 +270,7 @@ jQuery(function () {
setActive(stModes,$siteTools);
setActive(utModes,$userTools);
if(jQuery('body').is('.wide-content')) {
if($body.is('.wide-content')) {
window.sessionStorage.setItem('wide-content', true);
isWideContent = true;
}

4
lang/de/lang.php
View file

@ -8,11 +8,11 @@
$lang['direct_prefix'] = 'Direkt';
$lang['direct_content_main'] = 'Hauptinhalt dieser Seite';
$lang['direct_menu_main'] = 'Hauptmenü';
$lang['direct_quick_search'] = 'Schnellsuche';
$lang['direct_content_toggle'] = 'Breite des Contents ändern';
$lang['adjunct_start_logo_text'] = 'Logo: ';
$lang['adjunct_linked_logo_text'] = '. Link zur Startseite';
$lang['a11y_search'] = 'geh zur Suche';
$lang['a11y_sidebartoggle'] = 'Sidebar öffnen/schliessen';
$lang['nav-area-head'] = 'Navigationsmenüs und Suche';

6
lang/en/lang.php
View file

@ -7,12 +7,12 @@
$lang['direct_prefix'] = 'jump to';
$lang['direct_content_main'] = 'main content';
$lang['direct_menu_main'] = 'main menu';
$lang['direct_content_main'] = 'Main Content';
$lang['direct_quick_search'] = 'Search';
$lang['direct_content_toggle'] = 'Toggle Content Width';
$lang['adjunct_start_logo_text'] = 'Logo: ';
$lang['adjunct_linked_logo_text'] = '. homepage link';
$lang['a11y_search'] = 'Jump to the search';
$lang['a11y_sidebartoggle'] = 'Open/Close Sidebar';
$lang['nav-area-head'] = 'menus and quick search';

2
main.php
View file

@ -278,7 +278,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
<div class="breadcrumbs" data-do="<?php echo $ACT?>">
<div class="togglelink page_main-content">
<a href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle')?></span></a>
<a id="spr__toggle-content" href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle')?></span></a>
</div>
<h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_status') ?></h6>

3
script.js
View file

@ -1,5 +1,6 @@
/* DOKUWIKI:include js/base/helper.js */
/* DOKUWIKI:include js/base/spc.js */
/* DOKUWIKI:include js/base/velocity.min.js */
/* DOKUWIKI:include js/plugins/do_tasks.js */
/* DOKUWIKI:include js/plugins/qc.js */
@ -8,3 +9,5 @@
/* DOKUWIKI:include js/meta-box.js */
/* DOKUWIKI:include js/sidebar.js */
/* DOKUWIKI:include js/direct.js */

2
tpl/main-sidebar-search.php
View file

@ -2,5 +2,5 @@
if(!defined('DOKU_INC')) die();
echo '<h6 class="sr-only" role="heading" aria-level="2">' . tpl_getLang('head_quick_search') . '</h6>';
echo '<p class="toggleSearch"><a href="#qsearch__out"><span class="prefix">' . tpl_getLang('a11y_search') . '</span></a></p>';
echo '<p class="toggleSearch"><a href="#qsearch__out"><span class="prefix">' . tpl_getLang('jump_to_quicksearch') . '</span></a></p>';
tpl_searchform(true, false);

5
tpl/nav-direct.php
View file

@ -10,9 +10,10 @@
<p>
<span class="sr-out"><?php echo tpl_getLang('direct_prefix'); ?>: </span>
<span class="skip">
<a rel="nofollow" href="#content"><?php echo tpl_getLang('direct_content_main'); ?></a><span class="sr-out"> /</span>
<a rel="nofollow" href="#qsearch__in"><?php echo tpl_getLang('direct_quick_search'); ?></a><span class="sr-out"> /</span>
<a rel="nofollow" href="#dokuwiki__usertools"><?php echo $lang['user_tools']; ?></a><span class="sr-out"> /</span>
<a rel="nofollow" href="#nav-main"><?php echo tpl_getLang('direct_menu_main'); ?></a>
<a rel="nofollow" href="#dokuwiki__content"><?php echo tpl_getLang('direct_content_main'); ?></a><span class="sr-out"> /</span>
<a rel="nofollow" href="#spr__toggle-content"><?php echo tpl_getLang('direct_content_toggle'); ?></a>
</span>
</p>