Adding SVG icons to svg-editor.html and related scripts, keeping old with -classic suffix

git-svn-id: http://svg-edit.googlecode.com/svn/branches/transformlist@916 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2009-11-09 18:59:53 +00:00
parent c3d6520928
commit 2a46a5eca0
8 changed files with 3715 additions and 144 deletions

View File

@ -0,0 +1,679 @@
body {
background: #E8E8E8;
}
#svg_editor {
font-size: 8pt;
font-family: Verdana, Helvetica, Arial;
color: #000000;
}
#svg_editor a {
color: #0000FF;
}
#svg_editor hr {
border: none;
border-bottom: 1px solid #808080;
}
#svg_editor select {
margin-top: 4px;
}
#svg_editor #svgroot {
-moz-user-select: none;
position: absolute;
top: 0;
left: 0;
}
#svg_editor #svgcanvas {
background-color: #FFFFFF;
text-align: center;
vertical-align: middle;
width: 640px;
height: 480px;
-apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
position: relative;
}
#svg_editor div#palette_holder {
overflow-x: scroll;
overflow-y: hidden;
height: 31px;
border: 1px solid #808080;
border-top: none;
margin-top: 2px;
}
#svg_editor #fill_color, #svg_editor #stroke_color {
height: 16px;
width: 16px;
border: 1px solid #808080;
cursor: pointer;
}
#svg_editor div#palette {
float: left;
width: 6848px;
height: 16px;
}
#svg_editor div#workarea {
display: inline-block;
position:absolute;
top: 75px;
left: 40px;
bottom: 60px;
right: 14px;
background-color: #A0A0A0;
border: 1px solid #808080;
overflow: auto;
}
#svg_editor #sidepanels {
display: inline-block;
position:absolute;
top: 75px;
bottom: 60px;
right: 0px;
width: 2px;
padding: 10px;
border-color: #808080;
border-style: solid;
border-width: 1px;
border-left: none;
}
#svg_editor #layerpanel {
display: inline-block;
background-color: #E8E8E8;
position:absolute;
top: 1px;
bottom: 0px;
right: 0px;
width: 0px;
overflow: hidden;
margin: 0px;
}
/*
border-style: solid;
border-color: #666;
border-width: 0px 0px 0px 1px;
*/
#svg_editor #sidepanel_handle {
display: inline-block;
position: absolute;
background-color: #E8E8E8;
left: 0px;
top: 40%;
width: 1em;
padding: 5px 1px 5px 5px;
margin-left: 3px;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-user-select: none;
}
#svg_editor #sidepanel_handle:hover {
font-weight: bold;
}
#svg_editor #sidepanel_handle * {
cursor: pointer;
-moz-user-select: none;
}
#svg_editor #layerbuttons {
margin: 0px;
padding: 0px;
padding-left: 2px;
padding-right: 2px;
width: 106px;
height: 20px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
}
#svg_editor .layer_button {
width: 14px;
height: 14px;
padding: 1px;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
cursor: pointer;
}
#svg_editor .layer_buttonpressed {
width: 14px;
height: 14px;
padding: 1px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
cursor: pointer;
}
#svg_editor #layerlist {
margin: 1px;
padding: 0px;
width: 110px;
border-collapse: collapse;
border: 1px solid #808080;
background-color: #FFFFFF;
}
#svg_editor #layerlist tr.layer {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#svg_editor #layerlist tr.layersel {
border: 1px solid #808080;
background-color: #CCCCCC;
}
#svg_editor #layerlist td.layervis {
background-image: url('images/eye.png');
background-repeat: no-repeat;
background-position: 3px center;
width: 22px;
cursor:pointer;
}
#svg_editor #layerlist td.layerinvis {
background-image: none;
cursor:pointer;
}
#svg_editor #layerlist td.layername {
cursor: pointer;
}
#svg_editor #layerlist tr.layersel td.layername {
font-weight: bold;
}
#svg_editor #selLayerLabel {
white-space: nowrap;
}
#svg_editor #selLayerNames {
display: block;
}
#svg_editor div.palette_item {
height: 16px;
width: 16px;
float: left;
}
#svg_editor #logo {
position: absolute;
top: 4px;
left: 4px;
padding: 0px;
}
#svg_editor #logo a img {
border: 0;
width: 32px;
height: 32px;
}
#svg_editor #tools_top {
position: absolute;
left: 38px;
right: 2px;
top: 2px;
height: 75px;
border-bottom: none;
}
#svg_editor #tools_top > div {
float: left;
}
#svg_editor #tools_left {
position: absolute;
border-right: none;
width: 36px;
top: 75px;
left: 2px;
}
#workarea.wireframe #svgcontent * {
fill: none;
stroke: #000;
stroke-width: 1px;
stroke-opacity: 1.0;
stroke-dasharray: none;
opacity: 1;
pointer-events: stroke;
}
#workarea.wireframe #svgcontent text {
fill: #000;
stroke: none;
}
#svg_editor #selected_panel,
#svg_editor #multiselected_panel,
#svg_editor #g_panel,
#svg_editor #rect_panel,
#svg_editor #circle_panel,
#svg_editor #ellipse_panel,
#svg_editor #line_panel,
#svg_editor #image_panel,
#svg_editor #text_panel,
#svg_editor #path_node_panel {
display: none;
}
#svg_editor #selected_panel .selected_tool {
vertical-align: 12px;
}
#svg_editor #multiselected_panel .selected_tool {
vertical-align: 12px;
}
#svg_editor #tools_top > div, #tools_top {
float: left;
line-height: 26px;
}
#tools_top > div > * {
float: left;
margin-right: 2px;
}
#tools_top label {
margin-top: 3px;
margin-left: 5px;
}
#tools_top input {
margin-top: 5px;
height: 15px;
}
#svg_editor .flyout_arrow_horiz {
float: right;
position: relative;
top: -13px;
left: -5px;
margin-bottom: -13px;
}
.magic_field > * {
float: left;
}
span.zoom_tool {
line-height: 26px;
padding: 3px;
}
.magic_field input {
margin-top: 5px;
}
.dropdown {
position: relative;
}
.dropdown button {
background: transparent 3px 8px url('images/dropdown.gif') no-repeat;
width: 15px;
height: 21px;
margin: 6px 0 0 1px;
padding: 0;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
}
.dropdown button.down {
border-left: 1px solid #808080;
border-top: 1px solid #808080;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
background-color: #B0B0B0;
}
.dropdown ul {
list-style: none;
position: absolute;
margin: 0;
padding: 0;
left: -93px;
top: 26px;
display: none;
}
.dropup ul {
top: auto;
bottom: 26px;
}
.dropdown li {
display: block;
width: 120px;
padding: 4px;
background: #E8E8E8;
border: 1px solid #B0B0B0;
margin: 0 0 -1px 0;
line-height: 16px;
}
.dropdown li:hover {
background-color: #B0B0B0;
}
.dropdown li.special {
padding: 10px 4px;
}
.dropdown li.special:hover {
background: #E8E8E8;
}
#opacity_dropdown li {
width: 140px;
}
#svg_editor .tool_button,
#svg_editor .push_button,
#svg_editor .tool_button_current,
#svg_editor .tool_button_disabled {
height: 24px;
width: 24px;
margin: 2px;
padding: 2px;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
cursor: pointer;
}
#svg_editor .tool_button_current,
#svg_editor .push_button_pressed {
border-left: 1px solid #808080;
border-top: 1px solid #808080;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
background-color: #B0B0B0;
}
#svg_editor .tool_button_disabled {
opacity: 0.5;
cursor: default;
}
#svg_editor .tool_sep {
width: 2px;
height: 24px;
margin: 2px;
margin-right: 0;
padding: 2px;
}
#svg_editor #color_picker {
position: absolute;
display: none;
background: #E8E8E8;
height: 350px;
}
#svg_editor .tools_flyout {
position: absolute;
display: none;
cursor: pointer;
}
#svg_editor .tools_flyout_v {
position: absolute;
display: none;
cursor: pointer;
width: 30px;
}
#svg_editor #tool_square { background: 2px 2px url('images/square.png') no-repeat; }
#svg_editor #tool_rect { background: 2px 2px url('images/rect.png') no-repeat; }
#svg_editor #tool_fhrect { background: 2px 2px url('images/freehand-square.png') no-repeat; }
#svg_editor #tool_circle { background: 2px 2px url('images/circle.png') no-repeat; }
#svg_editor #tool_ellipse { background: 2px 2px url('images/ellipse.png') no-repeat; }
#svg_editor #tool_fhellipse { background: 2px 2px url('images/freehand-circle.png') no-repeat; }
#svg_editor #tool_stacktop { background: 2px 2px url('images/move_top.png') no-repeat; }
#svg_editor #tool_stackbottom { background: 2px 2px url('images/move_bottom.png') no-repeat; }
#svg_editor #tool_aligntop { background: 2px 2px url('images/align-top.png') no-repeat; }
#svg_editor #tool_alignmiddle { background: 2px 2px url('images/align-middle.png') no-repeat; }
#svg_editor #tool_alignbottom { background: 2px 2px url('images/align-bottom.png') no-repeat; }
#svg_editor #tool_alignleft { background: 2px 2px url('images/align-left.png') no-repeat; }
#svg_editor #tool_aligncenter { background: 2px 2px url('images/align-center.png') no-repeat; }
#svg_editor #tool_alignright { background: 2px 2px url('images/align-right.png') no-repeat; }
#svg_editor .tool_sep { background: 2px 2px url('images/sep.png') no-repeat; }
/* TODO: figure out what more-specific selector causes me to write this atrocity and not
simply .tool_flyout_button */
#svg_editor #tools_rect .tool_flyout_button, #svg_editor #tools_ellipse .tool_flyout_button {
float: left;
background-color: #E8E8E8;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
height: 28px;
width: 28px;
}
#svg_editor .tool_button:hover,
#svg_editor .push_button:hover {
background-color: #FFF;
}
#svg_editor #tools_rect .tool_flyout_button_current, #svg_editor #tools_ellipse .tool_flyout_button_current {
border-left: 1px solid #808080;
border-top: 1px solid #808080;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
background-color: #B0B0B0;
}
#svg_editor #tools_bottom {
position: absolute;
left: 40px;
right: 2px;
bottom: 2px;
height: 60px;
}
#svg_editor #tools_bottom_1 {
width: 115px;
float: left;
}
#svg_editor #tools_bottom_2 {
width: 250px;
float: left;
}
#svg_editor #tools_bottom_3 {
}
#svg_editor #copyright {
text-align: right;
}
#svg_source_editor {
display: none;
}
#svg_source_editor #svg_source_overlay {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
background-color: black;
opacity: 0.6;
}
#svg_source_editor #svg_source_container {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background-color: #B0B0B0;
opacity: 1.0;
text-align: center;
}
/*
top: 100px;
left: 80px;
right: 80px;
bottom: 100px;
*/
#svg_docprops #svg_docprops_container {
position: absolute;
top: 50px;
padding: 10px;
background-color: #B0B0B0;
opacity: 1.0;
}
#svg_docprops_container fieldset {
padding: 5px;
margin: 5px;
}
#svg_docprops_container label {
display: block;
margin-bottom: .2em;
}
#canvas_title {
display: block;
}
#svg_source_editor #svg_source_textarea {
position: relative;
width: 95%;
top: 5px;
height: 250px;
padding: 5px;
font-size: 12px;
}
#svg_source_editor #tool_source_back {
text-align: left;
padding-left: 20px;
}
#svg_docprops_container div.color_block {
float: left;
margin: 2px;
padding: 20px;
}
#change_background div.cur_background {
border: 2px solid blue;
padding: 18px;
}
#change_background input {
color: #888;
}
#change_background input.cur_background {
border: 2px solid blue;
color: #000;
}
#background_img {
position: absolute;
top: 0;
left: 0;
text-align: left;
}
#svg_source_editor button, #svg_docprops button {
padding: 5px 5px 7px 28px;
margin: 5px 20px 0 0;
}
#svg_docprops button {
margin-top: 0;
margin-bottom: 5px;
}
#svg_docprops {
display: none;
}
#svg_docprops #svg_docprops_overlay {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
background-color: black;
opacity: 0.6;
}
#tool_source_save, #tool_docprops_save {
background: #E8E8E8 url(images/save.png) no-repeat 2px 0;
}
#tool_source_cancel, #tool_docprops_cancel {
background: #E8E8E8 url(images/cancel.png) no-repeat 2px 0;
}
#tool_source_save, #tool_docprops_save {
background: #E8E8E8 url(images/save.png) no-repeat 2px 0;
}
#tool_source_cancel, #tool_docprops_cancel {
background: #E8E8E8 url(images/cancel.png) no-repeat 2px 0;
}
/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }
.ui-slider {
border: 1px solid #B0B0B0;
}
.ui-slider-handle {
background: #B0B0B0;
border: 1px solid #000;
}

