Skip to content
This repository was archived by the owner on Dec 27, 2022. It is now read-only.

Commit 5a74134

Browse files
westonruterwestonruter
committed
Add frontend preview link when snapshot is saved
1 parent cb45595 commit 5a74134

3 files changed

+70
-18
lines changed

‎css/customize-snapshots.css

+12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
#snapshot-preview-link {
2+
float: right;
3+
margin-top: 13px;
4+
margin-right: 4px;
5+
color: #656a6f;
6+
}
7+
8+
#snapshot-preview-link:hover,
9+
#snapshot-preview-link:focus,
10+
#snapshot-preview-link:active {
11+
color: #191e23;
12+
}
113
#snapshot-save {
214
float: right;
315
margin-top: 9px;

‎js/customize-snapshots.js

+52-18
Original file line numberDiff line numberDiff line change
@@ -32,25 +32,28 @@
3232
return;
3333
}
3434
api.state.create( 'snapshot-saved', true );
35+
api.state.create( 'snapshot-previewed', Boolean( component.data.isPreview ) );
3536
api.state.create( 'snapshot-submitted', true );
3637
api.bind( 'change', function() {
3738
api.state( 'snapshot-saved' ).set( false );
3839
api.state( 'snapshot-submitted' ).set( false );
3940
} );
41+
component.frontendPreviewUrl = new api.Value( api.previewer.previewUrl.get() );
42+
component.frontendPreviewUrl.link( api.previewer.previewUrl );
4043

4144
component.previewerQuery();
4245
component.addButtons();
4346

4447
$( '#snapshot-save' ).on( 'click', function( event ) {
4548
event.preventDefault();
46-
component.sendUpdateSnapshotRequest( { status: 'draft', openNewWindow: event.shiftKey } );
49+
component.sendUpdateSnapshotRequest( { status: 'draft' } );
4750
} );
4851
$( '#snapshot-submit' ).on( 'click', function( event ) {
4952
event.preventDefault();
50-
component.sendUpdateSnapshotRequest( { status: 'pending', openNewWindow: event.shiftKey } );
53+
component.sendUpdateSnapshotRequest( { status: 'pending' } );
5154
} );
5255

