diff --git a/projects/plugins/wpcomsh/.eslintignore b/projects/plugins/wpcomsh/.eslintignore new file mode 100644 index 0000000000000..6e3e6c2b0bf50 --- /dev/null +++ b/projects/plugins/wpcomsh/.eslintignore @@ -0,0 +1,5 @@ +# Not loaded by default eslint, but we use tools/js-tools/load-eslint-ignore.js in .eslintrc to pull it in. + +/tests/e2e +/custom-colors/js/jquery.spin.js +/custom-colors/js/spin.js diff --git a/projects/plugins/wpcomsh/.eslintrc.js b/projects/plugins/wpcomsh/.eslintrc.js index fb29c49c1c5fb..21dc6670d7aab 100644 --- a/projects/plugins/wpcomsh/.eslintrc.js +++ b/projects/plugins/wpcomsh/.eslintrc.js @@ -1,28 +1,13 @@ -const loadIgnorePatterns = require( 'jetpack-js-tools/load-eslint-ignore.js' ); - module.exports = { - root: true, - extends: [ - require.resolve( 'jetpack-js-tools/eslintrc/jest' ), - require.resolve( 'jetpack-js-tools/eslintrc/prettier' ), - ], - ignorePatterns: loadIgnorePatterns( __dirname ), - overrides: [], - env: { - browser: true, - jest: true, - node: true, - }, - parserOptions: { - ecmaVersion: 2020, - }, - globals: {}, - settings: {}, rules: { + // Enforce use of the correct textdomain. + '@wordpress/i18n-text-domain': [ + 'error', + { + allowedTextDomain: 'wpcomsh', + }, + ], + 'jest/no-disabled-tests': 'warn', - 'jest/no-focused-tests': 'error', - 'jest/no-identical-title': 'error', - 'jest/prefer-to-have-length': 'warn', - 'jest/valid-expect': 'error', }, }; diff --git a/projects/plugins/wpcomsh/changelog/add-wpcomsh-eslint-base-config b/projects/plugins/wpcomsh/changelog/add-wpcomsh-eslint-base-config new file mode 100644 index 0000000000000..49bd233320450 --- /dev/null +++ b/projects/plugins/wpcomsh/changelog/add-wpcomsh-eslint-base-config @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Introduced ESLint base config and fixed errors. diff --git a/projects/plugins/wpcomsh/custom-colors/js/classic-background-stats.js b/projects/plugins/wpcomsh/custom-colors/js/classic-background-stats.js index e84fb7dc0c90a..b71e1326b6def 100644 --- a/projects/plugins/wpcomsh/custom-colors/js/classic-background-stats.js +++ b/projects/plugins/wpcomsh/custom-colors/js/classic-background-stats.js @@ -1,10 +1,9 @@ -/* global jQuery, _ */ ( function ( $, _ ) { - var processEvent, - sendClientSideStat, - statBucket = 'classic-custom-background'; +/* global _ */ +( function ( $, _ ) { + const statBucket = 'classic-custom-background'; - sendClientSideStat = function ( eventName ) { - var url = + const sendClientSideStat = function ( eventName ) { + const url = document.location.protocol + '//pixel.wp.com/g.gif?v=wpcom-no-pv&x_' + statBucket + @@ -15,22 +14,20 @@ new Image().src = url; }; - processEvent = function ( e ) { - var target = $( e.target ), + const processEvent = function ( e ) { + const target = $( e.target ), eventName = target.data( 'event' ); return sendClientSideStat( eventName ); }; $( function () { - var colorChange, oldColorChange; - - oldColorChange = $( '#background-color' ).iris( 'option', 'change' ); + const oldColorChange = $( '#background-color' ).iris( 'option', 'change' ); // Replace the Iris change handler // Debounce so we don't get too many colour change events from users // trying to find the perfect colour - colorChange = _.debounce( + const colorChange = _.debounce( function () { $( '#background-color' ).trigger( 'custom-bg-color-change' ); oldColorChange.apply( null, arguments ); diff --git a/projects/plugins/wpcomsh/custom-colors/js/color.js b/projects/plugins/wpcomsh/custom-colors/js/color.js index 03a8f2279c0e0..0e7a7bddf9ab9 100644 --- a/projects/plugins/wpcomsh/custom-colors/js/color.js +++ b/projects/plugins/wpcomsh/custom-colors/js/color.js @@ -2,7 +2,7 @@ * https://github.com/Automattic/Color.js * Copyright (c) 2015 Matt Wiebe; Licensed GPLv2 */ ( function ( global, undef ) { - var Color = function ( color, type ) { + const Color = function ( color, type ) { if ( ! ( this instanceof Color ) ) { return new Color( color, type ); } @@ -21,21 +21,22 @@ // for setting hsl or hsv space - needed for .h() & .s() functions to function properly _hSpace: 'hsl', _init: function ( color ) { - var func = 'noop'; + let func = 'noop'; switch ( typeof color ) { case 'object': // alpha? if ( color.a !== undef ) { this.a( color.a ); } - func = - color.r !== undef - ? 'fromRgb' - : color.l !== undef - ? 'fromHsl' - : color.v !== undef - ? 'fromHsv' - : func; + + if ( color.a !== undef ) { + func = 'fromRgb'; + } else if ( color.l !== undef ) { + func = 'fromHsl'; + } else if ( color.v !== undef ) { + func = 'fromHsv'; + } + return this[ func ]( color ); case 'string': return this.fromCSS( color ); @@ -51,9 +52,9 @@ }, clone: function () { - var newColor = new Color( this.toInt() ), + const newColor = new Color( this.toInt() ), copy = [ '_alpha', '_hSpace', '_hsl', '_hsv', 'error' ]; - for ( var i = copy.length - 1; i >= 0; i-- ) { + for ( let i = copy.length - 1; i >= 0; i-- ) { newColor[ copy[ i ] ] = this[ copy[ i ] ]; } return newColor; @@ -69,8 +70,8 @@ }, fromCSS: function ( color ) { - var list, - leadingRE = /^(rgb|hs(l|v))a?\(/; + let list; + const leadingRE = /^(rgb|hs(l|v))a?\(/; this.error = false; // whitespace and semicolon trim @@ -95,7 +96,7 @@ } } - for ( var i = list.length - 1; i >= 0; i-- ) { + for ( let i = list.length - 1; i >= 0; i-- ) { list[ i ] = parseInt( list[ i ], 10 ); if ( isNaN( list[ i ] ) ) { return this._error(); @@ -114,17 +115,15 @@ s: list[ 1 ], v: list[ 2 ], } ); - } else { - return this.fromHsl( { - h: list[ 0 ], - s: list[ 1 ], - l: list[ 2 ], - } ); } - } else { - // must be hex amirite? - return this.fromHex( color ); + return this.fromHsl( { + h: list[ 0 ], + s: list[ 1 ], + l: list[ 2 ], + } ); } + // must be hex amirite? + return this.fromHex( color ); }, fromRgb: function ( rgb, preserve ) { @@ -133,6 +132,7 @@ } this.error = false; + // eslint-disable-next-line no-bitwise -- Bitwise operations are at home in this context. return this.fromInt( parseInt( ( rgb.r << 16 ) + ( rgb.g << 8 ) + rgb.b, 10 ), preserve ); }, @@ -148,7 +148,7 @@ }, fromHsl: function ( hsl ) { - var r, g, b, q, p, h, s, l; + let r, g, b, q, p; if ( typeof hsl !== 'object' || hsl.h === undef || hsl.s === undef || hsl.l === undef ) { return this._error(); @@ -156,9 +156,9 @@ this._hsl = hsl; // store it this._hSpace = 'hsl'; // implicit - h = hsl.h / 360; - s = hsl.s / 100; - l = hsl.l / 100; + const h = hsl.h / 360; + const s = hsl.s / 100; + const l = hsl.l / 100; if ( s === 0 ) { r = g = b = l; // achromatic } else { @@ -179,7 +179,8 @@ }, fromHsv: function ( hsv ) { - var h, s, v, r, g, b, i, f, p, q, t; + let r, g, b; + if ( typeof hsv !== 'object' || hsv.h === undef || hsv.s === undef || hsv.v === undef ) { return this._error(); } @@ -187,14 +188,14 @@ this._hsv = hsv; // store it this._hSpace = 'hsv'; // implicit - h = hsv.h / 360; - s = hsv.s / 100; - v = hsv.v / 100; - i = Math.floor( h * 6 ); - f = h * 6 - i; - p = v * ( 1 - s ); - q = v * ( 1 - f * s ); - t = v * ( 1 - ( 1 - f ) * s ); + const h = hsv.h / 360; + const s = hsv.s / 100; + const v = hsv.v / 100; + const i = Math.floor( h * 6 ); + const f = h * 6 - i; + const p = v * ( 1 - s ); + const q = v * ( 1 - f * s ); + const t = v * ( 1 - ( 1 - f ) * s ); switch ( i % 6 ) { case 0: @@ -281,13 +282,14 @@ }, toString: function () { - var hex = parseInt( this._color, 10 ).toString( 16 ); if ( this.error ) { return ''; } + + let hex = parseInt( this._color, 10 ).toString( 16 ); // maybe left pad it if ( hex.length < 6 ) { - for ( var i = 6 - hex.length - 1; i >= 0; i-- ) { + for ( let i = 6 - hex.length - 1; i >= 0; i-- ) { hex = '0' + hex; } } @@ -295,55 +297,59 @@ }, toCSS: function ( type, alpha ) { + let rgb = {}, + hsl = {}; + type = type || 'hex'; alpha = parseFloat( alpha || this._alpha ); switch ( type ) { case 'rgb': case 'rgba': - var rgb = this.toRgb(); + rgb = this.toRgb(); if ( alpha < 1 ) { return 'rgba( ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + alpha + ' )'; - } else { - return 'rgb( ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ' )'; } - break; + return 'rgb( ' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ' )'; + + // break omitted, unreachable. case 'hsl': case 'hsla': - var hsl = this.toHsl(); + hsl = this.toHsl(); if ( alpha < 1 ) { return 'hsla( ' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '%, ' + alpha + ' )'; - } else { - return 'hsl( ' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '% )'; } - break; + return 'hsl( ' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '% )'; + + // break omitted, unreachable. default: return this.toString(); } }, toRgb: function () { + /* eslint-disable no-bitwise -- Bitwise calculations are at home in this context. */ return { r: 255 & ( this._color >> 16 ), g: 255 & ( this._color >> 8 ), b: 255 & this._color, }; + /* eslint-enable no-bitwise */ }, toHsl: function () { - var rgb = this.toRgb(); - var r = rgb.r / 255, + const rgb = this.toRgb(); + const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255; - var max = Math.max( r, g, b ), + const max = Math.max( r, g, b ), min = Math.min( r, g, b ); - var h, - s, - l = ( max + min ) / 2; + let h, s; + const l = ( max + min ) / 2; if ( max === min ) { h = s = 0; // achromatic } else { - var d = max - min; + const d = max - min; s = l > 0.5 ? d / ( 2 - max - min ) : d / ( max + min ); switch ( max ) { case r: @@ -377,16 +383,15 @@ }, toHsv: function () { - var rgb = this.toRgb(); - var r = rgb.r / 255, + const rgb = this.toRgb(); + const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255; - var max = Math.max( r, g, b ), + const max = Math.max( r, g, b ), min = Math.min( r, g, b ); - var h, - s, - v = max; - var d = max - min; + let h, s; + const v = max; + const d = max - min; s = max === 0 ? 0 : d / max; if ( max === min ) { @@ -429,8 +434,8 @@ toIEOctoHex: function () { // AARRBBGG - var hex = this.toString(); - var AA = parseInt( 255 * this._alpha, 10 ).toString( 16 ); + const hex = this.toString(); + let AA = parseInt( 255 * this._alpha, 10 ).toString( 16 ); if ( AA.length === 1 ) { AA = '0' + AA; } @@ -439,13 +444,13 @@ // http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef toLuminosity: function () { - var rgb = this.toRgb(); - var lum = {}; - for ( var i in rgb ) { - if ( ! rgb.hasOwnProperty( i ) ) { + const rgb = this.toRgb(); + const lum = {}; + for ( const i in rgb ) { + if ( ! Object.hasOwn( rgb, i ) ) { continue; } - var chan = rgb[ i ] / 255; + const chan = rgb[ i ] / 255; lum[ i ] = chan <= 0.03928 ? chan / 12.92 : Math.pow( ( chan + 0.055 ) / 1.055, 2.4 ); } @@ -457,19 +462,18 @@ if ( ! ( color instanceof Color ) ) { throw 'getDistanceLuminosityFrom requires a Color object'; } - var lum1 = this.toLuminosity(); - var lum2 = color.toLuminosity(); + const lum1 = this.toLuminosity(); + const lum2 = color.toLuminosity(); if ( lum1 > lum2 ) { return ( lum1 + 0.05 ) / ( lum2 + 0.05 ); - } else { - return ( lum2 + 0.05 ) / ( lum1 + 0.05 ); } + return ( lum2 + 0.05 ) / ( lum1 + 0.05 ); }, getMaxContrastColor: function () { - var withBlack = this.getDistanceLuminosityFrom( new Color( '#000' ) ); - var withWhite = this.getDistanceLuminosityFrom( new Color( '#fff' ) ); - var hex = withBlack >= withWhite ? '#000' : '#fff'; + const withBlack = this.getDistanceLuminosityFrom( new Color( '#000' ) ); + const withWhite = this.getDistanceLuminosityFrom( new Color( '#fff' ) ); + const hex = withBlack >= withWhite ? '#000' : '#fff'; return new Color( hex ); }, @@ -479,19 +483,16 @@ } // you shouldn't use less than 5, but you might want to. - var targetContrast = minContrast === undef ? 5 : minContrast, - contrast = bgColor.getDistanceLuminosityFrom( this ), - maxContrastColor, - maxContrast, - incr; + const targetContrast = minContrast === undef ? 5 : minContrast; + let contrast = bgColor.getDistanceLuminosityFrom( this ); // if we have sufficient contrast already, cool if ( contrast >= targetContrast ) { return this; } - maxContrastColor = bgColor.getMaxContrastColor(); - maxContrast = maxContrastColor.getDistanceLuminosityFrom( bgColor ); + const maxContrastColor = bgColor.getMaxContrastColor(); + const maxContrast = maxContrastColor.getDistanceLuminosityFrom( bgColor ); // if current max contrast is less than the target contrast, we had wishful thinking. // still, go max @@ -499,7 +500,7 @@ return maxContrastColor; } - incr = 0 === maxContrastColor.toInt() ? -1 : 1; + const incr = 0 === maxContrastColor.toInt() ? -1 : 1; while ( contrast < targetContrast ) { this.l( incr, true ); // 2nd arg turns this into an incrementer contrast = this.getDistanceLuminosityFrom( bgColor ); @@ -517,7 +518,7 @@ return this._alpha; } - var a = parseFloat( val ); + const a = parseFloat( val ); if ( isNaN( a ) ) { return this._error(); @@ -559,32 +560,32 @@ getSplitComplement: function ( step ) { step = step || 1; - var incr = 180 + step * 30; + const incr = 180 + step * 30; return this.h( incr, true ); }, getAnalog: function ( step ) { step = step || 1; - var incr = step * 30; + const incr = step * 30; return this.h( incr, true ); }, getTetrad: function ( step ) { step = step || 1; - var incr = step * 60; + const incr = step * 60; return this.h( incr, true ); }, getTriad: function ( step ) { step = step || 1; - var incr = step * 120; + const incr = step * 120; return this.h( incr, true ); }, _partial: function ( key ) { - var prop = shortProps[ key ]; + const prop = shortProps[ key ]; return function ( val, incr ) { - var color = this._spaceFunc( 'to', prop.space ); + const color = this._spaceFunc( 'to', prop.space ); // GETTER if ( val === undef ) { @@ -601,8 +602,11 @@ val = val % prop.mod; } if ( prop.range ) { - val = - val < prop.range[ 0 ] ? prop.range[ 0 ] : val > prop.range[ 1 ] ? prop.range[ 1 ] : val; + if ( val < prop.range[ 0 ] ) { + val = prop.range[ 0 ]; + } else if ( val > prop.range[ 1 ] ) { + val = prop.range[ 1 ]; + } } // NEW VALUE @@ -613,13 +617,13 @@ }, _spaceFunc: function ( dir, s, val ) { - var space = s || this._hSpace, + const space = s || this._hSpace, funcName = dir + space.charAt( 0 ).toUpperCase() + space.substr( 1 ); return this[ funcName ]( val ); }, }; - var shortProps = { + const shortProps = { h: { mod: 360, }, @@ -648,8 +652,8 @@ }, }; - for ( var key in shortProps ) { - if ( shortProps.hasOwnProperty( key ) ) { + for ( const key in shortProps ) { + if ( Object.hasOwn( shortProps, key ) ) { Color.fn[ key ] = Color.fn._partial( key ); } } diff --git a/projects/plugins/wpcomsh/custom-colors/js/colors-control-beta.js b/projects/plugins/wpcomsh/custom-colors/js/colors-control-beta.js index 57ff3b9ad820d..d3d1f973d6917 100644 --- a/projects/plugins/wpcomsh/custom-colors/js/colors-control-beta.js +++ b/projects/plugins/wpcomsh/custom-colors/js/colors-control-beta.js @@ -1,10 +1,9 @@ -/* jshint maxerr: 10000 */ -( function ( wp, $, _, undef ) { +/* global wp, _, ColorsTool, _wpCustomizeSettings, Backbone */ +( function ( wp, $, _ ) { // Open closure - var api, fetchImage; wp = wp || {}; - api = wp.customize; + const api = wp.customize; /** * Our very own customizer handler @@ -22,9 +21,8 @@ backgroundChangeView: {}, ready: function () { - var ct = this, - hex, - cat; + const ct = this; + let hex, cat; // Some variables ct.tool = $( '#customize-control-colors-tool' ); @@ -61,7 +59,7 @@ ct.showHeaderTextColorControl(); // set up the color grid. - ct.color.each( function ( index ) { + ct.color.each( function () { cat = $( this ).data( 'role' ); if ( cat in ct.orig ) { @@ -90,11 +88,11 @@ // Updates the grid back to default colors $( '.revert' ).on( 'click', function () { // pick the colors to restore to. - var colors = $( this ).hasClass( 'revert-default' ) + const colors = $( this ).hasClass( 'revert-default' ) ? ct.opts.defaultColors : ct.opts.colors; - ct.color.each( function ( index ) { + ct.color.each( function () { cat = $( this ).data( 'role' ); if ( cat in colors ) { @@ -142,9 +140,9 @@ }, showHeaderTextColorControl: function () { - var ct = this, + const ct = this, toggleControl = function () { - var headerControl = $( '.customize-control-header-text-color' ); + const headerControl = $( '.customize-control-header-text-color' ); if ( ct.status() === 'default' ) { headerControl.show(); @@ -168,7 +166,7 @@ } ); api.bind( 'change', function ( control ) { - if ( 'colors_manager[colors]' == control.id ) { + if ( 'colors_manager[colors]' === control.id ) { toggleControl(); // reset regardless of ct.status() @@ -178,7 +176,7 @@ }, resetHeaderTextColor: function () { - var picker = $( '#customize-control-header_textcolor' ).find( 'input.wp-color-picker' ), + const picker = $( '#customize-control-header_textcolor' ).find( 'input.wp-color-picker' ), color = picker.wpColorPicker( 'defaultColor' ); if ( api( 'header_textcolor' ).get() !== 'blank' ) { @@ -199,9 +197,14 @@ }, overrideCoreBg: function () { - var ct = this; - - function bgCallback( to, from ) { + const ct = this; + + /** + * Background setter callback. + * + * @param {string} to - set the background to this. + */ + function bgCallback( to ) { if ( to ) { ct.grid.find( '.bg' ).css( 'background-image', 'url(' + to + ')' ); ct.bgPrompt.find( '.choose-pattern' ).css( 'background-image', 'url(' + to + ')' ); @@ -226,7 +229,7 @@ }, initPatterns: function () { - var ct = this; + const ct = this; if ( ! ct.opts.themeSupport.customBackground || ct.grid.find( '.bg' ).hasClass( 'unavailable' ) @@ -273,12 +276,12 @@ } if ( - ( ! ct.fetchingPatterns && 0 == ct.patterns.length ) || - ct.patternIndex == ct.patterns.length - 5 + ( ! ct.fetchingPatterns && 0 === ct.patterns.length ) || + ct.patternIndex === ct.patterns.length - 5 ) { ct.fetchingPatterns = true; - var query_arguments = { + const query_arguments = { action: 'pattern_recommendations', limit: '30', offset: ct.patterns.length, @@ -300,7 +303,7 @@ ct.fetchingPatterns = false; - if ( 0 == ct.patternIndex ) { + if ( 0 === ct.patternIndex ) { ct.showPatterns(); } }, @@ -313,7 +316,7 @@ }, initPalettes: function () { - var ct = this; + const ct = this; ct.colorPalettes(); @@ -353,7 +356,7 @@ $.merge( ct.palettes, data.palettes ); if ( - 0 == ct.paletteIndex || + 0 === ct.paletteIndex || ct.paletteIndex >= ct.palettes.length - data.palettes.length - ct.palettesAtATime ) { $( '#more-palettes' ).click(); @@ -379,13 +382,11 @@ * Uses the tonesque library for color sampling */ generatePaletteFromHeader: function () { - var ct = this, - text, - colors, - cat, + let colors, cat; + const ct = this, generatePalette = $( '#generate-palette' ), checkValidImage = function ( value ) { - var badValues = [ 'remove-header', 'random-uploaded-image', 'random-default-image' ]; + const badValues = [ 'remove-header', 'random-uploaded-image', 'random-default-image' ]; if ( value && ! _.contains( badValues, value ) ) { ct.opts.headerImage = value; generatePalette.show(); @@ -400,7 +401,7 @@ // Actions for the "Match header image" button api.bind( 'change', function ( control ) { - if ( 'header_image' == control.id ) { + if ( 'header_image' === control.id ) { checkValidImage( control._value ); } } ); @@ -410,7 +411,7 @@ checkValidImage( ct.opts.headerImage ); // Store button text - text = generatePalette.text(); + const text = generatePalette.text(); generatePalette.on( 'click', function () { // Don't do this if it's free mode @@ -428,10 +429,11 @@ image: ct.opts.headerImage, }, function ( data ) { - colors = data[ 'colors' ]; + colors = data.colors; if ( colors ) { - ct.color.each( function ( index ) { + ct.color.each( function () { + let hex; cat = $( this ).data( 'role' ); if ( cat in colors ) { @@ -457,10 +459,12 @@ }, /** - * Set up Iris Color Picker + * Set up Iris Color Picker. + * + * @return {object} - iris Color Picker object. */ irisPicker: function () { - var ct = this, + const ct = this, container = $( '#iris' ); if ( ! ( 'iris' in container ) ) { @@ -484,7 +488,7 @@ hide: false, width: 260, change: function ( event, ui ) { - if ( ct.getColor( ct.activeColor ).toUpperCase() != ui.color.toString().toUpperCase() ) { + if ( ct.getColor( ct.activeColor ).toUpperCase() !== ui.color.toString().toUpperCase() ) { ct.setColor( ct.activeColor, ui.color.toString() ); ct.grid.trigger( 'color-change', $( ct.activeColor ).data( 'role' ) ); } @@ -493,12 +497,12 @@ }, status: function () { - var ct = this; + const ct = this; - for ( var i = 0, _len = ct.color.length; i < _len; i++ ) { - var $self = $( ct.color.get( i ) ); + for ( let i = 0, _len = ct.color.length; i < _len; i++ ) { + const $self = $( ct.color.get( i ) ); - if ( ct.getColor( $self ) != ct.opts.defaultColors[ $self.data( 'role' ) ] ) { + if ( ct.getColor( $self ) !== ct.opts.defaultColors[ $self.data( 'role' ) ] ) { return 'saved'; } } @@ -506,7 +510,7 @@ return 'default'; }, getColor: function ( el ) { - var color = $( el ).data( 'color' ); + let color = $( el ).data( 'color' ); if ( typeof color === 'undefined' ) { color = $( el ).text(); @@ -525,13 +529,7 @@ * Color Grid & Picker */ colorPicker: function () { - var ct = this, - tooltip = $( '#color-tooltip' ), - other_colors, - selected_color, - label, - bubble, - width; + const ct = this; // Bind to click event on each color li ct.grid.on( 'click', 'li:not(.text-placeholder)', function () { @@ -548,7 +546,7 @@ } ct.picker.hide(); - var self = $( this ); + const self = $( this ); // Check to see if the clicked element was already active if ( $( this ).hasClass( 'selected' ) ) { @@ -580,7 +578,7 @@ // Apply a color suggestions to main grid ct.picker.find( '.color-suggestions' ).on( 'click', 'li', function () { - var selected = ct.grid.find( '.selected' ), + const selected = ct.grid.find( '.selected' ), color = ct.getColor( this ); ct.setColor( selected.get( 0 ), color ); @@ -604,9 +602,8 @@ }, showColorChangeOptions: function ( activeColor ) { - var ct = this, + const ct = this, self = $( activeColor ), - other_colors = [], selected_color = ct.getColor( self ); // ct.bgPrompt.hide(); @@ -623,14 +620,14 @@ } // Display which $cat we are editing - label = self.data( 'title' ); + const label = self.data( 'title' ); if ( label !== undefined ) { ct.reference.html( label ).show(); } else { ct.reference.hide(); } - var query_arguments = { + const query_arguments = { action: 'color_recommendations', color: selected_color, role: self.data( 'role' ), @@ -638,7 +635,7 @@ }; ct.color.each( function () { - if ( ct.getColor( this ) != selected_color ) { + if ( ct.getColor( this ) !== selected_color ) { query_arguments[ 'colors[' + $( this ).data( 'role' ) + ']' ] = ct.getColor( this ); } } ); @@ -647,10 +644,10 @@ '/wp-admin/admin-ajax.php', query_arguments, function ( data ) { - var suggestions = $( '.color-suggestions li' ), - color; + let color; + const suggestions = $( '.color-suggestions li' ); - for ( var i = 0, _len = data.colors.length; i < _len; i++ ) { + for ( let i = 0, _len = data.colors.length; i < _len; i++ ) { color = '#' + data.colors[ i ]; ct.setColor( suggestions.get( i ), color ); suggestions.eq( i ).show(); @@ -664,7 +661,7 @@ showBackgroundColorChangeOptions: function () { if ( this.opts.themeSupport.customBackground ) { - if ( 0 == this.patterns.length ) { + if ( 0 === this.patterns.length ) { // Populates the patterns for the matching palette $( '#more-patterns' ).click(); } @@ -691,10 +688,10 @@ * Color Palettes */ colorPalettes: function () { - var ct = this, - palettes = {}, + let palettes = {}, color, role; + const ct = this; $( '#colourlovers-palettes' ).on( 'click', '.colour-lovers', function () { // Don't apply non-featured palettes for free mode @@ -713,7 +710,7 @@ } ); // Apply colors to our main grid - ct.color.each( function ( index, item ) { + ct.color.each( function () { ct.setColor( this, palettes[ $( this ).attr( 'data-role' ) ] ); } ); @@ -748,10 +745,8 @@ * Drag & Drop for main grid */ dragColor: function () { - var ct = this, - old, - color, - toSwap; + let old, color, toSwap; + const ct = this; if ( this.opts.isFreeMode ) { return; @@ -765,7 +760,7 @@ zIndex: 1000, cursor: 'move', // On drag-stop do the color swap - stop: function ( event, ui ) { + stop: function () { if ( ct.color.hasClass( 'color-swap' ) ) { // Store the original color old = ct.getColor( this ); @@ -790,31 +785,31 @@ .droppable( { tolerance: 'pointer', // If you drop a color on top of another, give that color a class - drop: function ( event, ui ) { + drop: function () { $( this ).addClass( 'color-swap' ); }, } ); }, addChangeListener: function () { - var ct = this; + const ct = this; // Binds to color-change ct.grid.on( 'color-change', function ( e, role ) { ct.setting( ct.currentPalette() ); // Save the background color in the core custom background color setting too. - if ( ct.status() == 'default' ) { + if ( ct.status() === 'default' ) { api( 'background_color' ).set( '' ); } else { api( 'background_color' ).set( ct.getColor( ct.grid.find( '.bg' ) ) ); } // If the entire palette or background color has changed, reset the background image. - if ( ! role || 'bg' == role ) { - var backgroundImage = api( 'background_image' ).get(); + if ( ! role || 'bg' === role ) { + const backgroundImage = api( 'background_image' ).get(); if ( backgroundImage && - ( backgroundImage.indexOf( 'colourlovers' ) != -1 || + ( backgroundImage.indexOf( 'colourlovers' ) !== -1 || backgroundImage === ct.opts.defaultImage || backgroundImage === ct.origBackground ) ) { @@ -834,27 +829,27 @@ } ); }, currentPalette: function () { - var ct = this, + const ct = this, colors = {}; - ct.grid.children().each( function ( i, val ) { + ct.grid.children().each( function () { colors[ $( this ).data( 'role' ) ] = ct.getColor( this ); } ); return colors; }, showPalettes: function ( paletteIndex ) { - var ct = this, + const ct = this, palette_container = $( '#colourlovers-palettes' ).html( '' ); // Construct the color palettes - for ( var i = paletteIndex, _len = paletteIndex + 6; i < _len; i++ ) { - var new_palette = $( '