1/* DOKUWIKI:include js/skip-link-focus-fix.js */ 2 3jQuery(document).ready(function() { 4 /* 5 * Click to toggle sidebar. 6 */ 7 function toggleSidebar() { 8 jQuery( '#writr__sidebar' ).on( 'click', '#writr__sidebar-toggle', function( e ) { 9 e.preventDefault(); 10 jQuery( 'html, body' ).scrollTop( 0 ); 11 jQuery( this ).toggleClass( 'open' ); 12 jQuery( 'body' ).toggleClass( 'sidebar-closed' ); 13 jQuery( '#writr__secondary' ).resize(); 14 } ); 15 } 16 17 /** 18 * Handles toggling the navigation menu for small screens. 19 */ 20 function toggleNavigation() { 21 var $container = jQuery('#writr__site-navigation'); 22 if (!$container.length) return; 23 var $button = jQuery('.menu-toggle', $container); 24 if (!$button.length) return; 25 var $menu = jQuery('ul', $container); 26 if (!$menu.length) { 27 $menu.hide(); 28 return; 29 } 30 $button.click(function(){ 31 $container.toggleClass('toggled'); 32 }); 33 } 34 35 /* 36 * A function to enable/disable a dropdown submenu. 37 */ 38 function toggleSubmenu() { 39 jQuery( '.main-navigation .node > div > a' ).append( '<span class="dropdown-icon" />' ); 40 jQuery( '#writr__site-navigation' ).on( 'click', '.dropdown-icon', function( e ) { 41 e.preventDefault(); 42 jQuery( this ).toggleClass( 'open' ); 43 if ( jQuery( this ).hasClass( 'open' ) ) { 44 jQuery( this ).parent().parent().next( 'ul' ).show(); 45 } else { 46 jQuery( this ).parent().parent().next( 'ul' ).hide(); 47 } 48 } ); 49 } 50 51 /* 52 * Close TOC by default 53 */ 54 function closeToc() { 55 var $toc = jQuery('#dw__toc .toggle'); 56 if($toc.length) { 57 $toc[0].setState(-1); 58 } 59 } 60 61 /* 62 * Change search submit input to submit button to make it easier to style 63 * @deprecated since Detritus 64 */ 65 function changeSearchInput() { 66 var $searchForm = jQuery('.search-form > form > div'); 67 var $searchButton = jQuery('input[type="submit"]', $searchForm).detach(); 68 var title = $searchButton.attr('title'); 69 var value = $searchButton.val(); 70 $searchForm.append('<button type="submit" title="'+title+'">'+value+'</button>'); 71 } 72 73 /* 74 * Enable add new page dropdown 75 */ 76 function enableAddNewPage() { 77 jQuery('.action.AddNewPage').click(function(event) { 78 event.preventDefault(); 79 const button = jQuery(this); 80 jQuery('.addnewpage').toggle(0,function(){ 81 // set aria-expanded attribute based on visibility 82 button.attr('aria-expanded', jQuery(this).is(':visible')); 83 }); 84 }); 85 86 jQuery(document).click(function(event) { 87 if (!jQuery(event.target).closest('.action.AddNewPage, .addnewpage').length) { 88 jQuery('.addnewpage').hide(); 89 } 90 }); 91 } 92 93 /* 94 * Enable translation dropdown 95 */ 96 function enableTranslation() { 97 jQuery('.action.Translation').click(function(event) { 98 event.preventDefault(); 99 const button = jQuery(this); 100 jQuery('.plugin_translation').toggle(0,function(){ 101 // set aria-expanded attribute based on visibility 102 button.attr('aria-expanded', jQuery(this).is(':visible')); 103 }); 104 }); 105 106 jQuery(document).click(function(event) { 107 if (!jQuery(event.target).closest('.action.Translation, .plugin_translation').length) { 108 jQuery('.plugin_translation').hide(); 109 } 110 }); 111 } 112 113 /* 114 * Enable Toolbar Dropdowns 115 */ 116 function enableToolbarDropdowns() { 117 jQuery('#writr__toolbar .hook .node').each(function() { 118 const dropdown = jQuery(this); 119 dropdown.find('div.li').click(function(event) { 120 event.preventDefault(); 121 const trigger = jQuery(this); 122 trigger.find('a').click(function(event) { 123 event.preventDefault(); 124 }); 125 dropdown.find('> ul').toggle(0,function(){ 126 trigger.attr('aria-expanded', jQuery(this).is(':visible')); 127 }); 128 129 // Close dropdown when clicking outside 130 jQuery(document).on('click.dropdown', function(e) { 131 if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) { 132 dropdown.find('> ul').hide(); 133 trigger.attr('aria-expanded', 'false'); 134 jQuery(document).off('click.dropdown'); 135 } 136 }); 137 }); 138 }); 139 } 140 141 /* 142 * Enable Collapse 143 */ 144 function enableCollapse() { 145 jQuery('[data-toggle="collapse"]').click(function(event){ 146 event.preventDefault(); 147 const trigger = jQuery(this); 148 const target = jQuery(trigger.attr('data-target')); 149 target.slideToggle('fast',function(){ 150 // set aria-expanded attribute based on visibility 151 trigger.attr('aria-expanded', target.is(':visible')); 152 }); 153 }); 154 } 155 156 /* 157 * Enable Dropdowns 158 */ 159 function enableDropdowns() { 160 jQuery('.dropdown').each(function() { 161 const dropdown = jQuery(this); 162 dropdown.find('[data-toggle="dropdown"]').click(function(event) { 163 event.preventDefault(); 164 const button = jQuery(this); 165 dropdown.find('.dropdown-menu').toggle(0,function(){ 166 button.attr('aria-expanded', jQuery(this).is(':visible')); 167 }); 168 169 // Close dropdown when clicking outside 170 jQuery(document).on('click.dropdown', function(e) { 171 if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) { 172 dropdown.find('> ul').hide(); 173 button.attr('aria-expanded', 'false'); 174 jQuery(document).off('click.dropdown'); 175 } 176 }); 177 }); 178 }); 179 } 180 181 /* 182 * Enable Tooltips 183 */ 184 function enableTooltips() { 185 jQuery('body.enableTooltips [title]:not(.media),body.enableTooltips [alt]:not(.media)').each(function() { 186 const element = jQuery(this); 187 const content = element.attr('alt') ? element.attr('alt') : element.attr('title'); 188 element.attr('data-tooltip-content', content); 189 190 element.hover(function() { 191 // Prevent default browser tooltip from showing 192 const tooltipType = element.attr('alt') ? 'alt' : 'title'; 193 element.removeAttr(tooltipType).attr('data-tooltip-type', tooltipType); 194 195 // Create and append the tooltip 196 const tooltip = jQuery('<div class="tooltip"><div class="tooltip-text">' + content + '</div></div>'); 197 jQuery('body').append(tooltip); 198 199 // Calculate and set the position of the tooltip 200 const elementOffset = element.offset(); 201 const tooltipWidth = tooltip.outerWidth(); 202 const elementWidth = element.outerWidth(); 203 const topPosition = elementOffset.top + element.outerHeight() + 10; // Adjust +10 for spacing 204 const leftPosition = elementOffset.left + (elementWidth / 2) - (tooltipWidth / 2); 205 206 tooltip.css({ 207 top: topPosition, 208 left: leftPosition, 209 display: 'inline-block' 210 }); 211 212 }, function() { 213 // Restore the original attribute and remove the tooltip 214 element.attr(element.attr('data-tooltip-type'), content); 215 jQuery('.tooltip').remove(); 216 }); 217 }); 218 } 219 220 jQuery(function(){ 221 toggleSidebar(); 222 toggleNavigation(); 223 toggleSubmenu(); 224 closeToc(); 225 changeSearchInput(); 226 enableAddNewPage(); 227 enableTranslation(); 228 enableToolbarDropdowns(); 229 enableDropdowns(); 230 enableTooltips(); 231 enableCollapse(); 232 }); 233}); 234