/* Coordinatizing an HTML
image map can be hard for you.
What vision is made from numbers?
This script lets you see as you do.
Version as of eight/thirteen/twenty-two.
Original script by Peter Schlömer
modified by [[:he:user:קיפודנחש]]
and also Bernanke's Crossbow.
The original script
displays a copyright warning.
It says: (https://tools.wmflabs.org/imagemapedit/ime.js)
Copyright (c) 2007-2013 Peter Schlömer
Released under the following licenses (to make reuse in other Wikis
easier):
GNU General Public License (GPL), version 2
GNU Free Documentatin Licence (GFDL), version 1.2 or later
Creative Commons Attribution ShareAlike (CC-by-sa), version 2 or later
*/
//<nowiki>
/*jshint esversion: 6 */
if (mw.config.get('wgNamespaceNumber') == 6 &&
mw.config.get('wgAction') == 'view')
$(function () {
"use strict";
//Ensure idempotence, in case (eg)
//[[m:Special:MyPage/global.js]] and main wiki both activate the script
if (window.mw_ime_running) return;
window.mw_ime_running = true;
//General utilities
const util = {
//Localize error messages to your favorite language
translations: {
error_imagenotfound:
'ImageMapEdit: Could not find image in page structure.'
},
//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.PreventDefault();
fct();
}
},
makeDiv(id) {
const div = document.createElement('div');
if (id) div.id = id;
return div;
},
//Try to find an <a> tag within the specified HTML document node.
findHyperlink(node) {
//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;
},
}, state = { //Interaction state --- stuff that's likely to change
currentlyEditing: -1
};
//Keep track of recent clicks
const mouse = {
listening: false,
currentClicks: {},
relax() {
this.listening = false;
this.currentClicks = {};
ime.jcanvas.css({ cursor: '' });
},
listen() {
this.listening = true;
ime.jcanvas.css({ cursor: 'crosshair' });
},
};
//Highlighted areas
const areas = Array();
areas.make = function(shape) {
mouse.listen();
areas.push({ shape: shape, coords: [], link: '' });
state.currentlyEditing = areas.length - 1;
areas.update();
return currentArea();
};
areas.update = function () {
this.updateSelection();
areas.edit(state.currentlyEditing);
updateResult();
};
areas.updateSelection = function () {
this.selection.children().remove();
for (let i = 0; i < areas.length; i++) {
const area = areas[i],
title = (area.title || area.link || '') + ' [' + area.shape + ']';
$('<option>', { value: i })
.text(title)
.prop({ selected: i == state.currentlyEditing })
.appendTo(this.selection);
}
this.selection.prop('selectedIndex', state.currentlyEditing);
};
areas.edit = function (index) {
$('#imeProps').toggle(false);
const area = areas[index];
mouse.currentClicks = area.clicks || {};
if (area) {
state.currentlyEditing = index;
$('#imeProps').toggle(true);
$('.ime-prop').toggle(false);
$('.ime-prop-' + area.shape).toggle(true);
mouse.listen();
updateInputs();
}
drawAreas();
}
let ime = {
//Remove UI elements that might interfere
//(Wikimedia Commons 'annotations' feature)
trimUI() { $('#ImageAnnotationAddButton').remove() },
};
if (document.getElementById('file'))
init1();
/*
Initialization, part 1: Tries to find image and uses a XMLHttpRequest
to download information about the image. When this is done (it's an
asynchronous request) show a link to load the rest of ImageMapEdit
using init2().
*/
function init1() {
try {
const divFile = document.getElementById('file');
if (!divFile) throw 'divFile';
const a = util.findHyperlink(divFile);
if (!a) throw 'a';
const img = a.firstChild;
if (!img) throw 'img';
const url =
mw.config.get('wgScriptPath') +
'/api.php?format=json&action=query&prop=imageinfo&' +
'iiprop=size&titles=' + mw.config.get('wgPageName');
$.get(url, data => {
if (typeof data.query.pages != "undefined") {
const imageProperties =
data.query.pages[Object.keys(data.query.pages)[0]];
const imageInfo = imageProperties.imageinfo;
if (imageInfo) {
ime.width = imageInfo[0].width;
ime.height = imageInfo[0].height;
ime.scale = img.width / ime.width;
// Show 'show ImageMapEdit' button now
$('<a>', { id: 'imeLink' })
.css({ display: 'block' })
.text('⟨Start ImageMapEdit⟩')
.click(util.std_handler(init2))
.appendTo('#file');
}
}
});
}
catch (e) {
const message =
'ImageMapEdit initialization failed: "' + e + '" was missing';
const jqFile = $('#file'); if (jqFile.length !== 0) {
const errBox =
$('<p>')
.css({
'color': 'darkred',
'background': 'white',
'border': '1px solid darkred',
'padding': '1ex'
})
.text(message);
const jqIme = $('#ime');
if (jqIme !== 0) jqIme.before(errBox);
else errBox.appendTo(jqFile);
}
else window.alert(message);
}
}
/*
Initialization, part 2: Triggered by an external link. Does some moving
around of the image in the logical structure of the page, then hides the
link and finally puts the HTML code in place.
*/
function init2() {
ime.trimUI();
const divFile = document.getElementById('file'),
tempNode = divFile.firstChild,
a = util.findHyperlink(tempNode),
img = a.firstChild,
$img = $(img),
divImeContainer = util.makeDiv('imeContainer');
divImeContainer.style.position = 'relative';
// Move image from within link to outside
a.removeChild(img);
divFile.insertBefore(divImeContainer, tempNode);
divFile.removeChild(tempNode);
// Fix for rtl wikis, thanks to hewiki user "קיפודנחש"
divFile.style.direction = 'ltr';
img.id = 'imeImg';
img.style.border = 'none';
img.oncontextmenu = function (e) {
e.preventDefault();
e.stopPropagation();
};
// Internet Explorer needs this differently
divImeContainer.style.overflow =
(typeof (navigator.userAgent) != 'undefined' &&
navigator.userAgent.match('/MSIE/')) ?
'none' : 'auto';
divImeContainer.appendChild(img);
ime.jcanvas = $('<canvas>')
.css({
position: 'absolute',
width: $img.width() + 'px',
height: $img.height() + 'px',
border: 0,
top: 0,
left: 0
})
.attr({ width: $img.width(), height: $img.height() })
.appendTo(divImeContainer);
context = ime.jcanvas[0].getContext("2d");
$.extend(context, {
fillStyle: 'rgba(255,255,0,0.4)',
strokeStyle: 'red',
lineJoin: 'round',
lineWidth: 1.5 / ime.scale
}
);
context.scale(ime.scale, ime.scale);
ime.jcanvas.mousedown(onmousedown);
function handler(e) {
e.preventDefault();
e.stopPropagation();
}
ime.jcanvas.click(handler);
ime.jcanvas[0].oncontextmenu = img.oncontextmenu = handler;
const divIme = util.makeDiv('ime');
divFile.appendChild(divIme);
// Hide the link now
document.getElementById('imeLink').style.display = 'none';
// Disable image context menu so right click can be used for events
img.oncontextmenu = e => ((e.cancelBubble = true), false);
$(divIme).html(ime.templateHtml);
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_saveArea(leftButton);
}
function updateResult() {
var arr = document.ime.imageDescriptionPos;
var imageDescriptionPos = arr[0].value;
for (var i = 1; i < arr.length; 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,
'</imagemap>']
);
const preResult = document.getElementById('imeResult');
while (preResult.lastChild)
preResult.removeChild(preResult.lastChild);
for (const result of results) {
preResult.appendChild(document.createTextNode(result));
preResult.appendChild(document.createElement('br'));
}
area.updateSelection();
}
function drawAreas() { // this is where the magic is done.
function markPoint(point, color) {
if (point) {
context.beginPath();
var 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 (var ind in areas) {
var current = ind == state.currentlyEditing;
context.fillStyle = current ? 'rgba(255,255,0,0.4)' : 'rgba(255,0,0,0.4)';
var area = areas[ind];
var coords = area.coords;
context.beginPath();
switch (area.shape) {
case 'rect':
var complete = true;
for (var i = 0; i < 4; i++) complete = complete && coords[i];
if (complete)
drawPoly([coords[0], coords[1], coords[0], coords[3], coords[2], coords[3], coords[2], coords[1]]); break;
case 'circle': if (coords.length == 3) {
context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2);
}
break;//x,y,r,startAngle,endAngle
case 'poly': drawPoly(coords);
break;
}
context.closePath();
context.fill();
if (current) {
context.strokeStyle = 'red';
context.stroke();
}
}
markPoint(mouse.currentClicks.left, 'red');
if (currentArea().shape != 'poly') markPoint(mouse.currentClicks.right, 'yellow');
}
function ime_deleteArea() {
mouse.relax();
// Remove element from areas array
areas.splice(state.currentlyEditing, 1);
if (state.currentlyEditing >= areas.length) {
state.currentlyEditing = areas.length - 1;
}
areas.update();
if (state.currentlyEditing >= 0) {
areas.edit(state.currentlyEditing);
}
}
function updateInputs(fromAreas) {
function updateRectInputs(coords) {
var lx = $('#ime_areaRectLeft'),
ly = $('#ime_areaRectTop'),
rx = $('#ime_areaRectRight'),
ry = $('#ime_areaRectBottom');
lx.val(coords && coords[0] || '');
ly.val(coords && coords[1] || '');
rx.val(coords && coords[2] || '');
ry.val(coords && coords[3] || '');
}
function updateCircInputs(coords) {
var x = $('#ime_areaCircleX'),
y = $('#ime_areaCircleY'),
radius = $('#ime_areaCircleRadius')
x.val(coords && coords[0] || '');
y.val(coords && coords[1] || '');
radius.val(coords && coords[2] || '');
}
function updatePolyInputs(coords) {
$('#imePropsPolyCoords').text(coords.join(', '));
}
var area = currentArea();
var coords = area.coords;
switch (area.shape) {
case 'rect': updateRectInputs(coords); break;
case 'circle': updateCircInputs(coords); break;
case 'poly': updatePolyInputs(coords); break;
}
$('#ime_areaLink').val(area.link || '');
$('#ime_areaTitle').val(area.title || '');
}
function currentArea() {
return areas[state.currentlyEditing];
}
function ime_saveArea(leftClick) {
var area = currentArea();
area.link = document.ime.areaLink.value;
area.title = document.ime.areaTitle.value;
var d = area.clicks = $.extend({}, mouse.currentClicks);
var full = d.left && d.right;
switch (area.shape) {
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 dx = d.left.x - d.right.x,
dy = d.left.y - d.right.y;
area.coords[2] = parseInt(Math.sqrt(dx * dx + dy * dy));
}
break;
case 'poly':
if (leftClick && d.left) {
area.coords.push(d.left.x, d.left.y);
}
break;
}
updateInputs(full || area.shape == 'poly');
areas.update();
}
function ime_importLines() {
var text = document.ime.importText.value;
var lines = text.split("\n");
for (var i = 0; i < lines.length; i++) {
var rectMatch = /^rect +(\d+) +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;
var circleMatch = /^circle +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;
var polyMatch = /^poly +(.*?) +\[\[([^|]*)(|(.*))?\]\]/i;
var line = lines[i];
if (rectMatch.test(line)) {
var results = rectMatch.exec(line);
var 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 (circleMatch.test(line)) {
var results = circleMatch.exec(line);
var 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 (polyMatch.test(line)) {
var results = polyMatch.exec(line);
var 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();
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(); ime_deleteArea(); });
$('#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_saveArea);
$('.ime-updateresultsonchange').change(updateResult);
$('#ime_areaLink').change(function () { currentArea().link = $(this).val(); updateResult(); });
$('#ime_areaTitle').change(function () { currentArea().title = $(this).val(); updateResult(); });
$('.ime_t_deletecoordinates').click(function (e) {
e.preventDefault();
currentArea().coords = [];
mouse.currentClicks = {};
ime_saveArea();
});
areas.selection = $('#ime_areaselector');
$('.ime-saveonchange').focusout(function () {
var input = $(this);
var ind = input.data('coord');
var val = parseInt(input.val());
var area = currentArea();
var coords = area && area.coords;
if (coords && typeof (ind) == 'number' && typeof (val) == 'number' && !isNaN(val)) {
coords[ind] = val;
mouse.currentClicks = {};
drawAreas();
}
});
mw.loader.using(['mediawiki.api', 'jquery.ui']).done(function () {
$('#ime_areaLink').autocomplete({
source: function (request, response) {
new mw.Api().get({
action: 'opensearch',
search: request.term,
namespace: 0,
limit: 10
}).done(function (data) {
if (data && data.length > 1)
response(data[1]);
}); // done
} // source
}); // autocomplete
}); // using
}
// this is the one-(very long)-line version of the template, since mw linger 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 button</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 right 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 button</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 right 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 button</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> ></a><a style="padding:1px;background:white;color:darkblue;display:none" id="imeImportHide"><span class="ime_t_hidetextbox">Hide text box</span> <</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>';
});
/*
<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 button</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 right 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 button</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 right 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 button</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> ></a>
<a style="padding:1px;background:white;color:darkblue;display:none" id="imeImportHide"><span class="ime_t_hidetextbox">Hide text box</span> <</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>
`;
});
*/
//</nowiki>
