Merge pull request #2315 from edx/anton/fix-imageresponse-offset-in-ff

Imageresponse: fix offset in FF.

CHANGELOG.rst

@@ -5,6 +5,8 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+Blades: Fix bug when image response in Firefox does not retain input. BLD-711.
+
 Blades: Give numerical response tolerance as a range. BLD-25.
 
 Blades: Allow user with BetaTester role correctly use LTI. BLD-641.

common/lib/xmodule/xmodule/js/spec/capa/imageinput_spec.js

@@ -18,13 +18,9 @@
             el.append(createTestImage('cross_12345', 300, 400, 'red'));
 
             state = new ImageInput('12345');
-
-            spyOn(state, 'clickHandler').andCallThrough();
         });
 
         it('initialization', function () {
-            expect(state.elementId).toBe('12345');
-
             // Check that object's properties are present, and that the DOM
             // elements they reference exist.
             expect(state.el).toBeDefined();
@@ -36,12 +32,7 @@
             expect(state.inputEl).toBeDefined();
             expect(state.inputEl).toExist();
 
-            // Check that the click handler has been attached to the `state.el`
-            // element. Note that `state.clickHandler()` method is called from
-            // within the attached handler. That is why we can't use
-            // Jasmine-jQuery `toHandleWith()` method.
-            state.el.click();
-            expect(state.clickHandler).toHaveBeenCalled();
+            expect(state.el).toHandle('click');
         });
 
         it('cross becomes visible after first click', function () {
@@ -81,7 +72,8 @@
         });
 
         it('coordinates are updated [offsetX is NOT set]', function () {
-            var event, posX, posY, cssLeft, cssTop;
+            var offset = state.el.offset(),
+                event, posX, posY, cssLeft, cssTop;
 
             // Set up of 'click' event.
             event = jQuery.Event(
@@ -91,12 +83,10 @@
                     pageX: 35.3, pageY: 42.7
                 }
             );
-            state.el[0].offsetLeft = 12;
-            state.el[0].offsetTop = 3;
 
             // Calculating the expected coordinates.
-            posX = event.pageX - state.el[0].offsetLeft;
-            posY = event.pageY - state.el[0].offsetTop;
+            posX = event.pageX - offset.left;
+            posY = event.pageY - offset.top;
 
             // Triggering 'click' event.
             jQuery(state.el).trigger(event);

common/lib/xmodule/xmodule/js/src/capa/imageinput.js

@@ -24,24 +24,19 @@ window.ImageInput = (function ($, undefined) {
     return ImageInput;
 
     function ImageInputConstructor(elementId) {
-        var _this = this;
+        this.el = $('#imageinput_' + elementId);
+        this.crossEl = $('#cross_' + elementId);
+        this.inputEl = $('#input_' + elementId);
 
-        this.elementId = elementId;
-
-        this.el = $('#imageinput_' + this.elementId);
-        this.crossEl = $('#cross_' + this.elementId);
-        this.inputEl = $('#input_' + this.elementId);
-
-        this.el.on('click', function (event) {
-            _this.clickHandler(event);
-        });
+        this.el.on('click', this.clickHandler.bind(this));
     }
 
     function clickHandler(event) {
-        var posX = event.offsetX ?
-                event.offsetX : event.pageX - this.el[0].offsetLeft,
+        var offset = this.el.offset(),
+            posX = event.offsetX ?
+                event.offsetX : event.pageX - offset.left,
             posY = event.offsetY ?
-                event.offsetY : event.pageY - this.el[0].offsetTop,
+                event.offsetY : event.pageY - offset.top,
 
             // To reduce differences between values returned by different kinds
             // of browsers, we round `posX` and `posY`.