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 const trigger = jQuery(this); 121 dropdown.find('> ul').toggle(0,function(){ 122 trigger.attr('aria-expanded', jQuery(this).is(':visible')); 123 }); 124 125 // Close dropdown when clicking outside 126 jQuery(document).on('click.dropdown', function(e) { 127 if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) { 128 dropdown.find('> ul').hide(); 129 trigger.attr('aria-expanded', 'false'); 130 jQuery(document).off('click.dropdown'); 131 } 132 }); 133 }); 134 }); 135 } 136 137 /* 138 * Enable Collapse 139 */ 140 function enableCollapse() { 141 jQuery('[data-toggle="collapse"]').click(function(event){ 142 event.preventDefault(); 143 const trigger = jQuery(this); 144 const target = jQuery(trigger.attr('data-target')); 145 target.slideToggle('fast',function(){ 146 // set aria-expanded attribute based on visibility 147 trigger.attr('aria-expanded', target.is(':visible')); 148 }); 149 }); 150 } 151 152 /* 153 * Enable Dropdowns 154 */ 155 function enableDropdowns() { 156 jQuery('.dropdown').each(function() { 157 const dropdown = jQuery(this); 158 dropdown.find('[data-toggle="dropdown"]').click(function(event) { 159 event.preventDefault(); 160 const button = jQuery(this); 161 dropdown.find('.dropdown-menu').toggle(0,function(){ 162 button.attr('aria-expanded', jQuery(this).is(':visible')); 163 }); 164 165 // Close dropdown when clicking outside 166 jQuery(document).on('click.dropdown', function(e) { 167 if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) { 168 dropdown.find('> ul').hide(); 169 button.attr('aria-expanded', 'false'); 170 jQuery(document).off('click.dropdown'); 171 } 172 }); 173 }); 174 }); 175 } 176 177 /* 178 * Enable Tooltips 179 */ 180 function enableTooltips() { 181 jQuery('body.enableTooltips [title]:not(.media),body.enableTooltips [alt]:not(.media)').each(function() { 182 const element = jQuery(this); 183 const content = element.attr('alt') ? element.attr('alt') : element.attr('title'); 184 element.attr('data-tooltip-content', content); 185 186 element.hover(function() { 187 // Prevent default browser tooltip from showing 188 const tooltipType = element.attr('alt') ? 'alt' : 'title'; 189 element.removeAttr(tooltipType).attr('data-tooltip-type', tooltipType); 190 191 // Create and append the tooltip 192 const tooltip = jQuery('<div class="tooltip"><div class="tooltip-text">' + content + '</div></div>'); 193 jQuery('body').append(tooltip); 194 195 // Calculate and set the position of the tooltip 196 const elementOffset = element.offset(); 197 const tooltipWidth = tooltip.outerWidth(); 198 const elementWidth = element.outerWidth(); 199 const topPosition = elementOffset.top + element.outerHeight() + 10; // Adjust +10 for spacing 200 const leftPosition = elementOffset.left + (elementWidth / 2) - (tooltipWidth / 2); 201 202 tooltip.css({ 203 top: topPosition, 204 left: leftPosition, 205 display: 'inline-block' 206 }); 207 208 }, function() { 209 // Restore the original attribute and remove the tooltip 210 element.attr(element.attr('data-tooltip-type'), content); 211 jQuery('.tooltip').remove(); 212 }); 213 }); 214 } 215 216 jQuery(function(){ 217 toggleSidebar(); 218 toggleNavigation(); 219 toggleSubmenu(); 220 closeToc(); 221 changeSearchInput(); 222 enableAddNewPage(); 223 enableTranslation(); 224 enableToolbarDropdowns(); 225 enableDropdowns(); 226 enableTooltips(); 227 enableCollapse(); 228 }); 229}); 230