var api = wp.customize;
/**
+ * @constructor
+ * @augments wp.customize.Value
+ * @augments wp.customize.Class
+ *
* @param options
* - previewer - The Previewer instance to sync with.
* - transport - The transport to use for previewing. Supports 'refresh' and 'postMessage'.
}
});
+ /**
+ * @constructor
+ * @augments wp.customize.Class
+ */
api.Control = api.Class.extend({
initialize: function( id, options ) {
var control = this,
this.id = id;
this.selector = '#customize-control-' + id.replace( /\]/g, '' ).replace( /\[/g, '-' );
this.container = $( this.selector );
+ this.active = new api.Value( this.params.active );
settings = $.map( this.params.settings, function( value ) {
return value;
element.set( setting() );
});
});
+
+ control.active.bind( function ( active ) {
+ control.toggle( active );
+ } );
+ control.toggle( control.active() );
},
+ /**
+ * @abstract
+ */
ready: function() {},
+ /**
+ * Callback for change to the control's active state.
+ *
+ * Override function for custom behavior for the control being active/inactive.
+ *
+ * @param {Boolean} active
+ */
+ toggle: function ( active ) {
+ if ( active ) {
+ this.container.slideDown();
+ } else {
+ this.container.slideUp();
+ }
+ },
+
dropdownInit: function() {
var control = this,
statuses = this.container.find('.dropdown-status'),
}
});
+ /**
+ * @constructor
+ * @augments wp.customize.Control
+ * @augments wp.customize.Class
+ */
api.ColorControl = api.Control.extend({
ready: function() {
var control = this,
}
});
+ /**
+ * @constructor
+ * @augments wp.customize.Control
+ * @augments wp.customize.Class
+ */
api.UploadControl = api.Control.extend({
ready: function() {
var control = this;
}
});
+ /**
+ * @constructor
+ * @augments wp.customize.UploadControl
+ * @augments wp.customize.Control
+ * @augments wp.customize.Class
+ */
api.ImageControl = api.UploadControl.extend({
ready: function() {
var control = this,
}
});
+ /**
+ * @constructor
+ * @augments wp.customize.Control
+ * @augments wp.customize.Class
+ */
api.HeaderControl = api.Control.extend({
ready: function() {
this.btnRemove = $('#customize-control-header_image .actions .remove');
// Create the collection of Control objects.
api.control = new api.Values({ defaultConstructor: api.Control });
+ /**
+ * @constructor
+ * @augments wp.customize.Messenger
+ * @augments wp.customize.Class
+ * @mixes wp.customize.Events
+ */
api.PreviewFrame = api.Messenger.extend({
sensitivity: 2000,
this.bind( 'ready', this._ready );
+ this.bind( 'ready', function ( data ) {
+ if ( ! data || ! data.activeControls ) {
+ return;
+ }
+
+ $.each( data.activeControls, function ( id, active ) {
+ var control = api.control( id );
+ if ( control ) {
+ control.active( active );
+ }
+ } );
+ } );
+
this.request = $.ajax( this.previewUrl(), {
type: 'POST',
data: this.query,
(function(){
var uuid = 0;
+ /**
+ * Create a universally unique identifier.
+ *
+ * @return {int}
+ */
api.PreviewFrame.uuid = function() {
return 'preview-' + uuid++;
};
}());
+ /**
+ * @constructor
+ * @augments wp.customize.Messenger
+ * @augments wp.customize.Class
+ * @mixes wp.customize.Events
+ */
api.Previewer = api.Messenger.extend({
refreshBuffer: 250,
}
});
- /* =====================================================================
- * Ready.
- * ===================================================================== */
-
api.controlConstructor = {
color: api.ColorControl,
upload: api.UploadControl,
if ( ! $.support.postMessage || ( ! $.support.cors && api.settings.isCrossDomain ) )
return window.location = api.settings.url.fallback;
- var previewer, parent, topFocus,
+ var parent, topFocus,
body = $( document.body ),
- overlay = body.children('.wp-full-overlay');
+ overlay = body.children( '.wp-full-overlay' ),
+ title = $( '#customize-info .theme-name.site-title' ),
+ closeBtn = $( '.customize-controls-close' ),
+ saveBtn = $( '#save' );
// Prevent the form from saving when enter is pressed on an input or select element.
$('#customize-controls').on( 'keydown', function( e ) {
});
// Initialize Previewer
- previewer = new api.Previewer({
+ api.previewer = new api.Previewer({
container: '#customize-preview',
form: '#customize-controls',
previewUrl: api.settings.url.preview,
});
// Refresh the nonces if the preview sends updated nonces over.
- previewer.bind( 'nonce', function( nonce ) {
+ api.previewer.bind( 'nonce', function( nonce ) {
$.extend( this.nonce, nonce );
});
$.each( api.settings.settings, function( id, data ) {
api.create( id, id, data.value, {
transport: data.transport,
- previewer: previewer
+ previewer: api.previewer
} );
});
control = api.control.add( id, new constructor( id, {
params: data,
- previewer: previewer
+ previewer: api.previewer
} ) );
});
// Check if preview url is valid and load the preview frame.
- if ( previewer.previewUrl() )
- previewer.refresh();
- else
- previewer.previewUrl( api.settings.url.home );
+ if ( api.previewer.previewUrl() ) {
+ api.previewer.refresh();
+ } else {
+ api.previewer.previewUrl( api.settings.url.home );
+ }
// Save and activated states
(function() {
processing = state.create( 'processing' );
state.bind( 'change', function() {
- var save = $('#save'),
- back = $('.back');
-
if ( ! activated() ) {
- save.val( api.l10n.activate ).prop( 'disabled', false );
- back.text( api.l10n.cancel );
+ saveBtn.val( api.l10n.activate ).prop( 'disabled', false );
+ closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
} else if ( saved() ) {
- save.val( api.l10n.saved ).prop( 'disabled', true );
- back.text( api.l10n.close );
+ saveBtn.val( api.l10n.saved ).prop( 'disabled', true );
+ closeBtn.find( '.screen-reader-text' ).text( api.l10n.close );
} else {
- save.val( api.l10n.save ).prop( 'disabled', false );
- back.text( api.l10n.cancel );
+ saveBtn.val( api.l10n.save ).prop( 'disabled', false );
+ closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
}
});
}());
// Button bindings.
- $('#save').click( function( event ) {
- previewer.save();
+ saveBtn.click( function( event ) {
+ api.previewer.save();
event.preventDefault();
}).keydown( function( event ) {
if ( 9 === event.which ) // tab
return;
if ( 13 === event.which ) // enter
- previewer.save();
+ api.previewer.save();
event.preventDefault();
});
- $('.back').keydown( function( event ) {
+ closeBtn.keydown( function( event ) {
if ( 9 === event.which ) // tab
return;
if ( 13 === event.which ) // enter
event.preventDefault();
});
+ // Bind site title display to the corresponding field.
+ if ( title.length ) {
+ $( '#customize-control-blogname input' ).on( 'input', function() {
+ title.text( this.value );
+ } );
+ }
+
// Create a potential postMessage connection with the parent frame.
parent = new api.Messenger({
url: api.settings.url.parent,
// If we receive a 'back' event, we're inside an iframe.
// Send any clicks to the 'Return' link to the parent page.
parent.bind( 'back', function() {
- $('.back').on( 'click.back', function( event ) {
+ closeBtn.on( 'click.customize-controls-close', function( event ) {
event.preventDefault();
parent.send( 'close' );
});
});
+ // Prompt user with AYS dialog if leaving the Customizer with unsaved changes
+ $( window ).on( 'beforeunload', function () {
+ if ( ! api.state( 'saved' )() ) {
+ return api.l10n.saveAlert;
+ }
+ } );
+
// Pass events through to the parent.
- api.bind( 'saved', function() {
- parent.send( 'saved' );
- });
+ $.each( [ 'saved', 'change' ], function ( i, event ) {
+ api.bind( event, function() {
+ parent.send( event );
+ });
+ } );
// When activated, let the loader handle redirecting the page.
// If no loader exists, redirect the page ourselves (if a url exists).
api.trigger( 'ready' );
// Make sure left column gets focus
- topFocus = $('.back');
+ topFocus = closeBtn;
topFocus.focus();
setTimeout(function () {
topFocus.focus();