View File

@ -0,0 +1,438 @@
<!DOCTYPE html>
<html>
<!-- removed for now, causes problems in Firefox: manifest="svg-editor.manifest" -->
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<link rel="icon" type="image/png" href="images/logo.png">
<link rel="stylesheet" href="jgraduate/css/jPicker-1.0.9.css" type="text/css"/>
<link rel="stylesheet" href="jgraduate/css/jGraduate-0.2.0.css" type="text/css"/>
<link rel="stylesheet" href="svg-editor-classic.css" type="text/css"/>
<link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/>
<!-- Development version of script tags: -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js-hotkeys/jquery.hotkeys.min.js"></script>
<script type="text/javascript" src="jgraduate/jquery.jgraduate.js"></script>
<script type="text/javascript" src="spinbtn/JQuerySpinBtn.js"></script>
<script type="text/javascript" src="svgcanvas.js"></script>
<script type="text/javascript" src="svg-editor-classic.js"></script>
<script type="text/javascript" src="locale/locale.js"></script>
<!-- Release version of script tags: >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="js-hotkeys/jquery.hotkeys-0.7.9.js"></script>
<script type="text/javascript" src="jgraduate/jquery.jgraduate.min.js"></script>
<script type="text/javascript" src="spinbtn/JQuerySpinBtn.min.js"></script>
<script type="text/javascript" src="svgcanvas.min.js"></script>
<script type="text/javascript" src="svg-editor.min.js"></script>
script type="text/javascript" src="locale/locale.min.js"></script-->
<!-- always minified scripts -->
<script type="text/javascript" src="jquery-ui/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="jgraduate/jpicker-1.0.9.min.js"></script>
<!-- feeds -->
<link rel="alternate" type="application/atom+xml" title="SVG-edit General Discussion" href="http://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml" />
<link rel="alternate" type="application/atom+xml" title="SVG-edit Updates (Issues/Fixes/Commits)" href="http://code.google.com/feeds/p/svg-edit/updates/basic" />
<!-- Add script with custom handlers here -->
<title>SVG-edit demo (Raster icons)</title>
</head>
<body>
<div id="svg_editor">
<div id="workarea">
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
<div id="svgcanvas"></div>
</div>
<div id="sidepanels">
<div id="layerpanel">
<h3 id="layersLable">Layers</h3>
<fieldset id="layerbuttons">
<img id="layer_new" class="layer_button" src="images/clear.png" alt="New Layer" title="New Layer"/>
<img id="layer_delete" class="layer_button" src="images/delete.png" alt="Delete Layer" title="Delete Layer"/>
<img id="layer_rename" class="layer_button" src="images/view-refresh.png" alt="Rename Layer" title="Rename Layer"/>
<img id="layer_up" class="layer_button" src="images/go-up.png" alt="Move Layer up" title="Move Layer Up"/>
<img id="layer_down" class="layer_button" src="images/go-down.png" alt="Move Layer Down" title="Move Layer Down"/>
</fieldset>
<table id="layerlist">
<tr class="layer">
<td class="layervis"></td>
<td class="layername">Layer 1</td>
</tr>
</table>
<span id="selLayerLabel">Move elements to:</span>
<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
<option selected="selected" value="layer1">Layer 1</option>
</select>
</div>
<div id="sidepanel_handle" onselectstart="return false;" title="Drag left/right to resize side panel [X]">L a y e r s</div>
</div>
<div id="logo">
<a href="http://svg-edit.googlecode.com/" target="_blank" title="SVG-edit Home Page">
<img src="images/logo.png" alt="logo" />
</a>
</div>
<div id="tools_top" class="tools_panel">
<!-- File-like buttons: New, Save, Source -->
<div id="file_panel">
<img class="push_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" />
<img style="display:none" class="push_button" id="tool_open" src="images/open.png" title="Open Image [O]" alt="Open"/>
<img class="push_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/>
<img class="push_button" id="tool_docprops" src="images/document-properties.png" title="Document Properties [I]"/>
<img class="push_button" id="tool_source" src="images/source.png" title="Edit Source [U]" alt="Source"/>
<img class="tool_button" id="tool_wireframe" src="images/wireframe.png" title="Wireframe Mode [F]" alt="Wireframe"/>
</div>
<!-- History buttons -->
<div id="history_panel">
<div class="tool_sep"></div>
<img class="push_button tool_button_disabled" id="tool_undo" src="images/undo.png" title="Undo [Z]"/>
<img class="push_button tool_button_disabled" id="tool_redo" src="images/redo.png" title="Redo [Y]"/>
</div>
<!-- Buttons when a single element is selected -->
<div id="selected_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="push_button" id="tool_clone" src="images/clone.png" title="Clone Element [C]" alt="Copy"/>
<img class="push_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="push_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
<img class="push_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label id="group_opacityLabel" class="selected_tool" for="group_opacity">opac:</label>
<input id="group_opacity" class="selected_tool" title="Change selected item opacity" size="3" value="100" type="text"/>
<div id="opacity_dropdown" class="dropdown">
<button></button>
<ul>
<li class="special"><div id="opac_slider"></div></li>
<li>100% (no transparency)</li>
<li>0%</li>
<li>25%</li>
<li>50%</li>
<li>75%</li>
<li>100%</li>
</ul>
</div>
<label id="angleLabel" class="selected_tool">angle:</label>
<input id="angle" class="selected_tool" title="Change rotation angle" size="2" value="0" type="text"/>
</div>
<!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="push_button" id="tool_clone_multi" src="images/clone.png" title="Clone Elements [C]" alt="Clone"/>
<img class="push_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="push_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/>
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
<div class="push_button" id="tool_alignright" title="Align Right"></div>
<div class="push_button" id="tool_aligntop" title="Align Top"></div>
<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
<span id="relativeToLabel" class="selected_tool">relative to:</span>
<select id="align_relative_to" class="selected_tool" title="Align relative to ...">
<option id="selected_objects" value="selected">selected objects</option>
<option id="largest_object" value="largest">largest object</option>
<option id="smallest_object" value="smallest">smallest object</option>
<option id="page" value="page">page</option>
</select>
<img class="tool_sep" src="images/sep.png" alt="|"/>
</div>
<div id="g_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="push_button" id="tool_ungroup" src="images/shape_ungroup.png" title="Ungroup Elements [G]" alt="Ungroup"/>
</div>
<div id="rect_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="rect_tool">x:</label>
<input id="rect_x" class="rect_tool attr_changer" title="Change rectangle X coordinate" size="3" data-attr="x"/>
<label class="rect_tool">y:</label>
<input id="rect_y" class="rect_tool attr_changer" title="Change rectangle Y coordinate" size="3" data-attr="y"/>
<label id="rwidthLabel" class="rect_tool">width:</label>
<input id="rect_width" class="rect_tool attr_changer" title="Change rectangle width" size="3" data-attr="width"/>
<label id="rheightLabel" class="rect_tool">height:</label>
<input id="rect_height" class="rect_tool attr_changer" title="Change rectangle height" size="3" data-attr="height"/>
<label id="cornerRadiusLabel" class="rect_tool">Corner Radius:</label>
<input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
</div>
<div id="image_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="image_tool">x:</label>
<input id="image_x" class="image_tool attr_changer" title="Change image X coordinate" size="3" data-attr="x"/>
<label class="image_tool">y:</label>
<input id="image_y" class="image_tool attr_changer" title="Change image Y coordinate" size="3" data-attr="y"/>
<label id="iwidthLabel" class="image_tool">width:</label>
<input id="image_width" class="image_tool attr_changer" title="Change image width" size="3" data-attr="width"/>
<label id="iheightLabel" class="image_tool">height:</label>
<input id="image_height" class="image_tool attr_changer" title="Change image height" size="3" data-attr="height"/>
<label class="image_tool">url:</label>
<input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/>
</div>
<div id="circle_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="circle_tool">cx:</label>
<input id="circle_cx" class="circle_tool attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
<label class="circle_tool">cy:</label>
<input id="circle_cy" class="circle_tool attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
<label class="circle_tool">r:</label>
<input id="circle_r" class="circle_tool attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
</div>
<div id="ellipse_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="ellipse_tool">cx:</label>
<input id="ellipse_cx" class="ellipse_tool attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
<label class="ellipse_tool">cy:</label>
<input id="ellipse_cy" class="ellipse_tool attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy"/>
<label class="ellipse_tool">rx:</label>
<input id="ellipse_rx" class="ellipse_tool attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx"/>
<label class="ellipse_tool">ry:</label>
<input id="ellipse_ry" class="ellipse_tool attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry"/>
</div>
<div id="line_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="line_tool">x1:</label>
<input id="line_x1" class="line_tool attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
<label class="line_tool">y1:</label>
<input id="line_y1" class="line_tool attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1"/>
<label class="line_tool">x2:</label>
<input id="line_x2" class="line_tool attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2"/>
<label class="line_tool">y2:</label>
<input id="line_y2" class="line_tool attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2"/>
</div>
<div id="text_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="text_tool">x:</label>
<input id="text_x" class="text_tool attr_changer" title="Change text X coordinate" size="3" data-attr="x"/>
<label class="text_tool">y:</label>
<input id="text_y" class="text_tool attr_changer" title="Change text Y coordinate" size="3" data-attr="y"/>
<img class="tool_button" id="tool_bold" src="images/bold.png" title="Bold Text [B]" alt="Bold"/>
<img class="tool_button" id="tool_italic" src="images/italic.png" title="Italic Text [I]" alt="Italic"/>
<select id="font_family" class="text_tool" title="Change Font Family">
<option selected="selected" value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
<option value="monospace">monospace</option>
</select>
<label id="font_sizeLabel" class="text_tool" for="font_size">size:</label>
<input id="font_size" class="text_tool" title="Change Font Size" size="3" value="0" type="text"/>
<input id="text" class="text_tool" type="text" title="Change text contents" size="35"/>
</div>
<div id="path_node_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="path_node_tool">x:</label>
<input id="path_node_x" class="path_node_tool attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
<label class="path_node_tool">y:</label>
<input id="path_node_y" class="path_node_tool attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
<select id="seg_type" class="path_node_tool" title="Change Segment type">
<option id="straight_segments" selected="selected" value="4">Straight</option>
<option id="curve_segments" value="6">Curve</option>
</select>
<img class="tool_button" id="tool_node_clone" src="images/clone.png" title="Clone Node" alt="Clone"/>
<img class="tool_button" id="tool_node_delete" src="images/delete.png" title="Delete Node" alt="Delete"/>
</div>
</div> <!-- tools_top -->
<div id="tools_left" class="tools_panel">
<img class="tool_button_current" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/>
<img class="tool_button" id="tool_fhpath" src="images/fhpath.png" title="Pencil Tool [2]" alt="Pencil"/><br/>
<img class="tool_button" id="tool_line" src="images/line.png" title="Line Tool [3]" alt="Line"/><br/>
<img class="tool_button" id="tools_rect_show" src="images/square.png" title="Square/Rect Tool [4/Shift+4]" alt="Square"/>
<img class="flyout_arrow_horiz" src="images/flyouth.png"/>
<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/>
<img class="flyout_arrow_horiz" src="images/flyouth.png"/>
<img class="tool_button" id="tool_path" src="images/path.png" title="Path Tool [6]" alt="Path"/>
<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [7]" alt="Text"/>
<img class="tool_button" id="tool_image" src="images/image.png" title="Image Tool [8]" alt="Image"/>
<img class="tool_button" id="tool_zoom" src="images/zoom.png" title="Zoom Tool [Ctrl+Up/Down]" alt="Zoom"/>
</div> <!-- tools_left -->
<div id="tools_bottom" class="tools_panel">
<!-- Zoom buttons -->
<div id="zoom_panel" class="magic_field">
<span id="zoomLabel" class="zoom_tool">zoom:</span>
<input id="zoom" class="zoom_tool" title="Change zoom level" size="3" value="100" type="text" />
<div id="zoom_dropdown" class="dropdown">
<button></button>
<ul>
<li>100%</li>
<li id="fit_to_all" data-val="content">Fit to all content</li>
<li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
<li id="fit_to_sel" data-val="selection">Fit to selection</li>
<li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
<li>25%</li>
<li>50%</li>
<li>100%</li>
<li>200%</li>
<li>400%</li>
<li>1000%</li>
</ul>
</div>
<img class="tool_sep" src="images/sep.png" alt="|"/>
</div>
<div id="tools_bottom_2">
<table>
<tr>
<td id="fill_tool_bottom">fill:</td>
<td><div id="fill_color" class="color_block" title="Change fill color"></div></td>
<td colspan="3"><div id="fill_opacity">100%</div></td>
</tr><tr>
<td id="stroke_tool_bottom">stroke:</td>
<td><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
<td><div id="stroke_opacity">100 %</div></td>
<td>
<input id="stroke_width" title="Change stroke width" size="2" value="5" type="text" data-attr="Stroke Width"/>
</td>
<td>
<select id="stroke_style" title="Change stroke dash style">
<option selected="selected" value="none">---</option>
<option value="2,2">...</option>
<option value="5,5">- -</option>
<option value="5,2,2,2">- .</option>
<option value="5,2,2,2,2,2">- ..</option>
</select>
</td>
</tr>
</table>
</div>
<div id="tools_bottom_3">
<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
</div>
<div id="copyright">Powered by <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.4-alpha</a></div>
</div>
<!-- hidden divs -->
<div id="color_picker"></div>
<div id="tools_rect" class="tools_flyout">
<div id="tool_square" class="tool_flyout_button" title="Square"></div>
<div id="tool_rect" class="tool_flyout_button" title="Rectangle"></div>
<div id="tool_fhrect" class="tool_flyout_button" title="Free-Hand Rectangle"></div>
</div>
<div id="tools_ellipse" class="tools_flyout">
<div id="tool_circle" class="tool_flyout_button" title="Circle"></div>
<div id="tool_ellipse" class="tool_flyout_button" title="Ellipse"></div>
<div id="tool_fhellipse" class="tool_flyout_button" title="Free-Hand Ellipse"></div>
</div>
</div> <!-- svg_editor -->
<div id="svg_source_editor">
<div id="svg_source_overlay"></div>
<div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save">Apply Changes</button>
<button id="tool_source_cancel">Cancel</button>
</div>
<form>
<textarea id="svg_source_textarea" spellcheck="false"></textarea>
</form>
</div>
</div>
<div id="svg_docprops">
<div id="svg_docprops_overlay"></div>
<div id="svg_docprops_container">
<div id="tool_docprops_back" class="toolbar_button">
<button id="tool_docprops_save">OK</button>
<button id="tool_docprops_cancel">Cancel</button>
<label><span id="svginfo_title">Image title:</span> <input type="text" id="canvas_title" size="24"></label>
<fieldset id="change_background">
<legend id="svginfo_change_background">Editor Background</legend>
<div id="bg_blocks"></div>
<label><span id="svginfo_bg_url">URL:</span> <input type="text" id="canvas_bg_url" size="17"></label>
</fieldset>
<fieldset id="change_resolution">
<legend id="svginfo_dim">Canvas Dimensions</legend>
<label><span id="svginfo_width">Width:</span> <input type="text" id="canvas_width" size="6"></label>
<label><span id="svginfo_height">Height:</span> <input type="text" id="canvas_height" size="6"></label>
<label>
<select id="resolution">
<option id="selectedPredefined" selected="selected">Select predefined:</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content">Fit to Content</option>
</select>
</label>
</fieldset>
</div>
</div>
</div>
</body>
</html>

