MAGETWO-71701: [Backport] - Catalog top nav, CSS class not set to active when using Varnish - for 2.1

Author: VladimirZaets

lib/web/mage/menu.js

@@ -2,6 +2,7 @@
  * Copyright © 2013-2017 Magento, Inc. All rights reserved.
  * See COPYING.txt for license details.
  */
+
 define([
     "jquery",
     "matchMedia",
@@ -18,8 +19,12 @@ define([
         options: {
             responsive: false,
             expanded: false,
-            delay: 300
+            mediaBreakpoint: '(max-width: 768px)'
         },
+
+        /**
+         * @private
+         */
         _create: function () {
             var self = this;
 
@@ -29,6 +34,9 @@ define([
             });
         },
 
+        /**
+         * @private
+         */
         _init: function () {
             this._super();
             this.delay = this.options.delay;
@@ -39,7 +47,7 @@ define([
 
             if (this.options.responsive === true) {
                 mediaCheck({
-                    media: '(max-width: 640px)',
+                    media: this.options.mediaBreakpoint,
                     entry: $.proxy(function () {
                         this._toggleMobileMode();
                     }, this),
@@ -50,8 +58,13 @@ define([
             }
 
             this._assignControls()._listen();
+            this._setActiveMenu();
         },
 
+        /**
+         * @return {Object}
+         * @private
+         */
         _assignControls: function () {
             this.controls = {
                 toggleBtn: $('[data-action="toggle-nav"]'),
@@ -61,14 +74,24 @@ define([
             return this;
         },
 
+        /**
+         * @private
+         */
         _listen: function () {
-            var controls = this.controls;
-            var toggle = this.toggle;
+            var controls = this.controls,
+                toggle = this.toggle;
 
-            this._on(controls.toggleBtn, {'click': toggle});
-            this._on(controls.swipeArea, {'swipeleft': toggle});
+            this._on(controls.toggleBtn, {
+                'click': toggle
+            });
+            this._on(controls.swipeArea, {
+                'swipeleft': toggle
+            });
         },
 
+        /**
+         * Toggle.
+         */
         toggle: function () {
             if ($('html').hasClass('nav-open')) {
                 $('html').removeClass('nav-open');
@@ -83,24 +106,142 @@ define([
             }
         },
 
-        //Add class for expanded option
+        /**
+         * 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.
+         */
         isExpanded: function () {
             var subMenus = this.element.find(this.options.menus),
                 expandedMenus = subMenus.find('ul');
 
             expandedMenus.addClass('expanded');
         },
 
+        /**
+         * @param {jQuery.Event} event
+         * @private
+         */
         _activate: function (event) {
             window.location.href = this.active.find('> a').attr('href');
             this.collapseAll(event);
         },
 
+        /**
+         * @param {jQuery.Event} event
+         * @private
+         */
         _keydown: function (event) {
-
             var match, prev, character, skip, regex,
                 preventDefault = true;
 
+            /* eslint-disable max-depth */
+            /**
+             * @param {String} value
+             */
             function escape(value) {
                 return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
             }