|
/* 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.
//<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;
let currentClicks = {}, listenToMouse = false;
let img, $img, context, jcanvas, selectArea;
let ime = {
/*width:undefined,
height:undefined,
scale:undefined,
templateHTML:undefined,*/
//Localize error messages to your favorite language
translations: {
error_imagenotfound:
'ImageMapEdit: Could not find image in page structure.'
},
areas: Array(),
currentlyEditing: -1,
make_div: id => {
const div = document.createElement('div');
if (id) div.id = id;
return div;
},
std_handler: fct => function(e) {
e.PreventDefault();
fct();
},
//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;
},
//Remove UI elements that might interfere
//(Wikimedia Commons 'annotations' feature)
trimUI: () => $('#ImageAnnotationAddButton').remove(),
//Translate texts
translate: () => {
for(const trans of [ime.translations, window.ime_translations])
if (trans) for (const key in trans)
$('.ime_t_' + key).text(trans[key]);
}
};
//General utilities
if (document.getElementById('file'))
const util = {
init1();
//Localize error messages to your favorite language
translations: {
/*
error_imagenotfound:
Initialization, part 1: Tries to find image and uses a XMLHttpRequest
'ImageMapEdit: Could not find image in page structure.'
to download information about the image. When this is done (it's an
},
asynchronous request) show a link to load the rest of ImageMapEdit
//Translate texts
using init2().
translate() {
*/
for (const trans of [
function init1() {
this.translations,
const err_msg = (() => {
window.ime_translations
const divFile = document.getElementById('file'); if (divFile) {
])
const a = ime.findHyperlink(divFile); if (a) {
for (const imgkey =in a.firstChild;trans if (img)|| {})
$('.ime_t_' + key).text(trans[key]);
const url =
},
mw.config.get('wgScriptPath') +
std_handler(fct) {
'/api.php?format=json&action=query&prop=imageinfo&' +
return e => {
'iiprop=size&titles=' + mw.config.get('wgPageName');
e.preventDefault();
$.get(url, data => {
fct(e);
if(typeof data.query.pages != "undefined") {
};
const imageProperties =
},
data.query.pages[Object.keys(data.query.pages)[0]];
displayErr(message) {
const imageInfo = imageProperties.imageinfo;
//First try on screen
if (imageInfo) {
const jqFile = $('#file'); if (jqFile.length !== 0) {
ime.width = imageInfo[0].width;
const errBox =
ime.height = imageInfo[0].height;
$('<p>')
ime.scale = img.width/ime.width;
.css({
// Show 'show ImageMapEdit' button now
'color': 'darkred',
$('<a>', { id: 'imeLink'})
'background': 'white',
.css({ display: 'block' })
'border': '1px solid darkred',
.text('⟨Start ImageMapEdit⟩')
'padding': '1ex'
.click(ime.std_handler(init2))
})
.appendTo('#file');
.text(message);
}
const jqIme = $('#ime');
if (jqIme !== 0) jqIme.before(errBox);
else errBox.appendTo(jqFile);
}
//Can't find a good ___location
});
else window.alert(message);
return null; //Success => no error
},
}else return ' (init1,img=null)';
makeDiv(id) {
}else return ' (init1,a=null)';
const div = document.createElement('div');
}else return ' (init1,divFile=null)';
div.id = id || "";
})();
return div;
if(err_msg)
},
ime_error(ime.translations['error_imagenotfound'] + err_msg);
//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;
Initialization, part 2: Triggered by an external link. Does some moving
while (a && a.nodeName.toUpperCase() != 'A')
around of the image in the logical structure of the page, then hides the
a = a.firstChild;
link and finally puts the HTML code in place.
return a;
*/
},
function init2() {
all(arr) { return arr.reduce((a, b) => a && b); }
ime.trimUI();
};
//Keep track of recent clicks
const divFile = document.getElementById('file'),
const mouse = {
tempNode = divFile.firstChild,
listening: false,
a = ime.findHyperlink(tempNode),
currentClicks: {},
divImeContainer = ime.make_div('imeContainer');
relax() {
this.listening = false;
img = a.firstChild;
this.currentClicks = {};
$img = $(img);
ime.jcanvas.css({ cursor: '' });
},
divImeContainer.style.position = 'relative';
listen() {
this.listening = true;
// Move image from within link to outside
ime.jcanvas.css({ cursor: 'crosshair' });
a.removeChild(img);
},
fired(event) {
divFile.insertBefore(divImeContainer,tempNode);
if (!this.listening) return;
divFile.removeChild(tempNode);
event.preventDefault();
// Fix for rtl wikis, thanks to hewiki user "קיפודנחש"
event.stopPropagation();
divFile.style.direction = 'ltr';
const offset = $('#imeImg').offset();
const
img.id = 'imeImg';
x = event.pageX - offset.left,
img.style.border = 'none';
y = event.pageY - offset.top;
img.oncontextmenu = function(e){
const position = {
e.preventDefault();
x: parseInt(x / ime.scale),
e.stopPropagation();
y: parseInt(y / ime.scale)
};
const dblClick = event.detail > 1;
this.currentClicks[dblClick ? 'left' : 'right'] = position;
ime.store(dblClick);
}
};
//Highlighted areas
const areas = Array();
// Internet Explorer needs this differently
areas.current = function () { return this[this.currentlyEditing]; };
divImeContainer.style.overflow =
areas.make = function (shape) {
(typeof(navigator.userAgent) != 'undefined' &&
mouse.listen();
navigator.userAgent.match('/MSIE/')) ?
this.push({ shape: shape, coords: [], link: '' });
'none' : 'auto';
this.currentlyEditing = this.length - 1;
divImeContainer.appendChild(img);
this.update();
return areas.current();
jcanvas = $('<canvas>')
};
.css( {
areas.update = function () {
position: 'absolute',
this.updateSelection();
width: $img.width() + 'px',
this.edit(this.currentlyEditing);
height: $img.height() + 'px',
updateResult();
border: 0,
};
top:0,
areas.updateSelection = function () {
left:0
this.selection.children().remove();
})
for (const [i, area] of this.entries()) {
.attr({width: $img.width(), height: $img.height()})
const title =
.appendTo(divImeContainer);
(area.title || area.link || '') +
context = jcanvas[0].getContext("2d");
' [' + area.shape + ']';
$.extend(context, {
$('<option>', { value: i })
fillStyle: 'rgba(255,255,0,0.4)',
.text(title)
strokeStyle: 'red',
.prop({ selected: i == this.currentlyEditing })
lineJoin: 'round',
.appendTo(this.selection);
lineWidth: 1.5/ime.scale}
);}
this.selection.prop('selectedIndex', this.currentlyEditing);
context.scale(ime.scale, ime.scale);
};
jcanvas.mousedown(onmousedown);
areas.edit = function handler(eindex) {
$('#imeProps').toggle(false);
e.preventDefault();
e.stopPropagation();
}
jcanvas.click(handler);
jcanvas[0].oncontextmenu = img.oncontextmenu = handler;
const divIme = ime.make_div('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();
ime.translate();
}
const area = this[index];
/*
mouse.currentClicks = (area || {}).clicks || {};
Finds all elements in the current document with the specified class.
if (area) {
This function is apparently unused.
this.currentlyEditing = index;
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)
}*/
$('#imeProps').toggle(true);
/*
$('.ime-prop').toggle(false);
Display an error message, either by putting it on the page or - if the
$('.ime-prop-' + area.shape).toggle(true);
place to put it does not exist - by showing an alert box.
*/
function ime_error(message) {
var jqFile = $('#file');
var jqIme = $('#ime');
mouse.listen();
if (jqFile.length !== 0) {
updateInputs();
var jqImeError = $('<p>')
.css({ }
this.draw();
'color' : 'darkred',
};
'background' : 'white',
areas.remove = function () {
'border' : '1px solid darkred',
mouse.relax();
'padding' : '1ex'
// Remove element from this array
})
this.splice(this.currentlyEditing, 1);
.text(message)
this.currentlyEditing = Math.min(this.currentlyEditing, this.length - 1);
this.update();
if (this.currentlyEditing >= 0)
this.edit(this.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) {
if (jqIme !== 0) {
coords = coords.slice();
jqIme.before(jqImeError);
ime.context.moveTo(coords.shift(), coords.shift());
} else {
while (coords.length)
jqImeError.appendTo(jqFile);
ime.context.lineTo(coords.shift(), coords.shift());
}
}
else {
window.alert(message);
}
}
// 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');
};
const ime = {
/*
//Remove UI elements that might interfere
Function to define an object storing info on a clickable area for the
//(Wikimedia Commons 'annotations' feature)
imagemap.
trimUI() { $('#ImageAnnotationAddButton').remove(); },
*/
store(leftClick) {
const area = areas.current();
area.link = document.ime.areaLink.value;
area.title = document.ime.areaTitle.value;
const d = area.clicks = $.extend({}, mouse.currentClicks);
const full = d.left && d.right;
/*
switch (area.shape) {
Browser invariant function to get the event "behind" the object passed
case 'rect':
to event handlers.
if (d.left) {
*/
area.coords[0] = d.left.x;
function ime_eventGetButton(e) {
area.coords[1] = d.left.y;
if (typeof(e.which)!='undefined') {
}
return e.which;
if (d.right) {
}
area.coords[2] = d.right.x;
else {
area.coords[3] = d.right.y;
return e.button;
}
}
break;
}
case 'circle':
if (leftClick) {
area.coords[0] = d.left.x;
area.coords[1] = d.left.y;
}
if (full) {
const
dx = d.left.x - d.right.x,
dy = d.left.y - d.right.y;
area.coords[2] = parseInt(Math.hypot(dx, 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();
},
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;
function onmousedown(event) {
if (results = detect.rect.exec(line)) {
if (!listenToMouse) return;
const area = areas.make("rect");
event.preventDefault();
area.coords = results.slice(1, 5);
event.stopPropagation();
area.link = results[5];
var isLeftButton = event.which == 1, isRightButton = event.which > 1;
if (results[6])
var offset = $('#imeImg').offset();
area.title = results[6].substring(1);
var x = event.pageX - offset.left;
}
var y = event.pageY - offset.top;
else if (results = detect.circ.exec(line)) {
var position = { x: parseInt( x / ime.scale ), y: parseInt( y / ime.scale ) };
const area = areas.make("circle");
if (isLeftButton) {
area.coords = results.slice(1, 4);
currentClicks.left = position;
area.link = results[4];
}
if (results[5])
if (isRightButton) {
area.title = results[5].substring(1);
currentClicks.right = position;
}
}
else if (results = detect.poly.exec(line)) {
ime_saveArea(isLeftButton);
const area = areas.make("poly");
}
area.coords = results[1].split(/\s+/);
area.link = results[2];
function ime_mouseEventClear() {
if (results[3])
listenToMouse = false;
area.title = results[3].substring(1);
currentClicks = {};
}
jcanvas.css({ cursor: '' });
}
}
areas.update();
this.hide();
},
show() {
$('#imeImport').show();
$('#imeImportShow').hide();
$('#imeImportHide').show();
},
hide() {
$('#imeImport').hide();
$('#imeImportShow').show();
$('#imeImportHide').hide();
}
}
};
/*
function ime_mouseEventSet() {
Initialization, part 1:
listenToMouse = true;
-Find image and
jcanvas.css({ cursor: 'crosshair' });
-Download info async via XMLHttpRequest. When complete...
}
-...show a link to load the rest of ImageMapEdit (continuance)
*/
function ime_newArea(shape) {
{
ime_mouseEventSet();
const divFile = document.getElementById('file');
ime.areas.push( { shape: shape, coords: [], link: '' } );
if (divFile) try {
ime.currentlyEditing = ime.areas.length-1;
const a = util.findHyperlink(divFile);
ime_updateAreas();
if (!a) throw 'a';
return currentArea();
const img = a.firstChild;
}
if (!img) throw 'img';
const url =
function ime_updateAreas() {
mw.config.get('wgScriptPath') +
ime_updateSelectArea();
'/api.php?format=json&action=query&prop=imageinfo&' +
ime_editArea(ime.currentlyEditing);
'iiprop=size&titles=' + mw.config.get('wgPageName');
ime_updateResult();
$.get(url, data => {
}
if (typeof data.query.pages != "undefined") {
const imageProperties =
function ime_updateResult() {
data.query.pages[Object.keys(data.query.pages)[0]];
var arr = document.ime.imageDescriptionPos;
const imageInfo = imageProperties.imageinfo;
var imageDescriptionPos = arr[0].value;
if (imageInfo) {
for (var i=1; i<arr.length; i++) {
ime.width = imageInfo[0].width;
if (arr[i].checked) {
imageDescriptionPos ime.height = arrimageInfo[i0].valueheight;
ime.scale = img.width / ime.width;
break;
// Show 'show ImageMapEdit' button now
$('<a>', { id: 'imeLink' })
.css({ display: 'block' })
.text('⟨Start ImageMapEdit⟩')
.click(util.std_handler(continuance))
.appendTo('#file');
}
}
});
} catch (e) {
util.displayErr(
'ImageMapEdit initialization failed: "' +
e + '" was missing');
}
}
}
/*
var result = Array();
Initialization, part 2 (triggered by link):
result.push('<imagemap>');
-Move the image in the logical structure of the page, then
result.push(mw.config.get('wgPageName') + '|' + document.ime.imageDescription.value);
-Hides the link and finally
result.push('');
-Adds the ImageMapEdit HTML.
for (var i=0; i<ime.areas.length; i++) {
*/
var s = ime.areas[i].shape +
function continuance() {
' ' +
ime.areas[i].coords.jointrimUI(' ') + ;
' [[' +
ime.areas[i].link +
(ime.areas[i].title ? '|' + ime.areas[i].title : '') +
']]';
result.push(s);
}
result.push('');
result.push('desc ' + imageDescriptionPos);
result.push('</imagemap>');
var const preResultdivFile = document.getElementById('imeResultfile');,
tempNode = divFile.firstChild,
a = util.findHyperlink(tempNode),
img = a.firstChild,
$img = $(img),
divImeContainer = util.makeDiv('imeContainer');
divImeContainer.style.position = 'relative';
while (preResult.lastChild) {
preResult.removeChild(preResult.lastChild);
}
// Move image from within link to outside
for (var i=0; i<result.length; i++) {
a.removeChild(img);
preResult.appendChild(document.createTextNode(result[i]));
preResult.appendChild(document.createElement('br'));
}
ime_updateSelectArea();
}
divFile.insertBefore(divImeContainer, tempNode);
function drawAreas() { // this is where the magic is done.
divFile.removeChild(tempNode);
// Fix for rtl wikis, thanks to hewiki user "קיפודנחש"
function markPoint(point, color) {
divFile.style.direction = 'ltr';
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 ime.areas) {
var current = ind == ime.currentlyEditing;
context.fillStyle = current ? 'rgba(255,255,0,0.4)' : 'rgba(255,0,0,0.4)';
var area = ime.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(currentClicks.left, 'red');
if (currentArea().shape != 'poly') markPoint(currentClicks.right, 'yellow');
}
img.id = 'imeImg';
function ime_updateSelectArea() {
img.style.border = 'none';
const handler = util.std_handler(e => e.stopPropagation());
img.oncontextmenu = handler;
// Internet Explorer needs this differently
selectArea.children().remove();
divImeContainer.style.overflow =
(typeof (navigator.userAgent) != 'undefined' &&
for (var i=0; i<ime.areas.length; i++) {
navigator.userAgent.match('/MSIE/')) ?
var area = ime.areas[i],
'none' : 'auto';
title = (area.title || area.link || '') + ' [' + area.shape + ']';
divImeContainer.appendChild(img);
$('<option>', { value: i })
.text(title)
.prop({ selected: i == ime.currentlyEditing } )
.appendTo(selectArea);
}
selectArea.prop('selectedIndex', ime.currentlyEditing);
}
ime.jcanvas = $('<canvas>')
function ime_editArea(index) {
.css({
$('#imeProps').toggle(false);
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);
ime.context = ime.jcanvas[0].getContext("2d");
$.extend(ime.context, {
fillStyle: 'rgba(255,255,0,0.4)',
strokeStyle: 'red',
lineJoin: 'round',
lineWidth: 1.5 / ime.scale
}
);
ime.context.scale(ime.scale, ime.scale);
ime.jcanvas.click(mouse.fired.bind(mouse));
ime.jcanvas.click(handler);
ime.jcanvas[0].oncontextmenu = img.oncontextmenu = handler;
const divIme = util.makeDiv('ime');
var area = ime.areas[index];
divFile.appendChild(divIme);
currentClicks = area.clicks || {};
// 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);
if (area) {
attachTemplate();
ime.currentlyEditing = index;
util.translate();
}
function updateResult() {
$('#imeProps').toggle(true);
const
$('.ime-prop').toggle(false);
arr = Array.from(document.ime.imageDescriptionPos),
$('.ime-prop-' + area.shape).toggle(true);
imageDescriptionPos =
(arr.find(elt => elt.checked) || arr[0]).value;
ime_mouseEventSet();
updateInputs();
}
drawAreas();
}
const results = Array().concat(
function ime_deleteArea() {
['<imagemap>',
ime_mouseEventClear();
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');
// Remove element from ime.areas array
while(preResult.lastChild)
ime.areas.splice(ime.currentlyEditing,1);
preResult.removeChild(preResult.lastChild);
for (const result of results) {
if (ime.currentlyEditing>=ime.areas.length) {
preResult.appendChild(document.createTextNode(result));
ime.currentlyEditing = ime.areas.length-1;
preResult.appendChild(document.createElement('br'));
}
}
areas.updateSelection();
}
function updateInputs(fromAreas) {
ime_updateAreas();
function updateShape(selectors, coords) {
if (ime.currentlyEditing >= 0) {
for (const [index, selector] of selectors.entries())
ime_editArea(ime.currentlyEditing);
$(selector).val(coords && coords[index] || '');
}
}
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 ime.areas[ime.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({}, 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) {
function updatePolyInputs(coords) {
var dx = d.left.x - d.right.x,
$('#imePropsPolyCoords').text(coords.join(', '));
dy = d.left.y - d.right.y;
area.coords[2] = parseInt(Math.sqrt(dx*dx + dy*dy));
}
break;
const area = areas.current(), coords = area.coords;
case 'poly':
ifswitch (leftClick && darea.leftshape) {
case 'rect':
area.coords.push(d.left.x, d.left.y);
updateShape([
'#ime_areaRectLeft',
'#ime_areaRectTop',
'#ime_areaRectRight',
'#ime_areaRectBottom'
], coords);
break;
case 'circle':
updateShape([
'#ime_areaCircleX',
'#ime_areaCircleY',
'#ime_areaCircleRadius'
], coords);
break;
case 'poly':
updatePolyInputs(coords);
break;
}
$('#ime_areaLink').val(area.link || '');
break;
$('#ime_areaTitle').val(area.title || '');
}
}
updateInputs(full || area.shape == 'poly');
ime_updateAreas();
}
function ime_importLines() {
var text = document.ime.importText.value;
var lines = text.split("\n");
function attachTemplate() {
for (var i=0; i<lines.length; i++) {
{const
var rectMatch = /^rect +(\d+) +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;
clicks = {
var circleMatch = /^circle +(\d+) +(\d+) +(\d+) +\[\[([^|]*)(|(.*))?\]\]/i;
'.ime_t_rect': () => areas.make('rect'),
var polyMatch = /^poly +(.*?) +\[\[([^|]*)(|(.*))?\]\]/i;
'.ime_t_circle': () => areas.make('circle'),
'.ime_t_poly': () => areas.make('poly'),
var line = lines[i];
'.ime_t_deletearea': areas.remove.bind(areas),
'#imeImportShow': ime.imports.show.bind(ime.imports),
if (rectMatch.test(line)) {
'#imeImportHide': ime.imports.hide.bind(ime.imports),
var results = rectMatch.exec(line);
'.ime_t_import': ime.imports.make.bind(ime.imports),
var area = ime_newArea("rect");
'.ime_t_deletecoordinates': () => {
area.coords = results.slice(1, 5);
area areas.linkcurrent().coords = results[5];
mouse.currentClicks = {};
if (results[6]) area.title = results[6].substring(1);
ime.store();
}
}, 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();
}
};
for (const [id, click] of Object.entries(clicks))
$(id).click(util.std_handler(click));
for (const [id, change] of Object.entries(changes))
$(id).change(change);
}
areas.selection = $('#ime_areaselector');
$('.ime-saveonchange').focusout(function () {
const
input = $(this),
ind = input.data('coord'),
val = parseInt(input.val()),
area = areas.current(),
coords = area && area.coords;
if (coords &&
typeof (ind) == 'number' &&
typeof (val) == 'number' &&
!isNaN(val)) {
coords[ind] = val;
mouse.currentClicks = {};
areas.draw();
}
});
mw.loader.using(['mediawiki.api', 'jquery.ui']).done(() => {
$('#ime_areaLink').autocomplete({
source(request, response) {
new mw.Api().get({
action: 'opensearch',
search: request.term,
namespace: 0,
limit: 10
}).done(data => {
if (data && data.length > 1)
response(data[1]);
}); // done
} // source
}); // autocomplete
}); // using
}
else if (circleMatch.test(line)) {
var results = circleMatch.exec(line);
var area = ime_newArea("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 = ime_newArea("poly");
area.coords = results[1].split(/\s+/);
area.link = results[2];
if (results[3]) area.title = results[3].substring(1);
}
}
ime_updateAreas();
ime_hideImport();
}
function ime_showImport() {
$('#imeImport').show();
$('#imeImportShow').hide();
$('#imeImportHide').show();
}
// this is the one-(very long)-line version of the template
function ime_hideImport() {
//mw linter does not allow use multiline delimiter (ascii 96), not even
$('#imeImport').hide();
//in the comment...formatted version in comment below.
$('#imeImportShow').show();
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 double-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 left 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 double-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 left 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 double-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> ></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>';
$('#imeImportHide').hide();
}
function attachTemplate() {
$('.ime_t_rect').click(function(e) { e.preventDefault(); ime_newArea('rect'); } );
$('.ime_t_circle').click(function(e) { e.preventDefault(); ime_newArea('circle'); } );
$('.ime_t_poly').click(function(e) { e.preventDefault(); ime_newArea('poly'); } );
$('#ime_areaselector').change(function(e) { ime_editArea($(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(ime_updateResult);
$('#ime_areaLink').change(function() { currentArea().link = $(this).val(); ime_updateResult();});
$('#ime_areaTitle').change(function() { currentArea().title = $(this).val(); ime_updateResult();});
$('.ime_t_deletecoordinates').click(function(e) {
e.preventDefault();
currentArea().coords = [];
currentClicks = {};
ime_saveArea();
} );
selectArea = $('#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;
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 />
<br />
<input id="ime_areaLink" name="areaLink" style="width:10em" class="ime-saveonchange" />
<br />
<br />
<label for="ime_areaTitle"><span class="ime_t_linktitle">Link title</span> (<span class="ime_t_optional">optional</span>)</label>
<br />
<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/>
<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>
<label style="display:block" class="ime_t_infolinkposition">Position of information link</label>
<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>
<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>
<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>
<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>
<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>
<code id="imeResult" style="display:block;line-height:1.2em"></code>
</div>
</fieldset>
</fieldset>
</form>
`;
});
*/
| 