1689
editor/svg-editor-classic.js Normal file

File diff suppressed because it is too large Load Diff

View File

@ -11,16 +11,20 @@
<link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/>
<!-- Development version of script tags: -->
<script type="text/javascript" src="jquery.js"></script>
<!-- <script type="text/javascript" src="../../../svg-icon-loader/jquery.svgicons.js"></script> -->
<script type="text/javascript" src="http://svg-icon-loader.googlecode.com/svn/trunk/jquery.svgicons.js"></script>
<script>
setIcons();
</script>
<script type="text/javascript" src="js-hotkeys/jquery.hotkeys.min.js"></script>
<script type="text/javascript" src="jgraduate/jquery.jgraduate.js"></script>
<script type="text/javascript" src="spinbtn/JQuerySpinBtn.js"></script>
<script type="text/javascript" src="svgcanvas.js"></script>
<script type="text/javascript" src="svg-editor.js"></script>
<script type="text/javascript" src="locale/locale.js"></script>
<!-- <script type="text/javascript" src="../../../svg-icon-loader/jquery.svgicons.js"></script> -->
<script type="text/javascript" src="http://svg-icon-loader.googlecode.com/svn/trunk/jquery.svgicons.js"></script>
<style>
/* This CSS replaces parts of/adds to svg-editor.css */
#svg_editor .tool_button,
#svg_editor #tools_rect .tool_flyout_button,
#svg_editor #tools_ellipse .tool_flyout_button {
@ -141,7 +145,9 @@ TODO for SVG icons:
- Make transparency icon clone to fill/stroke box when clicked
*/
$(function() {
function setIcons() {
$.svgIcons('images/svg_edit_icons.svg', {
w:24, h:24,
id_match: false,
@ -248,7 +254,7 @@ $(function() {
'#palette .palette_item:first':'no_color'
},
resize: {
'#logo .svg_icon': 32,
'#logo a .svg_icon': 32,
'.flyout_arrow_horiz .svg_icon': 5,
'.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
'.dropdown button .svg_icon': 7,
@ -267,7 +273,10 @@ $(function() {
}
}
});
}
$(function() {
/* Unchanged, just here because they're private methods */
var flyoutspeed = 1250;
@ -355,17 +364,17 @@ $(function() {
// Change icon size
$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button')
.find('.svg_icon').each(function() {
.find('svg').each(function() {
this.setAttribute('width',size_num);
this.setAttribute('height',size_num);
});
$.resizeSvgIcons({
'.flyout_arrow_horiz .svg_icon': size_num / 3,
'#logo .svg_icon': size_num * 1.3
'.flyout_arrow_horiz svg': size_num / 3,
'#logo svg': size_num * 1.3
});
if(size != 's') {
$.resizeSvgIcons({'#layerbuttons .svg_icon': size_num * .6});
$.resizeSvgIcons({'#layerbuttons svg': size_num * .6});
}
// Note that all rules will be prefixed with '#svg_editor' when parsed
@ -490,9 +499,9 @@ $(function() {
});
// For quick testing
window.setTimeout(function() {
$('#iconsize').val('s').change();
},1000);
// window.setTimeout(function() {
// $('#iconsize').val('s').change();
// },1000);
});
</script>
@ -515,7 +524,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<link rel="alternate" type="application/atom+xml" title="SVG-edit Updates (Issues/Fixes/Commits)" href="http://code.google.com/feeds/p/svg-edit/updates/basic" />
<!-- Add script with custom handlers here -->
<title>SVG-edit demo (w/SVG icons)</title>
<title>SVG-edit demo</title>
</head>
<body>

View File

@ -47,11 +47,20 @@ body {
margin-top: 2px;
}
#svg_editor #stroke_bg,
#svg_editor #fill_bg {
height: 16px;
width: 16px;
margin: 2px;
}
#svg_editor #fill_color, #svg_editor #stroke_color {
height: 16px;
width: 16px;
border: 1px solid #808080;
cursor: pointer;
margin-top: -19px;
margin-left: 1px;
}
#svg_editor div#palette {
@ -138,6 +147,7 @@ body {
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
overflow: auto;
}
#svg_editor .layer_button {
@ -149,6 +159,8 @@ body {
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
cursor: pointer;
float: left;
margin-right: 3px;
}
#svg_editor .layer_buttonpressed {
@ -182,9 +194,6 @@ body {
}
#svg_editor #layerlist td.layervis {
background-image: url('images/eye.png');
background-repeat: no-repeat;
background-position: 3px center;
width: 22px;
cursor:pointer;
}
@ -193,6 +202,14 @@ body {
cursor:pointer;
}
#svg_editor #layerlist td.layervis * {
display: block;
}
#svg_editor #layerlist td.layerinvis * {
display: none;
}
#svg_editor #layerlist td.layername {
cursor: pointer;
}
@ -311,6 +328,7 @@ body {
position: relative;
top: -13px;
left: -5px;
margin-top: -3px;
margin-bottom: -13px;
}
@ -331,8 +349,7 @@ span.zoom_tool {
position: relative;
}
.dropdown button {
background: transparent 3px 8px url('images/dropdown.gif') no-repeat;
#svg_editor .dropdown button {
width: 15px;
height: 21px;
margin: 6px 0 0 1px;
@ -422,13 +439,37 @@ span.zoom_tool {
}
#svg_editor .tool_sep {
width: 2px;
width: 1px;
background: #888;
border-left: 1px outset #EEE;
margin: 2px 3px;
padding: 0;
height: 24px;
margin: 2px;
margin-right: 0;
padding: 2px;
}
#tool_bold, #tool_italic {
font: bold 2.1em/1.1em serif;
text-align: center;
padding-left: 2px;
position: relative;
}
#tool_bold span, #tool_italic span {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
background: #000;
opacity: 0;
}
#tool_italic {
font-weight: normal;
font-style: italic;
}
#svg_editor #color_picker {
position: absolute;
display: none;
@ -449,22 +490,6 @@ span.zoom_tool {
width: 30px;
}
#svg_editor #tool_square { background: 2px 2px url('images/square.png') no-repeat; }
#svg_editor #tool_rect { background: 2px 2px url('images/rect.png') no-repeat; }
#svg_editor #tool_fhrect { background: 2px 2px url('images/freehand-square.png') no-repeat; }
#svg_editor #tool_circle { background: 2px 2px url('images/circle.png') no-repeat; }
#svg_editor #tool_ellipse { background: 2px 2px url('images/ellipse.png') no-repeat; }
#svg_editor #tool_fhellipse { background: 2px 2px url('images/freehand-circle.png') no-repeat; }
#svg_editor #tool_stacktop { background: 2px 2px url('images/move_top.png') no-repeat; }
#svg_editor #tool_stackbottom { background: 2px 2px url('images/move_bottom.png') no-repeat; }
#svg_editor #tool_aligntop { background: 2px 2px url('images/align-top.png') no-repeat; }
#svg_editor #tool_alignmiddle { background: 2px 2px url('images/align-middle.png') no-repeat; }
#svg_editor #tool_alignbottom { background: 2px 2px url('images/align-bottom.png') no-repeat; }
#svg_editor #tool_alignleft { background: 2px 2px url('images/align-left.png') no-repeat; }
#svg_editor #tool_aligncenter { background: 2px 2px url('images/align-center.png') no-repeat; }
#svg_editor #tool_alignright { background: 2px 2px url('images/align-right.png') no-repeat; }
#svg_editor .tool_sep { background: 2px 2px url('images/sep.png') no-repeat; }
/* TODO: figure out what more-specific selector causes me to write this atrocity and not
simply .tool_flyout_button */
#svg_editor #tools_rect .tool_flyout_button, #svg_editor #tools_ellipse .tool_flyout_button {
@ -635,21 +660,25 @@ span.zoom_tool {
opacity: 0.6;
}
#tool_source_save, #tool_docprops_save {
background: #E8E8E8 url(images/save.png) no-repeat 2px 0;
button#tool_source_save,
button#tool_source_cancel,
button#tool_docprops_save,
button#tool_docprops_cancel {
border:1px solid #dedede;
line-height:130%;
background: #E8E8E8 none;
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
#tool_source_cancel, #tool_docprops_cancel {
background: #E8E8E8 url(images/cancel.png) no-repeat 2px 0;
.toolbar_button button .svg_icon {
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
#tool_source_save, #tool_docprops_save {
background: #E8E8E8 url(images/save.png) no-repeat 2px 0;
}
#tool_source_cancel, #tool_docprops_cancel {
background: #E8E8E8 url(images/cancel.png) no-repeat 2px 0;
}
/* Slider
----------------------------------*/
@ -676,4 +705,12 @@ span.zoom_tool {
.ui-slider-handle {
background: #B0B0B0;
border: 1px solid #000;
}
}
/* Possibly not necessary */
#svg_editor #tools_rect .tool_flyout_button,
#svg_editor #tools_ellipse .tool_flyout_button {
padding: 2px;
width: 24px;
height: 24px;
}

