/* * SmartMenus jQuery v0.9.5 * http://www.smartmenus.org/ * * Copyright 2014 Vasil Dinkov, Vadikom Web Ltd. * http://vadikom.com/ * * Released under the MIT license: * http://www.opensource.org/licenses/MIT */ (function($) { var menuTrees = [], IE = !!window.createPopup, // we need to detect it, unfortunately IElt9 = IE && !document.defaultView, IElt8 = IE && !document.querySelector, IE6 = IE && typeof document.documentElement.currentStyle.minWidth == 'undefined', mouse = false, // optimize for touch by default - we will detect for mouse input mouseDetectionEnabled = false; // Handle detection for mouse input (i.e. desktop browsers, tablets with a mouse, etc.) function initMouseDetection(disable) { if (!mouseDetectionEnabled && !disable) { // if we get two consecutive mousemoves within 2 pixels from each other and within 300ms, we assume a real mouse/cursor is present // in practice, this seems like impossible to trick unintentianally with a real mouse and a pretty safe detection on touch devices (even with older browsers that do not support touch events) var firstTime = true, lastMove = null; $(document).bind({ 'mousemove.smartmenus_mouse': function(e) { var thisMove = { x: e.pageX, y: e.pageY, timeStamp: new Date().getTime() }; if (lastMove) { var deltaX = Math.abs(lastMove.x - thisMove.x), deltaY = Math.abs(lastMove.y - thisMove.y); if ((deltaX > 0 || deltaY > 0) && deltaX <= 2 && deltaY <= 2 && thisMove.timeStamp - lastMove.timeStamp <= 300) { mouse = true; // if this is the first check after page load, check if we are not over some item by chance and call the mouseenter handler if yes if (firstTime) { var $a = $(e.target).closest('a'); if ($a.is('a')) { $.each(menuTrees, function() { if ($.contains(this.$root[0], $a[0])) { this.itemEnter({ currentTarget: $a[0] }); return false; } }); } firstTime = false; } } } lastMove = thisMove; }, 'touchstart.smartmenus_mouse pointerover.smartmenus_mouse MSPointerOver.smartmenus_mouse': function(e) { if (!/^(4|mouse)$/.test(e.originalEvent.pointerType)) { mouse = false; } } }); mouseDetectionEnabled = true; } else if (mouseDetectionEnabled && disable) { $(document).unbind('.smartmenus_mouse'); mouseDetectionEnabled = false; } }; $.SmartMenus = function(elm, options) { this.$root = $(elm); this.opts = options; this.rootId = ''; // internal this.$subArrow = null; this.subMenus = []; // all sub menus in the tree (UL elms) in no particular order (only real - e.g. UL's in mega sub menus won't be counted) this.activatedItems = []; // stores last activated A's for each level this.visibleSubMenus = []; // stores visible sub menus UL's this.showTimeout = 0; this.hideTimeout = 0; this.scrollTimeout = 0; this.clickActivated = false; this.zIndexInc = 0; this.$firstLink = null; // we'll use these for some tests this.$firstSub = null; // at runtime so we'll cache them this.disabled = false; this.$disableOverlay = null; this.init(); }; $.extend($.SmartMenus, { hideAll: function() { $.each(menuTrees, function() { this.menuHideAll(); }); }, destroy: function() { while (menuTrees.length) { menuTrees[0].destroy(); } initMouseDetection(true); }, prototype: { init: function(refresh) { var self = this; if (!refresh) { menuTrees.push(this); this.rootId = (new Date().getTime() + Math.random() + '').replace(/\D/g, ''); if (this.$root.hasClass('sm-rtl')) { this.opts.rightToLeftSubMenus = true; } // init root (main menu) this.$root .data('smartmenus', this) .attr('data-smartmenus-id', this.rootId) .dataSM('level', 1) .bind({ 'mouseover.smartmenus focusin.smartmenus': $.proxy(this.rootOver, this), 'mouseout.smartmenus focusout.smartmenus': $.proxy(this.rootOut, this) }) .delegate('a', { 'mouseenter.smartmenus': $.proxy(this.itemEnter, this), 'mouseleave.smartmenus': $.proxy(this.itemLeave, this), 'mousedown.smartmenus': $.proxy(this.itemDown, this), 'focus.smartmenus': $.proxy(this.itemFocus, this), 'blur.smartmenus': $.proxy(this.itemBlur, this), 'click.smartmenus': $.proxy(this.itemClick, this), 'touchend.smartmenus': $.proxy(this.itemTouchEnd, this) }); var eNamespace = '.smartmenus' + this.rootId; // hide menus on tap or click outside the root UL if (this.opts.hideOnClick) { $(document).bind('touchstart' + eNamespace, $.proxy(this.docTouchStart, this)) .bind('touchmove' + eNamespace, $.proxy(this.docTouchMove, this)) .bind('touchend' + eNamespace, $.proxy(this.docTouchEnd, this)) // for Opera Mobile < 11.5, webOS browser, etc. we'll check click too .bind('click' + eNamespace, $.proxy(this.docClick, this)); } // hide sub menus on resize $(window).bind('resize' + eNamespace + ' orientationchange' + eNamespace, $.proxy(this.winResize, this)); if (this.opts.subIndicators) { this.$subArrow = $('').addClass('sub-arrow'); if (this.opts.subIndicatorsText) { this.$subArrow.html(this.opts.subIndicatorsText); } } // make sure mouse detection is enabled initMouseDetection(); } // init sub menus this.$firstSub = this.$root.find('ul').each(function() { self.menuInit($(this)); }).eq(0); this.$firstLink = this.$root.find('a').eq(0); // find current item if (this.opts.markCurrentItem) { var reDefaultDoc = /(index|default)\.[^#\?\/]*/i, reHash = /#.*/, locHref = window.location.href.replace(reDefaultDoc, ''), locHrefNoHash = locHref.replace(reHash, ''); this.$root.find('a').each(function() { var href = this.href.replace(reDefaultDoc, ''), $this = $(this); if (href == locHref || href == locHrefNoHash) { $this.addClass('current'); if (self.opts.markCurrentTree) { $this.parents('li').each(function() { var $this = $(this); if ($this.dataSM('sub')) { $this.children('a').addClass('current'); } }); } } }); } }, destroy: function() { this.menuHideAll(); this.$root .removeData('smartmenus') .removeAttr('data-smartmenus-id') .removeDataSM('level') .unbind('.smartmenus') .undelegate('.smartmenus'); var eNamespace = '.smartmenus' + this.rootId; $(document).unbind(eNamespace); $(window).unbind(eNamespace); if (this.opts.subIndicators) { this.$subArrow = null; } var self = this; $.each(this.subMenus, function() { if (this.hasClass('mega-menu')) { this.find('ul').removeDataSM('in-mega'); } if (this.dataSM('shown-before')) { if (IElt8) { this.children().css({ styleFloat: '', width: '' }); } if (self.opts.subMenusMinWidth || self.opts.subMenusMaxWidth) { if (!IE6) { this.css({ width: '', minWidth: '', maxWidth: '' }).removeClass('sm-nowrap'); } else { this.css({ width: '', overflowX: '', overflowY: '' }).children().children('a').css('white-space', ''); } } if (this.dataSM('scroll-arrows')) { this.dataSM('scroll-arrows').remove(); } this.css({ zIndex: '', top: '', left: '', marginLeft: '', marginTop: '', display: '' }); } if (self.opts.subIndicators) { this.dataSM('parent-a').removeClass('has-submenu').children('span.sub-arrow').remove(); } this.removeDataSM('shown-before') .removeDataSM('ie-shim') .removeDataSM('scroll-arrows') .removeDataSM('parent-a') .removeDataSM('level') .removeDataSM('beforefirstshowfired') .parent().removeDataSM('sub'); }); if (this.opts.markCurrentItem) { this.$root.find('a.current').removeClass('current'); } this.$root = null; this.$firstLink = null; this.$firstSub = null; if (this.$disableOverlay) { this.$disableOverlay.remove(); this.$disableOverlay = null; } menuTrees.splice($.inArray(this, menuTrees), 1); }, disable: function(noOverlay) { if (!this.disabled) { this.menuHideAll(); // display overlay over the menu to prevent interaction if (!noOverlay && !this.opts.isPopup && this.$root.is(':visible')) { var pos = this.$root.offset(); this.$disableOverlay = $('
').css({ position: 'absolute', top: pos.top, left: pos.left, width: this.$root.outerWidth(), height: this.$root.outerHeight(), zIndex: this.getStartZIndex() + 1, opacity: 0 }).appendTo(document.body); } this.disabled = true; } }, docClick: function(e) { // hide on any click outside the menu or on a menu link if (this.visibleSubMenus.length && !$.contains(this.$root[0], e.target) || $(e.target).is('a')) { this.menuHideAll(); } }, docTouchEnd: function(e) { if (!this.lastTouch) { return; } if (this.visibleSubMenus.length && (this.lastTouch.x2 === undefined || this.lastTouch.x1 == this.lastTouch.x2) && (this.lastTouch.y2 === undefined || this.lastTouch.y1 == this.lastTouch.y2) && (!this.lastTouch.target || !$.contains(this.$root[0], this.lastTouch.target))) { if (this.hideTimeout) { clearTimeout(this.hideTimeout); this.hideTimeout = 0; } // hide with a delay to prevent triggering accidental unwanted click on some page element var self = this; this.hideTimeout = setTimeout(function() { self.menuHideAll(); }, 350); } this.lastTouch = null; }, docTouchMove: function(e) { if (!this.lastTouch) { return; } var touchPoint = e.originalEvent.touches[0]; this.lastTouch.x2 = touchPoint.pageX; this.lastTouch.y2 = touchPoint.pageY; }, docTouchStart: function(e) { var touchPoint = e.originalEvent.touches[0]; this.lastTouch = { x1: touchPoint.pageX, y1: touchPoint.pageY, target: touchPoint.target }; }, enable: function() { if (this.disabled) { if (this.$disableOverlay) { this.$disableOverlay.remove(); this.$disableOverlay = null; } this.disabled = false; } }, getHeight: function($elm) { return this.getOffset($elm, true); }, // returns precise width/height float values in IE9+, FF4+, recent WebKit // http://vadikom.com/dailies/offsetwidth-offsetheight-useless-in-ie9-firefox4/ getOffset: function($elm, height) { var old; if ($elm.css('display') == 'none') { old = { position: $elm[0].style.position, visibility: $elm[0].style.visibility }; $elm.css({ position: 'absolute', visibility: 'hidden' }).show(); } var defaultView = $elm[0].ownerDocument.defaultView, compStyle = defaultView && defaultView.getComputedStyle && defaultView.getComputedStyle($elm[0], null), val = compStyle && parseFloat(compStyle[height ? 'height' : 'width']); if (val) { val += parseFloat(compStyle[height ? 'paddingTop' : 'paddingLeft']) + parseFloat(compStyle[height ? 'paddingBottom' : 'paddingRight']) + parseInt(compStyle[height ? 'borderTopWidth' : 'borderLeftWidth']) + parseInt(compStyle[height ? 'borderBottomWidth' : 'borderRightWidth']); } else { val = height ? $elm[0].offsetHeight : $elm[0].offsetWidth; } if (old) { $elm.hide().css(old); } return val; }, getWidth: function($elm) { return this.getOffset($elm); }, getStartZIndex: function() { var zIndex = parseInt(this.$root.css('z-index')); return !isNaN(zIndex) ? zIndex : 1; }, handleEvents: function() { return !this.disabled && this.isCSSOn(); }, handleItemEvents: function($a) { return this.handleEvents() && !this.isLinkInMegaMenu($a); }, isCollapsible: function() { return this.$firstSub.css('position') == 'static'; }, isCSSOn: function() { return this.$firstLink.css('display') == 'block'; }, isFixed: function() { return this.$root.css('position') == 'fixed'; }, isLinkInMegaMenu: function($a) { return !$a.parent().parent().dataSM('level'); }, isTouchMode: function() { return !mouse || this.isCollapsible(); }, itemActivate: function($a) { var $li = $a.parent(), $ul = $li.parent(), level = $ul.dataSM('level'); // if for some reason the parent item is not activated (e.g. this is an API call to activate the item), activate all parent items first if (level > 1 && (!this.activatedItems[level - 2] || this.activatedItems[level - 2][0] != $ul.dataSM('parent-a')[0])) { var self = this; $($ul.parentsUntil('[data-smartmenus-id]', 'ul').get().reverse()).add($ul).each(function() { self.itemActivate($(this).dataSM('parent-a')); }); } // hide any visible deeper level sub menus if (this.visibleSubMenus.length > level) { for (var i = this.visibleSubMenus.length - 1, l = !this.activatedItems[level - 1] || this.activatedItems[level - 1][0] != $a[0] ? level - 1 : level; i > l; i--) { this.menuHide(this.visibleSubMenus[i]); } } // save new active item and sub menu for this level this.activatedItems[level - 1] = $a; this.visibleSubMenus[level - 1] = $ul; if (this.$root.triggerHandler('activate.smapi', $a[0]) === false) { return; } // show the sub menu if this item has one var $sub = $li.dataSM('sub'); if ($sub && (this.isTouchMode() || (!this.opts.showOnClick || this.clickActivated))) { this.menuShow($sub); } }, itemBlur: function(e) { var $a = $(e.currentTarget); if (!this.handleItemEvents($a)) { return; } this.$root.triggerHandler('blur.smapi', $a[0]); }, itemClick: function(e) { var $a = $(e.currentTarget); if (!this.handleItemEvents($a)) { return; } $a.removeDataSM('mousedown'); if (this.$root.triggerHandler('click.smapi', $a[0]) === false) { return false; } var $sub = $a.parent().dataSM('sub'); if (this.isTouchMode()) { // undo fix: prevent the address bar on iPhone from sliding down when expanding a sub menu if ($a.dataSM('href')) { $a.attr('href', $a.dataSM('href')).removeDataSM('href'); } // if the sub is not visible if ($sub && (!$sub.dataSM('shown-before') || !$sub.is(':visible'))) { // try to activate the item and show the sub this.itemActivate($a); // if "itemActivate" showed the sub, prevent the click so that the link is not loaded // if it couldn't show it, then the sub menus are disabled with an !important declaration (e.g. via mobile styles) so let the link get loaded if ($sub.is(':visible')) { return false; } } } else if (this.opts.showOnClick && $a.parent().parent().dataSM('level') == 1 && $sub) { this.clickActivated = true; this.menuShow($sub); return false; } if ($a.hasClass('disabled')) { return false; } if (this.$root.triggerHandler('select.smapi', $a[0]) === false) { return false; } }, itemDown: function(e) { var $a = $(e.currentTarget); if (!this.handleItemEvents($a)) { return; } $a.dataSM('mousedown', true); }, itemEnter: function(e) { var $a = $(e.currentTarget); if (!this.handleItemEvents($a)) { return; } if (!this.isTouchMode()) { if (this.showTimeout) { clearTimeout(this.showTimeout); this.showTimeout = 0; } var self = this; this.showTimeout = setTimeout(function() { self.itemActivate($a); }, this.opts.showOnClick && $a.parent().parent().dataSM('level') == 1 ? 1 : this.opts.showTimeout); } this.$root.triggerHandler('mouseenter.smapi', $a[0]); }, itemFocus: function(e) { var $a = $(e.currentTarget); if (!this.handleItemEvents($a)) { return; } // fix (the mousedown check): in some browsers a tap/click produces consecutive focus + click events so we don't need to activate the item on focus if ((!this.isTouchMode() || !$a.dataSM('mousedown')) && (!this.activatedItems.length || this.activatedItems[this.activatedItems.length - 1][0] != $a[0])) { this.itemActivate($a); } this.$root.triggerHandler('focus.smapi', $a[0]); }, itemLeave: function(e) { var $a = $(e.currentTarget); if (!this.handleItemEvents($a)) { return; } if (!this.isTouchMode()) { if ($a[0].blur) { $a[0].blur(); } if (this.showTimeout) { clearTimeout(this.showTimeout); this.showTimeout = 0; } } $a.removeDataSM('mousedown'); this.$root.triggerHandler('mouseleave.smapi', $a[0]); }, itemTouchEnd: function(e) { var $a = $(e.currentTarget); if (!this.handleItemEvents($a)) { return; } // prevent the address bar on iPhone from sliding down when expanding a sub menu var $sub = $a.parent().dataSM('sub'); if ($a.attr('href').charAt(0) !== '#' && $sub && (!$sub.dataSM('shown-before') || !$sub.is(':visible'))) { $a.dataSM('href', $a.attr('href')); $a.attr('href', '#'); } }, menuFixLayout: function($ul) { // fixes a menu that is being shown for the first time if (!$ul.dataSM('shown-before')) { $ul.hide().dataSM('shown-before', true); // fix the layout of the items in IE<8 if (IElt8) { $ul.children().css({ styleFloat: 'left', width: '100%' }); } } }, menuHide: function($sub) { if (this.$root.triggerHandler('beforehide.smapi', $sub[0]) === false) { return; } $sub.stop(true, true); if ($sub.is(':visible')) { var complete = function() { // unset z-index if (IElt9) { $sub.parent().css('z-index', ''); } else { $sub.css('z-index', ''); } }; // if sub is collapsible (mobile view) if (this.isCollapsible()) { if (this.opts.collapsibleHideFunction) { this.opts.collapsibleHideFunction.call(this, $sub, complete); } else { $sub.hide(this.opts.collapsibleHideDuration, complete); } } else { if (this.opts.hideFunction) { this.opts.hideFunction.call(this, $sub, complete); } else { $sub.hide(this.opts.hideDuration, complete); } } // remove IE iframe shim if ($sub.dataSM('ie-shim')) { $sub.dataSM('ie-shim').remove(); } // deactivate scrolling if it is activated for this sub if ($sub.dataSM('scroll')) { $sub.unbind('.smartmenus_scroll').removeDataSM('scroll').dataSM('scroll-arrows').hide(); } // unhighlight parent item $sub.dataSM('parent-a').removeClass('highlighted'); var level = $sub.dataSM('level'); this.activatedItems.splice(level - 1, 1); this.visibleSubMenus.splice(level - 1, 1); this.$root.triggerHandler('hide.smapi', $sub[0]); } }, menuHideAll: function() { if (this.showTimeout) { clearTimeout(this.showTimeout); this.showTimeout = 0; } // hide all subs for (var i = this.visibleSubMenus.length - 1; i > 0; i--) { this.menuHide(this.visibleSubMenus[i]); } // hide root if it's popup if (this.opts.isPopup) { this.$root.stop(true, true); if (this.$root.is(':visible')) { if (this.opts.hideFunction) { this.opts.hideFunction.call(this, this.$root); } else { this.$root.hide(this.opts.hideDuration); } // remove IE iframe shim if (this.$root.dataSM('ie-shim')) { this.$root.dataSM('ie-shim').remove(); } } } this.activatedItems = []; this.visibleSubMenus = []; this.clickActivated = false; // reset z-index increment this.zIndexInc = 0; }, menuIframeShim: function($ul) { // create iframe shim for the menu if (IE && this.opts.overlapControlsInIE && !$ul.dataSM('ie-shim')) { $ul.dataSM('ie-shim', $('