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 = $( '
' )
+ for ( let i = paletteIndex, _len = paletteIndex + 6; i < _len; i++ ) {
+ const new_palette = $( '' )
.addClass( 'color-grid colour-lovers' )
.attr( 'title', ct.opts.dragHelp );
- for ( var color_key in ct.palettes[ i ].colors ) {
- var new_color = $( '' )
+ for ( const color_key in ct.palettes[ i ].colors ) {
+ const new_color = $( '' )
.addClass( color_key )
.attr( 'data-role', color_key )
.text( '#' + ct.palettes[ i ].colors[ color_key ] );
@@ -867,28 +862,27 @@
// Check if the palette is theme generated or not
// Only show the registered colors if it's less than five
if ( ! $.isNumeric( ct.palettes[ i ].id ) ) {
- var availableColors = new Array(),
- length;
+ const availableColors = new Array();
new_palette.addClass( 'featured' );
- for ( var colors in ct.palettes[ i ].colors ) {
+ for ( const colors in ct.palettes[ i ].colors ) {
if ( ct.palettes[ i ].colors[ colors ] ) {
availableColors.push( ct.palettes[ i ].colors[ colors ] );
}
}
- length = availableColors.length;
+ const length = availableColors.length;
// Remove the empty li(s)
if ( length < 5 ) {
- var colorsList = new_palette.find( 'li' );
+ const colorsList = new_palette.find( 'li' );
// Controls the display of the palettes
new_palette.addClass( 'items-' + length );
colorsList.each( function () {
- if ( $( this ).text() == '#' ) {
+ if ( $( this ).text() === '#' ) {
$( this ).remove();
}
} );
@@ -907,12 +901,12 @@
helper: 'clone',
cursor: 'move',
cursorAt: { top: 25 / 2, left: 25 / 2 },
- start: function ( event, ui ) {
+ start: function () {
// need to make the droppable areas more tolerant for clones.
ct.color.droppable( 'option', 'tolerance', 'touch' );
},
- stop: function ( event, ui ) {
- var toSwap;
+ stop: function () {
+ let toSwap;
if ( ct.color.hasClass( 'color-swap' ) ) {
toSwap = ct.grid.find( '.color-swap' );
// Change the color
@@ -946,7 +940,7 @@
patternIndex = 0;
}
- var pageSize = this.patternPageSize,
+ const pageSize = this.patternPageSize,
pattern_container = this.patternPicker.find( 'ul' ).html( '' );
if ( patternIndex >= this.patterns.length ) {
@@ -971,13 +965,13 @@
}
for (
- var i = patternIndex, _len = Math.min( patternIndex + pageSize, this.patterns.length );
+ let i = patternIndex, _len = Math.min( patternIndex + pageSize, this.patterns.length );
i < _len;
i++
) {
- var pattern = $( ' ' ).addClass( 'pattern' );
- var pattern_link = $( '' ).addClass( 'thumbnail' );
- var pattern_image = $( '' )
+ const pattern = $( ' ' ).addClass( 'pattern' );
+ const pattern_link = $( '' ).addClass( 'thumbnail' );
+ const pattern_image = $( '' )
.attr( 'src', this.patterns[ i ].preview_image_url )
.addClass( 'pattern' );
pattern_link.data( 'customizeImageValue', pattern_image.attr( 'src' ) );
@@ -1000,7 +994,7 @@
$( '#less-patterns' ).hide();
}
- if ( this.patterns.length == 0 ) {
+ if ( this.patterns.length === 0 ) {
patternIndex = 0;
} else {
this.patternIndex = patternIndex + pageSize;
@@ -1009,7 +1003,7 @@
// Displays a notice when you access the paid features
buyNotice: function () {
- var ct = this,
+ const ct = this,
container = $( '.accordion-section-colors_manager_tool' );
// If the element is already present, show it
@@ -1033,8 +1027,8 @@
} );
/* Helper */
- fetchImage = function ( url ) {
- var deferred = $.Deferred(),
+ const fetchImage = function ( url ) {
+ const deferred = $.Deferred(),
img = new Image();
if ( ! url ) {
deferred.reject();
@@ -1071,13 +1065,11 @@
this.render();
},
updateImage: function ( control ) {
- var settings;
-
if ( control && control.id.indexOf( 'background' ) !== 0 ) {
return;
}
- settings = api.get();
+ const settings = api.get();
this.currentBgImage = settings.background_image;
this.currentBgColor = settings.background_color || this.controller.opts.defaultColors.bg;
@@ -1094,7 +1086,7 @@
}
},
updateBgSize: function ( img ) {
- var ratio = img.width / img.height,
+ const ratio = img.width / img.height,
rW = this.rectangle.width(),
rH = this.rectangle.height(),
isPattern = img.width < rW || img.height < rH;
@@ -1102,14 +1094,14 @@
if ( isPattern ) {
this.currentBgSize = '50%';
} else {
- var edge = rW / rH,
+ const edge = rW / rH,
isLong = ratio > edge;
this.currentBgSize = isLong ? 'auto 100%' : '100% auto';
}
},
updateRectangleStyle: function () {
- var settings = api.get();
+ const settings = api.get();
api.trigger( 'loaded' );
this.rectangle.css( {
@@ -1143,8 +1135,8 @@
this.showPickerBorder();
},
toggleOptions: function () {
- var button = this.$el.find( '.button.background-options' ),
- v = this.optionsView;
+ let v = this.optionsView;
+ const button = this.$el.find( '.button.background-options' );
if ( ! v ) {
v = this.optionsView = new api.ColorsTool.BackgroundOptionsView( {
@@ -1161,7 +1153,7 @@
}
},
hideOptions: function () {
- var button = this.$el.find( '.button.background-options' ),
+ const button = this.$el.find( '.button.background-options' ),
v = this.optionsView;
if ( v ) {
button.removeClass( 'pressed' );
@@ -1184,7 +1176,7 @@
this.frame.on(
'select',
function () {
- var attachment = this.frame.state().get( 'selection' ).first();
+ const attachment = this.frame.state().get( 'selection' ).first();
api( 'background_image' ).set( attachment.get( 'url' ) );
Backbone.trigger( 'custom-colors:stat', 'colors-background', 'image-chosen' );
},
@@ -1199,7 +1191,7 @@
this.controller.picker.css( 'border-top-width', this.borderWidth );
},
hidePickerBorder: function () {
- var width = this.controller.picker.css( 'border-top-width' );
+ const width = this.controller.picker.css( 'border-top-width' );
if ( width !== '0px' ) {
this.borderWidth = width;
}
@@ -1255,7 +1247,7 @@
this.$el.hide();
},
set: function ( event ) {
- var input = $( event.currentTarget ),
+ const input = $( event.currentTarget ),
name = input.attr( 'name' ),
checked = input.is( ':checked' ),
value = checked ? input.val() : this._defaults[ name ];
@@ -1267,7 +1259,7 @@
this.options.changeView.hideImage();
},
setupIris: function () {
- var input = this.$el.find( '#underlying-color' ),
+ const input = this.$el.find( '#underlying-color' ),
label = this.$el.find( 'label[for=underlying-color]' ),
target = this.$el.find( '.iris-container' ),
ct = this.options.changeView.controller;
@@ -1277,7 +1269,7 @@
palettes: true,
target: target,
change: function ( event, ui ) {
- var color = ui.color.toString(),
+ const color = ui.color.toString(),
palette = ct.currentPalette();
palette.bg = color;
ct.setting( palette );
@@ -1288,7 +1280,7 @@
input.iris( 'toggle' );
} );
api.bind( 'change', function ( control ) {
- if ( 'background_color' == control.id ) {
+ if ( 'background_color' === control.id ) {
label.css( 'background-color', control._value );
}
} );
@@ -1296,7 +1288,7 @@
} );
Backbone.on( 'custom-colors:stat', function ( bucket, stat ) {
- var url =
+ const url =
document.location.protocol +
'//stats.wordpress.com/g.gif?v=wpcom-no-pv&x_' +
bucket +
@@ -1309,4 +1301,4 @@
// let's use it.
api.controlConstructor.colorsTool = api.ColorsTool;
-} )( wp, jQuery, _, undefined ); // Close closure. She sells sea shells.
+} )( wp, jQuery, _ ); // Close closure. She sells sea shells.
diff --git a/projects/plugins/wpcomsh/custom-colors/js/colors-control.js b/projects/plugins/wpcomsh/custom-colors/js/colors-control.js
index 371df0040f7b5..2cbb1fa480250 100644
--- a/projects/plugins/wpcomsh/custom-colors/js/colors-control.js
+++ b/projects/plugins/wpcomsh/custom-colors/js/colors-control.js
@@ -1,10 +1,9 @@
-/* jshint maxerr: 10000 */
-( function ( wp, $, _, undef ) {
+/* global wp, _, _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;
+ let hex, cat;
+ const ct = this;
// Some variables
ct.opts = window.ColorsTool; // from wp_localize_script
@@ -58,7 +56,7 @@
ct.iris = ct.irisPicker();
// set up the color grid.
- ct.color.each( function ( index ) {
+ ct.color.each( function () {
cat = $( this ).data( 'role' );
if ( cat in ct.orig ) {
@@ -80,13 +78,13 @@
// Revert action
// Updates the grid back to default colors
$( '.revert' ).on( 'click', function () {
- var colors = ct.opts.defaultColors;
+ const colors = ct.opts.defaultColors;
ct.color.each( function () {
- var cat = $( this ).data( 'role' );
+ const category = $( this ).data( 'role' );
- if ( cat in colors ) {
- hex = ct.sanitizeHex( colors[ cat ] );
+ if ( category in colors ) {
+ hex = ct.sanitizeHex( colors[ category ] );
ct.setColor( this, hex );
}
} );
@@ -131,8 +129,8 @@
},
resetHeaderTextColor: function () {
- var picker = $( '#customize-control-header_textcolor' ).find( 'input.wp-color-picker' ),
- color;
+ let color;
+ const picker = $( '#customize-control-header_textcolor' ).find( 'input.wp-color-picker' );
if ( picker.wpColorPicker ) {
picker.wpColorPicker( 'defaultColor' );
@@ -156,11 +154,16 @@
},
overrideCoreBg: function () {
- var ct = this;
+ const ct = this;
if ( ! this.opts.themeSupport.customBackground ) {
return;
}
+ /**
+ * Background callback function.
+ *
+ * @param {string} to - set background image to this URL.
+ */
function bgCallback( to ) {
if ( to ) {
ct.grid.find( '.bg' ).css( 'background-image', 'url(' + to + ')' );
@@ -184,7 +187,7 @@
},
initPatterns: function () {
- var ct = this;
+ const ct = this;
if (
! ct.opts.themeSupport.customBackground ||
ct.grid.find( '.bg' ).hasClass( 'unavailable' )
@@ -231,7 +234,7 @@
},
handleMorePatternsClick: function () {
- var ct = this;
+ const ct = this;
// Stat: 'more-patterns'
new Image().src =
@@ -244,12 +247,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,
@@ -271,7 +274,7 @@
ct.fetchingPatterns = false;
- if ( 0 == ct.patternIndex ) {
+ if ( 0 === ct.patternIndex ) {
ct.showPatterns();
}
},
@@ -281,7 +284,7 @@
},
hideSectionAndKeepHidden: function ( id ) {
- var section = api.section( id );
+ const section = api.section( id );
if ( ! section ) {
return;
}
@@ -294,8 +297,7 @@
},
initPalettes: function () {
- var ct = this,
- colorsSection;
+ const ct = this;
ct.colorPalettes();
@@ -303,7 +305,7 @@
this.hideSectionAndKeepHidden( 'colors' );
this.hideSectionAndKeepHidden( 'background_image' );
- var morePaletteClickHandler = function () {
+ const morePaletteClickHandler = function () {
// Load palettes into a client-side cache 40 at a time
// and refresh that cache one page before it's necessary.
if ( ct.paletteIndex <= ct.palettes.length - ct.palettesAtATime ) {
@@ -335,7 +337,7 @@
$.merge( ct.palettes, data.palettes );
if (
- 0 == ct.paletteIndex ||
+ 0 === ct.paletteIndex ||
ct.paletteIndex >= ct.palettes.length - data.palettes.length - ct.palettesAtATime
) {
morePaletteClickHandler();
@@ -360,16 +362,16 @@
/**
* Generate a palette based on the current header image
- * Uses the tonesque library for color sampling
+ * Uses the tonesque library for color sampling.
+ *
+ * @return {object} $generatePalette - the palette generator JQuery object.
*/
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();
@@ -387,7 +389,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 );
}
} );
@@ -397,9 +399,9 @@
checkValidImage( ct.opts.headerImage );
// Store button text
- text = generatePalette.text();
+ const text = generatePalette.text();
- generatePalette.on( 'click', function () {
+ return generatePalette.on( 'click', function () {
// Show processing message
$( this ).text( ct.opts.genPalette );
@@ -410,10 +412,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 ) {
@@ -439,10 +442,12 @@
},
/**
- * Set up Iris Color Picker
+ * Set up Iris Color Picker.
+ *
+ * @return {object} cp - Iris color picker.
*/
irisPicker: function () {
- var ct = this,
+ const ct = this,
container = $( '#iris' );
if ( ! ( 'iris' in container ) ) {
@@ -466,7 +471,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' ) );
}
@@ -475,12 +480,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';
}
}
@@ -488,7 +493,7 @@
return 'default';
},
getColor: function ( el ) {
- var color = $( el ).data( 'color' );
+ let color = $( el ).data( 'color' );
if ( typeof color === 'undefined' ) {
color = $( el ).text();
@@ -507,13 +512,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 () {
@@ -522,7 +521,7 @@
}
ct.picker.hide();
- var self = $( this );
+ const self = $( this );
// Check to see if the clicked element was already active
if ( $( this ).hasClass( 'selected' ) ) {
@@ -554,7 +553,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 );
@@ -578,9 +577,8 @@
},
showColorChangeOptions: function ( activeColor ) {
- var ct = this,
+ const ct = this,
self = $( activeColor ),
- other_colors = [],
selected_color = ct.getColor( self );
// ct.bgPrompt.hide();
@@ -597,14 +595,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' ),
@@ -612,7 +610,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 );
}
} );
@@ -621,10 +619,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();
@@ -638,7 +636,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
this.handleMorePatternsClick();
}
@@ -665,10 +663,10 @@
* Color Palettes
*/
colorPalettes: function () {
- var ct = this,
- palettes = {},
+ let palettes = {},
color,
role;
+ const ct = this;
$( '#colourlovers-palettes' ).on( 'click', '.colour-lovers', function () {
// Populate an array with color values
@@ -682,7 +680,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' ) ] );
} );
@@ -715,7 +713,7 @@
},
addChangeListener: function () {
- var ct = this;
+ const ct = this;
// Binds to color-change
ct.grid.on( 'color-change', function ( e, role ) {
@@ -730,7 +728,7 @@
// If the entire palette or background color has changed, reset the background image.
if ( ! role || 'bg' === role ) {
- var backgroundImage = ct.coreBgImage();
+ const backgroundImage = ct.coreBgImage();
if (
backgroundImage &&
( backgroundImage.indexOf( 'colourlovers' ) !== -1 ||
@@ -753,25 +751,25 @@
} );
},
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 = $( '' ).addClass( 'color-grid colour-lovers' );
+ for ( let i = paletteIndex, _len = paletteIndex + 6; i < _len; i++ ) {
+ const new_palette = $( '' ).addClass( 'color-grid colour-lovers' );
- for ( var color_key in ct.palettes[ i ].colors ) {
- var new_color = $( '' )
+ for ( const color_key in ct.palettes[ i ].colors ) {
+ const new_color = $( '' )
.addClass( color_key )
.attr( 'data-role', color_key )
.text( '#' + ct.palettes[ i ].colors[ color_key ] );
@@ -784,28 +782,27 @@
// Check if the palette is theme generated or not
// Only show the registered colors if it's less than five
if ( ! $.isNumeric( ct.palettes[ i ].id ) ) {
- var availableColors = new Array(),
- length;
+ const availableColors = new Array();
new_palette.addClass( 'featured' );
- for ( var colors in ct.palettes[ i ].colors ) {
+ for ( const colors in ct.palettes[ i ].colors ) {
if ( ct.palettes[ i ].colors[ colors ] ) {
availableColors.push( ct.palettes[ i ].colors[ colors ] );
}
}
- length = availableColors.length;
+ const length = availableColors.length;
// Remove the empty li(s)
if ( length < 5 ) {
- var colorsList = new_palette.find( 'li' );
+ const colorsList = new_palette.find( 'li' );
// Controls the display of the palettes
new_palette.addClass( 'items-' + length );
colorsList.each( function () {
- if ( $( this ).text() == '#' ) {
+ if ( $( this ).text() === '#' ) {
$( this ).remove();
}
} );
@@ -835,7 +832,7 @@
patternIndex = 0;
}
- var pageSize = this.patternPageSize,
+ const pageSize = this.patternPageSize,
pattern_container = this.patternPicker.find( 'ul' ).html( '' );
if ( patternIndex >= this.patterns.length ) {
@@ -860,13 +857,13 @@
}
for (
- var i = patternIndex, _len = Math.min( patternIndex + pageSize, this.patterns.length );
+ let i = patternIndex, _len = Math.min( patternIndex + pageSize, this.patterns.length );
i < _len;
i++
) {
- var pattern = $( ' ' ).addClass( 'pattern' );
- var pattern_link = $( '' ).addClass( 'thumbnail' );
- var pattern_image = $( '' )
+ const pattern = $( ' ' ).addClass( 'pattern' );
+ const pattern_link = $( '' ).addClass( 'thumbnail' );
+ const pattern_image = $( '' )
.attr( 'src', this.patterns[ i ].preview_image_url )
.addClass( 'pattern' );
pattern_link.data( 'customizeImageValue', pattern_image.attr( 'src' ) );
@@ -889,7 +886,7 @@
$( '#less-patterns' ).hide();
}
- if ( this.patterns.length == 0 ) {
+ if ( this.patterns.length === 0 ) {
patternIndex = 0;
} else {
this.patternIndex = patternIndex + pageSize;
@@ -898,8 +895,8 @@
} );
/* Helper */
- fetchImage = function ( url ) {
- var deferred = $.Deferred(),
+ const fetchImage = function ( url ) {
+ const deferred = $.Deferred(),
img = new Image();
if ( ! url ) {
deferred.reject();
@@ -936,13 +933,11 @@
this.render();
},
updateImage: function ( control ) {
- var settings;
-
if ( control && control.id.indexOf( 'background' ) !== 0 ) {
return;
}
- settings = api.get();
+ const settings = api.get();
this.currentBgImage = settings.background_image;
this.currentBgColor = settings.background_color || this.controller.opts.defaultColors.bg;
@@ -959,7 +954,7 @@
}
},
updateBgSize: function ( img ) {
- var ratio = img.width / img.height,
+ const ratio = img.width / img.height,
rW = this.rectangle.width(),
rH = this.rectangle.height(),
isPattern = img.width < rW || img.height < rH;
@@ -967,14 +962,14 @@
if ( isPattern ) {
this.currentBgSize = '50%';
} else {
- var edge = rW / rH,
+ const edge = rW / rH,
isLong = ratio > edge;
this.currentBgSize = isLong ? 'auto 100%' : '100% auto';
}
},
updateRectangleStyle: function () {
- var settings = api.get();
+ const settings = api.get();
api.trigger( 'loaded' );
this.rectangle.css( {
@@ -1008,8 +1003,8 @@
this.showPickerBorder();
},
toggleOptions: function () {
- var button = this.$el.find( '.button.background-options' ),
- v = this.optionsView;
+ let v = this.optionsView;
+ const button = this.$el.find( '.button.background-options' );
if ( ! v ) {
v = this.optionsView = new api.ColorsTool.BackgroundOptionsView( {
@@ -1026,7 +1021,7 @@
}
},
hideOptions: function () {
- var button = this.$el.find( '.button.background-options' ),
+ const button = this.$el.find( '.button.background-options' ),
v = this.optionsView;
if ( v ) {
button.removeClass( 'pressed' );
@@ -1049,7 +1044,7 @@
this.frame.on(
'select',
function () {
- var attachment = this.frame.state().get( 'selection' ).first();
+ const attachment = this.frame.state().get( 'selection' ).first();
api( 'background_image' ).set( attachment.get( 'url' ) );
Backbone.trigger( 'custom-colors:stat', 'colors-background', 'image-chosen' );
},
@@ -1064,7 +1059,7 @@
this.controller.picker.css( 'border-top-width', this.borderWidth );
},
hidePickerBorder: function () {
- var width = this.controller.picker.css( 'border-top-width' );
+ const width = this.controller.picker.css( 'border-top-width' );
if ( width !== '0px' ) {
this.borderWidth = width;
}
@@ -1120,7 +1115,7 @@
this.$el.hide();
},
set: function ( event ) {
- var input = $( event.currentTarget ),
+ const input = $( event.currentTarget ),
name = input.attr( 'name' ),
checked = input.is( ':checked' ),
value = checked ? input.val() : this._defaults[ name ];
@@ -1132,7 +1127,7 @@
this.options.changeView.hideImage();
},
setupIris: function () {
- var input = this.$el.find( '#underlying-color' ),
+ const input = this.$el.find( '#underlying-color' ),
label = this.$el.find( 'label[for=underlying-color]' ),
target = this.$el.find( '.iris-container' ),
ct = this.options.changeView.controller;
@@ -1142,7 +1137,7 @@
palettes: true,
target: target,
change: function ( event, ui ) {
- var color = ui.color.toString(),
+ const color = ui.color.toString(),
palette = ct.currentPalette();
palette.bg = color;
ct.setting( palette );
@@ -1153,7 +1148,7 @@
input.iris( 'toggle' );
} );
api.bind( 'change', function ( control ) {
- if ( 'background_color' == control.id ) {
+ if ( 'background_color' === control.id ) {
label.css( 'background-color', control._value );
}
} );
@@ -1161,7 +1156,7 @@
} );
Backbone.on( 'custom-colors:stat', function ( bucket, stat ) {
- var url =
+ const url =
document.location.protocol +
'//pixel.wp.com/g.gif?v=wpcom-no-pv&x_' +
bucket +
@@ -1174,4 +1169,4 @@
// let's use it.
api.controlConstructor.colorsTool = api.ColorsTool;
-} )( wp, jQuery, _, undefined ); // Close closure. She sells sea shells.
+} )( wp, jQuery, _ ); // Close closure. She sells sea shells.
diff --git a/projects/plugins/wpcomsh/custom-colors/js/colors-theme-preview.js b/projects/plugins/wpcomsh/custom-colors/js/colors-theme-preview.js
index a659af26fdb19..47ade92b7cbd4 100644
--- a/projects/plugins/wpcomsh/custom-colors/js/colors-theme-preview.js
+++ b/projects/plugins/wpcomsh/custom-colors/js/colors-theme-preview.js
@@ -1,12 +1,14 @@
-/* global ColorsTool, Color */
+/* global ColorsTool, Color, wp */
/**
* Listen to your heart. Or postMessage, I forget.
+ * @param {object} $ - the jQuery object.
+ * @param {undefined} undef - the undefined object.
*/
( function ( $, undef ) {
// store 'em
- var _setColors = {},
- // for adding/removing body class
- body = $( 'body' ),
+ // for adding/removing body class
+ const body = $( 'body' );
+ let _setColors = {},
// holding container for style element
colorsStyle = false;
@@ -14,6 +16,9 @@
value.bind( applyColors );
} );
+ /**
+ * Sets up the style element for embedding the CSS.
+ */
function primeColorsStyleElement() {
if ( colorsStyle !== false && colorsStyle.length ) {
return;
@@ -32,8 +37,13 @@
}
}
+ /**
+ * Applies the colors passed in the arguments.
+ *
+ * @param {object} colors - the Colors object.
+ */
function applyColors( colors ) {
- var css;
+ let css;
primeColorsStyleElement();
// store 'em = _setColors is defined one step up
_setColors = colors;
@@ -56,20 +66,20 @@
if ( extra.rules === undef ) {
return;
}
- $.each( extra.rules, function ( i, rule ) {
+ $.each( extra.rules, function ( j, rule ) {
css += cssRule( rule, extra.color );
} );
} );
// user colors
$.each( ColorsTool.colors, function ( i, val ) {
- var color = colors[ i ];
+ const color = colors[ i ];
// sanity check
if ( color === undef ) {
return;
}
- $.each( val, function ( i, val ) {
- css += cssRule( val, color );
+ $.each( val, function ( j, value ) {
+ css += cssRule( value, color );
} );
} );
@@ -77,10 +87,15 @@
colorsStyle.text( css );
}
- // this makes a CSS rule
- // [selector, prop, opacity(optional)]
+ /**
+ * This makes a CSS rule.
+ *
+ * @param {Array} rule - the rule description: [selector, prop, opacity(optional)]
+ * @param {string} color - the assigned color.
+ * @return {string} CSS
+ */
function cssRule( rule, color ) {
- var css = '',
+ let css = '',
workingColor,
modType,
modifier,
@@ -89,11 +104,10 @@
firstChar;
if ( rule[ 2 ] !== undef ) {
- ( workingColor = new Color( color ) ),
- ( modType = typeof rule[ 2 ] ),
- ( modifier = parseFloat( rule[ 2 ] ) ),
- bgColor,
- contrast;
+ workingColor = new Color( color );
+ modType = typeof rule[ 2 ];
+ modifier = parseFloat( rule[ 2 ] );
+
// ensure contrast or darken/lighten
if ( modType === 'string' ) {
firstChar = rule[ 2 ].substring( 0, 1 );
@@ -130,10 +144,16 @@
return css;
}
- // Simplistic object comparer
+ /**
+ * Simplistic object comparer.
+ *
+ * @param {object} colors - color object.
+ * @return {boolean} isDefault
+ */
function isDefaultColors( colors ) {
- var defaults = ColorsTool.defaultColors,
- key;
+ let key;
+ const defaults = ColorsTool.defaultColors;
+
for ( key in defaults ) {
if (
colors[ key ] === undef ||
diff --git a/projects/plugins/wpcomsh/customizer-fixes/customizer-labels-site-not-launched.js b/projects/plugins/wpcomsh/customizer-fixes/customizer-labels-site-not-launched.js
index e5e84a21f2f70..fe6319ec0be16 100644
--- a/projects/plugins/wpcomsh/customizer-fixes/customizer-labels-site-not-launched.js
+++ b/projects/plugins/wpcomsh/customizer-fixes/customizer-labels-site-not-launched.js
@@ -1,17 +1,17 @@
-( function() {
- var keys = Object.keys( window._wpCustomizeControlsL10nSitePrivate );
+( function () {
+ const keys = Object.keys( window._wpCustomizeControlsL10nSitePrivate );
keys.forEach( function ( key ) {
window._wpCustomizeControlsL10n[ key ] = window._wpCustomizeControlsL10nSitePrivate[ key ];
} );
document.addEventListener(
'DOMContentLoaded',
- function() {
+ function () {
// Update Publish label used to populate Customizer save options.
- var choices = window._wpCustomizeSettings?.changeset?.statusChoices ?? [];
- for ( var i = 0; i < choices.length; ++i ) {
- if ( 'publish' === choices[i].status ) {
- choices[i].label = window._wpCustomizeControlsL10nSitePrivate.publish;
+ const choices = window._wpCustomizeSettings?.changeset?.statusChoices ?? [];
+ for ( let i = 0; i < choices.length; ++i ) {
+ if ( 'publish' === choices[ i ].status ) {
+ choices[ i ].label = window._wpCustomizeControlsL10nSitePrivate.publish;
return;
}
}
diff --git a/projects/plugins/wpcomsh/footer-credit/footer-credit/js/control.js b/projects/plugins/wpcomsh/footer-credit/footer-credit/js/control.js
index ee0680b27c7dc..bfff41978cd47 100644
--- a/projects/plugins/wpcomsh/footer-credit/footer-credit/js/control.js
+++ b/projects/plugins/wpcomsh/footer-credit/footer-credit/js/control.js
@@ -1,13 +1,14 @@
-(function ($) {
- $(document).ready(function ($) {
- $('#customize-control-footercredit select').on('change', function () {
- var val = $(this).val();
- var $upgrade = $(this).parent().find( '.footercredit-upgrade-link' );
- if ( val === 'hidden-upgrade') {
+( function ( $ ) {
+ // eslint-disable-next-line no-shadow
+ $( document ).ready( function ( $ ) {
+ $( '#customize-control-footercredit select' ).on( 'change', function () {
+ const val = $( this ).val();
+ const $upgrade = $( this ).parent().find( '.footercredit-upgrade-link' );
+ if ( val === 'hidden-upgrade' ) {
$upgrade.fadeIn();
} else {
$upgrade.fadeOut();
}
- });
- })
-})(jQuery);
\ No newline at end of file
+ } );
+ } );
+} )( jQuery );
diff --git a/projects/plugins/wpcomsh/frontend-notices/gifting-banner/js/gifting-banner.js b/projects/plugins/wpcomsh/frontend-notices/gifting-banner/js/gifting-banner.js
index c6690572a46fd..8637232d630e1 100644
--- a/projects/plugins/wpcomsh/frontend-notices/gifting-banner/js/gifting-banner.js
+++ b/projects/plugins/wpcomsh/frontend-notices/gifting-banner/js/gifting-banner.js
@@ -1,60 +1,61 @@
// NOTICE! This file exists in WPCOM & WPCOMSH. Updates need to be synced to both repos.
-(function () {
- document.addEventListener("DOMContentLoaded", function () {
- const hostnames = ['wordpress.com', 'w.link', 'automattic.com'];
+/* eslint-disable no-multi-str */
+/* global gifting_banner */
+( function () {
+ document.addEventListener( 'DOMContentLoaded', function () {
+ const hostnames = [ 'wordpress.com', 'w.link', 'automattic.com' ];
// Make sure we never show the banner on these hostnames.
- if (hostnames.includes(window.location.hostname)) {
+ if ( hostnames.includes( window.location.hostname ) ) {
return;
}
- var bumpStat = function (statName) {
+ const bumpStat = function ( statName ) {
new Image().src =
document.location.protocol +
- "//pixel.wp.com/b.gif" +
- "?v=wpcom-no-pv" +
- "&x_simple_gifting_banner=" +
+ '//pixel.wp.com/b.gif' +
+ '?v=wpcom-no-pv' +
+ '&x_simple_gifting_banner=' +
statName +
- "&rand=" +
+ '&rand=' +
Math.random();
};
- if (!document.cookie.includes("wpcom_gifting_banner_gifter=true")) {
+ if ( ! document.cookie.includes( 'wpcom_gifting_banner_gifter=true' ) ) {
giftingBanner();
- bumpStat("viewed_total");
+ bumpStat( 'viewed_total' );
- document.getElementById("wpcom-gifting-banner-button").onclick =
- function () {
- bumpStat("clicked");
- window.location.href = gifting_banner.checkout_link;
- };
- document.getElementById("wpcom-gifting-banner-more-info-button").onclick =
- function () {
- bumpStat("moreinfo");
- window.open(gifting_banner.more_info_link, "_blank");
- };
+ document.getElementById( 'wpcom-gifting-banner-button' ).onclick = function () {
+ bumpStat( 'clicked' );
+ window.location.href = gifting_banner.checkout_link;
+ };
+ document.getElementById( 'wpcom-gifting-banner-more-info-button' ).onclick = function () {
+ bumpStat( 'moreinfo' );
+ window.open( gifting_banner.more_info_link, '_blank' );
+ };
}
- });
+ } );
+ /**
+ * Prepend the gifting banner to the document body.
+ */
function giftingBanner() {
// Check for hash in URL to see if we should dismiss the banner
- var hash = location.hash;
- if ("#gift-thank-you" === hash) {
- var expiration = new Date();
+ const hash = location.hash;
+ if ( '#gift-thank-you' === hash ) {
+ const expiration = new Date();
expiration.setTime(
- expiration.getTime() +
- 1000 * 60 * 60 * 24 * gifting_banner.dismiss_days_count
+ expiration.getTime() + 1000 * 60 * 60 * 24 * gifting_banner.dismiss_days_count
);
- var expires = "expires=" + expiration.toUTCString();
- document.cookie =
- "wpcom_gifting_banner_gifter=true;" + expires + ";path=/";
- location.hash = "";
+ const expires = 'expires=' + expiration.toUTCString();
+ document.cookie = 'wpcom_gifting_banner_gifter=true;' + expires + ';path=/';
+ location.hash = '';
return;
}
- var notice = document.createElement("div");
- notice.setAttribute("id", "wpcom-gifting-banner");
- notice.classList.add("wpcom-gifting-banner");
- document.documentElement.classList.add("has-wpcom-gifting-banner");
+ const notice = document.createElement( 'div' );
+ notice.setAttribute( 'id', 'wpcom-gifting-banner' );
+ notice.classList.add( 'wpcom-gifting-banner' );
+ document.documentElement.classList.add( 'has-wpcom-gifting-banner' );
notice.innerHTML =
'" +
+ '' +
'' +
- "";
+ '';
- const title = document.createTextNode(gifting_banner.i18n.title);
- const subtitle = document.createTextNode(gifting_banner.i18n.subtitle);
- const more_info_button = document.createElement("BUTTON");
- more_info_button.setAttribute(
- "id",
- "wpcom-gifting-banner-more-info-button"
- );
- more_info_button.setAttribute(
- "class",
- "wpcom-gifting-banner__more-info-button"
- );
- const button_text = document.createTextNode(
- gifting_banner.i18n.button_text
- );
+ const title = document.createTextNode( gifting_banner.i18n.title );
+ const subtitle = document.createTextNode( gifting_banner.i18n.subtitle );
+ const more_info_button = document.createElement( 'BUTTON' );
+ more_info_button.setAttribute( 'id', 'wpcom-gifting-banner-more-info-button' );
+ more_info_button.setAttribute( 'class', 'wpcom-gifting-banner__more-info-button' );
+ const button_text = document.createTextNode( gifting_banner.i18n.button_text );
+ notice.getElementsByClassName( 'wpcom-gifting-banner__title' )[ 0 ].appendChild( title );
+ notice.getElementsByClassName( 'wpcom-gifting-banner__subtitle' )[ 0 ].appendChild( subtitle );
notice
- .getElementsByClassName("wpcom-gifting-banner__title")[0]
- .appendChild(title);
- notice
- .getElementsByClassName("wpcom-gifting-banner__subtitle")[0]
- .appendChild(subtitle);
- notice
- .getElementsByClassName("wpcom-gifting-banner__subtitle")[0]
- .appendChild(more_info_button);
- notice
- .getElementsByClassName("wpcom-gifting-banner__button")[0]
- .appendChild(button_text);
+ .getElementsByClassName( 'wpcom-gifting-banner__subtitle' )[ 0 ]
+ .appendChild( more_info_button );
+ notice.getElementsByClassName( 'wpcom-gifting-banner__button' )[ 0 ].appendChild( button_text );
- document.body.prepend(notice);
+ document.body.prepend( notice );
}
-})();
+} )();
diff --git a/projects/plugins/wpcomsh/logo-tool/js/customizer.js b/projects/plugins/wpcomsh/logo-tool/js/customizer.js
index 935037004534b..d37f4bac6aa1b 100644
--- a/projects/plugins/wpcomsh/logo-tool/js/customizer.js
+++ b/projects/plugins/wpcomsh/logo-tool/js/customizer.js
@@ -2,16 +2,23 @@
* IMPORTANT: All changes in this plugin should be synced between wpcom (Simple Sites) and wpcomsh (Atomic Sites).
*/
-(function( $, wp, LogoTool ){
- 'use strict';
-
- wp.customize.bind( 'ready', function() {
- var logoThumbnail, logoControlId = '#customize-control-' + LogoTool.controlId;
+/* global wp, _LogoTool_ */
+/**
+ * Logo tool customizer object.
+ *
+ * @param {object} $ - jQuery.
+ * @param {object} wp - WordPress.
+ * @param {object} LogoTool - LogoTool.
+ */
+( function ( $, wp, LogoTool ) {
+ wp.customize.bind( 'ready', function () {
+ let logoThumbnail;
+ const logoControlId = '#customize-control-' + LogoTool.controlId;
// Could be a Core custom-logo, Jetpack site-logo, or a theme specific logo that uses the same image control.
if ( wp.customize( LogoTool.settingId ) ) {
logoThumbnail = $( logoControlId + ' .thumbnail' );
- wp.customize( LogoTool.settingId ).bind( 'change', function( to, from ) {
+ wp.customize( LogoTool.settingId ).bind( 'change', function ( to ) {
if ( ! to ) {
insertLogoButton( logoControlId );
showLogoDescription( logoControlId );
@@ -19,7 +26,7 @@
// Logo button is removed automatically.
hideLogoDescription( logoControlId );
}
- });
+ } );
if ( ! logoThumbnail.length ) {
insertLogoButton( logoControlId );
@@ -29,26 +36,37 @@
hideLogoDescription( logoControlId );
}
}
- });
+ } );
+ /**
+ * Inserts the logo button.
+ *
+ * @param {string} id - the ID of the logo element.
+ */
function insertLogoButton( id ) {
- var button = $( '' ).text( LogoTool.l10n.create );
+ const button = $(
+ ''
+ ).text( LogoTool.l10n.create );
// Timeout lets us render after the core control finishes.
- setTimeout( function(){
+ setTimeout( function () {
$( id + ' .actions' ).prepend( button );
}, 10 );
}
- function removeLogoButton( id ) {
- $( id + ' .create-logo-button' ).remove();
- }
-
+ /**
+ * Shows logo description.
+ * @param {string} id - description element ID.
+ */
function showLogoDescription( id ) {
$( id + ' .description' ).show();
}
+ /**
+ * Hides logo description.
+ * @param {string} id - description element ID.
+ */
function hideLogoDescription( id ) {
$( id + ' .description' ).hide();
}
-})( jQuery, wp, _LogoTool_ );
+} )( jQuery, wp, _LogoTool_ );
diff --git a/projects/plugins/wpcomsh/widgets/music-player/music-player.js b/projects/plugins/wpcomsh/widgets/music-player/music-player.js
index b2de136b8b88e..0c0f2a15f7324 100644
--- a/projects/plugins/wpcomsh/widgets/music-player/music-player.js
+++ b/projects/plugins/wpcomsh/widgets/music-player/music-player.js
@@ -1,38 +1,39 @@
-(function(win, $, wp) {
-
- $('#widgets-right').on('click', '.music-player-edit', function( event ) {
- var shortcode, $shortcode, id, frame, attrs;
+/* global wp */
+( function ( win, $, wp ) {
+ $( '#widgets-right' ).on( 'click', '.music-player-edit', function ( event ) {
+ let shortcode, frame, attrs;
event.preventDefault();
- id = $( this ).data( 'widget_id' );
- $shortcode = $( '#' + id );
+ const id = $( this ).data( 'widget_id' );
+ const $shortcode = $( '#' + id );
shortcode = $shortcode.val();
if ( ! shortcode ) {
- frame = wp.media({
- frame: 'post',
- state: 'playlist-edit',
- editing: false,
- multiple: true
- }).open();
-
+ frame = wp
+ .media( {
+ frame: 'post',
+ state: 'playlist-edit',
+ editing: false,
+ multiple: true,
+ } )
+ .open();
} else {
-
shortcode = wp.shortcode.next( 'playlist', shortcode );
if ( ! shortcode ) {
if ( window.console ) {
window.console.error( 'Playlist shortcode malformed.' );
}
- $shortcode.val('');
+ $shortcode.val( '' );
- frame = wp.media({
- frame: 'post',
- state: 'playlist-edit',
- editing: false,
- multiple: true
- }).open();
+ frame = wp
+ .media( {
+ frame: 'post',
+ state: 'playlist-edit',
+ editing: false,
+ multiple: true,
+ } )
+ .open();
} else {
-
shortcode = shortcode.shortcode;
// Update old .com attributes to the post-3.9 form
@@ -55,10 +56,10 @@
}
}
- frame.state('playlist-edit').on('update', function(selection) {
- var shortcode = wp.media.playlist.shortcode( selection ).string();
- $shortcode.val( shortcode ).change();
+ frame.state( 'playlist-edit' ).on( 'update', function ( selection ) {
+ const shortcodeString = wp.media.playlist.shortcode( selection ).string();
+ $shortcode.val( shortcodeString ).change();
frame.detach();
- });
- });
-})(window, jQuery, wp);
+ } );
+ } );
+} )( window, jQuery, wp );
diff --git a/projects/plugins/wpcomsh/widgets/tlkio/tlkio.js b/projects/plugins/wpcomsh/widgets/tlkio/tlkio.js
index eb1bb4fb2a8a0..0d6408d0e68d1 100644
--- a/projects/plugins/wpcomsh/widgets/tlkio/tlkio.js
+++ b/projects/plugins/wpcomsh/widgets/tlkio/tlkio.js
@@ -1,28 +1,26 @@
( function ( window, document ) {
-
- var tlkioOnload = function ( e ) {
- var target_elements = document.querySelectorAll( '.tlkio-container' );
- for ( var i = 0, len = target_elements.length; i < len; ++i ) {
- var channel_name = target_elements[i].getAttribute( 'data-channel' ),
- custom_css_path = target_elements[i].getAttribute( 'data-theme' ),
- nickname = target_elements[i].getAttribute( 'data-nickname' ),
- iframe = document.createElement( 'iframe' );
+ const tlkioOnload = function () {
+ const target_elements = document.querySelectorAll( '.tlkio-container' );
+ for ( let i = 0, len = target_elements.length; i < len; ++i ) {
+ const channel_name = target_elements[ i ].getAttribute( 'data-channel' ),
+ custom_css_path = target_elements[ i ].getAttribute( 'data-theme' ),
+ nickname = target_elements[ i ].getAttribute( 'data-nickname' ),
+ iframe = document.createElement( 'iframe' );
// var iframe_src = 'http://embed.lvh.me:3000/' + channel_name,
- var iframe_src = '//embed.tlk.io/' + channel_name,
- iframe_query = [];
-
+ let iframe_src = '//embed.tlk.io/' + encodeURIComponent( channel_name );
+ const iframe_query = [];
if ( custom_css_path && custom_css_path.length > 0 ) {
- iframe_query.push( 'custom_css_path=' + custom_css_path );
+ iframe_query.push( 'custom_css_path=' + encodeURIComponent( custom_css_path ) );
}
if ( nickname && nickname.length > 0 ) {
- iframe_query.push('nickname=' + nickname );
+ iframe_query.push( 'nickname=' + encodeURIComponent( nickname ) );
}
if ( iframe_query.length > 0 ) {
- iframe_src += '?' + iframe_query.join ( '&' );
+ iframe_src += '?' + iframe_query.join( '&' );
}
iframe.setAttribute( 'src', iframe_src );
@@ -31,13 +29,17 @@
iframe.setAttribute( 'frameborder', '0' );
iframe.setAttribute( 'style', 'margin-bottom: -8px;' );
- var current_style = target_elements[i].getAttribute( 'style' );
- target_elements[i].setAttribute( 'style', 'overflow: auto; -webkit-overflow-scrolling: touch;' + current_style );
+ const current_style = target_elements[ i ].getAttribute( 'style' );
+ target_elements[ i ].setAttribute(
+ 'style',
+ 'overflow: auto; -webkit-overflow-scrolling: touch;' + current_style
+ );
- target_elements[i].appendChild( iframe );
+ target_elements[ i ].appendChild( iframe );
}
};
- window.addEventListener ? window.addEventListener( 'load', tlkioOnload, false ) : window.attachEvent( 'onload', tlkioOnload );
-
+ window.addEventListener
+ ? window.addEventListener( 'load', tlkioOnload, false )
+ : window.attachEvent( 'onload', tlkioOnload );
} )( window, document );