1( function( $ ) { 2 'use strict'; 3 4 /** 5 * JetMegaMenuClass 6 */ 7 class JetMegaMenuClass { 8 9 /** 10 * [constructor description] 11 * @return {[type]} [description] 12 */ 13 constructor( instance, options ) { 14 this.defaultSettings = { 15 menuId: '0', 16 menuUniqId: window.jetMenu.getUniqId(), 17 layout: 'horizontal', 18 subTrigger: 'item', // item, submarker 19 subEvent: 'click', // hover, click 20 rollUp: true, 21 breakpoint: 768, // Minimal menu width, when this plugin activates 22 mouseLeaveDelay: 500, 23 megaWidthType: 'container', 24 megaWidthSelector: '', 25 megaAjaxLoad: false, 26 classes: { 27 instance: 'menu', 28 menuContainer: 'menu-container', 29 menuList: 'menu-list', 30 menuItem: 'menu-item', 31 menuItemLink: 'menu-item__link', 32 subMenuContainer: 'sub-menu', 33 subMenuList: 'sub-menu__list', 34 megaContainer: 'mega-container', 35 } 36 } 37 38 this.$instance = $( instance ); 39 this.settings = $.extend( this.defaultSettings, options ); 40 this.$window = $( window ); 41 this.$document = $( document ); 42 this.$body = $( 'body' ); 43 this.isRTL = this.$body.hasClass( 'rtl' ); 44 this.isDropdownState = false; 45 46 this.createInstance(); 47 } 48 49 createInstance() { 50 this.$menuList = $( `.${ this.settings.classes.menuList }`, this.$instance ); 51 this.$menuItems = $( `>.${ this.settings.classes.menuItem }:not(.${ this.settings.classes.menuItem }--roll-up)`, this.$menuList ); 52 this.$rollUpItem = $( `>.${ this.settings.classes.menuItem }--roll-up`, this.$menuList ); 53 54 this.menuItemsData = this.$menuItems.toArray().map( function( item ) { 55 return { 56 element: item, 57 outerWidth: $( item ).outerWidth( true ), 58 offsetLeft: $( item )[0].offsetLeft, 59 } 60 } ); 61 62 this.initWatcher( 50 ); 63 this.initEvents(); 64 this.maybeRollUpItems(); 65 this.rebuildSubContainers(); 66 this.watchTick(); 67 68 document.addEventListener( 'DOMContentLoaded', ( event ) => { 69 setTimeout( () => { 70 this.watchTick(); 71 }, 250 ); 72 } ); 73 74 this.$instance.addClass( `${ this.settings.classes.instance }--inited` ); 75 this.$document.trigger( 'JetMegaMenuInited' ); 76 } 77 78 initEvents() { 79 let debounceTimer, 80 eventHandler = 'JetMegaMenu', 81 $itemTargetSelector = 'item' === this.settings.subTrigger ? `.${ this.settings.classes.menuItem } > .${ this.settings.classes.menuItem }__inner` : `.${ this.settings.classes.menuItem } > .${ this.settings.classes.menuItem }__inner .${ this.settings.classes.menuItem }__dropdown`; 82 83 switch ( this.settings.subEvent ) { 84 case 'hover': 85 this.$instance.on( `mouseenter.${ eventHandler }`, `.${ this.settings.classes.menuItem } > .${ this.settings.classes.menuItem }__inner`, { instance: this }, ( event ) => { 86 let $target = $( event.target ), 87 $menuItem = $target.parents( `.${ this.settings.classes.menuItem }` ), 88 $subContainer = $( `.${ this.settings.classes.subMenuContainer }:first, .${ this.settings.classes.megaContainer }:first`, $menuItem ), 89 templateContent = $subContainer.data( 'template-content' ) || false, 90 templateId = $subContainer.data( 'template-id' ) || false; 91 92 $( `.${ this.settings.classes.menuItem }--hover`, this.$instance ).removeClass( `${ this.settings.classes.menuItem }--hover` ); 93 94 if ( $menuItem.hasClass( `${ this.settings.classes.menuItem }-has-children` ) ) { 95 $menuItem.addClass( `${ this.settings.classes.menuItem }--hover` ); 96 97 if ( templateId ) { 98 this.maybeTemplateLoad( templateId, templateContent, $subContainer ); 99 } 100 } 101 } ); 102 103 this.$instance.on( `mouseleave.${ eventHandler }`, `.${ this.settings.classes.menuItem } > .${ this.settings.classes.menuItem }__inner`, ( event ) => { /* Item Mouse Leave Event */ } ); 104 break; 105 106 case 'click': 107 108 this.$instance.on( `click.${ eventHandler }`, $itemTargetSelector, ( event ) => { 109 event.preventDefault(); 110 event.stopPropagation(); 111 112 let $currentTarget = $( event.currentTarget ), 113 $menuItem = $currentTarget.closest( `.${this.settings.classes.menuItem}` ), 114 $menuItemLink = $( '.jet-mega-menu-item__link', $menuItem ).first(), 115 $siblingsItems = $menuItem.siblings( `.${this.settings.classes.menuItem}-has-children` ), 116 $subContainer = $( `.${this.settings.classes.subMenuContainer}:first, .${this.settings.classes.megaContainer}`, $menuItem ), 117 templateContent = $subContainer.data( 'template-content' ) || false, 118 templateId = $subContainer.data( 'template-id' ) || false; 119 120 if ( $siblingsItems.length ) { 121 $siblingsItems.removeClass( `${ this.settings.classes.menuItem }--hover` ); 122 $( `.${ this.settings.classes.menuItem }-has-children`, $siblingsItems ).removeClass( `${ this.settings.classes.menuItem }--hover` ); 123 } 124 125 if ( $menuItem.hasClass( `${ this.settings.classes.menuItem }-has-children` ) ) { 126 if ( ! $menuItem.hasClass( `${ this.settings.classes.menuItem }--hover` ) ) { 127 $menuItem.addClass( `${ this.settings.classes.menuItem }--hover` ); 128 } else { 129 $menuItem.removeClass( `${ this.settings.classes.menuItem }--hover` ); 130 } 131 132 if ( templateId ) { 133 this.maybeTemplateLoad( templateId, templateContent, $subContainer ); 134 } 135 } else { 136 let itemLink = $menuItemLink.attr( 'href' ) || '#', 137 target = $menuItemLink.attr( 'target' ) || '_self'; 138 139 window.open( itemLink, target ); 140 141 return false;
142 } 143 } ); 144 break; 145 } 146 147 this.$instance.on( `mouseenter.${ eventHandler }`, `.${ this.settings.classes.subMenuContainer }, .${ this.settings.classes.megaContainer }`, ( event ) => { 148 clearTimeout( debounceTimer ); 149 } ); 150 151 this.$instance.on( `mouseenter.${ eventHandler }`, ( event ) => { 152 clearTimeout( debounceTimer ); 153 } ); 154 155 this.$instance.on( `mouseleave.${ eventHandler }`, ( event ) => { 156 debounceTimer = setTimeout( () => { 157 $( `.${ this.settings.classes.menuItem }--hover`, this.$instance ).removeClass( `${ this.settings.classes.menuItem }--hover` ); 158 }, this.settings.mouseLeaveDelay ); 159 } ); 160 161 this.$window.on( `orientationchange.${ eventHandler } resize.${ eventHandler }`, ( event ) => { 162 $( `.${ this.settings.classes.menuItem }`, this.$instance ).removeClass( `${ this.settings.classes.menuItem }--hover` ); 163 this.$instance.removeClass( `${ this.settings.classes.instance }--dropdown-open` ); 164 } ); 165 166 this.$document.on( `touchend.${ eventHandler }`, ( event ) => { 167 168 if ( $( event.target ).closest( `.${ this.settings.classes.menuItem }` ).length ) { 169 return; 170 } 171 172 $( `.${ this.settings.classes.menuItem }`, this.$instance ).removeClass( `${ this.settings.classes.menuItem }--hover` ); 173 } ); 174 175 this.$instance.on( 'watchTickEventResetRegularState', ( event ) => { 176 this.resetRegularState(); 177 178 if ( this.$rollUpItem[0] ) { 179 $( `.${ this.settings.classes.subMenuList }:first`, this.$rollUpItem ).empty(); 180 this.$rollUpItem[0].hidden = true; 181 } 182 183 for ( let index = 0; index < this.menuItemsData.length; index++ ) { 184 this.menuItemsData[ index ].element.hidden = false; 185 } 186 } ); 187 188 this.$instance.on( 'watchTickEventResetDropdownState', ( event ) => { 189 this.resetDropdownState(); 190 this.$instance.removeClass( `${ this.settings.classes.instance }--dropdown-open` ); 191 } ); 192 193 this.$instance.on( `click.${ eventHandler }`, `.${ this.settings.classes.instance }-toggle`, ( event ) => { 194 195 if ( ! this.$instance.hasClass( `${ this.settings.classes.instance }--dropdown-open` ) ) { 196 this.$instance.addClass( `${ this.settings.classes.instance }--dropdown-open` ); 197 } else { 198 this.$instance.removeClass( `${ this.settings.classes.instance }--dropdown-open` ); 199 } 200 } ); 201 202 } 203 204 /** 205 * Init watcher function. 206 * 207 * @param {number} Watcher debounce delay. 208 * @return {void} 209 */ 210 initWatcher( delay = 10 ) { 211 $( window ).off( `resize.JetMegaMenu${ this.settings['menuUniqId'] }` ).on( `resize.JetMegaMenu${ this.settings['menuUniqId'] } orientationchange.JetMegaMenu${ this.settings['menuUniqId'] }`, this.debounce( delay, this.watchTick.bind( this ) ) ); 212 this.$instance.trigger( 'containerResize' ); 213 } 214 215 /** 216 * Responsive menu watcher callback. 217 * 218 * @param {Object} Resize or Orientationchange event. 219 * @return {void} 220 */ 221 watchTick( event ) { 222 223 if ( this.isDropdown() ) { 224 225 if ( ! this.isDropdownState ) { 226 this.$instance.trigger( 'watchTickEventResetRegularState' ); 227 } 228 229 this.isDropdownState = true; 230 this.$instance.removeClass( `${ this.settings.classes.instance }--layout-horizontal ${ this.settings.classes.instance }--layout-vertical` ); 231 this.$instance.addClass( `${ this.settings.classes.instance }--layout-dropdown` ); 232 this.$instance.trigger( 'watchTickEventDropdown' ); 233 } else { 234 235 if ( this.isDropdownState ) { 236 this.$instance.trigger( 'watchTickEventResetDropdownState' ); 237 } 238 239 this.isDropdownState = false; 240 this.$instance.removeClass( `${ this.settings.classes.instance }--layout-dropdown` ); 241 this.$instance.addClass( `${ this.settings.classes.instance }--layout-${ this.settings.layout }` ); 242 this.$instance.trigger( `watchTickEventRegular` ); 243 this.$instance.trigger( `watchTickEventRegular--${ this.settings.layout }` ); 244 } 245 246 this.$instance.trigger( 'watchTickEvent' ); 247 } 248 249 /** 250 * Rollup rebuilding function. 251 * 252 * @return {void} 253 */ 254 maybeRollUpItems() { 255 this.$instance.on( 'watchTickEventRegular--horizontal', ( event ) => { 256 257 if ( ! this.settings.rollUp ) { 258 return false;
259 } 260 261 let mainMenuWidth = this.$instance.width(), 262 visibleItemsArray = [], 263 hiddenItemsArray = []; 264 265 for ( let index = 0; index < this.menuItemsData.length; index++ ) { 266 let itemData = this.menuItemsData[ index ], 267 nextItemData = this.menuItemsData[ index + 1 ] || false, 268 offsetLeft = nextItemData ? nextItemData.offsetLeft : itemData.offsetLeft + itemData.outerWidth, 269 item = itemData.element; 270 271 if ( offsetLeft + this.$rollUpItem.outerWidth( true ) > mainMenuWidth ) { 272 item.hidden = true; 273 hiddenItemsArray.push( item ); 274 } else { 275 item.hidden = false; 276 visibleItemsArray.push( item ); 277 } 278 } 279 280 $( `.${ this.settings.classes.subMenuList }:first`, this.$rollUpItem ).empty(); 281 282 for ( let hiddenMenuItem of hiddenItemsArray ) { 283 let $hiddenClone = $( hiddenMenuItem ).clone(); 284 285 $hiddenClone[0].hidden = false; 286 287 $( `>.${ this.settings.classes.menuItem }__inner >.${ this.settings.classes.menuItemLink }`, $hiddenClone ).toggleClass( `${ this.settings.classes.menuItemLink }--top-level ${ this.settings.classes.menuItemLink }--sub-level` ); 288 $( `.${ this.settings.classes.subMenuList }:first`, this.$rollUpItem ).append( $hiddenClone ); 289 } 290 291 if ( this.$rollUpItem[0] ) { 292 this.$rollUpItem[0].hidden = hiddenItemsArray.length ? false : true; 293 } 294 295 this.$instance.trigger( 'rollUpItemsEvent' ); 296 } ) 297 } 298 299 /** 300 * Rebuild SubContainers function. 301 * 302 * @return {void} 303 */ 304 rebuildSubContainers() { 305 this.$instance.on( 'watchTickEventRegular--horizontal', ( event ) => { 306 let $megaMenuList = $( `.${ this.settings.classes.megaContainer }`, this.$instance ), 307 $subMenuList = $( `.${ this.settings.classes.subMenuContainer }`, this.$instance ), 308 subInverseClass = `${ this.settings.classes.subMenuContainer }--inverse`, 309 instanceWidth = this.$instance.width(), 310 instanceOffset = this.$instance.offset(); 311 312 $subMenuList.each( ( index, element ) => { 313 let $element = $( element ); 314 315 if ( this.isOffscreenX( element ) ) { 316 $element.addClass( subInverseClass ); 317 } else { 318 $element.removeClass( subInverseClass ); 319 } 320 } ); 321 322 switch( this.settings.megaWidthType ) { 323 case 'container': 324 $megaMenuList.each( ( index, element ) => { 325 let $element = $( element ), 326 $elementPosition = $element.data( 'position' ), 327 elementOffset = $element.offset(), 328 elementDeltaOffset = 'default' === $elementPosition ? Math.ceil( instanceOffset.left - elementOffset.left ) : 0; 329 330 $element.css( { 331 '--jmm-submenu-width': `${ instanceWidth }px`, 332 '--jmm-submenu-delta-x-offset': `${ elementDeltaOffset }px` 333 } ); 334 } ); 335 336 break; 337 case 'selector': 338 let $customSelector = $( this.settings.megaWidthSelector ); 339 340 if ( $customSelector[0] ) { 341 let selectorWidth = $customSelector.width(), 342 selectorOffset = Math.round( $customSelector.offset().left ); 343 344 document.fonts.ready.then( () => { 345 $megaMenuList.each( ( index, element ) => { 346 let $element = $( element ), 347 $elementPosition = $element.data( 'position' ), 348 elementOffset = Math.round( $element.offset().left ), 349 elementDeltaOffset = 'default' === $elementPosition ? Math.round( selectorOffset - elementOffset ) : 0; 350 351 $element.css( { 352 '--jmm-submenu-width': `${ selectorWidth }px`, 353 '--jmm-submenu-delta-x-offset': `${ elementDeltaOffset }px` 354 } ); 355 } ); 356 } ); 357 358 } 359 360 break; 361 case 'items': 362 let $lastItem = $( `.${ this.settings.classes.menuItem }--top-level:not([hidden]):last`, this.$instance ), 363 $firstItem = $( `.${ this.settings.classes.menuItem }--top-level:not([hidden]):first`, this.$instance ), 364 lastItemBounding = $lastItem[0].getBoundingClientRect(), 365 firstItemBounding = $firstItem[0].getBoundingClientRect(), 366 itemsWidth = lastItemBounding.x + lastItemBounding.width - firstItemBounding.x; 367 368 $megaMenuList.each( ( index, element ) => { 369 let $element = $( element ), 370 $elementPosition = $element.data( 'position' ), 371 elementOffset = $element.offset(), 372 elementDeltaOffset = 'default' === $elementPosition ? Math.ceil( instanceOffset.left - elementOffset.left ) : 0; 373 374 $element.css( { 375 '--jmm-submenu-width': `${ itemsWidth }px`, 376 '--jmm-submenu-delta-x-offset': `${ elementDeltaOffset }px` 377 } ); 378 } ); 379 break; 380 } 381 } ); 382
383 this.$instance.on( 'watchTickEventRegular--vertical', ( event ) => { 384 let $megaMenuList = $( `.${ this.settings.classes.megaContainer }`, this.$instance ), 385 $subMenuList = $( `.${ this.settings.classes.subMenuContainer }`, this.$instance ), 386 instanceWidth = this.$instance.width(), 387 instanceHeight = this.$instance.height(), 388 instanceOffset = this.$instance.offset(), 389 windowWidth = this.$window.outerWidth( true ), 390 subInverseClass = `${ this.settings.classes.subMenuContainer }--inverse`, 391 megaInverseClass = `${ this.settings.classes.megaContainer }--inverse`; 392 393 $subMenuList.each( ( index, element ) => { 394 let $element = $( element ); 395 396 if ( this.isOffscreenX( element ) ) { 397 $element.addClass( subInverseClass ); 398 } else { 399 $element.removeClass( subInverseClass ); 400 } 401 } ); 402 403 $megaMenuList.each( ( index, element ) => { 404 let $element = $( element ), 405 $elementPosition = $element.data( 'position' ), 406 $parentElement = $element.parent(), 407 elementOffset = $element.offset(), 408 elementDeltaOffsetX = ( instanceOffset.left - elementOffset.left ) + instanceWidth, 409 elementDeltaOffsetY = 'default' === $elementPosition ? ( instanceOffset.top - elementOffset.top ) : 0, 410 elementDeltaWidth = ( elementDeltaOffsetX + $element.width() ); 411 412 if ( $parentElement.hasClass(`${ this.settings.classes.menuItem }--top-level` ) ) { 413 $element.css( { 414 //'--jmm-submenu-width': `${ instanceWidth }px`, 415 '--jmm-submenu-min-height': `${ instanceHeight }px`, 416 //'--jmm-submenu-delta-x-offset': `${ elementDeltaOffsetX }px`, 417 '--jmm-submenu-delta-y-offset': `${ elementDeltaOffsetY }px` 418 } ); 419 } 420 421 if ( this.isOffscreenX( element ) ) { 422 $element.addClass( megaInverseClass ); 423 } else { 424 $element.removeClass( megaInverseClass ); 425 } 426 } ); 427 } ); 428 } 429 430 /** 431 * Reset Regular State 432 * 433 * @return {void} 434 */ 435 resetRegularState() {} 436 437 /** 438 * Reset Dropdown State 439 * 440 * @return {void} 441 */ 442 resetDropdownState() {} 443 444 /** 445 * Get mobile status. 446 * 447 * @return {boolean} Mobile Status 448 */ 449 isDropdown() { 450 return ( this.$window.width() < this.settings.breakpoint || 'dropdown' === this.settings.layout ) ? true : false; 451 } 452 453 /** 454 * 455 * @param element 456 * @returns {boolean} 457 */ 458 isOffscreenX( element ) { 459 let rect = element.getBoundingClientRect(); 460 461 return ( 462 rect.x < 0 || ( rect.x + rect.width ) > window.innerWidth 463 ); 464 } 465 466 /** 467 * Mobile and tablet check funcion. 468 * 469 * @return {boolean} Mobile Status 470 */ 471 mobileAndTabletcheck() { 472 let check = false; 473 474 (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|
474sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); 475 476 return check; 477 } 478 479 /** 480 * Debounce the function call 481 * 482 * @param {number} threshold The delay. 483 * @param {Function} callback The function. 484 */ 485 debounce( threshold, callback ) { 486 let timeout; 487 488 return function debounced( $event ) { 489 function delayed() { 490 callback.call( this, $event ); 491 timeout = null; 492 } 493 494 if ( timeout ) { 495 clearTimeout( timeout ); 496 } 497 498 timeout = setTimeout( delayed, threshold ); 499 }; 500 } 501 502 maybeTemplateLoad( templateId, templateContent, $templateContainer ) { 503 504 if ( ! this.settings.megaAjaxLoad ) { 505 return; 506 } 507 508 if ( $templateContainer.hasClass( 'template-loaded' ) ) { 509 return; 510 } 511 512 let getMegaContentUrl = 'default' === templateContent ? window.jetMenuPublicSettings.getBlocksTemplateApiUrl : window.jetMenuPublicSettings.getElementorTemplateApiUrl; 513 514 $.ajax( { 515 type: 'GET', 516 url: getMegaContentUrl, 517 dataType: 'json', 518 data: { 519 'id': templateId, 520 'dev': window.jetMenuPublicSettings.devMode 521 }, 522 beforeSend: function( jqXHR, ajaxSettings ) { 523 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 524 }, 525 success: function( responce, textStatus, jqXHR ) { 526 const {content, contentElements} = responce; 527 const templateData = { 528 content, 529 contentElements, 530 contentType: templateContent, 531 } 532 533 $templateContainer.addClass( 'template-loaded' ); 534 535 jetMenu.megaContentRender( $( '.jet-mega-menu-mega-container__inner', $templateContainer ), templateData ); 536 } 537 } ); 538 } 539 } 540 541 // jQuery plugin 542 $.fn.JetMegaMenu = function( options ) { 543 return this.each( function() { 544 let $this = $( this ), 545 pluginOptions = ( 'object' === typeof options ) ? options : {}; 546 547 if ( ! $this.data( 'JetMegaMenu' ) ) { 548 // create plugin instance (only if not exists) and expose the entire instance API 549 $this.data( 'JetMegaMenu', new JetMegaMenuClass( this, pluginOptions ) ); 550 } 551 } ); 552 }; 553} ( jQuery )); 554 555// JetMenu Public Scripts 556( function( $ ) { 557 'use strict'; 558 559 window.jetMenu = { 560 561 addedScripts: {}, 562 563 addedStyles: {}, 564 565 addedAssetsPromises: [], 566 567 initedMobileRenderInstance: [], 568 569 eventBus: new Vue(), 570 571 $body: $( 'body' ), 572 573 init: function() { 574 this.initLocationMenuRender(); 575 this.mobileVueComponents(); 576 this.initMobileRender(); 577 578 window.addEventListener( 'jetMenu/editor/templateRenderer/renderSuccess', ( event ) => { 579 this.initLocationMenuRender(); 580 this.mobileVueComponents(); 581 this.initMobileRender(); 582 }, false ); 583 584 $( window ).on( 'jet-menu/ajax/frontend-init', ( event, payload ) => { 585 586 switch ( payload.contentType ) { 587 case 'elementor': 588 jetMenu.maybeElementorFrontendInit( payload.$container ); 589 break; 590 case 'default': 591 jetMenu.maybeDefaultFrontendInit( payload ); 592 break 593 } 594 } ); 595 596 $( window ).on( 'jet-menu/ajax/frontend-init/after', ( event, payload ) => { 597 this.initLocationMenuRender(); 598 this.mobileVueComponents(); 599 this.initMobileRender(); 600 this.megaContentHandler(event, payload); 601 602 if ( window.elementorFrontend ) { 603 const elementorLazyLoad = new CustomEvent( "elementor/lazyload/observe" ); 604 document.dispatchEvent( elementorLazyLoad ); 605 } 606 } ); 607 608 wp.hooks.addAction( 'jet-plugins.frontend.element-ready.jet-menu.mega-menu', 'jet-popup', ( $popupContainer, contentType ) => { 609 this.initLocationMenuRender(); 610 this.mobileVueComponents(); 611 this.initMobileRender(); 612 } ); 613 }, 614 615 initLocationMenuRender: function() { 616 617 let $megaMenuList = $( '.jet-mega-menu--location-wp-nav' ); 618 619 if ( ! $megaMenuList[0] ) { 620 return false; 621 } 622 623 $megaMenuList.each( function() { 624 let $this = $( this ), 625 settings = $this.data( 'settings' ); 626 627 $this.JetMegaMenu( { 628 rollUp: settings.rollUp, 629 layout: settings.layout, 630 subTrigger: settings.subTrigger, 631 subEvent: settings.subEvent, 632 mouseLeaveDelay: settings.mouseLeaveDelay, 633 breakpoint: settings.breakpoint, 634 megaWidthType: settings.megaWidthType, 635 megaWidthSelector: settings.megaWidthSelector, 636 megaAjaxLoad: settings.megaAjaxLoad, 637 classes: { 638 instance: 'jet-mega-menu', 639 menuContainer: 'jet-mega-menu-container', 640 menuList: 'jet-mega-menu-list', 641 menuItem: 'jet-mega-menu-item', 642 menuItemLink: 'jet-mega-menu-item__link', 643 subMenuContainer: 'jet-mega-menu-sub-menu', 644 subMenuList: 'jet-mega-menu-sub-menu__list', 645 megaContainer: 'jet-mega-menu-mega-container', 646 } 647 } ); 648 } ); 649 }, 650 651 megaContentHandler: function(event, payload) { 652 const container = payload.$container[0]; 653 const mobileMenu = container.closest('.jet-mobile-menu'); 654 655 if ( ! mobileMenu ) { 656 return; 657 } 658 659 const { menuOptions } = mobileMenu.dataset;
660 const { menuUniqId } = JSON.parse( menuOptions ); 661 662 container.addEventListener('click', function (event) { 663 const link = event.target.closest('a'); 664 665 if (!link) { 666 return; 667 } 668 669 if (link.getAttribute('href')[0] !== '#') { 670 return; 671 } 672 673 window.jetMenu.eventBus.$emit('closeMenu', { 674 menuUniqId: menuUniqId, 675 }); 676 }); 677 }, 678 679 initMobileRender: function() { 680 681 let mobileMenuList = $( '.jet-mobile-menu--location-wp-nav' ); 682 683 if ( ! mobileMenuList[0] ) { 684 return false; 685 } 686 687 if ( 'true' === window.jetMenuPublicSettings.devMode ) { 688 Vue.config.devtools = true; 689 } 690 691 mobileMenuList.each( function() { 692 let $this = $( this ), 693 menuInstanceId = $this.attr( 'id' ), 694 menuId = $this.data( 'menu-id' ) || false, 695 menuOptions = $this.data( 'menu-options' ) || {}; 696 697 jetMenu.createMobileRenderInstance( menuInstanceId, menuId, menuOptions ); 698 } ); 699 }, 700 701 createMobileRenderInstance: function( menuInstanceId, menuId, menuOptions ) { 702 703 if ( jetMenu.initedMobileRenderInstance.includes( menuInstanceId ) ) { 704 return; 705 } 706 707 jetMenu.initedMobileRenderInstance.push( menuInstanceId ); 708 709 let mobileRenderInstance = new Vue( { 710 el: '#' + menuInstanceId, 711 data: { 712 uniqId: menuInstanceId, 713 menuOptions: menuOptions, 714 refsHtml: {}, 715 }, 716 mounted: function() { 717 let refsHtml = {}; 718 719 for ( var ref in this.$refs ) { 720 Object.assign( refsHtml, { [ ref ]: this.$refs[ ref ].innerHTML } ); 721 } 722 723 this.refsHtml = refsHtml; 724 } 725 } ); 726 }, 727 728 mobileVueComponents: function() { 729 730 Vue.component( 'mobile-menu-item', { 731 template: '#mobile-menu-item-template', 732 733 props: { 734 itemDataObject: Object, 735 depth: Number 736 }, 737 738 data: function() { 739 return ( { 740 ajaxRequest: null, 741 templateLoadStatus: false, 742 subDropdownVisible: false 743 } ) 744 }, 745 746 computed: { 747 748 itemClasses: function() { 749 let itemClasses = [ 750 'jet-mobile-menu__item', 751 'jet-menu-item-' + this.itemDataObject.itemId, 752 'jet-mobile-menu__item--sub-trigger-' + ( this.$root.menuOptions.subTrigger || 'item' ), 753 ]; 754 755 let customClasses = this.itemDataObject.classes; 756 757 if ( 0 !== customClasses.length ) { 758 itemClasses = itemClasses.concat( customClasses ); 759 } 760 761 const { href } = window.location; 762 let pageURL = null; 763 764 if ( href.includes('?') ) { 765 pageURL = href.substring(0, href.indexOf('?')); 766 } else { 767 pageURL = href; 768 } 769 770 if ( pageURL === this.itemDataObject.url ) { 771 itemClasses.push( 'jet-mobile-menu__item--active' ); 772 } 773 774 return itemClasses; 775 }, 776 777 itemLinkClasses: function() { 778 let classes = [ 779 'mobile-link', 780 0 === this.depth ? 'mobile-top-level-link' : 'mobile-sub-level-link', 781 ]; 782 783 return classes; 784 }, 785 786 isСhildrenDefine: function() { 787 return this.itemDataObject.children ? true : false; 788 }, 789 790 isTemplateDefine: function() { 791 return false !== this.itemDataObject.megaTemplateId ? true : false; 792 }, 793 794 megaContentType: function() { 795 return this.itemDataObject.megaContentType; 796 }, 797 798 isAjaxLoadingEnabled: function() { 799 return this.$root.menuOptions.megaAjaxLoad === true; 800 }, 801 802 getTemplateUrl: function() { 803 return 'default' === this.megaContentType ? window.jetMenuPublicSettings.getBlocksTemplateApiUrl : window.jetMenuPublicSettings.getElementorTemplateApiUrl; 804 }, 805 806 isSub: function() { 807 return this.isСhildrenDefine || this.isTemplateDefine ? true : false; 808 }, 809 810 isTopLevel: function() { 811 return 0 === this.depth ? true : false; 812 }, 813 814 isDropdownLayout: function() { 815 return this.isSub && ! this.isTemplateDefine && 'dropdown' === this.$root.menuOptions.subOpenLayout; 816 }, 817 818 depthClass: function() { 819 return 0 === this.depth ? 'mobile-top-level-link' : 'mobile-sub-level-link'; 820 }, 821 822 dropdownIconHtml: function() { 823 let dropdownIcon = this.$root.refsHtml.dropdownIcon ? this.$root.refsHtml.dropdownIcon : '<span class="dashicons dashicons-arrow-right"></span>', 824 dropdownOpenedIcon = this.$root.refsHtml.dropdownOpenedIcon ? this.$root.refsHtml.dropdownOpenedIcon : '<span class="dashicons dashicons-arrow-down"></span>'; 825 826 if ( this.subDropdownVisible ) { 827 dropdownIcon = dropdownOpenedIcon; 828 } 829 830 return dropdownIcon; 831 }, 832 833 itemIconHtml: function() { 834 return this.itemDataObject.itemIcon; 835 }, 836 837 isIconVisible: function() { 838 let iconVisible = this.$root.menuOptions.itemIconVisible; 839 840 return ! iconVisible || '' === this.itemDataObject.itemIcon || ! this.itemDataObject.itemIcon ? false : true; 841 }, 842 843 isBadgeVisible: function() { 844 let badgeVisible = this.$root.menuOptions.itemBadgeVisible; 845 846 return false === badgeVisible || '' === this.itemDataObject.badgeContent || ! this.itemDataObject.badgeContent ? false : true; 847 }, 848 849 isLabelVisible: function() { 850 let labelVisible = ! this.itemDataObject.hideItemText; 851 852 return false === labelVisible || '' === this.itemDataObject.name || ! this.itemDataObject.name ? false : true; 853 }, 854 855 isDescVisible: function() { 856 let descVisible = this.$root.menuOptions.itemDescVisible; 857
858 return false === descVisible || '' === this.itemDataObject.description || ! this.itemDataObject.description ? false : true; 859 }, 860 861 loaderColor: function() { 862 return this.$root.menuOptions.loaderColor || '#3a3a3a'; 863 }, 864 }, 865 866 methods: { 867 itemSubHandler: function( event ) { 868 let target = event.target, 869 mobileLink = $( target ).closest( '.mobile-link' ); 870 871 if ( 'item' !== this.$root.menuOptions.subTrigger ) { 872 return; 873 } 874 875 if ( this.isSub && mobileLink ) { 876 event.preventDefault(); 877 } 878 879 if ( ! this.isSub && mobileLink && this.$root.menuOptions.closeAfterNavigate ) { 880 jetMenu.eventBus.$emit( 'closeMenu', { 881 menuUniqId: this.$root.menuOptions.menuUniqId, 882 } ); 883 } 884 885 this.switchToSub( event ); 886 }, 887 888 markerSubHandler: function( event ) { 889 890 if ( 'submarker' !== this.$root.menuOptions.subTrigger ) { 891 return; 892 } 893 894 this.switchToSub( event ); 895 }, 896 897 switchToSub: function( event ) { 898 899 if ( ! this.isSub ) { 900 return; 901 } 902 903 if ( ! this.isTemplateDefine ) { 904 905 if ( this.isDropdownLayout ) { 906 this.subDropdownVisible = !this.subDropdownVisible; 907 908 return; 909 } 910 911 jetMenu.eventBus.$emit( 'itemsSubSwitch', { 912 menuUniqId: this.$root.menuOptions.menuUniqId, 913 id: this.itemDataObject.id, 914 name: this.itemDataObject.name, 915 children: this.itemDataObject.children || false 916 } ); 917 } else { 918 if ( this.isAjaxLoadingEnabled && ! this.itemDataObject.megaContentLoaded ) { 919 this.getMegaTemplate(); 920 } else { 921 jetMenu.eventBus.$emit( 'showTemplateContent', { 922 menuUniqId: this.$root.menuOptions.menuUniqId, 923 id: this.itemDataObject.id, 924 name: this.itemDataObject.name, 925 megaContent: this.itemDataObject.megaContent, 926 megaContentType: this.itemDataObject.megaContentType, 927 } ); 928 } 929 } 930 }, 931 932 getMegaTemplate: function() { 933 var vueInstance = this; 934 935 if ( ! this.isAjaxLoadingEnabled ) { 936 return; 937 } 938 939 vueInstance.ajaxRequest = $.ajax( { 940 type: 'GET', 941 url: vueInstance.getTemplateUrl, 942 dataType: 'json', 943 data: { 944 'id': vueInstance.itemDataObject.megaTemplateId, 945 'dev': window.jetMenuPublicSettings.devMode 946 }, 947 beforeSend: function( jqXHR, ajaxSettings ) { 948 949 if ( null !== vueInstance.ajaxRequest ) { 950 vueInstance.ajaxRequest.abort(); 951 } 952 953 vueInstance.templateLoadStatus = true; 954 955 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 956 }, 957 success: function( responce, textStatus, jqXHR ) { 958 let templateContent = responce['content'], 959 contentElements = responce['contentElements']; 960 961 vueInstance.templateLoadStatus = false; 962 vueInstance.itemDataObject.megaContent = templateContent; 963 vueInstance.itemDataObject.megaContentLoaded = true; 964 965 jetMenu.eventBus.$emit( 'showTemplateContent', { 966 menuUniqId: vueInstance.$root.menuOptions.menuUniqId, 967 id: vueInstance.itemDataObject.id, 968 name: vueInstance.itemDataObject.name, 969 megaContent: vueInstance.itemDataObject.megaContent, 970 megaContentType: vueInstance.itemDataObject.megaContentType, 971 } ); 972 } 973 } ); 974 } 975 } 976 977 }); 978 979 Vue.component( 'mobile-menu-list', { 980 template: '#mobile-menu-list-template', 981 props: { 982 depth: Number, 983 childrenObject: Object 984 } 985 } ); 986 987 Vue.component( 'mobile-menu', { 988 template: '#mobile-menu-template', 989 990 data: function() { 991 return ( { 992 menuOpen: false, 993 children: false, 994 itemsRawData: {}, 995 trail:[], 996 breadcrumbsData: [], 997 animation: 'items-next-animation', 998 ajaxRequest: null, 999 templateVisible: false, 1000 instanceLoadStatus: false, 1001 itemTemplateContent: false, 1002 headerTemplate: this.$root.menuOptions['headerTemplate'] || 0, 1003 headerContent: false, 1004 beforeTemplate: this.$root.menuOptions['beforeTemplate'] || 0, 1005 beforeContent: false, 1006 afterTemplate: this.$root.menuOptions['afterTemplate'] || 0, 1007 afterContent: false, 1008 ajaxPromises: [], 1009 } ) 1010 }, 1011 1012 mounted: function() { 1013 const vueInstance = this; 1014 1015 if ( this.menuOpen ) { 1016 jetMenu.$body.addClass( 'jet-mobile-menu-visible' ); 1017 1018 if ( 'slide-out' === this.$root.menuOptions.menuLayout ) { 1019 jetMenu.$body.addClass( 'jet-menu-body-blocker' ); 1020 } 1021 } 1022 1023 let menuInstanceRenderData = false, 1024 renderDataElement = document.getElementById( 'jetMenuMobileWidgetRenderData' + this.$root.menuOptions.menuUniqId ); 1025 1026 if ( renderDataElement ) { 1027 eval( renderDataElement.innerHTML ); 1028 menuInstanceRenderData = window[ 'jetMenuMobileWidgetRenderData' + this.$root.menuOptions.menuUniqId ] || false; 1029 } 1030 1031 if ( menuInstanceRenderData ) { 1032 this.itemsRawData = menuInstanceRenderData['items']; 1033 1034 const headerTemplateData = menuInstanceRenderData.headerTemplateData || false, 1035 beforeTemplateData = menuInstanceRenderData.beforeTemplateData || false, 1036 afterTemplateData = menuInstanceRenderData.afterTemplateData || false; 1037 1038 if ( headerTemplateData ) { 1039 this.headerContent = headerTemplateData.content; 1040 } 1041 1042 if ( beforeTemplateData ) { 1043 this.beforeContent = beforeTemplateData.content; 1044 } 1045 1046 if ( afterTemplateData ) { 1047 this.afterContent = afterTemplateData.content; 1048 } 1049 } else { 1050 this.ajaxPromises.push( 1051 new Promise( function( resolve, reject ) { 1052 1053 $.ajax( { 1054 type: 'GET', 1055 url: window.jetMenuPublicSettings.menuItemsApiUrl, 1056 dataType: 'json', 1057 data: { 1058 'menu_id': vueInstance.menuId, 1059 'dev': window.jetMenuPublicSettings.devMode, 1060 'lang': window.jetMenuPublicSettings.wpmlLanguageCode || false 1061 }, 1062 beforeSend: function( jqXHR, ajaxSettings ) { 1063 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 1064 }, 1065 success: function( responce, textStatus, jqXHR ) { 1066 let responceData = responce.data.items; 1067 1068 vueInstance.itemsRawData = responceData; 1069 1070 resolve(); 1071 } 1072 } ); 1073 } ) 1074 ); 1075 1076 if ( 0 !== +this.headerTemplate ) { 1077 this.ajaxPromises.push( 1078 new Promise( function( resolve, reject ) { 1079 $.ajax( { 1080 type: 'GET', 1081 url: window.jetMenuPublicSettings.getElementorTemplateApiUrl, 1082 dataType: 'json', 1083 data: { 1084 'id': vueInstance.headerTemplate, 1085 'dev': window.jetMenuPublicSettings.devMode, 1086 'nocache': new Date().getTime(), 1087 }, 1088 beforeSend: function( jqXHR, ajaxSettings ) { 1089 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 1090 }, 1091 success: function( responce, textStatus, jqXHR ) { 1092 let templateContent = responce['content'], 1093 templateScripts = responce['scripts'], 1094 templateStyles = responce['styles']; 1095 1096 console.log(responce) 1097 1098 for ( let scriptHandler in templateScripts ) { 1099 jetMenu.addedAssetsPromises.push( jetMenu.loadScriptAsync( scriptHandler, templateScripts[ scriptHandler ] ) ); 1100 } 1101 1102 for ( let styleHandler in templateStyles ) { 1103 jetMenu.addedAssetsPromises.push( jetMenu.loadStyle( styleHandler, templateStyles[ styleHandler ] ) ); 1104 } 1105 1106 vueInstance.headerContent = templateContent; 1107 1108 resolve(); 1109 } 1110 } ); 1111 } ) 1112 ); 1113 } 1114 1115 if ( 0 !== +this.beforeTemplate ) { 1116 this.ajaxPromises.push( 1117 new Promise( function( resolve, reject ) { 1118 $.ajax( { 1119 type: 'GET', 1120 url: window.jetMenuPublicSettings.getElementorTemplateApiUrl, 1121 dataType: 'json', 1122 data: { 1123 'id': vueInstance.beforeTemplate, 1124 'dev': window.jetMenuPublicSettings.devMode, 1125 'nocache': new Date().getTime(), 1126 }, 1127 beforeSend: function( jqXHR, ajaxSettings ) { 1128 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 1129 }, 1130 success: function( responce, textStatus, jqXHR ) { 1131 let templateContent = responce['content'], 1132 templateScripts = responce['scripts'], 1133 templateStyles = responce['styles']; 1134 1135 for ( let scriptHandler in templateScripts ) { 1136 jetMenu.addedAssetsPromises.push( jetMenu.loadScriptAsync( scriptHandler, templateScripts[ scriptHandler ] ) ); 1137 } 1138 1139 for ( let styleHandler in templateStyles ) { 1140 jetMenu.addedAssetsPromises.push( jetMenu.loadStyle( styleHandler, templateStyles[ styleHandler ] ) ); 1141 } 1142 1143 vueInstance.beforeContent = templateContent; 1144 1145 resolve(); 1146 } 1147 } ); 1148 } ) 1149 ); 1150 } 1151 1152 if ( 0 !== +this.afterTemplate ) { 1153 this.ajaxPromises.push( 1154 new Promise( function( resolve, reject ) { 1155 $.ajax( { 1156 type: 'GET', 1157 url: window.jetMenuPublicSettings.getElementorTemplateApiUrl, 1158 dataType: 'json', 1159 data: { 1160 'id': vueInstance.afterTemplate, 1161 'dev': window.jetMenuPublicSettings.devMode, 1162 'nocache': new Date().getTime(), 1163 }, 1164 beforeSend: function( jqXHR, ajaxSettings ) { 1165 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 1166 }, 1167 success: function( responce, textStatus, jqXHR ) { 1168 let templateContent = responce['content'], 1169 templateScripts = responce['scripts'], 1170 templateStyles = responce['styles']; 1171 1172 for ( let scriptHandler in templateScripts ) { 1173 jetMenu.addedAssetsPromises.push( jetMenu.loadScriptAsync( scriptHandler, templateScripts[ scriptHandler ] ) ); 1174 } 1175 1176 for ( let styleHandler in templateStyles ) { 1177 jetMenu.addedAssetsPromises.push( jetMenu.loadStyle( styleHandler, templateStyles[ styleHandler ] ) ); 1178 } 1179 1180 vueInstance.afterContent = templateContent; 1181 resolve(); 1182 } 1183 } ); 1184 } ) 1185 ); 1186 } 1187 } 1188 1189 1190 1191 this.instanceLoadStatus = true; 1192 1193 Promise.all( this.ajaxPromises ).then( function() { 1194 vueInstance.instanceLoadStatus = false;
1195 //vueInstance.initTemplatesContent(); 1196 }, function( reason ) { 1197 console.log( 'Script Loaded Error' ); 1198 } ); 1199 1200 jetMenu.eventBus.$on( 'itemsSubSwitch', function ( payLoad ) { 1201 1202 if ( vueInstance.$root.menuOptions.menuUniqId !== payLoad.menuUniqId ) { 1203 return; 1204 } 1205 1206 vueInstance.trail.push( payLoad.children ); 1207 vueInstance.children = payLoad.children; 1208 vueInstance.animation = 'items-next-animation'; 1209 vueInstance.breadcrumbsData.push( payLoad.name ); 1210 } ); 1211 1212 jetMenu.eventBus.$on( 'showTemplateContent', function ( payLoad ) { 1213 1214 if ( vueInstance.$root.menuOptions.menuUniqId !== payLoad.menuUniqId ) { 1215 return; 1216 } 1217 1218 vueInstance.itemTemplateContent = payLoad.megaContent.content; 1219 vueInstance.templateVisible = true; 1220 vueInstance.breadcrumbsData.push( payLoad.name ); 1221 vueInstance.animation = 'items-next-animation'; 1222 1223 const templateData = { 1224 content: payLoad.megaContent.content !== undefined 1225 ? payLoad.megaContent.content 1226 : payLoad.megaContent, 1227 contentElements: payLoad.megaContent.contentElements, 1228 contentType: payLoad.megaContentType, 1229 } 1230 1231 vueInstance.showTemplateContent( templateData ); 1232 } ); 1233 1234 jetMenu.eventBus.$on( 'closeMenu', function( payLoad ) { 1235 1236 if ( vueInstance.$root.menuOptions.menuUniqId !== payLoad.menuUniqId ) { 1237 return; 1238 } 1239 1240 vueInstance.closeMenu(); 1241 } ); 1242 1243 }, 1244 1245 watch: { 1246 menuOpen: function( curr, prev ) { 1247 1248 if ( curr ) { 1249 jetMenu.$body.addClass( 'jet-mobile-menu-visible' ); 1250 1251 if ( 'slide-out' === this.$root.menuOptions.menuLayout ) { 1252 jetMenu.$body.addClass( 'jet-menu-body-blocker' ); 1253 } 1254 1255 this.initTemplatesContent(); 1256 } 1257 1258 if ( ! curr ) { 1259 jetMenu.$body.removeClass( 'jet-mobile-menu-visible' ); 1260 1261 if ( 'slide-out' === this.$root.menuOptions.menuLayout ) { 1262 jetMenu.$body.removeClass( 'jet-menu-body-blocker' ); 1263 } 1264 1265 this.clearStates(); 1266 } 1267 } 1268 }, 1269 1270 computed: { 1271 instanceClass: function() { 1272 1273 let classes = [ 1274 'jet-mobile-menu__instance', 1275 'jet-mobile-menu__instance--' + this.$root.menuOptions.menuLayout + '-layout', 1276 this.$root.menuOptions.menuPosition + '-container-position', 1277 ( this.$root.menuOptions.togglePosition || 'default' ) + '-toggle-position', 1278 this.$root.menuOptions.fillSvgIcon ? 'fill-svg-icon' : '', 1279 ]; 1280 1281 return classes; 1282 }, 1283 1284 menuContainerVisible: function() { 1285 return this.menuOpen && !this.instanceLoadStatus; 1286 }, 1287 1288 menuId: function() { 1289 1290 if ( this.$root.menuOptions.mobileMenuId && window.jetMenuPublicSettings.isMobile === 'true' ) { 1291 return this.$root.menuOptions.mobileMenuId; 1292 } 1293 1294 return this.$root.menuOptions.menuId; 1295 }, 1296 1297 coverVisible: function() { 1298 1299 let avaliableForLayout = [ 1300 'slide-out' 1301 ]; 1302 1303 return avaliableForLayout.includes( this.$root.menuOptions.menuLayout ); 1304 }, 1305 1306 itemsList: function() { 1307 1308 if ( ! this.children ) { 1309 return this.itemsRawData; 1310 } 1311 1312 return this.children; 1313 }, 1314 1315 isClose: function() { 1316 let avaliableForLayout = [ 1317 'slide-out' 1318 ]; 1319 1320 return avaliableForLayout.includes( this.$root.menuOptions.menuLayout ); 1321 }, 1322 1323 isBack: function() { 1324 return this.children || this.templateVisible ? true : false; 1325 }, 1326 1327 isBreadcrumbs: function() { 1328 return this.$root.menuOptions.useBreadcrumb && 0 !== this.breadcrumbsData.length ? true : false; 1329 }, 1330 1331 breadcrumbsPathData: function() { 1332 1333 if ( 'minimal' === this.$root.$root.menuOptions.breadcrumbPath && 1 < this.breadcrumbsData.length ) { 1334 return this.breadcrumbsData.filter( ( item, index, breadcrumbsData ) => { 1335 return index === breadcrumbsData.length - 1; 1336 } ); 1337 } 1338 1339 return this.breadcrumbsData; 1340 }, 1341 1342 depth: function() { 1343 return this.trail.length; 1344 }, 1345 1346 containerPosition: function() { 1347 return this.$root.menuOptions.menuPosition; 1348 }, 1349 1350 showAnimation: function() { 1351 1352 let animation = false;
1353 1354 switch( this.$root.menuOptions.menuLayout ) { 1355 1356 case 'slide-out': 1357 animation = 'right' === this.containerPosition ? 'menu-container-left-animation' : 'menu-container-right-animation'; 1358 break; 1359 1360 case 'dropdown': 1361 animation = 'menu-container-dropdown-animation'; 1362 break; 1363 1364 case 'push': 1365 animation = 'menu-container-expand-animation'; 1366 break; 1367 } 1368 1369 return animation; 1370 }, 1371 1372 toggleClosedIcon: function() { 1373 return this.$root.refsHtml.toggleClosedIcon || ''; 1374 }, 1375 1376 toggleOpenedIcon: function() { 1377 return this.$root.refsHtml.toggleOpenedIcon || ''; 1378 }, 1379 1380 toggleText: function() { 1381 return '' !== this.$root.menuOptions.toggleText ? this.$root.menuOptions.toggleText : false; 1382 }, 1383 1384 closeIcon: function() { 1385 return this.$root.refsHtml.closeIcon || ''; 1386 }, 1387 1388 backIcon: function() { 1389 let backIcon = this.$root.refsHtml.backIcon || '', 1390 backText = '' !== this.$root.menuOptions.backText ? '<span>' + this.$root.menuOptions.backText + '</span>' : '', 1391 backHtml = backIcon + backText; 1392 1393 return backHtml; 1394 }, 1395 1396 backText: function() { 1397 return '' !== this.$root.menuOptions.backText ? this.$root.menuOptions.backText : false; 1398 }, 1399 1400 breadcrumbIcon: function() { 1401 return this.$root.refsHtml.breadcrumbIcon || ''; 1402 }, 1403 1404 loaderColor: function() { 1405 return this.$root.menuOptions.loaderColor || '#3a3a3a'; 1406 }, 1407 1408 toggleLoaderVisible: function() { 1409 return this.$root.menuOptions.toggleLoader && this.instanceLoadStatus && this.menuOpen ? true : false; 1410 }, 1411 1412 headerTemplateVisible: function() { 1413 return this.headerContent ? true : false; 1414 }, 1415 1416 beforeTemplateVisible: function() { 1417 return this.beforeContent ? true : false; 1418 }, 1419 1420 afterTemplateVisible: function() { 1421 return this.afterContent ? true : false; 1422 } 1423 1424 }, 1425 1426 methods: { 1427 menuToggle: function() { 1428 this.menuOpen = ! this.menuOpen; 1429 }, 1430 1431 closeMenu: function() { 1432 this.menuOpen = false; 1433 }, 1434 1435 clearStates: function() { 1436 this.trail = []; 1437 this.children = false; 1438 this.breadcrumbsData = []; 1439 this.templateVisible = false; 1440 }, 1441 1442 goBack: function() { 1443 1444 this.animation = 'items-prev-animation'; 1445 1446 if ( ! this.templateVisible ) { 1447 this.$delete( this.trail, this.trail.length - 1 ); 1448 this.children = this.trail.slice(-1)[0] || false; 1449 } else { 1450 this.templateVisible = false; 1451 } 1452 1453 this.$delete(this.breadcrumbsData, this.breadcrumbsData.length - 1); 1454 }, 1455 1456 escapeKeyHandler: function() { 1457 1458 if ( this.isBack ) { 1459 this.goBack(); 1460 } else { 1461 this.closeMenu(); 1462 } 1463 }, 1464 1465 showTemplateContent: function( templateData = {} ) { 1466 let vueInstance = this; 1467 1468 this.$nextTick( function() { 1469 let $templateContainer = $( vueInstance.$refs['template-content'] ).find( '.jet-mobile-menu__template-content' ); 1470 1471 jetMenu.megaContentRender( $templateContainer, templateData ); 1472 } ); 1473 }, 1474 1475 initTemplatesContent: function() { 1476 let vueInstance = this; 1477 1478 this.$nextTick( function() { 1479 1480 if ( vueInstance.headerContent ) { 1481 let $headerContainer = $( vueInstance.$refs['header-template-content'] ); 1482 1483 jetMenu.megaContentRender( $headerContainer, { contentType: 'elementor' } ); 1484 } 1485 1486 if ( vueInstance.beforeContent ) { 1487 let $beforeContainer = $( vueInstance.$refs['before-template-content'] ); 1488 1489 jetMenu.megaContentRender( $beforeContainer, { contentType: 'elementor' } ); 1490 } 1491 1492 if ( vueInstance.afterContent ) { 1493 let $afterContainer = $( vueInstance.$refs['after-template-content'] ); 1494 1495 jetMenu.megaContentRender( $afterContainer, { contentType: 'elementor' } ); 1496 } 1497 } ); 1498 }, 1499 1500 breadcrumbHandle: function( index ) { 1501 1502 if ( index === this.breadcrumbsData.length ) { 1503 return; 1504 } 1505 1506 if ( 'minimal' === this.$root.menuOptions.breadcrumbPath ) { 1507 this.goBack(); 1508 1509 return; 1510 } 1511 1512 this.animation = 'items-prev-animation'; 1513 this.trail = this.trail.slice( 0, index ); 1514 this.children = this.trail.slice( -1 )[0] || false; 1515 this.templateVisible = false;
1516 this.breadcrumbsData = this.breadcrumbsData.slice( 0, index ); 1517 } 1518 1519 } 1520 }); 1521 }, 1522 1523 loadScriptAsync: function( script, uri ) { 1524 1525 if ( jetMenu.addedScripts.hasOwnProperty( script ) ) { 1526 return script; 1527 } 1528 1529 jetMenu.addedScripts[ script ] = uri; 1530 1531 return new Promise( function( resolve, reject ) { 1532 var tag = document.createElement( 'script' ); 1533 1534 tag.src = uri; 1535 tag.async = true; 1536 tag.onload = function() { 1537 resolve( script ); 1538 }; 1539 1540 document.head.appendChild( tag ); 1541 } ); 1542 }, 1543 1544 loadStyle: function( style, uri ) { 1545 1546 if ( jetMenu.addedStyles.hasOwnProperty( style ) && jetMenu.addedStyles[ style ] === uri) { 1547 return style; 1548 } 1549 1550 jetMenu.addedStyles[ style ] = uri; 1551 1552 return new Promise( function( resolve, reject ) { 1553 var tag = document.createElement( 'link' ); 1554 1555 tag.id = style; 1556 tag.rel = 'stylesheet'; 1557 tag.href = uri; 1558 tag.type = 'text/css'; 1559 tag.media = 'all'; 1560 tag.onload = function() { 1561 resolve( style ); 1562 }; 1563 1564 document.head.appendChild( tag ); 1565 }); 1566 }, 1567 1568 megaContentRender: function( $templateContainer, templateData = {} ) { 1569 1570 if ( templateData.content ) { 1571 $templateContainer.html( templateData.content ); 1572 } 1573 1574 const data = { 1575 $container: $templateContainer, 1576 ...templateData 1577 } 1578 1579 Promise.all( jetMenu.addedAssetsPromises ).then( function( value ) { 1580 // Before ajax frontend init 1581 $( window ).trigger( 'jet-menu/ajax/frontend-init/before', data ); 1582 1583 // Frontend init 1584 $( window ).trigger( 'jet-menu/ajax/frontend-init', data ); 1585 1586 // after ajax frontend init 1587 $( window ).trigger( 'jet-menu/ajax/frontend-init/after', data ); 1588 }, function( reason ) { 1589 console.log( 'Script Loaded Error' ); 1590 }); 1591 }, 1592 1593 maybeElementorFrontendInit: function( $templateContainer ) { 1594 1595 $templateContainer.find( 'div[data-element_type]' ).each( function() { 1596 var $this = $( this ), 1597 elementType = $this.data( 'element_type' ); 1598 1599 if ( ! elementType ) { 1600 return; 1601 } 1602 1603 try { 1604 if ( 'widget' === elementType ) { 1605 elementType = $this.data( 'widget_type' ); 1606 1607 if ( window.elementorFrontend && window.elementorFrontend.hooks ) { 1608 window.elementorFrontend.hooks.doAction( 'frontend/element_ready/widget', $this, $ ); 1609 } 1610 } 1611 1612 if ( window.elementorFrontend && window.elementorFrontend.hooks ) { 1613 window.elementorFrontend.hooks.doAction( 'frontend/element_ready/global', $this, $ ); 1614 window.elementorFrontend.hooks.doAction( 'frontend/element_ready/' + elementType, $this, $ ); 1615 } 1616 1617 } catch ( err ) { 1618 console.log(err); 1619 $this.remove(); 1620 1621 return false; 1622 } 1623 } ); 1624 }, 1625 1626 maybeDefaultFrontendInit: function ( payload ) { 1627 const contentElements = payload.contentElements || [], 1628 $container = payload.$container; 1629 1630 $container.find( '[data-is-block*="/"]' ).each( ( index, el ) => { 1631 window.JetPlugins.hooks.doAction( window.JetPlugins.hookNameFromBlock( el.dataset.isBlock ), jQuery( el ) ); 1632 } ); 1633 }, 1634 1635 getUniqId: function() { 1636 return Math.random().toString( 36 ).substr( 2, 9 ); 1637 }, 1638 1639 }; 1640 1641 jetMenu.init(); 1642 1643} ( jQuery ) ); 1644
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.