Wikipedia

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

Browse history interactively
← Previous edit
Content deleted Content added
Saving current version
refactor some ifs
 
(26 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)
for (const key in trans || {})
$('.ime_t_' + key).text(trans[key]);
},
std_handler(fct) {
return e => {
e.PreventDefaultpreventDefault();
fct(e);
};
},
Line 71 ⟶ 74:
//Can't find a good ___location
else window.alert(message);
},
},
makeDiv(id) {
const div = document.createElement('div');
if (id) div.id = id || "";
return div;
},
Line 81 ⟶ 84:
//Look at the first child until it is none or <a>
let a = node;
while (a != null && a.nodeName.toUpperCase() != 'A')
a = a.firstChild;
return a;
Line 100 ⟶ 103:
ime.jcanvas.css({ cursor: 'crosshair' });
},
fired(event) {
if (!this.listening) return;
event.preventDefault();
event.stopPropagation();
const offset = $('#imeImg').offset();
const
x = event.pageX - offset.left,
y = event.pageY - offset.top;
const position = {
x: parseInt(x / ime.scale),
y: parseInt(y / ime.scale)
};
const dblClick = event.detail > 1;
this.currentClicks[dblClick ? 'left' : 'right'] = position;
ime.store(dblClick);
}
};
//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 113 ⟶ 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 132 ⟶ 152:
 
const area = this[index];
mouse.currentClicks = (area || {}).clicks || {};
if (area) {
statethis.currentlyEditing = index;
 
$('#imeProps').toggle(true);
Line 143 ⟶ 163:
updateInputs();
}
drawAreasthis.draw();
};
areas.remove = function () {
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) {
const arm = 8 / ime.scale;
ime.context.beginPath();
ime.context.moveTo(point.x + arm, point.y);
ime.context.lineTo(point.x - arm, point.y);
ime.context.moveTo(point.x, point.y + arm);
ime.context.lineTo(point.x, point.y - arm);
ime.context.strokeStyle = color;
ime.context.stroke();
ime.context.closePath();
}
}
 
function drawPoly(coords) {
coords = coords.slice();
ime.context.moveTo(coords.shift(), coords.shift());
while (coords.length)
ime.context.lineTo(coords.shift(), coords.shift());
}
 
// prepare for a new day.
ime.context.clearRect(0, 0,
ime.context.canvas.width / ime.scale,
ime.context.canvas.height / ime.scale);
for (const [ind, area] of this.entries()) {
const current = (ind == this.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 && util.all(coords))
drawPoly([
coords[0], coords[1],
coords[0], coords[3],
coords[2], coords[3],
coords[2], coords[1]
]);
break;
case 'circle':
if (coords.length && util.all(coords))
//x,y,r,startAngle,endAngle
ime.context.arc(coords[0], coords[1], coords[2],
0, Math.PI * 2);
break;
case 'poly':
drawPoly(coords);
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');
};
 
letconst ime = {
//Remove UI elements that might interfere
//(Wikimedia Commons 'annotations' feature)
Line 170 ⟶ 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 193 ⟶ 280:
updateInputs(full || area.shape == 'poly');
areas.update();
},
imports: {
make() {
for (const line of
document.ime.importText.value.split("\n")) {
const detect = {
rect: /^rect +(\d+) +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i,
circ: /^circle +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i,
poly: /^poly +(.*?) +\[\[([^|]*)(|(.*))?\]\]/i
};
 
let results;
if (results = detect.rect.exec(line)) {
const area = areas.make("rect");
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)) {
const area = areas.make("circle");
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)) {
const area = areas.make("poly");
area.coords = results[1].split(/\s+/);
area.link = results[2];
if (results[3])
area.title = results[3].substring(1);
}
}
areas.update();
this.hide();
},
show() {
$('#imeImport').show();
$('#imeImportShow').hide();
$('#imeImportHide').show();
},
hide() {
$('#imeImport').hide();
$('#imeImportShow').show();
$('#imeImportHide').hide();
}
}
};
 
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
-...show a link to load the rest of ImageMapEdit (continuance)
using init2().
*/
{
function init1() {
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 229 ⟶ 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 268 ⟶ 400:
img.id = 'imeImg';
img.style.border = 'none';
const handler = util.std_handler(e => e.stopPropagation());
img.oncontextmenu = function (e) {
img.oncontextmenu = handler;
e.preventDefault();
e.stopPropagation();
};
 
// Internet Explorer needs this differently
Line 291 ⟶ 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 299 ⟶ 429:
}
);
ime.context.scale(ime.scale, ime.scale);
ime.jcanvas.mousedownclick(onmousedownmouse.fired.bind(mouse));
function handler(e) {
e.preventDefault();
e.stopPropagation();
}
ime.jcanvas.click(handler);
ime.jcanvas[0].oncontextmenu = img.oncontextmenu = handler;
Line 319 ⟶ 445:
attachTemplate();
util.translate();
}
 
