Skip to content

E
edx-platform
Commit 7ebeccd4 by Valera Rozuvan
Options

Updating ImageInput JS code base.

parent a78400a8
Showing with 99 additions and 37 deletions
common/lib/capa/capa/templates/imageinput.html
<span> <span>
<input type="hidden" class="imageinput" src="${src}" name="input_${id}" id="input_${id}" value="${value}" /> <input
<div id="imageinput_${id}" onclick="image_input_click('${id}',event);" style = "background-image:url('${src}');width:${width}px;height:${height}px;position: relative; left: 0; top: 0;"> type="hidden"
<img src="${STATIC_URL}green-pointer.png" id="cross_${id}" style="position: absolute;top: ${gy}px;left: ${gx}px;" /> class="imageinput"
</div> src="${src}"
name="input_${id}"
id="input_${id}"
value="${value}"
/>
% if status == 'unsubmitted': <div
<span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}"> id="imageinput_${id}"
<span class="sr">Status: unanswered</span> style="background-image: url('${src}'); width: ${width}px; height: ${height}px; position: relative; left: 0; top: 0;"
</span> >
% elif status == 'correct': <img
<span class="correct" id="status_${id}" aria-describedby="input_${id}"> src="${STATIC_URL}green-pointer.png"
<span class="sr">Status: correct</span> id="cross_${id}"
</span> style="position: absolute; top: ${gy}px; left: ${gx}px;"
% elif status == 'incorrect': />
<span class="incorrect" id="status_${id}" aria-describedby="input_${id}"> </div>
<span class="sr">Status: incorrect</span>
</span> <script type="text/javascript" charset="utf-8">
% elif status == 'incomplete': (new ImageInput('${id}'));
<span class="incorrect" id="status_${id}" aria-describedby="input_${id}"> </script>
<span class="sr">Status: incorrect</span>
</span> % if status == 'unsubmitted':
% endif <span
class="unanswered"
style="display: inline-block;"
id="status_${id}"
aria-describedby="input_${id}"
>
<span class="sr">Status: unanswered</span>
</span>
% elif status == 'correct':
<span
class="correct"
id="status_${id}"
aria-describedby="input_${id}"
>
<span class="sr">Status: correct</span>
</span>
% elif status == 'incorrect':
<span
class="incorrect"
id="status_${id}"
aria-describedby="input_${id}"
>
<span class="sr">Status: incorrect</span>
</span>
% elif status == 'incomplete':
<span
class="incorrect"
id="status_${id}"
aria-describedby="input_${id}"
>
<span class="sr">Status: incorrect</span>
</span>
% endif
</span> </span>
common/lib/xmodule/xmodule/js/src/capa/imageinput.js
...@@ -13,24 +13,50 @@ ...@@ -13,24 +13,50 @@
* ~ Chinese Proverb * ~ Chinese Proverb
*/ */
window.image_input_click = function (id, event) { window.ImageInput = (function ($, undefined) {
var iiDiv = document.getElementById('imageinput_' + id), var ImageInput = ImageInputConstructor;
posX = event.offsetX ? event.offsetX : event.pageX - iiDiv.offsetLeft, ImageInput.prototype = {
posY = event.offsetY ? event.offsetY : event.pageY - iiDiv.offsetTop, constructor: ImageInputConstructor,
clickHandler: clickHandler
};
cross = document.getElementById('cross_' + id), return ImageInput;
// To reduce differences between values returned by different kinds of function ImageInputConstructor(elementId) {
// browsers, we round `posX` and `posY`. var _this = this;
//
// IE10: `posX` and `posY` - float.
// Chrome, FF: `posX` and `posY` - integers.
result = '[' + Math.round(posX) + ',' + Math.round(posY) + ']';
cross.style.left = (posX - 15) + 'px'; this.elementId = elementId;
cross.style.top = (posY - 15) + 'px'; this.el = $('#imageinput_' + elementId);
cross.style.visibility = 'visible';
document.getElementById('input_' + id).value = result; this.el.on('click', function (event) {
}; _this.clickHandler(event);
});
}
function clickHandler(event) {
var iiDiv = document.getElementById('imageinput_' + this.elementId),
posX = event.offsetX ?
event.offsetX : event.pageX - iiDiv.offsetLeft,
posY = event.offsetY ?
event.offsetY : event.pageY - iiDiv.offsetTop,
cross = document.getElementById('cross_' + this.elementId),
// To reduce differences between values returned by different kinds
// of browsers, we round `posX` and `posY`.
//
// IE10: `posX` and `posY` - float.
// Chrome, FF: `posX` and `posY` - integers.
result = '[' + Math.round(posX) + ',' + Math.round(posY) + ']';
console.log('[image_input_click]: event = ', event);
cross.style.left = (posX - 15) + 'px';
cross.style.top = (posY - 15) + 'px';
cross.style.visibility = 'visible';
document.getElementById('input_' + this.elementId).value = result;
}
}).call(this, window.jQuery);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment