diff --git a/CHANGELOG.md b/CHANGELOG.md index 15dc336..0cb3a39 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog # +Version 2.3 PR + * Added export compatible with the format of the spip plugin [Image cliquable](https://contrib.spip.net/Plugin-Image-Cliquable) + * Added a button to change maphilight visibility and list visibility + Version 2.2 * Updated excanvas to [r3](https://code.google.com/p/imgmap/source/detail?r=3) - should solve IE8 problems * Added Example with ExtJs integration, thanks to Colin Bell diff --git a/changelog b/changelog index a0baa37..02c739c 100644 --- a/changelog +++ b/changelog @@ -2,6 +2,10 @@ = Changelog = +Version 2.3 PR + * Added export compatible with the format of the spip plugin Image cliquable + * Added a button to change maphilight visibility and list visibility + Version 2.2 * Updated excanvas to r3 - should solve IE8 problems * Added Example with ExtJs integration, thanks to Colin Bell diff --git a/examples/example1.html b/examples/example1.html index d8d5cde..7ed52a4 100644 --- a/examples/example1.html +++ b/examples/example1.html @@ -1,22 +1,25 @@ + -Online Image Map Editor - Example 1 - - - - - + + + -

-Example 1 shows how to use the imgmap component in a complete imagemap editor application. This example is -functionally equivalent to the online editor found at -http://www.maschek.hu/imagemap/imgmap.
-To use the uploader component ("An image on your computer") you will need to open the example from a php-enabled webserver. +

+ Example 1 shows how to use the imgmap component in a complete imagemap editor application. This example is + functionally equivalent to the online editor found at + http://www.maschek.hu/imagemap/imgmap.
+ To use the uploader component ("An image on your computer") you will need to open the example from a php-enabled + webserver. -

+

