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

Commit 04c80c0

Browse files
valendesignsvalendesigns
authored
Merge pull request #57 from xwp/feature/frontend-preview-link
Add frontend preview link when snapshot is saved
2 parents 5dd4ed9 + 194c9de commit 04c80c0

3 files changed

+72
-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

+54-18
Original file line numberDiff line numberDiff line change
@@ -32,28 +32,33 @@
3232
return;
3333
}
3434
api.state.create( 'snapshot-saved', true );
35+
api.state.create( 'snapshot-exists', 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-exists' ).get() ) {
5457
api.state( 'saved' ).set( false );
5558
component.resetSavedStateQuietly();
5659
}
60+
61+
api.trigger( 'snapshots-ready', component );
5762
} );
5863

5964
api.bind( 'save', function( request ) {
@@ -71,7 +76,7 @@
7176
if ( 0 === $( '#' + id ).length ) {
7277
$( 'body' ).append( snapshotDialogPublishError( {
7378
title: component.data.i18n.publish,
74-
message: component.data.isPreview ? component.data.i18n.permsMsg.update : component.data.i18n.permsMsg.save
79+
message: api.state( 'snapshot-exists' ).get() ? component.data.i18n.permsMsg.update : component.data.i18n.permsMsg.save
7580
} ) );
7681
}
7782

@@ -95,6 +100,7 @@
95100

96101
// Set the button text back to "Save".
97102
component.changeButton( component.data.i18n.saveButton, component.data.i18n.permsMsg.save );
103+
api.state( 'snapshot-exists' ).set( false );
98104

99105
request = wp.ajax.post( 'customize_get_snapshot_uuid', {
100106
nonce: component.data.nonce,
@@ -104,6 +110,7 @@
104110
// Update the UUID.
105111
request.done( function( response ) {
106112
component.data.uuid = response.uuid;
113+
component.previewLink.attr( 'target', component.data.uuid );
107114
} );
108115

109116
// Replace the history state with an updated Customizer URL that does not include the Snapshot UUID.
@@ -134,7 +141,7 @@
134141

135142
retval = originalQuery.apply( this, arguments );
136143

137-
if ( component.data.isPreview ) {
144+
if ( api.state( 'snapshot-exists' ).get() ) {
138145
api.each( function( value, key ) {
139146
if ( value._dirty ) {
140147
allCustomized[ key ] = {
@@ -150,6 +157,21 @@
150157
};
151158
};
152159

160+
/**
161+
* Get the preview URL with the snapshot UUID attached.
162+
*
163+
* @returns {string} URL.
164+
*/
165+
component.getSnapshotFrontendPreviewUrl = function getSnapshotFrontendPreviewUrl() {
166+
var a = document.createElement( 'a' );
167+
a.href = component.frontendPreviewUrl.get();
168+
if ( a.search ) {
169+
a.search += '&';
170+
}
171+
a.search += 'customize_snapshot_uuid=' + component.data.uuid;
172+
return a.href;
173+
};
174+
153175
/**
154176
* Create the snapshot buttons.
155177
*
@@ -158,22 +180,42 @@
158180
component.addButtons = function() {
159181
var header = $( '#customize-header-actions' ),
160182
publishButton = header.find( '#save' ),
161-
snapshotButton, submitButton, data;
183+
snapshotButton, submitButton, data, setPreviewLinkHref;
162184

185+
// Save/update button.
163186
snapshotButton = wp.template( 'snapshot-save' );
164187
data = {
165-
buttonText: component.data.isPreview ? component.data.i18n.updateButton : component.data.i18n.saveButton
188+
buttonText: api.state( 'snapshot-exists' ).get() ? component.data.i18n.updateButton : component.data.i18n.saveButton
166189
};
167190
snapshotButton = $( $.trim( snapshotButton( data ) ) );
168191
if ( ! component.data.currentUserCanPublish ) {
169-
snapshotButton.attr( 'title', component.data.isPreview ? component.data.i18n.permsMsg.update : component.data.i18n.permsMsg.save );
192+
snapshotButton.attr( 'title', api.state( 'snapshot-exists' ).get() ? component.data.i18n.permsMsg.update : component.data.i18n.permsMsg.save );
170193
}
171194
snapshotButton.prop( 'disabled', true );
172195
snapshotButton.insertAfter( publishButton );
196+
197+
// Preview link.
198+
component.previewLink = $( $.trim( wp.template( 'snapshot-preview-link' )() ) );
199+
component.previewLink.toggle( api.state( 'snapshot-saved' ).get() );
200+
component.previewLink.attr( 'target', component.data.uuid );
201+
setPreviewLinkHref = _.debounce( function() {
202+
if ( api.state( 'snapshot-exists' ).get() ) {
203+
component.previewLink.attr( 'href', component.getSnapshotFrontendPreviewUrl() );
204+
} else {
205+
component.previewLink.attr( 'href', component.frontendPreviewUrl.get() );
206+
}
207+
} );
208+
component.frontendPreviewUrl.bind( setPreviewLinkHref );
209+
setPreviewLinkHref();
210+
api.state.bind( 'change', setPreviewLinkHref );
211+
api.bind( 'saved', setPreviewLinkHref );
212+
snapshotButton.after( component.previewLink );
173213
api.state( 'snapshot-saved' ).bind( function( saved ) {
174214
snapshotButton.prop( 'disabled', saved );
215+
component.previewLink.toggle( saved );
175216
} );
176217

218+
// Submit for review button.
177219
if ( ! component.data.currentUserCanPublish ) {
178220
publishButton.hide();
179221
submitButton = wp.template( 'snapshot-submit' );
@@ -230,7 +272,6 @@
230272
*
231273
* @param {object} options Options.
232274
* @param {string} options.status The post status for the snapshot.
233-
* @param {boolean} options.openNewWindow Whether to open the frontend in a new window.
234275
* @return {void}
235276
*/
236277
component.sendUpdateSnapshotRequest = function( options ) {
@@ -239,8 +280,7 @@
239280

240281
args = _.extend(
241282
{
242-
status: 'draft',
243-
openNewWindow: false
283+
status: 'draft'
244284
},
245285
options
246286
);
@@ -262,7 +302,7 @@
262302
snapshot_customized: JSON.stringify( customized ),
263303
customize_snapshot_uuid: component.data.uuid,
264304
status: args.status,
265-
preview: ( component.data.isPreview ? 'on' : 'off' )
305+
preview: ( api.state( 'snapshot-exists' ).get() ? 'on' : 'off' )
266306
} );
267307

268308
request.done( function( response ) {
@@ -275,6 +315,7 @@
275315
// Set the UUID.
276316
if ( ! component.data.uuid ) {
277317
component.data.uuid = response.customize_snapshot_uuid;
318+
component.previewLink.attr( 'target', component.data.uuid );
278319
}
279320

280321
if ( url.match( regex ) ) {
@@ -285,7 +326,7 @@
285326

286327
// Change the save button text to update.
287328
component.changeButton( component.data.i18n.updateButton, component.data.i18n.permsMsg.update );
288-
component.data.isPreview = true;
329+
api.state( 'snapshot-exists' ).set( true );
289330

290331
spinner.removeClass( 'is-active' );
291332

@@ -301,11 +342,6 @@
301342
}
302343
component.resetSavedStateQuietly();
303344

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

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

+6
Original file line numberDiff line numberDiff line change
@@ -890,6 +890,12 @@ public function replace_customize_link( $wp_admin_bar ) {
890890
*/
891891
public function render_templates() {
892892
?>
893+
<script type="text/html" id="tmpl-snapshot-preview-link">
894+
<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' ) ?>">
895+
<span class="screen-reader-text"><?php esc_html_e( 'View on frontend', 'customize-snapshots' ) ?></span>
896+
</a>
897+
</script>
898+
893899
<script type="text/html" id="tmpl-snapshot-save">
894900
<button id="snapshot-save" class="button button-secondary">
895901
{{ data.buttonText }}

0 commit comments

Comments
 (0)