53-
if ( component.data.isPreview ) {
56+
if ( api.state( 'snapshot-previewed' ).get() ) {
5457
api.state( 'saved' ).set( false );
5558
component.resetSavedStateQuietly();
5659
}
@@ -71,7 +74,7 @@
7174
if ( 0 === $( '#' + id ).length ) {
7275
$( 'body' ).append( snapshotDialogPublishError( {
7376
title: component.data.i18n.publish,
74-
message: component.data.isPreview ? component.data.i18n.permsMsg.update : component.data.i18n.permsMsg.save
77+
message: api.state( 'snapshot-previewed' ).get() ? component.data.i18n.permsMsg.update : component.data.i18n.permsMsg.save
7578
} ) );
7679
}
7780

@@ -95,6 +98,7 @@
9598

9699
// Set the button text back to "Save".
97100
component.changeButton( component.data.i18n.saveButton, component.data.i18n.permsMsg.save );
101+
api.state( 'snapshot-previewed' ).set( false );
98102

99103
request = wp.ajax.post( 'customize_get_snapshot_uuid', {
100104
nonce: component.data.nonce,
@@ -104,6 +108,7 @@
104108
// Update the UUID.
105109
request.done( function( response ) {
106110
component.data.uuid = response.uuid;
111+
component.previewLink.attr( 'target', component.data.uuid );
107112
} );
108113

109114
// Replace the history state with an updated Customizer URL that does not include the Snapshot UUID.
@@ -134,7 +139,7 @@
134139

135140
retval = originalQuery.apply( this, arguments );
136141

137-
if ( component.data.isPreview ) {
142+
if ( api.state( 'snapshot-previewed' ).get() ) {
138143
api.each( function( value, key ) {
139144
if ( value._dirty ) {
140145
allCustomized[ key ] = {
@@ -150,6 +155,21 @@
150155
};
151156
};
152157

158+
/**
159+
* Get the preview URL with the snapshot UUID attached.
160+
*
161+
* @returns {string} URL.
162+
*/
163+
component.getSnapshotFrontendPreviewUrl = function getSnapshotFrontendPreviewUrl() {
164+
var a = document.createElement( 'a' );
165+
a.href = component.frontendPreviewUrl.get();
166+
if ( a.search ) {
167+
a.search += '&';
168+
}
169+
a.search += 'customize_snapshot_uuid=' + component.data.uuid;
170+
return a.href;
171+
};
172+
153173
/**
154174
* Create the snapshot buttons.
155175
*
@@ -158,22 +178,42 @@
158178
component.addButtons = function() {
159179
var header = $( '#customize-header-actions' ),
160180
publishButton = header.find( '#save' ),
161-
snapshotButton, submitButton, data;
181+
snapshotButton, submitButton, data, setPreviewLinkHref;
162182

183+
// Save/update button.
163184
snapshotButton = wp.template( 'snapshot-save' );
164185
data = {
165-
buttonText: component.data.isPreview ? component.data.i18n.updateButton : component.data.i18n.saveButton
186+
buttonText: api.state( 'snapshot-previewed' ).get() ? component.data.i18n.updateButton : component.data.i18n.saveButton
166187
};
167188
snapshotButton = $( $.trim( snapshotButton( data ) ) );
168189
if ( ! component.data.currentUserCanPublish ) {
169-
snapshotButton.attr( 'title', component.data.isPreview ? component.data.i18n.permsMsg.update : component.data.i18n.permsMsg.save );
190+
snapshotButton.attr( 'title', api.state( 'snapshot-previewed' ).get() ? component.data.i18n.permsMsg.update : component.data.i18n.permsMsg.save );
170191
}
171192
snapshotButton.prop( 'disabled', true );
172193
snapshotButton.insertAfter( publishButton );
194+
195+
// Preview link.
196+
component.previewLink = $( $.trim( wp.template( 'snapshot-preview-link' )() ) );
197+
component.previewLink.toggle( api.state( 'snapshot-saved' ).get() );
198+
component.previewLink.attr( 'target', component.data.uuid );
199+
setPreviewLinkHref = _.debounce( function() {
200+
if ( api.state( 'snapshot-previewed' ).get() ) {
201+
component.previewLink.attr( 'href', component.getSnapshotFrontendPreviewUrl() );
202+
} else {
203+
component.previewLink.attr( 'href', component.frontendPreviewUrl.get() );
204+
}
205+
} );
206+
component.frontendPreviewUrl.bind( setPreviewLinkHref );
207+
setPreviewLinkHref();
208+
api.state.bind( 'change', setPreviewLinkHref );
209+
api.bind( 'saved', setPreviewLinkHref );
210+
snapshotButton.after( component.previewLink );
173211
api.state( 'snapshot-saved' ).bind( function( saved ) {
174212
snapshotButton.prop( 'disabled', saved );
213+
component.previewLink.toggle( saved );
175214
} );
176215

216+
// Submit for review button.
177217
if ( ! component.data.currentUserCanPublish ) {
178218
publishButton.hide();
179219
submitButton = wp.template( 'snapshot-submit' );
@@ -230,7 +270,6 @@
230270
*
231271
* @param {object} options Options.
232272
* @param {string} options.status The post status for the snapshot.
233-
* @param {boolean} options.openNewWindow Whether to open the frontend in a new window.
234273
* @return {void}
235274
*/
236275
component.sendUpdateSnapshotRequest = function( options ) {
@@ -239,8 +278,7 @@
239278

240279
args = _.extend(
241280
{
242-
status: 'draft',
243-
openNewWindow: false
281+
status: 'draft'
244282
},
245283
options
246284
);
@@ -262,7 +300,7 @@
262300
snapshot_customized: JSON.stringify( customized ),
263301
customize_snapshot_uuid: component.data.uuid,
264302
status: args.status,
265-
preview: ( component.data.isPreview ? 'on' : 'off' )
303+
preview: ( api.state( 'snapshot-previewed' ).get() ? 'on' : 'off' )
266304
} );
267305

268306
request.done( function( response ) {
@@ -275,6 +313,7 @@
275313
// Set the UUID.
276314
if ( ! component.data.uuid ) {
277315
component.data.uuid = response.customize_snapshot_uuid;
316+
component.previewLink.attr( 'target', component.data.uuid );
278317
}
279318

280319
if ( url.match( regex ) ) {
@@ -285,7 +324,7 @@
285324

286325
// Change the save button text to update.
287326
component.changeButton( component.data.i18n.updateButton, component.data.i18n.permsMsg.update );
288-
component.data.isPreview = true;
327+
api.state( 'snapshot-previewed' ).set( true );
289328

290329
spinner.removeClass( 'is-active' );
291330

@@ -301,11 +340,6 @@
301340
}
302341
component.resetSavedStateQuietly();
303342

304-
// Open the preview in a new window on shift+click.
305-
if ( args.openNewWindow ) {
306-
window.open( url, '_blank' );
307-
}
308-
309343
// Trigger an event for plugins to use.
310344
api.trigger( 'customize-snapshots-update', {
311345
previewUrl: url,

‎php/class-customize-snapshot-manager.php

+6
Original file line numberDiff line numberDiff line change
@@ -835,6 +835,12 @@ public function replace_customize_link( $wp_admin_bar ) {
835835
*/
836836
public function render_templates() {
837837
?>
838+
<script type="text/html" id="tmpl-snapshot-preview-link">
839+
<a href="#" target="frontend-preview" id="snapshot-preview-link" class="dashicons dashicons-welcome-view-site" title="<?php esc_attr_e( 'View on frontend', 'customize-snapshots' ) ?>">
840+
<span class="screen-reader-text"><?php esc_html_e( 'View on frontend', 'customize-snapshots' ) ?></span>
841+
</a>
842+
</script>
843+
838844
<script type="text/html" id="tmpl-snapshot-save">
839845
<button id="snapshot-save" class="button button-secondary">
840846
{{ data.buttonText }}

0 commit comments

Comments
 (0)