ace.sidebar-scroll-2.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. /**
  2. <b>Scrollbars for sidebar</b>. This approach can be used on fixed or normal sidebar.
  3. It uses <u>"overflow:hidden"</u> so you can't use <u>.hover</u> submenus and it will be disabled when sidebar is minimized.
  4. It may also be slightly faster especially when resizing browser window.
  5. Needs some work! Has a few issues!
  6. */
  7. (function($ , undefined) {
  8. //if( !$.fn.ace_scroll ) return;
  9. var old_safari = ace.vars['safari'] && navigator.userAgent.match(/version\/[1-5]/i)
  10. //NOTE
  11. //Safari on windows has not been updated for a long time.
  12. //And it has a problem when sidebar is fixed&scrollable and there is a CSS3 animation inside page content.
  13. //Very probably windows users of safari have migrated to another browser by now!
  14. var is_element_pos =
  15. 'getComputedStyle' in window ?
  16. //el.offsetHeight is used to force redraw and recalculate 'el.style.position' esp. for webkit!
  17. function(el, pos) { el.offsetHeight; return window.getComputedStyle(el).position == pos }
  18. :
  19. function(el, pos) { el.offsetHeight; return $(el).css('position') == pos }
  20. function Sidebar_Scroll(sidebar , settings) {
  21. var self = this;
  22. var $window = $(window);
  23. var $sidebar = $(sidebar),
  24. $nav = $sidebar.find('.nav-list'),
  25. $toggle = $sidebar.find('.sidebar-toggle').eq(0),
  26. $shortcuts = $sidebar.find('.sidebar-shortcuts').eq(0),
  27. nav = $nav.get(0);
  28. if(!nav) return;
  29. var ace_sidebar = $sidebar.ace_sidebar('ref');
  30. $sidebar.attr('data-sidebar-scroll', 'true');
  31. var submenu_hover = function() {
  32. return $sidebar.first('li.hover > .submenu').css('position') == 'absolute'
  33. }
  34. var scroll_div = null,
  35. scroll_content = null,
  36. scroll_content_div = null,
  37. bar = null,
  38. ace_scroll = null;
  39. this.is_scrolling = false;
  40. var _initiated = false;
  41. this.sidebar_fixed = is_element_pos(sidebar, 'fixed');
  42. var $avail_height, $content_height;
  43. var scroll_to_active = settings.scroll_to_active || ace.helper.boolAttr(sidebar, 'data-scroll-to-active') || false,
  44. include_shortcuts = settings.include_shortcuts || ace.helper.boolAttr(sidebar, 'data-scroll-include-shortcuts') || false,
  45. include_toggle = settings.include_toggle || ace.helper.boolAttr(sidebar, 'data-scroll-include-toggle') || false,
  46. scroll_style = settings.scroll_style || $sidebar.attr('data-scroll-style') || '';
  47. this.only_if_fixed = (settings.only_if_fixed || ace.helper.boolAttr(sidebar, 'data-scroll-only-fixed')) && true;
  48. var lockAnyway = settings.mousewheel_lock || ace.helper.boolAttr(sidebar, 'data-mousewheel-lock') || false;
  49. var available_height = function() {
  50. //available window space
  51. var offset = $nav.parent().offset();//because `$nav.offset()` considers the "scrolled top" amount as well
  52. if(self.sidebar_fixed) offset.top -= ace.helper.scrollTop();
  53. return $window.innerHeight() - offset.top - ( include_toggle ? 0 : $toggle.outerHeight() );
  54. }
  55. var content_height = function() {
  56. return nav.scrollHeight;
  57. }
  58. var initiate = function(on_page_load) {
  59. if( _initiated ) return;
  60. if( (self.only_if_fixed && !self.sidebar_fixed) || submenu_hover() ) return;//eligible??
  61. //return if we want scrollbars only on "fixed" sidebar and sidebar is not "fixed" yet!
  62. //initiate once
  63. $nav.wrap('<div class="nav-wrap-up" />');
  64. if(include_shortcuts && $shortcuts.length != 0) $nav.parent().prepend($shortcuts);
  65. if(include_toggle && $toggle.length != 0) $nav.parent().append($toggle);
  66. scroll_div = $nav.parent()
  67. .ace_scroll({
  68. size: available_height(),
  69. reset: true,
  70. mouseWheelLock: true,
  71. lockAnyway: lockAnyway,
  72. styleClass: scroll_style,
  73. hoverReset: false
  74. })
  75. .closest('.ace-scroll').addClass('nav-scroll');
  76. ace_scroll = scroll_div.data('ace_scroll');
  77. scroll_content = scroll_div.find('.scroll-content').eq(0);
  78. if(old_safari && !include_toggle) {
  79. var toggle = $toggle.get(0);
  80. if(toggle) scroll_content.on('scroll.safari', function() {
  81. ace.helper.redraw(toggle);
  82. });
  83. }
  84. _initiated = true;
  85. //if the active item is not visible, scroll down so that it becomes visible
  86. //only the first time, on page load
  87. if(on_page_load == true) {
  88. self.reset();//try resetting at first
  89. if( scroll_to_active ) {
  90. self.scroll_to_active();
  91. }
  92. scroll_to_active = false;
  93. }
  94. }
  95. this.scroll_to_active = function() {
  96. if( !ace_scroll || !ace_scroll.is_active() ) return;
  97. try {
  98. //sometimes there's no active item or not 'offsetTop' property
  99. var $active;
  100. var vars = ace_sidebar['vars']();
  101. var nav_list = $sidebar.find('.nav-list')
  102. if(vars['minimized'] && !vars['collapsible']) {
  103. $active = nav_list.find('> .active')
  104. }
  105. else {
  106. $active = $nav.find('> .active.hover')
  107. if($active.length == 0) $active = $nav.find('.active:not(.open)')
  108. }
  109. var top = $active.outerHeight();
  110. nav_list = nav_list.get(0);
  111. var active = $active.get(0);
  112. while(active != nav_list) {
  113. top += active.offsetTop;
  114. active = active.parentNode;
  115. }
  116. var scroll_amount = top - scroll_div.height();
  117. if(scroll_amount > 0) {
  118. scroll_content.scrollTop(scroll_amount);
  119. }
  120. }catch(e){}
  121. }
  122. this.reset = function(recalc) {
  123. if(recalc === true) {
  124. this.sidebar_fixed = is_element_pos(sidebar, 'fixed');
  125. }
  126. if( (this.only_if_fixed && !this.sidebar_fixed) || submenu_hover() ) {
  127. this.disable();
  128. return;//eligible??
  129. }
  130. //return if we want scrollbars only on "fixed" sidebar and sidebar is not "fixed" yet!
  131. if( !_initiated ) initiate();
  132. //initiate scrollbars if not yet
  133. $sidebar.addClass('sidebar-scroll');
  134. var vars = ace_sidebar['vars']();
  135. //enable if:
  136. //menu is not minimized
  137. //menu is not collapsible mode (responsive navbar-collapse mode which has default browser scroller)
  138. //menu is not horizontal or horizontal but mobile view (which is not navbar-collapse)
  139. //and available height is less than nav's height
  140. var enable_scroll = !vars['minimized'] && !vars['collapsible'] && !vars['horizontal']
  141. && ($avail_height = available_height()) < ($content_height = nav.parentNode.scrollHeight);
  142. this.is_scrolling = true;
  143. if( enable_scroll && ace_scroll ) {
  144. //scroll_content_div.css({height: $content_height, width: 8});
  145. //scroll_div.prev().css({'max-height' : $avail_height})
  146. ace_scroll.update({size: $avail_height});
  147. ace_scroll.enable();
  148. ace_scroll.reset();
  149. }
  150. if( !enable_scroll || !ace_scroll.is_active() ) {
  151. if(this.is_scrolling) this.disable();
  152. }
  153. //return is_scrolling;
  154. }
  155. this.disable = function() {
  156. this.is_scrolling = false;
  157. if(ace_scroll) ace_scroll.disable();
  158. $sidebar.removeClass('sidebar-scroll');
  159. }
  160. this.prehide = function(height_change) {
  161. if(!this.is_scrolling || ace_sidebar.get('minimized')) return;//when minimized submenu's toggle should have no effect
  162. if(content_height() + height_change < available_height()) {
  163. this.disable();
  164. }
  165. else if(height_change < 0) {
  166. //if content height is decreasing
  167. //let's move nav down while a submenu is being hidden
  168. var scroll_top = scroll_content.scrollTop() + height_change
  169. if(scroll_top < 0) return;
  170. scroll_content.scrollTop(scroll_top);
  171. }
  172. }
  173. this._reset = function(recalc) {
  174. if(recalc === true) {
  175. this.sidebar_fixed = is_element_pos(sidebar, 'fixed');
  176. }
  177. if(ace.vars['webkit'])
  178. setTimeout(function() { self.reset() } , 0);
  179. else this.reset();
  180. }
  181. this.get = function(name) {
  182. if(this.hasOwnProperty(name)) return this[name];
  183. }
  184. this.set = function(name, value) {
  185. if(this.hasOwnProperty(name)) this[name] = value;
  186. }
  187. this.ref = function() {
  188. //return a reference to self
  189. return this;
  190. }
  191. this.updateStyle = function(styleClass) {
  192. if(ace_scroll == null) return;
  193. ace_scroll.update({styleClass: styleClass});
  194. }
  195. //change scrollbar size after a submenu is hidden/shown
  196. //but don't change if sidebar is minimized
  197. $sidebar.on('hidden.ace.submenu.sidebar_scroll shown.ace.submenu.sidebar_scroll', '.submenu', function(e) {
  198. e.stopPropagation();
  199. if( !ace_sidebar.get('minimized') ) {
  200. //webkit has a little bit of a glitch!!!
  201. self._reset();
  202. }
  203. })
  204. initiate(true);//true = on_page_load
  205. }
  206. //reset on document and window changes
  207. $(document).on('settings.ace.sidebar_scroll', function(ev, event_name, event_val){
  208. $('.sidebar[data-sidebar-scroll=true]').each(function() {
  209. var $this = $(this);
  210. var sidebar_scroll = $this.ace_sidebar_scroll('ref');
  211. if( event_name == 'sidebar_collapsed' ) {
  212. if( $this.attr('data-sidebar-hover') == 'true' ) $this.ace_sidebar_hover('reset');
  213. if(event_val == true) sidebar_scroll.disable();//disable scroll if collapsed
  214. else sidebar_scroll.reset();
  215. }
  216. else if( event_name === 'sidebar_fixed' || event_name === 'navbar_fixed' ) {
  217. var is_scrolling = sidebar_scroll.get('is_scrolling');
  218. var sidebar_fixed = is_element_pos(this, 'fixed')
  219. sidebar_scroll.set('sidebar_fixed', sidebar_fixed);
  220. if(sidebar_fixed && !is_scrolling) {
  221. sidebar_scroll.reset();
  222. }
  223. else if( !sidebar_fixed && sidebar_scroll.get('only_if_fixed') ) {
  224. sidebar_scroll.disable();
  225. }
  226. }
  227. })
  228. })
  229. $(window).on('resize.ace.sidebar_scroll', function(){
  230. $('.sidebar[data-sidebar-scroll=true]').each(function() {
  231. var sidebar_scroll = $(this).ace_sidebar_scroll('ref');
  232. var sidebar_fixed = is_element_pos(this, 'fixed')
  233. sidebar_scroll.set('sidebar_fixed', sidebar_fixed);
  234. sidebar_scroll.reset();
  235. });
  236. })
  237. /////////////////////////////////////////////
  238. if(!$.fn.ace_sidebar_scroll)
  239. $.fn.ace_sidebar_scroll = function (option, value) {
  240. var method_call;
  241. var $set = this.each(function () {
  242. var $this = $(this);
  243. var data = $this.data('ace_sidebar_scroll');
  244. var options = typeof option === 'object' && option;
  245. if (!data) $this.data('ace_sidebar_scroll', (data = new Sidebar_Scroll(this, options)));
  246. if (typeof option === 'string' && typeof data[option] === 'function') {
  247. method_call = data[option](value);
  248. }
  249. });
  250. return (method_call === undefined) ? $set : method_call;
  251. };
  252. })(window.jQuery);