From 03f324d324577bec9a7aac88e99f98272cc18a3c Mon Sep 17 00:00:00 2001 From: Romain Ruaud Date: Fri, 2 Dec 2016 13:42:02 +0100 Subject: [PATCH 1/3] Lower complexity for keyboard navigation function. --- .../view/frontend/web/js/form-mini.js | 184 +++++++++++++----- 1 file changed, 138 insertions(+), 46 deletions(-) diff --git a/src/module-elasticsuite-core/view/frontend/web/js/form-mini.js b/src/module-elasticsuite-core/view/frontend/web/js/form-mini.js index 6b61396ea..d388b9eb0 100644 --- a/src/module-elasticsuite-core/view/frontend/web/js/form-mini.js +++ b/src/module-elasticsuite-core/view/frontend/web/js/form-mini.js @@ -1,4 +1,20 @@ +/** + * DISCLAIMER + * + * Do not edit or add to this file if you wish to upgrade Smile Elastic Suite to newer + * versions in the future. + * + * + * @category Smile + * @package Smile\ElasticsuiteCore + * @author Romain Ruaud + * @copyright 2016 Smile + * @license Open Software License ("OSL") v. 3.0 + */ + /*jshint browser:true jquery:true*/ +/*global alert*/ + define([ 'ko', 'jquery', @@ -307,69 +323,145 @@ define([ switch (keyCode) { case $.ui.keyCode.HOME: - this._getFirstVisibleElement().addClass(this.options.selectClass); - this.responseList.selected = this._getFirstVisibleElement(); + this._selectElement(this._getFirstVisibleElement()); break; case $.ui.keyCode.END: - this._getLastElement().addClass(this.options.selectClass); - this.responseList.selected = this._getLastElement(); + this._selectElement(this._getLastElement()); break; case $.ui.keyCode.ESCAPE: this._resetResponseList(true); this.autoComplete.hide(); break; case $.ui.keyCode.ENTER: - if (this.responseList.selected.attr('href') !== undefined) { - window.location = this.responseList.selected.attr('href'); - e.preventDefault(); - return false; - } - this.searchForm.trigger('submit'); + this._validateElement(); break; case $.ui.keyCode.DOWN: - if (this.responseList.indexList) { - if (!this.responseList.selected) { - this._getFirstVisibleElement().addClass(this.options.selectClass); - this.responseList.selected = this._getFirstVisibleElement(); - } - else if (!this._getLastElement().hasClass(this.options.selectClass)) { - var nextElement = this.responseList.selected.next('dd'); - this.responseList.selected.removeClass(this.options.selectClass); - if (nextElement.length === 0) { - nextElement = this.responseList.selected.parent('dl').next('dl').find('dd').first(); - } - this.responseList.selected = nextElement.addClass(this.options.selectClass); - } else { - this.responseList.selected.removeClass(this.options.selectClass); - this._getFirstVisibleElement().addClass(this.options.selectClass); - this.responseList.selected = this._getFirstVisibleElement(); - } - this.element.val(this.responseList.selected.find('.qs-option-name').text()); - this.element.attr('aria-activedescendant', this.responseList.selected.attr('id')); - } + this._navigateDown(); break; case $.ui.keyCode.UP: - if (this.responseList.indexList !== null) { - if (!this._getFirstVisibleElement().hasClass(this.options.selectClass)) { - var prevElement = this.responseList.selected.prev('dd'); - this.responseList.selected.removeClass(this.options.selectClass); - if (prevElement.length === 0) { - prevElement = this.responseList.selected.parent('dl').prev('dl').find('dd').last(); - } - this.responseList.selected = prevElement.addClass(this.options.selectClass); - } else { - this.responseList.selected.removeClass(this.options.selectClass); - this._getLastElement().addClass(this.options.selectClass); - this.responseList.selected = this._getLastElement(); - } - this.element.val(this.responseList.selected.find('.qs-option-name').text()); - this.element.attr('aria-activedescendant', this.responseList.selected.attr('id')); - } + this._navigateUp(); break; default: return true; } }, + + /** + * Validate selection of an element (eg : when ENTER is pressed) + * + * @returns {boolean} + * + * @private + */ + _validateElement: function() { + if (this.responseList.selected.attr('href') !== undefined) { + window.location = this.responseList.selected.attr('href'); + e.preventDefault(); + return false; + } + this.searchForm.trigger('submit'); + }, + + /** + * Process down navigation on autocomplete box + * + * @private + */ + _navigateDown: function() { + if (this.responseList.indexList) { + if (!this.responseList.selected) { + this._getFirstVisibleElement().addClass(this.options.selectClass); + this.responseList.selected = this._getFirstVisibleElement(); + } + else if (!this._getLastElement().hasClass(this.options.selectClass)) { + var nextElement = this._getNextElement(); + this.responseList.selected.removeClass(this.options.selectClass); + this.responseList.selected = nextElement.addClass(this.options.selectClass); + } else { + this.responseList.selected.removeClass(this.options.selectClass); + this._getFirstVisibleElement().addClass(this.options.selectClass); + this.responseList.selected = this._getFirstVisibleElement(); + } + this._activateElement(); + } + }, + + /** + * Process up navigation on autocomplete box + * + * @private + */ + _navigateUp: function() { + if (this.responseList.indexList !== null) { + if (!this._getFirstVisibleElement().hasClass(this.options.selectClass)) { + var prevElement = this._getPrevElement(); + this.responseList.selected.removeClass(this.options.selectClass); + this.responseList.selected = prevElement.addClass(this.options.selectClass); + } else { + this.responseList.selected.removeClass(this.options.selectClass); + this._getLastElement().addClass(this.options.selectClass); + this.responseList.selected = this._getLastElement(); + } + this._activateElement(); + } + }, + + /** + * Toggles an element as currently selected + * + * @param {Element} e - The DOM element + * + * @private + */ + _selectElement: function(element) { + element.addClass(this.options.selectClass); + this.responseList.selected = element; + }, + + /** + * Toggles an element as active + * + * @param {Element} e - The DOM element + * + * @private + */ + _activateElement: function() { + this.element.val(this.responseList.selected.find('.qs-option-name').text()); + this.element.attr('aria-activedescendant', this.responseList.selected.attr('id')); + }, + + /** + * Retrieve the next element when navigating through keyboard + * + * @private + * + * @return Element + */ + _getNextElement: function() { + var nextElement = this.responseList.selected.next('dd'); + if (nextElement.length === 0) { + nextElement = this.responseList.selected.parent('dl').next('dl').find('dd').first(); + } + + return nextElement; + }, + + /** + * Retrieve the previous element when navigating through keyboard + * + * @private + * + * @return Element + */ + _getPrevElement: function() { + var prevElement = this.responseList.selected.prev('dd'); + this.responseList.selected.removeClass(this.options.selectClass); + if (prevElement.length === 0) { + prevElement = this.responseList.selected.parent('dl').prev('dl').find('dd').last(); + } + + return prevElement; + } }); return $.smileEs.quickSearch; From 178672a96e8b1d8990f3a26618f472a623053b32 Mon Sep 17 00:00:00 2001 From: Romain Ruaud Date: Fri, 2 Dec 2016 14:18:53 +0100 Subject: [PATCH 2/3] Lower complexity of attribute filter rendering. --- .../view/frontend/web/js/attribute-filter.js | 71 ++++++++++++++----- 1 file changed, 54 insertions(+), 17 deletions(-) diff --git a/src/module-elasticsuite-catalog/view/frontend/web/js/attribute-filter.js b/src/module-elasticsuite-catalog/view/frontend/web/js/attribute-filter.js index f1b2e8cc4..8a68f9743 100644 --- a/src/module-elasticsuite-catalog/view/frontend/web/js/attribute-filter.js +++ b/src/module-elasticsuite-catalog/view/frontend/web/js/attribute-filter.js @@ -23,9 +23,12 @@ define([ defaults: { template: "Smile_ElasticsuiteCatalog/attribute-filter", showMoreLabel: $.mage.__("Show more"), - showLessLabel: $.mage.__("Show less"), + showLessLabel: $.mage.__("Show less") }, + /** + * Component initialization + */ initialize: function () { this._super(); this.expanded = false; @@ -41,6 +44,9 @@ define([ this.onShowLess(); }, + /** + * Init the place holder + */ initSearchPlaceholder: function () { var examples = this.items.slice(0, 2).map(function (item) {return item.label}); @@ -50,38 +56,51 @@ define([ this.searchPlaceholder = $.mage.__('Search (%s)').replace('%s', examples.join(', ')); }, - + + /** + * Triggered when typing on the search input + */ onSearchChange: function () { - if (this.fulltextSearch().trim() == "") { - this.items = this.items; + if (this.fulltextSearch().trim() === "") { this.fulltextSearch(null); this.onShowLess(); - } else { - } }, - + + /** + * Retrieve additional Results + * + * @param callback + */ loadAdditionalItems: function (callback) { $.get(this.ajaxLoadUrl, function (data) { this.items = data; this.hasMoreItems = false; if (callback) { - callback(); + return callback(); } }.bind(this)); }, - + + /** + * Retrieve items to display + * + * @returns {*} + */ getDisplayedItems: function () { var items = this.items; - if (this.expanded() == false) { + if (this.expanded() === false) { items = this.items.slice(0, this.maxSize); } return items; }, - + + /** + * Callback for the "Show more" button + */ onShowMore: function () { if (this.hasMoreItems) { this.loadAdditionalItems(this.onShowMore.bind(this)); @@ -89,21 +108,39 @@ define([ this.expanded(true); } }, - + + /** + * Callback for the "Show less" button + */ onShowLess: function () { this.expanded(false); }, - + + /** + * Check if the filter can be expanded + * + * @returns {boolean} + */ enableExpansion : function () { return this.hasMoreItems || this.items.length > this.maxSize; }, + /** + * Displays the "Show More" link + * + * @returns {*|boolean} + */ displayShowMore: function () { - return this.enableExpansion() && this.expanded() == false && this.fulltextSearch() == null; + return this.enableExpansion() && this.expanded() === false && !this.fulltextSearch(); }, - + + /** + * Displays the "Show Less" link + * + * @returns {*|boolean} + */ displayShowLess: function () { - return this.enableExpansion() && this.expanded() == true && this.fulltextSearch() == null; + return this.enableExpansion() && this.expanded() === true && !this.fulltextSearch(); } }); -}); \ No newline at end of file +}); From 1cafe5dd6e14c16471a8c280fdab7aba03aaacd8 Mon Sep 17 00:00:00 2001 From: Romain Ruaud Date: Fri, 2 Dec 2016 14:34:32 +0100 Subject: [PATCH 3/3] Fixing code style on product attributes renderer. --- .../web/js/autocomplete/product-attribute.js | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/module-elasticsuite-catalog/view/frontend/web/js/autocomplete/product-attribute.js b/src/module-elasticsuite-catalog/view/frontend/web/js/autocomplete/product-attribute.js index be2ef4090..2541e34b5 100644 --- a/src/module-elasticsuite-catalog/view/frontend/web/js/autocomplete/product-attribute.js +++ b/src/module-elasticsuite-catalog/view/frontend/web/js/autocomplete/product-attribute.js @@ -1,8 +1,25 @@ -define(['underscore'], function(_) { +/** + * DISCLAIMER + * + * Do not edit or add to this file if you wish to upgrade Smile Elastic Suite to newer + * versions in the future. + * + * + * @category Smile + * @package Smile\ElasticsuiteCatalog + * @author Aurelien FOUCRET + * @copyright 2016 Smile + * @license Open Software License ("OSL") v. 3.0 + */ + +/*jshint browser:true jquery:true*/ +/*global alert*/ + +define(['underscore'], function(_) { var Renderer = { render : function (data) { - var data = data.filter(function(item) { - return item.type == "product_attribute"; + data = data.filter(function(item) { + return item.type === "product_attribute"; }).map(function(item) { return item['attribute_label'] }).reduce(function(prev, item) { @@ -16,7 +33,7 @@ define(['underscore'], function(_) { data = _.pairs(data).sort(function(item1, item2) { return item2[0] - item1[0] - }).map(function(item) {return item[0]}); + }).map(function(item) {return item[0]}); if (data.length > 2) { data = data.slice(0, 2); @@ -26,5 +43,6 @@ define(['underscore'], function(_) { return data.join(', '); } } + return Renderer; });