View File

@ -13,12 +13,12 @@
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js-hotkeys/jquery.hotkeys.min.js"></script>
<script type="text/javascript" src="jgraduate/jquery.jgraduate.js"></script>
<script type="text/javascript" src="svgicons/jquery.svgicons.js"></script>
<script type="text/javascript" src="spinbtn/JQuerySpinBtn.js"></script>
<script type="text/javascript" src="svgcanvas.js"></script>
<script type="text/javascript" src="svg-editor.js"></script>
<script type="text/javascript" src="locale/locale.js"></script>
<!-- Release version of script tags: >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="js-hotkeys/jquery.hotkeys-0.7.9.js"></script>
@ -53,11 +53,11 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<div id="layerpanel">
<h3 id="layersLable">Layers</h3>
<fieldset id="layerbuttons">
<img id="layer_new" class="layer_button" src="images/clear.png" alt="New Layer" title="New Layer"/>
<img id="layer_delete" class="layer_button" src="images/delete.png" alt="Delete Layer" title="Delete Layer"/>
<img id="layer_rename" class="layer_button" src="images/view-refresh.png" alt="Rename Layer" title="Rename Layer"/>
<img id="layer_up" class="layer_button" src="images/go-up.png" alt="Move Layer up" title="Move Layer Up"/>
<img id="layer_down" class="layer_button" src="images/go-down.png" alt="Move Layer Down" title="Move Layer Down"/>
<div id="layer_new" class="layer_button" title="New Layer"></div>
<div id="layer_delete" class="layer_button" title="Delete Layer"></div>
<div id="layer_rename" class="layer_button" title="Rename Layer"></div>
<div id="layer_up" class="layer_button" title="Move Layer Up"></div>
<div id="layer_down" class="layer_button" title="Move Layer Down"></div>
</fieldset>
<table id="layerlist">
@ -76,7 +76,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<div id="logo">
<a href="http://svg-edit.googlecode.com/" target="_blank" title="SVG-edit Home Page">
<img src="images/logo.png" alt="logo" />
</a>
</div>
@ -84,30 +83,30 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<!-- File-like buttons: New, Save, Source -->
<div id="file_panel">
<img class="push_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" />
<img style="display:none" class="push_button" id="tool_open" src="images/open.png" title="Open Image [O]" alt="Open"/>
<img class="push_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/>
<img class="push_button" id="tool_docprops" src="images/document-properties.png" title="Document Properties [I]"/>
<img class="push_button" id="tool_source" src="images/source.png" title="Edit Source [U]" alt="Source"/>
<img class="tool_button" id="tool_wireframe" src="images/wireframe.png" title="Wireframe Mode [F]" alt="Wireframe"/>
<div class="push_button" id="tool_clear" title="New Image [N]"></div>
<div class="push_button" id="tool_open" title="Open Image [O]" style="display:none"></div>
<div class="push_button" id="tool_save" title="Save Image [S]"></div>
<div class="push_button" id="tool_docprops" title="Document Properties [I]"></div>
<div class="push_button" id="tool_source" title="Edit Source [U]"></div>
<div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
</div>
<!-- History buttons -->
<div id="history_panel">
<div class="tool_sep"></div>
<img class="push_button tool_button_disabled" id="tool_undo" src="images/undo.png" title="Undo [Z]"/>
<img class="push_button tool_button_disabled" id="tool_redo" src="images/redo.png" title="Redo [Y]"/>
<div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
<div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
</div>
<!-- Buttons when a single element is selected -->
<div id="selected_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="push_button" id="tool_clone" src="images/clone.png" title="Clone Element [C]" alt="Copy"/>
<img class="push_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="push_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
<img class="push_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<div class="tool_sep"></div>
<div class="push_button" id="tool_clone" title="Clone Element [C]"></div>
<div class="push_button" id="tool_delete" title="Delete Element [Delete/Backspace]"></div>
<div class="tool_sep"></div>
<div class="push_button" id="tool_move_top" title="Move to Top [Shift+Up]"></div>
<div class="push_button" id="tool_move_bottom" title="Move to Bottom [Shift+Down]"></div>
<div class="tool_sep"></div>
<label id="group_opacityLabel" class="selected_tool" for="group_opacity">opac:</label>
<input id="group_opacity" class="selected_tool" title="Change selected item opacity" size="3" value="100" type="text"/>
@ -130,11 +129,11 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="push_button" id="tool_clone_multi" src="images/clone.png" title="Clone Elements [C]" alt="Clone"/>
<img class="push_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="push_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/>
<div class="tool_sep"></div>
<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
<div class="tool_sep"></div>
<div class="push_button" id="tool_group" title="Group Elements [G]"></div>
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
<div class="push_button" id="tool_alignright" title="Align Right"></div>
@ -148,17 +147,17 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<option id="smallest_object" value="smallest">smallest object</option>
<option id="page" value="page">page</option>
</select>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<div class="tool_sep"></div>
</div>
<div id="g_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="push_button" id="tool_ungroup" src="images/shape_ungroup.png" title="Ungroup Elements [G]" alt="Ungroup"/>
<div class="tool_sep"></div>
<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
</div>
<div id="rect_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<div class="tool_sep"></div>
<label class="rect_tool">x:</label>
<input id="rect_x" class="rect_tool attr_changer" title="Change rectangle X coordinate" size="3" data-attr="x"/>
<label class="rect_tool">y:</label>
@ -172,7 +171,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="image_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<div class="tool_sep"></div>
<label class="image_tool">x:</label>
<input id="image_x" class="image_tool attr_changer" title="Change image X coordinate" size="3" data-attr="x"/>
<label class="image_tool">y:</label>
@ -186,7 +185,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="circle_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<div class="tool_sep"></div>
<label class="circle_tool">cx:</label>
<input id="circle_cx" class="circle_tool attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
<label class="circle_tool">cy:</label>
@ -196,7 +195,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="ellipse_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<div class="tool_sep"></div>
<label class="ellipse_tool">cx:</label>
<input id="ellipse_cx" class="ellipse_tool attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
<label class="ellipse_tool">cy:</label>
@ -208,7 +207,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="line_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<div class="tool_sep"></div>
<label class="line_tool">x1:</label>
<input id="line_x1" class="line_tool attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
<label class="line_tool">y1:</label>
@ -220,13 +219,13 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="text_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<div class="tool_sep"></div>
<label class="text_tool">x:</label>
<input id="text_x" class="text_tool attr_changer" title="Change text X coordinate" size="3" data-attr="x"/>
<label class="text_tool">y:</label>
<input id="text_y" class="text_tool attr_changer" title="Change text Y coordinate" size="3" data-attr="y"/>
<img class="tool_button" id="tool_bold" src="images/bold.png" title="Bold Text [B]" alt="Bold"/>
<img class="tool_button" id="tool_italic" src="images/italic.png" title="Italic Text [I]" alt="Italic"/>
<div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
<select id="font_family" class="text_tool" title="Change Font Family">
<option selected="selected" value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
@ -240,7 +239,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
<div id="path_node_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<div class="tool_sep"></div>
<label class="path_node_tool">x:</label>
<input id="path_node_x" class="path_node_tool attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
<label class="path_node_tool">y:</label>
@ -249,24 +248,24 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<option id="straight_segments" selected="selected" value="4">Straight</option>
<option id="curve_segments" value="6">Curve</option>
</select>
<img class="tool_button" id="tool_node_clone" src="images/clone.png" title="Clone Node" alt="Clone"/>
<img class="tool_button" id="tool_node_delete" src="images/delete.png" title="Delete Node" alt="Delete"/>
<div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
<div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
</div>
</div> <!-- tools_top -->
<div id="tools_left" class="tools_panel">
<img class="tool_button_current" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/>
<img class="tool_button" id="tool_fhpath" src="images/fhpath.png" title="Pencil Tool [2]" alt="Pencil"/><br/>
<img class="tool_button" id="tool_line" src="images/line.png" title="Line Tool [3]" alt="Line"/><br/>
<img class="tool_button" id="tools_rect_show" src="images/square.png" title="Square/Rect Tool [4/Shift+4]" alt="Square"/>
<img class="flyout_arrow_horiz" src="images/flyouth.png"/>
<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/>
<img class="flyout_arrow_horiz" src="images/flyouth.png"/>
<img class="tool_button" id="tool_path" src="images/path.png" title="Path Tool [6]" alt="Path"/>
<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [7]" alt="Text"/>
<img class="tool_button" id="tool_image" src="images/image.png" title="Image Tool [8]" alt="Image"/>
<img class="tool_button" id="tool_zoom" src="images/zoom.png" title="Zoom Tool [Ctrl+Up/Down]" alt="Zoom"/>
<div class="tool_button_current" id="tool_select" title="Select Tool [1]"></div>
<div class="tool_button" id="tool_fhpath" title="Pencil Tool [2]"></div>
<div class="tool_button" id="tool_line" title="Line Tool [3]"></div>
<div class="tool_button" id="tools_rect_show" title="Square/Rect Tool [4/Shift+4]"></div>
<div class="flyout_arrow_horiz"></div>
<div class="tool_button" id="tools_ellipse_show" title="Ellipse/Circle Tool [5/Shift+5]"></div>
<div class="flyout_arrow_horiz"></div>
<div class="tool_button" id="tool_path" title="Path Tool [7]"></div>
<div class="tool_button" id="tool_text" title="Text Tool [6]"></div>
<div class="tool_button" id="tool_image" title="Image Tool [8]"></div>
<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
</div> <!-- tools_left -->
<div id="tools_bottom" class="tools_panel">
@ -291,19 +290,19 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<li>1000%</li>
</ul>
</div>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<div class="tool_sep"></div>
</div>
<div id="tools_bottom_2">
<table>
<tr>
<td id="fill_tool_bottom">fill:</td>
<td><div id="fill_color" class="color_block" title="Change fill color"></div></td>
<td colspan="3"><div id="fill_opacity">100%</div></td>
<td id="fill_tool_bottom" class="label">fill:</td>
<td><div id="fill_bg"></div><div id="fill_color" class="color_block" title="Change fill color"></div></td>
<td colspan="3"><div id="fill_opacity" class="label">100%</div></td>
</tr><tr>
<td id="stroke_tool_bottom">stroke:</td>
<td><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
<td><div id="stroke_opacity">100 %</div></td>
<td id="stroke_tool_bottom" class="label">stroke:</td>
<td><div id="stroke_bg"></div><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
<td><div id="stroke_opacity" class="label">100 %</div></td>
<td>
<input id="stroke_width" title="Change stroke width" size="2" value="5" type="text" data-attr="Stroke Width"/>
</td>
@ -390,7 +389,16 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<option id="fitToContent" value="content">Fit to Content</option>
</select>
</label>
</fieldset>
<fieldset id="change_iconsize">
<legend id="svginfo_icons">Icon size</legend>
<select id="iconsize">
<option id="icon_small" value="s">Small</option>
<option id="icon_medium" value="m" selected="selected">Medium</option>
<option id="icon_large" value="l">Large</option>
<option id="icon_xlarge" value="xl">Extra Large</option>
</select>
</fieldset>
</div>
</div>

