Merge remote-tracking branch 'thunder/MAGETWO-49796' into bugfixes-delivery

Author: Bohdan Korablov

lib/web/mage/menu.js

@@ -59,6 +59,7 @@ define([
             }
 
             this._assignControls()._listen();
+            this._setActiveMenu();
         },
 
         /**
@@ -108,6 +109,111 @@ define([
             }
         },
 
+        /**
+         * Tries to figure out the active category for current page and add appropriate classes:
+         *  - 'active' class for active category
+         *  - 'has-active' class for all parents of active category
+         *
+         *  First, checks whether current URL is URL of category page,
+         *  otherwise tries to retrieve category URL in case of current URL is product view page URL
+         *  which has category tree path in it.
+         *
+         * @return void
+         * @private
+         */
+        _setActiveMenu: function () {
+            var currentUrl = window.location.href.split('?')[0];
+
+            if (!this._setActiveMenuForCategory(currentUrl)) {
+                this._setActiveMenuForProduct(currentUrl);
+            }
+        },
+
+        /**
+         * Looks for category with provided URL and adds 'active' CSS class to it if it was not set before.
+         * If menu item has parent categories, sets 'has-active' class to all af them.
+         *
+         * @param {String} url - possible category URL
+         * @returns {Boolean} - true if active category was founded by provided URL, otherwise return false
+         * @private
+         */
+        _setActiveMenuForCategory: function (url) {
+            var activeCategoryLink = this.element.find('a[href="' + url + '"]'),
+                classes,
+                classNav;
+
+            if (!activeCategoryLink || !activeCategoryLink.hasClass('ui-corner-all')) {
+
+                //category was not found by provided URL
+                return false;
+            } else if (!activeCategoryLink.parent().hasClass('active')) {
+                activeCategoryLink.parent().addClass('active');
+                classes = activeCategoryLink.parent().attr('class');
+                classNav = classes.match(/(nav\-)[0-9]+(\-[0-9]+)+/gi);
+
+                if (classNav) {
+                    this._setActiveParent(classNav[0]);
+                }
+            }
+
+            return true;
+        },
+
+        /**
+         * Sets 'has-active' CSS class to all parent categories which have part of provided class in childClassName
+         *
+         * @example
+         *  childClassName - 'nav-1-2-3'
+         *  CSS class 'has-active' will be added to categories have 'nav-1-2' and 'nav-1' classes
+         *
+         * @param {String} childClassName - Class name of active category <li> element
+         * @return void
+         * @private
+         */
+        _setActiveParent: function (childClassName) {
+            var parentElement,
+                parentClass = childClassName.substr(0, childClassName.lastIndexOf('-'));
+
+            if (parentClass.lastIndexOf('-') !== -1) {
+                parentElement = this.element.find('.' + parentClass);
+
+                if (parentElement) {
+                    parentElement.addClass('has-active');
+                }
+                this._setActiveParent(parentClass);
+            }
+        },
+
+        /**
+         * Tries to retrieve category URL from current URL and mark this category as active
+         * @see _setActiveMenuForCategory(url)
+         *
+         * @example
+         *  currentUrl - http://magento.com/category1/category12/product.html,
+         *  category URLs has extensions .phtml - http://magento.com/category1.phtml
+         *  method sets active category which has URL http://magento.com/category1/category12.phtml
+         *
+         * @param {String} currentUrl - current page URL without parameters
+         * @return void
+         * @private
+         */
+        _setActiveMenuForProduct: function (currentUrl) {
+            var categoryUrlExtension,
+                lastUrlSection,
+                possibleCategoryUrl,
+                //retrieve first category URL to know what extension is used for category URLs
+                firstCategoryUrl = this.element.find('> li a').attr('href');
+
+            if (firstCategoryUrl) {
+                lastUrlSection = firstCategoryUrl.substr(firstCategoryUrl.lastIndexOf('/'));
+                categoryUrlExtension = (lastUrlSection.lastIndexOf('.') !== -1)
+                    ? lastUrlSection.substr(lastUrlSection.lastIndexOf('.')) : '';
+
+                possibleCategoryUrl = currentUrl.substr(0, currentUrl.lastIndexOf('/')) + categoryUrlExtension;
+                this._setActiveMenuForCategory(possibleCategoryUrl);
+            }
+        },
+
         /**
          * Add class for expanded option.
          */