Edit File by line

/* global WP_Smush */

[0] Fix | Delete

/* global ajaxurl */

[1] Fix | Delete

[2] Fix | Delete

/**

[3] Fix | Delete

* Directory Smush module JavaScript code.

[4] Fix | Delete

[5] Fix | Delete

* @since 2.8.1 Separated from admin.js into dedicated file.

[6] Fix | Delete

[7] Fix | Delete

[8] Fix | Delete

import { createTree } from 'jquery.fancytree';

[9] Fix | Delete

import Scanner from '../smush/directory-scanner';

[10] Fix | Delete

[11] Fix | Delete

( function( $ ) {

[12] Fix | Delete

'use strict';

[13] Fix | Delete

[14] Fix | Delete

WP_Smush.directory = {

[15] Fix | Delete

selected: [],

[16] Fix | Delete

tree: [],

[17] Fix | Delete

wp_smush_msgs: [],

[18] Fix | Delete

triggered: false,

[19] Fix | Delete

[20] Fix | Delete

init() {

[21] Fix | Delete

const self = this,

[22] Fix | Delete

progressDialog = $( '#wp-smush-progress-dialog' );

[23] Fix | Delete

[24] Fix | Delete

let totalSteps = 0,

[25] Fix | Delete

currentScanStep = 0;

[26] Fix | Delete

[27] Fix | Delete

// Make sure directory smush vars are set.

[28] Fix | Delete

if ( typeof window.wp_smushit_data.dir_smush !== 'undefined' ) {

[29] Fix | Delete

totalSteps = window.wp_smushit_data.dir_smush.totalSteps;

[30] Fix | Delete

currentScanStep =

[31] Fix | Delete

window.wp_smushit_data.dir_smush.currentScanStep;

[32] Fix | Delete

}

[33] Fix | Delete

[34] Fix | Delete

// Init image scanner.

[35] Fix | Delete

this.scanner = new Scanner( totalSteps, currentScanStep );

[36] Fix | Delete

[37] Fix | Delete

/**

[38] Fix | Delete

* Smush translation strings.

[39] Fix | Delete

[40] Fix | Delete

* @param {Array} wp_smush_msgs

[41] Fix | Delete

[42] Fix | Delete

this.wp_smush_msgs = window.wp_smush_msgs || {};

[43] Fix | Delete

[44] Fix | Delete

/**

[45] Fix | Delete

* Open the "Select Smush directory" modal.

[46] Fix | Delete

[47] Fix | Delete

$( 'button.wp-smush-browse, a#smush-directory-open-modal' ).on(

[48] Fix | Delete

'click',

[49] Fix | Delete

function( e ) {

[50] Fix | Delete

e.preventDefault();

[51] Fix | Delete

[52] Fix | Delete

if ( $( e.currentTarget ).hasClass( 'wp-smush-browse' ) ) {

[53] Fix | Delete

// Hide all the notices.

[54] Fix | Delete

$( 'div.wp-smush-scan-result div.wp-smush-notice' ).hide();

[55] Fix | Delete

[56] Fix | Delete

// Remove notice.

[57] Fix | Delete

$( 'div.wp-smush-info' ).remove();

[58] Fix | Delete

}

[59] Fix | Delete

[60] Fix | Delete

window.SUI.openModal(

[61] Fix | Delete

'wp-smush-list-dialog',

[62] Fix | Delete

e.currentTarget,

[63] Fix | Delete

[64] Fix | Delete

'#wp-smush-list-dialog .sui-box-header [data-modal-close]'

[65] Fix | Delete

)[0],

[66] Fix | Delete

true

[67] Fix | Delete

);

[68] Fix | Delete

//Display File tree for Directory Smush

[69] Fix | Delete

self.initFileTree();

[70] Fix | Delete

}

[71] Fix | Delete

);

[72] Fix | Delete

[73] Fix | Delete

/**

[74] Fix | Delete

* Smush images: Smush in Choose Directory modal clicked

[75] Fix | Delete

[76] Fix | Delete

$( '#wp-smush-select-dir' ).on( 'click', function( e ) {

[77] Fix | Delete

e.preventDefault();

[78] Fix | Delete

[79] Fix | Delete

$( 'div.wp-smush-list-dialog div.sui-box-body' ).css( {

[80] Fix | Delete

opacity: '0.8',

[81] Fix | Delete

} );

[82] Fix | Delete

$( 'div.wp-smush-list-dialog div.sui-box-body a' ).off(

[83] Fix | Delete

'click'

[84] Fix | Delete

);

[85] Fix | Delete

[86] Fix | Delete

const button = $( this );

[87] Fix | Delete

[88] Fix | Delete

// Display the spinner.

[89] Fix | Delete

button.addClass('sui-button-onload');

[90] Fix | Delete

[91] Fix | Delete

const selectedFolders = self.tree.getSelectedNodes();

[92] Fix | Delete

[93] Fix | Delete

const paths = [];

[94] Fix | Delete

selectedFolders.forEach( function( folder ) {

[95] Fix | Delete

paths.push( folder.key );

[96] Fix | Delete

} );

[97] Fix | Delete

[98] Fix | Delete

// Send a ajax request to get a list of all the image files

[99] Fix | Delete

const param = {

[100] Fix | Delete

action: 'image_list',

[101] Fix | Delete

smush_path: paths,

[102] Fix | Delete

image_list_nonce: $(

[103] Fix | Delete

'input[name="image_list_nonce"]'

[104] Fix | Delete

).val(),

[105] Fix | Delete

};

[106] Fix | Delete

[107] Fix | Delete

$.post( ajaxurl, param, function( response ) {

[108] Fix | Delete

if ( response.success ) {

[109] Fix | Delete

// Close the modal.

[110] Fix | Delete

window.SUI.closeModal();

[111] Fix | Delete

[112] Fix | Delete

self.scanner = new Scanner( response.data, 0 );

[113] Fix | Delete

self.showProgressDialog( response.data );

[114] Fix | Delete

self.scanner.scan();

[115] Fix | Delete

} else {

[116] Fix | Delete

// Remove the spinner.

[117] Fix | Delete

button.removeClass('sui-button-onload');

[118] Fix | Delete

[119] Fix | Delete

window.SUI.openNotice(

[120] Fix | Delete

'wp-smush-ajax-notice',

[121] Fix | Delete

response.data.message,

[122] Fix | Delete

{ type: 'warning' }

[123] Fix | Delete

);

[124] Fix | Delete

}

[125] Fix | Delete

} );

[126] Fix | Delete

} );

[127] Fix | Delete

[128] Fix | Delete

/**

[129] Fix | Delete

* Cancel scan.

[130] Fix | Delete

[131] Fix | Delete

progressDialog.on(

[132] Fix | Delete

'click',

[133] Fix | Delete

'#cancel-directory-smush, #dialog-close-div, .wp-smush-cancel-dir',

[134] Fix | Delete

function( e ) {

[135] Fix | Delete

e.preventDefault();

[136] Fix | Delete

// Display the spinner

[137] Fix | Delete

$( '.wp-smush-cancel-dir' ).addClass( 'sui-button-onload' );

[138] Fix | Delete

self.scanner

[139] Fix | Delete

.cancel()

[140] Fix | Delete

.done(

[141] Fix | Delete

() =>

[142] Fix | Delete

( window.location.href =

[143] Fix | Delete

self.wp_smush_msgs.directory_url )

[144] Fix | Delete

);

[145] Fix | Delete

}

[146] Fix | Delete

);

[147] Fix | Delete

[148] Fix | Delete

/**

[149] Fix | Delete

* Continue scan.

[150] Fix | Delete

[151] Fix | Delete

progressDialog.on(

[152] Fix | Delete

'click',

[153] Fix | Delete

'.sui-icon-play, .wp-smush-resume-scan',

[154] Fix | Delete

function( e ) {

[155] Fix | Delete

e.preventDefault();

[156] Fix | Delete

self.scanner.resume();

[157] Fix | Delete

}

[158] Fix | Delete

);

[159] Fix | Delete

[160] Fix | Delete

/**

[161] Fix | Delete

* Check to see if we should open the directory module.

[162] Fix | Delete

* Used to redirect from dashboard page.

[163] Fix | Delete

[164] Fix | Delete

* @since 3.8.6

[165] Fix | Delete

[166] Fix | Delete

const queryString = window.location.search;

[167] Fix | Delete

const urlParams = new URLSearchParams( queryString );

[168] Fix | Delete

if ( urlParams.has( 'start' ) && ! this.triggered ) {

[169] Fix | Delete

this.triggered = true;

[170] Fix | Delete

$( 'button.wp-smush-browse' ).trigger( 'click' );

[171] Fix | Delete

}

[172] Fix | Delete

[173] Fix | Delete

[174] Fix | Delete

/**

[175] Fix | Delete

* Init fileTree.

[176] Fix | Delete

[177] Fix | Delete

initFileTree() {

[178] Fix | Delete

const self = this,

[179] Fix | Delete

smushButton = $( 'button#wp-smush-select-dir' ),

[180] Fix | Delete

ajaxSettings = {

[181] Fix | Delete

type: 'GET',

[182] Fix | Delete

url: ajaxurl,

[183] Fix | Delete

data: {

[184] Fix | Delete

action: 'smush_get_directory_list',

[185] Fix | Delete

list_nonce: $( 'input[name="list_nonce"]' ).val(),

[186] Fix | Delete

[187] Fix | Delete

cache: false,

[188] Fix | Delete

};

[189] Fix | Delete

[190] Fix | Delete

// Object already defined.

[191] Fix | Delete

if ( Object.entries( self.tree ).length > 0 ) {

[192] Fix | Delete

return;

[193] Fix | Delete

}

[194] Fix | Delete

[195] Fix | Delete

self.tree = createTree( '.wp-smush-list-dialog .content', {

[196] Fix | Delete

autoCollapse: true, // Automatically collapse all siblings, when a node is expanded

[197] Fix | Delete

clickFolderMode: 3, // 1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)

[198] Fix | Delete

checkbox: true, // Show checkboxes

[199] Fix | Delete

debugLevel: 0, // 0:quiet, 1:errors, 2:warnings, 3:infos, 4:debug

[200] Fix | Delete

selectMode: 3, // 1:single, 2:multi, 3:multi-hier

[201] Fix | Delete

tabindex: '0', // Whole tree behaves as one single control

[202] Fix | Delete

keyboard: true, // Support keyboard navigation

[203] Fix | Delete

quicksearch: true, // Navigate to next node by typing the first letters

[204] Fix | Delete

source: ajaxSettings,

[205] Fix | Delete

lazyLoad: ( event, data ) => {

[206] Fix | Delete

data.result = new Promise( function( resolve, reject ) {

[207] Fix | Delete

ajaxSettings.data.dir = data.node.key;

[208] Fix | Delete

$.ajax( ajaxSettings )

[209] Fix | Delete

.done( ( response ) => resolve( response ) )

[210] Fix | Delete

.fail( reject );

[211] Fix | Delete

} );

[212] Fix | Delete

[213] Fix | Delete

loadChildren: ( event, data ) =>

[214] Fix | Delete

data.node.fixSelection3AfterClick(), // Apply parent's state to new child nodes:

[215] Fix | Delete

select: () =>

[216] Fix | Delete

smushButton.prop(

[217] Fix | Delete

'disabled',

[218] Fix | Delete

! +self.tree.getSelectedNodes().length

[219] Fix | Delete

[220] Fix | Delete

init: () => smushButton.prop( 'disabled', true ),

[221] Fix | Delete

} );

[222] Fix | Delete

[223] Fix | Delete

[224] Fix | Delete

/**

[225] Fix | Delete

* Show progress dialog.

[226] Fix | Delete

[227] Fix | Delete

* @param {number} items Number of items in the scan.

[228] Fix | Delete

[229] Fix | Delete

showProgressDialog( items ) {

[230] Fix | Delete

// Update items status and show the progress dialog..

[231] Fix | Delete

$( '.wp-smush-progress-dialog .sui-progress-state-text' ).html(

[232] Fix | Delete

'0/' + items + ' ' + self.wp_smush_msgs.progress_smushed

[233] Fix | Delete

);

[234] Fix | Delete

[235] Fix | Delete

window.SUI.openModal(

[236] Fix | Delete

'wp-smush-progress-dialog',

[237] Fix | Delete

'dialog-close-div',

[238] Fix | Delete

undefined,

[239] Fix | Delete

false

[240] Fix | Delete

);

[241] Fix | Delete

[242] Fix | Delete

[243] Fix | Delete

/**

[244] Fix | Delete

* Update progress bar during directory smush.

[245] Fix | Delete

[246] Fix | Delete

* @param {number} progress Current progress in percent.

[247] Fix | Delete

* @param {boolean} cancel Cancel status.

[248] Fix | Delete

[249] Fix | Delete

updateProgressBar( progress, cancel = false ) {

[250] Fix | Delete

if ( progress > 100 ) {

[251] Fix | Delete

progress = 100;

[252] Fix | Delete

}

[253] Fix | Delete

[254] Fix | Delete

// Update progress bar

[255] Fix | Delete

$( '.sui-progress-block .sui-progress-text span' ).text(

[256] Fix | Delete

progress + '%'

[257] Fix | Delete

);

[258] Fix | Delete

$( '.sui-progress-block .sui-progress-bar span' ).width(

[259] Fix | Delete

progress + '%'

[260] Fix | Delete

);

[261] Fix | Delete

[262] Fix | Delete

if ( progress >= 90 ) {

[263] Fix | Delete

$( '.sui-progress-state .sui-progress-state-text' ).text(

[264] Fix | Delete

'Finalizing...'

[265] Fix | Delete

);

[266] Fix | Delete

}

[267] Fix | Delete

[268] Fix | Delete

if ( cancel ) {

[269] Fix | Delete

$( '.sui-progress-state .sui-progress-state-text' ).text(

[270] Fix | Delete

'Cancelling...'

[271] Fix | Delete

);

[272] Fix | Delete

}

[273] Fix | Delete

[274] Fix | Delete

};

[275] Fix | Delete

[276] Fix | Delete

WP_Smush.directory.init();

[277] Fix | Delete

}( jQuery ) );

[278] Fix | Delete

[279] Fix | Delete