/*
Finds all elements in the current document with the specified class.
This function is apparently unused.
function ime_getElementsByClassName(className) {
// Hopefully the browser supports this natively
if (document.getElementsByClassName) {
return document.getElementsByClassName(className);
}
// Otherwise use the function defined by MediaWiki
return getElementsByClassName(document,'*',className)
}*/
 
 
/*
Function to define an object storing info on a clickable area for the
imagemap.
*/
 
/*
Browser invariant function to get the event "behind" the object passed
to event handlers.
Also apparently unused
function ime_eventGetButton(e) {
if (typeof(e.which)!='undefined') {
return e.which;
}
else {
return e.button;
}
}*/
 
function onmousedown(event) {
if (!mouse.listening) return;
event.preventDefault();
event.stopPropagation();
const offset = $('#imeImg').offset();
const x = event.pageX - offset.left,
y = event.pageY - offset.top;
const position = {
x: parseInt(x / ime.scale),
y: parseInt(y / ime.scale)
};
const leftButton = event.which == 1, rightButton = event.which > 1;
if (leftButton) mouse.currentClicks.left = position;
if (rightButton) mouse.currentClicks.right = position;
ime.store(leftButton);
}
 
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 393 ⟶ 468:
 
const preResult = document.getElementById('imeResult');
while (preResult.lastChild)
preResult.removeChild(preResult.lastChild);
 
Line 400 ⟶ 475:
preResult.appendChild(document.createElement('br'));
}
areaareas.updateSelection();
}
 
function drawAreas() { // this is where the magic is done.
 
function markPoint(point, color) {
if (point) {
context.beginPath();
const arm = 8 / ime.scale;
context.moveTo(point.x + arm, point.y);
context.lineTo(point.x - arm, point.y);
context.moveTo(point.x, point.y + arm);
context.lineTo(point.x, point.y - arm);
context.strokeStyle = color;
context.stroke();
context.closePath();
}
}
 
function drawPoly(coords) {
coords = coords.slice();
context.moveTo(coords.shift(), coords.shift());
while (coords.length)
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.
for (let ind = 0; ind < areas.length; ++ind) {
const current = ind == state.currentlyEditing;
context.fillStyle = current ? 'rgba(255,255,0,0.4)' : 'rgba(255,0,0,0.4)';
const area = areas[ind];
const coords = area.coords;
context.beginPath();
switch (area.shape) {
case 'rect':
if (coords.length != 4) util.displayErr("Too many coordinates in rect");
if (utils.all(coords)) //?
drawPoly([coords[0], coords[1], coords[0], coords[3], coords[2], coords[3], coords[2], coords[1]]);
break;
case 'circle':
if (coords.length != 3) util.displayErr("Too many coordinates in circ");
//x,y,r,startAngle,endAngle
context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2);
break;
case 'poly':
drawPoly(coords);
break;
}
context.closePath();
context.fill();
if (current) {
context.strokeStyle = 'red';
context.stroke();
}
}
markPoint(mouse.currentClicks.left, 'red');
if (areas.current().shape != 'poly')
markPoint(mouse.currentClicks.right, 'yellow');
}
 
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 470 ⟶ 488:
}
 
const area = areas.current(), coords = area.coords;
const coords = area.coords;
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 487 ⟶ 513:
}
 