@@ -25,31 +28,28 @@
An image on your computer:
- +
- accept
- + accept
+
An image on the Internet:
- accept
- + accept
+
Use a sample image:
- accept
+ accept
@@ -57,54 +57,78 @@ Image map areas
-
- - Add new area - Delete selected area - Preview image map - Get image map HTML - - - - -
- More actions - -
- -
+
+ +
- -
+ +
Image
-
+
@@ -117,13 +141,15 @@ Code
-
+
+
+
-
- - + + - + + \ No newline at end of file diff --git a/examples/example1_files/default_interface.js b/examples/example1_files/default_interface.js index a6d7d06..c32bae4 100644 --- a/examples/example1_files/default_interface.js +++ b/examples/example1_files/default_interface.js @@ -8,63 +8,77 @@ var myimgmap, props, outputmode, imgroot; /** FUNCTION SECTION **********************************************************/ function gui_toggleMore() { - var parent = $('#more_actions').parent().find('.toggler'); - $('#more_actions').css({ - top: $(parent).offset().top + ($(parent).outerHeight()), - left: $(parent).offset().left - }); - - $('#more_actions').slideToggle(200, function () { - if ($(this).css('display') == 'none') { - $(parent).addClass('toggler_off'); - } - else { - $(parent).removeClass('toggler_off'); - } - }); + var parent = $("#more_actions").parent().find(".toggler"); + $("#more_actions").css({ + top: $(parent).offset().top + $(parent).outerHeight(), + left: $(parent).offset().left, + }); + + $("#more_actions").slideToggle(200, function () { + if ($(this).css("display") == "none") { + $(parent).addClass("toggler_off"); + } else { + $(parent).removeClass("toggler_off"); + } + }); } function gui_colorChanged(obj) { - myimgmap.pic_container.style.backgroundColor = obj.value; - gui_toggleMore(); + myimgmap.pic_container.style.backgroundColor = obj.value; + gui_toggleMore(); } - /** * Handles mouseover on props row. */ function gui_row_mouseover(e) { - if (myimgmap.is_drawing) {return;}//exit if in drawing state - if (myimgmap.viewmode === 1) {return;}//exit if preview mode - var obj = (myimgmap.isMSIE) ? window.event.srcElement : e.currentTarget; - if (typeof obj.aid == 'undefined') {obj = obj.parentNode;} - //console.log(obj.aid); - myimgmap.highlightArea(obj.aid); + if (myimgmap.is_drawing) { + return; + } //exit if in drawing state + if (myimgmap.viewmode === 1) { + return; + } //exit if preview mode + var obj = myimgmap.isMSIE ? window.event.srcElement : e.currentTarget; + if (typeof obj.aid == "undefined") { + obj = obj.parentNode; + } + //console.log(obj.aid); + myimgmap.highlightArea(obj.aid); } /** * Handles mouseout on props row. */ function gui_row_mouseout(e) { - if (myimgmap.is_drawing) {return;}//exit if in drawing state - if (myimgmap.viewmode === 1) {return;}//exit if preview mode - var obj = (myimgmap.isMSIE) ? window.event.srcElement : e.currentTarget; - if (typeof obj.aid == 'undefined') {obj = obj.parentNode;} - myimgmap.blurArea(obj.aid); + if (myimgmap.is_drawing) { + return; + } //exit if in drawing state + if (myimgmap.viewmode === 1) { + return; + } //exit if preview mode + var obj = myimgmap.isMSIE ? window.event.srcElement : e.currentTarget; + if (typeof obj.aid == "undefined") { + obj = obj.parentNode; + } + myimgmap.blurArea(obj.aid); } /** * Handles click on props row. */ function gui_row_click(e) { - if (myimgmap.viewmode === 1) {return;}//exit if preview mode - var obj = (myimgmap.isMSIE) ? window.event.srcElement : e.currentTarget; - //var multiple = (e.originalTarget.name == 'img_active'); - //myimgmap.log(e.originalTarget); - if (typeof obj.aid == 'undefined') {obj = obj.parentNode;} - //gui_row_select(obj.aid, false, multiple); - gui_row_select(obj.aid, false, false); - myimgmap.currentid = obj.aid; + if (myimgmap.viewmode === 1) { + return; + } //exit if preview mode + var obj = myimgmap.isMSIE ? window.event.srcElement : e.currentTarget; + //var multiple = (e.originalTarget.name == 'img_active'); + //myimgmap.log(e.originalTarget); + if (typeof obj.aid == "undefined") { + obj = obj.parentNode; + } + //gui_row_select(obj.aid, false, multiple); + gui_row_select(obj.aid, false, false); + myimgmap.currentid = obj.aid; } /** @@ -73,48 +87,56 @@ function gui_row_click(e) { * @date 2006-06-06 16:55:29 */ function gui_row_select(id, setfocus, multiple) { - if (myimgmap.is_drawing) {return;}//exit if in drawing state - if (myimgmap.viewmode === 1) {return;}//exit if preview mode - if (!document.getElementById('img_active_'+id)) {return;} - //if (!multiple) - gui_cb_unselect_all(); - document.getElementById('img_active_'+id).checked = 1; - if (setfocus) { - document.getElementById('img_active_'+id).focus(); - } - //remove all background styles - for (var i = 0; i < props.length; i++) { - if (props[i]) { - props[i].style.background = ''; - } - } - //put highlight on actual props row - props[id].style.background = '#e7e7e7'; + if (myimgmap.is_drawing) { + return; + } //exit if in drawing state + if (myimgmap.viewmode === 1) { + return; + } //exit if preview mode + if (!document.getElementById("img_active_" + id)) { + return; + } + //if (!multiple) + gui_cb_unselect_all(); + document.getElementById("img_active_" + id).checked = 1; + if (setfocus) { + document.getElementById("img_active_" + id).focus(); + } + //remove all background styles + for (var i = 0; i < props.length; i++) { + if (props[i]) { + props[i].style.background = ""; + } + } + //put highlight on actual props row + props[id].style.background = "#e7e7e7"; } /** * Handles delete keypress when focus is on the leading checkbox/radio. - * @author adam + * @author adam */ function gui_cb_keydown(e) { - if (myimgmap.viewmode === 1) {return;}//exit if preview mode - var key = (myimgmap.isMSIE) ? event.keyCode : e.keyCode; - //alert(key); - if (key == 46) { - //delete pressed - myimgmap.removeArea(myimgmap.currentid); - } + if (myimgmap.viewmode === 1) { + return; + } //exit if preview mode + var key = myimgmap.isMSIE ? event.keyCode : e.keyCode; + //alert(key); + if (key == 46) { + //delete pressed + myimgmap.removeArea(myimgmap.currentid); + } } /** * Unchecks all checboxes/radios. */ function gui_cb_unselect_all() { - for (var i = 0; i < props.length; i++) { - if (props[i]) { - document.getElementById('img_active_'+i).checked = false; - } - } + for (var i = 0; i < props.length; i++) { + if (props[i]) { + document.getElementById("img_active_" + i).checked = false; + } + } } /** @@ -124,37 +146,46 @@ function gui_cb_unselect_all() { * @date 25-09-2007 17:12:43 */ function gui_coords_keydown(e) { - if (myimgmap.viewmode === 1) {return;}//exit if preview mode - var key = (myimgmap.isMSIE || myimgmap.isOpera) ? event.keyCode : e.keyCode; - var obj = (myimgmap.isMSIE || myimgmap.isOpera) ? window.event.srcElement : e.originalTarget; - //obj is the input field - //this.log(key); - //this.log(obj); - if (key == 40 || key == 38) { - //down or up pressed - //get the coords - var coords = obj.value.split(','); - var s = getSelectionStart(obj);//helper function - var j = 0; - for (var i=0, le = coords.length; i s) { - //this is the coord we want - if (key == 40 && coords[i] > 0) {coords[i]--;} - if (key == 38) {coords[i]++;} - break; - } - //jump one more because of comma - j++; - } - obj.value = coords.join(','); - if (obj.value != myimgmap.areas[obj.parentNode.aid].lastInput) { - myimgmap._recalculate(obj.parentNode.aid, obj.value);//contains repaint - } - //set cursor back to its original position - setSelectionRange(obj, s); - return true; - } + if (myimgmap.viewmode === 1) { + return; + } //exit if preview mode + var key = myimgmap.isMSIE || myimgmap.isOpera ? event.keyCode : e.keyCode; + var obj = + myimgmap.isMSIE || myimgmap.isOpera + ? window.event.srcElement + : e.originalTarget; + //obj is the input field + //this.log(key); + //this.log(obj); + if (key == 40 || key == 38) { + //down or up pressed + //get the coords + var coords = obj.value.split(","); + var s = getSelectionStart(obj); //helper function + var j = 0; + for (var i = 0, le = coords.length; i < le; i++) { + j += coords[i].length; + if (j > s) { + //this is the coord we want + if (key == 40 && coords[i] > 0) { + coords[i]--; + } + if (key == 38) { + coords[i]++; + } + break; + } + //jump one more because of comma + j++; + } + obj.value = coords.join(","); + if (obj.value != myimgmap.areas[obj.parentNode.aid].lastInput) { + myimgmap._recalculate(obj.parentNode.aid, obj.value); //contains repaint + } + //set cursor back to its original position + setSelectionRange(obj, s); + return true; + } } /** @@ -163,15 +194,16 @@ function gui_coords_keydown(e) { * @url http://javascript.nwbox.com/cursor_position/ */ function getSelectionStart(obj) { - if (obj.createTextRange) { - var r = document.selection.createRange().duplicate(); - r.moveEnd('character', obj.value.length); - if (r.text === '') {return obj.value.length;} - return obj.value.lastIndexOf(r.text); - } - else { - return obj.selectionStart; - } + if (obj.createTextRange) { + var r = document.selection.createRange().duplicate(); + r.moveEnd("character", obj.value.length); + if (r.text === "") { + return obj.value.length; + } + return obj.value.lastIndexOf(r.text); + } else { + return obj.selectionStart; + } } /** @@ -179,21 +211,21 @@ function getSelectionStart(obj) { * @link http://www.codingforums.com/archive/index.php/t-90176.html */ function setSelectionRange(obj, start, end) { - if (typeof end == "undefined") {end = start;} - if (obj.setSelectionRange) { - obj.focus(); // to make behaviour consistent with IE - obj.setSelectionRange(start, end); - } - else if (obj.createTextRange) { - var range = obj.createTextRange(); - range.collapse(true); - range.moveEnd('character', end); - range.moveStart('character', start); - range.select(); - } + if (typeof end == "undefined") { + end = start; + } + if (obj.setSelectionRange) { + obj.focus(); // to make behaviour consistent with IE + obj.setSelectionRange(start, end); + } else if (obj.createTextRange) { + var range = obj.createTextRange(); + range.collapse(true); + range.moveEnd("character", end); + range.moveStart("character", start); + range.select(); + } } - /** * Called when one of the properties change, and the recalculate function * must be called. @@ -201,221 +233,307 @@ function setSelectionRange(obj, start, end) { * @author Adam Maschek (adam.maschek(at)gmail.com) */ function gui_input_change(e) { - if (myimgmap.viewmode === 1) {return;}//exit if preview mode - if (myimgmap.is_drawing) {return;}//exit if drawing - //console.log('blur'); - var obj = (myimgmap.isMSIE) ? window.event.srcElement : e.currentTarget; - //console.log(obj); - var id = obj.parentNode.aid; - //console.log(this.areas[id]); - if (obj.name == 'img_href') {myimgmap.areas[id].ahref = obj.value;} - else if (obj.name == 'img_alt') {myimgmap.areas[id].aalt = obj.value;} - else if (obj.name == 'img_title') {myimgmap.areas[id].atitle = obj.value;} - else if (obj.name == 'img_target') {myimgmap.areas[id].atarget = obj.value;} - else if (obj.name == 'img_shape') { - if (myimgmap.areas[id].shape != obj.value && myimgmap.areas[id].shape != 'undefined') { - //shape changed, adjust coords intelligently inside _normCoords - var coords = ''; - if (props[id]) { - coords = props[id].getElementsByTagName('input')[2].value; - } - else { - coords = myimgmap.areas[id].lastInput || '' ; - } - coords = myimgmap._normCoords(coords, obj.value, 'from'+myimgmap.areas[id].shape); - if (props[id]) { - props[id].getElementsByTagName('input')[2].value = coords; - } - myimgmap.areas[id].shape = obj.value; - myimgmap._recalculate(id, coords); - myimgmap.areas[id].lastInput = coords; - } - else if (myimgmap.areas[id].shape == 'undefined') { - myimgmap.nextShape = obj.value; - } - } - if (myimgmap.areas[id] && myimgmap.areas[id].shape != 'undefined') { - myimgmap._recalculate(id, props[id].getElementsByTagName('input')[2].value); - myimgmap.fireEvent('onHtmlChanged', myimgmap.getMapHTML());//temp ## shouldnt be here - } + if (myimgmap.viewmode === 1) { + return; + } //exit if preview mode + if (myimgmap.is_drawing) { + return; + } //exit if drawing + //console.log('blur'); + var obj = myimgmap.isMSIE ? window.event.srcElement : e.currentTarget; + //console.log(obj); + var id = obj.parentNode.aid; + //console.log(this.areas[id]); + if (obj.name == "img_href") { + myimgmap.areas[id].ahref = obj.value; + } else if (obj.name == "img_alt") { + myimgmap.areas[id].aalt = obj.value; + } else if (obj.name == "img_title") { + myimgmap.areas[id].atitle = obj.value; + } else if (obj.name == "img_target") { + myimgmap.areas[id].atarget = obj.value; + } else if (obj.name == "img_shape") { + if ( + myimgmap.areas[id].shape != obj.value && + myimgmap.areas[id].shape != "undefined" + ) { + //shape changed, adjust coords intelligently inside _normCoords + var coords = ""; + if (props[id]) { + coords = props[id].getElementsByTagName("input")[2].value; + } else { + coords = myimgmap.areas[id].lastInput || ""; + } + coords = myimgmap._normCoords( + coords, + obj.value, + "from" + myimgmap.areas[id].shape + ); + if (props[id]) { + props[id].getElementsByTagName("input")[2].value = coords; + } + myimgmap.areas[id].shape = obj.value; + myimgmap._recalculate(id, coords); + myimgmap.areas[id].lastInput = coords; + } else if (myimgmap.areas[id].shape == "undefined") { + myimgmap.nextShape = obj.value; + } + } + if (myimgmap.areas[id] && myimgmap.areas[id].shape != "undefined") { + myimgmap._recalculate(id, props[id].getElementsByTagName("input")[2].value); + myimgmap.fireEvent("onHtmlChanged", myimgmap.getMapHTML()); //temp ## shouldnt be here + } } /** * Called from imgmap when a new area is added. */ function gui_addArea(id) { - //var id = props.length; - //id = 1; - props[id] = document.createElement('DIV'); - document.getElementById('form_container').appendChild(props[id]); - - props[id].id = 'img_area_' + id; - props[id].aid = id; - props[id].className = 'img_area'; - //hook ROW event handlers - myimgmap.addEvent(props[id], 'mouseover', gui_row_mouseover); - myimgmap.addEvent(props[id], 'mouseout', gui_row_mouseout); - myimgmap.addEvent(props[id], 'click', gui_row_click); - var temp = ''; - //temp+= ''; - //could be checkbox in the future - temp+= ''; - temp+= ''; - temp+= 'Coords: '; - temp+= 'Href: '; - temp+= 'Alt: '; - temp+= 'Target: '; - props[id].innerHTML = temp; - //hook more event handlers to individual inputs - - myimgmap.addEvent(props[id].getElementsByTagName('input')[1], 'keydown', gui_cb_keydown); - myimgmap.addEvent(props[id].getElementsByTagName('input')[2], 'keydown', gui_coords_keydown); - myimgmap.addEvent(props[id].getElementsByTagName('input')[2], 'change', gui_input_change); - myimgmap.addEvent(props[id].getElementsByTagName('input')[3], 'change', gui_input_change); - myimgmap.addEvent(props[id].getElementsByTagName('input')[4], 'change', gui_input_change); - myimgmap.addEvent(props[id].getElementsByTagName('select')[0], 'change', gui_input_change); - myimgmap.addEvent(props[id].getElementsByTagName('select')[1], 'change', gui_input_change); - if (myimgmap.isSafari) { - //need these for safari - myimgmap.addEvent(props[id].getElementsByTagName('select')[0], 'change', gui_row_click); - myimgmap.addEvent(props[id].getElementsByTagName('select')[1], 'change', gui_row_click); - } - //set shape as nextshape if set - if (myimgmap.nextShape) {props[id].getElementsByTagName('select')[0].value = myimgmap.nextShape;} - //alert(this.props[id].parentNode.innerHTML); - gui_row_select(id, true); + //var id = props.length; + //id = 1; + props[id] = document.createElement("DIV"); + document.getElementById("form_container").appendChild(props[id]); + + props[id].id = "img_area_" + id; + props[id].aid = id; + props[id].className = "img_area"; + //hook ROW event handlers + myimgmap.addEvent(props[id], "mouseover", gui_row_mouseover); + myimgmap.addEvent(props[id], "mouseout", gui_row_mouseout); + myimgmap.addEvent(props[id], "click", gui_row_click); + var temp = + ''; + //temp+= ''; + //could be checkbox in the future + temp += + ''; + temp += '"; + temp += + 'Coords: '; + temp += 'Href: '; + temp += 'Alt: '; + temp += 'Target: "; + temp += '"; + props[id].innerHTML = temp; + //hook more event handlers to individual inputs + + myimgmap.addEvent( + props[id].getElementsByTagName("input")[1], + "keydown", + gui_cb_keydown + ); + myimgmap.addEvent( + props[id].getElementsByTagName("input")[2], + "keydown", + gui_coords_keydown + ); + myimgmap.addEvent( + props[id].getElementsByTagName("input")[2], + "change", + gui_input_change + ); + myimgmap.addEvent( + props[id].getElementsByTagName("input")[3], + "change", + gui_input_change + ); + myimgmap.addEvent( + props[id].getElementsByTagName("input")[4], + "change", + gui_input_change + ); + myimgmap.addEvent( + props[id].getElementsByTagName("select")[0], + "change", + gui_input_change + ); + myimgmap.addEvent( + props[id].getElementsByTagName("select")[1], + "change", + gui_input_change + ); + if (myimgmap.isSafari) { + //need these for safari + myimgmap.addEvent( + props[id].getElementsByTagName("select")[0], + "change", + gui_row_click + ); + myimgmap.addEvent( + props[id].getElementsByTagName("select")[1], + "change", + gui_row_click + ); + } + //set shape as nextshape if set + if (myimgmap.nextShape) { + props[id].getElementsByTagName("select")[0].value = myimgmap.nextShape; + } + //alert(this.props[id].parentNode.innerHTML); + gui_row_select(id, true); } /** * Called from imgmap when an area was removed. */ function gui_removeArea(id) { - if (props[id]) { - //shall we leave the last one? - var pprops = props[id].parentNode; - pprops.removeChild(props[id]); - var lastid = pprops.lastChild.aid; - props[id] = null; - try { - gui_row_select(lastid, true); - myimgmap.currentid = lastid; - } - catch (err) { - //alert('noparent'); - } - } + if (props[id]) { + //shall we leave the last one? + var pprops = props[id].parentNode; + pprops.removeChild(props[id]); + var lastid = pprops.lastChild.aid; + props[id] = null; + try { + gui_row_select(lastid, true); + myimgmap.currentid = lastid; + } catch (err) { + //alert('noparent'); + } + } } /** * Called from imgmap when mode changed to a given value (preview or normal) */ function gui_modeChanged(mode) { - var nodes, i; - if (mode == 1) { - //preview mode - if (document.getElementById('html_container')) { - document.getElementById('html_container').disabled = true; - } - //disable form elements (inputs and selects) - nodes = document.getElementById('form_container').getElementsByTagName("input"); - for (i=0; i 0 && !confirm('CSS maps only support rectangles. Are you sure you want to use this output mode?')) { - output = outputmode; - return false; - } - temp = 'This is the generated image map HTML + CSS code. '; - temp+= 'Click into the textarea below and press Ctrl+C to copy the code to your clipboard. '; - if (clipboard_enabled) { - temp+= 'Alternatively you can use the clipboard icon on the right. '; - temp+= ''; - } - temp+= 'Please note, that you have to use a positioned container to make use of the absolute coordinates '; - temp+= '(read more).'; - } - else if (output == 'wiki') { - temp = 'This is the generated image map Wiki code to use with MediaWiki ImageMap extension. '; - temp+= 'Click into the textarea below and press Ctrl+C to copy the code to your clipboard. '; - if (clipboard_enabled) { - temp+= 'Alternatively you can use the clipboard icon on the right. '; - temp+= ''; - } - temp+= 'Please note, that you might need to change the Image url '; - temp+= '(read more).'; - } - else { - temp = 'This is the generated image map HTML code. '; - temp+= 'Click into the textarea below and press Ctrl+C to copy the code to your clipboard. '; - if (clipboard_enabled) { - temp+= 'Alternatively you can use the clipboard icon on the right. '; - temp+= ''; - } - temp+= 'Please note, that you have to attach this code to your image, via the usemap property '; - temp+= '(read more). '; - } - document.getElementById('output_help').innerHTML = temp; - //this will reload areas and sets dropdown restrictions - myimgmap.setMapHTML(myimgmap.getMapHTML()); - outputmode = output; - return true; + var temp, i; + var clipboard_enabled = window.clipboardData || typeof air == "object"; + var output = document.getElementById("dd_output").value; + + // Hide all SPIP elements by default + $(".spip_options").hide(); + $("#spip_options").hide(); + + if (output == "spip") { + temp = "This is the generated code in SPIP 4 format. "; + temp += "Click in the text area below and press Ctrl+C to copy the code. "; + if (clipboard_enabled) { + temp += "You can also use the clipboard icon on the right. "; + temp += + ''; + } + // Show SPIP options + $(".spip_options").show(); + $("#spip_options").show(); + } else if (output == "css") { + // ...existing code for CSS... + for (i = 0; i < myimgmap.areas.length; i++) { + if ( + myimgmap.areas[i] && + myimgmap.areas[i].shape != "rect" && + myimgmap.areas[i].shape != "undefined" + ) { + var others = true; + break; + } + } + if (others) { + if ( + !confirm( + "CSS maps only support rectangles. Are you sure you want to transform all your areas to rectangles?" + ) + ) { + output = outputmode; + return false; + } else { + //transform old areas + for (i = 0; i < props.length; i++) { + if ( + props[i] && + props[i].getElementsByTagName("select")[0].value != "rect" && + myimgmap.areas[i].shape != "undefined" + ) { + var coords = props[i].getElementsByTagName("input")[2].value; + coords = myimgmap._normCoords( + coords, + "rect", + "from" + myimgmap.areas[i].shape + ); + myimgmap.areas[i].shape = "rect"; + myimgmap._recalculate(i, coords); + myimgmap.areas[i].lastInput = coords; + //dropdown and new coords will be set when setmaphtml is called,see below + } + } + } + } else if ( + myimgmap.areas.length > 0 && + !confirm( + "CSS maps only support rectangles. Are you sure you want to use this output mode?" + ) + ) { + output = outputmode; + return false; + } + temp = "This is the generated image map HTML + CSS code. "; + temp += + "Click into the textarea below and press Ctrl+C to copy the code to your clipboard. "; + if (clipboard_enabled) { + temp += "Alternatively you can use the clipboard icon on the right. "; + temp += + ''; + } + temp += + "Please note, that you have to use a positioned container to make use of the absolute coordinates "; + temp += + '(read more).'; + } else if (output == "wiki") { + // ...existing code for wiki... + temp = + "This is the generated image map Wiki code to use with MediaWiki ImageMap extension. "; + temp += + "Click into the textarea below and press Ctrl+C to copy the code to your clipboard. "; + if (clipboard_enabled) { + temp += "Alternatively you can use the clipboard icon on the right. "; + temp += + ''; + } + temp += "Please note, that you might need to change the Image url "; + temp += + '(read more).'; + } else { + temp = "This is the generated image map HTML code. "; + // ...existing code for default... + temp += + "Click into the textarea below and press Ctrl+C to copy the code to your clipboard. "; + if (clipboard_enabled) { + temp += "Alternatively you can use the clipboard icon on the right. "; + temp += + ''; + } + temp += + "Please note, that you have to attach this code to your image, via the usemap property "; + temp += + '(read more). '; + } + // ...rest of existing code... + //this will reload areas and sets dropdown restrictions + myimgmap.setMapHTML(myimgmap.getMapHTML()); + outputmode = output; + return true; } - /** * Tries to copy imagemap output or text parameter to the clipboard. - * If in special environment (eg AIR), use specific functions. + * If in special environment (eg AIR), use specific functions. * @date 2006.10.24. 22:14:12 * @param text Text to copy, otherwise html_container will be used. */ function gui_toClipBoard(text) { - if (typeof text == 'undefined') {text = document.getElementById('html_container').value;} - try { - if (window.clipboardData) { - // IE send-to-clipboard method. - window.clipboardData.setData('Text', text); - } - else if (typeof air == 'object') { - air.Clipboard.generalClipboard.clear(); - air.Clipboard.generalClipboard.setData("air:text", text, false); - } - } - catch (err) { - myimgmap.log("Unable to set clipboard data", 1); - } + if (typeof text == "undefined") { + text = document.getElementById("html_container").value; + } + try { + if (window.clipboardData) { + // IE send-to-clipboard method. + window.clipboardData.setData("Text", text); + } else if (typeof air == "object") { + air.Clipboard.generalClipboard.clear(); + air.Clipboard.generalClipboard.setData("air:text", text, false); + } + } catch (err) { + myimgmap.log("Unable to set clipboard data", 1); + } } - /** INIT SECTION **************************************************************/ //instantiate the imgmap component, setting up some basic config values myimgmap = new imgmap({ -mode : "editor", -custom_callbacks : { - 'onStatusMessage' : function(str) {gui_statusMessage(str);},//to display status messages on gui - 'onHtmlChanged' : function(str) {gui_htmlChanged(str);},//to display updated html on gui - 'onModeChanged' : function(mode) {gui_modeChanged(mode);},//to switch normal and preview modes on gui - 'onAddArea' : function(id) {gui_addArea(id);},//to add new form element on gui - 'onRemoveArea' : function(id) {gui_removeArea(id);},//to remove form elements from gui - 'onAreaChanged' : function(obj) {gui_areaChanged(obj);}, - 'onSelectArea' : function(obj) {gui_selectArea(obj);}//to select form element when an area is clicked -}, -pic_container: document.getElementById('pic_container'), -bounding_box : false + mode: "editor", + custom_callbacks: { + onStatusMessage: function (str) { + gui_statusMessage(str); + }, //to display status messages on gui + onHtmlChanged: function (str) { + gui_htmlChanged(str); + }, //to display updated html on gui + onModeChanged: function (mode) { + gui_modeChanged(mode); + }, //to switch normal and preview modes on gui + onAddArea: function (id) { + gui_addArea(id); + }, //to add new form element on gui + onRemoveArea: function (id) { + gui_removeArea(id); + }, //to remove form elements from gui + onAreaChanged: function (obj) { + gui_areaChanged(obj); + }, + onSelectArea: function (obj) { + gui_selectArea(obj); + }, //to select form element when an area is clicked + }, + pic_container: document.getElementById("pic_container"), + bounding_box: false, }); //array of form elements props = []; -imgroot = 'example1_files/'; -outputmode = 'imgmap'; +imgroot = "example1_files/"; +outputmode = "imgmap"; gui_outputChanged(); -myimgmap.addEvent(document.getElementById('html_container'), 'blur', gui_htmlBlur); -myimgmap.addEvent(document.getElementById('html_container'), 'focus', gui_htmlFocus); - -$('#color1').colorPicker(); +myimgmap.addEvent( + document.getElementById("html_container"), + "blur", + gui_htmlBlur +); +myimgmap.addEvent( + document.getElementById("html_container"), + "focus", + gui_htmlFocus +); +$("#color1").colorPicker(); /** OUTPUT FUNCTIONS **********************************************************/ @@ -637,30 +826,48 @@ $('#color1').colorPicker(); * Just grab the areas array and do whatever you wish. */ function output_css() { - var html, coords, top, left, width, height; - html = '
'; - - //foreach areas - for (var i=0; i' + myimgmap.areas[i].atitle + ''; - } - } - } - html+= myimgmap.waterMark + '
'; - //alert(html); - return html; - + var html, coords, top, left, width, height; + html = '
'; + + //foreach areas + for (var i = 0; i < myimgmap.areas.length; i++) { + if (myimgmap.areas[i]) { + if (myimgmap.areas[i].shape && myimgmap.areas[i].shape != "undefined") { + coords = myimgmap.areas[i].lastInput; + top = myimgmap.areas[i].style.top; + left = myimgmap.areas[i].style.left; + width = myimgmap.areas[i].style.width; + height = myimgmap.areas[i].style.height; + html += + '' + + myimgmap.areas[i].atitle + + ""; + } + } + } + html += myimgmap.waterMark + "
"; + //alert(html); + return html; } /** @@ -678,24 +885,80 @@ desc bottom-left */ function output_wiki() { - var html, coords; - html = ''; - if (typeof myimgmap.pic != 'undefined') { - html+= 'Image:' + myimgmap.pic.src + '|' + myimgmap.pic.title + '\n'; - } - - //foreach areas - for (var i=0; i'; - //alert(html); - return html; + var html, coords; + html = ""; + if (typeof myimgmap.pic != "undefined") { + html += "Image:" + myimgmap.pic.src + "|" + myimgmap.pic.title + "\n"; + } + + //foreach areas + for (var i = 0; i < myimgmap.areas.length; i++) { + if (myimgmap.areas[i]) { + if (myimgmap.areas[i].shape && myimgmap.areas[i].shape != "undefined") { + coords = myimgmap.areas[i].lastInput.split(" ").join(" "); + html += + myimgmap.areas[i].shape + + " " + + coords + + " [[" + + myimgmap.areas[i].ahref + + "|" + + myimgmap.areas[i].aalt + + "]]\n"; + } + } + } + html += "#" + myimgmap.waterMark + "\n"; + //alert(html); + return html; +} + +// Add SPIP export function +function output_spip() { + var html = ""; + var docId = document.getElementById("spip_doc_id").value || "NNN"; + var useMapHilight = document.getElementById("spip_use_maphilight").checked; + var useNolist = document.getElementById("spip_use_nolist").checked; + + html += ""; + + return html; } /** BROWSERPLUS SECTION *******************************************************/ @@ -709,30 +972,30 @@ function bp_init() { BrowserPlus.init(function(res) { if (res.success) { BrowserPlus.require({ - services: [ - {service: 'DragAndDrop'}, - {service: "ImageAlter"} + services: [ + {service: 'DragAndDrop'}, + {service: "ImageAlter"} ]}, - function(res) { - if (res.success) { - var dnd = BrowserPlus.DragAndDrop; - dnd.AddDropTarget( - {id: "pic_container"}, - function(res) { - document.getElementById("pic_container").innerHTML = 'Drag and drop an image here to start editing, or select source above.'; - dnd.AttachCallbacks({ - id: "pic_container", - drop: bp_dropped - }, - function(){}); - - }); - } else { - //alert("Error Loading Browserplus Services: " + res.error); - } - }); + function(res) { + if (res.success) { + var dnd = BrowserPlus.DragAndDrop; + dnd.AddDropTarget( + {id: "pic_container"}, + function(res) { + document.getElementById("pic_container").innerHTML = 'Drag and drop an image here to start editing, or select source above.'; + dnd.AttachCallbacks({ + id: "pic_container", + drop: bp_dropped + }, + function(){}); + + }); + } else { + //alert("Error Loading Browserplus Services: " + res.error); + } + }); } else { - //alert("Failed to initialize BrowserPlus: " + res.error); + //alert("Failed to initialize BrowserPlus: " + res.error); } }); }