From e80bbd42cb26bc774772179275e21b9dfaac5447 Mon Sep 17 00:00:00 2001 From: Denis Kopylov Date: Sat, 16 Mar 2019 14:49:06 +0300 Subject: [PATCH 1/3] [BUG] Fix gallery event observer + es2015 --- lib/web/mage/gallery/gallery.js | 48 ++++++++++++++++----------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 15c3d01cf2be3..8ac3f9c70e8ab 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -19,12 +19,12 @@ define([ * Retrieves index if the main item. * @param {Array.} data - Set of gallery items. */ - var getMainImageIndex = function (data) { - var mainIndex; + let getMainImageIndex = function (data) { + let mainIndex; if (_.every(data, function (item) { - return _.isObject(item); - }) + return _.isObject(item); + }) ) { mainIndex = _.findIndex(data, function (item) { return item.isMain; @@ -41,7 +41,7 @@ define([ * @returns {Array} - array of properties. */ getTranslate = function (el) { - var slideTransform = $(el).attr('style').split(';'); + let slideTransform = $(el).attr('style').split(';'); slideTransform = $.map(slideTransform, function (style) { style = style.trim(); @@ -62,7 +62,7 @@ define([ * @private */ _toNumber = function (str) { - var type = typeof str; + const type = typeof str; if (type === 'string') { return parseInt(str); //eslint-disable-line radix @@ -93,7 +93,7 @@ define([ * @param {String} element - String selector of gallery DOM element. */ initialize: function (config, element) { - var self = this; + const self = this; this._super(); @@ -141,7 +141,7 @@ define([ this.setupBreakpoints(); this.initFullscreenSettings(); - this.settings.$element.on('mouseup', '.fotorama__stage__frame', function () { + this.settings.$element.on('click', '.fotorama__stage__frame', function () { if ( !$(this).parents('.fotorama__shadows--left, .fotorama__shadows--right').length && !$(this).hasClass('fotorama-video-container') @@ -152,7 +152,7 @@ define([ if (this.isTouchEnabled && this.settings.isFullscreen) { this.settings.$element.on('tap', '.fotorama__stage__frame', function () { - var translate = getTranslate($(this).parents('.fotorama__stage__shaft')); + const translate = getTranslate($(this).parents('.fotorama__stage__shaft')); if (translate[1] === '0' && !$(this).hasClass('fotorama-video-container')) { self.openFullScreen(); @@ -178,7 +178,7 @@ define([ * Gallery fullscreen settings. */ initFullscreenSettings: function () { - var settings = this.settings, + const settings = this.settings, self = this; settings.$gallery = this.settings.$element.find('[data-gallery-role="gallery"]'); @@ -226,7 +226,7 @@ define([ * Switcher focus. */ _focusSwitcher: function (e) { - var target = $(e.target), + const target = $(e.target), settings = this.settings; if (target.is(settings.focusableStart)) { @@ -246,8 +246,8 @@ define([ * focusable element in modal window scope */ _setFocus: function (position) { - var settings = this.settings, - focusableElements, + const settings = this.settings; + let focusableElements, infelicity; if (position === 'end') { @@ -263,22 +263,22 @@ define([ * Initializes gallery with configuration options. */ initGallery: function () { - var breakpoints = {}, + const breakpoints = {}, settings = this.settings, config = this.config, tpl = template(galleryTpl, { next: $t('Next'), previous: $t('Previous') - }), - mainImageIndex; + }); + let mainImageIndex; if (settings.breakpoints) { _.each(_.values(settings.breakpoints), function (breakpoint) { - var conditions; + let conditions; _.each(_.pairs(breakpoint.conditions), function (pair) { conditions = conditions ? conditions + ' and (' + pair[0] + ': ' + pair[1] + ')' : - '(' + pair[0] + ': ' + pair[1] + ')'; + '(' + pair[0] + ': ' + pair[1] + ')'; }); breakpoints[conditions] = breakpoint.options; }); @@ -312,7 +312,7 @@ define([ * Creates breakpoints for gallery. */ setupBreakpoints: function () { - var pairs, + let pairs, settings = this.settings, config = this.config, startConfig = this.startConfig, @@ -370,7 +370,7 @@ define([ * Creates gallery's API. */ initApi: function () { - var settings = this.settings, + const settings = this.settings, config = this.config, api = { @@ -428,8 +428,8 @@ define([ */ updateOptions: function (configuration, isInternal) { - var $selectable = $('a[href], area[href], input, select, ' + - 'textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]') + let $selectable = $('a[href], area[href], input, select, ' + + 'textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]') .not('[tabindex=-1], [disabled], :hidden'), $focus = $(':focus'), index; @@ -472,7 +472,7 @@ define([ * @param {Array.} data - Set of gallery items to update. */ updateData: function (data) { - var mainImageIndex; + let mainImageIndex; if (_.isArray(data)) { settings.fotoramaApi.load(data); @@ -501,7 +501,7 @@ define([ * @returns {Array} */ returnCurrentImages: function () { - var images = []; + const images = []; _.each(this.fotorama.data, function (item) { images.push(_.omit(item, '$navThumbFrame', '$navDotFrame', '$stageFrame', 'labelledby')); From 68b8197a82efbcb08c4ac981c6bea995e3e6bdbe Mon Sep 17 00:00:00 2001 From: Denis Kopylov Date: Sat, 16 Mar 2019 21:32:37 +0300 Subject: [PATCH 2/3] Add es6 to eslint config file --- .../testsuite/Magento/Test/Js/_files/eslint/.eslintrc-magento | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-magento b/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-magento index 3e9844189a942..ac9640f7128d8 100644 --- a/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-magento +++ b/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-magento @@ -5,7 +5,8 @@ "jasmine": true, "jquery": true, "prototypejs": true, - "node": true + "node": true, + "es6": true }, "rules": { "eqeqeq": [2, "smart"], From 4801c691e764aa87dce39e87896c4d25b7e92326 Mon Sep 17 00:00:00 2001 From: Denis Kopylov Date: Sat, 23 Mar 2019 08:46:55 +0300 Subject: [PATCH 3/3] [Catalog] Revert es6 --- .../Test/Js/_files/eslint/.eslintrc-magento | 3 +- lib/web/mage/gallery/gallery.js | 46 +++++++++---------- 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-magento b/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-magento index ac9640f7128d8..3e9844189a942 100644 --- a/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-magento +++ b/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-magento @@ -5,8 +5,7 @@ "jasmine": true, "jquery": true, "prototypejs": true, - "node": true, - "es6": true + "node": true }, "rules": { "eqeqeq": [2, "smart"], diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 8ac3f9c70e8ab..be78856b21fcd 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -19,12 +19,12 @@ define([ * Retrieves index if the main item. * @param {Array.} data - Set of gallery items. */ - let getMainImageIndex = function (data) { - let mainIndex; + var getMainImageIndex = function (data) { + var mainIndex; if (_.every(data, function (item) { - return _.isObject(item); - }) + return _.isObject(item); + }) ) { mainIndex = _.findIndex(data, function (item) { return item.isMain; @@ -41,7 +41,7 @@ define([ * @returns {Array} - array of properties. */ getTranslate = function (el) { - let slideTransform = $(el).attr('style').split(';'); + var slideTransform = $(el).attr('style').split(';'); slideTransform = $.map(slideTransform, function (style) { style = style.trim(); @@ -62,7 +62,7 @@ define([ * @private */ _toNumber = function (str) { - const type = typeof str; + var type = typeof str; if (type === 'string') { return parseInt(str); //eslint-disable-line radix @@ -93,7 +93,7 @@ define([ * @param {String} element - String selector of gallery DOM element. */ initialize: function (config, element) { - const self = this; + var self = this; this._super(); @@ -152,7 +152,7 @@ define([ if (this.isTouchEnabled && this.settings.isFullscreen) { this.settings.$element.on('tap', '.fotorama__stage__frame', function () { - const translate = getTranslate($(this).parents('.fotorama__stage__shaft')); + var translate = getTranslate($(this).parents('.fotorama__stage__shaft')); if (translate[1] === '0' && !$(this).hasClass('fotorama-video-container')) { self.openFullScreen(); @@ -178,7 +178,7 @@ define([ * Gallery fullscreen settings. */ initFullscreenSettings: function () { - const settings = this.settings, + var settings = this.settings, self = this; settings.$gallery = this.settings.$element.find('[data-gallery-role="gallery"]'); @@ -226,7 +226,7 @@ define([ * Switcher focus. */ _focusSwitcher: function (e) { - const target = $(e.target), + var target = $(e.target), settings = this.settings; if (target.is(settings.focusableStart)) { @@ -246,8 +246,8 @@ define([ * focusable element in modal window scope */ _setFocus: function (position) { - const settings = this.settings; - let focusableElements, + var settings = this.settings, + focusableElements, infelicity; if (position === 'end') { @@ -263,22 +263,22 @@ define([ * Initializes gallery with configuration options. */ initGallery: function () { - const breakpoints = {}, + var breakpoints = {}, settings = this.settings, config = this.config, tpl = template(galleryTpl, { next: $t('Next'), previous: $t('Previous') - }); - let mainImageIndex; + }), + mainImageIndex; if (settings.breakpoints) { _.each(_.values(settings.breakpoints), function (breakpoint) { - let conditions; + var conditions; _.each(_.pairs(breakpoint.conditions), function (pair) { conditions = conditions ? conditions + ' and (' + pair[0] + ': ' + pair[1] + ')' : - '(' + pair[0] + ': ' + pair[1] + ')'; + '(' + pair[0] + ': ' + pair[1] + ')'; }); breakpoints[conditions] = breakpoint.options; }); @@ -312,7 +312,7 @@ define([ * Creates breakpoints for gallery. */ setupBreakpoints: function () { - let pairs, + var pairs, settings = this.settings, config = this.config, startConfig = this.startConfig, @@ -370,7 +370,7 @@ define([ * Creates gallery's API. */ initApi: function () { - const settings = this.settings, + var settings = this.settings, config = this.config, api = { @@ -428,8 +428,8 @@ define([ */ updateOptions: function (configuration, isInternal) { - let $selectable = $('a[href], area[href], input, select, ' + - 'textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]') + var $selectable = $('a[href], area[href], input, select, ' + + 'textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]') .not('[tabindex=-1], [disabled], :hidden'), $focus = $(':focus'), index; @@ -472,7 +472,7 @@ define([ * @param {Array.} data - Set of gallery items to update. */ updateData: function (data) { - let mainImageIndex; + var mainImageIndex; if (_.isArray(data)) { settings.fotoramaApi.load(data); @@ -501,7 +501,7 @@ define([ * @returns {Array} */ returnCurrentImages: function () { - const images = []; + var images = []; _.each(this.fotorama.data, function (item) { images.push(_.omit(item, '$navThumbFrame', '$navDotFrame', '$stageFrame', 'labelledby'));