function ime_importLinesattachTemplate() {
{const
var text = document.ime.importText.value;
clicks = {
var lines = text.split("\n");
'.ime_t_rect': () => areas.make('rect'),
 
'.ime_t_circle': () => areas.make('circle'),
for (var i = 0; i < lines.length; i++) {
'.ime_t_poly': () => areas.make('poly'),
var rectMatch = /^rect +(\d+) +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;
'.ime_t_deletearea': areas.remove.bind(areas),
var circleMatch = /^circle +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;
'#imeImportShow': ime.imports.show.bind(ime.imports),
var polyMatch = /^poly +(.*?) +\[\[([^|]*)(|(.*))?\]\]/i;
'#imeImportHide': ime.imports.hide.bind(ime.imports),
 
'.ime_t_import': ime.imports.make.bind(ime.imports),
var line = lines[i];
'.ime_t_deletecoordinates': () => {
 
areas.current().coords = [];
if (rectMatch.test(line)) {
mouse.currentClicks = {};
var results = rectMatch.exec(line);
var area = areas ime.makestore("rect");
}
area.coords = results.slice(1, 5);
area.link}, changes = results[5];{
'#ime_areaselector': function (e) {
if (results[6]) area.title = results[6].substring(1);
areas.edit($(this).prop('selectedIndex'));
}
},
else if (circleMatch.test(line)) {
'.ime_saveonchange': ime.store.bind(ime),
var results = circleMatch.exec(line);
'.ime-updateresultsonchange': updateResult,
var area = areas.make("circle");
'#ime_areaLink': function () {
area.coords = results.slice(1, 4);
area areas.current().link = results[4]$(this).val(); updateResult();
},
if (results[5]) area.title = results[5].substring(1);
'#ime_areaTitle': function () {
}
areas.current().title = $(this).val(); updateResult();
else if (polyMatch.test(line)) {
}
var results = polyMatch.exec(line);
};
var area = areas.make("poly");
for (const [id, click] of Object.entries(clicks))
area.coords = results[1].split(/\s+/);
$(id).click(util.std_handler(click));
area.link = results[2];
for (const [id, change] of Object.entries(changes))
if (results[3]) area.title = results[3].substring(1);
$(id).change(change);
}
}
areas.update();
ime_hideImport();
}
 
function ime_showImport() {
$('#imeImport').show();
$('#imeImportShow').hide();
$('#imeImportHide').show();
}
 
function ime_hideImport() {
$('#imeImport').hide();
$('#imeImportShow').show();
$('#imeImportHide').hide();
}
 
function attachTemplate() {
$('.ime_t_rect').click(function (e) { e.preventDefault(); areas.make('rect'); });
$('.ime_t_circle').click(function (e) { e.preventDefault(); areas.make('circle'); });
$('.ime_t_poly').click(function (e) { e.preventDefault(); areas.make('poly'); });
$('#ime_areaselector').change(function (e) { areas.edit($(this).prop('selectedIndex')); });
$('.ime_t_deletearea').click(function (e) { e.preventDefault(); areas.remove(); });
$('#imeImportShow').click(function (e) { e.preventDefault(); ime_showImport(); });
$('#imeImportHide').click(function (e) { e.preventDefault(); ime_hideImport(); });
$('.ime_t_import').click(function (e) { e.preventDefault(); ime_importLines(); });
$('.ime_saveonchange').change(ime.store);
$('.ime-updateresultsonchange').change(updateResult);
$('#ime_areaLink').change(function () { areas.current().link = $(this).val(); updateResult(); });
$('#ime_areaTitle').change(function () { areas.current().title = $(this).val(); updateResult(); });
$('.ime_t_deletecoordinates').click(function (e) {
e.preventDefault();
areas.current().coords = [];
mouse.currentClicks = {};
ime.store();
});
areas.selection = $('#ime_areaselector');
$('.ime-saveonchange').focusout(function () {
var const
input = $(this);,
var ind = input.data('coord');,
var val = parseInt(input.val());,
var area = areas.current();,
var coords = area && area.coords;
if (coords &&
 
if (coords && typeof (ind) == 'number' &&
typeof (val) == 'number' &&
!isNaN(val)) {
coords[ind] = val;
mouse.currentClicks = {};
drawAreasareas.draw();
}
});
mw.loader.using(['mediawiki.api', 'jquery.ui']).done(function () => {
$('#ime_areaLink').autocomplete({
source: function (request, response) {
new mw.Api().get({
action: 'opensearch',
Line 577 ⟶ 571:
namespace: 0,
limit: 10
}).done(function (data) => {
if (data && data.length > 1)
response(data[1]);
Line 587 ⟶ 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 625 ⟶ 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 631 ⟶ 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 639 ⟶ 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 645 ⟶ 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 654 ⟶ 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>
Retrieved from "https://en.wikipedia.org/wiki/User:Bernanke%27s_Crossbow/ModifiedIME.js"