]> scripts.mit.edu Git - autoinstalls/wordpress.git/blobdiff - wp-admin/js/customize-controls.js
WordPress 4.0
[autoinstalls/wordpress.git] / wp-admin / js / customize-controls.js
index 4bfc252a445046660b474c5316f4abcb6eae553b..85b171dbe9ae083599937e1e28323b378038c205 100644 (file)
@@ -3,6 +3,10 @@
        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,
@@ -37,6 +45,7 @@
                        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();