Edit File by line

/* global WP_Smush */

[0] Fix | Delete

/* global ajaxurl */

[1] Fix | Delete

/* global _ */

[2] Fix | Delete

[3] Fix | Delete

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

[4] Fix | Delete

[5] Fix | Delete

/**

[6] Fix | Delete

* Bulk restore JavaScript code.

[7] Fix | Delete

[8] Fix | Delete

* @since 3.2.2

[9] Fix | Delete

[10] Fix | Delete

(function () {

[11] Fix | Delete

'use strict';

[12] Fix | Delete

[13] Fix | Delete

/**

[14] Fix | Delete

* Bulk restore modal.

[15] Fix | Delete

[16] Fix | Delete

* @since 3.2.2

[17] Fix | Delete

[18] Fix | Delete

WP_Smush.restore = {

[19] Fix | Delete

modal: document.getElementById('smush-restore-images-dialog'),

[20] Fix | Delete

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

[21] Fix | Delete

settings: {

[22] Fix | Delete

slide: 'start', // start, progress or finish.

[23] Fix | Delete

success: 0,

[24] Fix | Delete

errors: [],

[25] Fix | Delete

[26] Fix | Delete

items: [], // total items, 1 item = 1 step.

[27] Fix | Delete

success: [], // successful items restored.

[28] Fix | Delete

errors: [], // failed items.

[29] Fix | Delete

currentStep: 0,

[30] Fix | Delete

totalSteps: 0,

[31] Fix | Delete

[32] Fix | Delete

/**

[33] Fix | Delete

* Init module.

[34] Fix | Delete

[35] Fix | Delete

init() {

[36] Fix | Delete

if (!this.modal) {

[37] Fix | Delete

return;

[38] Fix | Delete

}

[39] Fix | Delete

[40] Fix | Delete

this.settings = {

[41] Fix | Delete

slide: 'start',

[42] Fix | Delete

success: 0,

[43] Fix | Delete

errors: [],

[44] Fix | Delete

};

[45] Fix | Delete

[46] Fix | Delete

this.resetModalWidth();

[47] Fix | Delete

this.renderTemplate();

[48] Fix | Delete

[49] Fix | Delete

// Show the modal.

[50] Fix | Delete

[51] Fix | Delete

window.SUI.openModal(

[52] Fix | Delete

'smush-restore-images-dialog',

[53] Fix | Delete

'wpbody-content',

[54] Fix | Delete

undefined,

[55] Fix | Delete

false

[56] Fix | Delete

);

[57] Fix | Delete

[58] Fix | Delete

[59] Fix | Delete

/**

[60] Fix | Delete

* Update the template, register new listeners.

[61] Fix | Delete

[62] Fix | Delete

renderTemplate() {

[63] Fix | Delete

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

[64] Fix | Delete

const content = template(this.settings);

[65] Fix | Delete

[66] Fix | Delete

if (content) {

[67] Fix | Delete

this.contentContainer.innerHTML = content;

[68] Fix | Delete

}

[69] Fix | Delete

[70] Fix | Delete

this.bindSubmit();

[71] Fix | Delete

[72] Fix | Delete

[73] Fix | Delete

/**

[74] Fix | Delete

* Reset modal width.

[75] Fix | Delete

[76] Fix | Delete

* @since 3.6.0

[77] Fix | Delete

[78] Fix | Delete

resetModalWidth() {

[79] Fix | Delete

this.modal.style.maxWidth = '460px';

[80] Fix | Delete

this.modal.querySelector('.sui-box').style.maxWidth = '460px';

[81] Fix | Delete

[82] Fix | Delete

[83] Fix | Delete

/**

[84] Fix | Delete

* Catch "Finish setup wizard" button click.

[85] Fix | Delete

[86] Fix | Delete

bindSubmit() {

[87] Fix | Delete

const confirmButton = this.modal.querySelector(

[88] Fix | Delete

'button[id="smush-bulk-restore-button"]'

[89] Fix | Delete

);

[90] Fix | Delete

const self = this;

[91] Fix | Delete

[92] Fix | Delete

if (confirmButton) {

[93] Fix | Delete

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

[94] Fix | Delete

e.preventDefault();

[95] Fix | Delete

self.resetModalWidth();

[96] Fix | Delete

[97] Fix | Delete

self.settings = { slide: 'progress' };

[98] Fix | Delete

self.errors = [];

[99] Fix | Delete

[100] Fix | Delete

self.renderTemplate();

[101] Fix | Delete

self.initScan();

[102] Fix | Delete

[103] Fix | Delete

tracker.track('Bulk Restore Triggered');

[104] Fix | Delete

});

[105] Fix | Delete

}

[106] Fix | Delete

[107] Fix | Delete

[108] Fix | Delete

/**

[109] Fix | Delete

* Cancel the bulk restore.

[110] Fix | Delete

[111] Fix | Delete

cancel() {

[112] Fix | Delete

if (

[113] Fix | Delete

'start' === this.settings.slide ||

[114] Fix | Delete

'finish' === this.settings.slide

[115] Fix | Delete

) {

[116] Fix | Delete

// Hide the modal.

[117] Fix | Delete

window.SUI.closeModal();

[118] Fix | Delete

} else {

[119] Fix | Delete

this.updateProgressBar(true);

[120] Fix | Delete

window.location.reload();

[121] Fix | Delete

}

[122] Fix | Delete

[123] Fix | Delete

[124] Fix | Delete

/**

[125] Fix | Delete

* Update progress bar during directory smush.

[126] Fix | Delete

[127] Fix | Delete

* @param {boolean} cancel Cancel status.

[128] Fix | Delete

[129] Fix | Delete

updateProgressBar(cancel = false) {

[130] Fix | Delete

let progress = 0;

[131] Fix | Delete

if (0 < this.currentStep) {

[132] Fix | Delete

progress = Math.min(

[133] Fix | Delete

Math.round((this.currentStep * 100) / this.totalSteps),

[134] Fix | Delete

[135] Fix | Delete

);

[136] Fix | Delete

}

[137] Fix | Delete

[138] Fix | Delete

if (progress > 100) {

[139] Fix | Delete

progress = 100;

[140] Fix | Delete

}

[141] Fix | Delete

[142] Fix | Delete

// Update progress bar

[143] Fix | Delete

this.modal.querySelector('.sui-progress-text span').innerHTML =

[144] Fix | Delete

progress + '%';

[145] Fix | Delete

this.modal.querySelector('.sui-progress-bar span').style.width =

[146] Fix | Delete

progress + '%';

[147] Fix | Delete

[148] Fix | Delete

const statusDiv = this.modal.querySelector(

[149] Fix | Delete

'.sui-progress-state-text'

[150] Fix | Delete

);

[151] Fix | Delete

if (progress >= 90) {

[152] Fix | Delete

statusDiv.innerHTML = 'Finalizing...';

[153] Fix | Delete

} else if (cancel) {

[154] Fix | Delete

statusDiv.innerHTML = 'Cancelling...';

[155] Fix | Delete

} else {

[156] Fix | Delete

statusDiv.innerHTML =

[157] Fix | Delete

this.currentStep +

[158] Fix | Delete

'/' +

[159] Fix | Delete

this.totalSteps +

[160] Fix | Delete

' ' +

[161] Fix | Delete

'images restored';

[162] Fix | Delete

}

[163] Fix | Delete

[164] Fix | Delete

[165] Fix | Delete

/**

[166] Fix | Delete

* First step in bulk restore - get the bulk attachment count.

[167] Fix | Delete

[168] Fix | Delete

initScan() {

[169] Fix | Delete

const self = this;

[170] Fix | Delete

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

[171] Fix | Delete

[172] Fix | Delete

const xhr = new XMLHttpRequest();

[173] Fix | Delete

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

[174] Fix | Delete

xhr.setRequestHeader(

[175] Fix | Delete

'Content-type',

[176] Fix | Delete

'application/x-www-form-urlencoded'

[177] Fix | Delete

);

[178] Fix | Delete

xhr.onload = () => {

[179] Fix | Delete

if (200 === xhr.status) {

[180] Fix | Delete

const res = JSON.parse(xhr.response);

[181] Fix | Delete

if ('undefined' !== typeof res.data.items) {

[182] Fix | Delete

self.items = res.data.items;

[183] Fix | Delete

self.totalSteps = res.data.items.length;

[184] Fix | Delete

self.step();

[185] Fix | Delete

}

[186] Fix | Delete

} else {

[187] Fix | Delete

window.console.log(

[188] Fix | Delete

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

[189] Fix | Delete

);

[190] Fix | Delete

}

[191] Fix | Delete

};

[192] Fix | Delete

xhr.send('_ajax_nonce=' + _nonce.value);

[193] Fix | Delete

[194] Fix | Delete

[195] Fix | Delete

/**

[196] Fix | Delete

* Execute a scan step recursively

[197] Fix | Delete

[198] Fix | Delete

step() {

[199] Fix | Delete

const self = this;

[200] Fix | Delete

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

[201] Fix | Delete

[202] Fix | Delete

if (0 < this.items.length) {

[203] Fix | Delete

const item = this.items.pop();

[204] Fix | Delete

const xhr = new XMLHttpRequest();

[205] Fix | Delete

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

[206] Fix | Delete

xhr.setRequestHeader(

[207] Fix | Delete

'Content-type',

[208] Fix | Delete

'application/x-www-form-urlencoded'

[209] Fix | Delete

);

[210] Fix | Delete

xhr.onload = () => {

[211] Fix | Delete

this.currentStep++;

[212] Fix | Delete

[213] Fix | Delete

if (200 === xhr.status) {

[214] Fix | Delete

const res = JSON.parse(xhr.response);

[215] Fix | Delete

const data = ((res || {}).data || {});

[216] Fix | Delete

if (data.success) {

[217] Fix | Delete

self.success.push(item);

[218] Fix | Delete

} else {

[219] Fix | Delete

self.errors.push({

[220] Fix | Delete

id: item,

[221] Fix | Delete

src: data.src || "Error",

[222] Fix | Delete

thumb: data.thumb,

[223] Fix | Delete

link: data.link,

[224] Fix | Delete

});

[225] Fix | Delete

}

[226] Fix | Delete

}

[227] Fix | Delete

[228] Fix | Delete

self.updateProgressBar();

[229] Fix | Delete

self.step();

[230] Fix | Delete

};

[231] Fix | Delete

xhr.send('item=' + item + '&_ajax_nonce=' + _nonce.value);

[232] Fix | Delete

} else {

[233] Fix | Delete

// Finish.

[234] Fix | Delete

this.settings = {

[235] Fix | Delete

slide: 'finish',

[236] Fix | Delete

success: this.success.length,

[237] Fix | Delete

errors: this.errors,

[238] Fix | Delete

total: this.totalSteps,

[239] Fix | Delete

};

[240] Fix | Delete

[241] Fix | Delete

self.renderTemplate();

[242] Fix | Delete

if (0 < this.errors.length) {

[243] Fix | Delete

this.modal.style.maxWidth = '660px';

[244] Fix | Delete

this.modal.querySelector('.sui-box').style.maxWidth =

[245] Fix | Delete

'660px';

[246] Fix | Delete

}

[247] Fix | Delete

}

[248] Fix | Delete

[249] Fix | Delete

};

[250] Fix | Delete

[251] Fix | Delete

/**

[252] Fix | Delete

* Template function (underscores based).

[253] Fix | Delete

[254] Fix | Delete

* @type {Function}

[255] Fix | Delete

[256] Fix | Delete

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

[257] Fix | Delete

let compiled;

[258] Fix | Delete

const options = {

[259] Fix | Delete

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

[260] Fix | Delete

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

[261] Fix | Delete

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

[262] Fix | Delete

variable: 'data',

[263] Fix | Delete

};

[264] Fix | Delete

[265] Fix | Delete

return (data) => {

[266] Fix | Delete

_.templateSettings = options;

[267] Fix | Delete

compiled =

[268] Fix | Delete

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

[269] Fix | Delete

return compiled(data);

[270] Fix | Delete

};

[271] Fix | Delete

});

[272] Fix | Delete

})();

[273] Fix | Delete

[274] Fix | Delete