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