wp-admin/js/customize-controls.js

   1 /* globals _wpCustomizeHeader, _wpMediaViewsL10n */
   2 (function( exports, $ ){
   3         var api = wp.customize;
   4
   5         /**
   6          * @param options
   7          * - previewer - The Previewer instance to sync with.
   8          * - transport - The transport to use for previewing. Supports 'refresh' and 'postMessage'.
   9          */
  10         api.Setting = api.Value.extend({
  11                 initialize: function( id, value, options ) {
  12                         api.Value.prototype.initialize.call( this, value, options );
  13
  14                         this.id = id;
  15                         this.transport = this.transport || 'refresh';
  16
  17                         this.bind( this.preview );
  18                 },
  19                 preview: function() {
  20                         switch ( this.transport ) {
  21                                 case 'refresh':
  22                                         return this.previewer.refresh();
  23                                 case 'postMessage':
  24                                         return this.previewer.send( 'setting', [ this.id, this() ] );
  25                         }
  26                 }
  27         });
  28
  29         api.Control = api.Class.extend({
  30                 initialize: function( id, options ) {
  31                         var control = this,
  32                                 nodes, radios, settings;
  33
  34                         this.params = {};
  35                         $.extend( this, options || {} );
  36
  37                         this.id = id;
  38                         this.selector = '#customize-control-' + id.replace( /\]/g, '' ).replace( /\[/g, '-' );
  39                         this.container = $( this.selector );
  40
  41                         settings = $.map( this.params.settings, function( value ) {
  42                                 return value;
  43                         });
  44
  45                         api.apply( api, settings.concat( function() {
  46                                 var key;
  47
  48                                 control.settings = {};
  49                                 for ( key in control.params.settings ) {
  50                                         control.settings[ key ] = api( control.params.settings[ key ] );
  51                                 }
  52
  53                                 control.setting = control.settings['default'] || null;
  54                                 control.ready();
  55                         }) );
  56
  57                         control.elements = [];
  58
  59                         nodes  = this.container.find('[data-customize-setting-link]');
  60                         radios = {};
  61
  62                         nodes.each( function() {
  63                                 var node = $(this),
  64                                         name;
  65
  66                                 if ( node.is(':radio') ) {
  67                                         name = node.prop('name');
  68                                         if ( radios[ name ] )
  69                                                 return;
  70
  71                                         radios[ name ] = true;
  72                                         node = nodes.filter( '[name="' + name + '"]' );
  73                                 }
  74
  75                                 api( node.data('customizeSettingLink'), function( setting ) {
  76                                         var element = new api.Element( node );
  77                                         control.elements.push( element );
  78                                         element.sync( setting );
  79                                         element.set( setting() );
  80                                 });
  81                         });
  82                 },
  83
  84                 ready: function() {},
  85
  86                 dropdownInit: function() {
  87                         var control      = this,
  88                                 statuses     = this.container.find('.dropdown-status'),
  89                                 params       = this.params,
  90                                 toggleFreeze = false,
  91                                 update       = function( to ) {
  92                                         if ( typeof to === 'string' && params.statuses && params.statuses[ to ] )
  93                                                 statuses.html( params.statuses[ to ] ).show();
  94                                         else
  95                                                 statuses.hide();
  96                                 };
  97
  98                         // Support the .dropdown class to open/close complex elements
  99                         this.container.on( 'click keydown', '.dropdown', function( event ) {
 100                                 if ( event.type === 'keydown' &&  13 !== event.which ) // enter
 101                                         return;
 102
 103                                 event.preventDefault();
 104
 105                                 if (!toggleFreeze)
 106                                         control.container.toggleClass('open');
 107
 108                                 if ( control.container.hasClass('open') )
 109                                         control.container.parent().parent().find('li.library-selected').focus();
 110
 111                                 // Don't want to fire focus and click at same time
 112                                 toggleFreeze = true;
 113                                 setTimeout(function () {
 114                                         toggleFreeze = false;
 115                                 }, 400);
 116                         });
 117
 118                         this.setting.bind( update );
 119                         update( this.setting() );
 120                 }
 121         });
 122
 123         api.ColorControl = api.Control.extend({
 124                 ready: function() {
 125                         var control = this,
 126                                 picker = this.container.find('.color-picker-hex');
 127
 128                         picker.val( control.setting() ).wpColorPicker({
 129                                 change: function() {
 130                                         control.setting.set( picker.wpColorPicker('color') );
 131                                 },
 132                                 clear: function() {
 133                                         control.setting.set( false );
 134                                 }
 135                         });
 136                 }
 137         });
 138
 139         api.UploadControl = api.Control.extend({
 140                 ready: function() {
 141                         var control = this;
 142
 143                         this.params.removed = this.params.removed || '';
 144
 145                         this.success = $.proxy( this.success, this );
 146
 147                         this.uploader = $.extend({
 148                                 container: this.container,
 149                                 browser:   this.container.find('.upload'),
 150                                 dropzone:  this.container.find('.upload-dropzone'),
 151                                 success:   this.success,
 152                                 plupload:  {},
 153                                 params:    {}
 154                         }, this.uploader || {} );
 155
 156                         if ( control.params.extensions ) {
 157                                 control.uploader.plupload.filters = [{
 158                                         title:      api.l10n.allowedFiles,
 159                                         extensions: control.params.extensions
 160                                 }];
 161                         }
 162
 163                         if ( control.params.context )
 164                                 control.uploader.params['post_data[context]'] = this.params.context;
 165
 166                         if ( api.settings.theme.stylesheet )
 167                                 control.uploader.params['post_data[theme]'] = api.settings.theme.stylesheet;
 168
 169                         this.uploader = new wp.Uploader( this.uploader );
 170
 171                         this.remover = this.container.find('.remove');
 172                         this.remover.on( 'click keydown', function( event ) {
 173                                 if ( event.type === 'keydown' &&  13 !== event.which ) // enter
 174                                         return;
 175
 176                                 control.setting.set( control.params.removed );
 177                                 event.preventDefault();
 178                         });
 179
 180                         this.removerVisibility = $.proxy( this.removerVisibility, this );
 181                         this.setting.bind( this.removerVisibility );
 182                         this.removerVisibility( this.setting.get() );
 183                 },
 184                 success: function( attachment ) {
 185                         this.setting.set( attachment.get('url') );
 186                 },
 187                 removerVisibility: function( to ) {
 188                         this.remover.toggle( to != this.params.removed );
 189                 }
 190         });
 191
 192         api.ImageControl = api.UploadControl.extend({
 193                 ready: function() {
 194                         var control = this,
 195                                 panels;
 196
 197                         this.uploader = {
 198                                 init: function() {
 199                                         var fallback, button;
 200
 201                                         if ( this.supports.dragdrop )
 202                                                 return;
 203
 204                                         // Maintain references while wrapping the fallback button.
 205                                         fallback = control.container.find( '.upload-fallback' );
 206                                         button   = fallback.children().detach();
 207
 208                                         this.browser.detach().empty().append( button );
 209                                         fallback.append( this.browser ).show();
 210                                 }
 211                         };
 212
 213                         api.UploadControl.prototype.ready.call( this );
 214
 215                         this.thumbnail    = this.container.find('.preview-thumbnail img');
 216                         this.thumbnailSrc = $.proxy( this.thumbnailSrc, this );
 217                         this.setting.bind( this.thumbnailSrc );
 218
 219                         this.library = this.container.find('.library');
 220
 221                         // Generate tab objects
 222                         this.tabs = {};
 223                         panels    = this.library.find('.library-content');
 224
 225                         this.library.children('ul').children('li').each( function() {
 226                                 var link  = $(this),
 227                                         id    = link.data('customizeTab'),
 228                                         panel = panels.filter('[data-customize-tab="' + id + '"]');
 229
 230                                 control.tabs[ id ] = {
 231                                         both:  link.add( panel ),
 232                                         link:  link,
 233                                         panel: panel
 234                                 };
 235                         });
 236
 237                         // Bind tab switch events
 238                         this.library.children('ul').on( 'click keydown', 'li', function( event ) {
 239                                 if ( event.type === 'keydown' &&  13 !== event.which ) // enter
 240                                         return;
 241
 242                                 var id  = $(this).data('customizeTab'),
 243                                         tab = control.tabs[ id ];
 244
 245                                 event.preventDefault();
 246
 247                                 if ( tab.link.hasClass('library-selected') )
 248                                         return;
 249
 250                                 control.selected.both.removeClass('library-selected');
 251                                 control.selected = tab;
 252                                 control.selected.both.addClass('library-selected');
 253                         });
 254
 255                         // Bind events to switch image urls.
 256                         this.library.on( 'click keydown', 'a', function( event ) {
 257                                 if ( event.type === 'keydown' && 13 !== event.which ) // enter
 258                                         return;
 259
 260                                 var value = $(this).data('customizeImageValue');
 261
 262                                 if ( value ) {
 263                                         control.setting.set( value );
 264                                         event.preventDefault();
 265                                 }
 266                         });
 267
 268                         if ( this.tabs.uploaded ) {
 269                                 this.tabs.uploaded.target = this.library.find('.uploaded-target');
 270                                 if ( ! this.tabs.uploaded.panel.find('.thumbnail').length )
 271                                         this.tabs.uploaded.both.addClass('hidden');
 272                         }
 273
 274                         // Select a tab
 275                         panels.each( function() {
 276                                 var tab = control.tabs[ $(this).data('customizeTab') ];
 277
 278                                 // Select the first visible tab.
 279                                 if ( ! tab.link.hasClass('hidden') ) {
 280                                         control.selected = tab;
 281                                         tab.both.addClass('library-selected');
 282                                         return false;
 283                                 }
 284                         });
 285
 286                         this.dropdownInit();
 287                 },
 288                 success: function( attachment ) {
 289                         api.UploadControl.prototype.success.call( this, attachment );
 290
 291                         // Add the uploaded image to the uploaded tab.
 292                         if ( this.tabs.uploaded && this.tabs.uploaded.target.length ) {
 293                                 this.tabs.uploaded.both.removeClass('hidden');
 294
 295                                 // @todo: Do NOT store this on the attachment model. That is bad.
 296                                 attachment.element = $( '<a href="#" class="thumbnail"></a>' )
 297                                         .data( 'customizeImageValue', attachment.get('url') )
 298                                         .append( '<img src="' +  attachment.get('url')+ '" />' )
 299                                         .appendTo( this.tabs.uploaded.target );
 300                         }
 301                 },
 302                 thumbnailSrc: function( to ) {
 303                         if ( /^(https?:)?\/\//.test( to ) )
 304                                 this.thumbnail.prop( 'src', to ).show();
 305                         else
 306                                 this.thumbnail.hide();
 307                 }
 308         });
 309
 310         api.HeaderControl = api.Control.extend({
 311                 ready: function() {
 312                         this.btnRemove        = $('#customize-control-header_image .actions .remove');
 313                         this.btnNew           = $('#customize-control-header_image .actions .new');
 314
 315                         _.bindAll(this, 'openMedia', 'removeImage');
 316
 317                         this.btnNew.on( 'click', this.openMedia );
 318                         this.btnRemove.on( 'click', this.removeImage );
 319
 320                         api.HeaderTool.currentHeader = new api.HeaderTool.ImageModel();
 321
 322                         new api.HeaderTool.CurrentView({
 323                                 model: api.HeaderTool.currentHeader,
 324                                 el: '.current .container'
 325                         });
 326
 327                         new api.HeaderTool.ChoiceListView({
 328                                 collection: api.HeaderTool.UploadsList = new api.HeaderTool.ChoiceList(),
 329                                 el: '.choices .uploaded .list'
 330                         });
 331
 332                         new api.HeaderTool.ChoiceListView({
 333                                 collection: api.HeaderTool.DefaultsList = new api.HeaderTool.DefaultsList(),
 334                                 el: '.choices .default .list'
 335                         });
 336
 337                         api.HeaderTool.combinedList = api.HeaderTool.CombinedList = new api.HeaderTool.CombinedList([
 338                                 api.HeaderTool.UploadsList,
 339                                 api.HeaderTool.DefaultsList
 340                         ]);
 341                 },
 342
 343                 /**
 344                  * Returns a set of options, computed from the attached image data and
 345                  * theme-specific data, to be fed to the imgAreaSelect plugin in
 346                  * wp.media.view.Cropper.
 347                  *
 348                  * @param {wp.media.model.Attachment} attachment
 349                  * @param {wp.media.controller.Cropper} controller
 350                  * @returns {Object} Options
 351                  */
 352                 calculateImageSelectOptions: function(attachment, controller) {
 353                         var xInit = parseInt(_wpCustomizeHeader.data.width, 10),
 354                                 yInit = parseInt(_wpCustomizeHeader.data.height, 10),
 355                                 flexWidth = !! parseInt(_wpCustomizeHeader.data['flex-width'], 10),
 356                                 flexHeight = !! parseInt(_wpCustomizeHeader.data['flex-height'], 10),
 357                                 ratio, xImg, yImg, realHeight, realWidth,
 358                                 imgSelectOptions;
 359
 360                         realWidth = attachment.get('width');
 361                         realHeight = attachment.get('height');
 362
 363                         this.headerImage = new api.HeaderTool.ImageModel();
 364                         this.headerImage.set({
 365                                 themeWidth: xInit,
 366                                 themeHeight: yInit,
 367                                 themeFlexWidth: flexWidth,
 368                                 themeFlexHeight: flexHeight,
 369                                 imageWidth: realWidth,
 370                                 imageHeight: realHeight
 371                         });
 372
 373                         controller.set( 'canSkipCrop', ! this.headerImage.shouldBeCropped() );
 374
 375                         ratio = xInit / yInit;
 376                         xImg = realWidth;
 377                         yImg = realHeight;
 378
 379                         if ( xImg / yImg > ratio ) {
 380                                 yInit = yImg;
 381                                 xInit = yInit * ratio;
 382                         } else {
 383                                 xInit = xImg;
 384                                 yInit = xInit / ratio;
 385                         }
 386
 387                         imgSelectOptions = {
 388                                 handles: true,
 389                                 keys: true,
 390                                 instance: true,
 391                                 persistent: true,
 392                                 imageWidth: realWidth,
 393                                 imageHeight: realHeight,
 394                                 x1: 0,
 395                                 y1: 0,
 396                                 x2: xInit,
 397                                 y2: yInit
 398                         };
 399
 400                         if (flexHeight === false && flexWidth === false) {
 401                                 imgSelectOptions.aspectRatio = xInit + ':' + yInit;
 402                         }
 403                         if (flexHeight === false ) {
 404                                 imgSelectOptions.maxHeight = yInit;
 405                         }
 406                         if (flexWidth === false ) {
 407                                 imgSelectOptions.maxWidth = xInit;
 408                         }
 409
 410                         return imgSelectOptions;
 411                 },
 412
 413                 /**
 414                  * Sets up and opens the Media Manager in order to select an image.
 415                  * Depending on both the size of the image and the properties of the
 416                  * current theme, a cropping step after selection may be required or
 417                  * skippable.
 418                  *
 419                  * @param {event} event
 420                  */
 421                 openMedia: function(event) {
 422                         var l10n = _wpMediaViewsL10n;
 423
 424                         event.preventDefault();
 425
 426                         this.frame = wp.media({
 427                                 button: {
 428                                         text: l10n.selectAndCrop,
 429                                         close: false
 430                                 },
 431                                 states: [
 432                                         new wp.media.controller.Library({
 433                                                 title:     l10n.chooseImage,
 434                                                 library:   wp.media.query({ type: 'image' }),
 435                                                 multiple:  false,
 436                                                 priority:  20,
 437                                                 suggestedWidth: _wpCustomizeHeader.data.width,
 438                                                 suggestedHeight: _wpCustomizeHeader.data.height
 439                                         }),
 440                                         new wp.media.controller.Cropper({
 441                                                 imgSelectOptions: this.calculateImageSelectOptions
 442                                         })
 443                                 ]
 444                         });
 445
 446                         this.frame.on('select', this.onSelect, this);
 447                         this.frame.on('cropped', this.onCropped, this);
 448                         this.frame.on('skippedcrop', this.onSkippedCrop, this);
 449
 450                         this.frame.open();
 451                 },
 452
 453                 onSelect: function() {
 454                         this.frame.setState('cropper');
 455                 },
 456                 onCropped: function(croppedImage) {
 457                         var url = croppedImage.post_content,
 458                                 attachmentId = croppedImage.attachment_id,
 459                                 w = croppedImage.width,
 460                                 h = croppedImage.height;
 461                         this.setImageFromURL(url, attachmentId, w, h);
 462                 },
 463                 onSkippedCrop: function(selection) {
 464                         var url = selection.get('url'),
 465                                 w = selection.get('width'),
 466                                 h = selection.get('height');
 467                         this.setImageFromURL(url, selection.id, w, h);
 468                 },
 469
 470                 /**
 471                  * Creates a new wp.customize.HeaderTool.ImageModel from provided
 472                  * header image data and inserts it into the user-uploaded headers
 473                  * collection.
 474                  *
 475                  * @param {String} url
 476                  * @param {Number} attachmentId
 477                  * @param {Number} width
 478                  * @param {Number} height
 479                  */
 480                 setImageFromURL: function(url, attachmentId, width, height) {
 481                         var choice, data = {};
 482
 483                         data.url = url;
 484                         data.thumbnail_url = url;
 485                         data.timestamp = _.now();
 486
 487                         if (attachmentId) {
 488                                 data.attachment_id = attachmentId;
 489                         }
 490
 491                         if (width) {
 492                                 data.width = width;
 493                         }
 494
 495                         if (height) {
 496                                 data.height = height;
 497                         }
 498
 499                         choice = new api.HeaderTool.ImageModel({
 500                                 header: data,
 501                                 choice: url.split('/').pop()
 502                         });
 503                         api.HeaderTool.UploadsList.add(choice);
 504                         api.HeaderTool.currentHeader.set(choice.toJSON());
 505                         choice.save();
 506                         choice.importImage();
 507                 },
 508
 509                 /**
 510                  * Triggers the necessary events to deselect an image which was set as
 511                  * the currently selected one.
 512                  */
 513                 removeImage: function() {
 514                         api.HeaderTool.currentHeader.trigger('hide');
 515                         api.HeaderTool.CombinedList.trigger('control:removeImage');
 516                 }
 517
 518         });
 519
 520         // Change objects contained within the main customize object to Settings.
 521         api.defaultConstructor = api.Setting;
 522
 523         // Create the collection of Control objects.
 524         api.control = new api.Values({ defaultConstructor: api.Control });
 525
 526         api.PreviewFrame = api.Messenger.extend({
 527                 sensitivity: 2000,
 528
 529                 initialize: function( params, options ) {
 530                         var deferred = $.Deferred();
 531
 532                         // This is the promise object.
 533                         deferred.promise( this );
 534
 535                         this.container = params.container;
 536                         this.signature = params.signature;
 537
 538                         $.extend( params, { channel: api.PreviewFrame.uuid() });
 539
 540                         api.Messenger.prototype.initialize.call( this, params, options );
 541
 542                         this.add( 'previewUrl', params.previewUrl );
 543
 544                         this.query = $.extend( params.query || {}, { customize_messenger_channel: this.channel() });
 545
 546                         this.run( deferred );
 547                 },
 548
 549                 run: function( deferred ) {
 550                         var self   = this,
 551                                 loaded = false,
 552                                 ready  = false;
 553
 554                         if ( this._ready )
 555                                 this.unbind( 'ready', this._ready );
 556
 557                         this._ready = function() {
 558                                 ready = true;
 559
 560                                 if ( loaded )
 561                                         deferred.resolveWith( self );
 562                         };
 563
 564                         this.bind( 'ready', this._ready );
 565
 566                         this.request = $.ajax( this.previewUrl(), {
 567                                 type: 'POST',
 568                                 data: this.query,
 569                                 xhrFields: {
 570                                         withCredentials: true
 571                                 }
 572                         } );
 573
 574                         this.request.fail( function() {
 575                                 deferred.rejectWith( self, [ 'request failure' ] );
 576                         });
 577
 578                         this.request.done( function( response ) {
 579                                 var location = self.request.getResponseHeader('Location'),
 580                                         signature = self.signature,
 581                                         index;
 582
 583                                 // Check if the location response header differs from the current URL.
 584                                 // If so, the request was redirected; try loading the requested page.
 585                                 if ( location && location != self.previewUrl() ) {
 586                                         deferred.rejectWith( self, [ 'redirect', location ] );
 587                                         return;
 588                                 }
 589
 590                                 // Check if the user is not logged in.
 591                                 if ( '0' === response ) {
 592                                         self.login( deferred );
 593                                         return;
 594                                 }
 595
 596                                 // Check for cheaters.
 597                                 if ( '-1' === response ) {
 598                                         deferred.rejectWith( self, [ 'cheatin' ] );
 599                                         return;
 600                                 }
 601
 602                                 // Check for a signature in the request.
 603                                 index = response.lastIndexOf( signature );
 604                                 if ( -1 === index || index < response.lastIndexOf('</html>') ) {
 605                                         deferred.rejectWith( self, [ 'unsigned' ] );
 606                                         return;
 607                                 }
 608
 609                                 // Strip the signature from the request.
 610                                 response = response.slice( 0, index ) + response.slice( index + signature.length );
 611
 612                                 // Create the iframe and inject the html content.
 613                                 self.iframe = $('<iframe />').appendTo( self.container );
 614
 615                                 // Bind load event after the iframe has been added to the page;
 616                                 // otherwise it will fire when injected into the DOM.
 617                                 self.iframe.one( 'load', function() {
 618                                         loaded = true;
 619
 620                                         if ( ready ) {
 621                                                 deferred.resolveWith( self );
 622                                         } else {
 623                                                 setTimeout( function() {
 624                                                         deferred.rejectWith( self, [ 'ready timeout' ] );
 625                                                 }, self.sensitivity );
 626                                         }
 627                                 });
 628
 629                                 self.targetWindow( self.iframe[0].contentWindow );
 630
 631                                 self.targetWindow().document.open();
 632                                 self.targetWindow().document.write( response );
 633                                 self.targetWindow().document.close();
 634                         });
 635                 },
 636
 637                 login: function( deferred ) {
 638                         var self = this,
 639                                 reject;
 640
 641                         reject = function() {
 642                                 deferred.rejectWith( self, [ 'logged out' ] );
 643                         };
 644
 645                         if ( this.triedLogin )
 646                                 return reject();
 647
 648                         // Check if we have an admin cookie.
 649                         $.get( api.settings.url.ajax, {
 650                                 action: 'logged-in'
 651                         }).fail( reject ).done( function( response ) {
 652                                 var iframe;
 653
 654                                 if ( '1' !== response )
 655                                         reject();
 656
 657                                 iframe = $('<iframe src="' + self.previewUrl() + '" />').hide();
 658                                 iframe.appendTo( self.container );
 659                                 iframe.load( function() {
 660                                         self.triedLogin = true;
 661
 662                                         iframe.remove();
 663                                         self.run( deferred );
 664                                 });
 665                         });
 666                 },
 667
 668                 destroy: function() {
 669                         api.Messenger.prototype.destroy.call( this );
 670                         this.request.abort();
 671
 672                         if ( this.iframe )
 673                                 this.iframe.remove();
 674
 675                         delete this.request;
 676                         delete this.iframe;
 677                         delete this.targetWindow;
 678                 }
 679         });
 680
 681         (function(){
 682                 var uuid = 0;
 683                 api.PreviewFrame.uuid = function() {
 684                         return 'preview-' + uuid++;
 685                 };
 686         }());
 687
 688         api.Previewer = api.Messenger.extend({
 689                 refreshBuffer: 250,
 690
 691                 /**
 692                  * Requires params:
 693                  *  - container  - a selector or jQuery element
 694                  *  - previewUrl - the URL of preview frame
 695                  */
 696                 initialize: function( params, options ) {
 697                         var self = this,
 698                                 rscheme = /^https?/;
 699
 700                         $.extend( this, options || {} );
 701
 702                         /*
 703                          * Wrap this.refresh to prevent it from hammering the servers:
 704                          *
 705                          * If refresh is called once and no other refresh requests are
 706                          * loading, trigger the request immediately.
 707                          *
 708                          * If refresh is called while another refresh request is loading,
 709                          * debounce the refresh requests:
 710                          * 1. Stop the loading request (as it is instantly outdated).
 711                          * 2. Trigger the new request once refresh hasn't been called for
 712                          *    self.refreshBuffer milliseconds.
 713                          */
 714                         this.refresh = (function( self ) {
 715                                 var refresh  = self.refresh,
 716                                         callback = function() {
 717                                                 timeout = null;
 718                                                 refresh.call( self );
 719                                         },
 720                                         timeout;
 721
 722                                 return function() {
 723                                         if ( typeof timeout !== 'number' ) {
 724                                                 if ( self.loading ) {
 725                                                         self.abort();
 726                                                 } else {
 727                                                         return callback();
 728                                                 }
 729                                         }
 730
 731                                         clearTimeout( timeout );
 732                                         timeout = setTimeout( callback, self.refreshBuffer );
 733                                 };
 734                         })( this );
 735
 736                         this.container   = api.ensure( params.container );
 737                         this.allowedUrls = params.allowedUrls;
 738                         this.signature   = params.signature;
 739
 740                         params.url = window.location.href;
 741
 742                         api.Messenger.prototype.initialize.call( this, params );
 743
 744                         this.add( 'scheme', this.origin() ).link( this.origin ).setter( function( to ) {
 745                                 var match = to.match( rscheme );
 746                                 return match ? match[0] : '';
 747                         });
 748
 749                         // Limit the URL to internal, front-end links.
 750                         //
 751                         // If the frontend and the admin are served from the same domain, load the
 752                         // preview over ssl if the customizer is being loaded over ssl. This avoids
 753                         // insecure content warnings. This is not attempted if the admin and frontend
 754                         // are on different domains to avoid the case where the frontend doesn't have
 755                         // ssl certs.
 756
 757                         this.add( 'previewUrl', params.previewUrl ).setter( function( to ) {
 758                                 var result;
 759
 760                                 // Check for URLs that include "/wp-admin/" or end in "/wp-admin".
 761                                 // Strip hashes and query strings before testing.
 762                                 if ( /\/wp-admin(\/|$)/.test( to.replace( /[#?].*$/, '' ) ) )
 763                                         return null;
 764
 765                                 // Attempt to match the URL to the control frame's scheme
 766                                 // and check if it's allowed. If not, try the original URL.
 767                                 $.each([ to.replace( rscheme, self.scheme() ), to ], function( i, url ) {
 768                                         $.each( self.allowedUrls, function( i, allowed ) {
 769                                                 var path;
 770
 771                                                 allowed = allowed.replace( /\/+$/, '' );
 772                                                 path = url.replace( allowed, '' );
 773
 774                                                 if ( 0 === url.indexOf( allowed ) && /^([/#?]|$)/.test( path ) ) {
 775                                                         result = url;
 776                                                         return false;
 777                                                 }
 778                                         });
 779                                         if ( result )
 780                                                 return false;
 781                                 });
 782
 783                                 // If we found a matching result, return it. If not, bail.
 784                                 return result ? result : null;
 785                         });
 786
 787                         // Refresh the preview when the URL is changed (but not yet).
 788                         this.previewUrl.bind( this.refresh );
 789
 790                         this.scroll = 0;
 791                         this.bind( 'scroll', function( distance ) {
 792                                 this.scroll = distance;
 793                         });
 794
 795                         // Update the URL when the iframe sends a URL message.
 796                         this.bind( 'url', this.previewUrl );
 797                 },
 798
 799                 query: function() {},
 800
 801                 abort: function() {
 802                         if ( this.loading ) {
 803                                 this.loading.destroy();
 804                                 delete this.loading;
 805                         }
 806                 },
 807
 808                 refresh: function() {
 809                         var self = this;
 810
 811                         this.abort();
 812
 813                         this.loading = new api.PreviewFrame({
 814                                 url:        this.url(),
 815                                 previewUrl: this.previewUrl(),
 816                                 query:      this.query() || {},
 817                                 container:  this.container,
 818                                 signature:  this.signature
 819                         });
 820
 821                         this.loading.done( function() {
 822                                 // 'this' is the loading frame
 823                                 this.bind( 'synced', function() {
 824                                         if ( self.preview )
 825                                                 self.preview.destroy();
 826                                         self.preview = this;
 827                                         delete self.loading;
 828
 829                                         self.targetWindow( this.targetWindow() );
 830                                         self.channel( this.channel() );
 831
 832                                         self.send( 'active' );
 833                                 });
 834
 835                                 this.send( 'sync', {
 836                                         scroll:   self.scroll,
 837                                         settings: api.get()
 838                                 });
 839                         });
 840
 841                         this.loading.fail( function( reason, location ) {
 842                                 if ( 'redirect' === reason && location )
 843                                         self.previewUrl( location );
 844
 845                                 if ( 'logged out' === reason ) {
 846                                         if ( self.preview ) {
 847                                                 self.preview.destroy();
 848                                                 delete self.preview;
 849                                         }
 850
 851                                         self.login().done( self.refresh );
 852                                 }
 853
 854                                 if ( 'cheatin' === reason )
 855                                         self.cheatin();
 856                         });
 857                 },
 858
 859                 login: function() {
 860                         var previewer = this,
 861                                 deferred, messenger, iframe;
 862
 863                         if ( this._login )
 864                                 return this._login;
 865
 866                         deferred = $.Deferred();
 867                         this._login = deferred.promise();
 868
 869                         messenger = new api.Messenger({
 870                                 channel: 'login',
 871                                 url:     api.settings.url.login
 872                         });
 873
 874                         iframe = $('<iframe src="' + api.settings.url.login + '" />').appendTo( this.container );
 875
 876                         messenger.targetWindow( iframe[0].contentWindow );
 877
 878                         messenger.bind( 'login', function() {
 879                                 iframe.remove();
 880                                 messenger.destroy();
 881                                 delete previewer._login;
 882                                 deferred.resolve();
 883                         });
 884
 885                         return this._login;
 886                 },
 887
 888                 cheatin: function() {
 889                         $( document.body ).empty().addClass('cheatin').append( '<p>' + api.l10n.cheatin + '</p>' );
 890                 }
 891         });
 892
 893         /* =====================================================================
 894          * Ready.
 895          * ===================================================================== */
 896
 897         api.controlConstructor = {
 898                 color:  api.ColorControl,
 899                 upload: api.UploadControl,
 900                 image:  api.ImageControl,
 901                 header: api.HeaderControl
 902         };
 903
 904         $( function() {
 905                 api.settings = window._wpCustomizeSettings;
 906                 api.l10n = window._wpCustomizeControlsL10n;
 907
 908                 // Check if we can run the customizer.
 909                 if ( ! api.settings )
 910                         return;
 911
 912                 // Redirect to the fallback preview if any incompatibilities are found.
 913                 if ( ! $.support.postMessage || ( ! $.support.cors && api.settings.isCrossDomain ) )
 914                         return window.location = api.settings.url.fallback;
 915
 916                 var previewer, parent, topFocus,
 917                         body = $( document.body ),
 918                         overlay = body.children('.wp-full-overlay');
 919
 920                 // Prevent the form from saving when enter is pressed on an input or select element.
 921                 $('#customize-controls').on( 'keydown', function( e ) {
 922                         var isEnter = ( 13 === e.which ),
 923                                 $el = $( e.target );
 924
 925                         if ( isEnter && ( $el.is( 'input:not([type=button])' ) || $el.is( 'select' ) ) ) {
 926                                 e.preventDefault();
 927                         }
 928                 });
 929
 930                 // Initialize Previewer
 931                 previewer = new api.Previewer({
 932                         container:   '#customize-preview',
 933                         form:        '#customize-controls',
 934                         previewUrl:  api.settings.url.preview,
 935                         allowedUrls: api.settings.url.allowed,
 936                         signature:   'WP_CUSTOMIZER_SIGNATURE'
 937                 }, {
 938
 939                         nonce: api.settings.nonce,
 940
 941                         query: function() {
 942                                 return {
 943                                         wp_customize: 'on',
 944                                         theme:      api.settings.theme.stylesheet,
 945                                         customized: JSON.stringify( api.get() ),
 946                                         nonce:      this.nonce.preview
 947                                 };
 948                         },
 949
 950                         save: function() {
 951                                 var self  = this,
 952                                         query = $.extend( this.query(), {
 953                                                 action: 'customize_save',
 954                                                 nonce:  this.nonce.save
 955                                         } ),
 956                                         processing = api.state( 'processing' ),
 957                                         submitWhenDoneProcessing,
 958                                         submit;
 959
 960                                 body.addClass( 'saving' );
 961
 962                                 submit = function () {
 963                                         var request = $.post( api.settings.url.ajax, query );
 964
 965                                         api.trigger( 'save', request );
 966
 967                                         request.always( function () {
 968                                                 body.removeClass( 'saving' );
 969                                         } );
 970
 971                                         request.done( function( response ) {
 972                                                 // Check if the user is logged out.
 973                                                 if ( '0' === response ) {
 974                                                         self.preview.iframe.hide();
 975                                                         self.login().done( function() {
 976                                                                 self.save();
 977                                                                 self.preview.iframe.show();
 978                                                         } );
 979                                                         return;
 980                                                 }
 981
 982                                                 // Check for cheaters.
 983                                                 if ( '-1' === response ) {
 984                                                         self.cheatin();
 985                                                         return;
 986                                                 }
 987
 988                                                 api.trigger( 'saved' );
 989                                         } );
 990                                 };
 991
 992                                 if ( 0 === processing() ) {
 993                                         submit();
 994                                 } else {
 995                                         submitWhenDoneProcessing = function () {
 996                                                 if ( 0 === processing() ) {
 997                                                         api.state.unbind( 'change', submitWhenDoneProcessing );
 998                                                         submit();
 999                                                 }
1000                                         };
1001                                         api.state.bind( 'change', submitWhenDoneProcessing );
1002                                 }
1003
1004                         }
1005                 });
1006
1007                 // Refresh the nonces if the preview sends updated nonces over.
1008                 previewer.bind( 'nonce', function( nonce ) {
1009                         $.extend( this.nonce, nonce );
1010                 });
1011
1012                 $.each( api.settings.settings, function( id, data ) {
1013                         api.create( id, id, data.value, {
1014                                 transport: data.transport,
1015                                 previewer: previewer
1016                         } );
1017                 });
1018
1019                 $.each( api.settings.controls, function( id, data ) {
1020                         var constructor = api.controlConstructor[ data.type ] || api.Control,
1021                                 control;
1022
1023                         control = api.control.add( id, new constructor( id, {
1024                                 params: data,
1025                                 previewer: previewer
1026                         } ) );
1027                 });
1028
1029                 // Check if preview url is valid and load the preview frame.
1030                 if ( previewer.previewUrl() )
1031                         previewer.refresh();
1032                 else
1033                         previewer.previewUrl( api.settings.url.home );
1034
1035                 // Save and activated states
1036                 (function() {
1037                         var state = new api.Values(),
1038                                 saved = state.create( 'saved' ),
1039                                 activated = state.create( 'activated' ),
1040                                 processing = state.create( 'processing' );
1041
1042                         state.bind( 'change', function() {
1043                                 var save = $('#save'),
1044                                         back = $('.back');
1045
1046                                 if ( ! activated() ) {
1047                                         save.val( api.l10n.activate ).prop( 'disabled', false );
1048                                         back.text( api.l10n.cancel );
1049
1050                                 } else if ( saved() ) {
1051                                         save.val( api.l10n.saved ).prop( 'disabled', true );
1052                                         back.text( api.l10n.close );
1053
1054                                 } else {
1055                                         save.val( api.l10n.save ).prop( 'disabled', false );
1056                                         back.text( api.l10n.cancel );
1057                                 }
1058                         });
1059
1060                         // Set default states.
1061                         saved( true );
1062                         activated( api.settings.theme.active );
1063                         processing( 0 );
1064
1065                         api.bind( 'change', function() {
1066                                 state('saved').set( false );
1067                         });
1068
1069                         api.bind( 'saved', function() {
1070                                 state('saved').set( true );
1071                                 state('activated').set( true );
1072                         });
1073
1074                         activated.bind( function( to ) {
1075                                 if ( to )
1076                                         api.trigger( 'activated' );
1077                         });
1078
1079                         // Expose states to the API.
1080                         api.state = state;
1081                 }());
1082
1083                 // Button bindings.
1084                 $('#save').click( function( event ) {
1085                         previewer.save();
1086                         event.preventDefault();
1087                 }).keydown( function( event ) {
1088                         if ( 9 === event.which ) // tab
1089                                 return;
1090                         if ( 13 === event.which ) // enter
1091                                 previewer.save();
1092                         event.preventDefault();
1093                 });
1094
1095                 $('.back').keydown( function( event ) {
1096                         if ( 9 === event.which ) // tab
1097                                 return;
1098                         if ( 13 === event.which ) // enter
1099                                 this.click();
1100                         event.preventDefault();
1101                 });
1102
1103                 $('.upload-dropzone a.upload').keydown( function( event ) {
1104                         if ( 13 === event.which ) // enter
1105                                 this.click();
1106                 });
1107
1108                 $('.collapse-sidebar').on( 'click keydown', function( event ) {
1109                         if ( event.type === 'keydown' &&  13 !== event.which ) // enter
1110                                 return;
1111
1112                         overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
1113                         event.preventDefault();
1114                 });
1115
1116                 // Create a potential postMessage connection with the parent frame.
1117                 parent = new api.Messenger({
1118                         url: api.settings.url.parent,
1119                         channel: 'loader'
1120                 });
1121
1122                 // If we receive a 'back' event, we're inside an iframe.
1123                 // Send any clicks to the 'Return' link to the parent page.
1124                 parent.bind( 'back', function() {
1125                         $('.back').on( 'click.back', function( event ) {
1126                                 event.preventDefault();
1127                                 parent.send( 'close' );
1128                         });
1129                 });
1130
1131                 // Pass events through to the parent.
1132                 api.bind( 'saved', function() {
1133                         parent.send( 'saved' );
1134                 });
1135
1136                 // When activated, let the loader handle redirecting the page.
1137                 // If no loader exists, redirect the page ourselves (if a url exists).
1138                 api.bind( 'activated', function() {
1139                         if ( parent.targetWindow() )
1140                                 parent.send( 'activated', api.settings.url.activated );
1141                         else if ( api.settings.url.activated )
1142                                 window.location = api.settings.url.activated;
1143                 });
1144
1145                 // Initialize the connection with the parent frame.
1146                 parent.send( 'ready' );
1147
1148                 // Control visibility for default controls
1149                 $.each({
1150                         'background_image': {
1151                                 controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ],
1152                                 callback: function( to ) { return !! to; }
1153                         },
1154                         'show_on_front': {
1155                                 controls: [ 'page_on_front', 'page_for_posts' ],
1156                                 callback: function( to ) { return 'page' === to; }
1157                         },
1158                         'header_textcolor': {
1159                                 controls: [ 'header_textcolor' ],
1160                                 callback: function( to ) { return 'blank' !== to; }
1161                         }
1162                 }, function( settingId, o ) {
1163                         api( settingId, function( setting ) {
1164                                 $.each( o.controls, function( i, controlId ) {
1165                                         api.control( controlId, function( control ) {
1166                                                 var visibility = function( to ) {
1167                                                         control.container.toggle( o.callback( to ) );
1168                                                 };
1169
1170                                                 visibility( setting.get() );
1171                                                 setting.bind( visibility );
1172                                         });
1173                                 });
1174                         });
1175                 });
1176
1177                 // Juggle the two controls that use header_textcolor
1178                 api.control( 'display_header_text', function( control ) {
1179                         var last = '';
1180
1181                         control.elements[0].unsync( api( 'header_textcolor' ) );
1182
1183                         control.element = new api.Element( control.container.find('input') );
1184                         control.element.set( 'blank' !== control.setting() );
1185
1186                         control.element.bind( function( to ) {
1187                                 if ( ! to )
1188                                         last = api( 'header_textcolor' ).get();
1189
1190                                 control.setting.set( to ? last : 'blank' );
1191                         });
1192
1193                         control.setting.bind( function( to ) {
1194                                 control.element.set( 'blank' !== to );
1195                         });
1196                 });
1197
1198                 api.trigger( 'ready' );
1199
1200                 // Make sure left column gets focus
1201                 topFocus = $('.back');
1202                 topFocus.focus();
1203                 setTimeout(function () {
1204                         topFocus.focus();
1205                 }, 200);
1206
1207         });
1208
1209 })( wp, jQuery );