Merge pull request #35 from xwp/release/0.4.0

Release 0.4.0

.dev-lib

@@ -1 +1,3 @@
-PATH_INCLUDES='*.* php js css tests'
+PATH_INCLUDES='*.* php js css tests'
+WPCS_GIT_TREE=develop
+ASSETS_DIR=wp-assets

.gitignore

@@ -8,4 +8,8 @@ npm-debug.log
 
 # Composer
 composer.lock
-/vendor/
+/vendor/
+
+# Compiled files
+*.min.js
+*.min.css

Gruntfile.js

@@ -1,5 +1,6 @@
 /* eslint-env node */
 /* jshint node:true */
+
 module.exports = function( grunt ) {
 	'use strict';
 
@@ -90,24 +91,11 @@ module.exports = function( grunt ) {
 		copy: {
 			build: {
 				src: [
-					'**',
-					'!.*',
-					'!.*/**',
-					'!.DS_Store',
-					'!build/**',
-					'!composer.json',
-					'!composer.lock',
-					'!contributing.md',
-					'!dev-lib/**',
-					'!Gruntfile.js',
-					'!node_modules/**',
-					'!npm-debug.log',
-					'!package.json',
-					'!phpcs.ruleset.xml',
-					'!phpunit.xml.dist',
-					'!readme.md',
-					'!tests/**',
-					'!vendor/**'
+					'*.php',
+					'css/*',
+					'js/*',
+					'php/*',
+					'readme.txt'
 				],
 				dest: 'build',
 				expand: true,
@@ -150,7 +138,8 @@ module.exports = function( grunt ) {
 			deploy: {
 				options: {
 					plugin_slug: '<%= pkg.name %>',
-					build_dir: 'build'
+					build_dir: 'build',
+					assets_dir: 'wp-assets'
 				}
 			}
 		}

composer.json

@@ -1,7 +1,7 @@
 {
 	"name": "xwp/wp-customize-snapshots",
 	"description": "Allow Customizer states to be drafted, and previewed with a private URL.",
-	"version": "0.3.1",
+	"version": "0.4.0",
 	"type": "wordpress-plugin",
 	"homepage": "https://github.com/xwp/wp-customize-snapshots",
 	"license": "GPL-2.0+",

customize-snapshots.php

@@ -3,7 +3,7 @@
  * Plugin Name: Customize Snapshots
  * Plugin URI: https://github.com/xwp/wp-customize-snapshots
  * Description: Allow Customizer states to be drafted, and previewed with a private URL.
- * Version: 0.3.1
+ * Version: 0.4.0
  * Author:  XWP
  * Author URI: https://xwp.co/
  * License: GPLv2+

js/customize-snapshots.js

@@ -20,6 +20,8 @@
 
 	/**
 	 * Inject the functionality.
+	 *
+	 * @return {void}
 	 */
 	component.init = function() {
 		window._wpCustomizeControlsL10n.save = component.data.i18n.publish;
@@ -29,12 +31,23 @@
 			if ( ! api.settings.theme.active || ( component.data.theme && component.data.theme !== api.settings.theme.stylesheet ) ) {
 				return;
 			}
+			api.state.create( 'snapshot-saved', true );
+			api.state.create( 'snapshot-submitted', true );
+			api.bind( 'change', function() {
+				api.state( 'snapshot-saved' ).set( false );
+				api.state( 'snapshot-submitted' ).set( false );
+			} );
+
 			component.previewerQuery();
-			component.addButton();
+			component.addButtons();
 
 			$( '#snapshot-save' ).on( 'click', function( event ) {
 				event.preventDefault();
-				component.sendUpdateSnapshotRequest( event );
+				component.sendUpdateSnapshotRequest( { status: 'draft', openNewWindow: event.shiftKey } );
+			} );
+			$( '#snapshot-submit' ).on( 'click', function( event ) {
+				event.preventDefault();
+				component.sendUpdateSnapshotRequest( { status: 'pending', openNewWindow: event.shiftKey } );
 			} );
 
 			if ( component.data.isPreview ) {
@@ -44,6 +57,10 @@
 		} );
 
 		api.bind( 'save', function( request ) {
+
+			// Make sure that saved state is false so that Published button behaves as expected.
+			api.state( 'saved' ).set( false );
+
 			request.fail( function( response ) {
 				var id = 'snapshot-dialog-error',
 					snapshotDialogPublishError = wp.template( id );
@@ -54,7 +71,7 @@
 					if ( 0 === $( '#' + id ).length ) {
 						$( 'body' ).append( snapshotDialogPublishError( {
 							title: component.data.i18n.publish,
-							message: component.data.i18n.permsMsg
+							message: component.data.isPreview ? component.data.i18n.permsMsg.update : component.data.i18n.permsMsg.save
 						} ) );
 					}
 
@@ -69,10 +86,44 @@
 			} );
 			return request;
 		} );
+
+		api.bind( 'saved', function() {
+			var url = window.location.href,
+				request,
+				updatedUrl,
+				urlParts;
+
+			// Set the button text back to "Save".
+			component.changeButton( component.data.i18n.saveButton, component.data.i18n.permsMsg.save );
+
+			request = wp.ajax.post( 'customize_get_snapshot_uuid', {
+				nonce: component.data.nonce,
+				wp_customize: 'on'
+			} );
+
+			// Update the UUID.
+			request.done( function( response ) {
+				component.data.uuid = response.uuid;
+			} );
+
+			// Replace the history state with an updated Customizer URL that does not include the Snapshot UUID.
+			urlParts = url.split( '?' );
+			if ( history.replaceState && urlParts[1] ) {
+				updatedUrl = urlParts[0] + '?' + _.filter( urlParts[1].split( '&' ), function( queryPair ) {
+					return ! /^(customize_snapshot_uuid)=/.test( queryPair );
+				} ).join( '&' );
+				updatedUrl = updatedUrl.replace( /\?$/, '' );
+				if ( updatedUrl !== url ) {
+					history.replaceState( {}, document.title, updatedUrl );
+				}
+			}
+		} );
 	};
 
 	/**
 	 * Amend the preview query so we can update the snapshot during `customize_save`.
+	 *
+	 * @return {void}
 	 */
 	component.previewerQuery = function() {
 		var originalQuery = api.previewer.query;
@@ -85,10 +136,11 @@
 
 			if ( component.data.isPreview ) {
 				api.each( function( value, key ) {
-					allCustomized[ key ] = {
-						'value': value(),
-						'dirty': false
-					};
+					if ( value._dirty ) {
+						allCustomized[ key ] = {
+							'value': value()
+						};
+					}
 				} );
 				retval.snapshot_customized = JSON.stringify( allCustomized );
 				retval.snapshot_uuid = component.data.uuid;
@@ -99,33 +151,63 @@
 	};
 
 	/**
-	 * Create the snapshot share button.
+	 * Create the snapshot buttons.
+	 *
+	 * @return {void}
 	 */
-	component.addButton = function() {
+	component.addButtons = function() {
 		var header = $( '#customize-header-actions' ),
 			publishButton = header.find( '#save' ),
-			snapshotButton, data;
-
-		if ( header.length && 0 === header.find( '#snapshot-save' ).length ) {
-			snapshotButton = wp.template( 'snapshot-save' );
-			data = {
-				buttonText: component.data.isPreview ? component.data.i18n.updateButton : component.data.i18n.saveButton
-			};
-			snapshotButton = $( $.trim( snapshotButton( data ) ) );
-			if ( ! component.data.currentUserCanPublish ) {
-				snapshotButton.attr( 'title', component.data.i18n.permsMsg );
-				snapshotButton.addClass( 'button-primary' ).removeClass( 'button-secondary' );
-			}
-			snapshotButton.insertAfter( publishButton );
+			snapshotButton, submitButton, data;
+
+		snapshotButton = wp.template( 'snapshot-save' );
+		data = {
+			buttonText: component.data.isPreview ? component.data.i18n.updateButton : component.data.i18n.saveButton
+		};
+		snapshotButton = $( $.trim( snapshotButton( data ) ) );
+		if ( ! component.data.currentUserCanPublish ) {
+			snapshotButton.attr( 'title', component.data.isPreview ? component.data.i18n.permsMsg.update : component.data.i18n.permsMsg.save );
 		}
+		snapshotButton.prop( 'disabled', true );
+		snapshotButton.insertAfter( publishButton );
+		api.state( 'snapshot-saved' ).bind( function( saved ) {
+			snapshotButton.prop( 'disabled', saved );
+		} );
 
 		if ( ! component.data.currentUserCanPublish ) {
 			publishButton.hide();
+			submitButton = wp.template( 'snapshot-submit' );
+			submitButton = $( $.trim( submitButton( {
+				buttonText: component.data.i18n.submit
+			} ) ) );
+			submitButton.prop( 'disabled', true );
+			submitButton.insertBefore( snapshotButton );
+			api.state( 'snapshot-submitted' ).bind( function( submitted ) {
+				submitButton.prop( 'disabled', submitted );
+			} );
 		}
 
 		header.addClass( 'button-added' );
 	};
 
+	/**
+	 * Change the snapshot button.
+	 *
+	 * @param {string} buttonText The button text.
+	 * @param {string} permsMsg The permissions message.
+	 * @return {void}
+	 */
+	component.changeButton = function( buttonText, permsMsg ) {
+		var snapshotButton = $( '#customize-header-actions' ).find( '#snapshot-save' );
+
+		if ( snapshotButton.length ) {
+			snapshotButton.text( buttonText );
+			if ( ! component.data.currentUserCanPublish ) {
+				snapshotButton.attr( 'title', permsMsg );
+			}
+		}
+	};
+
 	/**
 	 * Silently update the saved state to be true without triggering the
 	 * changed event so that the AYS beforeunload dialog won't appear
@@ -136,6 +218,8 @@
 	 *   wp.customize.state( 'saved' ).set( true );
 	 *   wp.customize.state.topics.change.enable();
 	 * But unfortunately there is no such enable method.
+	 *
+	 * @return {void}
 	 */
 	component.resetSavedStateQuietly = function() {
 		api.state( 'saved' )._value = true;
@@ -144,38 +228,48 @@
 	/**
 	 * Make the AJAX request to update/save a snapshot.
 	 *
-	 * @param {object} event jQuery Event object
+	 * @param {object} options Options.
+	 * @param {string} options.status The post status for the snapshot.
+	 * @param {boolean} options.openNewWindow Whether to open the frontend in a new window.
+	 * @return {void}
 	 */
-	component.sendUpdateSnapshotRequest = function( event ) {
+	component.sendUpdateSnapshotRequest = function( options ) {
 		var spinner = $( '#customize-header-actions .spinner' ),
-			scope = component.data.scope,
-			request, customized;
+			request, customized, args;
+
+		args = _.extend(
+			{
+				status: 'draft',
+				openNewWindow: false
+			},
+			options
+		);
 
 		spinner.addClass( 'is-active' );
 
 		customized = {};
 		api.each( function( value, key ) {
-			customized[ key ] = {
-				'value': value(),
-				'dirty': value._dirty
-			};
+			if ( value._dirty ) {
+				customized[ key ] = {
+					'value': value()
+				};
+			}
 		} );
 
 		request = wp.ajax.post( 'customize_update_snapshot', {
 			nonce: component.data.nonce,
 			wp_customize: 'on',
 			snapshot_customized: JSON.stringify( customized ),
 			customize_snapshot_uuid: component.data.uuid,
-			scope: scope,
+			status: args.status,
 			preview: ( component.data.isPreview ? 'on' : 'off' )
 		} );
 
 		request.done( function( response ) {
 			var url = api.previewer.previewUrl(),
 				regex = new RegExp( '([?&])customize_snapshot_uuid=.*?(&|$)', 'i' ),
 				separator = url.indexOf( '?' ) !== -1 ? '&' : '?',
-				header = $( '#customize-header-actions' ),
-				customizeUrl = api.previewer.targetWindow.get().location.toString(),
+				customizeUrl = window.location.href,
 				customizeSeparator = customizeUrl.indexOf( '?' ) !== -1 ? '&' : '?';
 
 			// Set the UUID.
@@ -189,29 +283,26 @@
 				url = url + separator + 'customize_snapshot_uuid=' + encodeURIComponent( component.data.uuid );
 			}
 
-			if ( 'full' === scope ) {
-				url += '&scope=' + encodeURIComponent( scope );
-			}
-
 			// Change the save button text to update.
-			if ( header.length && 0 !== header.find( '#snapshot-save' ).length ) {
-				header.find( '#snapshot-save' ).text( component.data.i18n.updateButton );
-			}
+			component.changeButton( component.data.i18n.updateButton, component.data.i18n.permsMsg.update );
+			component.data.isPreview = true;
 
 			spinner.removeClass( 'is-active' );
-			component.resetSavedStateQuietly();
 
 			// Replace the history state with an updated Customizer URL that includes the Snapshot UUID.
 			if ( history.replaceState && ! customizeUrl.match( regex ) ) {
 				customizeUrl += customizeSeparator + 'customize_snapshot_uuid=' + encodeURIComponent( component.data.uuid );
-				if ( 'full' === scope ) {
-					customizeUrl += '&scope=' + encodeURIComponent( scope );
-				}
 				history.replaceState( {}, document.title, customizeUrl );
 			}
 
+			api.state( 'snapshot-saved' ).set( true );
+			if ( 'pending' === args.status ) {
+				api.state( 'snapshot-submitted' ).set( true );
+			}
+			component.resetSavedStateQuietly();
+
 			// Open the preview in a new window on shift+click.
-			if ( event.shiftKey ) {
+			if ( args.openNewWindow ) {
 				window.open( url, '_blank' );
 			}