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 let signatures = this.settings['signatures']; 515 let signature = ''; 516 517 if ( signatures.hasOwnProperty(`template_${templateId}`) ) { 518 signature = signatures[`template_${templateId}`].signature; 519 } 520 521 $.ajax( { 522 type: 'GET', 523 url: getMegaContentUrl, 524 dataType: 'json', 525 data: { 526 'id': templateId, 527 'dev': window.jetMenuPublicSettings.devMode, 528 'signature': signature 529 }, 530 beforeSend: function( jqXHR, ajaxSettings ) { 531 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 532 }, 533 success: function( responce, textStatus, jqXHR ) { 534 const {content, contentElements} = responce; 535 const templateData = { 536 content, 537 contentElements, 538 contentType: templateContent, 539 } 540 541 $templateContainer.addClass( 'template-loaded' ); 542 543 jetMenu.megaContentRender( $( '.jet-mega-menu-mega-container__inner', $templateContainer ), templateData ); 544 } 545 } ); 546 } 547 } 548 549 // jQuery plugin 550 $.fn.JetMegaMenu = function( options ) { 551 return this.each( function() { 552 let $this = $( this ), 553 pluginOptions = ( 'object' === typeof options ) ? options : {}; 554 555 if ( ! $this.data( 'JetMegaMenu' ) ) { 556 // create plugin instance (only if not exists) and expose the entire instance API 557 $this.data( 'JetMegaMenu', new JetMegaMenuClass( this, pluginOptions ) ); 558 } 559 } ); 560 }; 561} ( jQuery )); 562 563// JetMenu Public Scripts 564( function( $ ) { 565 'use strict'; 566 567 window.jetMenu = { 568 569 addedScripts: {}, 570 571 addedStyles: {}, 572 573 addedAssetsPromises: [], 574 575 initedMobileRenderInstance: [], 576 577 eventBus: new Vue(), 578 579 $body: $( 'body' ), 580 581 init: function() { 582 this.initLocationMenuRender(); 583 this.mobileVueComponents(); 584 this.initMobileRender(); 585 586 window.addEventListener( 'jetMenu/editor/templateRenderer/renderSuccess', ( event ) => { 587 this.initLocationMenuRender(); 588 this.mobileVueComponents(); 589 this.initMobileRender(); 590 }, false ); 591 592 $( window ).on( 'jet-menu/ajax/frontend-init', ( event, payload ) => { 593 594 switch ( payload.contentType ) { 595 case 'elementor': 596 jetMenu.maybeElementorFrontendInit( payload.$container ); 597 break; 598 case 'default': 599 jetMenu.maybeDefaultFrontendInit( payload ); 600 break 601 } 602 } ); 603 604 $( window ).on( 'jet-menu/ajax/frontend-init/after', ( event, payload ) => { 605 this.initLocationMenuRender(); 606 this.mobileVueComponents(); 607 this.initMobileRender(); 608 this.megaContentHandler(event, payload); 609 610 if ( window.elementorFrontend ) { 611 const elementorLazyLoad = new CustomEvent( "elementor/lazyload/observe" ); 612 document.dispatchEvent( elementorLazyLoad ); 613 } 614 } ); 615 616 wp.hooks.addAction( 'jet-plugins.frontend.element-ready.jet-menu.mega-menu', 'jet-popup', ( $popupContainer, contentType ) => { 617 this.initLocationMenuRender(); 618 this.mobileVueComponents(); 619 this.initMobileRender(); 620 } ); 621 }, 622 623 initLocationMenuRender: function() { 624 625 let $megaMenuList = $( '.jet-mega-menu--location-wp-nav' ); 626 627 if ( ! $megaMenuList[0] ) { 628 return false;
629 } 630 631 $megaMenuList.each( function() { 632 let $this = $( this ), 633 settings = $this.data( 'settings' ); 634 635 $this.JetMegaMenu( { 636 rollUp: settings.rollUp, 637 layout: settings.layout, 638 subTrigger: settings.subTrigger, 639 subEvent: settings.subEvent, 640 mouseLeaveDelay: settings.mouseLeaveDelay, 641 breakpoint: settings.breakpoint, 642 megaWidthType: settings.megaWidthType, 643 megaWidthSelector: settings.megaWidthSelector, 644 megaAjaxLoad: settings.megaAjaxLoad, 645 classes: { 646 instance: 'jet-mega-menu', 647 menuContainer: 'jet-mega-menu-container', 648 menuList: 'jet-mega-menu-list', 649 menuItem: 'jet-mega-menu-item', 650 menuItemLink: 'jet-mega-menu-item__link', 651 subMenuContainer: 'jet-mega-menu-sub-menu', 652 subMenuList: 'jet-mega-menu-sub-menu__list', 653 megaContainer: 'jet-mega-menu-mega-container', 654 } 655 } ); 656 } ); 657 }, 658 659 megaContentHandler: function(event, payload) { 660 const container = payload.$container[0]; 661 const mobileMenu = container.closest('.jet-mobile-menu'); 662 663 if ( ! mobileMenu ) { 664 return; 665 } 666 667 const { menuOptions } = mobileMenu.dataset; 668 const { menuUniqId } = JSON.parse( menuOptions ); 669 670 container.addEventListener('click', function (event) { 671 const link = event.target.closest('a'); 672 673 if (!link) { 674 return; 675 } 676 677 if (link.getAttribute('href')[0] !== '#') { 678 return; 679 } 680 681 window.jetMenu.eventBus.$emit('closeMenu', { 682 menuUniqId: menuUniqId, 683 }); 684 }); 685 }, 686 687 initMobileRender: function() { 688 689 let mobileMenuList = $( '.jet-mobile-menu--location-wp-nav' ); 690 691 if ( ! mobileMenuList[0] ) { 692 return false; 693 } 694 695 if ( 'true' === window.jetMenuPublicSettings.devMode ) { 696 Vue.config.devtools = true; 697 } 698 699 mobileMenuList.each( function() { 700 let $this = $( this ), 701 menuInstanceId = $this.attr( 'id' ), 702 menuId = $this.data( 'menu-id' ) || false, 703 menuOptions = $this.data( 'menu-options' ) || {}; 704 705 jetMenu.createMobileRenderInstance( menuInstanceId, menuId, menuOptions ); 706 } ); 707 }, 708 709 createMobileRenderInstance: function( menuInstanceId, menuId, menuOptions ) { 710 711 if ( jetMenu.initedMobileRenderInstance.includes( menuInstanceId ) ) { 712 return; 713 } 714 715 jetMenu.initedMobileRenderInstance.push( menuInstanceId ); 716 717 let mobileRenderInstance = new Vue( { 718 el: '#' + menuInstanceId, 719 data: { 720 uniqId: menuInstanceId, 721 menuOptions: menuOptions, 722 refsHtml: {}, 723 }, 724 mounted: function() { 725 let refsHtml = {}; 726 727 for ( var ref in this.$refs ) { 728 Object.assign( refsHtml, { [ ref ]: this.$refs[ ref ].innerHTML } ); 729 } 730 731 this.refsHtml = refsHtml; 732 } 733 } ); 734 }, 735 736 mobileVueComponents: function() { 737 738 Vue.component( 'mobile-menu-item', { 739 template: '#mobile-menu-item-template', 740 741 props: { 742 itemDataObject: Object, 743 depth: Number 744 }, 745 746 data: function() { 747 return ( { 748 ajaxRequest: null, 749 templateLoadStatus: false, 750 subDropdownVisible: false 751 } ) 752 }, 753 754 computed: { 755 756 itemClasses: function() { 757 let itemClasses = [ 758 'jet-mobile-menu__item', 759 'jet-menu-item-' + this.itemDataObject.itemId, 760 'jet-mobile-menu__item--sub-trigger-' + ( this.$root.menuOptions.subTrigger || 'item' ), 761 ]; 762 763 let customClasses = this.itemDataObject.classes; 764 765 if ( 0 !== customClasses.length ) { 766 itemClasses = itemClasses.concat( customClasses ); 767 } 768 769 const { href } = window.location; 770 let pageURL = null; 771 772 if ( href.includes('?') ) { 773 pageURL = href.substring(0, href.indexOf('?')); 774 } else { 775 pageURL = href; 776 } 777 778 if ( pageURL === this.itemDataObject.url ) { 779 itemClasses.push( 'jet-mobile-menu__item--active' ); 780 } 781 782 return itemClasses; 783 }, 784 785 itemLinkClasses: function() { 786 let classes = [ 787 'mobile-link', 788 0 === this.depth ? 'mobile-top-level-link' : 'mobile-sub-level-link', 789 ]; 790 791 return classes; 792 }, 793 794 isСhildrenDefine: function() { 795 return this.itemDataObject.children ? true : false;
796 }, 797 798 isTemplateDefine: function() { 799 return false !== this.itemDataObject.megaTemplateId ? true : false; 800 }, 801 802 megaContentType: function() { 803 return this.itemDataObject.megaContentType; 804 }, 805 806 isAjaxLoadingEnabled: function() { 807 return this.$root.menuOptions.megaAjaxLoad === true; 808 }, 809 810 getTemplateUrl: function() { 811 return 'default' === this.megaContentType ? window.jetMenuPublicSettings.getBlocksTemplateApiUrl : window.jetMenuPublicSettings.getElementorTemplateApiUrl; 812 }, 813 814 isSub: function() { 815 return this.isСhildrenDefine || this.isTemplateDefine ? true : false; 816 }, 817 818 isTopLevel: function() { 819 return 0 === this.depth ? true : false; 820 }, 821 822 isDropdownLayout: function() { 823 return this.isSub && ! this.isTemplateDefine && 'dropdown' === this.$root.menuOptions.subOpenLayout; 824 }, 825 826 depthClass: function() { 827 return 0 === this.depth ? 'mobile-top-level-link' : 'mobile-sub-level-link'; 828 }, 829 830 dropdownIconHtml: function() { 831 let dropdownIcon = this.$root.refsHtml.dropdownIcon ? this.$root.refsHtml.dropdownIcon : '<span class="dashicons dashicons-arrow-right"></span>', 832 dropdownOpenedIcon = this.$root.refsHtml.dropdownOpenedIcon ? this.$root.refsHtml.dropdownOpenedIcon : '<span class="dashicons dashicons-arrow-down"></span>'; 833 834 if ( this.subDropdownVisible ) { 835 dropdownIcon = dropdownOpenedIcon; 836 } 837 838 return dropdownIcon; 839 }, 840 841 itemIconHtml: function() { 842 return this.itemDataObject.itemIcon; 843 }, 844 845 isIconVisible: function() { 846 let iconVisible = this.$root.menuOptions.itemIconVisible; 847 848 return ! iconVisible || '' === this.itemDataObject.itemIcon || ! this.itemDataObject.itemIcon ? false : true; 849 }, 850 851 isBadgeVisible: function() { 852 let badgeVisible = this.$root.menuOptions.itemBadgeVisible; 853 854 return false === badgeVisible || '' === this.itemDataObject.badgeContent || ! this.itemDataObject.badgeContent ? false : true; 855 }, 856 857 isLabelVisible: function() { 858 let labelVisible = ! this.itemDataObject.hideItemText; 859 860 return false === labelVisible || '' === this.itemDataObject.name || ! this.itemDataObject.name ? false : true; 861 }, 862 863 isDescVisible: function() { 864 let descVisible = this.$root.menuOptions.itemDescVisible; 865 866 return false === descVisible || '' === this.itemDataObject.description || ! this.itemDataObject.description ? false : true; 867 }, 868 869 loaderColor: function() { 870 return this.$root.menuOptions.loaderColor || '#3a3a3a'; 871 }, 872 }, 873 874 methods: { 875 itemSubHandler: function( event ) { 876 let target = event.target, 877 mobileLink = $( target ).closest( '.mobile-link' ); 878 879 if ( 'item' !== this.$root.menuOptions.subTrigger ) { 880 return; 881 } 882 883 if ( this.isSub && mobileLink ) { 884 event.preventDefault(); 885 } 886 887 if ( ! this.isSub && mobileLink && this.$root.menuOptions.closeAfterNavigate ) { 888 jetMenu.eventBus.$emit( 'closeMenu', { 889 menuUniqId: this.$root.menuOptions.menuUniqId, 890 } ); 891 } 892 893 this.switchToSub( event ); 894 }, 895 896 markerSubHandler: function( event ) { 897 898 if ( 'submarker' !== this.$root.menuOptions.subTrigger ) { 899 return; 900 } 901 902 this.switchToSub( event ); 903 }, 904 905 switchToSub: function( event ) { 906 907 if ( ! this.isSub ) { 908 return; 909 } 910 911 if ( ! this.isTemplateDefine ) { 912 913 if ( this.isDropdownLayout ) { 914 this.subDropdownVisible = !this.subDropdownVisible; 915 916 return; 917 } 918 919 jetMenu.eventBus.$emit( 'itemsSubSwitch', { 920 menuUniqId: this.$root.menuOptions.menuUniqId, 921 id: this.itemDataObject.id, 922 name: this.itemDataObject.name, 923 children: this.itemDataObject.children || false 924 } ); 925 } else { 926 if ( this.isAjaxLoadingEnabled && ! this.itemDataObject.megaContentLoaded ) { 927 this.getMegaTemplate(); 928 } else { 929 jetMenu.eventBus.$emit( 'showTemplateContent', { 930 menuUniqId: this.$root.menuOptions.menuUniqId, 931 id: this.itemDataObject.id, 932 name: this.itemDataObject.name, 933 megaContent: this.itemDataObject.megaContent, 934 megaContentType: this.itemDataObject.megaContentType, 935 } ); 936 } 937 } 938 }, 939 940 getMegaTemplate: function() { 941 var vueInstance = this; 942 943 if ( ! this.isAjaxLoadingEnabled ) { 944 return; 945 } 946
947 var signature = vueInstance.itemDataObject.signature || ''; 948 949 vueInstance.ajaxRequest = $.ajax( { 950 type: 'GET', 951 url: vueInstance.getTemplateUrl, 952 dataType: 'json', 953 data: { 954 'id': vueInstance.itemDataObject.megaTemplateId, 955 'dev': window.jetMenuPublicSettings.devMode, 956 'signature': signature 957 }, 958 beforeSend: function( jqXHR, ajaxSettings ) { 959 960 if ( null !== vueInstance.ajaxRequest ) { 961 vueInstance.ajaxRequest.abort(); 962 } 963 964 vueInstance.templateLoadStatus = true; 965 966 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 967 }, 968 success: function( responce, textStatus, jqXHR ) { 969 let templateContent = responce['content'], 970 contentElements = responce['contentElements']; 971 972 vueInstance.templateLoadStatus = false; 973 vueInstance.itemDataObject.megaContent = templateContent; 974 vueInstance.itemDataObject.megaContentLoaded = true; 975 976 jetMenu.eventBus.$emit( 'showTemplateContent', { 977 menuUniqId: vueInstance.$root.menuOptions.menuUniqId, 978 id: vueInstance.itemDataObject.id, 979 name: vueInstance.itemDataObject.name, 980 megaContent: vueInstance.itemDataObject.megaContent, 981 megaContentType: vueInstance.itemDataObject.megaContentType, 982 } ); 983 } 984 } ); 985 } 986 } 987 988 }); 989 990 Vue.component( 'mobile-menu-list', { 991 template: '#mobile-menu-list-template', 992 props: { 993 depth: Number, 994 childrenObject: Object 995 } 996 } ); 997 998 Vue.component( 'mobile-menu', { 999 template: '#mobile-menu-template', 1000 1001 data: function() { 1002 return ( { 1003 menuOpen: false, 1004 children: false, 1005 itemsRawData: {}, 1006 trail:[], 1007 breadcrumbsData: [], 1008 animation: 'items-next-animation', 1009 ajaxRequest: null, 1010 templateVisible: false, 1011 instanceLoadStatus: false, 1012 itemTemplateContent: false, 1013 headerTemplate: this.$root.menuOptions['headerTemplate'] || 0, 1014 headerContent: false, 1015 beforeTemplate: this.$root.menuOptions['beforeTemplate'] || 0, 1016 beforeContent: false, 1017 afterTemplate: this.$root.menuOptions['afterTemplate'] || 0, 1018 afterContent: false, 1019 ajaxPromises: [], 1020 } ) 1021 }, 1022 1023 mounted: function() { 1024 const vueInstance = this; 1025 1026 if ( this.menuOpen ) { 1027 jetMenu.$body.addClass( 'jet-mobile-menu-visible' ); 1028 1029 if ( 'slide-out' === this.$root.menuOptions.menuLayout ) { 1030 jetMenu.$body.addClass( 'jet-menu-body-blocker' ); 1031 } 1032 } 1033 1034 let menuInstanceRenderData = false, 1035 renderDataElement = document.getElementById( 'jetMenuMobileWidgetRenderData' + this.$root.menuOptions.menuUniqId ); 1036 1037 if ( renderDataElement ) { 1038 eval( renderDataElement.innerHTML ); 1039 menuInstanceRenderData = window[ 'jetMenuMobileWidgetRenderData' + this.$root.menuOptions.menuUniqId ] || false; 1040 } 1041 1042 if ( menuInstanceRenderData ) { 1043 this.itemsRawData = menuInstanceRenderData['items']; 1044 1045 const headerTemplateData = menuInstanceRenderData.headerTemplateData || false, 1046 beforeTemplateData = menuInstanceRenderData.beforeTemplateData || false, 1047 afterTemplateData = menuInstanceRenderData.afterTemplateData || false; 1048 1049 if ( headerTemplateData ) { 1050 this.headerContent = headerTemplateData.content; 1051 } 1052 1053 if ( beforeTemplateData ) { 1054 this.beforeContent = beforeTemplateData.content; 1055 } 1056 1057 if ( afterTemplateData ) { 1058 this.afterContent = afterTemplateData.content; 1059 } 1060 } else { 1061 this.ajaxPromises.push( 1062 new Promise( function( resolve, reject ) { 1063 1064 $.ajax( { 1065 type: 'GET', 1066 url: window.jetMenuPublicSettings.menuItemsApiUrl, 1067 dataType: 'json', 1068 data: { 1069 'menu_id': vueInstance.menuId, 1070 'dev': window.jetMenuPublicSettings.devMode, 1071 'lang': window.jetMenuPublicSettings.wpmlLanguageCode || false 1072 }, 1073 beforeSend: function( jqXHR, ajaxSettings ) { 1074 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 1075 }, 1076 success: function( responce, textStatus, jqXHR ) { 1077 let responceData = responce.data.items; 1078 1079 vueInstance.itemsRawData = responceData; 1080 1081 resolve(); 1082 } 1083 } ); 1084 } ) 1085 ); 1086 1087 if ( 0 !== +this.headerTemplate ) { 1088 this.ajaxPromises.push( 1089 new Promise( function( resolve, reject ) { 1090 $.ajax( { 1091 type: 'GET', 1092 url: window.jetMenuPublicSettings.getElementorTemplateApiUrl, 1093 dataType: 'json', 1094 data: { 1095 'id': vueInstance.headerTemplate, 1096 'dev': window.jetMenuPublicSettings.devMode, 1097 'nocache': new Date().getTime(), 1098 }, 1099 beforeSend: function( jqXHR, ajaxSettings ) { 1100 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 1101 }, 1102 success: function( responce, textStatus, jqXHR ) { 1103 let templateContent = responce['content'], 1104 templateScripts = responce['scripts'], 1105 templateStyles = responce['styles']; 1106 1107 console.log(responce) 1108 1109 for ( let scriptHandler in templateScripts ) { 1110 jetMenu.addedAssetsPromises.push( jetMenu.loadScriptAsync( scriptHandler, templateScripts[ scriptHandler ] ) ); 1111 } 1112 1113 for ( let styleHandler in templateStyles ) { 1114 jetMenu.addedAssetsPromises.push( jetMenu.loadStyle( styleHandler, templateStyles[ styleHandler ] ) ); 1115 } 1116 1117 vueInstance.headerContent = templateContent; 1118 1119 resolve(); 1120 } 1121 } ); 1122 } ) 1123 ); 1124 } 1125 1126 if ( 0 !== +this.beforeTemplate ) { 1127 this.ajaxPromises.push( 1128 new Promise( function( resolve, reject ) { 1129 $.ajax( { 1130 type: 'GET', 1131 url: window.jetMenuPublicSettings.getElementorTemplateApiUrl, 1132 dataType: 'json', 1133 data: { 1134 'id': vueInstance.beforeTemplate, 1135 'dev': window.jetMenuPublicSettings.devMode, 1136 'nocache': new Date().getTime(), 1137 }, 1138 beforeSend: function( jqXHR, ajaxSettings ) { 1139 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 1140 }, 1141 success: function( responce, textStatus, jqXHR ) { 1142 let templateContent = responce['content'], 1143 templateScripts = responce['scripts'], 1144 templateStyles = responce['styles']; 1145 1146 for ( let scriptHandler in templateScripts ) { 1147 jetMenu.addedAssetsPromises.push( jetMenu.loadScriptAsync( scriptHandler, templateScripts[ scriptHandler ] ) ); 1148 } 1149 1150 for ( let styleHandler in templateStyles ) { 1151 jetMenu.addedAssetsPromises.push( jetMenu.loadStyle( styleHandler, templateStyles[ styleHandler ] ) ); 1152 } 1153 1154 vueInstance.beforeContent = templateContent; 1155 1156 resolve(); 1157 } 1158 } ); 1159 } ) 1160 ); 1161 } 1162 1163 if ( 0 !== +this.afterTemplate ) { 1164 this.ajaxPromises.push( 1165 new Promise( function( resolve, reject ) { 1166 $.ajax( { 1167 type: 'GET', 1168 url: window.jetMenuPublicSettings.getElementorTemplateApiUrl, 1169 dataType: 'json', 1170 data: { 1171 'id': vueInstance.afterTemplate, 1172 'dev': window.jetMenuPublicSettings.devMode, 1173 'nocache': new Date().getTime(), 1174 }, 1175 beforeSend: function( jqXHR, ajaxSettings ) { 1176 jqXHR.setRequestHeader( 'X-WP-Nonce', window.jetMenuPublicSettings.restNonce ); 1177 }, 1178 success: function( responce, textStatus, jqXHR ) { 1179 let templateContent = responce['content'], 1180 templateScripts = responce['scripts'], 1181 templateStyles = responce['styles']; 1182 1183 for ( let scriptHandler in templateScripts ) { 1184 jetMenu.addedAssetsPromises.push( jetMenu.loadScriptAsync( scriptHandler, templateScripts[ scriptHandler ] ) ); 1185 } 1186 1187 for ( let styleHandler in templateStyles ) { 1188 jetMenu.addedAssetsPromises.push( jetMenu.loadStyle( styleHandler, templateStyles[ styleHandler ] ) ); 1189 } 1190 1191 vueInstance.afterContent = templateContent; 1192 resolve(); 1193 } 1194 } ); 1195 } ) 1196 ); 1197 } 1198 } 1199 1200 1201 1202 this.instanceLoadStatus = true; 1203 1204 Promise.all( this.ajaxPromises ).then( function() { 1205 vueInstance.instanceLoadStatus = false;
1206 //vueInstance.initTemplatesContent(); 1207 }, function( reason ) { 1208 console.log( 'Script Loaded Error' ); 1209 } ); 1210 1211 jetMenu.eventBus.$on( 'itemsSubSwitch', function ( payLoad ) { 1212 1213 if ( vueInstance.$root.menuOptions.menuUniqId !== payLoad.menuUniqId ) { 1214 return; 1215 } 1216 1217 vueInstance.trail.push( payLoad.children ); 1218 vueInstance.children = payLoad.children; 1219 vueInstance.animation = 'items-next-animation'; 1220 vueInstance.breadcrumbsData.push( payLoad.name ); 1221 } ); 1222 1223 jetMenu.eventBus.$on( 'showTemplateContent', function ( payLoad ) { 1224 1225 if ( vueInstance.$root.menuOptions.menuUniqId !== payLoad.menuUniqId ) { 1226 return; 1227 } 1228 1229 vueInstance.itemTemplateContent = payLoad.megaContent.content; 1230 vueInstance.templateVisible = true; 1231 vueInstance.breadcrumbsData.push( payLoad.name ); 1232 vueInstance.animation = 'items-next-animation'; 1233 1234 const templateData = { 1235 content: payLoad.megaContent.content !== undefined 1236 ? payLoad.megaContent.content 1237 : payLoad.megaContent, 1238 contentElements: payLoad.megaContent.contentElements, 1239 contentType: payLoad.megaContentType, 1240 } 1241 1242 vueInstance.showTemplateContent( templateData ); 1243 } ); 1244 1245 jetMenu.eventBus.$on( 'closeMenu', function( payLoad ) { 1246 1247 if ( vueInstance.$root.menuOptions.menuUniqId !== payLoad.menuUniqId ) { 1248 return; 1249 } 1250 1251 vueInstance.closeMenu(); 1252 } ); 1253 1254 }, 1255 1256 watch: { 1257 menuOpen: function( curr, prev ) { 1258 1259 if ( curr ) { 1260 jetMenu.$body.addClass( 'jet-mobile-menu-visible' ); 1261 1262 if ( 'slide-out' === this.$root.menuOptions.menuLayout ) { 1263 jetMenu.$body.addClass( 'jet-menu-body-blocker' ); 1264 } 1265 1266 this.initTemplatesContent(); 1267 } 1268 1269 if ( ! curr ) { 1270 jetMenu.$body.removeClass( 'jet-mobile-menu-visible' ); 1271 1272 if ( 'slide-out' === this.$root.menuOptions.menuLayout ) { 1273 jetMenu.$body.removeClass( 'jet-menu-body-blocker' ); 1274 } 1275 1276 this.clearStates(); 1277 } 1278 } 1279 }, 1280 1281 computed: { 1282 instanceClass: function() { 1283 1284 let classes = [ 1285 'jet-mobile-menu__instance', 1286 'jet-mobile-menu__instance--' + this.$root.menuOptions.menuLayout + '-layout', 1287 this.$root.menuOptions.menuPosition + '-container-position', 1288 ( this.$root.menuOptions.togglePosition || 'default' ) + '-toggle-position', 1289 this.$root.menuOptions.fillSvgIcon ? 'fill-svg-icon' : '', 1290 ]; 1291 1292 return classes; 1293 }, 1294 1295 menuContainerVisible: function() { 1296 return this.menuOpen && !this.instanceLoadStatus; 1297 }, 1298 1299 menuId: function() { 1300 1301 if ( this.$root.menuOptions.mobileMenuId && window.jetMenuPublicSettings.isMobile === 'true' ) { 1302 return this.$root.menuOptions.mobileMenuId; 1303 } 1304 1305 return this.$root.menuOptions.menuId; 1306 }, 1307 1308 coverVisible: function() { 1309 1310 let avaliableForLayout = [ 1311 'slide-out' 1312 ]; 1313 1314 return avaliableForLayout.includes( this.$root.menuOptions.menuLayout ); 1315 }, 1316 1317 itemsList: function() { 1318 1319 if ( ! this.children ) { 1320 return this.itemsRawData; 1321 } 1322 1323 return this.children; 1324 }, 1325 1326 isClose: function() { 1327 let avaliableForLayout = [ 1328 'slide-out' 1329 ]; 1330 1331 return avaliableForLayout.includes( this.$root.menuOptions.menuLayout ); 1332 }, 1333 1334 isBack: function() { 1335 return this.children || this.templateVisible ? true : false; 1336 }, 1337 1338 isBreadcrumbs: function() { 1339 return this.$root.menuOptions.useBreadcrumb && 0 !== this.breadcrumbsData.length ? true : false; 1340 }, 1341 1342 breadcrumbsPathData: function() { 1343 1344 if ( 'minimal' === this.$root.$root.menuOptions.breadcrumbPath && 1 < this.breadcrumbsData.length ) { 1345 return this.breadcrumbsData.filter( ( item, index, breadcrumbsData ) => { 1346 return index === breadcrumbsData.length - 1; 1347 } ); 1348 } 1349 1350 return this.breadcrumbsData; 1351 }, 1352 1353 depth: function() { 1354 return this.trail.length; 1355 }, 1356 1357 containerPosition: function() { 1358 return this.$root.menuOptions.menuPosition; 1359 }, 1360 1361 showAnimation: function() { 1362 1363 let animation = false;
1364 1365 switch( this.$root.menuOptions.menuLayout ) { 1366 1367 case 'slide-out': 1368 animation = 'right' === this.containerPosition ? 'menu-container-left-animation' : 'menu-container-right-animation'; 1369 break; 1370 1371 case 'dropdown': 1372 animation = 'menu-container-dropdown-animation'; 1373 break; 1374 1375 case 'push': 1376 animation = 'menu-container-expand-animation'; 1377 break; 1378 } 1379 1380 return animation; 1381 }, 1382 1383 toggleClosedIcon: function() { 1384 return this.$root.refsHtml.toggleClosedIcon || ''; 1385 }, 1386 1387 toggleOpenedIcon: function() { 1388 return this.$root.refsHtml.toggleOpenedIcon || ''; 1389 }, 1390 1391 toggleText: function() { 1392 return '' !== this.$root.menuOptions.toggleText ? this.$root.menuOptions.toggleText : false; 1393 }, 1394 1395 closeIcon: function() { 1396 return this.$root.refsHtml.closeIcon || ''; 1397 }, 1398 1399 backIcon: function() { 1400 let backIcon = this.$root.refsHtml.backIcon || '', 1401 backText = '' !== this.$root.menuOptions.backText ? '<span>' + this.$root.menuOptions.backText + '</span>' : '', 1402 backHtml = backIcon + backText; 1403 1404 return backHtml; 1405 }, 1406 1407 backText: function() { 1408 return '' !== this.$root.menuOptions.backText ? this.$root.menuOptions.backText : false; 1409 }, 1410 1411 breadcrumbIcon: function() { 1412 return this.$root.refsHtml.breadcrumbIcon || ''; 1413 }, 1414 1415 loaderColor: function() { 1416 return this.$root.menuOptions.loaderColor || '#3a3a3a'; 1417 }, 1418 1419 toggleLoaderVisible: function() { 1420 return this.$root.menuOptions.toggleLoader && this.instanceLoadStatus && this.menuOpen ? true : false; 1421 }, 1422 1423 headerTemplateVisible: function() { 1424 return this.headerContent ? true : false; 1425 }, 1426 1427 beforeTemplateVisible: function() { 1428 return this.beforeContent ? true : false; 1429 }, 1430 1431 afterTemplateVisible: function() { 1432 return this.afterContent ? true : false; 1433 } 1434 1435 }, 1436 1437 methods: { 1438 menuToggle: function() { 1439 this.menuOpen = ! this.menuOpen; 1440 }, 1441 1442 closeMenu: function() { 1443 this.menuOpen = false; 1444 }, 1445 1446 clearStates: function() { 1447 this.trail = []; 1448 this.children = false; 1449 this.breadcrumbsData = []; 1450 this.templateVisible = false; 1451 }, 1452 1453 goBack: function() { 1454 1455 this.animation = 'items-prev-animation'; 1456 1457 if ( ! this.templateVisible ) { 1458 this.$delete( this.trail, this.trail.length - 1 ); 1459 this.children = this.trail.slice(-1)[0] || false; 1460 } else { 1461 this.templateVisible = false; 1462 } 1463 1464 this.$delete(this.breadcrumbsData, this.breadcrumbsData.length - 1); 1465 }, 1466 1467 escapeKeyHandler: function() { 1468 1469 if ( this.isBack ) { 1470 this.goBack(); 1471 } else { 1472 this.closeMenu(); 1473 } 1474 }, 1475 1476 showTemplateContent: function( templateData = {} ) { 1477 let vueInstance = this; 1478 1479 this.$nextTick( function() { 1480 let $templateContainer = $( vueInstance.$refs['template-content'] ).find( '.jet-mobile-menu__template-content' ); 1481 1482 jetMenu.megaContentRender( $templateContainer, templateData ); 1483 } ); 1484 }, 1485 1486 initTemplatesContent: function() { 1487 let vueInstance = this; 1488 1489 this.$nextTick( function() { 1490 1491 if ( vueInstance.headerContent ) { 1492 let $headerContainer = $( vueInstance.$refs['header-template-content'] ); 1493 1494 jetMenu.megaContentRender( $headerContainer, { contentType: 'elementor' } ); 1495 } 1496 1497 if ( vueInstance.beforeContent ) { 1498 let $beforeContainer = $( vueInstance.$refs['before-template-content'] ); 1499 1500 jetMenu.megaContentRender( $beforeContainer, { contentType: 'elementor' } ); 1501 } 1502 1503 if ( vueInstance.afterContent ) { 1504 let $afterContainer = $( vueInstance.$refs['after-template-content'] ); 1505 1506 jetMenu.megaContentRender( $afterContainer, { contentType: 'elementor' } ); 1507 } 1508 } ); 1509 }, 1510 1511 breadcrumbHandle: function( index ) { 1512 1513 if ( index === this.breadcrumbsData.length ) { 1514 return; 1515 } 1516 1517 if ( 'minimal' === this.$root.menuOptions.breadcrumbPath ) { 1518 this.goBack(); 1519 1520 return; 1521 } 1522 1523 this.animation = 'items-prev-animation'; 1524 this.trail = this.trail.slice( 0, index ); 1525 this.children = this.trail.slice( -1 )[0] || false; 1526 this.templateVisible = false;
1527 this.breadcrumbsData = this.breadcrumbsData.slice( 0, index ); 1528 } 1529 1530 } 1531 }); 1532 }, 1533 1534 loadScriptAsync: function( script, uri ) { 1535 1536 if ( jetMenu.addedScripts.hasOwnProperty( script ) ) { 1537 return script; 1538 } 1539 1540 jetMenu.addedScripts[ script ] = uri; 1541 1542 return new Promise( function( resolve, reject ) { 1543 var tag = document.createElement( 'script' ); 1544 1545 tag.src = uri; 1546 tag.async = true; 1547 tag.onload = function() { 1548 resolve( script ); 1549 }; 1550 1551 document.head.appendChild( tag ); 1552 } ); 1553 }, 1554 1555 loadStyle: function( style, uri ) { 1556 1557 if ( jetMenu.addedStyles.hasOwnProperty( style ) && jetMenu.addedStyles[ style ] === uri) { 1558 return style; 1559 } 1560 1561 jetMenu.addedStyles[ style ] = uri; 1562 1563 return new Promise( function( resolve, reject ) { 1564 var tag = document.createElement( 'link' ); 1565 1566 tag.id = style; 1567 tag.rel = 'stylesheet'; 1568 tag.href = uri; 1569 tag.type = 'text/css'; 1570 tag.media = 'all'; 1571 tag.onload = function() { 1572 resolve( style ); 1573 }; 1574 1575 document.head.appendChild( tag ); 1576 }); 1577 }, 1578 1579 megaContentRender: function( $templateContainer, templateData = {} ) { 1580 1581 if ( templateData.content ) { 1582 $templateContainer.html( templateData.content ); 1583 } 1584 1585 const data = { 1586 $container: $templateContainer, 1587 ...templateData 1588 } 1589 1590 Promise.all( jetMenu.addedAssetsPromises ).then( function( value ) { 1591 // Before ajax frontend init 1592 $( window ).trigger( 'jet-menu/ajax/frontend-init/before', data ); 1593 1594 // Frontend init 1595 $( window ).trigger( 'jet-menu/ajax/frontend-init', data ); 1596 1597 // after ajax frontend init 1598 $( window ).trigger( 'jet-menu/ajax/frontend-init/after', data ); 1599 }, function( reason ) { 1600 console.log( 'Script Loaded Error' ); 1601 }); 1602 }, 1603 1604 maybeElementorFrontendInit: function( $templateContainer ) { 1605 1606 $templateContainer.find( 'div[data-element_type]' ).each( function() { 1607 var $this = $( this ), 1608 elementType = $this.data( 'element_type' ); 1609 1610 if ( ! elementType ) { 1611 return; 1612 } 1613 1614 try { 1615 if ( 'widget' === elementType ) { 1616 elementType = $this.data( 'widget_type' ); 1617 1618 if ( window.elementorFrontend && window.elementorFrontend.hooks ) { 1619 window.elementorFrontend.hooks.doAction( 'frontend/element_ready/widget', $this, $ ); 1620 } 1621 } 1622 1623 if ( window.elementorFrontend && window.elementorFrontend.hooks ) { 1624 window.elementorFrontend.hooks.doAction( 'frontend/element_ready/global', $this, $ ); 1625 window.elementorFrontend.hooks.doAction( 'frontend/element_ready/' + elementType, $this, $ ); 1626 } 1627 1628 } catch ( err ) { 1629 console.log(err); 1630 $this.remove(); 1631 1632 return false; 1633 } 1634 } ); 1635 }, 1636 1637 maybeDefaultFrontendInit: function ( payload ) { 1638 const contentElements = payload.contentElements || [], 1639 $container = payload.$container; 1640 1641 $container.find( '[data-is-block*="/"]' ).each( ( index, el ) => { 1642 window.JetPlugins.hooks.doAction( window.JetPlugins.hookNameFromBlock( el.dataset.isBlock ), jQuery( el ) ); 1643 } ); 1644 }, 1645 1646 getUniqId: function() { 1647 return Math.random().toString( 36 ).substr( 2, 9 ); 1648 }, 1649 1650 }; 1651 1652 jetMenu.init(); 1653 1654} ( jQuery ) ); 1655
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.