Edit File by line

/* global WP_Smush */

[0] Fix | Delete

/* global ajaxurl */

[1] Fix | Delete

import tracker from "../utils/tracker";

[2] Fix | Delete

[3] Fix | Delete

/**

[4] Fix | Delete

* Modals JavaScript code.

[5] Fix | Delete

[6] Fix | Delete

( function() {

[7] Fix | Delete

'use strict';

[8] Fix | Delete

[9] Fix | Delete

/**

[10] Fix | Delete

* Onboarding modal.

[11] Fix | Delete

[12] Fix | Delete

* @since 3.1

[13] Fix | Delete

[14] Fix | Delete

WP_Smush.onboarding = {

[15] Fix | Delete

membership: 'free', // Assume free by default.

[16] Fix | Delete

onboardingModal: document.getElementById( 'smush-onboarding-dialog' ),

[17] Fix | Delete

first_slide: 'usage',

[18] Fix | Delete

settings: {

[19] Fix | Delete

first: true,

[20] Fix | Delete

last: false,

[21] Fix | Delete

slide: 'usage',

[22] Fix | Delete

value: false,

[23] Fix | Delete

[24] Fix | Delete

selection: {

[25] Fix | Delete

usage: false,

[26] Fix | Delete

auto: true,

[27] Fix | Delete

lossy: true,

[28] Fix | Delete

strip_exif: true,

[29] Fix | Delete

original: false,

[30] Fix | Delete

lazy_load: true,

[31] Fix | Delete

[32] Fix | Delete

contentContainer: document.getElementById( 'smush-onboarding-content' ),

[33] Fix | Delete

onboardingSlides: [

[34] Fix | Delete

'usage',

[35] Fix | Delete

'auto',

[36] Fix | Delete

'lossy',

[37] Fix | Delete

'strip_exif',

[38] Fix | Delete

'original',

[39] Fix | Delete

'lazy_load',

[40] Fix | Delete

[41] Fix | Delete

touchX: null,

[42] Fix | Delete

touchY: null,

[43] Fix | Delete

recheckImagesLink: '',

[44] Fix | Delete

/**

[45] Fix | Delete

* Init module.

[46] Fix | Delete

[47] Fix | Delete

init() {

[48] Fix | Delete

if ( ! this.onboardingModal ) {

[49] Fix | Delete

return;

[50] Fix | Delete

}

[51] Fix | Delete

[52] Fix | Delete

const dialog = document.getElementById( 'smush-onboarding' );

[53] Fix | Delete

[54] Fix | Delete

this.membership = dialog.dataset.type;

[55] Fix | Delete

this.recheckImagesLink = dialog.dataset.ctaUrl;

[56] Fix | Delete

[57] Fix | Delete

if ( 'pro' !== this.membership ) {

[58] Fix | Delete

this.onboardingSlides = [

[59] Fix | Delete

'usage',

[60] Fix | Delete

'auto',

[61] Fix | Delete

'lossy',

[62] Fix | Delete

'strip_exif',

[63] Fix | Delete

'lazy_load',

[64] Fix | Delete

];

[65] Fix | Delete

}

[66] Fix | Delete

[67] Fix | Delete

if ( 'false' === dialog.dataset.tracking ) {

[68] Fix | Delete

this.onboardingSlides.pop();

[69] Fix | Delete

}

[70] Fix | Delete

[71] Fix | Delete

this.renderTemplate();

[72] Fix | Delete

[73] Fix | Delete

// Skip setup.

[74] Fix | Delete

const skipButton = this.onboardingModal.querySelector(

[75] Fix | Delete

'.smush-onboarding-skip-link'

[76] Fix | Delete

);

[77] Fix | Delete

if ( skipButton ) {

[78] Fix | Delete

skipButton.addEventListener( 'click', this.skipSetup.bind( this ) );

[79] Fix | Delete

}

[80] Fix | Delete

[81] Fix | Delete

// Show the modal.

[82] Fix | Delete

window.SUI.openModal(

[83] Fix | Delete

'smush-onboarding-dialog',

[84] Fix | Delete

'wpcontent',

[85] Fix | Delete

undefined,

[86] Fix | Delete

false

[87] Fix | Delete

);

[88] Fix | Delete

[89] Fix | Delete

[90] Fix | Delete

/**

[91] Fix | Delete

* Get swipe coordinates.

[92] Fix | Delete

[93] Fix | Delete

* @param {Object} e

[94] Fix | Delete

[95] Fix | Delete

handleTouchStart( e ) {

[96] Fix | Delete

const firstTouch = e.touches[ 0 ];

[97] Fix | Delete

this.touchX = firstTouch.clientX;

[98] Fix | Delete

this.touchY = firstTouch.clientY;

[99] Fix | Delete

[100] Fix | Delete

[101] Fix | Delete

/**

[102] Fix | Delete

* Process swipe left/right.

[103] Fix | Delete

[104] Fix | Delete

* @param {Object} e

[105] Fix | Delete

[106] Fix | Delete

handleTouchMove( e ) {

[107] Fix | Delete

if ( ! this.touchX || ! this.touchY ) {

[108] Fix | Delete

return;

[109] Fix | Delete

}

[110] Fix | Delete

[111] Fix | Delete

const xUp = e.touches[ 0 ].clientX,

[112] Fix | Delete

yUp = e.touches[ 0 ].clientY,

[113] Fix | Delete

xDiff = this.touchX - xUp,

[114] Fix | Delete

yDiff = this.touchY - yUp;

[115] Fix | Delete

[116] Fix | Delete

if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {

[117] Fix | Delete

if ( xDiff > 0 ) {

[118] Fix | Delete

if ( false === WP_Smush.onboarding.settings.last ) {

[119] Fix | Delete

WP_Smush.onboarding.next( null, 'next' );

[120] Fix | Delete

}

[121] Fix | Delete

} else if ( false === WP_Smush.onboarding.settings.first ) {

[122] Fix | Delete

WP_Smush.onboarding.next( null, 'prev' );

[123] Fix | Delete

}

[124] Fix | Delete

}

[125] Fix | Delete

[126] Fix | Delete

this.touchX = null;

[127] Fix | Delete

this.touchY = null;

[128] Fix | Delete

[129] Fix | Delete

[130] Fix | Delete

/**

[131] Fix | Delete

* Update the template, register new listeners.

[132] Fix | Delete

[133] Fix | Delete

* @param {string} directionClass Accepts: fadeInRight, fadeInLeft, none.

[134] Fix | Delete

[135] Fix | Delete

renderTemplate( directionClass = 'none' ) {

[136] Fix | Delete

// Grab the selected value.

[137] Fix | Delete

const input = this.onboardingModal.querySelector(

[138] Fix | Delete

'input[type="checkbox"]'

[139] Fix | Delete

);

[140] Fix | Delete

if ( input ) {

[141] Fix | Delete

this.selection[ input.id ] = input.checked;

[142] Fix | Delete

}

[143] Fix | Delete

[144] Fix | Delete

const template = WP_Smush.onboarding.template( 'smush-onboarding' );

[145] Fix | Delete

const content = template( this.settings );

[146] Fix | Delete

[147] Fix | Delete

if ( content ) {

[148] Fix | Delete

this.contentContainer.innerHTML = content;

[149] Fix | Delete

[150] Fix | Delete

if ( 'none' === directionClass ) {

[151] Fix | Delete

this.contentContainer.classList.add( 'loaded' );

[152] Fix | Delete

} else {

[153] Fix | Delete

this.contentContainer.classList.remove( 'loaded' );

[154] Fix | Delete

this.contentContainer.classList.add( directionClass );

[155] Fix | Delete

setTimeout( () => {

[156] Fix | Delete

this.contentContainer.classList.add( 'loaded' );

[157] Fix | Delete

this.contentContainer.classList.remove(

[158] Fix | Delete

directionClass

[159] Fix | Delete

);

[160] Fix | Delete

}, 600 );

[161] Fix | Delete

}

[162] Fix | Delete

}

[163] Fix | Delete

[164] Fix | Delete

this.onboardingModal.addEventListener(

[165] Fix | Delete

'touchstart',

[166] Fix | Delete

this.handleTouchStart,

[167] Fix | Delete

false

[168] Fix | Delete

);

[169] Fix | Delete

this.onboardingModal.addEventListener(

[170] Fix | Delete

'touchmove',

[171] Fix | Delete

this.handleTouchMove,

[172] Fix | Delete

false

[173] Fix | Delete

);

[174] Fix | Delete

[175] Fix | Delete

this.bindSubmit();

[176] Fix | Delete

[177] Fix | Delete

[178] Fix | Delete

/**

[179] Fix | Delete

* Catch "Finish setup wizard" button click.

[180] Fix | Delete

[181] Fix | Delete

bindSubmit() {

[182] Fix | Delete

const submitButton = this.onboardingModal.querySelector(

[183] Fix | Delete

'button[type="submit"]'

[184] Fix | Delete

);

[185] Fix | Delete

const self = this;

[186] Fix | Delete

[187] Fix | Delete

if ( submitButton ) {

[188] Fix | Delete

submitButton.addEventListener( 'click', function( e ) {

[189] Fix | Delete

e.preventDefault();

[190] Fix | Delete

[191] Fix | Delete

// Because we are not rendering the template, we need to update the last element value.

[192] Fix | Delete

const input = self.onboardingModal.querySelector(

[193] Fix | Delete

'input[type="checkbox"]'

[194] Fix | Delete

);

[195] Fix | Delete

if ( input ) {

[196] Fix | Delete

self.selection[ input.id ] = input.checked;

[197] Fix | Delete

}

[198] Fix | Delete

[199] Fix | Delete

const _nonce = document.getElementById(

[200] Fix | Delete

'smush_quick_setup_nonce'

[201] Fix | Delete

);

[202] Fix | Delete

[203] Fix | Delete

const xhr = new XMLHttpRequest();

[204] Fix | Delete

xhr.open( 'POST', ajaxurl + '?action=smush_setup', true );

[205] Fix | Delete

xhr.setRequestHeader(

[206] Fix | Delete

'Content-type',

[207] Fix | Delete

'application/x-www-form-urlencoded'

[208] Fix | Delete

);

[209] Fix | Delete

xhr.onload = () => {

[210] Fix | Delete

if ( 200 === xhr.status ) {

[211] Fix | Delete

self.onFinishingSetup();

[212] Fix | Delete

} else {

[213] Fix | Delete

window.console.log(

[214] Fix | Delete

'Request failed. Returned status of ' +

[215] Fix | Delete

xhr.status

[216] Fix | Delete

);

[217] Fix | Delete

}

[218] Fix | Delete

};

[219] Fix | Delete

xhr.send(

[220] Fix | Delete

'smush_settings=' +

[221] Fix | Delete

JSON.stringify( self.selection ) +

[222] Fix | Delete

'&_ajax_nonce=' +

[223] Fix | Delete

_nonce.value

[224] Fix | Delete

);

[225] Fix | Delete

} );

[226] Fix | Delete

}

[227] Fix | Delete

[228] Fix | Delete

[229] Fix | Delete

onFinishingSetup() {

[230] Fix | Delete

this.onFinish();

[231] Fix | Delete

this.startRecheckImages();

[232] Fix | Delete

[233] Fix | Delete

[234] Fix | Delete

onFinish() {

[235] Fix | Delete

window.SUI.closeModal();

[236] Fix | Delete

[237] Fix | Delete

[238] Fix | Delete

startRecheckImages() {

[239] Fix | Delete

if ( ! this.recheckImagesLink ) {

[240] Fix | Delete

return;

[241] Fix | Delete

}

[242] Fix | Delete

window.location.href = this.recheckImagesLink;

[243] Fix | Delete

[244] Fix | Delete

[245] Fix | Delete

/**

[246] Fix | Delete

* Handle navigation.

[247] Fix | Delete

[248] Fix | Delete

* @param {Object} e

[249] Fix | Delete

* @param {null|string} whereTo

[250] Fix | Delete

[251] Fix | Delete

next( e, whereTo = null ) {

[252] Fix | Delete

const index = this.onboardingSlides.indexOf( this.settings.slide );

[253] Fix | Delete

let newIndex = 0;

[254] Fix | Delete

[255] Fix | Delete

if ( ! whereTo ) {

[256] Fix | Delete

newIndex =

[257] Fix | Delete

null !== e && e.classList.contains( 'next' )

[258] Fix | Delete

? index + 1

[259] Fix | Delete

: index - 1;

[260] Fix | Delete

} else {

[261] Fix | Delete

newIndex = 'next' === whereTo ? index + 1 : index - 1;

[262] Fix | Delete

}

[263] Fix | Delete

[264] Fix | Delete

const directionClass =

[265] Fix | Delete

null !== e && e.classList.contains( 'next' )

[266] Fix | Delete

? 'fadeInRight'

[267] Fix | Delete

: 'fadeInLeft';

[268] Fix | Delete

[269] Fix | Delete

this.settings = {

[270] Fix | Delete

first: 0 === newIndex,

[271] Fix | Delete

last: newIndex + 1 === this.onboardingSlides.length, // length !== index

[272] Fix | Delete

slide: this.onboardingSlides[ newIndex ],

[273] Fix | Delete

value: this.selection[ this.onboardingSlides[ newIndex ] ],

[274] Fix | Delete

};

[275] Fix | Delete

[276] Fix | Delete

this.renderTemplate( directionClass );

[277] Fix | Delete

[278] Fix | Delete

[279] Fix | Delete

/**

[280] Fix | Delete

* Handle circle navigation.

[281] Fix | Delete

[282] Fix | Delete

* @param {string} target

[283] Fix | Delete

[284] Fix | Delete

goTo( target ) {

[285] Fix | Delete

const newIndex = this.onboardingSlides.indexOf( target );

[286] Fix | Delete

[287] Fix | Delete

this.settings = {

[288] Fix | Delete

first: 0 === newIndex,

[289] Fix | Delete

last: newIndex + 1 === this.onboardingSlides.length, // length !== index

[290] Fix | Delete

slide: target,

[291] Fix | Delete

value: this.selection[ target ],

[292] Fix | Delete

};

[293] Fix | Delete

[294] Fix | Delete

this.renderTemplate();

[295] Fix | Delete

[296] Fix | Delete

[297] Fix | Delete

/**

[298] Fix | Delete

* Skip onboarding experience.

[299] Fix | Delete

[300] Fix | Delete

skipSetup() {

[301] Fix | Delete

const _nonce = document.getElementById( 'smush_quick_setup_nonce' );

[302] Fix | Delete

[303] Fix | Delete

const xhr = new XMLHttpRequest();

[304] Fix | Delete

xhr.open(

[305] Fix | Delete

'POST',

[306] Fix | Delete

ajaxurl + '?action=skip_smush_setup&_ajax_nonce=' + _nonce.value

[307] Fix | Delete

);

[308] Fix | Delete

xhr.onload = () => {

[309] Fix | Delete

if ( 200 === xhr.status ) {

[310] Fix | Delete

this.onSkipSetup();

[311] Fix | Delete

} else {

[312] Fix | Delete

window.console.log(

[313] Fix | Delete

'Request failed. Returned status of ' + xhr.status

[314] Fix | Delete

);

[315] Fix | Delete

}

[316] Fix | Delete

};

[317] Fix | Delete

xhr.send();

[318] Fix | Delete

[319] Fix | Delete

[320] Fix | Delete

onSkipSetup() {

[321] Fix | Delete

this.onFinish();

[322] Fix | Delete

[323] Fix | Delete

[324] Fix | Delete

/**

[325] Fix | Delete

* Hide new features modal.

[326] Fix | Delete

* @since 3.7.0

[327] Fix | Delete

* @since 3.12.2 Add a new parameter redirectUrl

[328] Fix | Delete

[329] Fix | Delete

hideUpgradeModal: ( e, button ) => {

[330] Fix | Delete

e.preventDefault();

[331] Fix | Delete

button.classList.add( 'wp-smush-link-in-progress' );

[332] Fix | Delete

const redirectUrl = button?.href;

[333] Fix | Delete

const xhr = new XMLHttpRequest();

[334] Fix | Delete

xhr.open( 'POST', ajaxurl + '?action=hide_new_features&_ajax_nonce=' + window.wp_smush_msgs.nonce );

[335] Fix | Delete

xhr.onload = () => {

[336] Fix | Delete

window.SUI.closeModal();

[337] Fix | Delete

button.classList.remove( 'wp-smush-link-in-progress' );

[338] Fix | Delete

[339] Fix | Delete

const actionName = redirectUrl ? 'cta_clicked' : 'closed';

[340] Fix | Delete

tracker.track( 'update_modal_displayed', {

[341] Fix | Delete

Action: actionName,

[342] Fix | Delete

} );

[343] Fix | Delete

[344] Fix | Delete

if ( 200 === xhr.status ) {

[345] Fix | Delete

if ( redirectUrl ) {

[346] Fix | Delete

window.location.href = redirectUrl;

[347] Fix | Delete

}

[348] Fix | Delete

} else {

[349] Fix | Delete

window.console.log(

[350] Fix | Delete

'Request failed. Returned status of ' + xhr.status

[351] Fix | Delete

);

[352] Fix | Delete

}

[353] Fix | Delete

};

[354] Fix | Delete

xhr.send();

[355] Fix | Delete

[356] Fix | Delete

};

[357] Fix | Delete

[358] Fix | Delete

/**

[359] Fix | Delete

* Template function (underscores based).

[360] Fix | Delete

[361] Fix | Delete

* @type {Function}

[362] Fix | Delete

[363] Fix | Delete

WP_Smush.onboarding.template = _.memoize( ( id ) => {

[364] Fix | Delete

let compiled;

[365] Fix | Delete

const options = {

[366] Fix | Delete

evaluate: /<#([\s\S]+?)#>/g,

[367] Fix | Delete

interpolate: /{{{([\s\S]+?)}}}/g,

[368] Fix | Delete

escape: /{{([^}]+?)}}(?!})/g,

[369] Fix | Delete

variable: 'data',

[370] Fix | Delete

};

[371] Fix | Delete

[372] Fix | Delete

return ( data ) => {

[373] Fix | Delete

_.templateSettings = options;

[374] Fix | Delete

compiled =

[375] Fix | Delete

compiled ||

[376] Fix | Delete

_.template( document.getElementById( id ).innerHTML );

[377] Fix | Delete

data.first_slide = WP_Smush.onboarding.first_slide;

[378] Fix | Delete

return compiled( data );

[379] Fix | Delete

};

[380] Fix | Delete

} );

[381] Fix | Delete

[382] Fix | Delete

window.addEventListener( 'load', () => WP_Smush.onboarding.init() );

[383] Fix | Delete

}() );

[384] Fix | Delete

[385] Fix | Delete