1// **************************************************************** 2// MQ 2021-06-15 12:06 PM 3// Manage side menu for Wagging Tails theme. Controls menu sliding 4// in and out, properly fitting in window, displaying icons to open 5// and close menu accordingly. Icons used (i.e. "icon-uniF197") are 6// created using icomoon.io app, which allows extraction of iconic 7// font characters to create individual icon font sets, which can 8// then be added in the same manner as Google fonts and hosted in 9// a local environment. Font set used here is the Material Design 10// Iconic Font. 11// **************************************************************** 12 13jQuery(document).ready(function() { 14 jQuery("#hamburger-menu").addClass("icon-uniF197"); 15 16 // **************************************************************** 17 // Hamburger menu click event 18 // **************************************************************** 19 jQuery('#toggle-mobile-menu').change(function() { 20 // Always scroll to top on menu click 21 jQuery(window).scrollTop(0); 22 23 // Set menu position, width, height, etc. depending on click state and screen size 24 setup_menu_display(this.checked); 25 26 // Check for menu open or close 27 if ((this).checked) { // Clicking to open 28 // "X" (close menu) icon 29 jQuery("#hamburger-menu").addClass("icon-uniF136"); 30 31 // Hamburger menu 32 jQuery("#hamburger-menu").removeClass("icon-uniF197"); 33 34 // Remove whole site vertical scroll bar 35 jQuery("body").attr("style", "overflow-y: hidden"); 36 37 // On menu open, delay for about half a second to ensure the 38 // DOM has finished setting up elements. Otherwise, doesn't 39 // always read screen coordinates correctly. 40 setTimeout(adjust_menu_height, 700); 41 } 42 else { // Clicking to close 43 // Hamburger menu 44 jQuery("#hamburger-menu").addClass("icon-uniF197"); 45 46 // "X" (close menu) icon 47 jQuery("#hamburger-menu").removeClass("icon-uniF136"); 48 49 // Add vertical scroll back 50 setTimeout(() => { jQuery("body").attr("style", "overflow-y: auto"); }, 300); 51 } 52 }); 53 54 // **************************************************************** 55 // Sub-menu click event 56 // **************************************************************** 57 jQuery('#menu-column li.menu-item.menu-item-has-children').click(function() { 58 // See if menu is already open 59 if (jQuery(this).hasClass('open')) { 60 jQuery(this).children('ul').attr("style", "display: none"); 61 jQuery(this).removeClass("open"); 62 } else { // Menu must be closed 63 jQuery(this).children('ul').attr("style", "display: block"); 64 jQuery(this).addClass("open"); 65 } 66 }); 67 68 jQuery('#menu-column li.menu-item a').click(function() { 69 // See if anchor has a URL attached. If so, close main menu before navigating. 70 if(jQuery(this).attr('href') !== undefined) { 71 jQuery('#toggle-mobile-menu').click(); 72 } 73 }); 74 75 // **************************************************************** 76 // Window resize event 77 // **************************************************************** 78 jQuery(window).resize(function() { 79 var isOpening = jQuery('#toggle-mobile-menu').is(':checked'); 80 81 setup_menu_display(isOpening); 82 }); 83 84 // **************************************************************** 85 // Setup Menu Display (slide in or out) 86 // **************************************************************** 87 function setup_menu_display(isOpening) { 88 var winWidth = window.innerWidth; 89 90 if (isOpening) // Clicking to open 91 { 92 // Add class to hide featured image overlay on Post page 93 jQuery("#post-header").addClass("menu-open-post-page"); 94 95 if (winWidth > 500) { // Tablet or desktop size 96 slide_menu_right(); 97 } 98 else { // Mobile size 99 slide_menu_down(); 100 } 101 102 // On menu open, delay for about half a second to ensure the 103 // DOM has finished setting up elements. Otherwise, doesn't 104 // always read screen coordinates correctly. 105 setTimeout(adjust_menu_height, 700); 106 } 107 else // Clicking to close 108 { 109 // Remove class to hide featured image overlay on Post page, when closing menu 110 jQuery("#post-header").removeClass("menu-open-post-page"); 111 112 // If menu closed, never show opaque overlay 113 jQuery("#content-column").removeClass("menu-open"); 114 115 if (winWidth > 500) { // Table or desktop size 116 slide_menu_left(); 117 } 118 else { // Mobile size 119 slide_menu_up(); 120 } 121 122 // Make sure content and footer areas are visible again after closing menu 123 setTimeout(() => { jQuery("#site-content").attr("style", "display: block"); }, 300); 124 setTimeout(() => { jQuery("#footer").attr("style", "display: block"); }, 300); 125 } 126 } 127 128 // **************************************************************** 129 // Slide menu up (close) 130 // **************************************************************** 131 function slide_menu_up() { 132 // Get full window height; menu column should be same but isn't 133 var windowHeight = jQuery(window).height(); 134 135 // Set menu column height so we're sure it's not sticking down onto screen
136 var menuHeightCSS = "height: " + windowHeight + "px"; 137 jQuery("#menu-column").attr("style", menuHeightCSS); 138 139 // Calculate amount to move window up so it's fully off screen 140 var slideUpCSS = "margin-top: " + (windowHeight * -1) + "px"; 141 142 // Move menu up 143 jQuery("#menu-column").attr("style", slideUpCSS); 144 } 145 146 // **************************************************************** 147 // Slide menu down (open) 148 // **************************************************************** 149 function slide_menu_down() { 150 // Move menu column into position below header 151 jQuery("#menu-column").attr("style", "margin-top: 0"); 152 153 // Hide content and footer areas 154 jQuery("#site-content").attr("style", "display: none"); 155 jQuery("#footer").attr("style", "display: none"); 156 157 // Make sure header is properly lined up to left edge of screen 158 jQuery("#header-wrap").attr("style", "left: 0"); 159 160 // Remove overlay effect over content area 161 jQuery("#content-column").removeClass("menu-open"); 162 } 163 164 // **************************************************************** 165 // Slide menu right (open) 166 // **************************************************************** 167 function slide_menu_right() { 168 // Slide menu to left edge 169 jQuery("#menu-column").attr("style", "margin-left: 0px"); 170 171 // Make sure content and footer areas visible, in case resizing from smaller window 172 setTimeout(() => { jQuery("#site-content").attr("style", "display: block"); }, 300); 173 setTimeout(() => { jQuery("#footer").attr("style", "display: block"); }, 300); 174 175 // Position header to right of menu 176 jQuery("#header-wrap").attr("style", "left: 400px"); 177 178 // Add class to create overlay effect over content area 179 setTimeout(() => { jQuery("#content-column").addClass("menu-open"); }, 300); 180 } 181 182 // **************************************************************** 183 // Slide menu left (close) 184 // **************************************************************** 185 function slide_menu_left() { 186 // Move menu off the screen 187 jQuery("#menu-column").attr("style", "margin-left: -400px"); 188 189 // Move header back to left edge of screen 190 jQuery("#header-wrap").attr("style", "left: 0"); 191 } 192 193 // **************************************************************** 194 // Adjust open menu height (so it fits against bottom of screen) 195 // **************************************************************** 196 function adjust_menu_height() { 197 var winHeight = window.innerHeight; 198 var winWidth = window.innerWidth; 199 var mainMenu = document.getElementById("side-menu-navigation"); 200 var menuTop = window.pageYOffset + mainMenu.getBoundingClientRect().top; 201 var menuHeight = winHeight - menuTop; 202 var bottomContent = 0; 203 var adminbarHeight = 0; 204 var menuHeightCSS = ""; 205 206 // Check for admin bar existence; get height if it does. 207 if (jQuery("#wpadminbar").length) { 208 // Get full height including top and bottom margins, if there 209 adminbarHeight = jQuery("#wpadminbar").outerHeight(true); 210 } 211 212 // Side menu bottom content widget area may not exist if empty. Check first to 213 // avoid throwing error. 214 if (jQuery("#side-menu-bottom-content").length) { 215 // Get full height including top and bottom margins, if there 216 bottomContent = jQuery("#side-menu-bottom-content").outerHeight(true); 217 } 218 219 // Get horizontal line full height 220 bottomLine = jQuery("#bottom-line").outerHeight(true); 221 222 var menuTop = window.pageYOffset + mainMenu.getBoundingClientRect().top; 223 var menuHeight = winHeight - menuTop - bottomContent - bottomLine + 80; 224 225 // console.log("winHeight: " + winHeight); 226 // console.log("winWidth: " + winWidth); 227 // console.log("adminbarHeight: " + adminbarHeight); 228 // console.log("menuTop: " + menuTop); 229 // console.log("menuHeight: " + menuHeight); 230 231 232 // Determine menu height, depending on whether menu slides from left or down. 233 if (winWidth <= 500) { 234 // Account for admin bar, if there, and top margin
235 menuHeightCSS = "margin-top: 0; height: " + (menuHeight) + "px;"; 236 } 237 else { 238 // Account for admin bar, if there. Otherwise, height is set. 239 menuHeightCSS = "margin-left: 0; height: " + (menuHeight) + "px;"; 240 } 241 242 jQuery("#site-navigation").attr("style", "height: " + menuHeight + "px"); 243 } 244});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.