File "frontend.js"
Full Path: /www/wwwroot/shphe-en.com/wp-content/plugins/bb-plugin/modules/menu/js/frontend.js
File size: 6.98 KB
MIME-type: --
Charset: utf-8
(function($) {
/**
* Class for Menu Module
*
* @since 1.6.1
*/
FLBuilderMenu = function( settings ){
// set params
this.nodeClass = '.fl-node-' + settings.id;
this.wrapperClass = this.nodeClass + ' .fl-menu';
this.type = settings.type;
this.mobileToggle = settings.mobile;
this.breakPoints = settings.breakPoints;
this.currentBrowserWidth = $( window ).width();
// initialize the menu
this._initMenu();
// check if viewport is resizing
$( window ).on( 'resize', $.proxy( function( e ){
var width = $( window ).width();
// if screen width is resized, reload the menu
if( width != this.currentBrowserWidth ){
this._resizeDebounce();
this.currentBrowserWidth = width;
}
}, this ) );
};
FLBuilderMenu.prototype = {
nodeClass : '',
wrapperClass : '',
type : '',
breakPoints : {},
$submenus : null,
/**
* Check if the screen size fits a mobile viewport.
*
* @since 1.6.1
* @return bool
*/
_isMobile: function(){
return window.innerWidth < this.breakPoints.small ? true : false;
},
/**
* When screen is resized, reloads the menu in a determinded interval.
*
* @see this._initMenu()
* @see this._clickOrHover()
* @since 1.6.1
* @return void
*/
_resizeDebounce: function(){
clearTimeout( this.resizeTimer );
this.resizeTimer = setTimeout( $.proxy( function() {
this._initMenu();
this._clickOrHover();
}, this ), 250 );
},
/**
* Initialize the toggle logic for the menu.
*
* @see this._isMobile()
* @see this._menuOnCLick()
* @see this._clickOrHover()
* @see this._submenuOnRight()
* @see this._toggleForMobile()
* @since 1.6.1
* @return void
*/
_initMenu: function(){
if( this._isMobile() || this.type == 'accordion' ){
$( this.wrapperClass ).off( 'mouseenter mouseleave' );
this._menuOnClick();
this._clickOrHover();
} else {
$( this.wrapperClass ).off( 'click' );
this._submenuOnRight();
}
if( this.mobileToggle != 'expanded' ){
this._toggleForMobile();
}
},
/**
* Logic for submenu toggling on accordions or mobile menus (vertical, horizontal)
*
* @since 1.6.1
* @return void
*/
_menuOnClick: function(){
$( this.wrapperClass ).off().on( 'click', '.fl-has-submenu-container', $.proxy( function( e ){
var $link = $( e.target ).parents( '.fl-has-submenu' ).first(),
$subMenu = $link.children( '.sub-menu' ).first(),
$href = $link.children('.fl-has-submenu-container').first().find('> a').attr('href');
if( !$subMenu.is(':visible') || $(e.target).hasClass('fl-menu-toggle') ){
e.preventDefault();
}
else {
window.location.href = $href;
return;
}
if ($(this.wrapperClass).hasClass('fl-menu-accordion-collapse')) {
if ( !$link.parents('.menu-item').hasClass('fl-active') ) {
$('.fl-active', this.wrapperClass).not($link).removeClass('fl-active');
$('.sub-menu', this.wrapperClass).not($subMenu).slideUp('normal');
}
else if ($link.parents('.menu-item').hasClass('fl-active') && $link.parent('.sub-menu').length) {
var $mainMenuParent = $( e.target ).parents( '.fl-has-submenu.fl-active' ).last(),
$activeSubMenu = $mainMenuParent.children( '.sub-menu' ).last();
$('.fl-active', this.wrapperClass).not($link).not($mainMenuParent).removeClass('fl-active');
$('.sub-menu', this.wrapperClass).not($subMenu).not($activeSubMenu).slideUp('normal');
}
}
$subMenu.slideToggle();
$link.toggleClass( 'fl-active' );
}, this ) );
},
/**
* Changes general styling and behavior of menus based on mobile / desktop viewport.
*
* @see this._isMobile()
* @since 1.6.1
* @return void
*/
_clickOrHover: function(){
this.$submenus = this.$submenus || $( this.wrapperClass ).find( '.sub-menu' );
var $wrapper = $( this.wrapperClass ),
$menu = $wrapper.find( '.menu' );
$li = $wrapper.find( '.fl-has-submenu' );
if( this._isMobile() ){
$li.each( function( el ){
if( !$(this).hasClass('fl-active') ){
$(this).find( '.sub-menu' ).fadeOut();
}
} );
}
},
/**
* Logic to prevent submenus to go outside viewport boundaries.
*
* @since 1.6.1
* @return void
*/
_submenuOnRight: function(){
$( this.wrapperClass )
.on( 'mouseenter', '.fl-has-submenu', $.proxy( function( e ){
if( $ ( e.currentTarget ).find('.sub-menu').length === 0 ) {
return;
}
var $link = $( e.currentTarget ),
$parent = $link.parent(),
$subMenu = $link.find( '.sub-menu' ),
subMenuWidth = $subMenu.width(),
subMenuPos = 0,
winWidth = $( window ).width();
if( $link.closest( '.fl-menu-submenu-right' ).length !== 0) {
$link.addClass( 'fl-menu-submenu-right' );
} else if( $( 'body' ).hasClass( 'rtl' ) ) {
subMenuPos = $parent.is( '.sub-menu' ) ?
$parent.offset().left - subMenuWidth:
$link.offset().left - subMenuWidth;
if( subMenuPos <= 0 ) {
$link.addClass( 'fl-menu-submenu-right' );
}
} else {
subMenuPos = $parent.is( '.sub-menu' ) ?
$parent.offset().left + $parent.width() + subMenuWidth :
$link.offset().left + subMenuWidth;
if( subMenuPos > winWidth ) {
$link.addClass('fl-menu-submenu-right');
}
}
}, this ) )
.on( 'mouseleave', '.fl-has-submenu', $.proxy( function( e ){
$( e.currentTarget ).removeClass( 'fl-menu-submenu-right' );
}, this ) );
},
/**
* Logic for the mobile menu button.
*
* @since 1.6.1
* @return void
*/
_toggleForMobile: function(){
var $wrapper = $( this.wrapperClass ),
$menu = $wrapper.children( '.menu' );
if( this._isMobile() ){
if( !$wrapper.find( '.fl-menu-mobile-toggle' ).hasClass( 'fl-active' ) ){
$menu.css({ display: 'none' });
}
$wrapper.on( 'click', '.fl-menu-mobile-toggle', function( e ){
$( this ).toggleClass( 'fl-active' );
$menu.slideToggle();
} );
$menu.on( 'click', '.menu-item > a[href*="#"]', function(e){
var $href = $(this).attr('href'),
$targetID = '';
if ( $href !== '#' ) {
$targetID = $href.split('#')[1];
if ( $('body').find('#'+ $targetID).length > 0 ) {
e.preventDefault();
$( this ).toggleClass( 'fl-active' );
$menu.slideToggle('fast', function(){
setTimeout(function(){
$('html, body').animate({
scrollTop: $('#'+ $targetID).offset().top
}, 1000, function() {
window.location.hash = $targetID;
});
}, 500);
});
}
}
});
} else {
$wrapper.find( '.fl-menu-mobile-toggle' ).removeClass( 'fl-active' );
$menu.css({ display: '' });
}
}
};
})(jQuery);