first

wp-content/plugins/wp-smushit/_src/js/smush/media.js

@@ -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, _);