1 2/** 3 * Sets up the behaviour of direct menu links 4 * 5 * @author Jana Deutschlaender <deutschlaender@cosmocode.de> 6 */ 7(function($) { 8 9 10 var $body, 11 12 /** 13 * Register the click handler for the direct links 14 * should scroll to the page area whether there is a fixed magic matcher bar or not 15 * 16 * @param $directMenu 17 */ 18 scrollingForDirectNav = function($directMenu) { 19 $body = $('body'); 20 checkAnchorsOnLoad($directMenu); 21 registerClickForDirectLinks($directMenu); 22 23 }, 24 25 /** 26 * register click event listener for direct links 27 * @param $menu 28 */ 29 registerClickForDirectLinks = function($menu) { 30 $menu.find('a').on('click', function (e) { 31 e.stopPropagation(); 32 var target = $(this).attr('href'); 33 tasksBeforeScrolling(target); 34 scrollToTarget(target); 35 }); 36 }, 37 38 /** 39 * scroll to / set focus to target of direct link if value of location hash equals direct link 40 * @param $menu 41 */ 42 checkAnchorsOnLoad = function($menu) { 43 var hash = window.location.hash; 44 if (hash) { 45 $menu.find('a').each(function() { 46 var target = $(this).attr('href'); 47 if(hash === target) { 48 tasksBeforeScrolling(target); 49 scrollToTarget(target); 50 setFocusOnLoad(target); 51 } 52 }); 53 } 54 }, 55 56 /** 57 * todos that needs to be done before the scrolling can start 58 * @param target 59 */ 60 tasksBeforeScrolling = function(target) { 61 switch (target) { 62 case '#qsearch__in': 63 showSearchField(target); 64 break; 65 66 case '#dokuwiki__usertools': 67 $(target).find('li:first-child').find('a').focus(); 68 break; 69 70 } 71 }, 72 73 /** 74 * set focus on target or first link found in target 75 * @param target 76 */ 77 setFocusOnLoad = function(target) { 78 var $target = $(target); 79 switch (target) { 80 81 case '#qsearch__in': 82 case '#spr__toggle-content': 83 $target.focus(); 84 break; 85 86 case '#dokuwiki__usertools': 87 break; 88 89 default: 90 $target.attr('tabindex',0); 91 $target.focus(); 92 93 } 94 }, 95 96 /** 97 * trigger content toggle link to make the search field visible otherwise it neither be used for scrolling nor 98 * for focus setting 99 * @param target 100 */ 101 showSearchField = function(target) { 102 if($body.hasClass('wide-content')) { 103 $('#spr__toggle-content').trigger('click'); 104 } 105 }, 106 107 /** 108 * scrolls to the target with an offset of 60px 109 * @param target 110 */ 111 scrollToTarget = function(target) { 112 // scroll to each target 113 $(target).velocity('scroll', { 114 duration: 400, 115 offset: -60, 116 easing: 'ease-in-out' 117 }); 118 }; 119 120 121 $(function(){ 122 123 var $directMenu = $('#spr__direct'); 124 if (!$directMenu.length) return; 125 126 scrollingForDirectNav($directMenu); 127 }); 128 129 130})(jQuery); 131