299 lines
8.0 KiB
JavaScript
299 lines
8.0 KiB
JavaScript
|
/* global WP_Smush */
|
||
|
|
/* global ajaxurl */
|
||
|
|
/* global wp_smush_msgs */
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Helpers functions.
|
||
|
|
*
|
||
|
|
* @since 2.9.0 Moved from admin.js
|
||
|
|
*/
|
||
|
|
( function() {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
WP_Smush.helpers = {
|
||
|
|
init: () => {},
|
||
|
|
cacheUpsellErrorCodes: [],
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Convert bytes to human-readable form.
|
||
|
|
*
|
||
|
|
* @param {number} a Bytes
|
||
|
|
* @param {number} b Number of digits
|
||
|
|
* @return {*} Formatted Bytes
|
||
|
|
*/
|
||
|
|
formatBytes: ( a, b ) => {
|
||
|
|
const thresh = 1024,
|
||
|
|
units = [ 'KB', 'MB', 'GB', 'TB', 'PB' ];
|
||
|
|
|
||
|
|
if ( Math.abs( a ) < thresh ) {
|
||
|
|
return a + ' B';
|
||
|
|
}
|
||
|
|
|
||
|
|
let u = -1;
|
||
|
|
|
||
|
|
do {
|
||
|
|
a /= thresh;
|
||
|
|
++u;
|
||
|
|
} while ( Math.abs( a ) >= thresh && u < units.length - 1 );
|
||
|
|
|
||
|
|
return a.toFixed( b ) + ' ' + units[ u ];
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get size from a string.
|
||
|
|
*
|
||
|
|
* @param {string} formattedSize Formatter string
|
||
|
|
* @return {*} Formatted Bytes
|
||
|
|
*/
|
||
|
|
getSizeFromString: ( formattedSize ) => {
|
||
|
|
return formattedSize.replace( /[a-zA-Z]/g, '' ).trim();
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get type from formatted string.
|
||
|
|
*
|
||
|
|
* @param {string} formattedSize Formatted string
|
||
|
|
* @return {*} Formatted Bytes
|
||
|
|
*/
|
||
|
|
getFormatFromString: ( formattedSize ) => {
|
||
|
|
return formattedSize.replace( /[0-9.]/g, '' ).trim();
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Stackoverflow: http://stackoverflow.com/questions/1726630/formatting-a-number-with-exactly-two-decimals-in-javascript
|
||
|
|
*
|
||
|
|
* @param {number} num
|
||
|
|
* @param {number} decimals
|
||
|
|
* @return {number} Number
|
||
|
|
*/
|
||
|
|
precise_round: ( num, decimals ) => {
|
||
|
|
const sign = num >= 0 ? 1 : -1;
|
||
|
|
// Keep the percentage below 100.
|
||
|
|
num = num > 100 ? 100 : num;
|
||
|
|
return (
|
||
|
|
Math.round( num * Math.pow( 10, decimals ) + sign * 0.001 ) /
|
||
|
|
Math.pow( 10, decimals )
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Displays a floating error message using the #wp-smush-ajax-notice container.
|
||
|
|
*
|
||
|
|
* @since 3.8.0
|
||
|
|
*
|
||
|
|
* @param {string} message
|
||
|
|
*/
|
||
|
|
showErrorNotice: ( message ) => {
|
||
|
|
if ( 'undefined' === typeof message ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const noticeMessage = `<p>${ message }</p>`,
|
||
|
|
noticeOptions = {
|
||
|
|
type: 'error',
|
||
|
|
icon: 'info',
|
||
|
|
};
|
||
|
|
|
||
|
|
SUI.openNotice( 'wp-smush-ajax-notice', noticeMessage, noticeOptions );
|
||
|
|
|
||
|
|
const loadingButton = document.querySelector( '.sui-button-onload' );
|
||
|
|
if ( loadingButton ) {
|
||
|
|
loadingButton.classList.remove( 'sui-button-onload' );
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Reset settings.
|
||
|
|
*
|
||
|
|
* @since 3.2.0
|
||
|
|
*/
|
||
|
|
resetSettings: () => {
|
||
|
|
const _nonce = document.getElementById( 'wp_smush_reset' );
|
||
|
|
const xhr = new XMLHttpRequest();
|
||
|
|
xhr.open( 'POST', ajaxurl + '?action=reset_settings', true );
|
||
|
|
xhr.setRequestHeader(
|
||
|
|
'Content-type',
|
||
|
|
'application/x-www-form-urlencoded'
|
||
|
|
);
|
||
|
|
xhr.onload = () => {
|
||
|
|
if ( 200 === xhr.status ) {
|
||
|
|
const res = JSON.parse( xhr.response );
|
||
|
|
if ( 'undefined' !== typeof res.success && res.success ) {
|
||
|
|
window.location.href = wp_smush_msgs.smush_url;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
window.console.log(
|
||
|
|
'Request failed. Returned status of ' + xhr.status
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
xhr.send( '_ajax_nonce=' + _nonce.value );
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Prepare error row. Will only allow to hide errors for WP media attachments (not nextgen).
|
||
|
|
*
|
||
|
|
* @since 1.9.0
|
||
|
|
* @since 3.12.0 Moved from Smush.
|
||
|
|
*
|
||
|
|
* @param {string} errorMsg Error message.
|
||
|
|
* @param {string} fileName File name.
|
||
|
|
* @param {string} thumbnail Thumbnail for image (if available).
|
||
|
|
* @param {number} id Image ID.
|
||
|
|
* @param {string} type Smush type: media or netxgen.
|
||
|
|
* @param {string} errorCode Error code.
|
||
|
|
*
|
||
|
|
* @return {string} Row with error.
|
||
|
|
*/
|
||
|
|
prepareBulkSmushErrorRow: (errorMsg, fileName, thumbnail, id, type, errorCode) => {
|
||
|
|
const thumbDiv =
|
||
|
|
thumbnail && 'undefined' !== typeof thumbnail ?
|
||
|
|
`<img class="attachment-thumbnail" src="${thumbnail}" />` :
|
||
|
|
'<i class="sui-icon-photo-picture" aria-hidden="true"></i>';
|
||
|
|
const editLink = window.wp_smush_msgs.edit_link.replace('{{id}}', id);
|
||
|
|
fileName =
|
||
|
|
'undefined' === fileName || 'undefined' === typeof fileName ?
|
||
|
|
'undefined' :
|
||
|
|
fileName;
|
||
|
|
|
||
|
|
let tableDiv =
|
||
|
|
`<div class="smush-bulk-error-row" data-error-code="${errorCode}">
|
||
|
|
<div class="smush-bulk-image-data">
|
||
|
|
<div class="smush-bulk-image-title">
|
||
|
|
${ thumbDiv }
|
||
|
|
<span class="smush-image-name">
|
||
|
|
<a href="${editLink}">${fileName}</a>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="smush-image-error">
|
||
|
|
${errorMsg}
|
||
|
|
</div>
|
||
|
|
</div>`;
|
||
|
|
|
||
|
|
if ('media' === type) {
|
||
|
|
tableDiv +=
|
||
|
|
`<div class="smush-bulk-image-actions">
|
||
|
|
<a href="javascript:void(0)" class="sui-tooltip sui-tooltip-constrained sui-tooltip-left smush-ignore-image" data-tooltip="${window.wp_smush_msgs.error_ignore}" data-id="${id}">
|
||
|
|
${window.wp_smush_msgs.btn_ignore}
|
||
|
|
</a>
|
||
|
|
<a class="smush-link-detail" href="${editLink}">
|
||
|
|
${window.wp_smush_msgs.view_detail}
|
||
|
|
</a>
|
||
|
|
</div>`;
|
||
|
|
}
|
||
|
|
|
||
|
|
tableDiv += '</div>';
|
||
|
|
|
||
|
|
tableDiv += WP_Smush.helpers.upsellWithError( errorCode );
|
||
|
|
|
||
|
|
return tableDiv;
|
||
|
|
},
|
||
|
|
cacheUpsellErrorCode( errorCode ) {
|
||
|
|
this.cacheUpsellErrorCodes.push( errorCode );
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* Get upsell base on error code.
|
||
|
|
* @param {string} errorCode Error code.
|
||
|
|
* @returns {string}
|
||
|
|
*/
|
||
|
|
upsellWithError(errorCode) {
|
||
|
|
if (
|
||
|
|
!errorCode
|
||
|
|
|| !window.wp_smush_msgs['error_' + errorCode]
|
||
|
|
|| this.isUpsellRendered( errorCode )
|
||
|
|
) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
this.cacheRenderedUpsell( errorCode );
|
||
|
|
|
||
|
|
return '<div class="smush-bulk-error-row smush-error-upsell">' +
|
||
|
|
'<div class="smush-bulk-image-title">' +
|
||
|
|
'<span class="smush-image-error">' +
|
||
|
|
window.wp_smush_msgs['error_' + errorCode] +
|
||
|
|
'</span>' +
|
||
|
|
'</div></div>';
|
||
|
|
},
|
||
|
|
// Do not use arrow function to use `this`.
|
||
|
|
isUpsellRendered( errorCode ) {
|
||
|
|
return this.cacheUpsellErrorCodes.includes( errorCode );
|
||
|
|
},
|
||
|
|
// Do not use arrow function to use `this`.
|
||
|
|
cacheRenderedUpsell( errorCode ) {
|
||
|
|
this.cacheUpsellErrorCodes.push( errorCode );
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* Get error message from Ajax response or Error.
|
||
|
|
* @param {Object} resp
|
||
|
|
*/
|
||
|
|
getErrorMessage: ( resp ) => {
|
||
|
|
return resp.message || resp.data && resp.data.message ||
|
||
|
|
resp.responseJSON && resp.responseJSON.data && resp.responseJSON.data.message ||
|
||
|
|
window.wp_smush_msgs.generic_ajax_error ||
|
||
|
|
resp.status && 'Request failed. Returned status of ' + resp.status
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Displays a floating message from response,
|
||
|
|
* using the #wp-smush-ajax-notice container.
|
||
|
|
*
|
||
|
|
* @param {Object|string} notice
|
||
|
|
* @param {Object} noticeOptions
|
||
|
|
*/
|
||
|
|
showNotice: function( notice, noticeOptions ) {
|
||
|
|
let message;
|
||
|
|
if ( 'object' === typeof notice ) {
|
||
|
|
message = this.getErrorMessage( notice );
|
||
|
|
} else {
|
||
|
|
message = notice;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( ! message ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
noticeOptions = noticeOptions || {};
|
||
|
|
noticeOptions = Object.assign({
|
||
|
|
showdismiss: false,
|
||
|
|
autoclose: true,
|
||
|
|
},noticeOptions);
|
||
|
|
noticeOptions = {
|
||
|
|
type: noticeOptions.type || 'error',
|
||
|
|
icon: noticeOptions.icon || ( 'success' === noticeOptions.type ? 'check-tick' : 'info' ),
|
||
|
|
dismiss: {
|
||
|
|
show: noticeOptions.showdismiss,
|
||
|
|
label: window.wp_smush_msgs.noticeDismiss,
|
||
|
|
tooltip: window.wp_smush_msgs.noticeDismissTooltip,
|
||
|
|
},
|
||
|
|
autoclose: {
|
||
|
|
show: noticeOptions.autoclose
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const noticeMessage = `<p>${ message }</p>`;
|
||
|
|
|
||
|
|
SUI.openNotice( 'wp-smush-ajax-notice', noticeMessage, noticeOptions );
|
||
|
|
return Promise.resolve( '#wp-smush-ajax-notice' );
|
||
|
|
},
|
||
|
|
closeNotice() {
|
||
|
|
window.SUI.closeNotice( 'wp-smush-ajax-notice' );
|
||
|
|
},
|
||
|
|
renderActivationCDNNotice: function( noticeMessage ) {
|
||
|
|
const animatedNotice = document.getElementById('wp-smush-animated-upsell-notice');
|
||
|
|
if ( animatedNotice ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const upsellHtml = `<div class="sui-notice sui-notice-info sui-margin-top" id="wp-smush-animated-upsell-notice">
|
||
|
|
<div class="sui-notice-content">
|
||
|
|
<div class="sui-notice-message">
|
||
|
|
<i class="sui-notice-icon sui-icon-info" aria-hidden="true"></i>
|
||
|
|
<p>${noticeMessage}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`;
|
||
|
|
document.querySelector( '#smush-box-bulk .wp-smush-bulk-wrapper' ).outerHTML += upsellHtml;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
WP_Smush.helpers.init();
|
||
|
|
}() );
|