From cf8018aef9886a64c3075efe2e4e76bd7ed7e888 Mon Sep 17 00:00:00 2001 From: Scott Taylor Date: Mon, 9 Feb 2015 04:44:39 +0000 Subject: [PATCH] Bind `this` at calltime instead of letting `self` spill down into closures. See #28510. git-svn-id: https://develop.svn.wordpress.org/trunk@31380 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/js/media/audio-video.js | 31 ++++---- .../js/media/audio-video.manifest.js | 10 +-- .../js/media/controllers/cropper.js | 16 +++-- src/wp-includes/js/media/grid.js | 50 ++++++------- src/wp-includes/js/media/models/post-media.js | 6 +- src/wp-includes/js/media/views.js | 70 +++++++++---------- .../js/media/views/attachments/browser.js | 8 +-- .../js/media/views/edit-image-details.js | 8 +-- src/wp-includes/js/media/views/edit-image.js | 9 ++- src/wp-includes/js/media/views/embed/url.js | 8 +-- .../js/media/views/frame/edit-attachments.js | 18 +++-- .../js/media/views/image-details.js | 21 +++--- .../js/media/views/media-details.js | 7 +- .../js/media/views/uploader/editor.js | 8 +-- 14 files changed, 128 insertions(+), 142 deletions(-) diff --git a/src/wp-includes/js/media/audio-video.js b/src/wp-includes/js/media/audio-video.js index 7e0d06cf33..ca4ef75f91 100644 --- a/src/wp-includes/js/media/audio-video.js +++ b/src/wp-includes/js/media/audio-video.js @@ -130,7 +130,7 @@ }, shortcode : function( model ) { - var self = this, content; + var content; _.each( this.defaults, function( value, key ) { model[ key ] = self.coerce( model, key ); @@ -138,7 +138,7 @@ if ( value === model[ key ] ) { delete model[ key ]; } - }); + }, this ); content = model.content; delete model.content; @@ -191,15 +191,15 @@ }, shortcode : function( model ) { - var self = this, content; + var content; _.each( this.defaults, function( value, key ) { - model[ key ] = self.coerce( model, key ); + model[ key ] = this.coerce( model, key ); if ( value === model[ key ] ) { delete model[ key ]; } - }); + }, this ); content = model.content; delete model.content; @@ -1189,14 +1189,12 @@ var PostMedia = Backbone.Model.extend({ }, changeAttachment: function( attachment ) { - var self = this; - this.setSource( attachment ); this.unset( 'src' ); _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function( ext ) { - self.unset( ext ); - } ); + this.unset( ext ); + }, this ); } }); @@ -2831,7 +2829,7 @@ AttachmentsBrowser = View.extend({ controller: this.controller, priority: -60, click: function() { - var changed = [], removed = [], self = this, + var changed = [], removed = [], selection = this.controller.state().get( 'selection' ), library = this.controller.state().get( 'library' ); @@ -2872,10 +2870,10 @@ AttachmentsBrowser = View.extend({ if ( changed.length ) { selection.remove( removed ); - $.when.apply( null, changed ).then( function() { + $.when.apply( null, changed ).then( _.bind( function() { library._requery( true ); - self.controller.trigger( 'selection:action:done' ); - } ); + this.controller.trigger( 'selection:action:done' ); + }, this ) ); } else { this.controller.trigger( 'selection:action:done' ); } @@ -4145,10 +4143,11 @@ MediaDetails = AttachmentDisplay.extend({ * @returns {media.view.MediaDetails} Returns itself to allow chaining */ render: function() { - var self = this; - AttachmentDisplay.prototype.render.apply( this, arguments ); - setTimeout( function() { self.resetFocus(); }, 10 ); + + setTimeout( _.bind( function() { + this.resetFocus(); + }, this ), 10 ); this.settings = _.defaults( { success : this.success diff --git a/src/wp-includes/js/media/audio-video.manifest.js b/src/wp-includes/js/media/audio-video.manifest.js index 6fd2e61b74..21c11cf1dd 100644 --- a/src/wp-includes/js/media/audio-video.manifest.js +++ b/src/wp-includes/js/media/audio-video.manifest.js @@ -129,7 +129,7 @@ }, shortcode : function( model ) { - var self = this, content; + var content; _.each( this.defaults, function( value, key ) { model[ key ] = self.coerce( model, key ); @@ -137,7 +137,7 @@ if ( value === model[ key ] ) { delete model[ key ]; } - }); + }, this ); content = model.content; delete model.content; @@ -190,15 +190,15 @@ }, shortcode : function( model ) { - var self = this, content; + var content; _.each( this.defaults, function( value, key ) { - model[ key ] = self.coerce( model, key ); + model[ key ] = this.coerce( model, key ); if ( value === model[ key ] ) { delete model[ key ]; } - }); + }, this ); content = model.content; delete model.content; diff --git a/src/wp-includes/js/media/controllers/cropper.js b/src/wp-includes/js/media/controllers/cropper.js index e37af1402c..770246e58e 100644 --- a/src/wp-includes/js/media/controllers/cropper.js +++ b/src/wp-includes/js/media/controllers/cropper.js @@ -67,18 +67,20 @@ Cropper = State.extend({ requires: { library: false, selection: false }, click: function() { - var self = this, - selection = this.controller.state().get('selection').first(); + var controller = this.controller, + selection; - selection.set({cropDetails: this.controller.state().imgSelect.getSelection()}); + selection = controller.state().get('selection').first(); + selection.set({cropDetails: controller.state().imgSelect.getSelection()}); this.$el.text(l10n.cropping); this.$el.attr('disabled', true); - this.controller.state().doCrop( selection ).done( function( croppedImage ) { - self.controller.trigger('cropped', croppedImage ); - self.controller.close(); + + controller.state().doCrop( selection ).done( function( croppedImage ) { + controller.trigger('cropped', croppedImage ); + controller.close(); }).fail( function() { - self.controller.trigger('content:error:crop'); + controller.trigger('content:error:crop'); }); } } diff --git a/src/wp-includes/js/media/grid.js b/src/wp-includes/js/media/grid.js index 74b86ca18c..8291d6119d 100644 --- a/src/wp-includes/js/media/grid.js +++ b/src/wp-includes/js/media/grid.js @@ -2663,7 +2663,7 @@ AttachmentsBrowser = View.extend({ controller: this.controller, priority: -60, click: function() { - var changed = [], removed = [], self = this, + var changed = [], removed = [], selection = this.controller.state().get( 'selection' ), library = this.controller.state().get( 'library' ); @@ -2704,10 +2704,10 @@ AttachmentsBrowser = View.extend({ if ( changed.length ) { selection.remove( removed ); - $.when.apply( null, changed ).then( function() { + $.when.apply( null, changed ).then( _.bind( function() { library._requery( true ); - self.controller.trigger( 'selection:action:done' ); - } ); + this.controller.trigger( 'selection:action:done' ); + }, this ) ); } else { this.controller.trigger( 'selection:action:done' ); } @@ -3198,11 +3198,9 @@ Details = EditImage.extend({ }, save: function() { - var self = this; - - this.model.fetch().done( function() { - self.frame.content.mode( 'edit-metadata' ); - }); + this.model.fetch().done( _.bind( function() { + this.frame.content.mode( 'edit-metadata' ); + }, this ) ); } }); @@ -3251,12 +3249,11 @@ EditImage = View.extend({ }, save: function() { - var self = this, - lastState = this.controller.lastState(); + var lastState = this.controller.lastState(); - this.model.fetch().done( function() { - self.controller.setState( lastState ); - }); + this.model.fetch().done( _.bind( function() { + this.controller.setState( lastState ); + }, this ) ); } }); @@ -3560,8 +3557,6 @@ EditAttachments = MediaFrame.extend({ }, createModal: function() { - var self = this; - // Initialize modal container view. if ( this.options.modal ) { this.modal = new Modal({ @@ -3569,18 +3564,18 @@ EditAttachments = MediaFrame.extend({ title: this.options.title }); - this.modal.on( 'open', function () { - $( 'body' ).on( 'keydown.media-modal', _.bind( self.keyEvent, self ) ); - } ); + this.modal.on( 'open', _.bind( function () { + $( 'body' ).on( 'keydown.media-modal', _.bind( this.keyEvent, this ) ); + }, this ) ); // Completely destroy the modal DOM element when closing it. - this.modal.on( 'close', function() { - self.modal.remove(); + this.modal.on( 'close', _.bind( function() { + this.modal.remove(); $( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */ // Restore the original focus item if possible - $( 'li.attachment[data-id="' + self.model.get( 'id' ) +'"]' ).focus(); - self.resetRoute(); - } ); + $( 'li.attachment[data-id="' + this.model.get( 'id' ) +'"]' ).focus(); + this.resetRoute(); + }, this ) ); // Set this frame as the modal's content. this.modal.content( this ); @@ -4145,10 +4140,11 @@ MediaDetails = AttachmentDisplay.extend({ * @returns {media.view.MediaDetails} Returns itself to allow chaining */ render: function() { - var self = this; - AttachmentDisplay.prototype.render.apply( this, arguments ); - setTimeout( function() { self.resetFocus(); }, 10 ); + + setTimeout( _.bind( function() { + this.resetFocus(); + }, this ), 10 ); this.settings = _.defaults( { success : this.success diff --git a/src/wp-includes/js/media/models/post-media.js b/src/wp-includes/js/media/models/post-media.js index 1ac2917808..658e7b3613 100644 --- a/src/wp-includes/js/media/models/post-media.js +++ b/src/wp-includes/js/media/models/post-media.js @@ -28,14 +28,12 @@ var PostMedia = Backbone.Model.extend({ }, changeAttachment: function( attachment ) { - var self = this; - this.setSource( attachment ); this.unset( 'src' ); _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function( ext ) { - self.unset( ext ); - } ); + this.unset( ext ); + }, this ); } }); diff --git a/src/wp-includes/js/media/views.js b/src/wp-includes/js/media/views.js index 1f04776e2d..b33b013bd7 100644 --- a/src/wp-includes/js/media/views.js +++ b/src/wp-includes/js/media/views.js @@ -333,18 +333,20 @@ Cropper = State.extend({ requires: { library: false, selection: false }, click: function() { - var self = this, - selection = this.controller.state().get('selection').first(); + var controller = this.controller, + selection; - selection.set({cropDetails: this.controller.state().imgSelect.getSelection()}); + selection = controller.state().get('selection').first(); + selection.set({cropDetails: controller.state().imgSelect.getSelection()}); this.$el.text(l10n.cropping); this.$el.attr('disabled', true); - this.controller.state().doCrop( selection ).done( function( croppedImage ) { - self.controller.trigger('cropped', croppedImage ); - self.controller.close(); + + controller.state().doCrop( selection ).done( function( croppedImage ) { + controller.trigger('cropped', croppedImage ); + controller.close(); }).fail( function() { - self.controller.trigger('content:error:crop'); + controller.trigger('content:error:crop'); }); } } @@ -3836,7 +3838,7 @@ AttachmentsBrowser = View.extend({ controller: this.controller, priority: -60, click: function() { - var changed = [], removed = [], self = this, + var changed = [], removed = [], selection = this.controller.state().get( 'selection' ), library = this.controller.state().get( 'library' ); @@ -3877,10 +3879,10 @@ AttachmentsBrowser = View.extend({ if ( changed.length ) { selection.remove( removed ); - $.when.apply( null, changed ).then( function() { + $.when.apply( null, changed ).then( _.bind( function() { library._requery( true ); - self.controller.trigger( 'selection:action:done' ); - } ); + this.controller.trigger( 'selection:action:done' ); + }, this ) ); } else { this.controller.trigger( 'selection:action:done' ); } @@ -4395,12 +4397,11 @@ EditImage = View.extend({ }, save: function() { - var self = this, - lastState = this.controller.lastState(); + var lastState = this.controller.lastState(); - this.model.fetch().done( function() { - self.controller.setState( lastState ); - }); + this.model.fetch().done( _.bind( function() { + this.controller.setState( lastState ); + }, this ) ); } }); @@ -4603,8 +4604,6 @@ EmbedUrl = View.extend({ }, initialize: function() { - var self = this; - this.$input = $('').val( this.model.get('url') ); this.input = this.$input[0]; @@ -4614,9 +4613,9 @@ EmbedUrl = View.extend({ this.listenTo( this.model, 'change:url', this.render ); if ( this.model.get( 'url' ) ) { - _.delay( function () { - self.model.trigger( 'change:url' ); - }, 500 ); + _.delay( _.bind( function () { + this.model.trigger( 'change:url' ); + }, this ), 500 ); } }, /** @@ -6069,18 +6068,19 @@ ImageDetails = AttachmentDisplay.extend({ }, render: function() { - var self = this, - args = arguments; + var args = arguments; if ( this.model.attachment && 'pending' === this.model.dfd.state() ) { - this.model.dfd.done( function() { - AttachmentDisplay.prototype.render.apply( self, args ); - self.postRender(); - } ).fail( function() { - self.model.attachment = false; - AttachmentDisplay.prototype.render.apply( self, args ); - self.postRender(); - } ); + this.model.dfd + .done( _.bind( function() { + AttachmentDisplay.prototype.render.apply( this, args ); + this.postRender(); + }, this ) ) + .fail( _.bind( function() { + this.model.attachment = false; + AttachmentDisplay.prototype.render.apply( this, args ); + this.postRender(); + }, this ) ); } else { AttachmentDisplay.prototype.render.apply( this, arguments ); this.postRender(); @@ -7793,8 +7793,6 @@ EditorUploader = View.extend({ * Bind drag'n'drop events to callbacks. */ initialize: function() { - var self = this; - this.initialized = false; // Bail if not enabled or UA does not support drag'n'drop or File API. @@ -7814,9 +7812,9 @@ EditorUploader = View.extend({ this.$document.on( 'dragover', _.bind( this.containerDragover, this ) ); this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) ); - this.$document.on( 'dragstart dragend drop', function( event ) { - self.localDrag = event.type === 'dragstart'; - }); + this.$document.on( 'dragstart dragend drop', _.bind( function( event ) { + this.localDrag = event.type === 'dragstart'; + }, this ) ); this.initialized = true; return this; diff --git a/src/wp-includes/js/media/views/attachments/browser.js b/src/wp-includes/js/media/views/attachments/browser.js index 7c49d0edd9..d7e435b7f2 100644 --- a/src/wp-includes/js/media/views/attachments/browser.js +++ b/src/wp-includes/js/media/views/attachments/browser.js @@ -182,7 +182,7 @@ AttachmentsBrowser = View.extend({ controller: this.controller, priority: -60, click: function() { - var changed = [], removed = [], self = this, + var changed = [], removed = [], selection = this.controller.state().get( 'selection' ), library = this.controller.state().get( 'library' ); @@ -223,10 +223,10 @@ AttachmentsBrowser = View.extend({ if ( changed.length ) { selection.remove( removed ); - $.when.apply( null, changed ).then( function() { + $.when.apply( null, changed ).then( _.bind( function() { library._requery( true ); - self.controller.trigger( 'selection:action:done' ); - } ); + this.controller.trigger( 'selection:action:done' ); + }, this ) ); } else { this.controller.trigger( 'selection:action:done' ); } diff --git a/src/wp-includes/js/media/views/edit-image-details.js b/src/wp-includes/js/media/views/edit-image-details.js index 604c4ef97d..e1bb647b7d 100644 --- a/src/wp-includes/js/media/views/edit-image-details.js +++ b/src/wp-includes/js/media/views/edit-image-details.js @@ -15,11 +15,9 @@ Details = EditImage.extend({ }, save: function() { - var self = this; - - this.model.fetch().done( function() { - self.frame.content.mode( 'edit-metadata' ); - }); + this.model.fetch().done( _.bind( function() { + this.frame.content.mode( 'edit-metadata' ); + }, this ) ); } }); diff --git a/src/wp-includes/js/media/views/edit-image.js b/src/wp-includes/js/media/views/edit-image.js index 26cbc7c471..f985a33932 100644 --- a/src/wp-includes/js/media/views/edit-image.js +++ b/src/wp-includes/js/media/views/edit-image.js @@ -41,12 +41,11 @@ EditImage = View.extend({ }, save: function() { - var self = this, - lastState = this.controller.lastState(); + var lastState = this.controller.lastState(); - this.model.fetch().done( function() { - self.controller.setState( lastState ); - }); + this.model.fetch().done( _.bind( function() { + this.controller.setState( lastState ); + }, this ) ); } }); diff --git a/src/wp-includes/js/media/views/embed/url.js b/src/wp-includes/js/media/views/embed/url.js index 8aacbd8047..e0c9fbf273 100644 --- a/src/wp-includes/js/media/views/embed/url.js +++ b/src/wp-includes/js/media/views/embed/url.js @@ -23,8 +23,6 @@ EmbedUrl = View.extend({ }, initialize: function() { - var self = this; - this.$input = $('').val( this.model.get('url') ); this.input = this.$input[0]; @@ -34,9 +32,9 @@ EmbedUrl = View.extend({ this.listenTo( this.model, 'change:url', this.render ); if ( this.model.get( 'url' ) ) { - _.delay( function () { - self.model.trigger( 'change:url' ); - }, 500 ); + _.delay( _.bind( function () { + this.model.trigger( 'change:url' ); + }, this ), 500 ); } }, /** diff --git a/src/wp-includes/js/media/views/frame/edit-attachments.js b/src/wp-includes/js/media/views/frame/edit-attachments.js index 362d8a3a34..a4381c5252 100644 --- a/src/wp-includes/js/media/views/frame/edit-attachments.js +++ b/src/wp-includes/js/media/views/frame/edit-attachments.js @@ -74,8 +74,6 @@ EditAttachments = MediaFrame.extend({ }, createModal: function() { - var self = this; - // Initialize modal container view. if ( this.options.modal ) { this.modal = new Modal({ @@ -83,18 +81,18 @@ EditAttachments = MediaFrame.extend({ title: this.options.title }); - this.modal.on( 'open', function () { - $( 'body' ).on( 'keydown.media-modal', _.bind( self.keyEvent, self ) ); - } ); + this.modal.on( 'open', _.bind( function () { + $( 'body' ).on( 'keydown.media-modal', _.bind( this.keyEvent, this ) ); + }, this ) ); // Completely destroy the modal DOM element when closing it. - this.modal.on( 'close', function() { - self.modal.remove(); + this.modal.on( 'close', _.bind( function() { + this.modal.remove(); $( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */ // Restore the original focus item if possible - $( 'li.attachment[data-id="' + self.model.get( 'id' ) +'"]' ).focus(); - self.resetRoute(); - } ); + $( 'li.attachment[data-id="' + this.model.get( 'id' ) +'"]' ).focus(); + this.resetRoute(); + }, this ) ); // Set this frame as the modal's content. this.modal.content( this ); diff --git a/src/wp-includes/js/media/views/image-details.js b/src/wp-includes/js/media/views/image-details.js index ca5d9e8ffe..b812df8fdc 100644 --- a/src/wp-includes/js/media/views/image-details.js +++ b/src/wp-includes/js/media/views/image-details.js @@ -49,18 +49,19 @@ ImageDetails = AttachmentDisplay.extend({ }, render: function() { - var self = this, - args = arguments; + var args = arguments; if ( this.model.attachment && 'pending' === this.model.dfd.state() ) { - this.model.dfd.done( function() { - AttachmentDisplay.prototype.render.apply( self, args ); - self.postRender(); - } ).fail( function() { - self.model.attachment = false; - AttachmentDisplay.prototype.render.apply( self, args ); - self.postRender(); - } ); + this.model.dfd + .done( _.bind( function() { + AttachmentDisplay.prototype.render.apply( this, args ); + this.postRender(); + }, this ) ) + .fail( _.bind( function() { + this.model.attachment = false; + AttachmentDisplay.prototype.render.apply( this, args ); + this.postRender(); + }, this ) ); } else { AttachmentDisplay.prototype.render.apply( this, arguments ); this.postRender(); diff --git a/src/wp-includes/js/media/views/media-details.js b/src/wp-includes/js/media/views/media-details.js index 31c6456e5e..c4bee442ac 100644 --- a/src/wp-includes/js/media/views/media-details.js +++ b/src/wp-includes/js/media/views/media-details.js @@ -110,10 +110,11 @@ MediaDetails = AttachmentDisplay.extend({ * @returns {media.view.MediaDetails} Returns itself to allow chaining */ render: function() { - var self = this; - AttachmentDisplay.prototype.render.apply( this, arguments ); - setTimeout( function() { self.resetFocus(); }, 10 ); + + setTimeout( _.bind( function() { + this.resetFocus(); + }, this ), 10 ); this.settings = _.defaults( { success : this.success diff --git a/src/wp-includes/js/media/views/uploader/editor.js b/src/wp-includes/js/media/views/uploader/editor.js index 1da63848ed..3edc35a224 100644 --- a/src/wp-includes/js/media/views/uploader/editor.js +++ b/src/wp-includes/js/media/views/uploader/editor.js @@ -30,8 +30,6 @@ EditorUploader = View.extend({ * Bind drag'n'drop events to callbacks. */ initialize: function() { - var self = this; - this.initialized = false; // Bail if not enabled or UA does not support drag'n'drop or File API. @@ -51,9 +49,9 @@ EditorUploader = View.extend({ this.$document.on( 'dragover', _.bind( this.containerDragover, this ) ); this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) ); - this.$document.on( 'dragstart dragend drop', function( event ) { - self.localDrag = event.type === 'dragstart'; - }); + this.$document.on( 'dragstart dragend drop', _.bind( function( event ) { + this.localDrag = event.type === 'dragstart'; + }, this ) ); this.initialized = true; return this;