/** submenu hover adjustment. automatically move up a submenu to fit into screen when some part of it goes beneath window. pass a "true" value as an argument and submenu will have native browser scrollbars when necessary. */ (function($ , undefined) { if( ace.vars['very_old_ie'] ) return; //ignore ie7 & below var hastouch = ace.vars['touch']; var nativescroll = ace.vars['old_ie'] || hastouch; var is_element_pos = 'getcomputedstyle' in window ? //el.offsetheight is used to force redraw and recalculate 'el.style.position' esp. for webkit! function(el, pos) { el.offsetheight; return window.getcomputedstyle(el).position == pos } : function(el, pos) { el.offsetheight; return $(el).css('position') == pos } $(window).on('resize.sidebar.ace_hover', function() { $('.sidebar[data-sidebar-hover=true]').ace_sidebar_hover('update_vars').ace_sidebar_hover('reset'); }) $(document).on('settings.ace.ace_hover', function(e, event_name, event_val) { if(event_name == 'sidebar_collapsed') $('.sidebar[data-sidebar-hover=true]').ace_sidebar_hover('reset'); else if(event_name == 'navbar_fixed') $('.sidebar[data-sidebar-hover=true]').ace_sidebar_hover('update_vars'); }) var sidebars = []; function sidebar_hover(sidebar , settings) { var self = this, that = this; var attrib_values = ace.helper.getattrsettings(sidebar, $.fn.ace_sidebar_hover.defaults); this.settings = $.extend({}, $.fn.ace_sidebar_hover.defaults, settings, attrib_values); var $sidebar = $(sidebar), nav_list = $sidebar.find('.nav-list').get(0); $sidebar.attr('data-sidebar-hover', 'true'); sidebars.push($sidebar); var sidebar_vars = {}; var old_ie = ace.vars['old_ie']; var scroll_right = false; //scroll style class if(hastouch) self.settings.sub_hover_delay = parseint(math.max(self.settings.sub_hover_delay, 2500));//for touch device, delay is at least 2.5sec var $window = $(window); //navbar used for adding extra offset from top when adjusting submenu var $navbar = $('.navbar').eq(0); var navbar_fixed = $navbar.css('position') == 'fixed'; this.update_vars = function() { navbar_fixed = $navbar.css('position') == 'fixed'; } self.dirty = false; //on window resize or sidebar expand/collapse a previously "pulled up" submenu should be reset back to its default position //for example if "pulled up" in "responsive-min" mode, in "fullmode" should not remain "pulled up" this.reset = function() { if( self.dirty == false ) return; self.dirty = false;//so don't reset is not called multiple times in a row! $sidebar.find('.submenu').each(function() { var $sub = $(this), li = $sub.parent(); $sub.css({'top': '', 'bottom': '', 'max-height': ''}); if($sub.hasclass('ace-scroll')) { $sub.ace_scroll('disable'); } else { $sub.removeclass('sub-scroll'); } if( is_element_pos(this, 'absolute') ) $sub.addclass('can-scroll'); else $sub.removeclass('can-scroll'); li.removeclass('pull_up').find('.menu-text:first').css('margin-top', ''); }) $sidebar.find('.hover-show').removeclass('hover-show hover-shown hover-flip'); } this.updatestyle = function(newstyle) { sub_scroll_style = newstyle; $sidebar.find('.submenu.ace-scroll').ace_scroll('update', {styleclass: newstyle}); } this.changedir = function(dir) { scroll_right = (dir === 'right'); } //update submenu scrollbars on submenu hide & show var lastscrollheight = -1; //hide scrollbars if it's going to be not needed anymore! if(!nativescroll) $sidebar.on('hide.ace.submenu.sidebar_hover', '.submenu', function(e) { if(lastscrollheight < 1) return; e.stoppropagation(); var $sub = $(this).closest('.ace-scroll.can-scroll'); if($sub.length == 0 || !is_element_pos($sub[0], 'absolute')) return; if($sub[0].scrollheight - this.scrollheight < lastscrollheight) { $sub.ace_scroll('disable'); } }); //reset scrollbars if(!nativescroll) $sidebar.on('shown.ace.submenu.sidebar_hover hidden.ace.submenu.sidebar_hover', '.submenu', function(e) { if(lastscrollheight < 1) return; var $sub = $(this).closest('.ace-scroll.can-scroll'); if($sub.length == 0 || !is_element_pos($sub[0], 'absolute') ) return; var sub_h = $sub[0].scrollheight; if(lastscrollheight > 14 && sub_h - lastscrollheight > 4) { $sub.ace_scroll('enable').ace_scroll('reset');//don't update track position } else { $sub.ace_scroll('disable'); } }); /////////////////////// var currentscroll = -1; //some mobile browsers don't have mouseenter var event_1 = !hastouch ? 'mouseenter.sub_hover' : 'touchstart.sub_hover';// pointerdown.sub_hover'; var event_2 = !hastouch ? 'mouseleave.sub_hover' : 'touchend.sub_hover touchcancel.sub_hover';// pointerup.sub_hover pointercancel.sub_hover'; $sidebar.on(event_1, '.nav-list li, .sidebar-shortcuts', function (e) { sidebar_vars = $sidebar.ace_sidebar('vars'); //ignore if collapsible mode (mobile view .navbar-collapse) so it doesn't trigger submenu movements //or return if horizontal but not mobile_view (style 1&3) if( sidebar_vars['collapsible'] /**|| sidebar_vars['horizontal']*/ ) return; var $this = $(this); var shortcuts = false; var has_hover = $this.hasclass('hover'); var sub = $this.find('> .submenu').get(0); if( !(sub || ((this.parentnode == nav_list || has_hover || (shortcuts = $this.hasclass('sidebar-shortcuts'))) /**&& sidebar_vars['minimized']*/)) ) { if(sub) $(sub).removeclass('can-scroll'); return;//include .compact and .hover state as well? } var target_element = sub, is_abs = false; if( !target_element && this.parentnode == nav_list ) target_element = $this.find('> a > .menu-text').get(0); if( !target_element && shortcuts ) target_element = $this.find('.sidebar-shortcuts-large').get(0); if( (!target_element || !(is_abs = is_element_pos(target_element, 'absolute'))) && !has_hover ) { if(sub) $(sub).removeclass('can-scroll'); return; } var sub_hide = getsubhide(this); //var show_sub = false; if(sub) { if(is_abs) { self.dirty = true; var newscroll = ace.helper.scrolltop(); //if submenu is becoming visible for first time or document has been scrolled, then adjust menu if( !sub_hide.is_visible() || (!hastouch && newscroll != currentscroll) || old_ie ) { //try to move/adjust submenu if the parent is a li.hover or if submenu is minimized //if( is_element_pos(sub, 'absolute') ) {//for example in small device .hover > .submenu may not be absolute anymore! $(sub).addclass('can-scroll'); //show_sub = true; if(!old_ie && !hastouch) adjust_submenu.call(this, sub); else { //because ie8 needs some time for submenu to be displayed and real value of sub.scrollheight be kicked in var that = this; settimeout(function() { adjust_submenu.call(that, sub) }, 0) } //} //else $(sub).removeclass('can-scroll'); } currentscroll = newscroll; } else { $(sub).removeclass('can-scroll'); } } //if(show_sub) sub_hide.show(); }).on(event_2, '.nav-list li, .sidebar-shortcuts', function (e) { sidebar_vars = $sidebar.ace_sidebar('vars'); if( sidebar_vars['collapsible'] /**|| sidebar_vars['horizontal']*/ ) return; if( !$(this).hasclass('hover-show') ) return; getsubhide(this).hidedelay(); }); function subhide(li_sub) { var self = li_sub, $self = $(self); var timer = null; var visible = false; this.show = function() { if(timer != null) cleartimeout(timer); timer = null; $self.addclass('hover-show hover-shown'); visible = true; //let's hide .hover-show elements that are not .hover-shown anymore (i.e. marked for hiding in hidedelay) for(var i = 0; i < sidebars.length ; i++) { sidebars[i].find('.hover-show').not('.hover-shown').each(function() { getsubhide(this).hide(); }) } } this.hide = function() { visible = false; $self.removeclass('hover-show hover-shown hover-flip'); if(timer != null) cleartimeout(timer); timer = null; var sub = $self.find('> .submenu').get(0); if(sub) getsubscroll(sub, 'hide'); } this.hidedelay = function(callback) { if(timer != null) cleartimeout(timer); $self.removeclass('hover-shown');//somehow marked for hiding timer = settimeout(function() { visible = false; $self.removeclass('hover-show hover-flip'); timer = null; var sub = $self.find('> .submenu').get(0); if(sub) getsubscroll(sub, 'hide'); if(typeof callback === 'function') callback.call(this); }, that.settings.sub_hover_delay); } this.is_visible = function() { return visible; } } function getsubhide(el) { var sub_hide = $(el).data('subhide'); if(!sub_hide) $(el).data('subhide', (sub_hide = new subhide(el))); return sub_hide; } function getsubscroll(el, func) { var sub_scroll = $(el).data('ace_scroll'); if(!sub_scroll) return false; if(typeof func === 'string') { sub_scroll[func](); return true; } return sub_scroll; } function adjust_submenu(sub) { var $li = $(this); var $sub = $(sub); sub.style.top = ''; sub.style.bottom = ''; var menu_text = null if( sidebar_vars['minimized'] && (menu_text = $li.find('.menu-text').get(0)) ) { //2nd level items don't have .menu-text menu_text.style.margintop = ''; } var scroll = ace.helper.scrolltop(); var navbar_height = 0; var $scroll = scroll; if( navbar_fixed ) { navbar_height = sidebar.offsettop;//$navbar.height(); $scroll += navbar_height + 1; //let's avoid our submenu from going below navbar //because of chrome z-index stacking issue and firefox's normal .submenu over fixed .navbar flicker issue } var off = $li.offset(); off.top = parseint(off.top); var extra = 0, parent_height; sub.style.maxheight = '';//otherwise scrollheight won't be consistent in consecutive calls!? var sub_h = sub.scrollheight; var parent_height = $li.height(); if(menu_text) { extra = parent_height; off.top += extra; } var sub_bottom = parseint(off.top + sub_h) var move_up = 0; var winh = $window.height(); //if the bottom of menu is going to go below visible window var top_space = parseint(off.top - $scroll - extra);//available space on top var win_space = winh;//available window space var horizontal = sidebar_vars['horizontal'], horizontal_sub = false; if(horizontal && this.parentnode == nav_list) { move_up = 0;//don't move up first level submenu in horizontal mode off.top += $li.height(); horizontal_sub = true;//first level submenu } if(!horizontal_sub && (move_up = (sub_bottom - (winh + scroll))) >= 0 ) { //don't move up more than available space move_up = move_up < top_space ? move_up : top_space; //move it up a bit more if there's empty space if(move_up == 0) move_up = 20; if(top_space - move_up > 10) { move_up += parseint(math.min(25, top_space - move_up)); } //move it down if submenu's bottom is going above parent li if(off.top + (parent_height - extra) > (sub_bottom - move_up)) { move_up -= (off.top + (parent_height - extra) - (sub_bottom - move_up)); } if(move_up > 0) { sub.style.top = -(move_up) + 'px'; if( menu_text ) { menu_text.style.margintop = -(move_up) + 'px'; } } } if(move_up < 0) move_up = 0;//when it goes below var pull_up = move_up > 0 && move_up > parent_height - 20; if(pull_up) { $li.addclass('pull_up'); } else $li.removeclass('pull_up'); //flip submenu if out of window width if(horizontal) { if($li.parent().parent().hasclass('hover-flip')) $li.addclass('hover-flip');//if a parent is already flipped, flip it then! else { var sub_off = $sub.offset(); var sub_w = $sub.width(); var win_w = $window.width(); if(sub_off.left + sub_w > win_w) { $li.addclass('hover-flip'); } } } //don't add scrollbars if it contains .hover menus var has_hover = $li.hasclass('hover') && !sidebar_vars['mobile_view']; if(has_hover && $sub.find('> li > .submenu').length > 0) return; //if( ) { var scroll_height = (win_space - (off.top - scroll)) + (move_up); //if after scroll, the submenu is above parent li, then move it down var tmp = move_up - scroll_height; if(tmp > 0 && tmp < parent_height) scroll_height += parseint(math.max(parent_height, parent_height - tmp)); scroll_height -= 5; if(scroll_height < 90) { return; } var ace_scroll = false; if(!nativescroll) { ace_scroll = getsubscroll(sub); if(ace_scroll == false) { $sub.ace_scroll({ //hideonidle: true, observecontent: true, detached: true, updatepos: false, reset: true, mousewheellock: true, styleclass: self.settings.sub_scroll_style }); ace_scroll = getsubscroll(sub); var track = ace_scroll.get_track(); if(track) { //detach it from body and insert it after submenu for better and cosistent positioning $sub.after(track); } } ace_scroll.update({size: scroll_height}); } else { $sub .addclass('sub-scroll') .css('max-height', (scroll_height)+'px') } lastscrollheight = scroll_height; if(!nativescroll && ace_scroll) { if(scroll_height > 14 && sub_h - scroll_height > 4) { ace_scroll.enable() ace_scroll.reset(); } else { ace_scroll.disable(); } ////////////////////////////////// var track = ace_scroll.get_track(); if(track) { track.style.top = -(move_up - extra - 1) + 'px'; var off = $sub.position(); var left = off.left if( !scroll_right ) { left += ($sub.outerwidth() - ace_scroll.track_size()); } else { left += 2; } track.style.left = parseint(left) + 'px'; if(horizontal_sub) {//first level submenu track.style.left = parseint(left - 2) + 'px'; track.style.top = parseint(off.top) + (menu_text ? extra - 2 : 0) + 'px'; } } } //} //again force redraw for safari! if( ace.vars['safari'] ) { ace.helper.redraw(sub) } } } ///////////////////////////////////////////// $.fn.ace_sidebar_hover = function (option, value) { var method_call; var $set = this.each(function () { var $this = $(this); var data = $this.data('ace_sidebar_hover'); var options = typeof option === 'object' && option; if (!data) $this.data('ace_sidebar_hover', (data = new sidebar_hover(this, options))); if (typeof option === 'string' && typeof data[option] === 'function') { method_call = data[option](value); } }); return (method_call === undefined) ? $set : method_call; } $.fn.ace_sidebar_hover.defaults = { 'sub_sub_hover_delay': 750, 'sub_scroll_style': 'no-track scroll-thin' } })(window.jquery);