View File

@ -194,7 +194,6 @@ function svg_edit_setup() {
fillOpacity = "N/A";
}
document.getElementById("gradbox_fill").parentNode.firstChild.setAttribute("fill", fillColor);
if (strokeColor == null || strokeColor == "" || strokeColor == "none") {
strokeColor = "none";
strokeOpacity = "N/A";
@ -339,7 +338,7 @@ function svg_edit_setup() {
svgCanvas.bind("saved", saveHandler);
svgCanvas.bind("zoomed", zoomChanged);
var str = '<div class="palette_item" style="background-image: url(\'images/none.png\');" data-rgb="none"></div>'
var str = '<div class="palette_item" data-rgb="none"></div>'
$.each(palette, function(i,item){
str += '<div class="palette_item" style="background-color: ' + item + ';" data-rgb="' + item + '"></div>';
});
@ -606,6 +605,14 @@ function svg_edit_setup() {
}
}, true);
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);
}
var clickSelect = function() {
if (toolButtonClick('#tool_select')) {
svgCanvas.setMode('select');
@ -630,16 +637,45 @@ function svg_edit_setup() {
flyoutspeed = 'normal';
svgCanvas.setMode('square');
}
$('#tools_rect_show').attr('src', 'images/square.png');
setIcon('#tools_rect_show','square');
};
var clickRect = function(){
if (toolButtonClick('#tools_rect_show')) {
svgCanvas.setMode('rect');
}
$('#tools_rect_show').attr('src', 'images/rect.png');
setIcon('#tools_rect_show','rect');
};
var clickFHRect = function(){
if (toolButtonClick('#tools_rect_show')) {
svgCanvas.setMode('fhrect');
}
setIcon('#tools_rect_show','fh_rect');
};
var clickCircle = function(){
if (toolButtonClick('#tools_ellipse_show', flyoutspeed)) {
flyoutspeed = 'normal';
svgCanvas.setMode('circle');
}
setIcon('#tools_ellipse_show','circle');
};
var clickEllipse = function(){
if (toolButtonClick('#tools_ellipse_show')) {
svgCanvas.setMode('ellipse');
}
setIcon('#tools_ellipse_show','ellipse');
};
var clickFHEllipse = function(){
if (toolButtonClick('#tools_ellipse_show')) {
svgCanvas.setMode('fhellipse');
}
setIcon('#tools_ellipse_show','fh_ellipse');
};
var clickImage = function(){
if (toolButtonClick('#tool_image')) {
svgCanvas.setMode('image');
@ -663,35 +699,6 @@ function svg_edit_setup() {
}
};
var clickFHRect = function(){
if (toolButtonClick('#tools_rect_show')) {
svgCanvas.setMode('fhrect');
}
$('#tools_rect_show').attr('src', 'images/freehand-square.png');
};
var clickCircle = function(){
if (toolButtonClick('#tools_ellipse_show', flyoutspeed)) {
flyoutspeed = 'normal';
svgCanvas.setMode('circle');
}
$('#tools_ellipse_show').attr('src', 'images/circle.png');
};
var clickEllipse = function(){
if (toolButtonClick('#tools_ellipse_show')) {
svgCanvas.setMode('ellipse');
}
$('#tools_ellipse_show').attr('src', 'images/ellipse.png');
};
var clickFHEllipse = function(){
if (toolButtonClick('#tools_ellipse_show')) {
svgCanvas.setMode('fhellipse');
}
$('#tools_ellipse_show').attr('src', 'images/freehand-circle.png');
};
var clickText = function(){
toolButtonClick('#tool_text');
svgCanvas.setMode('text');
@ -939,9 +946,151 @@ function svg_edit_setup() {
$('#background_img').remove();
}
// set icon size
setIconSize($('#iconsize').val());
hideDocProperties();
};
var setIconSize = function(size) {
var icon_sizes = { s:16, m:24, l:32, xl:48 };
var size_num = icon_sizes[size];
// Change icon size
$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button')
.find('svg').each(function() {
this.setAttribute('width',size_num);
this.setAttribute('height',size_num);
});
$.resizeSvgIcons({
'.flyout_arrow_horiz svg': size_num / 3,
'#logo svg': size_num * 1.3
});
if(size != 's') {
$.resizeSvgIcons({'#layerbuttons svg': size_num * .6});
}
// Note that all rules will be prefixed with '#svg_editor' when parsed
var cssResizeRules = {
".tool_button,\
.push_button,\
.tool_button_current,\
.tool_button_disabled,\
#tools_rect .tool_flyout_button,\
#tools_ellipse .tool_flyout_button": {
'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'}
},
"#tools_top": {
'left': {s: '27px', l: '50px', xl: '70px'},
'height': {s: '50px', l: '88px', xl: '125px'}
},
"#tools_left": {
'width': {s: '26px', l: '34px', xl: '42px'},
'top': {s: '50px', l: '87px', xl: '125px'}
},
"div#workarea": {
'left': {s: '27px', l: '46px', xl: '65px'},
'top': {s: '50px', l: '88px', xl: '125px'},
'bottom': {s: '52px', l: '68px', xl: '75px'}
},
"#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'}
},
"#tools_bottom input": {
'margin-top': {s: '6px', l: '4px', xl: '5px'},
},
"#tools_bottom span, #copyright, #tools_bottom .label": {
'font-size': {l: '1.5em', xl: '2em'}
},
"#tools_bottom_2": {
'width': {l: '295px', xl: '355px'}
},
"#tools_top > div, #tools_top": {
'line-height': {s: '17px', l: '34px', xl: '50px'}
},
".dropdown button": {
'height': {s: '18px', l: '34px', xl: '40px'}
},
"#tools_top label, #tools_bottom label": {
'font-size': {s: '1em', l: '1.5em', xl: '2em'},
'margin-top': {s: '1px', l: '3px', xl: '5px'}
},
"#tool_bold, #tool_italic": {
'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
},
"#sidepanels": {
'top': {s: '50px', l: '88px', xl: '125px'},
'bottom': {s: '52px', l: '68px', xl: '65px'},
},
'#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'}
},
".flyout_arrow_horiz": {
'left': {s: '-5px', l: '5px', xl: '14px'},
'top': {s: '-13px', l: '-13px', xl: '-20px'}
},
"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);
}
var pos = $('#tools_rect_show').offset();
$('#tools_rect').css({'left': pos.left, 'top': pos.top});
pos = $('#tools_ellipse_show').offset();
$('#tools_ellipse').css({'left': pos.left, 'top': pos.top});
}
var cancelOverlays = function() {
if (!editingsource && !docprops) return;
@ -1488,6 +1637,7 @@ function svg_edit_setup() {
selLayerNames.empty();
var currentlayer = svgCanvas.getCurrentLayer();
var layer = svgCanvas.getNumLayers();
var icon = $.getSvgIcon('eye');
// we get the layers in the reverse z-order (the layer rendered on top is listed first)
while (layer--) {
var name = svgCanvas.getLayer(layer);
@ -1507,6 +1657,11 @@ function svg_edit_setup() {
layerlist.append(appendstr);
selLayerNames.append("<option value=\"" + name + "\">" + name + "</option>");
}
if(icon !== undefined) {
var copy = icon.clone();
$('td.layervis',layerlist).append(icon.clone());
$.resizeSvgIcons({'td.layervis .svg_icon':14});
}
// handle selection of layer
$('#layerlist td.layername')
.click(function(evt){
@ -1651,6 +1806,8 @@ function svg_edit_setup() {
$('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity });
$('#zoom').SpinButton({ min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, callback: changeZoom });
svgCanvas.setIconSize = setIconSize;
svgCanvas.setCustomHandlers = function(opts) {
if(opts.open) {
$('#tool_open').show();
@ -1671,6 +1828,139 @@ function svg_edit_setup() {
return svgCanvas;
};
// This process starts before document.ready so the icons appear ASAP
setSVGIcons();
function setSVGIcons() {
$.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',
'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',
'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: {
'#logo a':'logo',
'#tool_clear,#layer_new':'new_image',
'#tool_save':'save',
'#tool_open':'open',
'#tool_source':'source',
'#tool_docprops':'docprops',
'#tool_wireframe':'wireframe',
'#tool_undo':'undo',
'#tool_redo':'redo',
'#tool_select':'select',
'#tool_fhpath':'pencil',
'#tool_line':'pen',
'#tool_square,#tools_rect_show':'square',
'#tool_rect':'rect',
'#tool_fhrect':'fh_rect',
'#tool_circle,#tools_ellipse_show':'circle',
'#tool_ellipse':'ellipse',
'#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',
'#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',
'#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',
'.dropdown button':'arrow_down',
'#palette .palette_item:first, #fill_bg, #stroke_bg':'no_color'
},
resize: {
'#logo a .svg_icon': 32,
'.flyout_arrow_horiz .svg_icon': 5,
'.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
'.dropdown button .svg_icon': 7,
'#palette .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon': 16
},
callback: function(icons) {
$('.toolbar_button button .svg_icon').each(function() {
$(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();
if($(window).height() < min_height) {
// Make smaller
svgCanvas.setIconSize('s');
}
}
});
}
// This happens when the page is loaded
$(function() {
put_locale();

View File

@ -0,0 +1,421 @@
/*
* SVG Icon Loader
*
* jQuery Plugin for loading SVG icons from a single file
*
* Copyright (c) 2009 Alexis Deveria
* http://a.deveria.com
*
* Apache 2 License
How to use:
1. Create the SVG master file that includes all icons:
The master SVG icon-containing file is an SVG file that contains
<foreignContent> elements. Each <foreignContent> element should contain the markup of an SVG
icon. The <foreignContent> element has an ID that should
correspond with the ID of the HTML element used on the page that should contain
or optionally be replaced by the icon. Additionally, one empty element should be
added at the end with id "svg_eof".
2. Optionally create fallback raster images for each SVG icon.
3. Include the jQuery and the SVG Icon Loader scripts on your page.
4. Run $.svgIcons() when the document is ready:
$.svgIcons( file [string], options [object literal]);
File is the location of a local SVG or SVGz file.
All options are optional and can include:
- 'w (number)': The icon widths
- 'h (number)': The icon heights
- 'fallback (object literal)': List of raster images with each
key being the SVG icon ID to replace, and the value the image file name.
- 'fallback_path (string)': The path to use for all images
listed under "fallback"
- 'replace (boolean)': If set to true, HTML elements will be replaced by,
rather than include the SVG icon.
- 'placement (object literal)': List with selectors for keys and SVG icon ids
as values. This provides a custom method of adding icons.
- 'resize (object literal)': List with selectors for keys and numbers
as values. This allows an easy way to resize specific icons.
- 'callback (function)': A function to call when all icons have been loaded.
Includes an object literal as its argument with as keys all icon IDs and the
icon as a jQuery object as its value.
- 'id_match (boolean)': Automatically attempt to match SVG icon ids with
corresponding HTML id (default: true)
- 'no_img (boolean)': Prevent attempting to convert the icon into an <img> element (may be faster, help for browser consistency)
5. To access an icon at a later point without using the callback, use this:
$.getSvgIcon(id (string));
This will return the icon (as jQuery object) with a given ID.
6. To resize icons at a later point without using the callback, use this:
$.resizeSvgIcons(resizeOptions) (use the same way as the "resize" parameter)
Example usage #1:
$(function() {
$.svgIcons('my_icon_set.svg'); // The SVG file that contains all icons
// No options have been set, so all icons will automatically be inserted
// into HTML elements that match the same IDs.
});
Example usage #2:
$(function() {
$.svgIcons('my_icon_set.svg', { // The SVG file that contains all icons
callback: function(icons) { // Custom callback function that sets click
// events for each icon
$.each(icons, function(id, icon) {
icon.click(function() {
alert('You clicked on the icon with id ' + id);
});
});
}
}); //The SVG file that contains all icons
});
Example usage #3:
$(function() {
$.svgIcons('my_icon_set.svgz', { // The SVGZ file that contains all icons
w: 32, // All icons will be 32px wide
h: 32, // All icons will be 32px high
fallback_path: 'icons/', // All fallback files can be found here
fallback: {
'#open_icon': 'open.png', // The "open.png" will be appended to the
// HTML element with ID "open_icon"
'#close_icon': 'close.png',
'#save_icon': 'save.png'
},
placement: {'.open_icon','open'}, // The "open" icon will be added
// to all elements with class "open_icon"
resize: function() {
'#save_icon .svg_icon': 64 // The "save" icon will be resized to 64 x 64px
},
callback: function(icons) { // Sets background color for "close" icon
icons['close'].css('background','red');
}
})
});
*/
(function($) {
var svg_icons = {};
$.svgIcons = function(file, opts) {
var svgns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
icon_w = opts.w?opts.w : 24,
icon_h = opts.h?opts.h : 24,
elems, svgdoc, testImg,
icons_made = false, data_loaded = false, load_attempts = 0,
ua = navigator.userAgent, isOpera = !!window.opera, isSafari = (ua.indexOf('Safari/') > -1 && ua.indexOf('Chrome/')==-1),
data_pre = 'data:image/svg+xml;charset=utf-8;base64,';
if(opts.svgz) {
var data_el = $('<object data="' + file + '" type=image/svg+xml>').appendTo('body').hide();
try {
svgdoc = data_el[0].contentDocument;
// TODO: IE still loads this, shouldn't even bother.
data_el.load(getIcons);
getIcons(0, true); // Opera will not run "load" event if file is already cached
} catch(err1) {
useFallback();
}
} else {
$.ajax({
url: file,
dataType: 'xml',
success: function(data) {
svgdoc = data;
$(function() {
getIcons('ajax');
});
},
error: function() {
$(function() {
useFallback();
});
}
});
}
function getIcons(evt, no_wait) {
if(evt !== 'ajax') {
if(data_loaded) return;
// Webkit sometimes says svgdoc is undefined, other times
// it fails to load all nodes. Thus we must make sure the "eof"
// element is loaded.
svgdoc = data_el[0].contentDocument; // Needed again for Webkit
var isReady = (svgdoc && svgdoc.getElementById('svg_eof'));
if(!isReady && !(no_wait && isReady)) {
load_attempts++;
if(load_attempts < 50) {
setTimeout(getIcons, 20);
} else {
useFallback();
data_loaded = true;
}
return;
}
data_loaded = true;
}
// Clean source SVGs (mostly for Inkscape files)
// TODO: Find a way to do this without crashing Safari (when converting to IMG)
$(svgdoc).find('metadata').remove().end()
.find('*').each(function(i, el) {
if(el.nodeName.indexOf(':') != -1) {
$(el).remove();
}
var attrs = $.extend(false, el.attributes, {});
for(i in attrs) {
var attr = attrs[i];
var fullattr = attr.prefix?attr.prefix + ':' + attr.localName:'';
if(attr.prefix) {
el.removeAttribute(attr.localName); // for Opera
el.removeAttribute(fullattr); // for Webkit
}
if(fullattr == 'xlink:href') {
el.setAttribute('xlink:href', attr.nodeValue);
}
}
});
elems = $(svgdoc.firstChild).children(); //.getElementsByTagName('foreignContent');
var testSrc = data_pre + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
testImg = $(new Image()).attr({
src: testSrc,
width: 0,
height: 0
}).appendTo('body')
.load(function () {
// Safari 4 crashes, Opera and Chrome don't
makeIcons(!isSafari);
}).error(function () {
makeIcons();
});
}
function makeIcons(toImage, fallback) {
if(icons_made) return;
if(opts.no_img) toImage = false;
var holder;
var setIcon = function(target, icon, id, setID) {
if(isOpera) icon.css('visibility','hidden');
if(opts.replace) {
if(setID) icon.attr('id',id);
var cl = target.attr('class');
if(cl) icon.attr('class','svg_icon '+cl);
target.replaceWith(icon);
} else {
target.append(icon);
}
if(isOpera) {
setTimeout(function() {
icon.attr('style','visibility:visible;');
},1);
}
}
var addIcon = function(icon, id) {
if(opts.id_match === undefined || opts.id_match !== false) {
setIcon(holder, icon, id, true);
}
svg_icons[id] = icon;
}
if(toImage) {
var temp_holder = $(document.createElement('div'));
temp_holder.hide().appendTo('body');
}
if(fallback) {
var path = opts.fallback_path?opts.fallback_path:'';
$.each(fallback, function(id, imgsrc) {
holder = $('#' + id);
var icon = $(new Image())
.attr({
'class':'svg_icon',
src: path + imgsrc,
'width': icon_w,
'height': icon_h,
'alt': 'icon'
});
addIcon(icon, id);
});
} else {
$.each(elems, function(i, elem) {
var id = elem.getAttribute('id');
if(id == 'svg_eof') return;
holder = $('#' + id);
var svg = elem.getElementsByTagNameNS(svgns, 'svg')[0];
var svgroot = svgdoc.createElementNS(svgns, "svg");
svgroot.setAttributeNS(svgns, 'viewBox', [0,0,icon_w,icon_h].join(' '));
$(svgroot).attr({
"xmlns": svgns,
"width": icon_w,
"height": icon_h,
"xmlns:xlink": xlinkns,
"class": 'svg_icon'
});
// Without cloning, Firefox will make another GET request.
// With cloning, causes issue in Opera/Win/Non-EN
if(!isOpera) svg = svg.cloneNode(true);
svgroot.appendChild(svg);
if(toImage) {
// Without cloning, Safari will crash
// With cloning, causes issue in Opera/Win/Non-EN
var svgcontent = isOpera?svgroot:svgroot.cloneNode(true);
temp_holder.empty().append(svgroot);
var str = data_pre + encode64(temp_holder.html());
var icon = $(new Image())
.attr({'class':'svg_icon', src:str});
} else {
var icon = fixIDs($(svgroot), i);
}
addIcon(icon, id);
});
}
if(opts.placement) {
$.each(opts.placement, function(sel, id) {
if(!svg_icons[id]) return;
$(sel).each(function(i) {
var copy = svg_icons[id].clone();
if(i > 0 && !toImage) copy = fixIDs(copy, i, true);
setIcon($(this), copy, id);
})
});
}
if(!fallback) {
if(toImage) temp_holder.remove();
if(data_el) data_el.remove();
testImg.remove();
}
if(opts.resize) $.resizeSvgIcons(opts.resize);
icons_made = true;
if(opts.callback) opts.callback(svg_icons);
}
function fixIDs(svg_el, svg_num, force) {
var defs = svg_el.find('defs');
if(!defs.length) return svg_el;
defs.find('[id]').each(function(i) {
var id = this.id;
var no_dupes = ($(svgdoc).find('#' + id).length <= 1);
if(isOpera) no_dupes = false; // Opera didn't clone svg_el, so not reliable
if(!force && no_dupes) return;
var new_id = id + svg_num + i;
$(this).attr('id', new_id);
svg_el.find('[fill="url(#' + id + ')"]').each(function() {
$(this).attr('fill', 'url(#' + new_id + ')');
}).end().find('[stroke="url(#' + id + ')"]').each(function() {
$(this).attr('stroke', 'url(#' + new_id + ')');
}).end().find('use').each(function() {
if(this.getAttribute('xlink:href') == '#' + id) {
this.setAttributeNS(xlinkns,'href','#' + new_id);
}
});
});
return svg_el;
}
function useFallback() {
if(file.indexOf('.svgz') != -1) {
var reg_file = file.replace('.svgz','.svg');
if(window.console) {
console.log('.svgz failed, trying with .svg');
}
$.svgIcons(reg_file, opts);
} else if(opts.fallback) {
makeIcons(false, opts.fallback);
}
}
function encode64(input) {
// base64 strings are 4/3 larger than the original string
if(window.btoa) return window.btoa(input);
var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var output = new Array( Math.floor( (input.length + 2) / 3 ) * 4 );
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0, p = 0;
do {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output[p++] = _keyStr.charAt(enc1);
output[p++] = _keyStr.charAt(enc2);
output[p++] = _keyStr.charAt(enc3);
output[p++] = _keyStr.charAt(enc4);
} while (i < input.length);
return output.join('');
}
}
$.getSvgIcon = function(id) { return svg_icons[id]; }
$.resizeSvgIcons = function(obj) {
var change_sel = !$('.svg_icon:first').length;
$.each(obj, function(sel, size) {
var arr = $.isArray(size);
var w = arr?size[0]:size,
h = arr?size[1]:size;
if(change_sel) {
sel = sel.replace(/\.svg_icon/,'> svg');
}
$(sel).each(function() {
this.setAttribute('width', w);
this.setAttribute('height', h);
});
});
}
})(jQuery);