This commit is contained in:
2024-05-20 15:37:46 +03:00
commit 00b7dbd0b7
10404 changed files with 3285853 additions and 0 deletions

View File

@@ -0,0 +1,147 @@
/**
* BLOCK: extend image block
*/
const { createHigherOrderComponent } = wp.compose,
{ Fragment } = wp.element,
{ InspectorControls } = wp.blockEditor,
{ PanelBody } = wp.components;
/**
* Transform bytes to human readable format.
*
* @param {number} bytes
* @return {string} Readable size string.
*/
function humanFileSize( bytes ) {
const thresh = 1024,
units = [ 'kB', 'MB', 'GB', 'TB' ];
if ( Math.abs( bytes ) < thresh ) {
return bytes + ' B';
}
let u = -1;
do {
bytes /= thresh;
++u;
} while ( Math.abs( bytes ) >= thresh && u < units.length - 1 );
return bytes.toFixed( 1 ) + ' ' + units[ u ];
}
/**
* Generate Smush stats table.
*
* @param {number} id
* @param {Object} stats
* @return {*} Smush stats.
*/
export function smushStats( id, stats ) {
if ( 'undefined' === typeof stats ) {
return window.smush_vars.strings.gb.select_image;
} else if ( 'string' === typeof stats ) {
return stats;
}
return (
<div
id="smush-stats"
className="sui-smush-media smush-stats-wrapper hidden"
style={ { display: 'block' } }
>
<table className="wp-smush-stats-holder">
<thead>
<tr>
<th className="smush-stats-header">
{ window.smush_vars.strings.gb.size }
</th>
<th className="smush-stats-header">
{ window.smush_vars.strings.gb.savings }
</th>
</tr>
</thead>
<tbody>
{ Object.keys( stats.sizes )
.filter( ( item ) => 0 < stats.sizes[ item ].percent )
.map( ( item, i ) => (
<tr key={ i }>
<td>{ item.toUpperCase() }</td>
<td>
{ humanFileSize(
stats.sizes[ item ].bytes
) }{ ' ' }
( { stats.sizes[ item ].percent }% )
</td>
</tr>
) ) }
</tbody>
</table>
</div>
);
}
/**
* Fetch image data. If image is Smushing, update in 3 seconds.
*
* TODO: this could be optimized not to query so much.
*
* @param {Object} props
*/
export function fetchProps( props ) {
const image = new wp.api.models.Media( { id: props.attributes.id } ),
smushData = props.attributes.smush;
image.fetch( { attribute: 'smush' } ).done( function( img ) {
if ( 'string' === typeof img.smush ) {
props.setAttributes( { smush: img.smush } );
//setTimeout( () => fetch( props ), 3000 );
} else if (
'undefined' !== typeof img.smush &&
( 'undefined' === typeof smushData ||
JSON.stringify( smushData ) !== JSON.stringify( img.smush ) )
) {
props.setAttributes( { smush: img.smush } );
}
} );
}
/**
* Modify the blocks edit component.
* Receives the original block BlockEdit component and returns a new wrapped component.
*/
const smushStatsControl = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
// If not image block or not selected, return unmodified block.
if (
'core/image' !== props.name ||
! props.isSelected ||
'undefined' === typeof props.attributes.id
) {
return (
<Fragment>
<BlockEdit { ...props } />
</Fragment>
);
}
const smushData = props.attributes.smush;
fetchProps( props );
return (
<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody title={ window.smush_vars.strings.gb.stats }>
{ smushStats( props.attributes.id, smushData ) }
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, 'withInspectorControl' );
wp.hooks.addFilter(
'editor.BlockEdit',
'wp-smush/smush-data-control',
smushStatsControl
);

View File

