MAGETWO-27300: Category menu items go out of screen when page side is reached

- fixed delay function and improved sub-menu reverse

Author: Ihor Melnychenko

lib/web/css/source/lib/_navigation.less

@@ -329,7 +329,6 @@
                 margin: 0 !important;
                 position: absolute;
                 left: 0;
-                top: 100%;
                 z-index: 1;
                 .css(background, @_submenu-background-color);
                 .css(border, @_submenu-border-width @_submenu-border-style @_submenu-border-color);

lib/web/mage/menu.js

@@ -333,23 +333,26 @@ define([
                     }
                 },
                 "mouseenter .ui-menu-item": function (event) {
-                    var target = $(event.currentTarget),
-                        ulWidth = target.find('ul').get(0) ? target.find('ul').get(0).getBoundingClientRect().width : null,
-                        rightThreshold = ulWidth * 2,
-                        leftThreshold = (event.pageX + rightThreshold),
-                        clientWindowWidth = $(window).width();
+                    var target = $(event.currentTarget);
+
+                    if(target.has('ul')){
+                        var ulElement = target.find('ul'),
+                            ulElementWidth = target.find('ul').outerWidth(true),
+                            width = target.outerWidth()*2,
+                            targetPageX = target.offset().left,
+                            rightBound = screen.width;
+
+                        if((ulElementWidth + width + targetPageX)>rightBound){
+                            ulElement.addClass('submenu-reverse');
+                        }
+                        if(targetPageX - ulElementWidth<0){
+                            ulElement.removeClass('submenu-reverse');
+                        }
+                    }
 
                     // Remove ui-state-active class from siblings of the newly focused menu item
                     // to avoid a jump caused by adjacent elements both having a class with a border
                     target.siblings().children(".ui-state-active").removeClass("ui-state-active");
-                    //reverse sub-menus direction from left to right bounds
-                    if (leftThreshold > clientWindowWidth) {
-                        target.find('ul').addClass('submenu-reverse');
-                    }
-                    //redirect reverse
-                    if (event.pageX <= rightThreshold) {
-                        target.find('ul').removeClass('submenu-reverse');
-                    }
                     this.focus(event, target);
                 },
                 "mouseleave": function (event) {
@@ -370,12 +373,13 @@ define([
                 }, 300);
             }
         },
-
-        _delay: function (handler, delay) {
-            handler.apply(this, arguments);
-
-            return setTimeout(function () {
-            }, delay || 0);
+        _delay: function( handler, delay ) {
+            function handlerProxy() {
+                return ( typeof handler === "string" ? instance[ handler ] : handler )
+                    .apply( instance, arguments );
+            }
+            var instance = this;
+            return setTimeout( handlerProxy, delay || 0 );
         }
     });