diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js index fb634e6..0105ac0 100644 --- a/core/modules/responsive_preview/js/responsive-preview.js +++ b/core/modules/responsive_preview/js/responsive-preview.js @@ -355,17 +355,22 @@ Drupal.responsivePreview = Drupal.responsivePreview || { this.bleed = this.options.bleed; this.tabModel = this.options.tabModel; this.envModel = this.options.envModel; + var handler; - // The selectDevice function is declared outside of the view because it is - // shared among views. It must be bound to this for the correct context - // to obtain. - this.$el.on('click.responsivepreview', '.responsive-preview-device', $.proxy(selectDevice, this)); + // Curry the 'this' object in order to pass it as an argument to the + // selectDevice function. + handler = selectDevice.bind(null, this); + this.$el.on('click.responsivepreview', '.responsive-preview-device', handler); this.model.on('change:isActive change:dimensions change:activeDevice change:fittingDeviceCount', this.render, this); this.tabModel.on('change:isDeviceListOpen', this.render, this); - this.envModel.on('change:viewportWidth', updateDeviceList, this); + // Curry the 'this' object in order to pass it as an argument to the + // updateDeviceList function. + handler = updateDeviceList.bind(null, this); + this.envModel.on('change:viewportWidth', handler, null); + this.envModel.on('change:viewportWidth', this.correctDeviceListEdgeCollision, this); }, @@ -454,15 +459,19 @@ Drupal.responsivePreview = Drupal.responsivePreview || { this.gutter = this.options.gutter; this.bleed = this.options.bleed; this.envModel = this.options.envModel; + var handler; - // The selectDevice function is declared outside of the view because it is - // shared among views. It must be bound to this for the correct context - // to obtain. - this.$el.on('click.responsivepreview', '.responsive-preview-device', $.proxy(selectDevice, this)); + // Curry the 'this' object in order to pass it as an argument to the + // selectDevice function. + handler = selectDevice.bind(null, this); + this.$el.on('click.responsivepreview', '.responsive-preview-device', handler); this.model.on('change:isActive change:dimensions change:activeDevice change:fittingDeviceCount', this.render, this); - this.envModel.on('change:viewportWidth', updateDeviceList, this); + // Curry the 'this' object in order to pass it as an argument to the + // updateDeviceList function. + handler = updateDeviceList.bind(null, this); + this.envModel.on('change:viewportWidth', handler, null); }, /** @@ -939,12 +948,18 @@ Drupal.responsivePreview = Drupal.responsivePreview || { /** * Model change handler; hides devices that don't fit the current viewport. + * + * @param Backbone.View view + * The View curried to this handler. This function is used in multiple Views, + * so we bind it as an argument to the handler function in order to avoid + * having to reference it through a 'this' object which will trigger 'Possible + * strict violation' warning messages in JSHint. */ -function updateDeviceList () { - var gutter = this.gutter; - var bleed = this.bleed; - var viewportWidth = this.envModel.get('viewportWidth'); - var $devices = this.$el.find('.responsive-preview-device'); +function updateDeviceList (view) { + var gutter = view.gutter; + var bleed = view.bleed; + var viewportWidth = view.envModel.get('viewportWidth'); + var $devices = view.$el.find('.responsive-preview-device'); var fittingDeviceCount = $devices.length; // Remove devices whose previews won't fit the current viewport. @@ -964,24 +979,29 @@ function updateDeviceList () { .attr('aria-disabled', !fits); }); // Set the number of devices that fit the current viewport. - this.model.set('fittingDeviceCount', fittingDeviceCount); + view.model.set('fittingDeviceCount', fittingDeviceCount); } /** * Updates the model to reflect the properties of the chosen device. * + * @param Backbone.View view + * The View curried to this handler. This function is used in multiple Views, + * so we bind it as an argument to the handler function in order to avoid + * having to reference it through a 'this' object which will trigger 'Possible + * strict violation' warning messages in JSHint. * @param jQuery.Event event */ -function selectDevice (event) { +function selectDevice (view, event) { var $link = $(event.target); var name = $link.data('responsive-preview-name'); // If the clicked link is already active, then shut down the preview. - if (this.model.get('activeDevice') === name) { - this.model.set('isActive', false); + if (view.model.get('activeDevice') === name) { + view.model.set('isActive', false); return; } // Update the device dimensions. - this.model.set({ + view.model.set({ 'activeDevice': name, 'dimensions': { 'width': parseInt($link.data('responsive-preview-width'), 10), @@ -990,7 +1010,7 @@ function selectDevice (event) { } }); // Toggle the preview on. - this.model.set('isActive', true); + view.model.set('isActive', true); event.preventDefault(); }