@@ -0,0 +1,138 @@
/* global WP_Smush */
/* global ajaxurl */
/**
* CDN functionality.
*
* @since 3.0
*/
( function() {
'use strict';
WP_Smush.CDN = {
cdnEnableButton: document.getElementById( 'smush-enable-cdn' ),
cdnDisableButton: document.getElementById( 'smush-cancel-cdn' ),
cdnStatsBox: document.querySelector( '.smush-cdn-stats' ),
init() {
/**
* Handle "Get Started" button click on disabled CDN page.
*/
if ( this.cdnEnableButton ) {
this.cdnEnableButton.addEventListener( 'click', ( e ) => {
e.preventDefault();
e.currentTarget.classList.add( 'sui-button-onload' );
this.toggle_cdn( true );
} );
}
/**
* Handle "Deactivate' button click on CDN page.
*/
if ( this.cdnDisableButton ) {
this.cdnDisableButton.addEventListener( 'click', ( e ) => {
e.preventDefault();
e.currentTarget.classList.add( 'sui-button-onload' );
this.toggle_cdn( false );
} );
}
this.updateStatsBox();
},
/**
* Toggle CDN.
*
* @since 3.0
*
* @param {boolean} enable
*/
toggle_cdn( enable ) {
const nonceField = document.getElementsByName(
'wp_smush_options_nonce'
);
const xhr = new XMLHttpRequest();
xhr.open( 'POST', ajaxurl + '?action=smush_toggle_cdn', 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.search = 'page=smush-cdn';
} else if ( 'undefined' !== typeof res.data.message ) {
WP_Smush.helpers.showErrorNotice( res.data.message );
}
} else {
WP_Smush.helpers.showErrorNotice( 'Request failed. Returned status of ' + xhr.status );
}
};
xhr.send(
'param=' + enable + '&_ajax_nonce=' + nonceField[ 0 ].value
);
},
/**
* Update the CDN stats box in summary meta box. Only fetch new data when on CDN page.
*
* @since 3.0
*/
updateStatsBox() {
if (
'undefined' === typeof this.cdnStatsBox ||
! this.cdnStatsBox
) {
return;
}
// Only fetch the new stats, when user is on CDN page.
if ( ! window.location.search.includes( 'page=smush-cdn' ) ) {
return;
}
this.toggleElements();
const xhr = new XMLHttpRequest();
xhr.open( 'POST', ajaxurl + '?action=get_cdn_stats', true );
xhr.onload = () => {
if ( 200 === xhr.status ) {
const res = JSON.parse( xhr.response );
if ( 'undefined' !== typeof res.success && res.success ) {
this.toggleElements();
} else if ( 'undefined' !== typeof res.data.message ) {
WP_Smush.helpers.showErrorNotice( res.data.message );
}
} else {
WP_Smush.helpers.showErrorNotice( 'Request failed. Returned status of ' + xhr.status );
}
};
xhr.send();
},
/**
* Show/hide elements during status update in the updateStatsBox()
*
* @since 3.1 Moved out from updateStatsBox()
*/
toggleElements() {
const spinner = this.cdnStatsBox.querySelector(
'.sui-icon-loader'
);
const elements = this.cdnStatsBox.querySelectorAll(
'.wp-smush-stats > :not(.sui-icon-loader)'
);
for ( let i = 0; i < elements.length; i++ ) {
elements[ i ].classList.toggle( 'sui-hidden' );
}
spinner.classList.toggle( 'sui-hidden' );
},
};
WP_Smush.CDN.init();
} )();

View File

