function om_maximenu_longmenu_js in OM Maximenu 8

Same name and namespace in other branches

1. 6 inc/om_maximenu.effects.inc \om_maximenu_longmenu_js()
2. 7 inc/om_maximenu.effects.inc \om_maximenu_longmenu_js()

Scroll long menu if it won't fit the container

1 call to om_maximenu_longmenu_js()

om_maximenu_asset_loader in inc/om_maximenu.render.inc

Loads styles and js

File

inc/om_maximenu.effects.inc, line 557

OM Maximenu Effects

Code

function om_maximenu_longmenu_js($menu = NULL, $longmenu = NULL) {
  $longmenu_hover_scroll_js = "\n    jQuery(document).ready(function(\$){\n      if (\$('#om-maximenu-" . $menu . "').hasClass('om-maximenu-row')) {\n        var wrapper = \$('#om-maximenu-" . $menu . " .om-menu-ul-wrapper'), \n            wrapper_width = wrapper.width(),\n            ul = \$('#om-menu-" . $menu . "'), \n            ul_width = 0;\n        \n        \$('#om-menu-" . $menu . " .om-leaf').each(function(index) {\n          ul_width += parseInt(\$(this).width(), 10);\n        });\n        \n        // this will only be triggered when links won't fit inside the wrapper\n        if (ul_width > wrapper_width) {\n\n          var li_first = ul.find('li:first-child').width(),\n              li_last = ul.find('li:last-child').width();\n            \n          // scroll adjustment to end link\n          ul.width(ul_width + 30 + 'px')\n        \n          wrapper.css({overflow: 'hidden'});\n        \n          wrapper.mousemove(function(e){\n            var wrapper_offset = wrapper.offset();\n            var mouse = (e.pageX - wrapper_offset.left) * (ul_width - wrapper_width) / wrapper_width;\n\n            // scroll adjustments for both ends\n            if(mouse < li_first) mouse = (e.pageX - wrapper_offset.left - li_first) * (ul_width - wrapper_width) / wrapper_width;\n            if(mouse > li_first) mouse = (e.pageX - wrapper_offset.left) * (ul_width - wrapper_width + li_last + 15) / wrapper_width;\n\n            wrapper.scrollLeft(mouse);\n          });\n        }\n      }\n      else if (\$('#om-maximenu-" . $menu . "').hasClass('om-maximenu-column')) {\n        var wrapper = \$('#om-maximenu-" . $menu . " .om-menu-ul-wrapper'), \n            wrapper_height = wrapper.height(),\n            ul = \$('#om-menu-" . $menu . "'), \n            ul_height = 0;\n\n        \$('#om-menu-" . $menu . " .om-leaf').each(function(index) {\n          ul_height += parseInt(\$(this).height(), 10);\n        });\n\n        // this will only be triggered when links won't fit inside the wrapper\n        if (ul_height > wrapper_height) {\n        \n          var li_first = ul.find('li:first-child').height(),\n              li_last = ul.find('li:last-child').height();\n\n          // scroll adjustment to end link\n          ul.height(ul_height + 30 + 'px')\n                             \n          wrapper.css({overflow: 'hidden'});\n\n          wrapper.mousemove(function(e){\n            var wrapper_offset = wrapper.offset();\n            var mouse = (e.pageY - wrapper_offset.top) * (ul_height - wrapper_height) / wrapper_height;\n\n            // scroll adjustments for both ends\n            if(mouse < li_first) mouse = (e.pageY - wrapper_offset.top - 5) * (ul_height - wrapper_height) / wrapper_height;\n\n            wrapper.scrollTop(mouse);\n          });\n        }\n      }\n    }); ";
  $longmenu_prev_next_scroll_js = "\n    jQuery(document).ready(function(\$){\n      if (\$('#om-maximenu-" . $menu . "').hasClass('om-maximenu-row')) {\n        var wrapper = \$('#om-maximenu-" . $menu . " .om-menu-ul-wrapper'), \n            wrapper_width = wrapper.width(),\n            ul = \$('#om-menu-" . $menu . "'), \n            ul_width = 0;\n        \n        \$('#om-menu-" . $menu . " .om-leaf').each(function(index) {\n          ul_width += parseInt(\$(this).width(), 10);\n        });\n  \n        // this will only be triggered when links won't fit inside the wrapper\n        if (ul_width > wrapper_width) {\n\n          var wrapper_height = 30,\n              li_first = ul.find('li:first-child').width(),\n              li_last = ul.find('li:last-child').width();\n                    \n          wrapper.height(wrapper_height + 'px');\n\n          \$('#om-menu-" . $menu . "-ul-wrapper').css('margin', '0 30px');        \n          \$('#om-menu-" . $menu . "').css('position', 'absolute');\n        \n          // scroll adjustment to end link\n          ul.width(ul_width + 30 + 'px')\n                \n          wrapper.css({overflow: 'hidden'});\n        \n          \$('#om-maximenu-" . $menu . "').prepend('<div class=\"om-menu-scroller om-menu-previous\"><</div>');\n          \$('#om-maximenu-" . $menu . "').append('<div class=\"om-menu-scroller om-menu-next\">></div>');\n        \n          \$('#om-maximenu-" . $menu . "').serialScroll({\n            target:'#om-menu-" . $menu . "-ul-wrapper',\n            items:'li.om-leaf', \n            prev:'div.om-menu-previous',\n            next:'div.om-menu-next',\n            axis:'xy',\n            navigation:'',\n            duration: 250,\n            force:true,\n            onBefore:function( e, elem, \$pane, \$items, pos ){\n              e.preventDefault();\n              if( this.blur ) this.blur();\n            },\n            onAfter:function( elem ){\n              //'this' is the element being scrolled (\$pane) not jqueryfied\n            }\n          });\n        }\n      }\n      else if (\$('#om-maximenu-" . $menu . "').hasClass('om-maximenu-column')) {\n        var wrapper = \$('#om-maximenu-" . $menu . " .om-menu-ul-wrapper'), \n            wrapper_height = wrapper.height(),\n            ul = \$('#om-menu-" . $menu . "'), \n            ul_height = 0;\n\n        \$('#om-menu-" . $menu . " .om-leaf').each(function(index) {\n          ul_height += parseInt(\$(this).height(), 10);\n        });\n  \n        // this will only be triggered when links won't fit inside the wrapper\n        if (ul_height > wrapper_height) {\n\n          var wrapper_width = wrapper.width(),\n              li_first = ul.find('li:first-child').height(),\n              li_last = ul.find('li:last-child').height();\n\n          \$('#om-menu-" . $menu . "').css('position', 'absolute');\n                      \n          // scroll adjustment to end link\n          ul.height(ul_height + 30 + 'px');\n                  \n          wrapper.css({overflow: 'hidden'});\n\n          \$('#om-maximenu-" . $menu . "').prepend('<div class=\"om-menu-scroller om-menu-previous\">^</div>');\n          //\$('#om-maximenu-" . $menu . "').append('<div class=\"om-menu-scroller om-menu-next\">v</div>');\n          \$('<div class=\"om-menu-scroller om-menu-next\">v</div>').insertAfter(wrapper);\n                    \n          \$('#om-maximenu-" . $menu . " .om-menu-scroller').width(wrapper_width);\n          \n          \$('#om-maximenu-" . $menu . "').serialScroll({\n            target:'#om-menu-" . $menu . "-ul-wrapper',\n            items:'li.om-leaf', \n            prev:'div.om-menu-previous',\n            next:'div.om-menu-next',\n            axis:'xy',\n            navigation:'',\n            duration: 250,\n            force:true,\n            onBefore:function( e, elem, \$pane, \$items, pos ){\n              e.preventDefault();\n              if( this.blur ) this.blur();\n            },\n            onAfter:function( elem ){\n              //'this' is the element being scrolled (\$pane) not jqueryfied\n            }\n          });\n        }\n      }\n    }); ";
  if ($longmenu == 'hover') {
    drupal_add_js($longmenu_hover_scroll_js, "inline");
  }
  elseif ($longmenu == 'prev_next') {
    drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.scrollTo.min.js');
    drupal_add_js(OM_MAXIMENU_PATH . '/contrib/jquery.serialScroll.min.js');
    drupal_add_js($longmenu_prev_next_scroll_js, "inline");
  }
}