User:Bernanke's Crossbow/ModifiedIME.js: Difference between revisions

Revision as of 22:30, 13 August 2022

Latest revision as of 01:29, 13 May 2023

(23 intermediate revisions by the same user not shown)

Line 43:

//Translate texts

translate() {

for (const trans of [
this.translations,
window.ime_translations])

}])

if (trans) for (const key in trans || {})

$('.ime_t_' + key).text(trans[key]);

},

std_handler(fct) {

return e => {

e.PreventDefaultpreventDefault();

fct(e);

};

},

Line 74 ⟶ 77:

makeDiv(id) {

const div = document.createElement('div');

if (id) div.id = id || "";

return div;

},

Line 113 ⟶ 116:

};

const dblClick = event.detail > 1;

if(dblClick) this.currentClicks.[dblClick ? 'left' : 'right'] = position;

else this.currentClicks.right = position;

ime.store(dblClick);

}

Line 120 ⟶ 122:

//Highlighted areas

const areas = Array();

areas.current = function () { return this[statethis.currentlyEditing]; };

areas.make = function (shape) {

mouse.listen();

this.push({ shape: shape, coords: [], link: '' });

statethis.currentlyEditing = this.length - 1;

this.update();

return areas.current();

Line 130 ⟶ 132:

areas.update = function () {

this.updateSelection();

this.edit(statethis.currentlyEditing);

updateResult();

};

areas.updateSelection = function () {

this.selection.children().remove();

for (letconst [i, =area] 0; i <of this.length; i++entries()) {

const areatitle = this[i],

title = (area.title || area.link || '') +
' [' + area.shape + ']';

$('<option>', { value: i })

.text(title)

.prop({ selected: i == statethis.currentlyEditing })

.appendTo(this.selection);

}

this.selection.prop('selectedIndex', statethis.currentlyEditing);

};

areas.edit = function (index) {

Line 149 ⟶ 152:

const area = this[index];

mouse.currentClicks = (area || {}).clicks || {};

if (area) {

statethis.currentlyEditing = index;

$('#imeProps').toggle(true);

Line 165 ⟶ 168:

mouse.relax();

// Remove element from this array

this.splice(statethis.currentlyEditing, 1);

if (state this.currentlyEditing >= Math.min(this.currentlyEditing, this.length - 1);

state.currentlyEditing = this.length - 1;

this.update();

if (statethis.currentlyEditing >= 0)

this.edit(statethis.currentlyEditing);

};

areas.draw = function () { // this is where the magic is done.

function markPoint(point, color) {

if (point) {

context.beginPath();

const arm = 8 / ime.scale;

ime.context.moveTobeginPath(point.x + arm, point.y);

ime.context.lineTomoveTo(point.x -+ arm, point.y);

ime.context.moveTolineTo(point.x - arm, point.y + arm);

ime.context.lineTomoveTo(point.x, point.y -+ arm);

ime.context.strokeStylelineTo(point.x, point.y =- colorarm);

ime.context.stroke()strokeStyle = color;

ime.context.closePathstroke();

ime.context.beginPathclosePath();

}

}

Line 189 ⟶ 191:

function drawPoly(coords) {

coords = coords.slice();

ime.context.moveTo(coords.shift(), coords.shift());

while (coords.length)

ime.context.lineTo(coords.shift(), coords.shift());

}

context.clearRect(0, 0, context.canvas.width / ime.scale, context.canvas.height / ime.scale); // prepare for a new day.

ime.context.clearRect(0, 0,

for (let ind = 0; ind < this.length; ++ind) {

ime.context.canvas.width / ime.scale,

const current = ind == state.currentlyEditing;

ime.context.fillStyle = current ? 'rgba(255,255,0,0canvas.4)'height :/ 'rgba(255,0,0,0ime.4scale)';

for (const [ind, area] =of this[ind];.entries()) {

const current = (ind == statethis.currentlyEditing);

ime.context.fillStyle =

'rgba(255,' + (current ? '255' : '0') + ',0,0.4)';

const coords = area.coords;

ime.context.beginPath();

switch (area.shape) {

case 'rect':

//Ignore spurious clicks outside

if (coords.length != 4) util.displayErr("Too many coordinates in rect");

if (utilscoords.length && util.all(coords)) //?

drawPoly([
coords[0], coords[1],
coords[0], coords[3],
coords[2], coords[3],
coords[2], coords[1]]);

break ]);

break;

case 'circle':

if (coords.length != 3)&& util.displayErrall("Too many coordinates in circ"coords));

//x,y,r,startAngle,endAngle

ime.context.arc(coords[0], coords[1], coords[2],
0, Math.PI * 2);

break;

case 'poly':

Line 216 ⟶ 227:

break;

}

ime.context.closePath();

ime.context.fill();

if (current) {

ime.context.strokeStyle = 'red';

ime.context.stroke();

}

}

markPoint(mouse.currentClicks.left, 'red');

if (this.current() && this.current().shape != 'poly')

markPoint(mouse.currentClicks.right, 'yellow');

};

Line 242 ⟶ 253:

case 'rect':

if (d.left) {

area.coords[0] = d.left.x;
area.coords[1] = d.left.y;

}

if (d.right) {

area.coords[2] = d.right.x;
area.coords[3] = d.right.y;

}

break;

case 'circle':

if (leftClick) {

area.coords[0] = d.left.x;
area.coords[1] = d.left.y;

}

if (full) {

var const
dx = d.left.x - d.right.x,

dy = d.left.y - d.right.y;

area.coords[2] = parseInt(Math.sqrthypot(dx * dx + dy *, dy));

}

break;

Line 268 ⟶ 283:

imports: {

make() {

for (const line of
document.ime.importText.value.split("\n")) {

const detect = {

rect: /^rect +(\d+) +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i,

Line 280 ⟶ 296:

area.coords = results.slice(1, 5);

area.link = results[5];

if (results[6])
area.title = results[6].substring(1);

}

else if (results = detect.circ.exec(line)) {

Line 286 ⟶ 303:

area.coords = results.slice(1, 4);

area.link = results[4];

if (results[5])
area.title = results[5].substring(1);

}

else if (results = detect.poly.exec(line)) {

Line 292 ⟶ 310:

area.coords = results[1].split(/\s+/);

area.link = results[2];

if (results[3])
area.title = results[3].substring(1);

}

}

Line 310 ⟶ 329:

}

};

if (document.getElementById('file'))

init1();

/*

Initialization, part 1: Tries to find image and uses a XMLHttpRequest

-Find image and

to download information about the image. When this is done (it's an

-Download info async via XMLHttpRequest. When complete...

asynchronous request) -...show a link to load the rest of ImageMapEdit (continuance)

using init2().

*/

}{

function init1() {

if const divFile = (document.getElementById('file'));

try {

constif (divFile) =try document.getElementById('file');{

if (!divFile) throw 'divFile';

const a = util.findHyperlink(divFile);

if (!a) throw 'a';

Line 344 ⟶ 359:

$('<a>', { id: 'imeLink' })

.css({ display: 'block' })

.text('&langle;Start⟨Start ImageMapEdit&rangle;ImageMapEdit⟩')

.click(util.std_handler(init2continuance))

.appendTo('#file');

}

}

});

} catch (e) {

util.displayErr(

catch (e) {

util.displayErr( 'ImageMapEdit initialization failed: "' +
e + '" was missing');

}

}

/*

Initialization, part 2: Triggered(triggered by an external link. Does some moving):

around of -Move the image in the logical structure of the page, then hides the

-Hides the link and finally puts the HTML code in place.

-Adds the ImageMapEdit HTML.

*/

function init2continuance() {

ime.trimUI();

Line 383 ⟶ 400:

img.id = 'imeImg';

img.style.border = 'none';

const handler = util.std_handler(e => e.stopPropagation());

img.oncontextmenu = function (e) {handler;

e.preventDefault();

e.stopPropagation();

};

// Internet Explorer needs this differently

Line 406 ⟶ 421:

.attr({ width: $img.width(), height: $img.height() })

.appendTo(divImeContainer);

ime.context = ime.jcanvas[0].getContext("2d");

$.extend(ime.context, {

fillStyle: 'rgba(255,255,0,0.4)',

strokeStyle: 'red',

Line 414 ⟶ 429:

}

);

ime.context.scale(ime.scale, ime.scale);

ime.jcanvas.click(mouse.fired.bind(mouse));

function handler(e) {

e.preventDefault();

e.stopPropagation();

}

ime.jcanvas.click(handler);

ime.jcanvas[0].oncontextmenu = img.oncontextmenu = handler;

Line 437 ⟶ 448:

function updateResult() {

const
arr = Array.from(document.ime.imageDescriptionPos;),

let imageDescriptionPos = arr[0].value;

for (let iarr.find(elt => 1;elt.checked) i <|| arr[0]).lengthvalue; i++) {

if (arr[i].checked) {

imageDescriptionPos = arr[i].value;

break;

}

}

const results = Array().concat(

['<imagemap>',

mw.config.get('wgPageName') + '|' +
document.ime.imageDescription.value,

''],

areas.map(area =>

area.shape + ' ' + area.coords.join(' ') +

' [[' + area.link +
(area.title ? '|' + area.title : '') + ']]'),

['',

'desc ' + imageDescriptionPos,

Line 459 ⟶ 468:

const preResult = document.getElementById('imeResult');

while (preResult.lastChild)

preResult.removeChild(preResult.lastChild);

Line 466 ⟶ 475:

preResult.appendChild(document.createElement('br'));

}

areaareas.updateSelection();

}

function updateInputs(fromAreas) {

function updateShape(selectors, coords) {

for (letconst [index, =selector] 0; index <of selectors.length; ++indexentries())

$(selectors[index]selector).val(coords && coords[index] || '');

}

Line 482 ⟶ 491:

switch (area.shape) {

case 'rect':

updateShape([
'#ime_areaRectLeft',
'#ime_areaRectTop',
'#ime_areaRectRight',
'#ime_areaRectBottom'
], coords);

break;

case 'circle':

updateShape([
'#ime_areaCircleX',
'#ime_areaCircleY',
'#ime_areaCircleRadius'
], coords);

break;

case 'poly':

Line 496 ⟶ 514:

function attachTemplate() {

{const
clicks = {

'.ime_t_rect': () => areas.make('rect'),

'.ime_t_circle': () => areas.make('circle'),

'.ime_t_poly': () => areas.make('poly'),

'.ime_t_deletearea': areas.remove.bind(areas),

'#imeImportShow': ime.imports.show.bind(ime.imports),

'#imeImportHide': ime.imports.hide.bind(ime.imports),

'.ime_t_import': ime.imports.make.bind(ime.imports),

'.ime_t_deletecoordinates': () => {

areas.current().coords = [];

mouse.currentClicks = {};

ime.store();

}

};, changes = {

'#ime_areaselector': function (e) { areas.edit($(this).prop('selectedIndex')); },

for (const id in clicks) $(id).click(utils.std_handler(clicks[id]));

areas.edit($(this).prop('selectedIndex'));

const changes = {

},

'#ime_areaselector': function (e) { areas.edit($(this).prop('selectedIndex')); },

'.ime_saveonchange': ime.store.bind(ime),

'.ime-updateresultsonchange': updateResult,

'#ime_areaLink': function () {
areas.current().link = $(this).val(); updateResult(); },

},

'#ime_areaTitle': function () { areas.current().title = $(this).val(); updateResult(); }

'#ime_areaTitle': function () {

};

'#ime_areaTitle': function () { areas.current().title = $(this).val(); updateResult(); }

for (const id in changes) $(id).change(changes[id]);

}

};

for (const [id, click] of Object.entries(clicks))

for (const id in clicks) $(id).click(utilsutil.std_handler(clicks[id]click));

for (const [id, inchange] changes)of $(id)Object.changeentries(changes[id]);)

$(id).change(change);

}

areas.selection = $('#ime_areaselector');

$('.ime-saveonchange').focusout(function () {

const
input = $(this);,

const ind = input.data('coord');,

const val = parseInt(input.val());,

const area = areas.current();,

const coords = area && area.coords;

if (coords &&
typeof (ind) == 'number' &&
typeof (val) == 'number' &&
!isNaN(val)) {

coords[ind] = val;

mouse.currentClicks = {};

Line 532 ⟶ 563:

}

});

mw.loader.using(['mediawiki.api', 'jquery.ui']).done(function () => {

$('#ime_areaLink').autocomplete({

source(request, response) {

Line 550 ⟶ 581:

// this is the one-(very long)-line version of the template, since
//mw lingerlinter does not allow use multiline delimiter (ascii 96), not even
//in the comment... the formatted version in comment below.

ime.templateHtml = '<form name="ime" action=""><fieldset style="margin:0.5ex;padding:0 1ex 1ex"><legend>ImageMapEdit</legend><fieldset style="float:left;margin:0 0.5ex 0.5ex;padding:0 1ex 1ex"><legend style="padding:0 0.5ex" class="ime_t_newarea">Create new area</legend><a style="padding:1px;background:white;color:darkblue" class="ime_t_rect">rect(angle)</a><br /><a style="padding:1px;background:white;color:darkblue" class="ime_t_circle">circle</a><br /><a style="padding:1px;background:white;color:darkblue" class="ime_t_poly">poly(gon)</a></fieldset><fieldset style="float:left;margin:0 0.5ex 0.5ex;padding:0 1ex 1ex"><legend style="padding:0 0.5ex" class="ime_t_editarea">Edit area</legend><select id="ime_areaselector" size="10" style="float:left;height:10em;margin:0.5ex;width:auto;min-width:18em;" ></select><div id="imeProps" style="float:left;margin:0.5ex;padding:0 1ex 1ex;display:none"><div style="float:left;margin:0.5ex;padding:0 1ex 1ex"><label for="ime_areaLink" class="ime_t_linktarget">Link target</label><br /><input id="ime_areaLink" name="areaLink" style="width:10em" class="ime-saveonchange" /><br /><label for="ime_areaTitle"><span class="ime_t_linktitle">Link title</span> (<span class="ime_t_optional">optional</span>)</label><br /><input id="ime_areaTitle" name="areaTitle" style="width:10em" class="ime-saveonchange" /></div><div id="imePropsRect" class="ime-prop ime-prop-rect" style="float:left;margin:0.5ex;padding:0 1ex 1ex;display:none"><label for="ime_areaRectLeft" class="ime_t_rectleft">First corner</label><br /><input id="ime_areaRectLeft" name="areaRectLeft" data-coord=0 class="ime-saveonchange" style="width:4em" /><input id="ime_areaRectTop" name="areaRectTop" data-coord=1 style="width:4em" class="ime-saveonchange" /><span class="ime_t_rectchoose1">Select with left mouse buttondouble-click</span><br/><label for="ime_areaRectRight" class="ime_t_rectright">Second corner</label><br /><input id="ime_areaRectRight" name="areaRectRight" data-coord=2 style="width:4em" class="ime-saveonchange" /><input id="ime_areaRectBottom" name="areaRectBottom" data-coord=3 style="width:4em" class="ime-saveonchange" /><span class="ime_t_rectchoose2">Select with rightleft mouse button</span></div><div id="imePropsCircle" class="ime-prop ime-prop-circle" style="float:left;margin:0.5ex;padding:0 1ex 1ex;display:none"><label class="ime_t_position">Position</label><br /><input name="areaCircleX" id="ime_areaCircleX" class="ime-saveonchange" data-coord=0 style="width:4em" /><input name="areaCircleY" id="ime_areaCircleY" style="width:4em" data-coord=1 class="ime-saveonchange" /><span class="ime_t_circlechoose1">Select with left mouse buttondouble-click</span><br /><label for="ime_areaCircleRadius" class="ime_t_radius">Radius</label><br /><input id="ime_areaCircleRadius" name="areaCircleRadius" data-coord=2 style="width:4em" class="ime-saveonchange" /><span class="ime_t_circlechoose2">Select with rightleft mouse button</span></div><div id="imePropsPoly" class="ime-prop ime-prop-poly" style="float:left;margin:0.5ex;padding:0 1ex 1ex;display:none"><label class="ime_t_coordinates">Coordinates</label><br /><p id="imePropsPolyCoords" style="font-size:0.8em;max-width:20em;"></p><a style="padding:1px;background:white;color:darkblue" class="ime_t_deletecoordinates">Delete all coordinates</a><br /><span class="ime_t_polychoose">Add new corner with left mouse buttondouble-click</span></div><div style="clear:both"></div><a style="padding:1px;background:white;color:darkblue" class="ime_t_deletearea">Delete selected area</a></div><div style="clear:both"></div></fieldset><div style="clear:both"></div><fieldset style="margin:0 0.5ex 0.5ex;padding:0 1ex 1ex"><legend class="ime_t_preferences">General preferences</legend><div style="float:left;margin-right:1em;"><label for="ime_imageDescription" class="ime_t_imagedescription">Image description</label><br /><input id="ime_imageDescription" name="imageDescription" class="ime-updateresultsonchange" /></div><div style="float:left"><label style="display:block" class="ime_t_infolinkposition">Position of information link</label><div style="float:left"><input type="radio" name="imageDescriptionPos" value="bottom-left" class="ime-updateresultsonchange" checked="checked" id="ime_imageDescriptionPos_bottomleft" /><label for="ime_imageDescriptionPos_bottomleft"><span class="ime_t_bottomleft">Bottom left</span> (<span class="ime_t_default">default</span>)</label></div><div style="float:left"><input type="radio" name="imageDescriptionPos" value="bottom-right" class="ime-updateresultsonchange" id="ime_imageDescriptionPos_bottomright" /><label for="ime_imageDescriptionPos_bottomright" class="ime_t_bottomright">Bottom right</label></div><div style="float:left"><input type="radio" name="imageDescriptionPos" value="top-left" class="ime-updateresultsonchange" id="ime_imageDescriptionPos_topleft" /><label for="ime_imageDescriptionPos_topleft" class="ime_t_topleft">Top left</label></div><div style="float:left"><input type="radio" name="imageDescriptionPos" value="top-right" class="ime-updateresultsonchange" id="ime_imageDescriptionPos_topright" /><label for="ime_imageDescriptionPos_topright" class="ime_t_topright">Top right</label></div><div style="float:left"><input type="radio" name="imageDescriptionPos" value="none" class="ime-updateresultsonchange" id="ime_imageDescriptionPos_none" /><label for="ime_imageDescriptionPos_none" class="ime_t_nolink">No link</label></div></div><div style="clear:both"></div></fieldset><fieldset style="margin:0.5ex;padding:0 1ex 1ex"><legend class="ime_t_importareas">Import areas from wikicode</legend><a style="padding:1px;background:white;color:darkblue" id="imeImportShow"><span class="ime_t_showtextbox">Show text box</span> &gt;</a><a style="padding:1px;background:white;color:darkblue;display:none" id="imeImportHide"><span class="ime_t_hidetextbox">Hide text box</span> &lt;</a><div id="imeImport" style="display:none"><textarea name="importText" style="width:100%;margin:0;height:10em;display:block"></textarea><a style="padding:1px;background:white;color:darkblue" class="ime_t_import">Import</a></div></fieldset><fieldset style="margin:0.5ex;padding:0 1ex 1ex"><legend class="ime_t_generatedwikicode">Generated wikicode</legend><div><code id="imeResult" style="display:block;line-height:1.2em"></code></div></fieldset></fieldset></form>';

});

/*

Line 588 ⟶ 621:

<input id="ime_areaRectTop" name="areaRectTop" data-coord=1 style="width:4em" class="ime-saveonchange" />

<span class="ime_t_rectchoose1">Select with left mouse buttondouble-click</span>

<br/>

<label for="ime_areaRectRight" class="ime_t_rectright">Second corner</label>

Line 594 ⟶ 627:

<input id="ime_areaRectRight" name="areaRectRight" data-coord=2 style="width:4em" class="ime-saveonchange" />

<input id="ime_areaRectBottom" name="areaRectBottom" data-coord=3 style="width:4em" class="ime-saveonchange" />

<span class="ime_t_rectchoose2">Select with rightleft mouse button</span>

</div>

Line 602 ⟶ 635:

<input name="areaCircleX" id="ime_areaCircleX" class="ime-saveonchange" data-coord=0 style="width:4em" />

<input name="areaCircleY" id="ime_areaCircleY" style="width:4em" data-coord=1 class="ime-saveonchange" />

<span class="ime_t_circlechoose1">Select with left mouse buttondouble-click</span>

<br />

Line 608 ⟶ 641:

<br />

<input id="ime_areaCircleRadius" name="areaCircleRadius" data-coord=2 style="width:4em" class="ime-saveonchange" />

<span class="ime_t_circlechoose2">Select with rightleft mouse button</span>

</div>

<div id="imePropsPoly" class="ime-prop ime-prop-poly" style="float:left;margin:0.5ex;padding:0 1ex 1ex;display:none">

Line 617 ⟶ 650:

<a style="padding:1px;background:white;color:darkblue" class="ime_t_deletecoordinates">Delete all coordinates</a>

<br />

<span class="ime_t_polychoose">Add new corner with left mouse buttondouble-click</span>

</div>

<div style="clear:both"></div>