@@ -0,0 +1,208 @@
/* global WP_Smush */
/* global ajaxurl */
/**
* Directory scanner module that will Smush images in the Directory Smush modal.
*
* @since 2.8.1
*
* @param {string|number} totalSteps
* @param {string|number} currentStep
* @return {Object} Scan object.
* @class
*/
const DirectoryScanner = ( totalSteps, currentStep ) => {
totalSteps = parseInt( totalSteps );
currentStep = parseInt( currentStep );
let cancelling = false,
failedItems = 0,
skippedItems = 0;
const obj = {
scan() {
const remainingSteps = totalSteps - currentStep;
if ( currentStep !== 0 ) {
// Scan started on a previous page load.
step( remainingSteps ).fail( this.showScanError );
} else {
jQuery
.post( ajaxurl, {
action: 'directory_smush_start',
_ajax_nonce: window.wp_smush_msgs.nonce
}, () =>
step( remainingSteps ).fail( this.showScanError )
)
.fail( this.showScanError );
}
},
cancel() {
cancelling = true;
return jQuery.post( ajaxurl, {
action: 'directory_smush_cancel',
_ajax_nonce: window.wp_smush_msgs.nonce
} );
},
getProgress() {
if ( cancelling ) {
return 0;
}
// O M G ... Logic at it's finest!
const remainingSteps = totalSteps - currentStep;
return Math.min(
Math.round(
( parseInt( totalSteps - remainingSteps ) * 100 ) /
totalSteps
),
99
);
},
onFinishStep( progress ) {
jQuery( '.wp-smush-progress-dialog .sui-progress-state-text' ).html(
currentStep -
failedItems +
'/' +
totalSteps +
' ' +
window.wp_smush_msgs.progress_smushed
);
WP_Smush.directory.updateProgressBar( progress );
},
onFinish() {
WP_Smush.directory.updateProgressBar( 100 );
window.location.href =
window.wp_smush_msgs.directory_url + '&scan=done';
},
/**
* Displays an error when the scan request fails.
*
* @param {Object} res XHR object.
*/
showScanError( res ) {
const dialog = jQuery( '#wp-smush-progress-dialog' );
// Add the error class to show/hide elements in the dialog.
dialog
.removeClass( 'wp-smush-exceed-limit' )
.addClass( 'wp-smush-scan-error' );
// Add the error status and description to the error message.
dialog
.find( '#smush-scan-error' )
.text( `${ res.status } ${ res.statusText }` );
// Show/hide the 403 error specific instructions.
const forbiddenMessage = dialog.find( '.smush-403-error-message' );
if ( 403 !== res.status ) {
forbiddenMessage.addClass( 'sui-hidden' );
} else {
forbiddenMessage.removeClass( 'sui-hidden' );
}
},
limitReached() {
const dialog = jQuery( '#wp-smush-progress-dialog' );
dialog.addClass( 'wp-smush-exceed-limit' );
dialog
.find( '#cancel-directory-smush' )
.attr( 'data-tooltip', window.wp_smush_msgs.bulk_resume );
dialog
.find( '.sui-box-body .sui-icon-close' )
.removeClass( 'sui-icon-close' )
.addClass( 'sui-icon-play' );
dialog
.find( '#cancel-directory-smush' )
.attr( 'id', 'cancel-directory-smush-disabled' );
},
resume() {
const dialog = jQuery( '#wp-smush-progress-dialog' );
const resume = dialog.find( '#cancel-directory-smush-disabled' );
dialog.removeClass( 'wp-smush-exceed-limit' );
dialog
.find( '.sui-box-body .sui-icon-play' )
.removeClass( 'sui-icon-play' )
.addClass( 'sui-icon-close' );
resume.attr( 'data-tooltip', 'Cancel' );
resume.attr( 'id', 'cancel-directory-smush' );
obj.scan();
},
};
/**
* Execute a scan step recursively
*
* Private to avoid overriding
*
* @param {number} remainingSteps
*/
const step = function( remainingSteps ) {
if ( remainingSteps >= 0 ) {
currentStep = totalSteps - remainingSteps;
return jQuery.post(
ajaxurl,
{
action: 'directory_smush_check_step',
_ajax_nonce: window.wp_smush_msgs.nonce,
step: currentStep,
},
( response ) => {
// We're good - continue on.
if (
'undefined' !== typeof response.success &&
response.success
) {
if (
'undefined' !== typeof response.data &&
'undefined' !== typeof response.data.skipped &&
true === response.data.skipped
) {
skippedItems++;
}
currentStep++;
remainingSteps = remainingSteps - 1;
obj.onFinishStep( obj.getProgress() );
step( remainingSteps ).fail( obj.showScanError );
} else if (
'undefined' !== typeof response.data.error &&
'dir_smush_limit_exceeded' === response.data.error
) {
// Limit reached. Stop.
obj.limitReached();
} else {
// Error? never mind, continue, but count them.
failedItems++;
currentStep++;
remainingSteps = remainingSteps - 1;
obj.onFinishStep( obj.getProgress() );
step( remainingSteps ).fail( obj.showScanError );
}
}
);
}
return jQuery.post(
ajaxurl,
{
action: 'directory_smush_finish',
_ajax_nonce: window.wp_smush_msgs.nonce,
items: totalSteps - ( failedItems + skippedItems ),
failed: failedItems,
skipped: skippedItems,
},
( response ) => obj.onFinish( response )
);
};
return obj;
};
export default DirectoryScanner;

View File

