2010-01-31 07:11:57 +00:00
/ *
2009-11-25 13:51:42 +00:00
* svg - editor . js
*
* Licensed under the Apache License , Version 2
*
2010-01-13 21:03:00 +00:00
* Copyright ( c ) 2010 Alexis Deveria
* Copyright ( c ) 2010 Pavol Rusnak
* Copyright ( c ) 2010 Jeff Schiller
* Copyright ( c ) 2010 Narendra Sisodya
2009-11-25 13:51:42 +00:00
*
* /
2009-06-01 15:55:21 +00:00
2009-06-07 13:11:01 +00:00
function svg _edit _setup ( ) {
2009-11-10 21:31:47 +00:00
var uiStrings = {
'invalidAttrValGiven' : 'Invalid value given' ,
'noContentToFitTo' : 'No content to fit to' ,
'layer' : "Layer" ,
'dupeLayerName' : "There is already a layer named that!" ,
'enterUniqueLayerName' : "Please enter a unique layer name" ,
'enterNewLayerName' : "Please enter the new layer name" ,
'layerHasThatName' : "Layer already has that name" ,
'QmoveElemsToLayer' : "Move selected elements to layer '%s'?" ,
'QwantToClear' : 'Do you want to clear the drawing?\nThis will also erase your undo history!' ,
'QerrorsRevertToSource' : 'There were parsing errors in your SVG source.\nRevert back to original SVG source?' ,
2009-11-17 16:42:04 +00:00
'QignoreSourceChanges' : 'Ignore changes made to SVG source?' ,
2009-11-18 16:50:25 +00:00
'featNotSupported' : 'Feature not supported' ,
2009-11-20 19:23:09 +00:00
'enterNewImgURL' : 'Enter the new image URL' ,
'ok' : 'OK' ,
2009-12-11 20:35:51 +00:00
'cancel' : 'Cancel' ,
'key_up' : 'Up' ,
'key_down' : 'Down' ,
'key_backspace' : 'Backspace' ,
'key_del' : 'Del'
2010-01-20 22:15:54 +00:00
} ,
2009-11-10 21:31:47 +00:00
2010-01-20 22:15:54 +00:00
palette = [ "#000000" , "#202020" , "#404040" , "#606060" , "#808080" , "#a0a0a0" , "#c0c0c0" , "#e0e0e0" , "#ffffff" , "#800000" , "#ff0000" , "#808000" , "#ffff00" , "#008000" , "#00ff00" , "#008080" , "#00ffff" , "#000080" , "#0000ff" , "#800080" , "#ff00ff" , "#2b0000" , "#550000" , "#800000" , "#aa0000" , "#d40000" , "#ff0000" , "#ff2a2a" , "#ff5555" , "#ff8080" , "#ffaaaa" , "#ffd5d5" , "#280b0b" , "#501616" , "#782121" , "#a02c2c" , "#c83737" , "#d35f5f" , "#de8787" , "#e9afaf" , "#f4d7d7" , "#241c1c" , "#483737" , "#6c5353" , "#916f6f" , "#ac9393" , "#c8b7b7" , "#e3dbdb" , "#2b1100" , "#552200" , "#803300" , "#aa4400" , "#d45500" , "#ff6600" , "#ff7f2a" , "#ff9955" , "#ffb380" , "#ffccaa" , "#ffe6d5" , "#28170b" , "#502d16" , "#784421" , "#a05a2c" , "#c87137" , "#d38d5f" , "#deaa87" , "#e9c6af" , "#f4e3d7" , "#241f1c" , "#483e37" , "#6c5d53" , "#917c6f" , "#ac9d93" , "#c8beb7" , "#e3dedb" , "#2b2200" , "#554400" , "#806600" , "#aa8800" , "#d4aa00" , "#ffcc00" , "#ffd42a" , "#ffdd55" , "#ffe680" , "#ffeeaa" , "#fff6d5" , "#28220b" , "#504416" , "#786721" , "#a0892c" , "#c8ab37" , "#d3bc5f" , "#decd87" , "#e9ddaf" , "#f4eed7" , "#24221c" , "#484537" , "#6c6753" , "#918a6f" , "#aca793" , "#c8c4b7" , "#e3e2db" , "#222b00" , "#445500" , "#668000" , "#88aa00" , "#aad400" , "#ccff00" , "#d4ff2a" , "#ddff55" , "#e5ff80" , "#eeffaa" , "#f6ffd5" , "#22280b" , "#445016" , "#677821" , "#89a02c" , "#abc837" , "#bcd35f" , "#cdde87" , "#dde9af" , "#eef4d7" , "#22241c" , "#454837" , "#676c53" , "#8a916f" , "#a7ac93" , "#c4c8b7" , "#e2e3db" , "#112b00" , "#225500" , "#338000" , "#44aa00" , "#55d400" , "#66ff00" , "#7fff2a" , "#99ff55" , "#b3ff80" , "#ccffaa" , "#e5ffd5" , "#17280b" , "#2d5016" , "#447821" , "#5aa02c" , "#71c837" , "#8dd35f" , "#aade87" , "#c6e9af" , "#e3f4d7" , "#1f241c" , "#3e4837" , "#5d6c53" , "#7c916f" , "#9dac93" , "#bec8b7" , "#dee3db" , "#002b00" , "#005500" , "#008000" , "#00aa00" , "#00d400" , "#00ff00" , "#2aff2a" , "#55ff55" , "#80ff80" , "#aaffaa" , "#d5ffd5" , "#0b280b" , "#165016" , "#217821" , "#2ca02c" , "#37c837" , "#5fd35f" , "#87de87" , "#afe9af" , "#d7f4d7" , "#1c241c" , "#374837" , "#536c53" , "#6f916f" , "#93ac93" , "#b7c8b7" , "#dbe3db" , "#002b11" , "#005522" , "#008033" , "#00aa44" , "#00d455" , "#00ff66" , "#2aff80" , "#55ff99" , "#80ffb3" , "#aaffcc" , "#d5ffe6" , "#0b2817" , "#16502d" , "#217844" , "#2ca05a" , "#37c871" , "#5fd38d" , "#87deaa" , "#afe9c6" , "#d7f4e3" , "#1c241f" , "#37483e" , "#536c5d" , "#6f917c" , "#93ac9d" , "#b7c8be" , "#dbe3de" , "#002b22" , "#005544" , "#008066" , "#00aa88" , "#00d4aa" , "#00ffcc" , "#2affd5" , "#55ffdd" , "#80ffe6" , "#aaffee" , "#d5fff6" , "#0b2822" , "#165044" , "#217867" , "#2ca089" , "#37c8ab" , "#5fd3bc" , "#87decd" , "#afe9dd" , "#d7f4ee" , "#1c2422" , "#374845" , "#536c67" , "#6f918a" , "#93aca7" , "#b7c8c4" , "#dbe3e2" , "#00222b" , "#004455" , "#006680" , "#0088aa" , "#00aad4" , "#00ccff" , "#2ad4ff" , "#55ddff" , "#80e5ff" , "#aaeeff" , "#d5f6ff" , "#0b2228" , "#164450" , "#216778" , "#2c89a0" , "#37abc8" , "#5fbcd3" , "#87cdde" , "#afdde9" , "#d7eef4" , "#1c2224" , "#374548" , "#53676c" , "#6f8a91" , "#93a7ac" , "#b7c4c8" , "#dbe2e3" , "#00112b" , "#002255" , "#003380" , "#0044aa" , "#0055d4" , "#0066ff" , "#2a7fff" , "#5599ff" , "#80b3ff" , "#aaccff" , "#d5e5ff" , "#0b1728" , "#162d50" , "#214478" , "#2c5aa0" , "#3771c8" , "#5f8dd3" , "#87aade" , "#afc6e9" , "#d7e3f4" , "#1c1f24" , "#373e48" , "#535d6c" , "#6f7c91" , "#939dac" , "#b7bec8" , "#dbdee3" , "#00002b" , "#000055" , "#000080" , "#0000aa" , "#0000d4" , "#0000ff" , "#2a2aff" , "#5555ff" , "#8080ff" , "#aaaaff" , "#d5d5ff" , "#0b0b28" , "#161650" , "#212178" , "#2c2ca0" , "#3737c8" , "#5f5fd3" , "#8787de" , "#afafe9" , "#d7d7f4" , "#1c1c24" , "#373748" , "#53536c" , "#6f6f91" , "#9393ac" , "#b7b7c8" , "#dbdbe3" , "#11002b" , "#220055" , "#330080" , "#4400aa" , "#5500d4" , "#6600ff" , "#7f2aff" , "#9955ff" , "#b380ff" , "#ccaaff" , "#e5d5ff" , "#170b28" , "#2d1650" , "#442178" , "#5a2ca0" , "#7137c8" , "#8d5fd3" , "#aa87de" , "#c6afe9" , "#e3d7f4" , "#1f1c24" , "#3e3748" , "#5d536c" , "#7c6f91" , "#9d93ac" , "#beb7c8" , "#dedbe3" , "#22002b" , "#440055" , "#660080" , "#8800aa" , "#aa00d4" , "#cc00ff" , "#d42aff" , "#dd55ff" , "#e580ff" , "#eeaaff" , "#f6d5ff" , "#220b28" , "#441650" , "#672178" , "#892ca0" , "#ab37c8" , "#bc5fd3" , "#cd87de" , "#ddafe9" , "#eed7f4" , "#221c24" , "#453748" , "#67536c" , "#8a6f91" , "#a793ac" , "#c4b7c8" , "#e2dbe3" , "#2b0022" , "#550044" , "#800066" , "#aa0088" , "#d400aa" , "#ff00cc" , "#ff2ad4" , "#ff55dd" , "#ff80e5" , "#ffaaee" , "#ffd5f6" , "#280b22" , "#501644" , "#782167" , "#a02c89" , "#c837ab" , "#d35fbc" , "#de87cd" , "#e9afdd" , "#f4d7ee" , "#241c22" , "#483745" , "#6c5367" , "#916f8a" , "#ac93a7" , "#c8b7c4" , "#e3dbe2" , "#2b0011" , "#550022" , "#800033" , "#aa0044" , "#d40055" , "#ff0066" , "#ff2a7f" , "#ff5599" , "#ff80b2" , " #
2009-08-21 15:35:55 +00:00
2010-01-20 22:15:54 +00:00
isMac = false , //(navigator.platform.indexOf("Mac") != -1);
modKey = "" , //(isMac ? "meta+" : "ctrl+");
svgCanvas = new SvgCanvas ( document . getElementById ( "svgcanvas" ) ) ,
path = svgCanvas . pathActions ,
default _img _url = "images/logo.png" ,
workarea = $ ( "#workarea" ) ;
2010-01-15 15:04:57 +00:00
2009-11-11 18:13:26 +00:00
// Store and retrieve preferences
$ . pref = function ( key , val ) {
2009-11-18 16:50:25 +00:00
if ( val ) curPrefs [ key ] = val ;
2009-11-11 18:13:26 +00:00
key = 'svg-edit-' + key ;
2010-01-20 22:15:54 +00:00
var host = location . hostname ,
onweb = host && host . indexOf ( '.' ) != - 1 ,
store = ( val != undefined ) ,
storage = false ;
2009-11-11 21:13:16 +00:00
// Some FF versions throw security errors here
try {
if ( window . localStorage && onweb ) {
storage = localStorage ;
}
} catch ( e ) { }
try {
if ( window . globalStorage && onweb ) {
storage = globalStorage [ host ] ;
}
} catch ( e ) { }
if ( storage ) {
if ( store ) storage . setItem ( key , val ) ;
else return storage . getItem ( key ) ;
2009-11-11 18:13:26 +00:00
} else if ( window . widget ) {
if ( store ) widget . setPreferenceForKey ( val , key ) ;
else return widget . preferenceForKey ( key ) ;
} else {
if ( store ) {
var d = new Date ( ) ;
d . setTime ( d . getTime ( ) + 31536000000 ) ;
val = encodeURIComponent ( val ) ;
document . cookie = key + '=' + val + '; expires=' + d . toUTCString ( ) ;
} else {
var result = document . cookie . match ( new RegExp ( key + "=([^;]+)" ) ) ;
return result ? decodeURIComponent ( result [ 1 ] ) : '' ;
}
}
}
var curPrefs = {
lang : 'en' ,
iconsize : 'm' ,
2010-01-20 17:29:41 +00:00
bkgd _color : '#FFF' ,
bkgd _url : '' ,
2009-11-17 21:36:59 +00:00
img _save : 'embed'
2009-11-11 18:13:26 +00:00
} ;
2009-11-19 15:09:21 +00:00
// This sets up alternative dialog boxes. They mostly work the same way as
// their UI counterparts, expect instead of returning the result, a callback
// needs to be included that returns the result as its first parameter.
// In the future we may want to add additional types of dialog boxes, since
// they should be easy to handle this way.
2009-12-28 14:33:26 +00:00
( function ( ) {
2009-11-19 15:09:21 +00:00
$ ( '#dialog_container' ) . draggable ( { cancel : '#dialog_content, #dialog_buttons *' } ) ;
var box = $ ( '#dialog_box' ) , btn _holder = $ ( '#dialog_buttons' ) ;
var dbox = function ( type , msg , callback , defText ) {
$ ( '#dialog_content' ) . html ( '<p>' + msg . replace ( /\n/g , '</p><p>' ) + '</p>' )
. toggleClass ( 'prompt' , ( type == 'prompt' ) ) ;
btn _holder . empty ( ) ;
2009-11-20 19:23:09 +00:00
var ok = $ ( '<input type="button" value="' + uiStrings . ok + '">' ) . appendTo ( btn _holder ) ;
2009-11-19 15:09:21 +00:00
if ( type != 'alert' ) {
2009-11-20 19:23:09 +00:00
$ ( '<input type="button" value="' + uiStrings . cancel + '">' )
2009-11-19 15:09:21 +00:00
. appendTo ( btn _holder )
. click ( function ( ) { box . hide ( ) ; callback ( false ) } ) ;
}
if ( type == 'prompt' ) {
var input = $ ( '<input type="text">' ) . prependTo ( btn _holder ) ;
input . val ( defText || '' ) ;
2009-11-20 17:17:55 +00:00
input . bind ( 'keydown' , { combi : 'return' } , function ( ) { ok . click ( ) ; } ) ;
2009-11-19 15:09:21 +00:00
}
box . show ( ) ;
ok . click ( function ( ) {
box . hide ( ) ;
var resp = ( type == 'prompt' ) ? input . val ( ) : true ;
if ( callback ) callback ( resp ) ;
} ) . focus ( ) ;
if ( type == 'prompt' ) input . focus ( ) ;
}
$ . alert = function ( msg , cb ) { dbox ( 'alert' , msg , cb ) ; } ;
$ . confirm = function ( msg , cb ) { dbox ( 'confirm' , msg , cb ) ; } ;
$ . prompt = function ( msg , txt , cb ) { dbox ( 'prompt' , msg , cb , txt ) ; } ;
2009-12-28 14:33:26 +00:00
} ( ) ) ;
2009-11-19 15:09:21 +00:00
2009-06-10 03:12:19 +00:00
var setSelectMode = function ( ) {
$ ( '.tool_button_current' ) . removeClass ( 'tool_button_current' ) . addClass ( 'tool_button' ) ;
2010-02-09 06:44:12 +00:00
$ ( '#tool_select' ) . addClass ( 'tool_button_current' ) . removeClass ( 'tool_button' ) ;
2009-08-26 18:04:49 +00:00
$ ( '#styleoverrides' ) . text ( '#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}' ) ;
2009-06-10 03:12:19 +00:00
svgCanvas . setMode ( 'select' ) ;
2009-08-16 02:48:00 +00:00
} ;
2010-01-20 17:26:12 +00:00
2010-01-21 17:38:37 +00:00
var togglePathEditMode = function ( editmode , elems ) {
2010-01-20 17:26:12 +00:00
$ ( '#path_node_panel' ) . toggle ( editmode ) ;
$ ( '#tools_bottom_2,#tools_bottom_3' ) . toggle ( ! editmode ) ;
var size = $ ( '#tool_select > svg, #tool_select > img' ) [ 0 ] . getAttribute ( 'width' ) ;
if ( editmode ) {
// Change select icon
2010-02-09 06:44:12 +00:00
$ ( '.tool_button_current' ) . removeClass ( 'tool_button_current' ) . addClass ( 'tool_button' ) ;
$ ( '#tool_select' ) . addClass ( 'tool_button_current' ) . removeClass ( 'tool_button' )
2010-01-20 17:26:12 +00:00
. empty ( ) . append ( $ . getSvgIcon ( 'select_node' ) ) ;
multiselected = false ;
2010-01-21 17:38:37 +00:00
if ( elems . length ) {
selectedElement = elems [ 0 ] ;
}
2010-01-20 17:26:12 +00:00
} else {
$ ( '#tool_select' ) . empty ( ) . append ( $ . getSvgIcon ( 'select' ) ) ;
}
$ . resizeSvgIcons ( { '#tool_select .svg_icon' : size } ) ;
}
2009-06-17 20:08:53 +00:00
2009-07-13 19:47:48 +00:00
// used to make the flyouts stay on the screen longer the very first time
var flyoutspeed = 1250 ;
2009-06-10 03:12:19 +00:00
var textBeingEntered = false ;
2009-06-10 04:44:59 +00:00
var selectedElement = null ;
2009-07-01 20:22:29 +00:00
var multiselected = false ;
2009-07-13 00:17:15 +00:00
var editingsource = false ;
2009-09-13 19:58:06 +00:00
var docprops = false ;
2009-07-30 22:45:59 +00:00
2009-08-07 05:44:55 +00:00
var fillPaint = new $ . jGraduate . Paint ( { solidColor : "FF0000" } ) ; // solid red
2009-08-01 05:03:51 +00:00
var strokePaint = new $ . jGraduate . Paint ( { solidColor : "000000" } ) ; // solid black
2009-06-29 14:38:30 +00:00
2009-08-17 21:55:47 +00:00
var saveHandler = function ( window , svg ) {
2010-02-17 16:41:29 +00:00
// by default, we add the XML prolog back, systems integrating SVG-edit (wikis, CMSs)
// can just provide their own custom save handler and might not want the XML prolog
svg = "<?xml version='1.0'?>\n" + svg ;
2010-02-12 18:50:07 +00:00
// Creates and opens an HTML page that provides a link to the SVG, a preview, and the markup.
// Also includes warning about Mozilla bug #308590 when applicable
2010-02-12 20:29:59 +00:00
var win = window . open ( "data:image/svg+xml;base64," + Utils . encode64 ( svg ) ) ;
// Alert will only appear the first time saved OR the first time the bug is encountered
2010-02-12 20:56:53 +00:00
var done = $ . pref ( 'save_notice_done' ) + "" ; // TODO: Find out why this returns an object in FF when online
2010-02-12 20:29:59 +00:00
if ( done !== "all" ) {
var note = 'Select "Save As..." in your browser to save this image as an SVG file.' ;
// Check if FF and has <defs/>
if ( navigator . userAgent . indexOf ( 'Gecko/' ) !== - 1 ) {
if ( svg . indexOf ( '<defs' ) !== - 1 ) {
note += "\n\nNOTE: Due to a bug in your browser, this image may appear wrong (missing gradients or elements). It will however appear correct once actually saved." ;
$ . pref ( 'save_notice_done' , 'all' ) ;
done = "all" ;
} else {
$ . pref ( 'save_notice_done' , 'part' ) ;
}
} else {
$ . pref ( 'save_notice_done' , 'all' ) ;
}
if ( done !== 'part' ) {
win . alert ( note ) ;
}
}
2009-08-17 21:55:47 +00:00
} ;
2009-11-11 18:13:26 +00:00
2009-06-23 18:06:53 +00:00
// called when we've selected a different element
2009-07-01 19:28:08 +00:00
var selectedChanged = function ( window , elems ) {
2010-01-20 17:26:12 +00:00
var mode = svgCanvas . getMode ( ) ;
var is _node = ( mode == "pathedit" ) ;
2009-07-01 19:28:08 +00:00
// if elems[1] is present, then we have more than one element
selectedElement = ( elems . length == 1 || elems [ 1 ] == null ? elems [ 0 ] : null ) ;
2009-07-01 20:22:29 +00:00
multiselected = ( elems . length >= 2 && elems [ 1 ] != null ) ;
2009-07-01 19:28:08 +00:00
if ( selectedElement != null ) {
// unless we're already in always set the mode of the editor to select because
2009-06-10 04:44:59 +00:00
// upon creation of a text element the editor is switched into
// select mode and this event fires - we need our UI to be in sync
2009-10-05 13:50:44 +00:00
2010-01-20 17:26:12 +00:00
if ( mode != "multiselect" && ! is _node ) {
2009-06-30 14:29:28 +00:00
setSelectMode ( ) ;
2009-10-07 16:04:32 +00:00
updateToolbar ( ) ;
2009-10-22 19:36:04 +00:00
}
2009-06-23 18:06:53 +00:00
} // if (elem != null)
2009-10-22 19:36:04 +00:00
2010-01-20 17:26:12 +00:00
// Deal with pathedit mode
2010-01-21 17:38:37 +00:00
togglePathEditMode ( is _node , elems ) ;
2010-01-25 21:22:03 +00:00
updateContextPanel ( ) ;
svgCanvas . runExtensions ( "selectedChanged" , {
elems : elems ,
selectedElement : selectedElement ,
multiselected : multiselected
} ) ;
2009-08-16 02:48:00 +00:00
} ;
2009-06-23 18:06:53 +00:00
2009-06-29 14:38:30 +00:00
// called when any element has changed
2009-07-01 19:54:51 +00:00
var elementChanged = function ( window , elems ) {
for ( var i = 0 ; i < elems . length ; ++ i ) {
var elem = elems [ i ] ;
2009-12-07 15:42:36 +00:00
2009-07-10 05:04:06 +00:00
// if the element changed was the svg, then it could be a resolution change
2010-01-20 15:24:50 +00:00
if ( elem && elem . tagName == "svg" ) {
2010-01-12 16:57:15 +00:00
populateLayers ( ) ;
2010-01-20 17:26:12 +00:00
updateCanvas ( ) ;
2009-12-07 15:42:36 +00:00
}
// Update selectedElement if element is no longer part of the image.
// This occurs for the text elements in Firefox
else if ( elem && selectedElement && selectedElement . parentNode == null ) {
selectedElement = elem ;
2009-07-01 19:54:51 +00:00
}
2009-06-26 14:31:03 +00:00
}
2010-01-08 20:36:39 +00:00
2009-06-25 15:35:28 +00:00
// we update the contextual panel with potentially new
2009-06-23 18:06:53 +00:00
// positional/sizing information (we DON'T want to update the
// toolbar here as that creates an infinite loop)
2009-06-25 15:35:28 +00:00
// also this updates the history buttons
2009-06-29 14:38:30 +00:00
// we tell it to skip focusing the text control if the
2009-06-25 15:35:28 +00:00
// text element was previously in focus
2009-08-21 13:39:23 +00:00
updateContextPanel ( ) ;
2010-01-27 21:03:43 +00:00
svgCanvas . runExtensions ( "elementChanged" , {
elems : elems
} ) ;
2009-08-16 02:48:00 +00:00
} ;
2009-09-16 15:45:50 +00:00
2010-01-18 18:03:09 +00:00
var zoomChanged = function ( window , bbox , autoCenter ) {
2010-01-21 02:02:04 +00:00
var scrbar = 15 ,
res = svgCanvas . getResolution ( ) ,
w _area = workarea ,
canvas _pos = $ ( '#svgcanvas' ) . position ( ) ;
2009-09-16 15:45:50 +00:00
w _area . css ( 'cursor' , 'auto' ) ;
var z _info = svgCanvas . setBBoxZoom ( bbox , w _area . width ( ) - scrbar , w _area . height ( ) - scrbar ) ;
if ( ! z _info ) return ;
2010-01-21 02:02:04 +00:00
var zoomlevel = z _info . zoom ,
bb = z _info . bbox ;
2009-09-16 15:45:50 +00:00
$ ( '#zoom' ) . val ( Math . round ( zoomlevel * 100 ) ) ;
2010-01-15 21:33:55 +00:00
2010-01-18 18:03:09 +00:00
if ( autoCenter ) {
2010-01-15 21:33:55 +00:00
updateCanvas ( ) ;
2010-01-18 18:03:09 +00:00
} else {
updateCanvas ( false , { x : bb . x * zoomlevel + ( bb . width * zoomlevel ) / 2 , y : bb . y * zoomlevel + ( bb . height * zoomlevel ) / 2 } ) ;
2010-01-15 21:33:55 +00:00
}
2010-01-18 18:03:09 +00:00
2009-10-29 17:19:07 +00:00
if ( svgCanvas . getMode ( ) == 'zoom' && bb . width ) {
// Go to select if a zoom box was drawn
setSelectMode ( ) ;
}
2009-11-16 20:20:13 +00:00
zoomDone ( ) ;
2009-09-16 15:45:50 +00:00
}
2010-01-25 21:22:03 +00:00
2010-01-29 18:27:26 +00:00
var flyout _funcs = { } ;
var setupFlyouts = function ( holders ) {
$ . each ( holders , function ( hold _sel , btn _opts ) {
var buttons = $ ( hold _sel ) . children ( ) ;
var show _sel = hold _sel + '_show' ;
var def = false ;
buttons . addClass ( 'tool_button' )
. unbind ( 'click mousedown mouseup' ) // may not be necessary
. each ( function ( i ) {
// Get this buttons options
var opts = btn _opts [ i ] ;
2010-02-03 14:14:57 +00:00
2010-01-29 18:27:26 +00:00
// Remember the function that goes with this ID
flyout _funcs [ opts . sel ] = opts . fn ;
if ( opts . isDefault ) def = i ;
// Clicking the icon in flyout should set this set's icon
2010-02-01 14:41:34 +00:00
var func = function ( ) {
2010-02-04 19:06:49 +00:00
if ( $ ( this ) . hasClass ( 'disabled' ) ) return false ;
2010-01-29 18:27:26 +00:00
if ( toolButtonClick ( show _sel ) ) {
opts . fn ( ) ;
}
if ( opts . icon ) {
var icon = $ . getSvgIcon ( opts . icon ) . clone ( ) ;
} else {
//
var icon = $ ( opts . sel ) . children ( ) . eq ( 0 ) . clone ( ) ;
}
var shower = $ ( show _sel ) ;
icon [ 0 ] . setAttribute ( 'width' , shower . width ( ) ) ;
icon [ 0 ] . setAttribute ( 'height' , shower . height ( ) ) ;
shower . children ( ':not(.flyout_arrow_horiz)' ) . remove ( ) ;
shower . append ( icon ) . attr ( 'data-curopt' , opts . sel ) ; // This sets the current mode
2010-02-01 14:41:34 +00:00
}
$ ( this ) . mouseup ( func ) ;
if ( opts . key ) {
2010-02-04 17:10:03 +00:00
$ ( document ) . bind ( 'keydown' , { combi : opts . key + '' , disableInInput : true } , func ) ;
2010-02-01 14:41:34 +00:00
}
2010-01-29 18:27:26 +00:00
} ) ;
if ( def ) {
$ ( show _sel ) . attr ( 'data-curopt' , btn _opts [ def ] . sel ) ;
} else if ( ! $ ( show _sel ) . attr ( 'data-curopt' ) ) {
// Set first as default
$ ( show _sel ) . attr ( 'data-curopt' , btn _opts [ 0 ] . sel ) ;
}
var timer ;
// Clicking the "show" icon should set the current mode
$ ( show _sel ) . mousedown ( function ( evt ) {
2010-02-04 19:06:49 +00:00
if ( $ ( show _sel ) . hasClass ( 'disabled' ) ) return false ;
2010-01-29 18:27:26 +00:00
var holder = $ ( show _sel . replace ( '_show' , '' ) ) ;
var l = holder . css ( 'left' ) ;
var w = holder . width ( ) * - 1 ;
2010-01-29 21:28:46 +00:00
var time = holder . data ( 'shown_popop' ) ? 200 : 0 ;
2010-01-29 18:27:26 +00:00
timer = setTimeout ( function ( ) {
// Show corresponding menu
holder . css ( 'left' , w ) . show ( ) . animate ( {
left : l
} , 150 ) ;
2010-01-29 21:28:46 +00:00
holder . data ( 'shown_popop' , true ) ;
} , time ) ;
2010-01-29 18:27:26 +00:00
evt . preventDefault ( ) ;
} ) . mouseup ( function ( ) {
clearTimeout ( timer ) ;
var opt = $ ( this ) . attr ( 'data-curopt' ) ;
if ( toolButtonClick ( show _sel ) ) {
flyout _funcs [ opt ] ( ) ;
}
} ) ;
// $('#tools_rect').mouseleave(function(){$('#tools_rect').fadeOut();});
var pos = $ ( show _sel ) . position ( ) ;
$ ( hold _sel ) . css ( { 'left' : pos . left + 34 , 'top' : pos . top + 77 } ) ;
} ) ;
2010-02-03 14:14:57 +00:00
setFlyoutTitles ( ) ;
2010-01-29 18:27:26 +00:00
}
var makeFlyoutHolder = function ( id , child ) {
var div = $ ( '<div>' , {
'class' : 'tools_flyout' ,
id : id
} ) . appendTo ( '#svg_editor' ) . append ( child ) ;
return div ;
}
var setFlyoutPositions = function ( ) {
$ ( '.tools_flyout' ) . each ( function ( ) {
var shower = $ ( '#' + this . id + '_show' ) ;
var pos = shower . offset ( ) ;
var w = shower . outerWidth ( ) ;
$ ( this ) . css ( { left : pos . left + w , top : pos . top } ) ;
} ) ;
}
2010-02-03 14:14:57 +00:00
var setFlyoutTitles = function ( ) {
$ ( '.tools_flyout' ) . each ( function ( ) {
var shower = $ ( '#' + this . id + '_show' ) ;
var tooltips = [ ] ;
$ ( this ) . children ( ) . each ( function ( ) {
tooltips . push ( this . title ) ;
} ) ;
shower [ 0 ] . title = tooltips . join ( ' / ' ) ;
} ) ;
}
2010-01-25 21:22:03 +00:00
var extAdded = function ( window , ext ) {
2010-02-05 20:25:15 +00:00
var cb _called = false ;
var runCallback = function ( ) {
if ( ext . callback && ! cb _called ) {
cb _called = true ;
ext . callback ( ) ;
}
}
2010-02-16 21:07:13 +00:00
if ( ext . context _tools ) {
$ . each ( ext . context _tools , function ( i , tool ) {
// Add select tool
var cont _id = tool . container _id ? ( ' id="' + tool . container _id + '"' ) : "" ;
var panel = $ ( '#' + tool . panel ) ;
if ( ! panel . length ) {
panel = $ ( '<div>' , { id : tool . panel } ) . appendTo ( "#tools_top" ) ;
}
// TODO: Allow support for other types, or adding to existing tool
switch ( tool . type ) {
case 'tool_button' :
var html = '<div class="tool_button">' + tool . id + '</div>' ;
var div = $ ( html ) . appendTo ( panel ) ;
if ( tool . events ) {
$ . each ( tool . events , function ( evt , func ) {
$ ( div ) . bind ( evt , func ) ;
} ) ;
}
break ;
case 'select' :
var html = '<label' + cont _id + '>'
+ '<select id="' + tool . id + '">' ;
$ . each ( tool . options , function ( val , text ) {
var sel = ( val == tool . defval ) ? " selected" : "" ;
html += '<option value="' + val + '"' + sel + '>' + text + '</option>' ;
} ) ;
html += "</select></label>" ;
// Creates the tool, hides & adds it, returns the select element
var sel = $ ( html ) . appendTo ( panel ) . find ( 'select' ) ;
$ . each ( tool . events , function ( evt , func ) {
$ ( sel ) . bind ( evt , func ) ;
} ) ;
break ;
case 'input' :
var html = '<label' + cont _id + '>'
+ '<span id="' + tool . id + '_label">'
+ tool . label + ':</span>'
+ '<input id="' + tool . id + '" title="' + tool . title
+ '" size="' + ( tool . size || "4" ) + '" value="' + ( tool . defval || "" ) + '" type="text"/></label>'
// Creates the tool, hides & adds it, returns the select element
// Add to given tool.panel
var inp = $ ( html ) . appendTo ( panel ) . find ( 'input' ) ;
if ( tool . spindata ) {
inp . SpinButton ( tool . spindata ) ;
}
if ( tool . events ) {
$ . each ( tool . events , function ( evt , func ) {
inp . bind ( evt , func ) ;
} ) ;
}
break ;
default :
break ;
}
} ) ;
}
2010-02-05 16:11:19 +00:00
if ( ext . buttons ) {
2010-01-25 21:22:03 +00:00
var fallback _obj = { } ,
placement _obj = { } ,
svgicons = ext . svgicons ;
2010-01-29 18:27:26 +00:00
var holders = { } ;
2010-02-05 20:25:15 +00:00
2010-01-29 18:27:26 +00:00
2010-01-25 21:22:03 +00:00
// Add buttons given by extension
$ . each ( ext . buttons , function ( i , btn ) {
var icon ;
var id = btn . id ;
var num = i ;
// Give button a unique ID
while ( $ ( '#' + id ) . length ) {
id = btn . id + '_' + ( ++ num ) ;
}
if ( ! svgicons ) {
icon = $ ( '<img src="' + btn . icon + '">' ) ;
} else {
2010-01-29 18:27:26 +00:00
fallback _obj [ id ] = btn . icon ;
2010-01-25 21:22:03 +00:00
placement _obj [ '#' + id ] = btn . id ;
}
var cls , parent ;
// Set button up according to its type
switch ( btn . type ) {
case 'mode' :
cls = 'tool_button' ;
parent = "#tools_left" ;
break ;
2010-02-16 21:07:13 +00:00
case 'context' :
cls = 'tool_button' ;
parent = "#" + btn . panel ;
break ;
2010-01-25 21:22:03 +00:00
}
var button = $ ( '<div/>' )
. attr ( "id" , id )
2010-01-26 21:28:52 +00:00
. attr ( "title" , btn . title )
2010-01-29 18:27:26 +00:00
. addClass ( cls ) ;
if ( ! btn . includeWith ) {
button . appendTo ( parent ) ;
} else {
// Add to flyout menu / make flyout menu
var opts = btn . includeWith ;
// opts.button, default, position
var ref _btn = $ ( opts . button ) ;
var flyout _holder = ref _btn . parent ( ) ;
// Create a flyout menu if there isn't one already
if ( ! ref _btn . parent ( ) . hasClass ( 'tools_flyout' ) ) {
// Create flyout placeholder
var arr _div = $ ( '<div>' , { id : 'flyout_arrow_horiz' } )
var tls _id = ref _btn [ 0 ] . id . replace ( 'tool_' , 'tools_' )
var show _btn = ref _btn . clone ( )
. attr ( 'id' , tls _id + '_show' )
. append ( $ ( '<div>' , { 'class' : 'flyout_arrow_horiz' } ) ) ;
ref _btn . before ( show _btn ) ;
// Create a flyout div
flyout _holder = makeFlyoutHolder ( tls _id , ref _btn ) ;
}
var ref _data = Actions . getButtonData ( opts . button ) ;
2010-01-29 18:50:40 +00:00
if ( opts . isDefault ) {
2010-01-29 18:27:26 +00:00
placement _obj [ '#' + tls _id + '_show' ] = btn . id ;
}
// TODO: Find way to set the current icon using the iconloader if this is not default
// Include data for extension button as well as ref button
var cur _h = holders [ '#' + flyout _holder [ 0 ] . id ] = [ {
sel : '#' + id ,
fn : btn . events . click ,
icon : btn . id ,
2010-02-01 14:41:34 +00:00
key : btn . key ,
2010-01-29 18:48:08 +00:00
isDefault : btn . includeWith ? btn . includeWith . isDefault : 0
2010-01-29 18:27:26 +00:00
} , ref _data ] ;
// {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
var pos = ( "position" in opts ) ? opts . position : 'last' ;
var len = flyout _holder . children ( ) . length ;
// Add at given position or end
if ( ! isNaN ( pos ) && pos >= 0 && pos < len ) {
flyout _holder . children ( ) . eq ( pos ) . before ( button ) ;
} else {
flyout _holder . append ( button ) ;
cur _h . reverse ( ) ;
}
}
2010-01-25 21:22:03 +00:00
if ( ! svgicons ) {
button . append ( icon ) ;
}
2010-02-16 21:07:13 +00:00
2010-01-25 21:22:03 +00:00
// Add given events to button
$ . each ( btn . events , function ( name , func ) {
2010-01-27 21:03:43 +00:00
if ( name == "click" ) {
if ( btn . type == 'mode' ) {
2010-02-16 21:07:13 +00:00
if ( btn . includeWith ) {
button . bind ( name , func ) ;
} else {
button . bind ( name , function ( ) {
if ( toolButtonClick ( button ) ) {
func ( ) ;
}
} ) ;
}
2010-01-27 21:03:43 +00:00
if ( btn . key ) {
2010-02-04 17:10:03 +00:00
$ ( document ) . bind ( 'keydown' , { combi : btn . key , disableInInput : true } , func ) ;
2010-01-27 21:03:43 +00:00
if ( btn . title ) button . attr ( "title" , btn . title + ' [' + btn . key + ']' ) ;
}
2010-02-16 21:07:13 +00:00
} else {
button . bind ( name , func ) ;
2010-01-27 21:03:43 +00:00
}
} else {
button . bind ( name , func ) ;
}
2010-02-16 21:07:13 +00:00
} ) ;
2010-01-29 18:27:26 +00:00
setupFlyouts ( holders ) ;
2010-01-25 21:22:03 +00:00
} ) ;
$ . svgIcons ( svgicons , {
w : 24 , h : 24 ,
id _match : false ,
no _img : true ,
fallback : fallback _obj ,
placement : placement _obj ,
2010-01-29 18:27:26 +00:00
callback : function ( icons ) {
2010-01-25 21:22:03 +00:00
// Bad hack to make the icon match the current size
// TODO: Write better hack!
var old = curPrefs . iconsize ;
if ( curPrefs . iconsize != 'm' ) {
setIconSize ( 'm' ) ;
setIconSize ( old ) ;
}
2010-02-05 20:25:15 +00:00
runCallback ( ) ;
2010-01-25 21:22:03 +00:00
}
} ) ;
}
2010-02-05 20:25:15 +00:00
runCallback ( ) ;
2010-01-25 21:22:03 +00:00
} ;
2010-01-29 05:39:57 +00:00
var getPaint = function ( color , opac ) {
// update the editor's fill paint
var opts = null ;
if ( color . substr ( 0 , 5 ) == "url(#" ) {
opts = {
alpha : opac ,
linearGradient : document . getElementById ( color . substr ( 5 , color . length - 6 ) )
} ;
}
else if ( color . substr ( 0 , 1 ) == "#" ) {
opts = {
alpha : opac ,
solidColor : color . substr ( 1 )
} ;
}
else {
opts = {
alpha : opac ,
solidColor : 'none'
} ;
}
return new $ . jGraduate . Paint ( opts ) ;
} ;
2009-06-29 14:38:30 +00:00
2009-06-23 18:06:53 +00:00
// updates the toolbar (colors, opacity, etc) based on the selected element
2009-08-16 02:48:00 +00:00
var updateToolbar = function ( ) {
2009-09-05 22:09:42 +00:00
if ( selectedElement != null &&
selectedElement . tagName != "image" &&
2010-02-17 14:37:13 +00:00
selectedElement . tagName != "foreignObject" &&
2009-09-05 22:09:42 +00:00
selectedElement . tagName != "g" )
{
2009-07-09 04:34:48 +00:00
// get opacity values
var fillOpacity = parseFloat ( selectedElement . getAttribute ( "fill-opacity" ) ) ;
if ( isNaN ( fillOpacity ) ) {
fillOpacity = 1.0 ;
}
var strokeOpacity = parseFloat ( selectedElement . getAttribute ( "stroke-opacity" ) ) ;
if ( isNaN ( strokeOpacity ) ) {
strokeOpacity = 1.0 ;
}
2009-08-01 05:03:51 +00:00
// update fill color and opacity
2010-01-21 02:02:04 +00:00
var fillColor = selectedElement . getAttribute ( "fill" ) || "black" ;
2009-09-04 06:11:04 +00:00
// prevent undo on these canvas changes
svgCanvas . setFillColor ( fillColor , true ) ;
svgCanvas . setFillOpacity ( fillOpacity , true ) ;
2009-08-01 05:03:51 +00:00
// update stroke color and opacity
2009-08-13 15:51:30 +00:00
var strokeColor = selectedElement . getAttribute ( "stroke" ) || "none" ;
2009-09-04 06:11:04 +00:00
// prevent undo on these canvas changes
svgCanvas . setStrokeColor ( strokeColor , true ) ;
svgCanvas . setStrokeOpacity ( strokeOpacity , true ) ;
2009-08-01 05:03:51 +00:00
fillOpacity *= 100 ;
strokeOpacity *= 100 ;
2009-08-21 15:35:55 +00:00
fillPaint = getPaint ( fillColor , fillOpacity ) ;
strokePaint = getPaint ( strokeColor , strokeOpacity ) ;
2009-08-01 05:03:51 +00:00
fillOpacity = fillOpacity + " %" ;
strokeOpacity = strokeOpacity + " %" ;
// update fill color
2009-06-17 17:36:00 +00:00
if ( fillColor == "none" ) {
2009-07-09 04:34:48 +00:00
fillOpacity = "N/A" ;
2009-06-07 05:07:23 +00:00
}
2009-07-30 22:45:59 +00:00
document . getElementById ( "gradbox_fill" ) . parentNode . firstChild . setAttribute ( "fill" , fillColor ) ;
2009-06-07 05:07:23 +00:00
if ( strokeColor == null || strokeColor == "" || strokeColor == "none" ) {
2009-07-30 22:45:59 +00:00
strokeColor = "none" ;
2009-08-01 05:03:51 +00:00
strokeOpacity = "N/A" ;
2009-06-07 05:07:23 +00:00
}
2009-08-01 05:03:51 +00:00
2009-07-30 22:45:59 +00:00
// update the rect inside #fill_color
document . getElementById ( "gradbox_stroke" ) . parentNode . firstChild . setAttribute ( "fill" , strokeColor ) ;
2009-07-09 04:34:48 +00:00
$ ( '#fill_opacity' ) . html ( fillOpacity ) ;
$ ( '#stroke_opacity' ) . html ( strokeOpacity ) ;
2009-11-19 15:09:21 +00:00
$ ( '#stroke_width' ) . val ( selectedElement . getAttribute ( "stroke-width" ) || 1 ) ;
$ ( '#stroke_style' ) . val ( selectedElement . getAttribute ( "stroke-dasharray" ) || "none" ) ;
}
// All elements including image and group have opacity
if ( selectedElement != null ) {
2009-10-20 20:06:55 +00:00
var opac _perc = ( ( selectedElement . getAttribute ( "opacity" ) || 1.0 ) * 100 ) ;
$ ( '#group_opacity' ) . val ( opac _perc ) ;
$ ( '#opac_slider' ) . slider ( 'option' , 'value' , opac _perc ) ;
2009-06-23 18:06:53 +00:00
}
2009-11-20 17:17:55 +00:00
2009-06-23 18:06:53 +00:00
updateToolButtonState ( ) ;
2009-08-16 02:48:00 +00:00
} ;
2009-06-07 10:27:55 +00:00
2009-06-23 18:06:53 +00:00
// updates the context panel tools based on the selected element
2009-08-21 13:39:23 +00:00
var updateContextPanel = function ( ) {
2009-06-11 15:18:46 +00:00
var elem = selectedElement ;
2010-01-08 20:36:39 +00:00
// If element has just been deleted, consider it null
if ( elem != null && ! elem . parentNode ) elem = null ;
2009-10-10 21:46:06 +00:00
var currentLayer = svgCanvas . getCurrentLayer ( ) ;
2009-12-07 15:42:36 +00:00
var currentMode = svgCanvas . getMode ( ) ;
2010-01-08 20:36:39 +00:00
2009-08-27 13:04:32 +00:00
// No need to update anything else in rotate mode
2009-12-07 15:42:36 +00:00
if ( currentMode == 'rotate' && elem != null ) {
2009-12-28 19:57:46 +00:00
var ang = svgCanvas . getRotationAngle ( elem ) ;
$ ( '#angle' ) . val ( ang ) ;
2010-02-04 19:06:49 +00:00
$ ( '#tool_reorient' ) . toggleClass ( 'disabled' , ang == 0 ) ;
2009-08-27 13:04:32 +00:00
return ;
}
2010-01-20 17:26:12 +00:00
var is _node = currentMode == 'pathedit' ; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
2009-08-27 13:04:32 +00:00
2009-09-05 22:09:42 +00:00
$ ( ' # selected _panel , # multiselected _panel , # g _panel , # rect _panel , # circle _panel , \
2009-10-22 19:36:04 +00:00
# ellipse _panel , # line _panel , # text _panel , # image _panel ' ) . hide ( ) ;
2009-06-11 15:18:46 +00:00
if ( elem != null ) {
2009-11-30 19:14:23 +00:00
var elname = elem . nodeName ;
var angle = svgCanvas . getRotationAngle ( elem ) ;
$ ( '#angle' ) . val ( angle ) ;
2009-11-20 17:17:55 +00:00
2009-12-29 18:18:37 +00:00
if ( svgCanvas . addedNew ) {
if ( elname == 'image' ) {
promptImgURL ( ) ;
} else if ( elname == 'text' ) {
// TODO: Do something here for new text
}
}
2009-12-07 15:42:36 +00:00
if ( ! is _node && currentMode != 'pathedit' ) {
2009-10-05 13:50:44 +00:00
$ ( '#selected_panel' ) . show ( ) ;
2009-11-20 17:17:55 +00:00
// Elements in this array already have coord fields
2009-11-30 19:14:23 +00:00
if ( $ . inArray ( elname , [ 'line' , 'circle' , 'ellipse' ] ) != - 1 ) {
2009-11-20 17:17:55 +00:00
$ ( '#xy_panel' ) . hide ( ) ;
} else {
var x , y ;
// Get BBox vals for g, polyline and path
2009-11-30 19:14:23 +00:00
if ( $ . inArray ( elname , [ 'g' , 'polyline' , 'path' ] ) != - 1 ) {
2009-11-20 17:17:55 +00:00
var bb = svgCanvas . getStrokedBBox ( [ elem ] ) ;
2009-12-01 19:26:33 +00:00
if ( bb ) {
x = bb . x ;
y = bb . y ;
}
2009-11-20 17:17:55 +00:00
} else {
x = elem . getAttribute ( 'x' ) ;
y = elem . getAttribute ( 'y' ) ;
}
$ ( '#selected_x' ) . val ( x || 0 ) ;
$ ( '#selected_y' ) . val ( y || 0 ) ;
$ ( '#xy_panel' ) . show ( ) ;
}
2009-11-30 19:14:23 +00:00
// Elements in this array cannot be converted to a path
2010-01-20 22:15:54 +00:00
var no _path = $ . inArray ( elname , [ 'image' , 'text' , 'path' , 'g' , 'use' ] ) == - 1 ;
2009-11-30 19:14:23 +00:00
$ ( '#tool_topath' ) . toggle ( no _path ) ;
$ ( '#tool_reorient' ) . toggle ( elname == 'path' ) ;
2010-02-04 19:06:49 +00:00
$ ( '#tool_reorient' ) . toggleClass ( 'disabled' , angle == 0 ) ;
2009-10-05 13:50:44 +00:00
} else {
2009-12-30 18:06:29 +00:00
var point = path . getNodePoint ( ) ;
2010-02-04 19:06:49 +00:00
$ ( '#tool_node_delete' ) . toggleClass ( 'disabled' , ! path . canDeleteNodes ) ;
2009-10-05 13:50:44 +00:00
if ( point ) {
2009-10-12 20:26:03 +00:00
var seg _type = $ ( '#seg_type' ) ;
2009-10-18 20:46:32 +00:00
$ ( '#path_node_x' ) . val ( point . x ) ;
$ ( '#path_node_y' ) . val ( point . y ) ;
2009-10-12 20:26:03 +00:00
if ( point . type ) {
seg _type . val ( point . type ) . removeAttr ( 'disabled' ) ;
} else {
seg _type . val ( 4 ) . attr ( 'disabled' , 'disabled' ) ;
}
2009-10-05 13:50:44 +00:00
}
return ;
}
2009-08-21 15:35:55 +00:00
2009-06-11 15:18:46 +00:00
// update contextual tools here
2009-08-21 15:35:55 +00:00
var panels = {
2009-09-05 22:09:42 +00:00
g : [ ] ,
2009-11-20 17:17:55 +00:00
rect : [ 'rx' , 'width' , 'height' ] ,
image : [ 'width' , 'height' ] ,
2009-08-21 15:35:55 +00:00
circle : [ 'cx' , 'cy' , 'r' ] ,
ellipse : [ 'cx' , 'cy' , 'rx' , 'ry' ] ,
line : [ 'x1' , 'y1' , 'x2' , 'y2' ] ,
2009-11-20 17:17:55 +00:00
text : [ ]
2009-08-21 15:35:55 +00:00
} ;
var el _name = elem . tagName ;
2009-08-21 16:27:27 +00:00
if ( panels [ el _name ] ) {
var cur _panel = panels [ el _name ] ;
$ ( '#' + el _name + '_panel' ) . show ( ) ;
$ . each ( cur _panel , function ( i , item ) {
$ ( '#' + el _name + '_' + item ) . val ( elem . getAttribute ( item ) || 0 ) ;
} ) ;
if ( el _name == 'text' ) {
$ ( '#text_panel' ) . css ( "display" , "inline" ) ;
if ( svgCanvas . getItalic ( ) ) {
2010-02-09 06:44:12 +00:00
$ ( '#tool_italic' ) . addClass ( 'push_button_pressed' ) . removeClass ( 'tool_button' ) ;
2009-08-21 16:27:27 +00:00
}
else {
2010-02-09 06:44:12 +00:00
$ ( '#tool_italic' ) . removeClass ( 'push_button_pressed' ) . addClass ( 'tool_button' ) ;
2009-08-21 16:27:27 +00:00
}
if ( svgCanvas . getBold ( ) ) {
2010-02-09 06:44:12 +00:00
$ ( '#tool_bold' ) . addClass ( 'push_button_pressed' ) . removeClass ( 'tool_button' ) ;
2009-08-21 16:27:27 +00:00
}
else {
2010-02-09 06:44:12 +00:00
$ ( '#tool_bold' ) . removeClass ( 'push_button_pressed' ) . addClass ( 'tool_button' ) ;
2009-08-21 16:27:27 +00:00
}
$ ( '#font_family' ) . val ( elem . getAttribute ( "font-family" ) ) ;
$ ( '#font_size' ) . val ( elem . getAttribute ( "font-size" ) ) ;
$ ( '#text' ) . val ( elem . textContent ) ;
if ( svgCanvas . addedNew ) {
$ ( '#text' ) . focus ( ) . select ( ) ;
}
2009-10-10 21:46:06 +00:00
} // text
2009-09-05 11:34:51 +00:00
else if ( el _name == 'image' ) {
2009-11-17 21:36:59 +00:00
var xlinkNS = "http://www.w3.org/1999/xlink" ;
var href = elem . getAttributeNS ( xlinkNS , "href" ) ;
setImageURL ( href ) ;
2009-10-10 21:46:06 +00:00
} // image
2009-08-21 15:35:55 +00:00
}
2009-07-01 20:22:29 +00:00
} // if (elem != null)
else if ( multiselected ) {
$ ( '#multiselected_panel' ) . show ( ) ;
2009-06-23 07:48:15 +00:00
}
2009-08-21 16:27:27 +00:00
2009-06-25 15:35:28 +00:00
// update history buttons
if ( svgCanvas . getUndoStackSize ( ) > 0 ) {
2010-02-04 19:06:49 +00:00
$ ( '#tool_undo' ) . removeClass ( 'disabled' ) ;
2009-06-25 15:35:28 +00:00
}
else {
2010-02-04 19:06:49 +00:00
$ ( '#tool_undo' ) . addClass ( 'disabled' ) ;
2009-06-25 15:35:28 +00:00
}
if ( svgCanvas . getRedoStackSize ( ) > 0 ) {
2010-02-04 19:06:49 +00:00
$ ( '#tool_redo' ) . removeClass ( 'disabled' ) ;
2009-06-25 15:35:28 +00:00
}
else {
2010-02-04 19:06:49 +00:00
$ ( '#tool_redo' ) . addClass ( 'disabled' ) ;
2009-06-25 15:35:28 +00:00
}
2009-08-21 13:39:23 +00:00
svgCanvas . addedNew = false ;
2009-10-11 04:32:21 +00:00
if ( ( elem && ! is _node ) || multiselected ) {
// update the selected elements' layer
2009-11-03 18:21:23 +00:00
$ ( '#selLayerNames' ) . removeAttr ( 'disabled' ) . val ( currentLayer ) ;
2009-10-11 04:32:21 +00:00
}
else {
2009-11-03 18:21:23 +00:00
$ ( '#selLayerNames' ) . attr ( 'disabled' , 'disabled' ) ;
2009-10-11 04:32:21 +00:00
}
2009-08-16 02:48:00 +00:00
} ;
2009-06-23 07:48:15 +00:00
2009-06-10 03:12:19 +00:00
$ ( '#text' ) . focus ( function ( ) { textBeingEntered = true ; } ) ;
$ ( '#text' ) . blur ( function ( ) { textBeingEntered = false ; } ) ;
2009-09-04 22:22:40 +00:00
2009-06-07 05:07:23 +00:00
// bind the selected event to our function that handles updates to the UI
svgCanvas . bind ( "selected" , selectedChanged ) ;
2009-06-23 18:06:53 +00:00
svgCanvas . bind ( "changed" , elementChanged ) ;
2009-08-17 21:55:47 +00:00
svgCanvas . bind ( "saved" , saveHandler ) ;
2009-09-16 15:45:50 +00:00
svgCanvas . bind ( "zoomed" , zoomChanged ) ;
2010-01-25 21:22:03 +00:00
svgCanvas . bind ( "extension_added" , extAdded ) ;
2009-06-07 00:17:21 +00:00
2009-11-09 18:59:53 +00:00
var str = '<div class="palette_item" data-rgb="none"></div>'
2009-06-01 15:55:21 +00:00
$ . each ( palette , function ( i , item ) {
2009-07-30 22:45:59 +00:00
str += '<div class="palette_item" style="background-color: ' + item + ';" data-rgb="' + item + '"></div>' ;
2009-06-01 15:55:21 +00:00
} ) ;
$ ( '#palette' ) . append ( str ) ;
2009-10-22 14:56:09 +00:00
// Set up editor background functionality
2010-01-18 20:30:59 +00:00
// TODO add checkerboard as "pattern"
var color _blocks = [ '#FFF' , '#888' , '#000' ] ; // ,'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)'];
2009-10-22 14:56:09 +00:00
var str = '' ;
$ . each ( color _blocks , function ( ) {
2010-01-19 21:14:53 +00:00
str += '<div class="color_block" style="background-color:' + this + ';"></div>' ;
2009-10-22 14:56:09 +00:00
} ) ;
$ ( '#bg_blocks' ) . append ( str ) ;
var blocks = $ ( '#bg_blocks div' ) ;
var cur _bg = 'cur_background' ;
blocks . each ( function ( ) {
var blk = $ ( this ) ;
blk . click ( function ( ) {
blocks . removeClass ( cur _bg ) ;
$ ( this ) . addClass ( cur _bg ) ;
} ) ;
} ) ;
2009-11-11 18:13:26 +00:00
2010-01-20 17:29:41 +00:00
if ( $ . pref ( 'bkgd_color' ) ) {
setBackground ( $ . pref ( 'bkgd_color' ) , $ . pref ( 'bkgd_url' ) ) ;
2009-11-11 18:13:26 +00:00
}
2009-11-18 16:50:25 +00:00
if ( $ . pref ( 'img_save' ) ) {
curPrefs . img _save = $ . pref ( 'img_save' ) ;
$ ( '#image_save_opts input' ) . val ( [ curPrefs . img _save ] ) ;
}
2009-06-01 15:55:21 +00:00
2009-08-14 22:50:34 +00:00
var changeRectRadius = function ( ctl ) {
svgCanvas . setRectRadius ( ctl . value ) ;
}
2009-10-20 15:50:58 +00:00
var changeFontSize = function ( ctl ) {
svgCanvas . setFontSize ( ctl . value ) ;
}
2009-08-14 22:50:34 +00:00
var changeStrokeWidth = function ( ctl ) {
2009-09-01 19:52:34 +00:00
var val = ctl . value ;
if ( val == 0 && selectedElement && $ . inArray ( selectedElement . nodeName , [ 'line' , 'polyline' ] ) != - 1 ) {
2009-09-01 19:57:50 +00:00
val = ctl . value = 1 ;
2009-09-01 19:52:34 +00:00
}
svgCanvas . setStrokeWidth ( val ) ;
2009-07-07 01:21:19 +00:00
}
2009-08-14 22:50:34 +00:00
var changeRotationAngle = function ( ctl ) {
2009-08-16 02:48:00 +00:00
svgCanvas . setRotationAngle ( ctl . value ) ;
2010-02-04 19:06:49 +00:00
$ ( '#tool_reorient' ) . toggleClass ( 'disabled' , ctl . value == 0 ) ;
2009-08-14 22:50:34 +00:00
}
2009-09-15 14:38:26 +00:00
var changeZoom = function ( ctl ) {
var zoomlevel = ctl . value / 100 ;
2009-10-29 17:19:07 +00:00
var zoom = svgCanvas . getZoom ( ) ;
2010-01-14 15:12:40 +00:00
var w _area = workarea ;
2009-10-29 17:19:07 +00:00
zoomChanged ( window , {
width : 0 ,
height : 0 ,
2010-01-15 21:33:55 +00:00
// center pt of scroll position
x : ( w _area [ 0 ] . scrollLeft + w _area . width ( ) / 2 ) / zoom ,
2009-10-29 17:19:07 +00:00
y : ( w _area [ 0 ] . scrollTop + w _area . height ( ) / 2 ) / zoom ,
zoom : zoomlevel
2010-01-18 18:03:09 +00:00
} , true ) ;
2009-09-15 14:38:26 +00:00
}
2009-10-20 20:06:55 +00:00
var changeOpacity = function ( ctl , val ) {
if ( val == null ) val = ctl . value ;
$ ( '#group_opacity' ) . val ( val ) ;
if ( ! ctl || ! ctl . handle ) {
$ ( '#opac_slider' ) . slider ( 'option' , 'value' , val ) ;
}
svgCanvas . setOpacity ( val / 100 ) ;
}
2009-06-01 22:01:07 +00:00
2010-01-13 21:03:00 +00:00
var operaRepaint = function ( ) {
// Repaints canvas in Opera. Needed for stroke-dasharray change as well as fill change
if ( ! window . opera ) return ;
$ ( '<p/>' ) . hide ( ) . appendTo ( 'body' ) . remove ( ) ;
}
2009-06-01 22:01:07 +00:00
$ ( '#stroke_style' ) . change ( function ( ) {
2009-06-07 05:07:23 +00:00
svgCanvas . setStrokeStyle ( this . options [ this . selectedIndex ] . value ) ;
2010-01-13 21:03:00 +00:00
operaRepaint ( ) ;
2009-06-01 15:55:21 +00:00
} ) ;
2009-08-31 19:15:32 +00:00
// Lose focus for select elements when changed (Allows keyboard shortcuts to work better)
$ ( 'select' ) . change ( function ( ) { $ ( this ) . blur ( ) ; } ) ;
2009-10-10 21:46:06 +00:00
// fired when user wants to move elements to another layer
2009-10-14 16:29:28 +00:00
var promptMoveLayerOnce = false ;
2009-10-11 04:32:21 +00:00
$ ( '#selLayerNames' ) . change ( function ( ) {
2009-10-10 21:46:06 +00:00
var destLayer = this . options [ this . selectedIndex ] . value ;
2009-11-10 21:31:47 +00:00
var confirm _str = uiStrings . QmoveElemsToLayer . replace ( '%s' , destLayer ) ;
2009-11-19 15:09:21 +00:00
var moveToLayer = function ( ok ) {
if ( ! ok ) return ;
2009-10-14 16:29:28 +00:00
promptMoveLayerOnce = true ;
2009-10-10 21:46:06 +00:00
svgCanvas . moveSelectedToLayer ( destLayer ) ;
2009-10-11 04:32:21 +00:00
svgCanvas . clearSelection ( ) ;
2009-10-14 16:29:28 +00:00
populateLayers ( ) ;
2009-10-10 21:46:06 +00:00
}
2009-11-19 15:09:21 +00:00
if ( destLayer ) {
if ( promptMoveLayerOnce ) {
moveToLayer ( true ) ;
} else {
$ . confirm ( confirm _str , moveToLayer ) ;
}
}
2009-06-04 13:43:58 +00:00
} ) ;
2009-06-23 07:48:15 +00:00
2009-12-02 21:17:11 +00:00
$ ( '#font_family' ) . change ( function ( ) {
svgCanvas . setFontFamily ( this . value ) ;
} ) ;
2009-10-09 15:29:40 +00:00
$ ( '#seg_type' ) . change ( function ( ) {
svgCanvas . setSegType ( $ ( this ) . val ( ) ) ;
} ) ;
2009-06-10 03:12:19 +00:00
$ ( '#text' ) . keyup ( function ( ) {
svgCanvas . setTextContent ( this . value ) ;
} ) ;
2009-09-04 22:22:40 +00:00
2009-11-18 16:50:25 +00:00
$ ( '#image_url' ) . change ( function ( ) {
2009-11-17 21:36:59 +00:00
setImageURL ( this . value ) ;
2009-10-16 13:17:23 +00:00
} ) ;
2009-06-23 07:48:15 +00:00
2009-06-24 04:33:09 +00:00
$ ( '.attr_changer' ) . change ( function ( ) {
2009-09-24 18:59:39 +00:00
var attr = this . getAttribute ( "data-attr" ) ;
2009-08-24 15:26:35 +00:00
var val = this . value ;
2010-02-09 20:15:52 +00:00
var valid = svgCanvas . isValidUnit ( attr , val ) ;
2009-08-24 15:26:35 +00:00
if ( ! valid ) {
2009-11-19 15:09:21 +00:00
$ . alert ( uiStrings . invalidAttrValGiven ) ;
2009-08-24 15:26:35 +00:00
this . value = selectedElement . getAttribute ( attr ) ;
return false ;
}
svgCanvas . changeSelectedAttribute ( attr , val ) ;
2009-06-24 04:33:09 +00:00
} ) ;
2009-09-01 13:58:38 +00:00
// Prevent selection of elements when shift-clicking
$ ( '#palette' ) . mouseover ( function ( ) {
var inp = $ ( '<input type="hidden">' ) ;
$ ( this ) . append ( inp ) ;
inp . focus ( ) . remove ( ) ;
} ) ;
2009-06-04 13:43:58 +00:00
2009-06-17 02:17:22 +00:00
$ ( '.palette_item' ) . click ( function ( evt ) {
2009-07-30 22:45:59 +00:00
var picker = ( evt . shiftKey ? "stroke" : "fill" ) ;
2009-07-02 17:19:51 +00:00
var id = ( evt . shiftKey ? '#stroke_' : '#fill_' ) ;
2009-07-30 22:45:59 +00:00
var color = $ ( this ) . attr ( 'data-rgb' ) ;
var rectbox = document . getElementById ( "gradbox_" + picker ) . parentNode . firstChild ;
2009-08-01 05:03:51 +00:00
var paint = null ;
2009-07-30 22:45:59 +00:00
2009-06-17 17:17:11 +00:00
// Webkit-based browsers returned 'initial' here for no stroke
if ( color == 'transparent' || color == 'initial' ) {
2009-06-01 15:55:21 +00:00
color = 'none' ;
2009-07-02 17:19:51 +00:00
$ ( id + "opacity" ) . html ( "N/A" ) ;
2009-08-01 05:03:51 +00:00
paint = new $ . jGraduate . Paint ( ) ;
}
else {
paint = new $ . jGraduate . Paint ( { alpha : 100 , solidColor : color . substr ( 1 ) } ) ;
2009-07-02 17:19:51 +00:00
}
2009-07-30 22:45:59 +00:00
rectbox . setAttribute ( "fill" , color ) ;
2009-08-01 05:03:51 +00:00
if ( evt . shiftKey ) {
strokePaint = paint ;
2009-09-04 06:11:04 +00:00
if ( svgCanvas . getStrokeColor ( ) != color ) {
svgCanvas . setStrokeColor ( color ) ;
}
if ( color != 'none' && svgCanvas . getStrokeOpacity ( ) != 1 ) {
2009-07-09 04:34:48 +00:00
svgCanvas . setStrokeOpacity ( 1.0 ) ;
2009-07-02 17:19:51 +00:00
$ ( "#stroke_opacity" ) . html ( "100 %" ) ;
}
} else {
2009-08-01 05:03:51 +00:00
fillPaint = paint ;
2009-09-04 06:11:04 +00:00
if ( svgCanvas . getFillColor ( ) != color ) {
svgCanvas . setFillColor ( color ) ;
}
if ( color != 'none' && svgCanvas . getFillOpacity ( ) != 1 ) {
2009-07-09 04:34:48 +00:00
svgCanvas . setFillOpacity ( 1.0 ) ;
2009-07-02 17:19:51 +00:00
$ ( "#fill_opacity" ) . html ( "100 %" ) ;
}
2009-06-01 15:55:21 +00:00
}
2009-06-23 07:48:15 +00:00
updateToolButtonState ( ) ;
2009-06-01 15:55:21 +00:00
} ) ;
2009-06-04 07:13:31 +00:00
// This is a common function used when a tool has been clicked (chosen)
// It does several common things:
// - removes the tool_button_current class from whatever tool currently has it
2009-06-28 05:48:11 +00:00
// - hides any flyouts
2009-06-04 07:13:31 +00:00
// - adds the tool_button_current class to the button passed in
2009-07-13 19:47:48 +00:00
var toolButtonClick = function ( button , fadeFlyouts ) {
2010-02-04 19:06:49 +00:00
if ( $ ( button ) . hasClass ( 'disabled' ) ) return false ;
2010-01-29 18:27:26 +00:00
if ( $ ( button ) . parent ( ) . hasClass ( 'tools_flyout' ) ) return true ;
2009-07-13 19:47:48 +00:00
var fadeFlyouts = fadeFlyouts || 'normal' ;
$ ( '.tools_flyout' ) . fadeOut ( fadeFlyouts ) ;
2009-06-08 02:55:15 +00:00
$ ( '#styleoverrides' ) . text ( '' ) ;
2009-06-04 07:13:31 +00:00
$ ( '.tool_button_current' ) . removeClass ( 'tool_button_current' ) . addClass ( 'tool_button' ) ;
2010-02-09 06:44:12 +00:00
$ ( button ) . addClass ( 'tool_button_current' ) . removeClass ( 'tool_button' ) ;
2009-07-01 15:34:15 +00:00
// when a tool is selected, we should deselect any currently selected elements
svgCanvas . clearSelection ( ) ;
2009-06-17 17:36:00 +00:00
return true ;
2009-06-04 07:13:31 +00:00
} ;
2009-09-15 18:13:00 +00:00
2010-01-12 21:38:39 +00:00
( function ( ) {
2010-01-13 15:05:53 +00:00
var button = $ ( '#main_icon' ) ;
var overlay = $ ( '#main_icon span' ) ;
2010-01-12 21:38:39 +00:00
var list = $ ( '#main_menu' ) ;
var on _button = false ;
2010-01-13 15:05:53 +00:00
var height = 0 ;
2010-01-13 18:28:19 +00:00
var js _hover = true ;
2010-01-14 13:39:25 +00:00
var set _click = false ;
2010-01-13 18:28:19 +00:00
var hideMenu = function ( ) {
list . fadeOut ( 200 ) ;
} ;
2010-01-27 14:23:51 +00:00
$ ( window ) . mouseup ( function ( evt ) {
2010-01-12 21:38:39 +00:00
if ( ! on _button ) {
2010-02-09 06:44:12 +00:00
button . removeClass ( 'buttondown' ) ;
2010-01-13 04:32:31 +00:00
// do not hide if it was the file input as that input needs to be visible
// for its change event to fire
2010-01-13 18:28:19 +00:00
if ( evt . target . localName != "input" ) {
list . fadeOut ( 200 ) ;
2010-01-14 13:39:25 +00:00
} else if ( ! set _click ) {
set _click = true ;
$ ( evt . target ) . click ( function ( ) {
list . css ( 'margin-left' , '-9999px' ) . show ( ) ;
} ) ;
2010-01-13 18:28:19 +00:00
}
2010-01-12 21:38:39 +00:00
}
on _button = false ;
2010-01-29 21:28:46 +00:00
} ) . mousedown ( function ( ) {
$ ( '.tools_flyout:visible' ) . fadeOut ( ) ;
2010-01-12 21:38:39 +00:00
} ) ;
2010-01-13 15:05:53 +00:00
overlay . bind ( 'mousedown' , function ( ) {
2010-02-09 06:44:12 +00:00
if ( ! button . hasClass ( 'buttondown' ) ) {
button . addClass ( 'buttondown' ) . removeClass ( 'buttonup' )
2010-01-13 21:18:59 +00:00
// Margin must be reset in case it was changed before;
list . css ( 'margin-left' , 0 ) . show ( ) ;
2010-01-13 15:05:53 +00:00
if ( ! height ) {
height = list . height ( ) ;
}
// Using custom animation as slideDown has annoying "bounce effect"
list . css ( 'height' , 0 ) . animate ( {
'height' : height
} , 200 ) ;
2010-01-12 21:38:39 +00:00
on _button = true ;
2010-01-13 15:05:53 +00:00
return false ;
2010-01-12 21:38:39 +00:00
} else {
2010-02-09 06:44:12 +00:00
button . removeClass ( 'buttondown' ) . addClass ( 'buttonup' ) ;
2010-01-13 15:05:53 +00:00
list . fadeOut ( 200 ) ;
2010-01-12 21:38:39 +00:00
}
} ) . hover ( function ( ) {
on _button = true ;
} ) . mouseout ( function ( ) {
on _button = false ;
} ) ;
2010-01-13 18:28:19 +00:00
var list _items = $ ( '#main_menu li' ) ;
// Check if JS method of hovering needs to be used (Webkit bug)
list _items . mouseover ( function ( ) {
js _hover = ( $ ( this ) . css ( 'background-color' ) == 'rgba(0, 0, 0, 0)' ) ;
list _items . unbind ( 'mouseover' ) ;
if ( js _hover ) {
list _items . mouseover ( function ( ) {
this . style . backgroundColor = '#FFC' ;
} ) . mouseout ( function ( ) {
this . style . backgroundColor = 'transparent' ;
return true ;
} ) ;
}
} ) ;
} ( ) ) ;
2010-01-12 21:38:39 +00:00
2009-10-20 20:06:55 +00:00
var addDropDown = function ( elem , callback , dropUp ) {
var button = $ ( elem ) . find ( 'button' ) ;
var list = $ ( elem ) . find ( 'ul' ) ;
2009-09-15 18:13:00 +00:00
var on _button = false ;
2009-10-20 20:06:55 +00:00
if ( dropUp ) {
$ ( elem ) . addClass ( 'dropup' ) ;
}
$ ( elem ) . find ( 'li' ) . bind ( 'mouseup' , callback ) ;
2009-09-15 18:13:00 +00:00
2010-01-27 14:23:51 +00:00
$ ( window ) . mouseup ( function ( evt ) {
2009-09-15 18:13:00 +00:00
if ( ! on _button ) {
button . removeClass ( 'down' ) ;
list . hide ( ) ;
}
on _button = false ;
} ) ;
2009-09-29 03:18:21 +00:00
button . bind ( 'mousedown' , function ( ) {
if ( ! button . hasClass ( 'down' ) ) {
button . addClass ( 'down' ) ;
list . show ( ) ;
on _button = true ;
} else {
button . removeClass ( 'down' ) ;
list . hide ( ) ;
}
2009-09-15 18:13:00 +00:00
} ) . hover ( function ( ) {
on _button = true ;
} ) . mouseout ( function ( ) {
on _button = false ;
} ) ;
2009-10-20 20:06:55 +00:00
}
2009-12-02 20:09:36 +00:00
addDropDown ( '#font_family_dropdown' , function ( ) {
var fam = $ ( this ) . text ( ) ;
2009-12-02 21:17:11 +00:00
$ ( '#font_family' ) . val ( $ ( this ) . text ( ) ) . change ( ) ;
2009-12-02 20:09:36 +00:00
} ) ;
2009-10-20 20:06:55 +00:00
addDropDown ( '#opacity_dropdown' , function ( ) {
if ( $ ( this ) . find ( 'div' ) . length ) return ;
var perc = parseInt ( $ ( this ) . text ( ) . split ( '%' ) [ 0 ] ) ;
changeOpacity ( false , perc ) ;
} ) ;
2009-09-15 18:13:00 +00:00
2009-10-27 13:24:18 +00:00
// For slider usage, see: http://jqueryui.com/demos/slider/
2009-10-20 20:06:55 +00:00
$ ( "#opac_slider" ) . slider ( {
2009-10-27 13:24:18 +00:00
start : function ( ) {
$ ( '#opacity_dropdown li:not(.special)' ) . hide ( ) ;
} ,
stop : function ( ) {
$ ( '#opacity_dropdown li' ) . show ( ) ;
2010-01-27 14:23:51 +00:00
$ ( window ) . mouseup ( ) ;
2009-10-27 13:24:18 +00:00
} ,
2009-10-20 20:06:55 +00:00
slide : function ( evt , ui ) {
changeOpacity ( ui ) ;
}
} ) ;
2009-06-01 15:55:21 +00:00
2009-10-20 20:06:55 +00:00
addDropDown ( '#zoom_dropdown' , function ( ) {
var item = $ ( this ) ;
var val = item . attr ( 'data-val' ) ;
if ( val ) {
2009-10-29 17:19:07 +00:00
zoomChanged ( window , val ) ;
2009-10-20 20:06:55 +00:00
} else {
2009-10-29 17:19:07 +00:00
changeZoom ( { value : parseInt ( item . text ( ) ) } ) ;
2009-10-20 20:06:55 +00:00
}
} , true ) ;
2010-01-29 18:27:26 +00:00
/ *
When a flyout icon is selected
( if flyout ) {
- Change the icon
- Make pressing the button run its stuff
}
- Run its stuff
When its shortcut key is pressed
- If not current in list , do as above
, else :
- Just run its stuff
* /
// var setIcon = function(holder_sel, id) {
// var icon = $.getSvgIcon(id).clone();
// var holder = $(holder_sel);
// icon[0].setAttribute('width',holder.width());
// icon[0].setAttribute('height',holder.height());
// holder.empty().append(icon)
// .attr('data-curopt', holder_sel.replace('_show','')); // This sets the current mode
// }
2009-11-09 18:59:53 +00:00
2009-06-09 13:28:37 +00:00
var clickSelect = function ( ) {
2009-06-17 17:36:00 +00:00
if ( toolButtonClick ( '#tool_select' ) ) {
svgCanvas . setMode ( 'select' ) ;
2009-08-26 18:04:49 +00:00
$ ( '#styleoverrides' ) . text ( '#svgcanvas svg *{cursor:move;pointer-events:all}, #svgcanvas svg{cursor:default}' ) ;
2009-06-17 17:36:00 +00:00
}
2009-07-13 00:17:15 +00:00
} ;
2009-06-01 15:55:21 +00:00
2009-10-18 20:04:26 +00:00
var clickFHPath = function ( ) {
if ( toolButtonClick ( '#tool_fhpath' ) ) {
svgCanvas . setMode ( 'fhpath' ) ;
2009-06-17 17:36:00 +00:00
}
2009-07-13 00:17:15 +00:00
} ;
2009-06-01 15:55:21 +00:00
2009-06-09 13:28:37 +00:00
var clickLine = function ( ) {
2009-06-17 17:36:00 +00:00
if ( toolButtonClick ( '#tool_line' ) ) {
svgCanvas . setMode ( 'line' ) ;
}
2009-07-13 00:17:15 +00:00
} ;
2009-06-01 15:55:21 +00:00
2009-06-09 13:28:37 +00:00
var clickSquare = function ( ) {
2010-01-29 18:27:26 +00:00
svgCanvas . setMode ( 'square' ) ;
2009-07-13 00:17:15 +00:00
} ;
2009-11-09 18:59:53 +00:00
2009-06-09 13:28:37 +00:00
var clickRect = function ( ) {
2010-01-29 18:27:26 +00:00
svgCanvas . setMode ( 'rect' ) ;
2009-09-16 15:45:50 +00:00
} ;
2009-11-09 18:59:53 +00:00
2009-06-09 13:28:37 +00:00
var clickFHRect = function ( ) {
2010-01-29 18:27:26 +00:00
svgCanvas . setMode ( 'fhrect' ) ;
2009-07-13 00:17:15 +00:00
} ;
2009-11-09 18:59:53 +00:00
2009-06-09 13:28:37 +00:00
var clickCircle = function ( ) {
2010-01-29 18:27:26 +00:00
svgCanvas . setMode ( 'circle' ) ;
2009-07-13 00:17:15 +00:00
} ;
2009-06-01 15:55:21 +00:00
2009-06-09 13:28:37 +00:00
var clickEllipse = function ( ) {
2010-01-29 18:27:26 +00:00
svgCanvas . setMode ( 'ellipse' ) ;
2009-07-13 00:17:15 +00:00
} ;
2009-06-01 15:55:21 +00:00
2009-06-09 13:28:37 +00:00
var clickFHEllipse = function ( ) {
2010-01-29 18:27:26 +00:00
svgCanvas . setMode ( 'fhellipse' ) ;
2009-11-09 18:59:53 +00:00
} ;
var clickImage = function ( ) {
if ( toolButtonClick ( '#tool_image' ) ) {
svgCanvas . setMode ( 'image' ) ;
}
} ;
var clickZoom = function ( ) {
if ( toolButtonClick ( '#tool_zoom' ) ) {
2010-01-14 15:12:40 +00:00
workarea . css ( 'cursor' , 'crosshair' ) ;
2009-11-09 18:59:53 +00:00
svgCanvas . setMode ( 'zoom' ) ;
}
} ;
var dblclickZoom = function ( ) {
if ( toolButtonClick ( '#tool_zoom' ) ) {
2009-11-16 17:04:19 +00:00
zoomImage ( ) ;
2009-11-09 18:59:53 +00:00
setSelectMode ( ) ;
}
2009-07-13 00:17:15 +00:00
} ;
2009-06-01 15:55:21 +00:00
2009-08-07 03:46:51 +00:00
var clickText = function ( ) {
toolButtonClick ( '#tool_text' ) ;
svgCanvas . setMode ( 'text' ) ;
} ;
2009-10-18 20:46:32 +00:00
var clickPath = function ( ) {
toolButtonClick ( '#tool_path' ) ;
svgCanvas . setMode ( 'path' ) ;
2009-08-07 03:46:51 +00:00
} ;
2009-06-17 20:08:53 +00:00
// Delete is a contextual tool that only appears in the ribbon if
2009-06-10 04:44:59 +00:00
// an element has been selected
var deleteSelected = function ( ) {
2009-07-01 20:22:29 +00:00
if ( selectedElement != null || multiselected ) {
svgCanvas . deleteSelectedElements ( ) ;
2009-06-10 04:44:59 +00:00
}
2009-07-13 00:17:15 +00:00
} ;
2009-06-01 15:55:21 +00:00
2009-06-17 20:08:53 +00:00
var moveToTopSelected = function ( ) {
if ( selectedElement != null ) {
svgCanvas . moveToTopSelectedElement ( ) ;
}
2009-07-13 00:17:15 +00:00
} ;
2009-06-17 20:08:53 +00:00
var moveToBottomSelected = function ( ) {
if ( selectedElement != null ) {
svgCanvas . moveToBottomSelectedElement ( ) ;
}
2009-07-13 00:17:15 +00:00
} ;
2009-11-30 19:14:23 +00:00
var convertToPath = function ( ) {
if ( selectedElement != null ) {
svgCanvas . convertToPath ( ) ;
}
}
var reorientPath = function ( ) {
if ( selectedElement != null ) {
2009-12-30 18:06:29 +00:00
path . reorient ( ) ;
2009-11-30 19:14:23 +00:00
}
}
2009-06-17 20:08:53 +00:00
2009-06-23 21:18:23 +00:00
var moveSelected = function ( dx , dy ) {
2009-07-08 00:03:08 +00:00
if ( selectedElement != null || multiselected ) {
2009-07-13 13:51:00 +00:00
svgCanvas . moveSelectedElements ( dx , dy ) ;
2009-06-23 21:18:23 +00:00
}
2009-07-13 00:17:15 +00:00
} ;
2009-10-07 16:04:32 +00:00
2009-12-01 19:26:33 +00:00
var linkControlPoints = function ( ) {
2010-02-09 06:44:12 +00:00
var linked = ! $ ( '#tool_node_link' ) . hasClass ( 'push_button_pressed' ) ;
if ( linked )
$ ( '#tool_node_link' ) . addClass ( 'push_button_pressed' ) . removeClass ( 'tool_button' ) ;
else
$ ( '#tool_node_link' ) . removeClass ( 'push_button_pressed' ) . addClass ( 'tool_button' ) ;
2009-12-30 18:06:29 +00:00
path . linkControlPoints ( linked ) ;
2009-12-01 19:26:33 +00:00
}
2009-10-18 20:46:32 +00:00
var clonePathNode = function ( ) {
2009-12-30 18:06:29 +00:00
if ( path . getNodePoint ( ) ) {
path . clonePathNode ( ) ;
2009-10-07 16:04:32 +00:00
}
} ;
2009-08-21 13:39:23 +00:00
2009-10-18 20:46:32 +00:00
var deletePathNode = function ( ) {
2009-12-30 18:06:29 +00:00
if ( path . getNodePoint ( ) ) {
path . deletePathNode ( ) ;
2009-10-05 19:09:39 +00:00
}
} ;
2009-08-21 13:39:23 +00:00
var selectNext = function ( ) {
svgCanvas . cycleElement ( 1 ) ;
2010-01-31 20:17:50 +00:00
} ;
2009-08-21 13:39:23 +00:00
var selectPrev = function ( ) {
svgCanvas . cycleElement ( 0 ) ;
2010-01-31 20:17:50 +00:00
} ;
2009-08-21 17:57:48 +00:00
var rotateSelected = function ( cw ) {
if ( selectedElement == null || multiselected ) return ;
var step = 5 ;
if ( ! cw ) step *= - 1 ;
var new _angle = $ ( '#angle' ) . val ( ) * 1 + step ;
svgCanvas . setRotationAngle ( new _angle ) ;
2009-11-30 21:14:03 +00:00
updateContextPanel ( ) ;
2010-01-31 20:17:50 +00:00
} ;
2009-08-21 17:57:48 +00:00
2009-06-09 13:28:37 +00:00
var clickClear = function ( ) {
2009-11-19 15:09:21 +00:00
$ . confirm ( uiStrings . QwantToClear , function ( ok ) {
if ( ! ok ) return ;
2010-01-19 14:03:10 +00:00
setSelectMode ( ) ;
2009-06-07 05:07:23 +00:00
svgCanvas . clear ( ) ;
2010-01-18 20:30:59 +00:00
svgCanvas . setResolution ( 640 , 480 ) ;
2010-01-15 21:33:55 +00:00
updateCanvas ( true ) ;
2009-11-16 17:04:19 +00:00
zoomImage ( ) ;
2009-11-13 20:45:18 +00:00
populateLayers ( ) ;
2009-07-02 03:54:11 +00:00
updateContextPanel ( ) ;
2009-11-19 15:09:21 +00:00
} ) ;
2009-07-13 00:17:15 +00:00
} ;
2009-07-06 14:57:13 +00:00
var clickBold = function ( ) {
svgCanvas . setBold ( ! svgCanvas . getBold ( ) ) ;
updateContextPanel ( ) ;
} ;
var clickItalic = function ( ) {
svgCanvas . setItalic ( ! svgCanvas . getItalic ( ) ) ;
updateContextPanel ( ) ;
} ;
2009-06-01 15:55:21 +00:00
2009-06-09 13:28:37 +00:00
var clickSave = function ( ) {
2009-11-17 16:42:04 +00:00
// In the future, more options can be provided here
var saveOpts = {
'images' : curPrefs . img _save ,
'round_digits' : 6
}
svgCanvas . save ( saveOpts ) ;
2009-07-13 00:17:15 +00:00
} ;
2009-08-19 03:42:27 +00:00
2010-01-13 04:32:31 +00:00
// by default, svgCanvas.open() is a no-op.
// it is up to an extension mechanism (opera widget, etc)
// to call setCustomHandlers() which will make it do something
2009-08-19 03:42:27 +00:00
var clickOpen = function ( ) {
svgCanvas . open ( ) ;
} ;
2009-06-29 14:38:30 +00:00
2009-06-25 02:54:07 +00:00
var clickUndo = function ( ) {
2009-09-22 01:00:24 +00:00
if ( svgCanvas . getUndoStackSize ( ) > 0 ) {
2009-06-25 02:54:07 +00:00
svgCanvas . undo ( ) ;
2009-09-22 01:00:24 +00:00
populateLayers ( ) ;
}
2009-07-13 00:17:15 +00:00
} ;
2009-06-25 02:54:07 +00:00
var clickRedo = function ( ) {
2009-09-22 01:00:24 +00:00
if ( svgCanvas . getRedoStackSize ( ) > 0 ) {
2009-06-25 02:54:07 +00:00
svgCanvas . redo ( ) ;
2009-09-22 01:00:24 +00:00
populateLayers ( ) ;
}
2009-07-13 00:17:15 +00:00
} ;
2009-09-05 20:03:47 +00:00
var clickGroup = function ( ) {
2009-09-05 22:09:42 +00:00
// group
if ( multiselected ) {
svgCanvas . groupSelectedElements ( ) ;
}
// ungroup
2009-12-28 14:33:26 +00:00
else if ( selectedElement && selectedElement . tagName == 'g' ) {
2009-09-05 22:09:42 +00:00
svgCanvas . ungroupSelectedElement ( ) ;
}
2009-09-05 20:03:47 +00:00
} ;
2009-08-06 11:43:19 +00:00
var clickClone = function ( ) {
svgCanvas . cloneSelectedElements ( ) ;
2009-07-13 13:51:00 +00:00
} ;
2009-11-16 17:04:19 +00:00
var clickAlign = function ( ) {
var letter = this . id . replace ( 'tool_align' , '' ) . charAt ( 0 ) ;
svgCanvas . alignSelectedElements ( letter , $ ( '#align_relative_to' ) . val ( ) ) ;
2009-08-17 06:56:55 +00:00
} ;
2009-11-16 17:04:19 +00:00
var zoomImage = function ( multiplier ) {
2009-09-09 14:18:24 +00:00
var res = svgCanvas . getResolution ( ) ;
2009-11-16 17:04:19 +00:00
multiplier = multiplier ? res . zoom * multiplier : 1 ;
2010-01-15 15:04:57 +00:00
// setResolution(res.w * multiplier, res.h * multiplier, true);
2009-09-15 14:38:26 +00:00
$ ( '#zoom' ) . val ( multiplier * 100 ) ;
2009-09-09 14:18:24 +00:00
svgCanvas . setZoom ( multiplier ) ;
2009-11-16 20:20:13 +00:00
zoomDone ( ) ;
2010-01-15 21:33:55 +00:00
updateCanvas ( true ) ;
2009-09-09 14:18:24 +00:00
} ;
2009-11-16 20:20:13 +00:00
var zoomDone = function ( ) {
2010-01-18 20:30:59 +00:00
// updateBgImage();
2009-11-16 20:20:13 +00:00
updateWireFrame ( ) ;
2010-01-18 18:03:09 +00:00
//updateCanvas(); // necessary?
2009-11-16 20:20:13 +00:00
}
2009-09-09 14:18:24 +00:00
2009-10-21 13:40:50 +00:00
var clickWireframe = function ( ) {
2010-02-09 06:44:12 +00:00
var wf = ! $ ( '#tool_wireframe' ) . hasClass ( 'push_button_pressed' ) ;
if ( wf )
$ ( '#tool_wireframe' ) . addClass ( 'push_button_pressed' ) . removeClass ( 'tool_button' ) ;
else
$ ( '#tool_wireframe' ) . removeClass ( 'push_button_pressed' ) . addClass ( 'tool_button' ) ;
2010-01-14 15:12:40 +00:00
workarea . toggleClass ( 'wireframe' ) ;
2009-11-16 20:20:13 +00:00
if ( supportsNonSS ) return ;
var wf _rules = $ ( '#wireframe_rules' ) ;
if ( ! wf _rules . length ) {
wf _rules = $ ( '<style id="wireframe_rules"><\/style>' ) . appendTo ( 'head' ) ;
} else {
wf _rules . empty ( ) ;
}
updateWireFrame ( ) ;
}
var updateWireFrame = function ( ) {
// Test support
if ( supportsNonSS ) return ;
var rule = "#workarea.wireframe #svgcontent * { stroke-width: " + 1 / svgCanvas . getZoom ( ) + "px; }" ;
2010-01-14 15:12:40 +00:00
$ ( '#wireframe_rules' ) . text ( workarea . hasClass ( 'wireframe' ) ? rule : "" ) ;
2009-10-21 13:40:50 +00:00
}
2009-07-13 00:17:15 +00:00
var showSourceEditor = function ( ) {
if ( editingsource ) return ;
editingsource = true ;
var str = svgCanvas . getSvgString ( ) ;
$ ( '#svg_source_textarea' ) . val ( str ) ;
$ ( '#svg_source_editor' ) . fadeIn ( ) ;
properlySourceSizeTextArea ( ) ;
2009-07-13 03:02:29 +00:00
$ ( '#svg_source_textarea' ) . focus ( ) ;
2009-07-13 00:17:15 +00:00
} ;
2009-11-10 18:58:16 +00:00
$ ( '#svg_docprops_container' ) . draggable ( { cancel : 'button,fieldset' } ) ;
2009-09-13 19:58:06 +00:00
var showDocProperties = function ( ) {
if ( docprops ) return ;
docprops = true ;
2009-09-14 01:23:31 +00:00
2009-11-17 16:42:04 +00:00
// This selects the correct radio button by using the array notation
$ ( '#image_save_opts input' ) . val ( [ curPrefs . img _save ] ) ;
2009-09-14 01:25:28 +00:00
// update resolution option with actual resolution
2009-09-14 01:23:31 +00:00
var res = svgCanvas . getResolution ( ) ;
2009-09-22 17:22:28 +00:00
$ ( '#canvas_width' ) . val ( res . w ) ;
$ ( '#canvas_height' ) . val ( res . h ) ;
2009-10-22 14:56:09 +00:00
$ ( '#canvas_title' ) . val ( svgCanvas . getImageTitle ( ) ) ;
// Update background color with current one
var blocks = $ ( '#bg_blocks div' ) ;
var cur _bg = 'cur_background' ;
2010-01-20 17:29:41 +00:00
var canvas _bg = $ . pref ( 'bkgd_color' ) ;
var url = $ . pref ( 'bkgd_url' ) ;
2010-01-18 20:30:59 +00:00
// if(url) url = url[1];
2009-10-22 14:56:09 +00:00
blocks . each ( function ( ) {
var blk = $ ( this ) ;
2010-01-18 20:30:59 +00:00
var is _bg = blk . css ( 'background-color' ) == canvas _bg ;
2009-10-22 14:56:09 +00:00
blk . toggleClass ( cur _bg , is _bg ) ;
if ( is _bg ) $ ( '#canvas_bg_url' ) . removeClass ( cur _bg ) ;
} ) ;
if ( ! canvas _bg ) blocks . eq ( 0 ) . addClass ( cur _bg ) ;
2010-01-18 20:30:59 +00:00
if ( url ) {
2009-10-22 14:56:09 +00:00
$ ( '#canvas_bg_url' ) . val ( url ) ;
}
2009-09-13 19:58:06 +00:00
$ ( '#svg_docprops' ) . fadeIn ( ) ;
} ;
2009-07-13 00:17:15 +00:00
var properlySourceSizeTextArea = function ( ) {
2009-07-13 03:52:31 +00:00
// TODO: remove magic numbers here and get values from CSS
2009-08-17 14:17:20 +00:00
var height = $ ( '#svg_source_container' ) . height ( ) - 80 ;
2009-07-13 03:46:27 +00:00
$ ( '#svg_source_textarea' ) . css ( 'height' , height ) ;
2009-07-13 00:17:15 +00:00
} ;
2009-08-17 14:17:20 +00:00
var saveSourceEditor = function ( ) {
2009-07-13 00:17:15 +00:00
if ( ! editingsource ) return ;
2009-08-17 14:17:20 +00:00
2009-11-19 15:09:21 +00:00
var saveChanges = function ( ) {
svgCanvas . clearSelection ( ) ;
hideSourceEditor ( ) ;
zoomImage ( ) ;
populateLayers ( ) ;
setTitle ( svgCanvas . getImageTitle ( ) ) ;
}
2009-08-17 14:17:20 +00:00
if ( ! svgCanvas . setSvgString ( $ ( '#svg_source_textarea' ) . val ( ) ) ) {
2009-11-19 15:09:21 +00:00
$ . confirm ( uiStrings . QerrorsRevertToSource , function ( ok ) {
if ( ! ok ) return false ;
saveChanges ( ) ;
} ) ;
} else {
saveChanges ( ) ;
2009-08-17 14:17:20 +00:00
}
2009-12-30 18:06:29 +00:00
setSelectMode ( ) ;
2009-08-17 14:17:20 +00:00
} ;
2009-09-14 00:04:53 +00:00
2009-11-10 18:58:16 +00:00
var setTitle = function ( title ) {
var editor _title = $ ( 'title:first' ) . text ( ) . split ( ':' ) [ 0 ] ;
var new _title = editor _title + ( title ? ': ' + title : '' ) ;
$ ( 'title:first' ) . text ( new _title ) ;
}
2009-09-14 00:04:53 +00:00
var saveDocProperties = function ( ) {
2009-10-19 19:06:07 +00:00
// set title
2009-11-10 18:58:16 +00:00
var new _title = $ ( '#canvas_title' ) . val ( ) ;
setTitle ( new _title ) ;
svgCanvas . setImageTitle ( new _title ) ;
2009-10-19 19:06:07 +00:00
2009-09-14 00:04:53 +00:00
// update resolution
2010-02-10 19:29:05 +00:00
var width = $ ( '#canvas_width' ) , w = width . val ( ) ;
var height = $ ( '#canvas_height' ) , h = height . val ( ) ;
if ( w != "fit" && ! svgCanvas . isValidUnit ( 'width' , w ) ) {
$ . alert ( uiStrings . invalidAttrValGiven ) ;
width . parent ( ) . addClass ( 'error' ) ;
return false ;
2009-09-22 17:22:28 +00:00
}
2010-02-10 19:29:05 +00:00
width . parent ( ) . removeClass ( 'error' ) ;
if ( h != "fit" && ! svgCanvas . isValidUnit ( 'height' , h ) ) {
$ . alert ( uiStrings . invalidAttrValGiven ) ;
height . parent ( ) . addClass ( 'error' ) ;
return false ;
}
height . parent ( ) . removeClass ( 'error' ) ;
if ( ! svgCanvas . setResolution ( w , h ) ) {
2009-11-19 15:09:21 +00:00
$ . alert ( uiStrings . noContentToFitTo ) ;
2009-09-22 17:22:28 +00:00
return false ;
2009-09-14 00:04:53 +00:00
}
2009-10-22 14:56:09 +00:00
2009-11-17 16:42:04 +00:00
// set image save option
curPrefs . img _save = $ ( '#image_save_opts :checked' ) . val ( ) ;
2009-11-18 16:50:25 +00:00
$ . pref ( 'img_save' , curPrefs . img _save ) ;
2009-11-17 16:42:04 +00:00
2009-10-22 14:56:09 +00:00
// set background
2010-01-18 20:30:59 +00:00
var color = $ ( '#bg_blocks div.cur_background' ) . css ( 'background-color' ) || '#FFF' ;
2009-11-11 18:13:26 +00:00
setBackground ( color , $ ( '#canvas_bg_url' ) . val ( ) ) ;
2009-10-22 14:56:09 +00:00
2009-11-10 21:31:47 +00:00
// set language
var lang = $ ( '#lang_select' ) . val ( ) ;
2009-11-11 18:13:26 +00:00
if ( lang != curPrefs . lang ) {
2009-11-10 21:31:47 +00:00
put _locale ( svgCanvas , lang ) ;
}
2009-11-09 18:59:53 +00:00
// set icon size
setIconSize ( $ ( '#iconsize' ) . val ( ) ) ;
2009-11-11 18:13:26 +00:00
2010-01-15 15:04:57 +00:00
updateCanvas ( ) ;
2009-09-14 00:04:53 +00:00
hideDocProperties ( ) ;
} ;
2009-11-11 18:13:26 +00:00
function setBackground ( color , url ) {
2010-01-20 17:29:41 +00:00
if ( color == curPrefs . bkgd _color && url == curPrefs . bkgd _url ) return ;
$ . pref ( 'bkgd_color' , color ) ;
$ . pref ( 'bkgd_url' , url ) ;
2010-01-15 15:59:15 +00:00
// This should be done in svgcanvas.js for the borderRect fill
2010-01-18 20:30:59 +00:00
svgCanvas . setBackground ( color , url ) ;
2009-11-11 18:13:26 +00:00
}
2009-08-17 14:17:20 +00:00
2009-11-09 18:59:53 +00:00
var setIconSize = function ( size ) {
2009-11-11 18:13:26 +00:00
if ( size == curPrefs . size ) return ;
$ . pref ( 'iconsize' , size ) ;
$ ( '#iconsize' ) . val ( size ) ;
2009-11-09 18:59:53 +00:00
var icon _sizes = { s : 16 , m : 24 , l : 32 , xl : 48 } ;
var size _num = icon _sizes [ size ] ;
// Change icon size
2010-02-04 19:06:49 +00:00
$ ( '.tool_button, .push_button, .tool_button_current, .disabled, #url_notice, #tool_open' )
2010-01-05 03:04:19 +00:00
. find ( '> svg, > img' ) . each ( function ( ) {
2009-11-09 18:59:53 +00:00
this . setAttribute ( 'width' , size _num ) ;
this . setAttribute ( 'height' , size _num ) ;
} ) ;
$ . resizeSvgIcons ( {
2010-01-29 21:28:46 +00:00
'.flyout_arrow_horiz svg, .flyout_arrow_horiz img' : size _num / 5 ,
2010-01-12 21:38:39 +00:00
'#logo > svg, #logo > img' : size _num * 1.3
2009-11-09 18:59:53 +00:00
} ) ;
if ( size != 's' ) {
2010-01-05 03:04:19 +00:00
$ . resizeSvgIcons ( { '#layerbuttons svg, #layerbuttons img' : size _num * . 6 } ) ;
2009-11-09 18:59:53 +00:00
}
// Note that all rules will be prefixed with '#svg_editor' when parsed
var cssResizeRules = {
" . tool _button , \
. push _button , \
. tool _button _current , \
2010-02-04 19:06:49 +00:00
. disabled , \
2010-01-29 18:27:26 +00:00
. tools _flyout . tool _button " : {
2009-11-09 18:59:53 +00:00
'width' : { s : '16px' , l : '32px' , xl : '48px' } ,
'height' : { s : '16px' , l : '32px' , xl : '48px' } ,
'padding' : { s : '1px' , l : '2px' , xl : '3px' }
} ,
".tool_sep" : {
'height' : { s : '16px' , l : '32px' , xl : '48px' } ,
'margin' : { s : '2px 2px' , l : '2px 5px' , xl : '2px 8px' }
} ,
2010-01-13 17:18:53 +00:00
"#main_icon" : {
'width' : { s : '31px' , l : '53px' , xl : '75px' } ,
'height' : { s : '22px' , l : '42px' , xl : '64px' }
} ,
2009-11-09 18:59:53 +00:00
"#tools_top" : {
2010-01-13 17:18:53 +00:00
'left' : { s : '36px' , l : '60px' , xl : '80px' } ,
2009-11-09 18:59:53 +00:00
'height' : { s : '50px' , l : '88px' , xl : '125px' }
} ,
"#tools_left" : {
2010-01-29 18:27:26 +00:00
'width' : { s : '22px' , l : '30px' , xl : '38px' } ,
2009-11-09 18:59:53 +00:00
'top' : { s : '50px' , l : '87px' , xl : '125px' }
} ,
"div#workarea" : {
'left' : { s : '27px' , l : '46px' , xl : '65px' } ,
'top' : { s : '50px' , l : '88px' , xl : '125px' } ,
2009-11-13 15:11:48 +00:00
'bottom' : { s : '51px' , l : '68px' , xl : '75px' }
2009-11-09 18:59:53 +00:00
} ,
"#tools_bottom" : {
'left' : { s : '27px' , l : '46px' , xl : '65px' } ,
'height' : { s : '52px' , l : '68px' , xl : '75px' }
} ,
"#tools_top input, #tools_bottom input" : {
'margin-top' : { s : '2px' , l : '4px' , xl : '5px' } ,
'height' : { s : 'auto' , l : 'auto' , xl : 'auto' } ,
'border' : { s : '1px solid #555' , l : 'auto' , xl : 'auto' } ,
'font-size' : { s : '.9em' , l : '2em' , xl : '2.5em' }
} ,
2009-11-13 15:11:48 +00:00
"#zoom_panel" : {
2009-12-31 19:24:03 +00:00
'margin-top' : { s : '3px' , l : '4px' , xl : '5px' }
2009-11-09 18:59:53 +00:00
} ,
2009-11-13 15:11:48 +00:00
"#copyright, #tools_bottom .label" : {
'font-size' : { l : '1.5em' , xl : '2em' } ,
'line-height' : { s : '15px' }
2009-11-09 18:59:53 +00:00
} ,
"#tools_bottom_2" : {
'width' : { l : '295px' , xl : '355px' }
} ,
"#tools_top > div, #tools_top" : {
'line-height' : { s : '17px' , l : '34px' , xl : '50px' }
} ,
".dropdown button" : {
2009-11-13 15:11:48 +00:00
'height' : { s : '18px' , l : '34px' , xl : '40px' } ,
2009-12-31 21:14:41 +00:00
'line-height' : { s : '18px' , l : '34px' , xl : '40px' } ,
2009-11-13 15:11:48 +00:00
'margin-top' : { s : '3px' }
2009-11-09 18:59:53 +00:00
} ,
2010-01-26 21:28:52 +00:00
"div.toolset, #tools_top label, #tools_bottom label" : {
2009-11-09 18:59:53 +00:00
'font-size' : { s : '1em' , l : '1.5em' , xl : '2em' } ,
2010-01-26 21:28:52 +00:00
'margin-top' : { s : '1px' , l : '3px' , xl : '5px' } ,
'height' : { s : '25px' , l : '43px' , xl : '64px' }
2009-11-09 18:59:53 +00:00
} ,
"#tool_bold, #tool_italic" : {
'font-size' : { s : '1.5em' , l : '3em' , xl : '4.5em' }
} ,
"#sidepanels" : {
'top' : { s : '50px' , l : '88px' , xl : '125px' } ,
2009-12-31 19:24:03 +00:00
'bottom' : { s : '51px' , l : '68px' , xl : '65px' }
2009-11-09 18:59:53 +00:00
} ,
'#layerbuttons' : {
'width' : { l : '130px' , xl : '175px' } ,
'height' : { l : '24px' , xl : '30px' }
} ,
'#layerlist' : {
'width' : { l : '128px' , xl : '150px' }
} ,
'.layer_button' : {
'width' : { l : '19px' , xl : '28px' } ,
'height' : { l : '19px' , xl : '28px' }
} ,
"input.spin-button" : {
'background-image' : { l : "url('images/spinbtn_updn_big.png')" , xl : "url('images/spinbtn_updn_big.png')" } ,
'background-position' : { l : '100% -5px' , xl : '100% -2px' } ,
'padding-right' : { l : '24px' , xl : '24px' }
} ,
"input.spin-button.up" : {
'background-position' : { l : '100% -45px' , xl : '100% -42px' }
} ,
"input.spin-button.down" : {
'background-position' : { l : '100% -85px' , xl : '100% -82px' }
}
} ;
var rule _elem = $ ( '#tool_size_rules' ) ;
if ( ! rule _elem . length ) {
rule _elem = $ ( '<style id="tool_size_rules"><\/style>' ) . appendTo ( 'head' ) ;
} else {
rule _elem . empty ( ) ;
}
if ( size != 'm' ) {
var style _str = '' ;
$ . each ( cssResizeRules , function ( selector , rules ) {
selector = '#svg_editor ' + selector . replace ( /,/g , ', #svg_editor' ) ;
style _str += selector + '{' ;
$ . each ( rules , function ( prop , values ) {
if ( values [ size ] ) {
style _str += ( prop + ':' + values [ size ] + ';' ) ;
}
} ) ;
style _str += '}' ;
} ) ;
rule _elem . text ( style _str ) ;
}
2010-01-29 18:27:26 +00:00
setFlyoutPositions ( ) ;
2009-11-09 18:59:53 +00:00
}
2009-09-13 19:58:06 +00:00
var cancelOverlays = function ( ) {
2009-11-19 15:09:21 +00:00
$ ( '#dialog_box' ) . hide ( ) ;
2009-09-13 19:58:06 +00:00
if ( ! editingsource && ! docprops ) return ;
2009-08-17 14:17:20 +00:00
2009-09-13 19:58:06 +00:00
if ( editingsource ) {
var oldString = svgCanvas . getSvgString ( ) ;
if ( oldString != $ ( '#svg_source_textarea' ) . val ( ) ) {
2009-11-19 15:09:21 +00:00
$ . confirm ( uiStrings . QignoreSourceChanges , function ( ok ) {
if ( ok ) hideSourceEditor ( ) ;
} ) ;
} else {
hideSourceEditor ( ) ;
2009-07-13 03:52:31 +00:00
}
2009-09-13 19:58:06 +00:00
}
else if ( docprops ) {
hideDocProperties ( ) ;
2009-07-13 03:23:58 +00:00
}
2009-11-19 15:09:21 +00:00
2009-08-17 14:17:20 +00:00
} ;
var hideSourceEditor = function ( ) {
2009-07-13 00:17:15 +00:00
$ ( '#svg_source_editor' ) . hide ( ) ;
editingsource = false ;
2009-07-13 03:02:29 +00:00
$ ( '#svg_source_textarea' ) . blur ( ) ;
2009-07-13 00:17:15 +00:00
} ;
2009-09-13 19:58:06 +00:00
var hideDocProperties = function ( ) {
$ ( '#svg_docprops' ) . hide ( ) ;
2009-09-22 17:22:28 +00:00
$ ( '#canvas_width,#canvas_height' ) . removeAttr ( 'disabled' ) ;
$ ( '#resolution' ) [ 0 ] . selectedIndex = 0 ;
2009-11-17 16:42:04 +00:00
$ ( '#image_save_opts input' ) . val ( [ curPrefs . img _save ] ) ;
2009-09-13 19:58:06 +00:00
docprops = false ;
} ;
2009-07-13 00:17:15 +00:00
// TODO: add canvas-centering code in here
$ ( window ) . resize ( function ( evt ) {
if ( ! editingsource ) return ;
properlySourceSizeTextArea ( ) ;
} ) ;
2009-11-18 16:50:25 +00:00
$ ( '#url_notice' ) . click ( function ( ) {
2009-11-19 15:09:21 +00:00
$ . alert ( this . title ) ;
2009-11-17 21:36:59 +00:00
} ) ;
2009-11-18 16:50:25 +00:00
$ ( '#change_image_url' ) . click ( promptImgURL ) ;
function promptImgURL ( ) {
2009-11-19 15:09:21 +00:00
$ . prompt ( uiStrings . enterNewImgURL , default _img _url , function ( url ) {
if ( url ) setImageURL ( url ) ;
} ) ;
2009-11-18 16:50:25 +00:00
}
2009-11-17 21:36:59 +00:00
function setImageURL ( url ) {
2009-11-19 15:09:21 +00:00
if ( ! url ) url = default _img _url ;
2009-11-17 21:36:59 +00:00
svgCanvas . setImageURL ( url ) ;
$ ( '#image_url' ) . val ( url ) ;
if ( url . indexOf ( 'data:' ) === 0 ) {
// data URI found
$ ( '#image_url' ) . hide ( ) ;
$ ( '#change_image_url' ) . show ( ) ;
} else {
// regular URL
2009-11-18 16:50:25 +00:00
svgCanvas . embedImage ( url , function ( datauri ) {
if ( ! datauri ) {
// Couldn't embed, so show warning
$ ( '#url_notice' ) . show ( ) ;
} else {
$ ( '#url_notice' ) . hide ( ) ;
}
default _img _url = url ;
} ) ;
2009-11-17 21:36:59 +00:00
$ ( '#image_url' ) . show ( ) ;
$ ( '#change_image_url' ) . hide ( ) ;
}
}
2009-06-10 04:44:59 +00:00
2009-06-23 07:48:15 +00:00
// added these event handlers for all the push buttons so they
2009-06-10 04:44:59 +00:00
// behave more like buttons being pressed-in and not images
2009-12-28 14:33:26 +00:00
( function ( ) {
2009-08-19 03:42:27 +00:00
var toolnames = [ 'clear' , 'open' , 'save' , 'source' , 'delete' , 'delete_multi' , 'paste' , 'clone' , 'clone_multi' , 'move_top' , 'move_bottom' ] ;
2009-08-18 13:50:18 +00:00
var all _tools = '' ;
var cur _class = 'tool_button_current' ;
$ . each ( toolnames , function ( i , item ) {
all _tools += '#tool_' + item + ( i == toolnames . length - 1 ? ',' : '' ) ;
} ) ;
$ ( all _tools ) . mousedown ( function ( ) {
$ ( this ) . addClass ( cur _class ) ;
} ) . bind ( 'mousedown mouseout' , function ( ) {
$ ( this ) . removeClass ( cur _class ) ;
} ) ;
$ ( '#tool_undo, #tool_redo' ) . mousedown ( function ( ) {
2010-02-04 19:06:49 +00:00
if ( ! $ ( this ) . hasClass ( 'disabled' ) ) $ ( this ) . addClass ( cur _class ) ;
2009-08-18 13:50:18 +00:00
} ) . bind ( 'mousedown mouseout' , function ( ) {
$ ( this ) . removeClass ( cur _class ) ; }
) ;
2009-12-28 14:33:26 +00:00
} ( ) ) ;
2009-06-09 13:28:37 +00:00
2009-08-07 20:11:45 +00:00
// switch modifier key in tooltips if mac
// NOTE: This code is not used yet until I can figure out how to successfully bind ctrl/meta
// in Opera and Chrome
if ( isMac ) {
var shortcutButtons = [ "tool_clear" , "tool_save" , "tool_source" , "tool_undo" , "tool_redo" , "tool_clone" ] ;
var i = shortcutButtons . length ;
while ( i -- ) {
var button = document . getElementById ( shortcutButtons [ i ] ) ;
var title = button . title ;
var index = title . indexOf ( "Ctrl+" ) ;
button . title = [ title . substr ( 0 , index ) , "Cmd+" , title . substr ( index + 5 ) ] . join ( '' ) ;
}
}
2009-08-01 05:03:51 +00:00
// TODO: go back to the color boxes having white background-color and then setting
// background-image to none.png (otherwise partially transparent gradients look weird)
2009-06-05 14:02:34 +00:00
var colorPicker = function ( elem ) {
2009-07-30 22:45:59 +00:00
var picker = elem . attr ( 'id' ) == 'stroke_color' ? 'stroke' : 'fill' ;
2009-08-01 05:03:51 +00:00
var opacity = ( picker == 'stroke' ? $ ( '#stroke_opacity' ) : $ ( '#fill_opacity' ) ) ;
2009-07-30 22:45:59 +00:00
var paint = ( picker == 'stroke' ? strokePaint : fillPaint ) ;
var title = ( picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity' ) ;
2009-06-06 12:25:26 +00:00
var was _none = false ;
2009-06-05 14:02:34 +00:00
var pos = elem . position ( ) ;
2009-09-23 18:15:29 +00:00
$ ( "#color_picker" )
. draggable ( { cancel : '.jPicker_table,.jGraduate_lgPick' } )
. css ( { 'left' : pos . left , 'bottom' : 50 - pos . top } )
. jGraduate (
2009-07-30 22:45:59 +00:00
{
paint : paint ,
window : { pickerTitle : title } ,
2009-12-31 19:24:03 +00:00
images : { clientPath : "jgraduate/images/" }
2009-07-30 22:45:59 +00:00
} ,
function ( p ) {
2009-08-01 05:03:51 +00:00
paint = new $ . jGraduate . Paint ( p ) ;
2009-07-30 22:45:59 +00:00
var oldgrad = document . getElementById ( "gradbox_" + picker ) ;
var svgbox = oldgrad . parentNode ;
var rectbox = svgbox . firstChild ;
2009-08-01 05:03:51 +00:00
if ( paint . type == "linearGradient" ) {
2009-07-30 22:45:59 +00:00
svgbox . removeChild ( oldgrad ) ;
2009-08-01 05:03:51 +00:00
var newgrad = svgbox . appendChild ( document . importNode ( paint . linearGradient , true ) ) ;
2009-11-13 20:45:18 +00:00
svgCanvas . fixOperaXML ( newgrad , paint . linearGradient )
2009-07-30 22:45:59 +00:00
newgrad . id = "gradbox_" + picker ;
rectbox . setAttribute ( "fill" , "url(#gradbox_" + picker + ")" ) ;
2009-06-06 12:25:26 +00:00
}
2009-07-30 22:45:59 +00:00
else {
2010-01-29 05:39:57 +00:00
rectbox . setAttribute ( "fill" , paint . solidColor != "none" ? "#" + paint . solidColor : "none" ) ;
2009-07-30 22:45:59 +00:00
}
2009-08-01 05:03:51 +00:00
opacity . html ( paint . alpha + " %" ) ;
2009-07-30 22:45:59 +00:00
if ( picker == 'stroke' ) {
2009-08-19 17:08:05 +00:00
svgCanvas . setStrokePaint ( paint , true ) ;
2010-01-29 05:39:57 +00:00
strokePaint = paint ;
2009-07-30 22:45:59 +00:00
}
else {
2009-08-19 17:08:05 +00:00
svgCanvas . setFillPaint ( paint , true ) ;
2010-01-29 05:39:57 +00:00
fillPaint = paint ;
2009-07-30 22:45:59 +00:00
}
2009-09-04 14:52:21 +00:00
updateToolbar ( ) ;
2009-07-30 22:45:59 +00:00
$ ( '#color_picker' ) . hide ( ) ;
} ,
function ( p ) {
$ ( '#color_picker' ) . hide ( ) ;
} ) ;
2009-08-16 02:48:00 +00:00
} ;
2009-06-02 12:52:44 +00:00
2009-08-16 02:48:00 +00:00
var updateToolButtonState = function ( ) {
2009-06-17 17:36:00 +00:00
var bNoFill = ( svgCanvas . getFillColor ( ) == 'none' ) ;
var bNoStroke = ( svgCanvas . getStrokeColor ( ) == 'none' ) ;
2010-01-29 12:18:13 +00:00
var buttonsNeedingStroke = [ '#tool_fhpath' , '#tool_line' ] ;
2010-02-05 16:11:19 +00:00
var buttonsNeedingFillAndStroke = [ '#tools_rect .tool_button' , '#tools_ellipse .tool_button' , '#tool_text' , '#tool_path' ] ;
2009-06-17 17:36:00 +00:00
if ( bNoStroke ) {
for ( index in buttonsNeedingStroke ) {
var button = buttonsNeedingStroke [ index ] ;
if ( $ ( button ) . hasClass ( 'tool_button_current' ) ) {
clickSelect ( ) ;
}
2010-02-04 19:06:49 +00:00
$ ( button ) . addClass ( 'disabled' ) ;
2009-06-17 17:36:00 +00:00
}
}
else {
for ( index in buttonsNeedingStroke ) {
var button = buttonsNeedingStroke [ index ] ;
2010-02-04 19:06:49 +00:00
$ ( button ) . removeClass ( 'disabled' ) ;
2009-06-17 17:36:00 +00:00
}
}
2009-06-23 07:48:15 +00:00
2009-06-17 17:36:00 +00:00
if ( bNoStroke && bNoFill ) {
for ( index in buttonsNeedingFillAndStroke ) {
var button = buttonsNeedingFillAndStroke [ index ] ;
if ( $ ( button ) . hasClass ( 'tool_button_current' ) ) {
clickSelect ( ) ;
}
2010-02-04 19:06:49 +00:00
$ ( button ) . addClass ( 'disabled' ) ;
2009-06-17 17:36:00 +00:00
}
}
else {
for ( index in buttonsNeedingFillAndStroke ) {
var button = buttonsNeedingFillAndStroke [ index ] ;
2010-02-04 19:06:49 +00:00
$ ( button ) . removeClass ( 'disabled' ) ;
2009-06-17 17:36:00 +00:00
}
}
2009-12-30 20:12:13 +00:00
2010-02-03 13:41:54 +00:00
svgCanvas . runExtensions ( "toolButtonStateUpdate" , {
nofill : bNoFill ,
nostroke : bNoStroke
} ) ;
2010-02-04 19:06:49 +00:00
// Disable flyouts if all inside are disabled
$ ( '.tools_flyout' ) . each ( function ( ) {
var shower = $ ( '#' + this . id + '_show' ) ;
var has _enabled = false ;
$ ( this ) . children ( ) . each ( function ( ) {
if ( ! $ ( this ) . hasClass ( 'disabled' ) ) {
has _enabled = true ;
}
} ) ;
shower . toggleClass ( 'disabled' , ! has _enabled ) ;
} ) ;
2010-01-13 21:03:00 +00:00
operaRepaint ( ) ;
2009-08-16 02:48:00 +00:00
} ;
2009-06-23 07:48:15 +00:00
2009-07-30 22:45:59 +00:00
// set up gradients to be used for the buttons
var svgdocbox = new DOMParser ( ) . parseFromString (
2009-08-07 05:44:55 +00:00
' < svg xmlns = "http://www.w3.org/2000/svg" > < rect width = "100%" height = "100%" fill = "#FF0000" / > \
2009-07-30 22:45:59 +00:00
< linearGradient id = "gradbox_" > \
< stop stop - color = "#000" offset = "0.0" / > \
< stop stop - color = "#FF0000" offset = "1.0" / > \
< / l i n e a r G r a d i e n t > < / s v g > ' , ' t e x t / x m l ' ) ;
var boxgrad = svgdocbox . getElementById ( 'gradbox_' ) ;
boxgrad . id = 'gradbox_fill' ;
2009-12-28 19:57:46 +00:00
svgdocbox . documentElement . setAttribute ( 'width' , 16.5 ) ;
2009-07-30 22:45:59 +00:00
$ ( '#fill_color' ) . append ( document . importNode ( svgdocbox . documentElement , true ) ) ;
boxgrad . id = 'gradbox_stroke' ;
2009-12-28 19:57:46 +00:00
svgdocbox . documentElement . setAttribute ( 'width' , 16.5 ) ;
2009-08-07 05:44:55 +00:00
$ ( svgdocbox . documentElement . firstChild ) . attr ( 'fill' , '#000000' ) ;
2009-07-30 22:45:59 +00:00
$ ( '#stroke_color' ) . append ( document . importNode ( svgdocbox . documentElement , true ) ) ;
2009-11-16 20:20:13 +00:00
// Use this SVG elem to test vectorEffect support
var test _el = svgdocbox . documentElement . firstChild ;
test _el . setAttribute ( 'style' , 'vector-effect:non-scaling-stroke' ) ;
var supportsNonSS = ( test _el . style . vectorEffect == 'non-scaling-stroke' ) ;
test _el . removeAttribute ( 'style' ) ;
2009-11-17 16:42:04 +00:00
// Test for embedImage support (use timeout to not interfere with page load)
setTimeout ( function ( ) {
2009-11-18 16:50:25 +00:00
svgCanvas . embedImage ( 'images/logo.png' , function ( datauri ) {
if ( ! datauri ) {
// Disable option
$ ( '#image_save_opts [value=embed]' ) . attr ( 'disabled' , 'disabled' ) ;
$ ( '#image_save_opts input' ) . val ( [ 'ref' ] ) ;
curPrefs . img _save = 'ref' ;
$ ( '#image_opt_embed' ) . css ( 'color' , '#666' ) . attr ( 'title' , uiStrings . featNotSupported ) ;
}
} ) ;
2009-11-17 16:42:04 +00:00
} , 1000 ) ;
2009-07-30 22:45:59 +00:00
2009-06-05 14:02:34 +00:00
$ ( '#fill_color' ) . click ( function ( ) {
colorPicker ( $ ( this ) ) ;
2009-06-17 17:36:00 +00:00
updateToolButtonState ( ) ;
2009-06-02 12:52:44 +00:00
} ) ;
2009-06-05 14:02:34 +00:00
$ ( '#stroke_color' ) . click ( function ( ) {
colorPicker ( $ ( this ) ) ;
2009-06-17 17:36:00 +00:00
updateToolButtonState ( ) ;
2009-06-02 12:52:44 +00:00
} ) ;
2009-07-20 13:56:01 +00:00
$ ( '#tool_move_top' ) . mousedown ( function ( evt ) {
$ ( '#tools_stacking' ) . show ( ) ;
evt . preventDefault ( ) ;
} ) ;
2009-09-22 01:00:24 +00:00
$ ( '.layer_button' ) . mousedown ( function ( ) {
$ ( this ) . addClass ( 'layer_buttonpressed' ) ;
} ) . mouseout ( function ( ) {
$ ( this ) . removeClass ( 'layer_buttonpressed' ) ;
} ) . mouseup ( function ( ) {
$ ( this ) . removeClass ( 'layer_buttonpressed' ) ;
} ) ;
2009-10-15 14:49:06 +00:00
$ ( '.push_button' ) . mousedown ( function ( ) {
2010-02-04 19:06:49 +00:00
if ( ! $ ( this ) . hasClass ( 'disabled' ) ) {
2010-02-09 06:44:12 +00:00
$ ( this ) . addClass ( 'push_button_pressed' ) . removeClass ( 'push_button' ) ;
2009-10-15 14:49:06 +00:00
}
} ) . mouseout ( function ( ) {
2010-02-09 06:44:12 +00:00
$ ( this ) . removeClass ( 'push_button_pressed' ) . addClass ( 'push_button' ) ;
2009-10-15 14:49:06 +00:00
} ) . mouseup ( function ( ) {
2010-02-09 06:44:12 +00:00
$ ( this ) . removeClass ( 'push_button_pressed' ) . addClass ( 'push_button' ) ;
2009-10-15 14:49:06 +00:00
} ) ;
2009-09-22 01:00:24 +00:00
$ ( '#layer_new' ) . click ( function ( ) {
2009-09-22 02:42:31 +00:00
var curNames = new Array ( svgCanvas . getNumLayers ( ) ) ;
for ( var i = 0 ; i < curNames . length ; ++ i ) { curNames [ i ] = svgCanvas . getLayer ( i ) ; }
2009-10-08 02:16:36 +00:00
var j = ( curNames . length + 1 ) ;
2009-11-10 21:31:47 +00:00
var uniqName = uiStrings . layer + " " + j ;
while ( $ . inArray ( uniqName , curNames ) != - 1 ) {
2009-10-08 02:16:36 +00:00
j ++ ;
2009-11-10 21:31:47 +00:00
uniqName = uiStrings . layer + " " + j ;
2009-10-08 02:16:36 +00:00
}
2009-11-19 15:09:21 +00:00
$ . prompt ( uiStrings . enterUniqueLayerName , uniqName , function ( newName ) {
if ( ! newName ) return ;
if ( $ . inArray ( newName , curNames ) != - 1 ) {
$ . alert ( uiStrings . dupeLayerName ) ;
return ;
}
svgCanvas . createLayer ( newName ) ;
updateContextPanel ( ) ;
populateLayers ( ) ;
$ ( '#layerlist tr.layer' ) . removeClass ( "layersel" ) ;
$ ( '#layerlist tr.layer:first' ) . addClass ( "layersel" ) ;
} ) ;
2009-09-22 01:00:24 +00:00
} ) ;
$ ( '#layer_delete' ) . click ( function ( ) {
if ( svgCanvas . deleteCurrentLayer ( ) ) {
updateContextPanel ( ) ;
populateLayers ( ) ;
2009-09-22 02:55:28 +00:00
// This matches what SvgCanvas does
// TODO: make this behavior less brittle (svg-editor should get which
// layer is selected from the canvas and then select that one in the UI)
2009-09-24 18:59:39 +00:00
$ ( '#layerlist tr.layer' ) . removeClass ( "layersel" ) ;
$ ( '#layerlist tr.layer:first' ) . addClass ( "layersel" ) ;
2009-09-22 01:00:24 +00:00
}
} ) ;
2009-09-22 04:44:56 +00:00
$ ( '#layer_up' ) . click ( function ( ) {
// find index position of selected option
2009-09-24 18:59:39 +00:00
var curIndex = $ ( '#layerlist tr.layersel' ) . prevAll ( ) . length ;
2009-09-22 04:44:56 +00:00
if ( curIndex > 0 ) {
2009-09-24 18:59:39 +00:00
var total = $ ( '#layerlist tr.layer' ) . length ;
2009-09-22 04:44:56 +00:00
curIndex -- ;
2009-09-23 03:05:27 +00:00
svgCanvas . setCurrentLayerPosition ( total - curIndex - 1 ) ;
2009-09-22 04:44:56 +00:00
populateLayers ( ) ;
2009-09-24 18:59:39 +00:00
$ ( '#layerlist tr.layer' ) . removeClass ( "layersel" ) ;
$ ( '#layerlist tr.layer:eq(' + curIndex + ')' ) . addClass ( "layersel" ) ;
2009-09-22 04:44:56 +00:00
}
} ) ;
$ ( '#layer_down' ) . click ( function ( ) {
// find index position of selected option
2009-09-24 18:59:39 +00:00
var curIndex = $ ( '#layerlist tr.layersel' ) . prevAll ( ) . length ;
var total = $ ( '#layerlist tr.layer' ) . length ;
2009-09-22 04:44:56 +00:00
if ( curIndex < total - 1 ) {
curIndex ++ ;
2009-09-23 03:05:27 +00:00
svgCanvas . setCurrentLayerPosition ( total - curIndex - 1 ) ;
2009-09-22 04:44:56 +00:00
populateLayers ( ) ;
2009-09-24 18:59:39 +00:00
$ ( '#layerlist tr.layer' ) . removeClass ( "layersel" ) ;
$ ( '#layerlist tr.layer:eq(' + curIndex + ')' ) . addClass ( "layersel" ) ;
2009-09-22 04:44:56 +00:00
}
} ) ;
2009-06-29 14:38:30 +00:00
2009-09-22 02:42:31 +00:00
$ ( '#layer_rename' ) . click ( function ( ) {
2009-09-24 18:59:39 +00:00
var curIndex = $ ( '#layerlist tr.layersel' ) . prevAll ( ) . length ;
var oldName = $ ( '#layerlist tr.layersel td.layername' ) . text ( ) ;
2009-11-19 15:09:21 +00:00
$ . prompt ( uiStrings . enterNewLayerName , "" , function ( newName ) {
if ( ! newName ) return ;
if ( oldName == newName ) {
$ . alert ( uiStrings . layerHasThatName ) ;
return ;
}
var curNames = new Array ( svgCanvas . getNumLayers ( ) ) ;
for ( var i = 0 ; i < curNames . length ; ++ i ) { curNames [ i ] = svgCanvas . getLayer ( i ) ; }
if ( $ . inArray ( newName , curNames ) != - 1 ) {
$ . alert ( uiStrings . layerHasThatName ) ;
return ;
}
svgCanvas . renameCurrentLayer ( newName ) ;
populateLayers ( ) ;
$ ( '#layerlist tr.layer' ) . removeClass ( "layersel" ) ;
$ ( '#layerlist tr.layer:eq(' + curIndex + ')' ) . addClass ( "layersel" ) ;
} ) ;
2009-09-22 02:42:31 +00:00
} ) ;
2009-10-11 06:07:57 +00:00
2009-10-14 16:29:28 +00:00
var SIDEPANEL _MAXWIDTH = 300 ;
var SIDEPANEL _OPENWIDTH = 150 ;
2009-10-28 14:22:23 +00:00
var sidedrag = - 1 , sidedragging = false ;
2009-10-11 06:07:57 +00:00
$ ( '#sidepanel_handle' )
. mousedown ( function ( evt ) { sidedrag = evt . pageX ; } )
2009-10-28 14:22:23 +00:00
. mouseup ( function ( evt ) {
if ( ! sidedragging ) toggleSidePanel ( ) ;
sidedrag = - 1 ;
sidedragging = false ;
} ) ;
2009-10-11 06:07:57 +00:00
$ ( '#svg_editor' )
. mouseup ( function ( ) { sidedrag = - 1 ; } )
2009-10-14 04:50:17 +00:00
. mouseout ( function ( evt ) {
if ( sidedrag == - 1 ) return ;
// if we've moused out of the browser window, then we can stop dragging
// and close the drawer
if ( evt . pageX > this . clientWidth ) {
sidedrag = - 1 ;
toggleSidePanel ( true ) ;
}
} )
2009-10-11 06:07:57 +00:00
. mousemove ( function ( evt ) {
if ( sidedrag == - 1 ) return ;
2009-10-28 14:22:23 +00:00
sidedragging = true ;
2009-10-11 06:07:57 +00:00
var deltax = sidedrag - evt . pageX ;
2009-10-14 04:50:17 +00:00
var sidepanels = $ ( '#sidepanels' ) ;
var sidewidth = parseInt ( sidepanels . css ( 'width' ) ) ;
2009-10-14 16:29:28 +00:00
if ( sidewidth + deltax > SIDEPANEL _MAXWIDTH ) {
deltax = SIDEPANEL _MAXWIDTH - sidewidth ;
sidewidth = SIDEPANEL _MAXWIDTH ;
2009-10-11 06:07:57 +00:00
}
2009-10-14 04:50:17 +00:00
else if ( sidewidth + deltax < 2 ) {
deltax = 2 - sidewidth ;
sidewidth = 2 ;
}
if ( deltax == 0 ) return ;
sidedrag -= deltax ;
var layerpanel = $ ( '#layerpanel' ) ;
workarea . css ( 'right' , parseInt ( workarea . css ( 'right' ) ) + deltax ) ;
sidepanels . css ( 'width' , parseInt ( sidepanels . css ( 'width' ) ) + deltax ) ;
layerpanel . css ( 'width' , parseInt ( layerpanel . css ( 'width' ) ) + deltax ) ;
2009-10-11 06:07:57 +00:00
} ) ;
2009-10-14 04:16:48 +00:00
// if width is non-zero, then fully close it, otherwise fully open it
2009-10-14 04:50:17 +00:00
// the optional close argument forces the side panel closed
var toggleSidePanel = function ( close ) {
2009-10-14 04:16:48 +00:00
var w = parseInt ( $ ( '#sidepanels' ) . css ( 'width' ) ) ;
2009-10-14 16:29:28 +00:00
var deltax = ( w > 2 || close ? 2 : SIDEPANEL _OPENWIDTH ) - w ;
2009-10-14 04:16:48 +00:00
var sidepanels = $ ( '#sidepanels' ) ;
var layerpanel = $ ( '#layerpanel' ) ;
workarea . css ( 'right' , parseInt ( workarea . css ( 'right' ) ) + deltax ) ;
sidepanels . css ( 'width' , parseInt ( sidepanels . css ( 'width' ) ) + deltax ) ;
layerpanel . css ( 'width' , parseInt ( layerpanel . css ( 'width' ) ) + deltax ) ;
} ;
2009-10-14 05:11:51 +00:00
// this function highlights the layer passed in (by fading out the other layers)
// if no layer is passed in, this function restores the other layers
var toggleHighlightLayer = function ( layerNameToHighlight ) {
var curNames = new Array ( svgCanvas . getNumLayers ( ) ) ;
for ( var i = 0 ; i < curNames . length ; ++ i ) { curNames [ i ] = svgCanvas . getLayer ( i ) ; }
if ( layerNameToHighlight ) {
for ( var i = 0 ; i < curNames . length ; ++ i ) {
if ( curNames [ i ] != layerNameToHighlight ) {
svgCanvas . setLayerOpacity ( curNames [ i ] , 0.5 ) ;
}
}
}
else {
for ( var i = 0 ; i < curNames . length ; ++ i ) {
svgCanvas . setLayerOpacity ( curNames [ i ] , 1.0 ) ;
}
}
} ;
2009-09-22 02:42:31 +00:00
2009-09-21 22:16:44 +00:00
var populateLayers = function ( ) {
2009-09-24 18:59:39 +00:00
var layerlist = $ ( '#layerlist tbody' ) ;
2009-10-10 21:46:06 +00:00
var selLayerNames = $ ( '#selLayerNames' ) ;
2009-09-24 18:59:39 +00:00
layerlist . empty ( ) ;
2009-10-10 21:46:06 +00:00
selLayerNames . empty ( ) ;
2009-10-14 16:29:28 +00:00
var currentlayer = svgCanvas . getCurrentLayer ( ) ;
2009-09-23 03:05:27 +00:00
var layer = svgCanvas . getNumLayers ( ) ;
2009-11-09 18:59:53 +00:00
var icon = $ . getSvgIcon ( 'eye' ) ;
2009-09-23 03:05:27 +00:00
// we get the layers in the reverse z-order (the layer rendered on top is listed first)
while ( layer -- ) {
2009-09-21 22:16:44 +00:00
var name = svgCanvas . getLayer ( layer ) ;
2009-09-24 18:59:39 +00:00
// contenteditable=\"true\"
2009-10-14 16:29:28 +00:00
var appendstr = "<tr class=\"layer" ;
if ( name == currentlayer ) {
appendstr += " layersel"
}
appendstr += "\">" ;
2009-09-24 18:59:39 +00:00
if ( svgCanvas . getLayerVisibility ( name ) ) {
2009-10-14 16:29:28 +00:00
appendstr += "<td class=\"layervis\"/><td class=\"layername\" >" + name + "</td></tr>" ;
2009-09-24 18:59:39 +00:00
}
else {
2009-10-14 16:29:28 +00:00
appendstr += "<td class=\"layervis layerinvis\"/><td class=\"layername\" >" + name + "</td></tr>" ;
2009-09-24 18:59:39 +00:00
}
2009-10-14 16:29:28 +00:00
layerlist . append ( appendstr ) ;
2009-11-03 18:21:23 +00:00
selLayerNames . append ( "<option value=\"" + name + "\">" + name + "</option>" ) ;
2009-09-21 22:16:44 +00:00
}
2009-11-09 18:59:53 +00:00
if ( icon !== undefined ) {
var copy = icon . clone ( ) ;
$ ( 'td.layervis' , layerlist ) . append ( icon . clone ( ) ) ;
$ . resizeSvgIcons ( { 'td.layervis .svg_icon' : 14 } ) ;
}
2009-09-24 18:59:39 +00:00
// handle selection of layer
2009-10-14 05:11:51 +00:00
$ ( '#layerlist td.layername' )
. click ( function ( evt ) {
$ ( '#layerlist tr.layer' ) . removeClass ( "layersel" ) ;
var row = $ ( this . parentNode ) ;
row . addClass ( "layersel" ) ;
svgCanvas . setCurrentLayer ( this . textContent ) ;
evt . preventDefault ( ) ;
} )
. mouseover ( function ( evt ) {
2009-10-14 05:18:52 +00:00
$ ( this ) . css ( { "font-style" : "italic" , "color" : "blue" } ) ;
2009-10-14 05:11:51 +00:00
toggleHighlightLayer ( this . textContent ) ;
} )
. mouseout ( function ( evt ) {
2009-10-14 05:18:52 +00:00
$ ( this ) . css ( { "font-style" : "normal" , "color" : "black" } ) ;
2009-10-14 05:11:51 +00:00
toggleHighlightLayer ( ) ;
} ) ;
2009-09-24 18:59:39 +00:00
$ ( '#layerlist td.layervis' ) . click ( function ( evt ) {
var row = $ ( this . parentNode ) . prevAll ( ) . length ;
var name = $ ( '#layerlist tr.layer:eq(' + row + ') td.layername' ) . text ( ) ;
var vis = $ ( this ) . hasClass ( 'layerinvis' ) ;
svgCanvas . setLayerVisibility ( name , vis ) ;
if ( vis ) {
$ ( this ) . removeClass ( 'layerinvis' ) ;
}
else {
$ ( this ) . addClass ( 'layerinvis' ) ;
}
} ) ;
// if there were too few rows, let's add a few to make it not so lonely
var num = 5 - $ ( '#layerlist tr.layer' ) . size ( ) ;
while ( num -- > 0 ) {
// FIXME: there must a better way to do this
layerlist . append ( "<tr><td style=\"color:white\">_</td><td/></tr>" ) ;
}
2009-09-21 22:16:44 +00:00
} ;
populateLayers ( ) ;
2010-01-15 15:04:57 +00:00
// function changeResolution(x,y) {
// var zoom = svgCanvas.getResolution().zoom;
// setResolution(x * zoom, y * zoom);
// }
2009-09-09 14:18:24 +00:00
2010-01-14 15:12:40 +00:00
var centerCanvas = function ( ) {
// this centers the canvas vertically in the workarea (horizontal handled in CSS)
workarea . css ( 'line-height' , workarea . height ( ) + 'px' ) ;
2009-09-28 20:22:19 +00:00
} ;
2010-01-14 15:12:40 +00:00
$ ( window ) . bind ( 'load resize' , centerCanvas ) ;
2009-10-20 15:50:58 +00:00
function stepFontSize ( elem , step ) {
var orig _val = elem . value - 0 ;
var sug _val = orig _val + step ;
var increasing = sug _val >= orig _val ;
2009-10-21 12:31:58 +00:00
if ( step === 0 ) return orig _val ;
2009-10-20 15:50:58 +00:00
if ( orig _val >= 24 ) {
if ( increasing ) {
return Math . round ( orig _val * 1.1 ) ;
} else {
return Math . round ( orig _val / 1.1 ) ;
}
} else if ( orig _val <= 1 ) {
if ( increasing ) {
return orig _val * 2 ;
} else {
return orig _val / 2 ;
}
} else {
return sug _val ;
}
}
2009-09-28 20:22:19 +00:00
2009-10-13 18:30:44 +00:00
function stepZoom ( elem , step ) {
var orig _val = elem . value - 0 ;
2009-11-17 16:42:04 +00:00
if ( orig _val === 0 ) return 100 ;
2009-10-13 18:30:44 +00:00
var sug _val = orig _val + step ;
2009-10-21 12:31:58 +00:00
if ( step === 0 ) return orig _val ;
2009-10-13 18:30:44 +00:00
if ( orig _val >= 100 ) {
return sug _val ;
} else {
if ( sug _val >= orig _val ) {
return orig _val * 2 ;
} else {
return orig _val / 2 ;
}
}
}
2010-01-15 15:04:57 +00:00
// function setResolution(w, h, center) {
// updateCanvas();
// // w-=0; h-=0;
// // $('#svgcanvas').css( { 'width': w, 'height': h } );
// // $('#canvas_width').val(w);
// // $('#canvas_height').val(h);
// //
// // if(center) {
// // var w_area = workarea;
// // var scroll_y = h/2 - w_area.height()/2;
// // var scroll_x = w/2 - w_area.width()/2;
// // w_area[0].scrollTop = scroll_y;
// // w_area[0].scrollLeft = scroll_x;
// // }
// }
2009-06-29 14:38:30 +00:00
2009-06-26 14:31:03 +00:00
$ ( '#resolution' ) . change ( function ( ) {
2009-09-22 17:22:28 +00:00
var wh = $ ( '#canvas_width,#canvas_height' ) ;
if ( ! this . selectedIndex ) {
if ( $ ( '#canvas_width' ) . val ( ) == 'fit' ) {
wh . removeAttr ( "disabled" ) . val ( 100 ) ;
2009-08-20 15:59:29 +00:00
}
2009-09-22 17:22:28 +00:00
} else if ( this . value == 'content' ) {
wh . val ( 'fit' ) . attr ( "disabled" , "disabled" ) ;
} else {
var dims = this . value . split ( 'x' ) ;
$ ( '#canvas_width' ) . val ( dims [ 0 ] ) ;
$ ( '#canvas_height' ) . val ( dims [ 1 ] ) ;
wh . removeAttr ( "disabled" ) ;
2009-08-20 15:59:29 +00:00
}
2009-06-25 08:22:30 +00:00
} ) ;
2009-09-15 14:38:26 +00:00
//Prevent browser from erroneously repopulating fields
$ ( 'input,select' ) . attr ( "autocomplete" , "off" ) ;
2009-12-11 20:35:51 +00:00
// Associate all button actions as well as non-button keyboard shortcuts
var Actions = function ( ) {
// sel:'selector', fn:function, evt:'event', key:[key, preventDefault, NoDisableInInput]
var tool _buttons = [
{ sel : '#tool_select' , fn : clickSelect , evt : 'click' , key : 1 } ,
{ sel : '#tool_fhpath' , fn : clickFHPath , evt : 'click' , key : 2 } ,
{ sel : '#tool_line' , fn : clickLine , evt : 'click' , key : 3 } ,
2010-01-29 18:27:26 +00:00
{ sel : '#tool_rect' , fn : clickRect , evt : 'mouseup' , key : 4 , parent : '#tools_rect' , icon : 'rect' } ,
{ sel : '#tool_square' , fn : clickSquare , evt : 'mouseup' , key : 'Shift+4' , parent : '#tools_rect' , icon : 'square' } ,
{ sel : '#tool_fhrect' , fn : clickFHRect , evt : 'mouseup' , parent : '#tools_rect' , icon : 'fh_rect' } ,
{ sel : '#tool_ellipse' , fn : clickEllipse , evt : 'mouseup' , key : 5 , parent : '#tools_ellipse' , icon : 'ellipse' } ,
{ sel : '#tool_circle' , fn : clickCircle , evt : 'mouseup' , key : 'Shift+5' , parent : '#tools_ellipse' , icon : 'circle' } ,
{ sel : '#tool_fhellipse' , fn : clickFHEllipse , evt : 'mouseup' , parent : '#tools_ellipse' , icon : 'fh_ellipse' } ,
2009-12-11 20:35:51 +00:00
{ sel : '#tool_path' , fn : clickPath , evt : 'click' , key : 6 } ,
{ sel : '#tool_text' , fn : clickText , evt : 'click' , key : 7 } ,
{ sel : '#tool_image' , fn : clickImage , evt : 'mouseup' , key : 8 } ,
2009-12-18 21:30:56 +00:00
{ sel : '#tool_zoom' , fn : clickZoom , evt : 'mouseup' , key : 9 } ,
2010-01-12 21:38:39 +00:00
{ sel : '#tool_clear' , fn : clickClear , evt : 'mouseup' , key : [ modKey + 'N' , true ] } ,
{ sel : '#tool_save' , fn : function ( ) { editingsource ? saveSourceEditor ( ) : clickSave ( ) } , evt : 'mouseup' , key : [ modKey + 'S' , true ] } ,
{ sel : '#tool_open' , fn : clickOpen , evt : 'mouseup' , key : [ modKey + 'O' , true ] } ,
2009-12-11 20:35:51 +00:00
{ sel : '#tool_source' , fn : showSourceEditor , evt : 'click' , key : [ 'U' , true ] } ,
{ sel : '#tool_wireframe' , fn : clickWireframe , evt : 'click' , key : [ 'F' , true ] } ,
2009-12-23 14:25:43 +00:00
{ sel : '#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel' , fn : cancelOverlays , evt : 'click' , key : [ 'esc' , false , false ] , hidekey : true } ,
2009-12-11 20:35:51 +00:00
{ sel : '#tool_source_save' , fn : saveSourceEditor , evt : 'click' } ,
{ sel : '#tool_docprops_save' , fn : saveDocProperties , evt : 'click' } ,
2010-01-12 21:38:39 +00:00
{ sel : '#tool_docprops' , fn : showDocProperties , evt : 'mouseup' , key : [ modKey + 'I' , true ] } ,
2009-12-21 13:36:49 +00:00
{ sel : '#tool_delete,#tool_delete_multi' , fn : deleteSelected , evt : 'click' , key : [ 'del/backspace' , true ] } ,
2009-12-11 20:35:51 +00:00
{ sel : '#tool_reorient' , fn : reorientPath , evt : 'click' } ,
{ sel : '#tool_node_link' , fn : linkControlPoints , evt : 'click' } ,
{ sel : '#tool_node_clone' , fn : clonePathNode , evt : 'click' } ,
{ sel : '#tool_node_delete' , fn : deletePathNode , evt : 'click' } ,
{ sel : '#tool_move_top' , fn : moveToTopSelected , evt : 'click' , key : 'shift+up' } ,
{ sel : '#tool_move_bottom' , fn : moveToBottomSelected , evt : 'click' , key : 'shift+down' } ,
{ sel : '#tool_topath' , fn : convertToPath , evt : 'click' } ,
{ sel : '#tool_undo' , fn : clickUndo , evt : 'click' , key : [ modKey + 'Z' , true ] } ,
{ sel : '#tool_redo' , fn : clickRedo , evt : 'click' , key : [ modKey + 'Y' , true ] } ,
2009-12-21 13:36:49 +00:00
{ sel : '#tool_clone,#tool_clone_multi' , fn : clickClone , evt : 'click' , key : [ modKey + 'C' , true ] } ,
2009-12-11 20:35:51 +00:00
{ sel : '#tool_group' , fn : clickGroup , evt : 'click' , key : [ modKey + 'G' , true ] } ,
{ sel : '#tool_ungroup' , fn : clickGroup , evt : 'click' } ,
{ sel : '[id^=tool_align]' , fn : clickAlign , evt : 'click' } ,
// these two lines are required to make Opera work properly with the flyout mechanism
2010-01-29 18:27:26 +00:00
// {sel:'#tools_rect_show', fn: clickRect, evt: 'click'},
// {sel:'#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
2009-12-11 20:35:51 +00:00
{ sel : '#tool_bold' , fn : clickBold , evt : 'mousedown' } ,
{ sel : '#tool_italic' , fn : clickItalic , evt : 'mousedown' } ,
{ sel : '#sidepanel_handle' , fn : toggleSidePanel , key : [ modKey + 'X' ] } ,
// Shortcuts not associated with buttons
{ key : 'shift+left' , fn : function ( ) { rotateSelected ( 0 ) } } ,
{ key : 'shift+right' , fn : function ( ) { rotateSelected ( 1 ) } } ,
{ key : 'shift+O' , fn : selectPrev } ,
{ key : 'shift+P' , fn : selectNext } ,
{ key : [ 'ctrl+up' , true ] , fn : function ( ) { zoomImage ( 2 ) ; } } ,
{ key : [ 'ctrl+down' , true ] , fn : function ( ) { zoomImage ( . 5 ) ; } } ,
{ key : [ 'up' , true ] , fn : function ( ) { moveSelected ( 0 , - 1 ) ; } } ,
{ key : [ 'down' , true ] , fn : function ( ) { moveSelected ( 0 , 1 ) ; } } ,
{ key : [ 'left' , true ] , fn : function ( ) { moveSelected ( - 1 , 0 ) ; } } ,
2010-01-31 20:17:50 +00:00
{ key : [ 'right' , true ] , fn : function ( ) { moveSelected ( 1 , 0 ) ; } } ,
{ key : 'A' , fn : function ( ) { svgCanvas . selectAllInCurrentLayer ( ) ; } }
2009-12-11 20:35:51 +00:00
] ;
2009-12-22 16:28:31 +00:00
// Tooltips not directly associated with a single function
var key _assocs = {
'4/Shift+4' : '#tools_rect_show' ,
'5/Shift+5' : '#tools_ellipse_show'
} ;
2009-12-11 20:35:51 +00:00
return {
setAll : function ( ) {
2010-01-29 18:27:26 +00:00
var flyouts = { } ;
2009-12-11 20:35:51 +00:00
$ . each ( tool _buttons , function ( i , opts ) {
// Bind function to button
if ( opts . sel ) {
var btn = $ ( opts . sel ) ;
if ( opts . evt ) {
btn [ opts . evt ] ( opts . fn ) ;
}
2010-01-29 18:27:26 +00:00
// Add to parent flyout menu
if ( opts . parent ) {
var f _h = $ ( opts . parent ) ;
if ( ! f _h . length ) {
f _h = makeFlyoutHolder ( opts . parent . substr ( 1 ) ) ;
}
f _h . append ( btn ) ;
if ( ! $ . isArray ( flyouts [ opts . parent ] ) ) {
flyouts [ opts . parent ] = [ ] ;
}
flyouts [ opts . parent ] . push ( opts ) ;
}
2009-12-11 20:35:51 +00:00
}
2010-01-29 18:27:26 +00:00
2009-12-11 20:35:51 +00:00
// Bind function to shortcut key
if ( opts . key ) {
// Set shortcut based on options
2009-12-16 19:02:00 +00:00
var keyval , shortcut = '' , disInInp = true , fn = opts . fn , pd = false ;
2009-12-11 20:35:51 +00:00
if ( $ . isArray ( opts . key ) ) {
keyval = opts . key [ 0 ] ;
if ( opts . key . length > 1 ) pd = opts . key [ 1 ] ;
if ( opts . key . length > 2 ) disInInp = opts . key [ 2 ] ;
} else {
keyval = opts . key ;
}
keyval += '' ;
$ . each ( keyval . split ( '/' ) , function ( i , key ) {
$ ( document ) . bind ( 'keydown' , { combi : key , disableInInput : disInInp } , function ( e ) {
fn ( ) ;
2009-12-29 21:20:45 +00:00
if ( pd ) {
e . preventDefault ( ) ;
}
// Prevent default on ALL keys?
return false ;
2009-12-11 20:35:51 +00:00
} ) ;
} ) ;
// Put shortcut in title
2009-12-23 14:25:43 +00:00
if ( opts . sel && ! opts . hidekey ) {
2009-12-11 20:35:51 +00:00
var new _title = btn . attr ( 'title' ) . split ( '[' ) [ 0 ] + '[' + keyval + ']' ;
key _assocs [ keyval ] = opts . sel ;
2010-01-14 16:05:05 +00:00
// Disregard for menu items
if ( ! btn . parents ( '#main_menu' ) . length ) {
btn . attr ( 'title' , new _title ) ;
}
2009-12-11 20:35:51 +00:00
}
}
} ) ;
2010-01-29 18:27:26 +00:00
// Setup flyouts
setupFlyouts ( flyouts ) ;
2009-12-18 21:30:56 +00:00
// Misc additional actions
2009-12-11 20:35:51 +00:00
// Make "return" keypress trigger the change event
$ ( '.attr_changer, #image_url' ) . bind ( 'keydown' , { combi : 'return' } ,
function ( evt ) { $ ( this ) . change ( ) ; evt . preventDefault ( ) ; }
) ;
2009-12-18 21:30:56 +00:00
$ ( '#tool_zoom' ) . dblclick ( dblclickZoom ) ;
2009-12-11 20:35:51 +00:00
} ,
setTitles : function ( ) {
$ . each ( key _assocs , function ( keyval , sel ) {
2010-01-14 16:05:05 +00:00
var menu = ( $ ( sel ) . parents ( '#main_menu' ) . length ) ;
2009-12-11 20:35:51 +00:00
$ ( sel ) . each ( function ( ) {
2010-01-14 16:05:05 +00:00
if ( menu ) {
var t = $ ( this ) . text ( ) . split ( ' [' ) [ 0 ] ;
} else {
var t = this . title . split ( ' [' ) [ 0 ] ;
}
2009-12-11 20:35:51 +00:00
var key _str = '' ;
// Shift+Up
$ . each ( keyval . split ( '/' ) , function ( i , key ) {
var mod _bits = key . split ( '+' ) , mod = '' ;
if ( mod _bits . length > 1 ) {
mod = mod _bits [ 0 ] + '+' ;
key = mod _bits [ 1 ] ;
}
2009-12-22 16:28:31 +00:00
key _str += ( i ? '/' : '' ) + mod + ( uiStrings [ 'key_' + key ] || key ) ;
2009-12-11 20:35:51 +00:00
} ) ;
2010-01-14 16:05:05 +00:00
if ( menu ) {
this . lastChild . textContent = t + ' [' + key _str + ']' ;
} else {
this . title = t + ' [' + key _str + ']' ;
}
2009-12-11 20:35:51 +00:00
} ) ;
} ) ;
2010-01-29 18:27:26 +00:00
} ,
getButtonData : function ( sel ) {
var b ;
$ . each ( tool _buttons , function ( i , btn ) {
if ( btn . sel === sel ) b = btn ;
} ) ;
return b ;
2009-12-11 20:35:51 +00:00
}
} ;
} ( ) ;
Actions . setAll ( ) ;
2009-09-15 14:38:26 +00:00
2009-08-21 15:35:55 +00:00
$ ( '#rect_rx' ) . SpinButton ( { min : 0 , max : 1000 , step : 1 , callback : changeRectRadius } ) ;
2010-01-12 16:20:09 +00:00
$ ( '#stroke_width' ) . SpinButton ( { min : 0 , max : 99 , step : 1 , smallStep : 0.1 , callback : changeStrokeWidth } ) ;
2009-08-21 15:53:36 +00:00
$ ( '#angle' ) . SpinButton ( { min : - 180 , max : 180 , step : 5 , callback : changeRotationAngle } ) ;
2009-10-20 15:50:58 +00:00
$ ( '#font_size' ) . SpinButton ( { step : 1 , min : 0.001 , stepfunc : stepFontSize , callback : changeFontSize } ) ;
2009-10-20 20:06:55 +00:00
$ ( '#group_opacity' ) . SpinButton ( { step : 5 , min : 0 , max : 100 , callback : changeOpacity } ) ;
2009-10-20 15:50:58 +00:00
$ ( '#zoom' ) . SpinButton ( { min : 0.001 , max : 10000 , step : 50 , stepfunc : stepZoom , callback : changeZoom } ) ;
2009-09-15 14:38:26 +00:00
2009-11-09 18:59:53 +00:00
svgCanvas . setIconSize = setIconSize ;
2009-11-10 21:31:47 +00:00
svgCanvas . setLang = function ( lang , strings ) {
2009-11-11 18:13:26 +00:00
curPrefs . lang = lang ;
$ . pref ( 'lang' , lang ) ;
2009-11-10 21:31:47 +00:00
$ ( '#lang_select' ) . val ( lang ) ;
if ( strings ) {
// $.extend will only replace the given strings
2009-12-23 20:29:44 +00:00
var oldLayerName = $ ( '#layerlist tr.layersel td.layername' ) . text ( ) ;
var rename _layer = ( oldLayerName == uiStrings . layer + ' 1' ) ;
2009-12-08 19:38:14 +00:00
$ . extend ( uiStrings , strings ) ;
svgCanvas . setUiStrings ( strings ) ;
2009-12-11 20:35:51 +00:00
Actions . setTitles ( ) ;
2009-12-23 20:29:44 +00:00
if ( rename _layer ) {
svgCanvas . renameCurrentLayer ( uiStrings . layer + ' 1' ) ;
populateLayers ( ) ;
}
2010-01-26 21:28:52 +00:00
svgCanvas . runExtensions ( "langChanged" , lang ) ;
2010-02-03 14:14:57 +00:00
// Update flyout tooltips
setFlyoutTitles ( ) ;
2009-11-10 21:31:47 +00:00
}
} ;
2010-01-13 04:32:31 +00:00
// Extension mechanisms must call setCustomHandlers with two functions: opts.open and opts.save
// opts.open's responsibilities are:
// - invoke a file chooser dialog in 'open' mode
// - let user pick a SVG file
// - calls setCanvas.setSvgString() with the string contents of that file
// opts.save's responsibilities are:
// - accept the string contents of the current document
// - invoke a file chooser dialog in 'save' mode
// - save the file to location chosen by the user
2009-08-25 16:35:57 +00:00
svgCanvas . setCustomHandlers = function ( opts ) {
if ( opts . open ) {
2010-01-13 04:32:31 +00:00
$ ( '#tool_open' ) . show ( ) ;
svgCanvas . open = opts . open ;
2009-08-25 16:35:57 +00:00
}
if ( opts . save ) {
svgCanvas . bind ( "saved" , opts . save ) ;
2009-08-19 03:42:27 +00:00
}
}
2009-09-21 22:16:44 +00:00
2010-01-12 08:09:08 +00:00
// use HTML5 File API: http://www.w3.org/TR/FileAPI/
2010-01-13 04:32:31 +00:00
// if browser has HTML5 File API support, then we will show the open menu item
// and provide a file input to click. When that change event fires, it will
// get the text contents of the file and send it to the canvas
2010-01-12 08:09:08 +00:00
if ( window . FileReader ) {
2010-01-12 14:50:10 +00:00
var inp = $ ( '<input type="file">' ) . change ( function ( ) {
2010-01-13 04:32:31 +00:00
$ ( '#main_menu' ) . hide ( ) ;
2010-01-12 14:50:10 +00:00
if ( this . files . length == 1 ) {
var reader = new FileReader ( ) ;
reader . onloadend = function ( e ) {
2010-01-13 04:32:31 +00:00
svgCanvas . setSvgString ( e . target . result ) ;
2010-01-15 21:33:55 +00:00
updateCanvas ( ) ;
2010-01-12 14:50:10 +00:00
} ;
reader . readAsText ( this . files [ 0 ] ) ;
}
} ) ;
2010-01-12 21:38:39 +00:00
$ ( "#tool_open" ) . show ( ) . prepend ( inp ) ;
2010-01-12 08:09:08 +00:00
}
2010-01-15 15:04:57 +00:00
2010-01-15 21:33:55 +00:00
var updateCanvas = function ( center , new _ctr ) {
2010-01-15 15:04:57 +00:00
var w = workarea . width ( ) , h = workarea . height ( ) ;
var w _orig = w , h _orig = h ;
var zoom = svgCanvas . getZoom ( ) ;
2010-01-15 21:33:55 +00:00
var res = svgCanvas . getResolution ( ) ;
var w _area = workarea ;
2010-01-18 19:14:08 +00:00
var cnvs = $ ( "#svgcanvas" ) ;
2010-01-15 21:33:55 +00:00
var old _ctr = {
x : w _area [ 0 ] . scrollLeft + w _orig / 2 ,
y : w _area [ 0 ] . scrollTop + h _orig / 2
} ;
2010-01-18 18:03:09 +00:00
w = Math . max ( w _orig , res . w * 3 * zoom ) ;
h = Math . max ( h _orig , res . h * 3 * zoom ) ;
if ( w == w _orig && h == h _orig ) {
workarea . css ( 'overflow' , 'hidden' ) ;
} else {
workarea . css ( 'overflow' , 'scroll' ) ;
}
2010-01-18 19:14:08 +00:00
var old _can _y = cnvs . height ( ) / 2 ;
var old _can _x = cnvs . width ( ) / 2 ;
cnvs . width ( w ) . height ( h ) ;
var new _can _y = h / 2 ;
var new _can _x = w / 2 ;
2010-01-18 18:03:09 +00:00
var offset = svgCanvas . updateCanvas ( w , h ) ;
var ratio = new _can _x / old _can _x ;
var scroll _x = w / 2 - w _orig / 2 ;
var scroll _y = h / 2 - h _orig / 2 ;
2010-01-15 21:33:55 +00:00
if ( ! new _ctr ) {
2010-01-18 18:03:09 +00:00
var old _dist _x = old _ctr . x - old _can _x ;
var new _x = new _can _x + old _dist _x * ratio ;
var old _dist _y = old _ctr . y - old _can _y ;
var new _y = new _can _y + old _dist _y * ratio ;
2010-01-15 21:33:55 +00:00
new _ctr = {
2010-01-18 18:03:09 +00:00
x : new _x , // + res.w/2,
y : new _y //+ res.h/2,
2010-01-15 21:33:55 +00:00
} ;
2010-01-18 18:03:09 +00:00
2010-01-15 21:33:55 +00:00
} else {
new _ctr . x += offset . x ,
new _ctr . y += offset . y ;
2010-01-18 19:14:08 +00:00
}
2010-01-15 21:33:55 +00:00
if ( center ) {
2010-01-15 15:59:15 +00:00
w _area [ 0 ] . scrollLeft = scroll _x ;
2010-01-15 21:33:55 +00:00
w _area [ 0 ] . scrollTop = scroll _y ;
} else {
w _area [ 0 ] . scrollLeft = new _ctr . x - w _orig / 2 ;
w _area [ 0 ] . scrollTop = new _ctr . y - h _orig / 2 ;
}
2010-01-15 15:04:57 +00:00
}
2010-01-15 21:33:55 +00:00
2010-01-15 15:59:15 +00:00
$ ( function ( ) {
updateCanvas ( true ) ;
} ) ;
2009-09-28 20:14:18 +00:00
2009-10-14 18:01:05 +00:00
// var revnums = "svg-editor.js ($Rev$) ";
// revnums += svgCanvas.getVersion();
// $('#copyright')[0].setAttribute("title", revnums);
2009-06-07 15:07:57 +00:00
return svgCanvas ;
2009-06-07 13:11:01 +00:00
} ;
2009-08-25 16:35:57 +00:00
2009-11-09 18:59:53 +00:00
// This process starts before document.ready so the icons appear ASAP
2009-12-28 14:33:26 +00:00
( function ( ) {
2009-11-09 18:59:53 +00:00
$ . svgIcons ( 'images/svg_edit_icons.svg' , {
w : 24 , h : 24 ,
id _match : false ,
no _img : true ,
fallback _path : 'images/' ,
fallback : {
'new_image' : 'clear.png' ,
'save' : 'save.png' ,
'open' : 'open.png' ,
'source' : 'source.png' ,
'docprops' : 'document-properties.png' ,
'wireframe' : 'wireframe.png' ,
'undo' : 'undo.png' ,
'redo' : 'redo.png' ,
'select' : 'select.png' ,
2010-01-05 03:04:19 +00:00
'select_node' : 'select_node.png' ,
2009-11-09 18:59:53 +00:00
'pencil' : 'fhpath.png' ,
'pen' : 'line.png' ,
'square' : 'square.png' ,
'rect' : 'rect.png' ,
'fh_rect' : 'freehand-square.png' ,
'circle' : 'circle.png' ,
'ellipse' : 'ellipse.png' ,
'fh_ellipse' : 'freehand-circle.png' ,
'path' : 'path.png' ,
'text' : 'text.png' ,
'image' : 'image.png' ,
'zoom' : 'zoom.png' ,
'clone' : 'clone.png' ,
'delete' : 'delete.png' ,
'group' : 'shape_group.png' ,
'ungroup' : 'shape_ungroup.png' ,
'move_top' : 'move_top.png' ,
'move_bottom' : 'move_bottom.png' ,
2010-01-05 03:04:19 +00:00
'to_path' : 'to_path.png' ,
'link_controls' : 'link_controls.png' ,
'reorient' : 'reorient.png' ,
2009-11-09 18:59:53 +00:00
'align_left' : 'align-left.png' ,
'align_center' : 'align-center' ,
'align_right' : 'align-right' ,
'align_top' : 'align-top' ,
'align_middle' : 'align-middle' ,
'align_bottom' : 'align-bottom' ,
'go_up' : 'go-up.png' ,
'go_down' : 'go-down.png' ,
'ok' : 'save.png' ,
'cancel' : 'cancel.png' ,
'arrow_right' : 'flyouth.png' ,
'arrow_down' : 'dropdown.gif'
} ,
placement : {
2010-01-12 21:38:39 +00:00
'#logo' : 'logo' ,
2009-11-09 18:59:53 +00:00
2010-01-12 21:38:39 +00:00
'#tool_clear div,#layer_new' : 'new_image' ,
'#tool_save div' : 'save' ,
'#tool_open div div' : 'open' ,
2009-11-09 18:59:53 +00:00
'#tool_source' : 'source' ,
2010-01-12 21:38:39 +00:00
'#tool_docprops > div' : 'docprops' ,
2009-11-09 18:59:53 +00:00
'#tool_wireframe' : 'wireframe' ,
'#tool_undo' : 'undo' ,
'#tool_redo' : 'redo' ,
'#tool_select' : 'select' ,
'#tool_fhpath' : 'pencil' ,
'#tool_line' : 'pen' ,
2009-11-10 19:16:45 +00:00
'#tool_rect,#tools_rect_show' : 'rect' ,
'#tool_square' : 'square' ,
2009-11-09 18:59:53 +00:00
'#tool_fhrect' : 'fh_rect' ,
2009-11-10 19:16:45 +00:00
'#tool_ellipse,#tools_ellipse_show' : 'ellipse' ,
'#tool_circle' : 'circle' ,
2009-11-09 18:59:53 +00:00
'#tool_fhellipse' : 'fh_ellipse' ,
'#tool_path' : 'path' ,
'#tool_text,#layer_rename' : 'text' ,
'#tool_image' : 'image' ,
'#tool_zoom' : 'zoom' ,
'#tool_clone,#tool_clone_multi,#tool_node_clone' : 'clone' ,
'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete' : 'delete' ,
'#tool_move_top' : 'move_top' ,
'#tool_move_bottom' : 'move_bottom' ,
2009-11-30 19:14:23 +00:00
'#tool_topath' : 'to_path' ,
2009-12-01 19:26:33 +00:00
'#tool_node_link' : 'link_controls' ,
2009-11-30 19:14:23 +00:00
'#tool_reorient' : 'reorient' ,
2009-11-09 18:59:53 +00:00
'#tool_group' : 'group' ,
'#tool_ungroup' : 'ungroup' ,
'#tool_alignleft' : 'align_left' ,
'#tool_aligncenter' : 'align_center' ,
'#tool_alignright' : 'align_right' ,
'#tool_aligntop' : 'align_top' ,
'#tool_alignmiddle' : 'align_middle' ,
'#tool_alignbottom' : 'align_bottom' ,
2009-11-18 16:50:25 +00:00
'#url_notice' : 'warning' ,
2009-11-09 18:59:53 +00:00
'#layer_up' : 'go_up' ,
'#layer_down' : 'go_down' ,
'#layerlist td.layervis' : 'eye' ,
'#tool_source_save,#tool_docprops_save' : 'ok' ,
'#tool_source_cancel,#tool_docprops_cancel' : 'cancel' ,
'.flyout_arrow_horiz' : 'arrow_right' ,
2010-01-12 21:38:39 +00:00
'.dropdown button, #main_button .dropdown' : 'arrow_down' ,
2009-11-09 18:59:53 +00:00
'#palette .palette_item:first, #fill_bg, #stroke_bg' : 'no_color'
} ,
resize : {
2010-01-12 21:38:39 +00:00
'#logo .svg_icon' : 32 ,
2009-11-09 18:59:53 +00:00
'.flyout_arrow_horiz .svg_icon' : 5 ,
'.layer_button .svg_icon, #layerlist td.layervis .svg_icon' : 14 ,
'.dropdown button .svg_icon' : 7 ,
2010-01-12 21:38:39 +00:00
'#main_button .dropdown .svg_icon' : 9 ,
2009-11-12 16:00:50 +00:00
'.palette_item:first .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon' : 16 ,
'.toolbar_button button .svg_icon' : 16
2009-11-09 18:59:53 +00:00
} ,
callback : function ( icons ) {
2010-01-05 03:04:19 +00:00
$ ( '.toolbar_button button > svg, .toolbar_button button > img' ) . each ( function ( ) {
2009-11-09 18:59:53 +00:00
$ ( this ) . parent ( ) . prepend ( this ) ;
} ) ;
// Use small icons by default if not all left tools are visible
var tleft = $ ( '#tools_left' ) ;
var min _height = tleft . offset ( ) . top + tleft . outerHeight ( ) ;
2009-11-11 18:13:26 +00:00
var size = $ . pref ( 'iconsize' ) ;
if ( size && size != 'm' ) {
svgCanvas . setIconSize ( size ) ;
} else if ( $ ( window ) . height ( ) < min _height ) {
2009-11-09 18:59:53 +00:00
// Make smaller
svgCanvas . setIconSize ( 's' ) ;
}
2009-11-30 14:05:20 +00:00
2010-01-29 21:28:46 +00:00
// Look for any missing flyout icons from plugins
$ ( '.tools_flyout' ) . each ( function ( ) {
var shower = $ ( '#' + this . id + '_show' ) ;
var sel = shower . attr ( 'data-curopt' ) ;
// Check if there's an icon here
if ( ! shower . children ( 'svg, img' ) . length ) {
2010-02-02 19:24:17 +00:00
var clone = $ ( sel ) . children ( ) . clone ( ) ;
clone [ 0 ] . removeAttribute ( 'style' ) ; //Needed for Opera
shower . append ( clone ) ;
2010-01-29 21:28:46 +00:00
}
} ) ;
2009-11-30 14:05:20 +00:00
// Load source if given
var loc = document . location . href ;
if ( loc . indexOf ( '?source=' ) != - 1 ) {
var pre = '?source=data:image/svg+xml;base64,' ;
var src = loc . substring ( loc . indexOf ( pre ) + pre . length ) ;
2010-01-20 17:26:12 +00:00
svgCanvas . setSvgString ( Utils . decode64 ( src ) ) ;
2009-11-30 14:05:20 +00:00
}
2010-01-29 05:53:01 +00:00
else if ( loc . indexOf ( '?url=' ) != - 1 ) {
var pre = '?url=' ;
var url = loc . substring ( loc . indexOf ( pre ) + pre . length ) ;
$ . ajax ( {
'url' : url ,
'dataType' : 'text' ,
success : svgCanvas . setSvgString ,
error : function ( xhr ) {
if ( xhr . responseText ) {
svgCanvas . setSvgString ( xhr . responseText ) ;
}
}
} ) ;
}
2010-02-02 20:45:16 +00:00
svgCanvas . runCallback ( ) ;
2009-11-09 18:59:53 +00:00
}
} ) ;
2009-12-28 14:33:26 +00:00
} ( ) ) ;
2009-11-09 18:59:53 +00:00
2009-08-25 16:35:57 +00:00
// This happens when the page is loaded
$ ( function ( ) {
svgCanvas = svg _edit _setup ( ) ;
2010-02-11 21:24:15 +00:00
var good _langs = [ ] ;
$ ( '#lang_select option' ) . each ( function ( ) {
good _langs . push ( this . value ) ;
} ) ;
put _locale ( svgCanvas , null , good _langs ) ;
2009-09-18 20:22:02 +00:00
try {
2009-11-22 20:13:06 +00:00
json _encode = function ( obj ) {
//simple partial JSON encoder implementation
if ( window . JSON && JSON . stringify ) return JSON . stringify ( obj ) ;
var enc = arguments . callee ; //for purposes of recursion
if ( typeof obj == "boolean" || typeof obj == "number" ) {
return obj + '' //should work...
} else if ( typeof obj == "string" ) {
//a large portion of this is stolen from Douglas Crockford's json2.js
return '"' +
obj . replace (
/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g
, function ( a ) {
return '\\u' + ( '0000' + a . charCodeAt ( 0 ) . toString ( 16 ) ) . slice ( - 4 ) ;
} )
+ '"' ; //note that this isn't quite as purtyful as the usualness
} else if ( obj . length ) { //simple hackish test for arrayish-ness
for ( var i = 0 ; i < obj . length ; i ++ ) {
obj [ i ] = enc ( obj [ i ] ) ; //encode every sub-thingy on top
}
return "[" + obj . join ( "," ) + "]" ;
} else {
var pairs = [ ] ; //pairs will be stored here
for ( var k in obj ) { //loop through thingys
pairs . push ( enc ( k ) + ":" + enc ( obj [ k ] ) ) ; //key: value
}
return "{" + pairs . join ( "," ) + "}" //wrap in the braces
}
}
2009-09-18 20:22:02 +00:00
window . addEventListener ( "message" , function ( e ) {
2009-11-22 20:13:06 +00:00
var cbid = parseInt ( e . data . substr ( 0 , e . data . indexOf ( ";" ) ) ) ;
2009-09-18 20:22:02 +00:00
try {
2009-11-22 20:13:06 +00:00
e . source . postMessage ( "SVGe" + cbid + ";" + json _encode ( eval ( e . data ) ) , e . origin ) ;
2009-09-18 20:22:02 +00:00
} catch ( err ) {
2009-11-22 20:13:06 +00:00
e . source . postMessage ( "SVGe" + cbid + ";error:" + err . message , e . origin ) ;
2009-09-18 20:22:02 +00:00
}
} , false )
2009-11-22 20:33:12 +00:00
} catch ( err ) {
window . embed _error = err ;
}
2009-09-18 20:22:02 +00:00
2009-08-25 16:35:57 +00:00
} ) ;