8480dbc228
* fix: eslint operator-linebreak issue * fix: eslint quotes issue * fix: react jsx indent and props issues * fix: eslint trailing spaces issues * fix: eslint line around directives issue * fix: eslint semi rule * fix: eslint newline per chain rule * fix: eslint space infix ops rule * fix: eslint space-in-parens issue * fix: eslint space before function paren issue * fix: eslint space before blocks issue * fix: eslint arrow body style issue * fix: eslint dot-location issue * fix: eslint quotes issue * fix: eslint quote props issue * fix: eslint operator assignment issue * fix: eslint new line after import issue * fix: indent issues * fix: operator assignment issue * fix: all autofixable eslint issues * fix: all react related fixable issues * fix: autofixable eslint issues * chore: remove all template literals * fix: remaining autofixable issues * chore: apply amnesty on all existing issues * fix: failing xss-lint issues * refactor: apply amnesty on remaining issues * refactor: apply amnesty on new issues * fix: remove file level suppressions * refactor: apply amnesty on new issues
58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
/**
|
|
* Simple image input
|
|
*
|
|
*
|
|
* Click on image. Update the coordinates of a dot on the image.
|
|
* The new coordinates are the location of the click.
|
|
*/
|
|
|
|
/**
|
|
* 'The wise adapt themselves to circumstances, as water molds itself to the
|
|
* pitcher.'
|
|
*
|
|
* ~ Chinese Proverb
|
|
*/
|
|
|
|
// eslint-disable-next-line no-shadow-restricted-names
|
|
window.ImageInput = (function($, undefined) {
|
|
var ImageInput = ImageInputConstructor;
|
|
|
|
ImageInput.prototype = {
|
|
constructor: ImageInputConstructor,
|
|
clickHandler: clickHandler
|
|
};
|
|
|
|
return ImageInput;
|
|
|
|
function ImageInputConstructor(elementId) {
|
|
this.el = $('#imageinput_' + elementId);
|
|
this.crossEl = $('#cross_' + elementId);
|
|
this.inputEl = $('#input_' + elementId);
|
|
|
|
this.el.on('click', this.clickHandler.bind(this));
|
|
}
|
|
|
|
function clickHandler(event) {
|
|
var offset = this.el.offset(),
|
|
posX = event.offsetX
|
|
? event.offsetX : event.pageX - offset.left,
|
|
posY = event.offsetY
|
|
? event.offsetY : event.pageY - offset.top,
|
|
|
|
// 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) + ']';
|
|
|
|
this.crossEl.css({
|
|
left: posX - 15,
|
|
top: posY - 15,
|
|
visibility: 'visible'
|
|
});
|
|
|
|
this.inputEl.val(result);
|
|
}
|
|
}).call(this, window.jQuery);
|