@@ -0,0 +1,287 @@
/* global WP_Smush */
/* global ajaxurl */
/**
* Lazy loading functionality.
*
* @since 3.0
*/
( function() {
'use strict';
WP_Smush.Lazyload = {
lazyloadEnableButton: document.getElementById(
'smush-enable-lazyload'
),
lazyloadDisableButton: document.getElementById(
'smush-cancel-lazyload'
),
init() {
const self = this;
/**
* Handle "Activate" button click on disabled Lazy load page.
*/
if ( this.lazyloadEnableButton ) {
this.lazyloadEnableButton.addEventListener( 'click', ( e ) => {
e.preventDefault();
e.currentTarget.classList.add( 'sui-button-onload' );
this.toggle_lazy_load( true );
} );
}
/**
* Handle "Deactivate' button click on Lazy load page.
*/
if ( this.lazyloadDisableButton ) {
this.lazyloadDisableButton.addEventListener( 'click', ( e ) => {
e.preventDefault();
e.currentTarget.classList.add( 'sui-button-onload' );
this.toggle_lazy_load( false );
} );
}
/**
* Handle "Remove icon" button click on Lazy load page.
*
* This removes the image from the upload placeholder.
*
* @since 3.2.2
*/
const removeSpinner = document.getElementById(
'smush-remove-spinner'
);
if ( removeSpinner ) {
removeSpinner.addEventListener( 'click', ( e ) => {
e.preventDefault();
this.removeLoaderIcon();
} );
}
const removePlaceholder = document.getElementById(
'smush-remove-placeholder'
);
if ( removePlaceholder ) {
removePlaceholder.addEventListener( 'click', ( e ) => {
e.preventDefault();
this.removeLoaderIcon( 'placeholder' );
} );
}
/**
* Handle "Remove" icon click.
*
* This removes the select icon from the list (not same as above functions).
*
* @since 3.2.2
*/
const items = document.querySelectorAll( '.smush-ll-remove' );
if ( items && 0 < items.length ) {
items.forEach( function( el ) {
el.addEventListener( 'click', ( e ) => {
e.preventDefault();
e.target.closest( 'li' ).style.display = 'none';
self.remove(
e.target.dataset.id,
e.target.dataset.type
);
} );
} );
}
this.handlePredefinedPlaceholders();
},
/**
* Handle background color changes for the two predefined placeholders.
*
* @since 3.7.1
*/
handlePredefinedPlaceholders() {
const pl1 = document.getElementById( 'placeholder-icon-1' );
if ( pl1 ) {
pl1.addEventListener( 'click', () => this.changeColor( '#F3F3F3' ) );
}
const pl2 = document.getElementById( 'placeholder-icon-2' );
if ( pl2 ) {
pl2.addEventListener( 'click', () => this.changeColor( '#333333' ) );
}
},
/**
* Set color.
*
* @since 3.7.1
* @param {string} color
*/
changeColor( color ) {
document.getElementById( 'smush-color-picker' ).value = color;
document.querySelector( '.sui-colorpicker-hex .sui-colorpicker-value > span > span' ).style.backgroundColor = color;
document.querySelector( '.sui-colorpicker-hex .sui-colorpicker-value > input' ).value = color;
},
/**
* Toggle lazy loading.
*
* @since 3.2.0
*
* @param {string} enable
*/
toggle_lazy_load( enable ) {
const nonceField = document.getElementsByName(
'wp_smush_options_nonce'
);
const xhr = new XMLHttpRequest();
xhr.open(
'POST',
ajaxurl + '?action=smush_toggle_lazy_load',
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.search = 'page=smush-lazy-load';
} else if ( 'undefined' !== typeof res.data.message ) {
WP_Smush.helpers.showErrorNotice( res.data.message );
document.querySelector( '.sui-button-onload' ).classList.remove( 'sui-button-onload' );
}
} else {
WP_Smush.helpers.showErrorNotice( 'Request failed. Returned status of ' + xhr.status );
document.querySelector( '.sui-button-onload' ).classList.remove( 'sui-button-onload' );
}
};
xhr.send(
'param=' + enable + '&_ajax_nonce=' + nonceField[ 0 ].value
);
},
/**
* Add lazy load spinner icon.
*
* @since 3.2.2
* @param {string} type Accepts: spinner, placeholder.
*/
addLoaderIcon( type = 'spinner' ) {
let frame;
// If the media frame already exists, reopen it.
if ( frame ) {
frame.open();
return;
}
// Create a new media frame
frame = wp.media( {
title: 'Select or upload an icon',
button: {
text: 'Select icon',
},
multiple: false, // Set to true to allow multiple files to be selected
} );
// When an image is selected in the media frame...
frame.on( 'select', function() {
// Get media attachment details from the frame state
const attachment = frame
.state()
.get( 'selection' )
.first()
.toJSON();
// Send the attachment URL to our custom image input field.
const imageIcon = document.getElementById(
'smush-' + type + '-icon-preview'
);
imageIcon.style.backgroundImage =
'url("' + attachment.url + '")';
imageIcon.style.display = 'block';
// Send the attachment id to our hidden input
document
.getElementById( 'smush-' + type + '-icon-file' )
.setAttribute( 'value', attachment.id );
// Hide the add image link
document.getElementById(
'smush-upload-' + type
).style.display = 'none';
// Unhide the remove image link
const removeDiv = document.getElementById(
'smush-remove-' + type
);
removeDiv.querySelector( 'span' ).innerHTML =
attachment.filename;
removeDiv.style.display = 'block';
} );
// Finally, open the modal on click
frame.open();
},
/**
* Remove lazy load spinner icon.
*
* @since 3.2.2
* @param {string} type Accepts: spinner, placeholder.
*/
removeLoaderIcon: ( type = 'spinner' ) => {
// Clear out the preview image
const imageIcon = document.getElementById(
'smush-' + type + '-icon-preview'
);
imageIcon.style.backgroundImage = '';
imageIcon.style.display = 'none';
// Un-hide the add image link
document.getElementById( 'smush-upload-' + type ).style.display =
'block';
// Hide the delete image link
document.getElementById( 'smush-remove-' + type ).style.display =
'none';
// Delete the image id from the hidden input
document
.getElementById( 'smush-' + type + '-icon-file' )
.setAttribute( 'value', '' );
},
/**
* Remove item.
*
* @param {number} id Image ID.
* @param {string} type Accepts: spinner, placeholder.
*/
remove: ( id, type = 'spinner' ) => {
const nonceField = document.getElementsByName(
'wp_smush_options_nonce'
);
const xhr = new XMLHttpRequest();
xhr.open( 'POST', ajaxurl + '?action=smush_remove_icon', true );
xhr.setRequestHeader(
'Content-type',
'application/x-www-form-urlencoded'
);
xhr.send(
'id=' +
id +
'&type=' +
type +
'&_ajax_nonce=' +
nonceField[ 0 ].value
);
},
};
WP_Smush.Lazyload.init();
} )();

View File

@@ -0,0 +1,180 @@
/* global smush_vars */
/* global _ */
/**
* Adds a Smush Now button and displays stats in Media Attachment Details Screen
*/
(function ($, _) {
'use strict';
// Local reference to the WordPress media namespace.
const smushMedia = wp.media,
sharedTemplate =
"<span class='setting smush-stats' data-setting='smush'>" +
"<span class='name'><%= label %></span>" +
"<span class='value'><%= value %></span>" +
'</span>',
template = _.template(sharedTemplate);
/**
* Create the template.
*
* @param {string} smushHTML
* @return {Object} Template object
*/
const prepareTemplate = function (smushHTML) {
/**
* @param {Array} smush_vars.strings Localization strings.
* @param {Object} smush_vars Object from wp_localize_script()
*/
return template({
label: smush_vars.strings.stats_label,
value: smushHTML,
});
};
if (
'undefined' !== typeof smushMedia.view &&
'undefined' !== typeof smushMedia.view.Attachment.Details.TwoColumn
) {
// Local instance of the Attachment Details TwoColumn used in the edit attachment modal view
const smushMediaTwoColumn =
smushMedia.view.Attachment.Details.TwoColumn;
/**
* Add Smush details to attachment.
*
* A similar view to media.view.Attachment.Details
* for use in the Edit Attachment modal.
*
* @see wp-includes/js/media-grid.js
*/
smushMedia.view.Attachment.Details.TwoColumn = smushMediaTwoColumn.extend(
{
initialize() {
smushMediaTwoColumn.prototype.initialize.apply(this, arguments);
this.listenTo(this.model, 'change:smush', this.render);
},
render() {
// Ensure that the main attachment fields are rendered.
smushMedia.view.Attachment.prototype.render.apply(
this,
arguments
);
const smushHTML = this.model.get('smush');
if (typeof smushHTML === 'undefined') {
return this;
}
this.model.fetch();
/**
* Detach the views, append our custom fields, make sure that our data is fully updated
* and re-render the updated view.
*/
this.views.detach();
this.$el
.find('.settings')
.append(prepareTemplate(smushHTML));
this.views.render();
return this;
},
}
);
}
// Local instance of the Attachment Details TwoColumn used in the edit attachment modal view
const smushAttachmentDetails = smushMedia.view.Attachment.Details;
/**
* Add Smush details to attachment.
*/
smushMedia.view.Attachment.Details = smushAttachmentDetails.extend({
initialize() {
smushAttachmentDetails.prototype.initialize.apply(this, arguments);
this.listenTo(this.model, 'change:smush', this.render);
},
render() {
// Ensure that the main attachment fields are rendered.
smushMedia.view.Attachment.prototype.render.apply(this, arguments);
const smushHTML = this.model.get('smush');
if (typeof smushHTML === 'undefined') {
return this;
}
this.model.fetch();
/**
* Detach the views, append our custom fields, make sure that our data is fully updated
* and re-render the updated view.
*/
this.views.detach();
this.$el.append(prepareTemplate(smushHTML));
return this;
},
});
/**
* Create a new MediaLibraryTaxonomyFilter we later will instantiate
*
* @since 3.0
*/
const MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
id: 'media-attachment-smush-filter',
createFilters() {
this.filters = {
all: {
text: smush_vars.strings.filter_all,
props: { stats: 'all' },
priority: 10,
},
unsmushed: {
text: smush_vars.strings.filter_not_processed,
props: { stats: 'unsmushed' },
priority: 20,
},
excluded: {
text: smush_vars.strings.filter_excl,
props: { stats: 'excluded' },
priority: 30,
},
failed: {
text: smush_vars.strings.filter_failed,
props: { stats: 'failed_processing' },
priority: 40,
},
};
},
});
/**
* Extend and override wp.media.view.AttachmentsBrowser to include our new filter.
*
* @since 3.0
*/
const AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
createToolbar() {
// Make sure to load the original toolbar
AttachmentsBrowser.prototype.createToolbar.call(this);
this.toolbar.set(
'MediaLibraryTaxonomyFilter',
new MediaLibraryTaxonomyFilter({
controller: this.controller,
model: this.collection.props,
priority: -75,
}).render()
);
},
});
})(jQuery, _);

View File

@@ -0,0 +1,45 @@
import MixPanel from "../mixpanel";
class ProductAnalytics {
init() {
this.trackUltraLinks();
}
trackUltraLinks() {
const ultraUpsellLinks = document.querySelectorAll( '.wp-smush-upsell-ultra-compression' );
if ( ! ultraUpsellLinks ) {
return;
}
const getLocation = ( ultraLink ) => {
const locations = {
'settings': 'bulksmush_settings',
'dashboard': 'dash_summary',
'bulk': 'bulksmush_summary',
'directory': 'directory_summary',
'lazy-load': 'lazy_summary',
'cdn': 'cdn_summary',
'webp': 'webp_summary',
};
const locationId = ultraLink.classList.contains( 'wp-smush-ultra-compression-link' ) ? 'settings' : this.getCurrentPageSlug();
return locations[locationId] || 'bulksmush_settings';
}
ultraUpsellLinks.forEach( ( ultraLink ) => {
const eventName = 'ultra_upsell_modal';
ultraLink.addEventListener( 'click', (e) => {
MixPanel.getInstance().track( eventName, {
'Location': getLocation( e.target ),
'Modal Action': 'direct_cta',
});
});
});
}
getCurrentPageSlug(){
const searchParams = new URLSearchParams(document.location.search);
const pageSlug = searchParams.get("page");
return 'smush' === pageSlug ? 'dashboard' : pageSlug.replace( 'smush-', '' );
}
}
( new ProductAnalytics() ).init();

View File

