Skip to content

Instantly share code, notes, and snippets.

@makr0
Created July 3, 2009 15:19
Show Gist options
  • Save makr0/140181 to your computer and use it in GitHub Desktop.
Save makr0/140181 to your computer and use it in GitHub Desktop.
Ubiquity command map2svg. Converts Imagemaps to svg
function injectJQ_SVG( callback) {
var doc = CmdUtils.getDocumentInsecure();
if (jQuery("script#_jquerySVG_",doc).length > 0)
return callback();
jQuery('head',doc).append('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/humanity/jquery-ui.css" rel="stylesheet" type="text/css">');
var g = doc.createElement("script");
g.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js";
doc.body.appendChild(g);
jQuery(g).load(function() {
var u = doc.createElement("script");
u.src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js";
u.id = "_jqueryUI_";
doc.body.appendChild(u);
jQuery(u).load(function() {
var s = doc.createElement("script");
s.src = "http://keith-wood.name/js/jquery.svg.js";
s.id = "_jquerySVG_";
doc.body.appendChild(s);
jQuery(s).load(callback);
});
});
}
CmdUtils.CreateCommand({
name: "map2svg",
description: "Convert Imagemap to SVG",
preview: function(pblock, input) {
var document = CmdUtils.getDocumentInsecure();
maps = jQuery(document.body).find('map').length;
pblock.innerHTML = maps+ " Maps on this page.";
},
execute: function(input) {
var document = CmdUtils.getDocumentInsecure();
var svgText;
injectJQ_SVG( function(){
var $=CmdUtils.getWindowInsecure().jQuery;
var maps = $("map");
var svgdiv = $("<div></div>")
.appendTo(document.body)
.css({width:"100%",height:"100%",
background: "#e8e8e8",})
.svg({onLoad:function( svg ){
maps.each(function(){
svg.configure({width:"100%", height:"100%"});
var g = svg.group({stroke: 'black', 'stroke-width': '0.5', fill: 'none'});
$('area',this).each(function(){
coords = this.coords.split(',');
svgcoords = [];
info = this.title||this.alt;
info = info + ','+this.href.replace(/.*(WK\*.*)\).*/,'$1').replace(/\*/,'_');
for( i = 0; i <= coords.length; i+=2) {
svgcoords.push([coords[i],coords[i+1]]);
}
if( this.shape=="circle" ) {
svg.circle(g, coords[0],coords[1],coords[2],{class:info});
}
if( this.shape=="poly" )
svg.polygon(g, svgcoords,{fill:'#f0f0f0',class:info});
if( this.shape=="rect" )
svg.rect(svgcoords[0][0], svgcoords[0][1],
svgcoords[1][0]-svgcoords[0][0],
svgcoords[1][1]-svgcoords[0][1],
{fill:'yellow',stroke:'black',class:info});
});
});
svgText=svg.toSVG();
}});
svgdiv.click(function(){$('<textarea cols=40 rows=20>'+svgText+'</textarea>').css({fontSize:"12px"}).appendTo(document.body).dialog({title:"svg-Text"});});
svgdiv.wrap('<div></div>').dialog({title:"converted Image Maps"});
} );
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment