Line 1: |
Line 1: |
− | /* Any JavaScript here will be loaded for all users on every page load. */ | + | /* |
| + | Copyright (c) 2007-2013 Peter Schlömer |
| | | |
− | //load ImageMapEditor in Image namespace | + | Released under the following licenses (to make reuse in other Wikis |
− | if (mw.config.get('wgNamespaceNumber')==6 && mw.config.get('wgAction')=='view') { | + | easier): |
− | mw.loader.load('/w/index.php?title=MediaWiki:ImageMapEditor.js&action=raw&ctype=text/javascript');
| + | |
| + | 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 |
| + | */ |
| + | |
| + | // Compatibility layer for old versions of MediaWiki |
| + | if (mw === undefined) mw = {}; |
| + | if (mw.config === undefined) mw.config = {}; |
| + | if (mw.config.get === undefined) { |
| + | mw.config.get = function(key) { |
| + | this[key]; |
| + | }; |
| + | } |
| + | if (mw.loader === undefined) mw.loader = {}; |
| + | if (mw.loader.load === undefined) mw.loader.load = importScriptURI; |
| + | |
| + | /* |
| + | Imports |
| + | */ |
| + | |
| + | // Default error message, will be overwritten if translation is loaded |
| + | var ime_translations = new Array(); |
| + | ime_translations['error_imagenotfound'] = 'ImageMapEdit: Could not find image in page structure.'; |
| + | |
| + | /* |
| + | Global variables |
| + | */ |
| + | var ime_areas = Array(); |
| + | var ime_currentlyEditing = -1; |
| + | var ime_width; |
| + | var ime_height; |
| + | var ime_scale; |
| + | |
| + | /* |
| + | Start Initialization if this is an image page and there actually is an image |
| + | */ |
| + | $(document).ready(function() { |
| + | // Determine whether we are on an image page. Namespace must be 6 and action view |
| + | if (mw.config.get('wgNamespaceNumber') == 6 && mw.config.get('wgAction') == 'view') { |
| + | |
| + | // If we can a div with id file, we initialize |
| + | if (document.getElementById('file')) { |
| + | $.getScript('//code.jquery.com/ui/1.12.1/jquery-ui.js').done(function() { |
| + | if (mw.config.get('wgUserLanguage') === 'de') { |
| + | ime_translations = { |
| + | 'error_imagenotfound': 'ImageMapEdit: Konnte Bild in der Seitenstruktur nicht finden.', |
| + | 'bottomleft': 'Links unten', |
| + | 'bottomright': 'Rechts unten', |
| + | 'circle': 'circle (Kreis)', |
| + | 'circlechoose1': 'Auswahl mit linker Maustaste', |
| + | 'circlechoose2': 'Auswahl mit rechter Maustaste', |
| + | 'coordinates': 'Koordinaten', |
| + | 'default': 'Standard', |
| + | 'deletearea': 'Ausgewählten Bereich löschen', |
| + | 'deletecoordinates': 'Alle Koordinaten löschen', |
| + | 'editarea': 'Bereich bearbeiten', |
| + | 'generatedwikicode': 'Erstellter Wikicode', |
| + | 'hidetextbox': 'Eingabefeld verstecken', |
| + | 'hidewikicode': 'Wikicode verstecken', |
| + | 'imagedescription': 'Bildbeschreibung', |
| + | 'import': 'Importieren', |
| + | 'importareas': 'Bereiche aus Wikicode importieren', |
| + | 'infolinkposition': 'Position des Info-Links', |
| + | 'linktarget': 'Linkziel', |
| + | 'linktitle': 'Linktitel', |
| + | 'newarea': 'Neuen Bereich erstellen', |
| + | 'nolink': 'Kein Link', |
| + | 'optional': 'optional', |
| + | 'poly': 'poly (Polygon)', |
| + | 'polychoose': 'Hinzufügen neuer Punkte mit linker Maustaste', |
| + | 'position': 'Position', |
| + | 'preferences': 'Allgemeine Einstellungen', |
| + | 'radius': 'Radius', |
| + | 'rect': 'rect (Rechteck)', |
| + | 'rectbottom': 'unten', |
| + | 'rectchoose1': 'Auswahl mit linker Maustaste', |
| + | 'rectchoose2': 'Auswahl mit rechter Maustaste', |
| + | 'rectleft': 'Links', |
| + | 'rectright': 'Rechts', |
| + | 'recttop': 'oben', |
| + | 'showtextbox': 'Eingabefeld anzeigen', |
| + | 'showwikicode': 'Wikicode anzeigen', |
| + | 'topleft': 'Links oben', |
| + | 'topright': 'Rechts oben' |
| + | }; |
| + | |
| + | } |
| + | |
| + | ime_init1(); |
| + | }); |
| + | } |
| + | } |
| + | }); |
| + | |
| + | /* |
| + | Create a new div element object with an id. |
| + | */ |
| + | function ime_htmlNewDiv(id) { |
| + | var div = document.createElement('div'); |
| + | if (id) div.id = id; |
| + | return div; |
| } | | } |
− | //load ImageMapHighlighter
| |
− | mw.loader.load('//code.jquery.com/jquery-3.6.0.js');
| |
− | mw.loader.load('//code.jquery.com/ui/1.12.1/jquery-ui.js');
| |
− | mw.loader.load( '/w/index.php?title=MediaWiki:ImageMapHighlighter.js&action=raw&ctype=text/javascript' );
| |
| | | |
− | //load D3graphviz.js | + | /* |
− | mw.loader.load( '/w/index.php?title=MediaWiki:D3graphviz.js&action=raw&ctype=text/javascript' );
| + | 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; |
| + | } |
| | | |
− | //direct link to forms if page does not exists.
| + | var a = ime_findATag(divFile); |
− | //usage example: <div class='link-to-form-if-new' id='Semantic Element'>query result, links, etc.</div>
| + | if (!a) { |
− | $('div.link-to-form-if-new').each(function() {
| + | ime_error(ime_translations['error_imagenotfound'] + ' (ime_init1,a=null)'); |
− | var form = $(this).attr('id');
| + | return; |
− | //console.log('Form: ' + form);
| + | } |
− | $(this).find('a.new').each(function() { | + | |
− | url = $(this).attr('href');
| + | var img = a.firstChild; |
− | //console.log('URL: ' + url);
| + | if (!img) { |
− | if (url.indexOf('Property:') == -1)
| + | ime_error(ime_translations['error_imagenotfound'] + ' (ime_init1,img=null)'); |
− | {
| + | return; |
− | pagename = $(this).text();
| + | } |
− | url = '/w/index.php?title=Special:FormEdit/' + form + '/' + pagename;
| + | |
− | //console.log('New URL: ' + url);
| + | var url = mw.config.get('wgScriptPath') + '/api.php?format=json&action=query&prop=imageinfo&iiprop=size&titles=' + mw.config.get('wgPageName'); |
− | $(this).attr('href', url);
| + | |
− | }
| + | $.get(url, function(data) { |
| + | if (typeof data.query.pages != "undefined") { |
| + | imageProperties = data.query.pages[Object.keys(data.query.pages)[0]]; |
| + | ime_width = imageProperties.imageinfo[0].width; |
| + | ime_height = imageProperties.imageinfo[0].height; |
| + | |
| + | ime_scale = img.width / ime_width; |
| + | |
| + | // Show 'show ImageMapEdit' button now |
| + | var a = document.createElement('a'); |
| + | a.id = 'imeLink'; |
| + | a.href = 'javascript:ime_init2()'; |
| + | a.style.display = 'block'; |
| + | a.appendChild(document.createTextNode('ImageMapEdit >')); |
| + | document.getElementById('file').appendChild(a); |
| + | } |
| }); | | }); |
− | }); | + | } |
| + | |
| + | /* |
| + | 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 img = a.firstChild; |
| + | |
| + | var divImeContainer = ime_htmlNewDiv('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.zIndex = 99; |
| + | img.style.border = 'none'; |
| + | img.style.opacity = '0.75'; |
| + | img.style.filter = 'alpha(opacity=75)'; // IE |
| + | |
| + | // Internet Explorer needs this differently |
| + | if (typeof(navigator.userAgent) != 'undefined' && navigator.userAgent.match('/MSIE/')) { |
| + | divImeContainer.style.overflow = 'none'; |
| + | } else { |
| + | divImeContainer.style.overflow = 'auto'; |
| + | } |
| + | |
| + | var divImePreview = ime_htmlNewDiv('imePreview'); |
| + | divImePreview.style.position = 'absolute'; |
| + | divImePreview.style.top = '0'; |
| + | divImePreview.style.left = '0'; |
| + | divImePreview.style.width = img.width + 'px'; |
| + | divImePreview.style.height = img.height + 'px'; |
| + | divImePreview.zIndex = 0; |
| + | |
| + | divImeContainer.appendChild(divImePreview); |
| + | divImeContainer.appendChild(img); |
| + | |
| + | 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.innerHTML = ime_templateHtml; |
| + | |
| + | // Translate texts |
| + | ime_hideResult(); |
| + | ime_translate(); |
| + | //A button gets created. On click, it gets the input from the #imeResult ID and posts it on the '/ImageMap' page. |
| + | //After posting, it forwards the user to the '/ImageMap' page. |
| + | var clicked = false; |
| + | var btn = document.createElement("button"); |
| + | btn.innerHTML = "Speichern"; |
| + | btn.onclick = function() { |
| + | if ($('#imeResult').length) { |
| + | clicked = false; |
| + | var rep = $('#imeResult').html(); |
| + | var rep1 = rep.replaceAll("<br>", "\n"); |
| + | var rep2 = rep1.replaceAll("<", "<"); |
| + | var rep3 = rep2.replaceAll(">", ">"); |
| + | var finalstr = '{{ImageMap |map=' + rep3 + ' }}' |
| + | var params = { |
| + | action: 'edit', |
| + | title: $('#firstHeading').text() + '/ImageMap', |
| + | text: finalstr, |
| + | format: 'json' |
| + | }, |
| + | api = new mw.Api(); |
| + | |
| + | api.postWithToken('csrf', params).done(function(data) { |
| + | window.location.replace("/wiki/" + $('#firstHeading').text() + "/ImageMap"); |
| + | }); |
| + | } |
| + | }; |
| + | document.getElementById("file").appendChild(btn); |
| + | |
| + | //A button gets created. |
| + | var but = document.createElement("button"); |
| + | but.innerHTML = "Laden"; |
| + | but.onclick = function() { |
| + | if (!clicked) { |
| + | //Gets the wiki text from the '/ImageMap' page and imports it. |
| + | |
| + | $.getJSON("/w/api.php?action=query&prop=revisions&titles=" + $('#firstHeading').text() + "%2FImageMap&rvprop=content&formatversion=2&format=json", function(data) { |
| + | var daten = data; |
| + | if (daten.query.pages[0].hasOwnProperty("missing")) { |
| + | if (daten.query.pages[0].missing === true) { |
| + | return; |
| + | } |
| + | } |
| + | var aus = daten.query.pages[0].revisions[0].content; |
| + | $('textarea[name="importText"]').html(aus); |
| + | ime_importLines(); |
| + | var clear = ""; |
| + | $('textarea[name="importText"]').html(clear); |
| + | }).fail(function() { |
| + | return; |
| + | }); |
| + | |
| + | //Gets the image width and the image position from the '/ImageMap' page and updates the created ImageMap code. |
| + | |
| + | $.getJSON("/w/api.php?action=query&prop=revisions&titles=" + $('#firstHeading').text() + "%2FImageMap&rvprop=content&formatversion=2&format=json", function(data) { |
| + | var data1 = data; |
| + | if (data1.query.pages[0].hasOwnProperty("missing")) { |
| + | if (data1.query.pages[0].missing === true) { |
| + | return; |
| + | } |
| + | } |
| + | var out = data1.query.pages[0].revisions[0].content; |
| + | var patt = /(?<=<imagemap>\n).*/; |
| + | var string = out.match(patt) + ''; |
| + | var stringSplit = string.split('|'); |
| + | var stringJoin = [stringSplit.shift(), stringSplit.join('|')] |
| + | $('input#ime_imageDescription').val(stringJoin[1]); |
| + | ime_updateResult(); |
| + | }).fail(function() { |
| + | return; |
| + | }); |
| + | clicked = true; |
| + | } |
| + | }; |
| + | |
| + | |
| + | document.getElementById("file").appendChild(but); |
| + | |
| + | |
| + | |
| + | |
| + | } |
| + | |
| + | /* |
| + | Translate the user interface to the specified language. |
| + | */ |
| + | function ime_translate() { |
| + | if (ime_translations) { |
| + | for (var i in ime_translations) { |
| + | var elements = ime_getElementsByClassName('ime_t_' + i); |
| + | if (elements.length > 0) { |
| + | var text = ime_translations[i];; |
| + | for (var j = 0; j < elements.length; j++) { |
| + | elements[j].innerHTML = text; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | /* |
| + | 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 containing rect(angle) coordinates. |
| + | */ |
| + | function ime_RectCoord(x1, y1, x2, y2) { |
| + | this.left = x1; |
| + | this.top = y1; |
| + | this.right = x2; |
| + | this.bottom = y2; |
| + | } |
| + | |
| + | /* |
| + | Function to define an object containing circle coordinates. |
| + | */ |
| + | function ime_CircleCoord(x, y, r) { |
| + | this.x = x; |
| + | this.y = y; |
| + | this.radius = r; |
| + | } |
| + | |
| + | /* |
| + | Function to define an object containing poly(gon) coordinates. |
| + | */ |
| + | function ime_PolyCoord(x, y, r) { |
| + | this.points = Array(); |
| + | } |
| + | |
| + | /* |
| + | Function to define an object storing info on a clickable area for the |
| + | imagemap. |
| + | */ |
| + | function ime_Area(shape) { |
| + | if (shape == 'rect') { |
| + | this.shape = 'rect'; |
| + | this.coords = new ime_RectCoord(0, 0, 0, 0); |
| + | } else if (shape == 'circle') { |
| + | this.shape = 'circle'; |
| + | this.coords = new ime_CircleCoord(0, 0, 20); |
| + | } else { |
| + | this.shape = 'poly'; |
| + | this.coords = new ime_PolyCoord(); |
| + | } |
| + | this.link = ''; |
| + | this.title = ''; |
| + | } |
| + | |
| + | /* |
| + | Browser invariant function to get the event "behind" the object passed |
| + | to event handlers. |
| + | */ |
| + | function ime_getEvent(e) { |
| + | if (e) { |
| + | return e; |
| + | } else { |
| + | return window.event; |
| + | } |
| + | } |
| + | |
| + | function ime_eventGetX(e) { |
| + | if (typeof(e.layerX) != 'undefined') { |
| + | return Math.round(e.layerX / ime_scale); |
| + | } |
| + | if (typeof(e.offsetX) != 'undefined') { |
| + | return Math.round(e.offsetX / ime_scale); |
| + | } else { |
| + | return Math.round(e.x / ime_scale); |
| + | } |
| + | } |
| + | |
| + | function ime_eventGetY(e) { |
| + | if (typeof(e.layerY) != 'undefined') { |
| + | return Math.round(e.layerY / ime_scale); |
| + | } |
| + | if (typeof(e.offsetY) != 'undefined') { |
| + | return Math.round(e.offsetY / ime_scale); |
| + | } else { |
| + | return Math.round(e.y / ime_scale); |
| + | } |
| + | } |
| + | |
| + | function ime_eventGetButton(e) { |
| + | if (typeof(e.which) != 'undefined') { |
| + | return e.which; |
| + | } else { |
| + | return e.button; |
| + | } |
| + | } |
| + | |
| + | function ime_mouseEventClear() { |
| + | var img = document.getElementById('imeImg'); |
| + | img.onmousedown = null; |
| + | img.style.cursor = ''; |
| + | } |
| + | |
| + | function ime_mouseEventSet(func) { |
| + | var img = document.getElementById('imeImg'); |
| + | img.onmousedown = func; |
| + | img.style.cursor = 'url("https://testwiki.kiprobatt.de/w/img_auth.php/f/fb/Crosshair.png"), crosshair'; |
| + | } |
| + | |
| + | function ime_eventRect(e) { |
| + | e = ime_getEvent(e); |
| + | var button = ime_eventGetButton(e); |
| + | if (button == 1) { |
| + | document.ime.areaRectLeft.value = ime_eventGetX(e); |
| + | document.ime.areaRectTop.value = ime_eventGetY(e); |
| + | } else if (button == 2 || button == 3) { |
| + | document.ime.areaRectRight.value = ime_eventGetX(e); |
| + | document.ime.areaRectBottom.value = ime_eventGetY(e); |
| + | } |
| + | ime_saveArea(); |
| + | return false; |
| + | } |
| + | |
| + | function ime_eventCircle(e) { |
| + | e = ime_getEvent(e); |
| + | var button = ime_eventGetButton(e); |
| + | if (button == 1) { |
| + | document.ime.areaCircleX.value = ime_eventGetX(e); |
| + | document.ime.areaCircleY.value = ime_eventGetY(e); |
| + | } else if (button == 2 || button == 3) { |
| + | var a = (ime_eventGetX(e) - parseInt(document.ime.areaCircleX.value)); |
| + | var b = (ime_eventGetY(e) - parseInt(document.ime.areaCircleY.value)); |
| + | document.ime.areaCircleRadius.value = Math.round(Math.sqrt(a * a + b * b)); |
| + | } |
| + | ime_saveArea(); |
| + | return false; |
| + | } |
| + | |
| + | function ime_eventPoly(e) { |
| + | e = ime_getEvent(e); |
| + | var button = ime_eventGetButton(e); |
| + | if (button == 1) { |
| + | area = ime_areas[ime_currentlyEditing]; |
| + | area.coords.points.push(ime_eventGetX(e)); |
| + | area.coords.points.push(ime_eventGetY(e)); |
| + | ime_saveArea(); |
| + | } |
| + | return false; |
| + | } |
| + | |
| + | function ime_newArea(shape) { |
| + | var area = new ime_Area(shape); |
| + | area.shape = shape; |
| + | ime_areas.push(area); |
| + | |
| + | ime_currentlyEditing = ime_areas.length - 1; |
| + | ime_updateAreas(); |
| + | ime_editArea(ime_currentlyEditing); |
| + | autoComplete(); |
| + | } |
| + | //Gets called by ime_newArea() and ime_editArea() functions. |
| + | function autoComplete() { |
| + | const search = document.getElementById('ime_areaLink'); |
| + | $('#ime_areaLink').parent('div').addClass('ui-widget'); |
| + | var firstTimeTrigger = false; |
| + | var firstTimeTriggerCat = false; |
| + | $('#ime_areaLink').parent('div').addClass('ui-autocomplete'); |
| + | var searchPages = async (searchText, searchCat) => { |
| + | |
| + | var categories; |
| + | /*When the linkcategory field is empty, this code does the autocomplete in the linktarget field with all pages.*/ |
| + | if (searchCat.length === 0) { |
| + | categories = []; |
| + | var pages; |
| + | if (searchText.length === 0) { |
| + | pages = []; |
| + | } else { |
| + | const res = await fetch('/w/api.php?action=pfautocomplete&substr=' + searchText + '&namespace=Main&format=json'); |
| + | pages = await res.json(); |
| + | |
| + | var allTitles = pages.pfautocomplete.map(function(item) { |
| + | return item['title']; |
| + | }); |
| + | |
| + | $("#ime_areaLink").autocomplete({ |
| + | source: allTitles |
| + | }); |
| + | $('ul.ui-autocomplete').css('list-style', 'none'); |
| + | if (!firstTimeTrigger) { |
| + | firstTimeTrigger = true; |
| + | search.dispatchEvent(new Event('input')); |
| + | } |
| + | } |
| + | } else { |
| + | /*When the linkcategory field is not empty, this else is called and at first it creates an autocomplete for the linkcategory field.*/ |
| + | var get = await $.getJSON("/w/api.php?action=query&list=allcategories&format=json"); |
| + | var categories = await get.query; |
| + | var allCategories = categories.allcategories.map(function(item) { |
| + | return item['*']; |
| + | }); |
| + | |
| + | $("#ime_linkCategory").autocomplete({ |
| + | source: allCategories |
| + | }); |
| + | $('ul.ui-autocomplete').css('list-style', 'none'); |
| + | if (!firstTimeTriggerCat) { |
| + | firstTimeTriggerCat = true; |
| + | category.dispatchEvent(new Event('input')); |
| + | } |
| + | |
| + | |
| + | |
| + | var pages; |
| + | /*When the linkcategory field is not empty, this code creates an autocomplete for the linktarget field with the given category from the linkcategory field.*/ |
| + | if (searchText.length === 0) { |
| + | pages = []; |
| + | } else { |
| + | const res = await fetch('/w/api.php?action=pfautocomplete&substr=' + searchText + '&category=' + searchCat + '&namespace=Main&format=json'); |
| + | pages = await res.json(); |
| + | |
| + | var allTitles = pages.pfautocomplete.map(function(item) { |
| + | return item['title']; |
| + | }); |
| + | |
| + | $("#ime_areaLink").autocomplete({ |
| + | source: allTitles |
| + | }); |
| + | $('ul.ui-autocomplete').css('list-style', 'none'); |
| + | if (!firstTimeTrigger) { |
| + | firstTimeTrigger = true; |
| + | search.dispatchEvent(new Event('input')); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | search.addEventListener('input', () => searchPages(search.value, category.value)); |
| + | |
| + | |
| + | |
| + | //This code creates the input field for the linkcategory. |
| + | if (!$('#ime_linkCategory').length) { |
| + | var br = document.createElement("br"); |
| + | $('#ime_areaLink').parent().append(br); |
| + | var lbl = document.createElement("label"); |
| + | lbl.setAttribute("for", "ime_linkCategory"); |
| + | lbl.setAttribute("id", "ime_linkCategoryLabel"); |
| + | $('#ime_areaLink').parent().append(lbl); |
| + | var spn = document.createElement("span"); |
| + | spn.setAttribute("value", "Linkkategorie"); |
| + | spn.innerHTML = 'Linkkategorie'; |
| + | document.getElementById("ime_linkCategoryLabel").appendChild(spn); |
| + | var br1 = document.createElement("br"); |
| + | $('#ime_areaLink').parent().append(br1); |
| + | var inpt = document.createElement("INPUT"); |
| + | inpt.setAttribute("type", "text"); |
| + | inpt.setAttribute("id", "ime_linkCategory"); |
| + | inpt.setAttribute("style", "width:10em"); |
| + | //document.getElementById("ime_areaLink")[0].appendChild(inpt); |
| + | $('#ime_areaLink').parent().append(inpt); |
| + | } |
| + | const category = document.getElementById('ime_linkCategory'); |
| + | category.addEventListener('input', () => searchPages(search.value, category.value)); |
| + | } |
| + | |
| + | |
| + | |
| + | function ime_updateAreas() { |
| + | ime_updateSelectArea(); |
| + | ime_updateMap(); |
| + | 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 coords = ime_areas[i].coords; |
| + | var s = ''; |
| + | if (ime_areas[i].shape == 'rect') { |
| + | s = coords.left + ' ' + coords.top + ' ' + coords.right + ' ' + coords.bottom; |
| + | } else if (ime_areas[i].shape == 'circle') { |
| + | s = coords.x + ' ' + coords.y + ' ' + coords.radius; |
| + | } else if (ime_areas[i].shape == 'poly') { |
| + | s = coords.points.join(' '); |
| + | } |
| + | result.push(ime_areas[i].shape + ' ' + s + ' [[' + ime_areas[i].link + (ime_areas[i].title ? '|' + ime_areas[i].title : '') + ']]'); |
| + | } |
| + | 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')); |
| + | } |
| + | } |
| + | |
| + | function ime_updateMap() { |
| + | var preview = document.getElementById('imePreview'); |
| + | var img = document.getElementById('imeImg'); |
| + | |
| + | // Remove areas from map which are out of range |
| + | for (var i = 0; i < preview.childNodes.length; i++) { |
| + | var child = preview.childNodes[i]; |
| + | var id = parseInt(child.id.substring(10)); |
| + | if (id >= ime_areas.length) { |
| + | preview.removeChild(child); |
| + | i--; |
| + | } |
| + | } |
| + | |
| + | for (var i = 0; i < ime_areas.length; i++) { |
| + | // Get existing DIV |
| + | var area = ime_areas[i]; |
| + | var div = document.getElementById('imePreview' + i); |
| + | |
| + | // If it does not exist exists, create a new one and set style |
| + | if (!div) { |
| + | var div = ime_htmlNewDiv('imePreview' + i) |
| + | preview.appendChild(div); |
| + | div.style.zIndex = 0; |
| + | div.style.position = 'absolute'; |
| + | div.style.opacity = 0.5; |
| + | div.style.filter = 'alpha(opacity=50)'; |
| + | } |
| + | |
| + | var coords = area.coords; |
| + | if (area.shape == 'rect') { |
| + | div.className = 'previewRect'; |
| + | // Only if valid coordinates were given, draw |
| + | if (coords.left < coords.right && coords.top < coords.bottom) { |
| + | div.style.left = Math.round(ime_scale * coords.left) + 'px'; |
| + | div.style.top = Math.round(ime_scale * coords.top) + 'px'; |
| + | div.style.width = (Math.round(ime_scale * coords.right) - Math.round(ime_scale * coords.left)) + 'px'; |
| + | div.style.height = (Math.round(ime_scale * coords.bottom) - Math.round(ime_scale * coords.top)) + 'px'; |
| + | } else { |
| + | div.style.left = '0'; |
| + | div.style.top = '0'; |
| + | div.style.width = '0'; |
| + | div.style.height = '0'; |
| + | } |
| + | } else if (area.shape == 'circle') { |
| + | div.className = 'previewCircle'; |
| + | div.style.backgroundRepeat = 'no-repeat'; |
| + | var left = Math.round(ime_scale * coords.x) - Math.round(ime_scale * coords.radius); |
| + | var top = Math.round(ime_scale * coords.y) - Math.round(ime_scale * coords.radius); |
| + | var size = Math.round(ime_scale * coords.radius * 2) + 1; |
| + | |
| + | div.style.left = left + 'px'; |
| + | div.style.top = top + 'px'; |
| + | |
| + | if (left + size > img.width) { |
| + | div.style.width = (img.width - left) + 'px'; |
| + | } else { |
| + | div.style.width = size + 'px'; |
| + | } |
| + | |
| + | if (top + size > img.height) { |
| + | div.style.height = (img.height - top) + 'px'; |
| + | } else { |
| + | div.style.height = size + 'px'; |
| + | } |
| + | } else if (area.shape == 'poly') { |
| + | // Determine maximum coordinates (this is how big the image is) |
| + | div.className = 'previewPoly'; |
| + | div.style.backgroundRepeat = 'no-repeat'; |
| + | |
| + | var points = coords.points; |
| + | var minX = 0; |
| + | var maxX = 0; |
| + | var minY = 0; |
| + | var maxY = 0; |
| + | if (points.length > 0) { |
| + | minX = points[0]; |
| + | maxX = points[0]; |
| + | minY = points[1]; |
| + | maxY = points[1]; |
| + | for (var j = 2; j < points.length; j += 2) { |
| + | var x = points[j]; |
| + | var y = points[j + 1]; |
| + | if (x < minX) minX = x; |
| + | if (x > maxX) maxX = x; |
| + | if (y < minY) minY = y; |
| + | if (y > maxY) maxY = y; |
| + | } |
| + | } |
| + | |
| + | div.style.left = Math.round(ime_scale * minX) + 'px'; |
| + | div.style.top = Math.round(ime_scale * minY) + 'px'; |
| + | div.style.width = (Math.round(ime_scale * maxX) - Math.round(ime_scale * minX)) + 'px'; |
| + | div.style.height = (Math.round(ime_scale * maxY) - Math.round(ime_scale * minY)) + 'px'; |
| + | } |
| + | } |
| + | |
| + | ime_highlightMap(); |
| + | } |
| + | |
| + | function ime_highlightMapCircle(div, radius, highlight) { |
| + | var canvas = document.createElement('canvas'); |
| + | canvas.width = radius * 2; |
| + | canvas.height = radius * 2; |
| + | |
| + | |
| + | |
| + | var ctx = canvas.getContext("2d"); |
| + | ctx.beginPath(); |
| + | ctx.arc(radius, radius, radius, 0, 2 * Math.PI); |
| + | if (highlight) { |
| + | ctx.fillStyle = 'red'; |
| + | ctx.fill(); |
| + | ctx.strokeStyle = 'red'; |
| + | } else { |
| + | ctx.fillStyle = 'black'; |
| + | ctx.fill(); |
| + | ctx.strokeStyle = 'black'; |
| + | } |
| + | ctx.stroke(); |
| + | ctx.closePath(); |
| + | |
| + | var meinBild = canvas.toDataURL('image/png', 1.0); |
| + | |
| + | var background = "url('" + meinBild + "')"; |
| + | if (div.style.background != background) { |
| + | div.style.background = background; |
| + | div.style.backgroundRepeat = "no-repeat"; |
| + | } |
| + | } |
| + | |
| + | function ime_highlightMapPoly(div, points, highlight) { |
| + | var minX = 0; |
| + | var minY = 0; |
| + | var maxX = 0; |
| + | var maxY = 0; |
| + | if (points.length > 0) { |
| + | minX = points[0]; |
| + | minY = points[1]; |
| + | for (var j = 2; j < points.length; j += 2) { |
| + | var x = points[j]; |
| + | var y = points[j + 1]; |
| + | if (x < minX) minX = x; |
| + | if (y < minY) minY = y; |
| + | } |
| + | } |
| + | if (points.length > 0) { |
| + | maxX = points[0]; |
| + | maxY = points[1]; |
| + | for (var j = 2; j < points.length; j += 2) { |
| + | var x = points[j]; |
| + | var y = points[j + 1]; |
| + | if (x > maxX) maxX = x; |
| + | if (y > maxY) maxY = y; |
| + | } |
| + | } |
| + | var convpoints = Array(); |
| + | for (var j = 0; j < points.length; j += 2) { |
| + | convpoints[j] = Math.round(ime_scale * points[j]) - Math.round(ime_scale * minX); |
| + | convpoints[j + 1] = Math.round(ime_scale * points[j + 1]) - Math.round(ime_scale * minY); |
| + | } |
| + | var canvas = document.createElement('canvas'); |
| + | canvas.width = maxX + 1; |
| + | canvas.height = maxY + 1; |
| + | var ctx = canvas.getContext("2d"); |
| + | if (highlight) { |
| + | ctx.save(); |
| + | ctx.beginPath(); |
| + | ctx.moveTo(convpoints.shift(), convpoints.shift()); |
| + | while (convpoints.length) { |
| + | ctx.lineTo(convpoints.shift(), convpoints.shift()); |
| + | } |
| + | ctx.closePath(); |
| + | ctx.strokeStyle = 'red'; |
| + | ctx.stroke(); |
| + | ctx.fillStyle = 'red' |
| + | ctx.fill(); |
| + | ctx.closePath(); |
| + | ctx.restore(); |
| + | } else { |
| + | ctx.save(); |
| + | ctx.beginPath(); |
| + | ctx.moveTo(convpoints.shift(), convpoints.shift()); |
| + | while (convpoints.length) { |
| + | ctx.lineTo(convpoints.shift(), convpoints.shift()); |
| + | } |
| + | ctx.closePath(); |
| + | ctx.strokeStyle = 'black'; |
| + | ctx.stroke(); |
| + | ctx.fillStyle = 'black' |
| + | ctx.fill(); |
| + | ctx.closePath(); |
| + | ctx.restore(); |
| + | } |
| + | var meinBild = canvas.toDataURL('image/png', 1.0); |
| + | |
| + | var background = "url('" + meinBild + "')"; |
| + | |
| + | if (div.style.background != background) { |
| + | div.style.background = background; |
| + | div.style.backgroundRepeat = "no-repeat"; |
| + | } |
| + | } |
| + | |
| + | function ime_highlightMap() { |
| + | for (var i = 0; i < ime_areas.length; i++) { |
| + | var div = document.getElementById('imePreview' + i); |
| + | var area = ime_areas[i]; |
| + | if (div && area) { |
| + | if (i == ime_currentlyEditing) { |
| + | div.style.opacity = '0.9'; |
| + | div.style.filter = 'alpha(opacity=90)'; // IE |
| + | } else { |
| + | div.style.opacity = '0.75'; |
| + | div.style.filter = 'alpha(opacity=75)'; // IE |
| + | } |
| + | if (area.shape == 'rect') { |
| + | var backgroundColor = (i == ime_currentlyEditing) ? 'red' : 'black'; |
| + | if (div.style.backgroundColor != backgroundColor) div.style.backgroundColor = backgroundColor; |
| + | } else if (area.shape == 'circle') { |
| + | ime_highlightMapCircle(div, area.coords.radius, (i == ime_currentlyEditing)); |
| + | } else if (area.shape == 'poly') { |
| + | ime_highlightMapPoly(div, area.coords.points, (i == ime_currentlyEditing)); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | function ime_updateSelectArea() { |
| + | var selectArea = document.ime.area; |
| + | |
| + | while (selectArea.childNodes.length > 0) { |
| + | selectArea.removeChild(selectArea.lastChild); |
| + | } |
| + | |
| + | for (var i = 0; i < ime_areas.length; i++) { |
| + | var option = document.createElement('option'); |
| + | var area = ime_areas[i]; |
| + | option.value = i; |
| + | while (option.childNodes.length > 0) { |
| + | option.removeChild(option.lastChild); |
| + | } |
| + | var text = (area.title ? area.title : area.link) + ' [' + area.shape + ']'; |
| + | option.appendChild(document.createTextNode(text)); |
| + | if (i == ime_currentlyEditing) { |
| + | option.selected = 'selected'; |
| + | } |
| + | selectArea.appendChild(option); |
| + | } |
| + | } |
| + | |
| + | function ime_editArea(index) { |
| + | document.getElementById('imeProps').style.display = 'none'; |
| + | |
| + | var area = ime_areas[index]; |
| + | |
| + | if (area) { |
| + | ime_currentlyEditing = index; |
| + | |
| + | document.getElementById('imeProps').style.display = ''; |
| + | document.getElementById('imePropsRect').style.display = 'none'; |
| + | document.getElementById('imePropsCircle').style.display = 'none'; |
| + | document.getElementById('imePropsPoly').style.display = 'none'; |
| + | ime_mouseEventClear(); |
| + | |
| + | if (area.shape == 'rect') { |
| + | document.getElementById('imePropsRect').style.display = ''; |
| + | ime_mouseEventSet(ime_eventRect); |
| + | } else if (area.shape == 'circle') { |
| + | document.getElementById('imePropsCircle').style.display = ''; |
| + | ime_mouseEventSet(ime_eventCircle); |
| + | } else if (area.shape == 'poly') { |
| + | document.getElementById('imePropsPoly').style.display = ''; |
| + | ime_mouseEventSet(ime_eventPoly); |
| + | } |
| + | |
| + | document.ime.areaLink.value = area.link; |
| + | document.ime.areaTitle.value = area.title; |
| + | |
| + | var coords = area.coords; |
| + | if (area.shape == 'rect') { |
| + | document.ime.areaRectLeft.value = coords.left; |
| + | document.ime.areaRectTop.value = coords.top; |
| + | document.ime.areaRectRight.value = coords.right; |
| + | document.ime.areaRectBottom.value = coords.bottom; |
| + | } else if (area.shape == 'circle') { |
| + | document.ime.areaCircleX.value = coords.x; |
| + | document.ime.areaCircleY.value = coords.y; |
| + | document.ime.areaCircleRadius.value = coords.radius; |
| + | } else if (area.shape == 'poly') { |
| + | var propsPolyCoords = document.getElementById('imePropsPolyCoords'); |
| + | if (propsPolyCoords.childNodes.length > 0) propsPolyCoords.removeChild(propsPolyCoords.lastChild); |
| + | propsPolyCoords.appendChild(document.createTextNode(area.coords.points.join(", "))); |
| + | } |
| + | |
| + | ime_highlightMap(); |
| + | } |
| + | autoComplete(); |
| + | } |
| + | |
| + | function ime_deletePolyCoords() { |
| + | ime_areas[ime_currentlyEditing].coords.points = Array(); |
| + | ime_saveArea(); |
| + | } |
| + | |
| + | function ime_saveArea() { |
| + | var area = ime_areas[ime_currentlyEditing]; |
| + | area.link = document.ime.areaLink.value; |
| + | area.title = document.ime.areaTitle.value; |
| + | |
| + | var coords = area.coords; |
| + | if (area.shape == 'rect') { |
| + | coords.left = parseInt(document.ime.areaRectLeft.value); |
| + | coords.top = parseInt(document.ime.areaRectTop.value); |
| + | coords.right = parseInt(document.ime.areaRectRight.value); |
| + | coords.bottom = parseInt(document.ime.areaRectBottom.value); |
| + | } else if (area.shape == 'circle') { |
| + | if (parseInt(document.ime.areaCircleRadius.value) < 0) document.ime.areaCircleRadius.value = 0; |
| + | coords.x = parseInt(document.ime.areaCircleX.value); |
| + | coords.y = parseInt(document.ime.areaCircleY.value); |
| + | coords.radius = parseInt(document.ime.areaCircleRadius.value); |
| + | } else if (area.shape == 'poly') { |
| + | var propsPolyCoords = document.getElementById('imePropsPolyCoords'); |
| + | if (propsPolyCoords.childNodes.length > 0) propsPolyCoords.removeChild(propsPolyCoords.lastChild); |
| + | propsPolyCoords.appendChild(document.createTextNode(coords.points.join(", "))); |
| + | } |
| + | |
| + | ime_updateAreas(); |
| + | } |
| + | |
| + | function ime_deleteArea() { |
| + | ime_mouseEventClear(); |
| + | |
| + | // Remove element from ime_areas array |
| + | ime_areas.splice(ime_currentlyEditing, 1); |
| + | |
| + | // Remove preview div of the deleted area |
| + | var div = document.getElementById('imePreview' + ime_currentlyEditing); |
| + | if (div) { |
| + | div.parentNode.removeChild(div); |
| + | } |
| + | |
| + | // Move ids of preview divs to fill the hole |
| + | for (var i = ime_currentlyEditing + 1; i < ime_areas.length; i++) { |
| + | div = document.getElementById('imePreview' + i); |
| + | if (div) { |
| + | div.id = 'imePreview' + (i - 1); |
| + | } |
| + | } |
| + | |
| + | // If we deleted the last area, correct currently editing |
| + | if (ime_currentlyEditing >= ime_areas.length) { |
| + | ime_currentlyEditing = ime_areas.length - 1; |
| + | } |
| + | |
| + | ime_updateAreas(); |
| + | ime_editArea(ime_currentlyEditing); |
| + | } |
| + | |
| + | 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 = new ime_Area("rect"); |
| + | area.coords.left = parseInt(results[1]); |
| + | area.coords.top = parseInt(results[2]); |
| + | area.coords.right = parseInt(results[3]); |
| + | area.coords.bottom = parseInt(results[4]); |
| + | area.link = results[5]; |
| + | if (results[6]) area.title = results[6].substring(1); |
| + | ime_areas.push(area); |
| + | } else if (circleMatch.test(line)) { |
| + | var results = circleMatch.exec(line); |
| + | var area = new ime_Area("circle"); |
| + | area.coords.x = parseInt(results[1]); |
| + | area.coords.y = parseInt(results[2]); |
| + | area.coords.radius = parseInt(results[3]); |
| + | area.link = results[4]; |
| + | if (results[5]) area.title = results[5].substring(1); |
| + | ime_areas.push(area); |
| + | } else if (polyMatch.test(line)) { |
| + | var results = polyMatch.exec(line); |
| + | var area = new ime_Area("poly"); |
| + | area.coords.points = results[1].replace(/ +/, " ").split(" "); |
| + | for (var j = 0; j < area.coords.points.length; j++) { |
| + | area.coords.points[j] = parseInt(area.coords.points[j]); |
| + | } |
| + | area.link = results[2]; |
| + | if (results[3]) area.title = results[3].substring(1); |
| + | ime_areas.push(area); |
| + | } |
| + | } |
| + | ime_updateAreas(); |
| + | ime_hideImport(); |
| + | } |
| + | |
| + | function ime_showResult() { |
| + | $('#imeResult').show(); |
| + | $('#imeResultShow').hide(); |
| + | $('#imeResultHide').show(); |
| + | } |
| + | |
| + | function ime_hideResult() { |
| + | $('#imeResult').hide(); |
| + | $('#imeResultShow').show(); |
| + | $('#imeResultHide').hide(); |
| + | } |
| + | |
| + | function ime_showImport() { |
| + | $('#imeImport').show(); |
| + | $('#imeImportShow').hide(); |
| + | $('#imeImportHide').show(); |
| + | } |
| + | |
| + | function ime_hideImport() { |
| + | $('#imeImport').hide(); |
| + | $('#imeImportShow').show(); |
| + | $('#imeImportHide').hide(); |
| + | } |
| + | |
| + | /* |
| + | 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; |
| + | } |
| + | |
| + | |
| + | var 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 href="javascript:ime_newArea('rect')" style="padding:1px;background:white;color:darkblue" class="ime_t_rect">rect(angle)</a> <br /> <a href="javascript:ime_newArea('circle')" style="padding:1px;background:white;color:darkblue" class="ime_t_circle">circle</a> <br /> <a href="javascript:ime_newArea('poly')" 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 name="area" size="10" style="float:left;height:10em;margin:0.5ex;width:10em" onclick="ime_editArea(document.ime.area.selectedIndex)"></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" onchange="ime_saveArea()" /> <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" onchange="ime_saveArea()" /> </div> <div id="imePropsRect" style="float:left;margin:0.5ex;padding:0 1ex 1ex;display:none"> <label for="ime_areaRectLeft" class="ime_t_rectleft">Left</label>/<label for="ime_areaRectTop" class="ime_t_recttop">Top</label> <br /> <input id="ime_areaRectLeft" name="areaRectLeft" style="width:4em" onchange="ime_saveArea()" /> <input id="ime_areaRectTop" name="areaRectTop" style="width:4em" onchange="ime_saveArea()" /> <span class="ime_t_rectchoose1">Select with left mouse button</span> <br/> <label for="ime_areaRectRight" class="ime_t_rectright">Right</label>/<label for="ime_areaRectBottom" class="ime_t_rectbottom">Bottom</label> <br /> <input id="ime_areaRectRight" name="areaRectRight" style="width:4em" onchange="ime_saveArea()" /> <input id="ime_areaRectBottom" name="areaRectBottom" style="width:4em" onchange="ime_saveArea()" /> <span class="ime_t_rectchoose2">Select with right mouse button</span> </div> <div id="imePropsCircle" style="float:left;margin:0.5ex;padding:0 1ex 1ex;display:none"> <label class="ime_t_position">Position</label> <br /> <input name="areaCircleX" style="width:4em" onchange="ime_saveArea()" /> <input name="areaCircleY" style="width:4em" onchange="ime_saveArea()" /> <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" style="width:4em" onchange="ime_saveArea()" /> <span class="ime_t_circlechoose2">Select with right mouse button</span> </div> <div id="imePropsPoly" 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 href="javascript:ime_deletePolyCoords()" 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 href="javascript:ime_deleteArea()" 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" onchange="ime_updateResult()" /> </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" onchange="ime_updateResult()" 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" onchange="ime_updateResult()" 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" onchange="ime_updateResult()" 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" onchange="ime_updateResult()" 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" onchange="ime_updateResult()" 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 href="javascript:ime_showImport()" style="padding:1px;background:white;color:darkblue" id="imeImportShow"><span class="ime_t_showtextbox">Show text box</span> ></a> <a href="javascript:ime_hideImport()" 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 href="javascript:ime_importLines()" 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> <a href="javascript:ime_showResult()" style="padding:1px;background:white;color:darkblue" id="imeResultShow"><span class="ime_t_showwikicode">Show wikicode</span> ></a> <a href="javascript:ime_hideResult()" style="padding:1px;background:white;color:darkblue;display:none" id="imeResultHide"><span class="ime_t_hidewikicode">Hide wikicode</span> <</a> <div> <code id="imeResult" style="display:block;line-height:1.2em"></code> </div> </fieldset> </fieldset></form>`; |