|
|
| Zeile 1: |
Zeile 1: |
| − | /*
| |
| − | modified by [[user:קיפודנחש]]
| |
| − |
| |
| − | original script by Peter Schlömer, can be found on
| |
| − | https://tools.wmflabs.org/imagemapedit/ime.js,
| |
| − | and contains the following copyright notice:
| |
| − | =========== original license ================
| |
| − | 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
| |
| − | =============================================
| |
| − | */
| |
| − |
| |
| − | if (mw.config.get('wgNamespaceNumber') == 6 && mw.config.get('wgAction') == 'view')
| |
| − | $(function() {
| |
| − | // avoid multiple activation, e.g. when [[m:Special:MyPage/global.js]] activates the script
| |
| − | // and it's also activated on the wiki
| |
| − |
| |
| − | if (window.mw_ime_running) return;
| |
| − | window.mw_ime_running = true;
| |
| − |
| |
| − | var ime_translations = { error_imagenotfound: 'ImageMapEdit: Could not find image in page structure.' };
| |
| − | var ime_areas = Array();
| |
| − | var ime_currentlyEditing = -1;
| |
| − | var ime_width;
| |
| − | var ime_height;
| |
| − | var ime_scale;
| |
| − | var img;
| |
| − | var $img;
| |
| − | var context;
| |
| − | var jcanvas;
| |
| − | var imageProperties;
| |
| − | var currentClicks = {};
| |
| − | var ime_templateHtml;
| |
| − | var listenToMouse = false;
| |
| − | var selectArea;
| |
| − |
| |
| − | if (document.getElementById('file')) {
| |
| − | ime_init1();
| |
| − | }
| |
| − |
| |
| − | function ime_htmlNewDiv(id) {
| |
| − | var div = document.createElement('div');
| |
| − | if (id) div.id = id;
| |
| − | return div;
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | 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 ime_init2().
| |
| − | */
| |
| − | function ime_init1() {
| |
| − | var divFile = document.getElementById('file');
| |
| − | if (!divFile) {
| |
| − | ime_error(ime_translations['error_imagenotfound'] + ' (ime_init1,divFile=null)');
| |
| − | return;
| |
| − | }
| |
| − |
| |
| − | var a = ime_findATag(divFile);
| |
| − | if (!a) {
| |
| − | ime_error(ime_translations['error_imagenotfound'] + ' (ime_init1,a=null)');
| |
| − | return;
| |
| − | }
| |
| − |
| |
| − | var img = a.firstChild;
| |
| − | if (!img) {
| |
| − | ime_error(ime_translations['error_imagenotfound'] + ' (ime_init1,img=null)');
| |
| − | return;
| |
| − | }
| |
| − |
| |
| − | var url = mw.config.get('wgScriptPath') + '/api.php?format=json&action=query&prop=imageinfo&iiprop=size&titles=' + mw.config.get('wgPageName');
| |
| − |
| |
| − | $.get(url, function(data) {
| |
| − |
| |
| − | if( typeof data.query.pages != "undefined" ) {
| |
| − | imageProperties = data.query.pages[Object.keys(data.query.pages)[0]];
| |
| − | var 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('ImageMapEdit >')
| |
| − | .click( function(e) {
| |
| − | e.preventDefault();
| |
| − | ime_init2();
| |
| − | })
| |
| − | .appendTo('#file');
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | 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 ime_init2() {
| |
| − |
| |
| − | // Remove UI that might interfere with this code
| |
| − | ime_removeOtherUIElements();
| |
| − |
| |
| − | var divFile = document.getElementById('file');
| |
| − | var tempNode = divFile.firstChild;
| |
| − | var a = ime_findATag(tempNode);
| |
| − | var divImeContainer = ime_htmlNewDiv('imeContainer');
| |
| − | img = a.firstChild,
| |
| − | $img = $(img);
| |
| − |
| |
| − | divImeContainer.style.position = 'relative';
| |
| − |
| |
| − | // Move image from within link to outside
| |
| − | a.removeChild(img);
| |
| − | divFile.insertBefore(divImeContainer,tempNode);
| |
| − | divFile.removeChild(tempNode);
| |
| − | divFile.style.direction = 'ltr';
| |
| − | img.id = 'imeImg';
| |
| − | img.style.border = 'none';
| |
| − | img.oncontextmenu = function(e){e.preventDefault();e.stopPropagation();};
| |
| − |
| |
| − | // Internet Explorer needs this differently
| |
| − | if (typeof(navigator.userAgent) != 'undefined' && navigator.userAgent.match('/MSIE/')) {
| |
| − | divImeContainer.style.overflow = 'none';
| |
| − | }
| |
| − | else {
| |
| − | divImeContainer.style.overflow = 'auto';
| |
| − | }
| |
| − |
| |
| − | divImeContainer.appendChild(img);
| |
| − |
| |
| − | 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 = 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);
| |
| − | jcanvas.mousedown(onmousedown);
| |
| − | jcanvas.click(function(e){e.preventDefault();e.stopPropagation();})
| |
| − | jcanvas[0].oncontextmenu = img.oncontextmenu = function(e){e.preventDefault();e.stopPropagation();};
| |
| − |
| |
| − | var divIme = ime_htmlNewDiv('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 = ime_eventDummy;
| |
| − |
| |
| − | $(divIme).html(ime_templateHtml);
| |
| − |
| |
| − | attachTemplate();
| |
| − |
| |
| − | // Translate texts
| |
| − | ime_translate();
| |
| − | }
| |
| − |
| |
| − | function ime_translate() {
| |
| − | var allt = [ime_translations, window.ime_translations];
| |
| − | while (allt.length) {
| |
| − | var trans = allt.shift();
| |
| − | if (trans)
| |
| − | for (var key in trans)
| |
| − | $('.ime_t_' + key).text(trans[key]);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | Finds all elements in the current document with the specified class.
| |
| − | */
| |
| − | 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)
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | Display an error message, either by putting it on the page or - if the
| |
| − | place to put it does not exist - by showing an alert box.
| |
| − | */
| |
| − | function ime_error(message) {
| |
| − | var jqFile = $('#file');
| |
| − | var jqIme = $('#ime');
| |
| − |
| |
| − | if (jqFile.length !== 0) {
| |
| − | var jqImeError = $('<p>')
| |
| − | .css({
| |
| − | 'color' : 'darkred',
| |
| − | 'background' : 'white',
| |
| − | 'border' : '1px solid darkred',
| |
| − | 'padding' : '1ex'
| |
| − | })
| |
| − | .text(message)
| |
| − |
| |
| − | if (jqIme !== 0) {
| |
| − | jqIme.before(jqImeError);
| |
| − | } else {
| |
| − | jqImeError.appendTo(jqFile);
| |
| − | }
| |
| − | }
| |
| − | else {
| |
| − | window.alert(message);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | Dummy function to intercept events
| |
| − | */
| |
| − | function ime_eventDummy(e) {
| |
| − | e.cancelBubble = true;
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*
| |
| − | 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.
| |
| − | */
| |
| − | function ime_eventGetButton(e) {
| |
| − | if (typeof(e.which)!='undefined') {
| |
| − | return e.which;
| |
| − | }
| |
| − | else {
| |
| − | return e.button;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function onmousedown(event) {
| |
| − | if (!listenToMouse) return;
| |
| − | event.preventDefault();
| |
| − | event.stopPropagation();
| |
| − | var isLeftButton = event.which == 1, isRightButton = event.which > 1;
| |
| − | var offset = $('#imeImg').offset();
| |
| − | var x = event.pageX - offset.left;
| |
| − | var y = event.pageY - offset.top;
| |
| − | var position = { x: parseInt( x / ime_scale ), y: parseInt( y / ime_scale ) };
| |
| − | if (isLeftButton) {
| |
| − | currentClicks.left = position;
| |
| − | }
| |
| − | if (isRightButton) {
| |
| − | currentClicks.right = position;
| |
| − | }
| |
| − | ime_saveArea(isLeftButton);
| |
| − | }
| |
| − |
| |
| − | function ime_mouseEventClear() {
| |
| − | listenToMouse = false;
| |
| − | currentClicks = {};
| |
| − | jcanvas.css({ cursor: '' });
| |
| − | }
| |
| − |
| |
| − | function ime_mouseEventSet() {
| |
| − | listenToMouse = true;
| |
| − | jcanvas.css({ cursor: 'crosshair' });
| |
| − | }
| |
| − |
| |
| − | function ime_newArea(shape) {
| |
| − | ime_mouseEventSet();
| |
| − | ime_areas.push( { shape: shape, coords: [], link: '' } );
| |
| − | ime_currentlyEditing = ime_areas.length-1;
| |
| − | ime_updateAreas();
| |
| − | return currentArea();
| |
| − | }
| |
| − |
| |
| − | function ime_updateAreas() {
| |
| − | ime_updateSelectArea();
| |
| − | ime_editArea(ime_currentlyEditing);
| |
| − | ime_updateResult();
| |
| − | }
| |
| − |
| |
| − | function ime_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;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var result = Array();
| |
| − | result.push('<imagemap>');
| |
| − | result.push(mw.config.get('wgPageName') + '|' + document.ime.imageDescription.value);
| |
| − | result.push('');
| |
| − | for (var i=0; i<ime_areas.length; i++) {
| |
| − | var s = ime_areas[i].shape +
| |
| − | ' ' +
| |
| − | ime_areas[i].coords.join(' ') +
| |
| − | ' [[' +
| |
| − | 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 preResult = document.getElementById('imeResult');
| |
| − |
| |
| − | while (preResult.lastChild) {
| |
| − | preResult.removeChild(preResult.lastChild);
| |
| − | }
| |
| − |
| |
| − | for (var i=0; i<result.length; i++) {
| |
| − | preResult.appendChild(document.createTextNode(result[i]));
| |
| − | preResult.appendChild(document.createElement('br'));
| |
| − | }
| |
| − | ime_updateSelectArea();
| |
| − | }
| |
| − |
| |
| − | 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 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');
| |
| − | }
| |
| − |
| |
| − | function ime_updateSelectArea() {
| |
| − |
| |
| − | selectArea.children().remove();
| |
| − |
| |
| − | for (var i=0; i<ime_areas.length; i++) {
| |
| − | var area = ime_areas[i],
| |
| − | title = (area.title || area.link || '') + ' [' + area.shape + ']';
| |
| − | $('<option>', { value: i })
| |
| − | .text(title)
| |
| − | .prop({ selected: i == ime_currentlyEditing } )
| |
| − | .appendTo(selectArea);
| |
| − | }
| |
| − | selectArea.prop('selectedIndex', ime_currentlyEditing);
| |
| − | }
| |
| − |
| |
| − | function ime_editArea(index) {
| |
| − | $('#imeProps').toggle(false);
| |
| − |
| |
| − | var area = ime_areas[index];
| |
| − | currentClicks = area.clicks || {};
| |
| − |
| |
| − |
| |
| − | if (area) {
| |
| − | ime_currentlyEditing = index;
| |
| − |
| |
| − | $('#imeProps').toggle(true);
| |
| − | $('.ime-prop').toggle(false);
| |
| − | $('.ime-prop-' + area.shape).toggle(true);
| |
| − |
| |
| − | ime_mouseEventSet();
| |
| − | updateInputs();
| |
| − | }
| |
| − | drawAreas();
| |
| − | }
| |
| − |
| |
| − | function ime_deleteArea() {
| |
| − | ime_mouseEventClear();
| |
| − |
| |
| − | // Remove element from ime_areas array
| |
| − | ime_areas.splice(ime_currentlyEditing,1);
| |
| − |
| |
| − | if (ime_currentlyEditing>=ime_areas.length) {
| |
| − | ime_currentlyEditing = ime_areas.length-1;
| |
| − | }
| |
| − |
| |
| − | ime_updateAreas();
| |
| − | if (ime_currentlyEditing >= 0) {
| |
| − | ime_editArea(ime_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').val(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) {
| |
| − | 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');
| |
| − | ime_updateAreas();
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | Remove all UI elements that might interfere with ImageMapEdit.
| |
| − | */
| |
| − | function ime_removeOtherUIElements() {
| |
| − | // Remove all UI elements of the 'annotations' feature used on Wikimedia
| |
| − | // Commons.
| |
| − | $('#ImageAnnotationAddButton').remove();
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | Try to find an <a> tag within the specified HTML document node.
| |
| − | */
| |
| − |
| |
| − | function ime_findATag(node) {
| |
| − | // We just look at the first child until there is none or it is an <a> tag
| |
| − | var a = node;
| |
| − | while (a != null && a.nodeName.toUpperCase() != 'A') {
| |
| − | a = a.firstChild;
| |
| − | }
| |
| − | return a;
| |
| − | }
| |
| − |
| |
| − | function ime_importLines(toclear) {
| |
| − | var text = document.ime.importText.value;
| |
| − | var lines = text.split("\n");
| |
| − |
| |
| − | if (toclear) {
| |
| − | ime_areas = [];
| |
| − | }
| |
| − |
| |
| − | 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 = ime_newArea("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 = 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();
| |
| − | }
| |
| − |
| |
| − | 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(); 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_t_replace').click(function(e) { e.preventDefault(); ime_importLines(true);});
| |
| − | $('.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-savepolyonout').focusout(function() {
| |
| − | var val = $(this).val();
| |
| − | var area = currentArea();
| |
| − | var coords = val.split(/,/g).map(x => parseInt(x)).filter(x => !isNaN(x));
| |
| − | if (coords && coords.length && coords.length % 2 === 0) {
| |
| − | area.coords = coords;
| |
| − | }
| |
| − | ime_saveArea();
| |
| − | });
| |
| − |
| |
| − | $('.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 = {};
| |
| − | ime_saveArea();
| |
| − | }
| |
| − | });
| |
| − | 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...
| |
| − | // formatted version in comment below.
| |
| − | // original can be found at https://imagemapedit.toolforge.org/template.php.
| |
| − | 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;overflow:auto;" ></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 /><textarea id="imePropsPolyCoords" style="font-size:0.8em;max-width:20em;height:8em"class="ime-savepolyonout"></textarea><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:0 2em;background:white;color:darkblue" class="ime_t_import">Import</a><a style="padding:0 2em;background:white;color:darkblue" class="ime_t_replace">Replace</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;overflow:auto;" ></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 />
| |
| − | <textarea id="imePropsPolyCoords" style="font-size:0.8em;max-width:20em;;height:8em" class="ime-savepolyonout"></textarea>
| |
| − | <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:0 2em;background:white;color:darkblue" class="ime_t_import">Import</a>
| |
| − | <a style="padding:0 2em;background:white;color:darkblue" class="ime_t_replace">Replace</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>
| |
| − | `;
| |
| − |
| |
| − | });
| |
| − | */
| |