@@ -0,0 +1,173 @@
/* global ajaxurl */
/* global wp_smush_msgs */
/* global WP_Smush */
/* global SUI */
( function( $ ) {
'use strict';
/**
* Bulk compress page.
*/
$( 'form#smush-bulk-form' ).on( 'submit', function( e ) {
e.preventDefault();
$( '#save-settings-button' ).addClass( 'sui-button-onload' );
saveSettings( $( this ).serialize(), 'bulk' );
// runReCheck();
} );
/**
* Lazy load page.
*/
$( 'form#smush-lazy-load-form' ).on( 'submit', function( e ) {
e.preventDefault();
$( '#save-settings-button' ).addClass( 'sui-button-onload-text' );
saveSettings( $( this ).serialize(), 'lazy-load' );
} );
/**
* CDN page.
*/
$( 'form#smush-cdn-form' ).on( 'submit', function( e ) {
e.preventDefault();
$( '#save-settings-button' ).addClass( 'sui-button-onload-text' );
saveSettings( $( this ).serialize(), 'cdn' );
} );
/**
* Integrations page.
*/
$( 'form#smush-integrations-form' ).on( 'submit', function( e ) {
e.preventDefault();
$( '#save-settings-button' ).addClass( 'sui-button-onload-text' );
saveSettings( $( this ).serialize(), 'integrations' );
} );
/**
* Settings page.
*/
$( 'form#smush-settings-form' ).on( 'submit', function( e ) {
e.preventDefault();
$( '#save-settings-button' ).addClass( 'sui-button-onload-text' );
saveSettings( $( this ).serialize(), 'settings' );
} );
/**
* Save settings.
*
* @param {string} settings JSON string of settings.
* @param {string} page Settings page.
*/
function saveSettings( settings, page ) {
const xhr = new XMLHttpRequest();
xhr.open( 'POST', ajaxurl + '?action=smush_save_settings', true );
xhr.setRequestHeader(
'Content-type',
'application/x-www-form-urlencoded'
);
xhr.onload = () => {
$( '#save-settings-button' ).removeClass(
'sui-button-onload-text sui-button-onload'
);
if ( 200 === xhr.status ) {
const res = JSON.parse( xhr.response );
if ( 'undefined' !== typeof res.success && res.success ) {
showSuccessNotice( wp_smush_msgs.settingsUpdated );
triggerSavedSmushSettingsEvent( res.data );
} else if ( res.data && res.data.message ) {
WP_Smush.helpers.showErrorNotice( res.data.message );
} else {
WP_Smush.helpers.showErrorNotice( 'Request failed.' );
}
} else {
WP_Smush.helpers.showErrorNotice( 'Request failed. Returned status of ' + xhr.status );
}
};
xhr.send( 'page=' + page + '&' + settings + '&_ajax_nonce=' + wp_smush_msgs.nonce );
}
function triggerSavedSmushSettingsEvent( status ) {
document.dispatchEvent(
new CustomEvent( 'onSavedSmushSettings', {
detail: status
} )
);
}
/**
* Show successful update notice.
*
* @param {string} msg Notice message.
*/
function showSuccessNotice( msg ) {
const noticeMessage = `<p>${ msg }</p>`,
noticeOptions = {
type: 'success',
icon: 'check',
};
SUI.openNotice( 'wp-smush-ajax-notice', noticeMessage, noticeOptions );
const loadingButton = document.querySelector( '.sui-button-onload' );
if ( loadingButton ) {
loadingButton.classList.remove( 'sui-button-onload' );
}
}
/**
* Re-check images from bulk smush and integrations pages.
*/
function runReCheck() {
$( '#save-settings-button' ).addClass( 'sui-button-onload' );
const param = {
action: 'scan_for_resmush',
wp_smush_options_nonce: $( '#wp_smush_options_nonce' ).val(),
type: 'media',
};
// Send ajax, Update Settings, And Check For resmush.
$.post( ajaxurl, $.param( param ) ).done( function() {
$( '#save-settings-button' ).removeClass( 'sui-button-onload' );
} );
}
/**
* Parse remove data change.
*/
$( 'input[name=keep_data]' ).on( 'change', function( e ) {
const otherClass =
'keep_data-true' === e.target.id
? 'keep_data-false'
: 'keep_data-true';
e.target.parentNode.classList.add( 'active' );
document
.getElementById( otherClass )
.parentNode.classList.remove( 'active' );
} );
/**
* Handle auto-detect checkbox toggle, to show/hide highlighting notice.
*/
$( 'input#detection' ).on( 'click', function() {
const noticeDiv = $( '.smush-highlighting-notice' );
const warningDiv = $( '.smush-highlighting-warning' );
// Setting enabled.
if ( $( this ).is( ':checked' ) ) {
// Highlighting is already active and setting not saved.
if ( noticeDiv.length > 0 ) {
noticeDiv.show();
} else {
warningDiv.show();
}
} else {
noticeDiv.hide();
warningDiv.hide();
}
} );
}( jQuery ) );

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,311 @@
/* global WP_Smush */
/* global ajaxurl */
/**
* WebP functionality.
*
* @since 3.8.0
*/
(function () {
'use strict';
WP_Smush.WebP = {
nonceField: document.getElementsByName('wp_smush_options_nonce'),
toggleModuleButton: document.getElementById('smush-toggle-webp-button'),
recheckStatusButton: document.getElementById('smush-webp-recheck'),
recheckStatusLink: document.getElementById('smush-webp-recheck-link'),
showWizardButton: document.getElementById('smush-webp-toggle-wizard'),
init() {
this.maybeShowDeleteAllSuccessNotice();
/**
* Handles the "Deactivate" and "Get Started" buttons on the WebP page.
*/
if (this.toggleModuleButton) {
this.toggleModuleButton.addEventListener('click', (e) =>
this.toggleWebp(e)
);
}
/**
* Handle "RE-CHECK STATUS' button click on WebP page.
*/
if (this.recheckStatusButton) {
this.recheckStatusButton.addEventListener('click', (e) => {
e.preventDefault();
this.recheckStatus();
});
}
/**
* Handle "RE-CHECK STATUS' link click on WebP page.
*/
if (this.recheckStatusLink) {
this.recheckStatusLink.addEventListener('click', (e) => {
e.preventDefault();
this.recheckStatus();
});
}
/**
* Handles the "Delete WebP images" button.
*/
if (document.getElementById('wp-smush-webp-delete-all')) {
document
.getElementById('wp-smush-webp-delete-all')
.addEventListener('click', (e) => this.deleteAll(e));
}
if (this.showWizardButton) {
this.showWizardButton.addEventListener(
'click',
this.toggleWizard
);
}
},
/**
* Toggle WebP module.
*
* @param {Event} e
*/
toggleWebp(e) {
e.preventDefault();
const button = e.currentTarget,
doEnable = 'enable' === button.dataset.action;
button.classList.add('sui-button-onload');
const xhr = new XMLHttpRequest();
xhr.open('POST', ajaxurl + '?action=smush_webp_toggle', true);
xhr.setRequestHeader(
'Content-type',
'application/x-www-form-urlencoded'
);
xhr.onload = () => {
const res = JSON.parse(xhr.response);
if (200 === xhr.status) {
if ('undefined' !== typeof res.success && res.success) {
const scanPromise = this.runScan();
scanPromise.onload = () => {
window.location.href =
window.wp_smush_msgs.localWebpURL;
};
} else if ('undefined' !== typeof res.data.message) {
this.showNotice(res.data.message);
button.classList.remove('sui-button-onload');
}
} else {
let message = window.wp_smush_msgs.generic_ajax_error;
if (res && 'undefined' !== typeof res.data.message) {
message = res.data.message;
}
this.showNotice(message);
button.classList.remove('sui-button-onload');
}
};
xhr.send(
'param=' + doEnable + '&_ajax_nonce=' + this.nonceField[0].value
);
},
/**
* re-check server configuration for WebP.
*/
recheckStatus() {
this.recheckStatusButton.classList.add('sui-button-onload');
const xhr = new XMLHttpRequest();
xhr.open('POST', ajaxurl + '?action=smush_webp_get_status', true);
xhr.setRequestHeader(
'Content-type',
'application/x-www-form-urlencoded'
);
xhr.onload = () => {
this.recheckStatusButton.classList.remove('sui-button-onload');
let message = false;
const res = JSON.parse(xhr.response);
if (200 === xhr.status) {
const isConfigured = res.success ? '1' : '0';
if (
isConfigured !==
this.recheckStatusButton.dataset.isConfigured
) {
// Reload the page when the configuration status changed.
location.reload();
}
} else {
message = window.wp_smush_msgs.generic_ajax_error;
}
if (res && res.data) {
message = res.data;
}
if (message) {
this.showNotice(message);
}
};
xhr.send('_ajax_nonce=' + window.wp_smush_msgs.webp_nonce);
},
deleteAll(e) {
const button = e.currentTarget;
button.classList.add('sui-button-onload');
let message = false;
const xhr = new XMLHttpRequest();
xhr.open('POST', ajaxurl + '?action=smush_webp_delete_all', true);
xhr.setRequestHeader(
'Content-type',
'application/x-www-form-urlencoded'
);
xhr.onload = () => {
const res = JSON.parse(xhr.response);
if (200 === xhr.status) {
if ('undefined' !== typeof res.success && res.success) {
const scanPromise = this.runScan();
scanPromise.onload = () => {
location.search =
location.search + '&notice=webp-deleted';
};
} else {
message = window.wp_smush_msgs.generic_ajax_error;
}
} else {
message = window.wp_smush_msgs.generic_ajax_error;
}
if (res && res.data && res.data.message) {
message = res.data.message;
}
if (message) {
button.classList.remove('sui-button-onload');
const noticeMessage = `<p style="text-align: left;">${message}</p>`;
const noticeOptions = {
type: 'error',
icon: 'info',
autoclose: {
show: false,
},
};
window.SUI.openNotice(
'wp-smush-webp-delete-all-error-notice',
noticeMessage,
noticeOptions
);
}
};
xhr.send('_ajax_nonce=' + this.nonceField[0].value);
},
toggleWizard(e) {
e.currentTarget.classList.add('sui-button-onload');
const xhr = new XMLHttpRequest();
xhr.open(
'GET',
ajaxurl +
'?action=smush_toggle_webp_wizard&_ajax_nonce=' +
window.wp_smush_msgs.webp_nonce,
true
);
xhr.onload = () => location.reload();
xhr.send();
},
/**
* Triggers the scanning of images for updating the images to re-smush.
*
* @since 3.8.0
*/
runScan() {
const xhr = new XMLHttpRequest(),
nonceField = document.getElementsByName(
'wp_smush_options_nonce'
);
xhr.open('POST', ajaxurl + '?action=scan_for_resmush', true);
xhr.setRequestHeader(
'Content-type',
'application/x-www-form-urlencoded'
);
xhr.send('_ajax_nonce=' + nonceField[0].value);
return xhr;
},
/**
* Show message (notice).
*
* @param {string} message
* @param {string} type
*/
showNotice(message, type) {
if ('undefined' === typeof message) {
return;
}
const noticeMessage = `<p>${message}</p>`;
const noticeOptions = {
type: type || 'error',
icon: 'info',
dismiss: {
show: true,
label: window.wp_smush_msgs.noticeDismiss,
tooltip: window.wp_smush_msgs.noticeDismissTooltip,
},
autoclose: {
show: false,
},
};
window.SUI.openNotice(
'wp-smush-ajax-notice',
noticeMessage,
noticeOptions
);
},
/**
* Show delete all webp success notice.
*/
maybeShowDeleteAllSuccessNotice() {
if (!document.getElementById('wp-smush-webp-delete-all-notice')) {
return;
}
const noticeMessage = `<p>${
document.getElementById('wp-smush-webp-delete-all-notice')
.dataset.message
}</p>`;
const noticeOptions = {
type: 'success',
icon: 'check-tick',
dismiss: {
show: true,
},
};
window.SUI.openNotice(
'wp-smush-webp-delete-all-notice',
noticeMessage,
noticeOptions
);
},
};
WP_Smush.WebP.init();
})();