github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

import 2.0 into trunk

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@10 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Pavol Rusnak
2009-06-01 15:55:21 +00:00
parent 76c17ae3e8
commit 6b2ff6f7f7
63 changed files with 811 additions and 9867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
AUTHORS Normal file
View File

@@ -0,0 +1,2 @@
Narendra Sisodiya <narendra.sisodiya@gmail.com>
Pavol Rusnak <stick@gk2.sk>

75
GPL-LICENSE.txt → COPYING
View File

@@ -1,12 +1,12 @@
GNU GENERAL PUBLIC LICENSE GNU GENERAL PUBLIC LICENSE
Version 2, June 1991 Version 2, June 1991
Copyright (C) 1989, 1991 Free Software Foundation, Inc. Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Everyone is permitted to copy and distribute verbatim copies Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed. of this license document, but changing it is not allowed.
Preamble Preamble
The licenses for most software are designed to take away your The licenses for most software are designed to take away your
freedom to share and change it. By contrast, the GNU General Public freedom to share and change it. By contrast, the GNU General Public
@@ -56,7 +56,7 @@ patent must be licensed for everyone's free use or not licensed at all.
The precise terms and conditions for copying, distribution and The precise terms and conditions for copying, distribution and
modification follow. modification follow.
GNU GENERAL PUBLIC LICENSE GNU GENERAL PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. This License applies to any program or other work which contains 0. This License applies to any program or other work which contains
@@ -255,7 +255,7 @@ make exceptions for this. Our decision will be guided by the two goals
of preserving the free status of all derivatives of our free software and of preserving the free status of all derivatives of our free software and
of promoting the sharing and reuse of software generally. of promoting the sharing and reuse of software generally.
NO WARRANTY NO WARRANTY
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
@@ -276,3 +276,64 @@ TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
POSSIBILITY OF SUCH DAMAGES. POSSIBILITY OF SUCH DAMAGES.
END OF TERMS AND CONDITIONS
How to Apply These Terms to Your New Programs
If you develop a new program, and you want it to be of the greatest
possible use to the public, the best way to achieve this is to make it
free software which everyone can redistribute and change under these terms.
To do so, attach the following notices to the program. It is safest
to attach them to the start of each source file to most effectively
convey the exclusion of warranty; and each file should have at least
the "copyright" line and a pointer to where the full notice is found.
<one line to give the program's name and a brief idea of what it does.>
Copyright (C) <year> <name of author>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
Also add information on how to contact you by electronic and paper mail.
If the program is interactive, make it output a short notice like this
when it starts in an interactive mode:
Gnomovision version 69, Copyright (C) year name of author
Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
This is free software, and you are welcome to redistribute it
under certain conditions; type `show c' for details.
The hypothetical commands `show w' and `show c' should show the appropriate
parts of the General Public License. Of course, the commands you use may
be called something other than `show w' and `show c'; they could even be
mouse-clicks or menu items--whatever suits your program.
You should also get your employer (if you work as a programmer) or your
school, if any, to sign a "copyright disclaimer" for the program, if
necessary. Here is a sample; alter the names:
Yoyodyne, Inc., hereby disclaims all copyright interest in the program
`Gnomovision' (which makes passes at compilers) written by James Hacker.
<signature of Ty Coon>, 1 April 1989
Ty Coon, President of Vice
This General Public License does not permit incorporating your program into
proprietary programs. If your program is a subroutine library, you may
consider it more useful to permit linking proprietary applications with the
library. If this is what you want to do, use the GNU Lesser General
Public License instead of this License.

58
SvgEditor.js
View File

@@ -1,58 +0,0 @@
$(document).ready(function(){
ApplyColorPicker("colorSelectorStroke" , "000000" , {
callback: function(hex){
window.set_stroke_color(hex);
$('#div_color1').css("backgroundColor", hex);
}
});
ApplyColorPicker("colorSelectorFill" , "ffffff" , {
callback: function(hex){
window.set_fill_color(hex);
$('#div_color2').css("backgroundColor", hex);
}
});
$('#color1').colorPicker();
$('#color2').colorPicker();
});//end ready
function ApplyColorPicker(id , ini_col_hex , fun_var){
$("#" + id ).css({
"border": "1px solid black",
"height" : "30px",
"width" : "30px",
"backgroundColor" : "#" + ini_col_hex
});
$("#" + id).ColorPicker({
color: "#" + ini_col_hex,
onChange: function (hsb, hex, rgb) {
$("#" + id).css("backgroundColor", "#" + hex);
fun_var.callback('#' + hex);
}
});
}//apply
function return_str_to_html(str){
alert("This is svg image in string format \n This will be posted to server \n " + str)
//posting the data to server
//document.getElementById("hidden_svg_data").setAttribute("value", escape(str));
$.post(
"save.php",
{svg_data: escape(str)
});
}
function f1(col){
$('#colorSelectorStroke').ColorPickerSetColor(col);
}

4
blank.svg
View File

@@ -1,7 +1,5 @@
<?xml version="1.0" standalone="no"?> <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xml:space="preserve" id="svg_image" onload="Initialize(evt)" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg xml:space="preserve" id="svg_image" onload="Initialize(evt)" width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="blanksvg.js" type="text/ecmascript"/> <script xlink:href="blanksvg.js" type="text/ecmascript"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 391 B

After

Width:  |  Height:  |  Size: 388 B

695
blanksvg.js
View File

@@ -1,341 +1,465 @@
SVGDocument = null; SVGDocument = null;
SVGRoot = null; SVGRoot = null;
var svgns = "http://www.w3.org/2000/svg"; var svgns = "http://www.w3.org/2000/svg";
top.clear_svg = SVGclear_svg ;
top.set_draw_mode = SVGset_draw_mode ;
top.submit_svg = SVGsubmit_svg ;
top.set_stroke_color = SVGset_stroke_color;
top.set_fill_color = SVGset_fill_color;
top.set_stroke_width = SVGset_stroke_width ;
top.clear_svg = SVGclear_svg ;
var d_attr = "" ; top.set_draw_mode = SVGset_draw_mode ;
var signature_started = 0 ; top.submit_svg = SVGsubmit_svg ;
var path_elememt = 0 ; top.set_stroke_color = SVGset_stroke_color;
var path_num = 1 ; top.set_fill_color = SVGset_fill_color;
var rect_num = 1 ; top.set_stroke_width = SVGset_stroke_width ;
var line_num = 1 ;
var ellipse_num = 1 ;
var rect_x = null ;
var rect_y = null ;
var current_draw_element = "path" ;
var current_draw_element_fill = "none" ;
var current_draw_element_stroke_width = "1px" ;
var current_draw_element_stroke = "black" ;
var freehandcircle_min_x = null ;
var freehandcircle_max_x = null ;
var freehandcircle_min_y = null ;
var freehandcircle_max_y = null ;
var d_attr = "" ;
var signature_started = 0 ;
var path_elememt = 0 ;
var path_num = 1 ;
var rect_num = 1 ;
var line_num = 1 ;
var ellipse_num = 1 ;
var rect_x = null ;
var rect_y = null ;
var current_draw_element = "path" ;
var current_draw_element_fill = "none" ;
var current_draw_element_stroke_width = "1px" ;
var current_draw_element_stroke = "black" ;
var freehand_min_x = null ;
var freehand_max_x = null ;
var freehand_min_y = null ;
var freehand_max_y = null ;
var freehand_min_x = null ;
var freehand_max_x = null ;
var freehand_min_y = null ;
var freehand_max_y = null ;
function SVGset_draw_mode(ele_name) { function SVGset_draw_mode(ele_name) {
current_draw_element = ele_name; current_draw_element = ele_name;
} }
function SVGset_stroke_color(col_hex){ function SVGset_stroke_color(col_hex){
current_draw_element_stroke = col_hex; current_draw_element_stroke = col_hex;
} }
function SVGset_fill_color(col_hex){ function SVGset_fill_color(col_hex){
current_draw_element_fill = col_hex; current_draw_element_fill = col_hex;
} }
function SVGset_stroke_width(val){ function SVGset_stroke_width(val){
current_draw_element_stroke_width = val; current_draw_element_stroke_width = val;
} }
function Initialize(LoadEvent) function Initialize(LoadEvent)
{ {
SVGDocument = LoadEvent.target.ownerDocument; SVGDocument = LoadEvent.target.ownerDocument;
SVGRoot = SVGDocument.documentElement ; SVGRoot = SVGDocument.documentElement ;
var Attr={ var Attr={
"onmouseup":"fun_mouseUP(evt)", "onmouseup":"fun_mouseUP(evt)",
"onmousedown":"fun_mouseDOWN(evt)", "onmousedown":"fun_mouseDOWN(evt)",
"onmousemove":"fun_mouseMOVE(evt)" "onmousemove":"fun_mouseMOVE(evt)"
} }
assignAttr(SVGRoot,Attr); assignAttr(SVGRoot,Attr);
} }
function fun_mouseUP(evt) function fun_mouseUP(evt)
{ {
if (signature_started == 1 ) if (signature_started == 1 )
{ {
signature_started = 0 ; signature_started = 0 ;
switch (current_draw_element) switch (current_draw_element)
{ {
case "path": case "select":
d_attr = 0 ; var element = SVGDocument.getElementById("rect_" + rect_num);
path_num = path_num + 1 ; element.parentNode.removeChild(element);
break break;
case "rect": case "path":
rect_num = rect_num + 1 ; d_attr = 0 ;
break var element = SVGDocument.getElementById("path_" + path_num);
case "line": element.setAttribute("stroke-opacity", 1.0);
line_num = line_num + 1 ; path_num = path_num + 1 ;
break break;
case "ellipse": case "line":
ellipse_num = ellipse_num + 1 ; var element = SVGDocument.getElementById("line_" + line_num);
break element.setAttribute("stroke-opacity", 1.0);
case "freehandcircle": line_num = line_num + 1 ;
d_attr = 0 ; break;
case "square":
var element = SVGDocument.getElementById("path_" + path_num); case "rect":
element.parentNode.removeChild(element); var element = SVGDocument.getElementById("rect_" + rect_num);
element.setAttribute("fill-opacity", 1.0);
create_svg_element_by_json({ element.setAttribute("stroke-opacity", 1.0);
"element": "ellipse", rect_num = rect_num + 1 ;
"Attr": { break;
"cx": (freehandcircle_min_x + freehandcircle_max_x ) / 2, case "circle":
"cy": (freehandcircle_min_y + freehandcircle_max_y ) / 2, case "ellipse":
"rx": (freehandcircle_max_x - freehandcircle_min_x ) / 2 + "px", var element = SVGDocument.getElementById("ellipse_" + ellipse_num);
"ry": (freehandcircle_max_y - freehandcircle_min_y ) / 2 + "px", element.setAttribute("fill-opacity", 1.0);
"id": "ellipse_" + ellipse_num, element.setAttribute("stroke-opacity", 1.0);
"fill": current_draw_element_fill, ellipse_num = ellipse_num + 1 ;
"stroke": current_draw_element_stroke, break;
"stroke-width": current_draw_element_stroke_width case "fhellipse":
} d_attr = 0 ;
});
ellipse_num = ellipse_num + 1 ;
break;
}//switch
}//if var element = SVGDocument.getElementById("path_" + path_num);
element.parentNode.removeChild(element);
}//function create_svg_element_by_json({
"element": "ellipse",
"Attr": {
"cx": (freehand_min_x + freehand_max_x ) / 2,
"cy": (freehand_min_y + freehand_max_y ) / 2,
"rx": (freehand_max_x - freehand_min_x ) / 2 + "px",
"ry": (freehand_max_y - freehand_min_y ) / 2 + "px",
"id": "ellipse_" + ellipse_num,
"fill": current_draw_element_fill,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width
}
});
ellipse_num = ellipse_num + 1 ;
break;
case "fhrect":
d_attr = 0 ;
var element = SVGDocument.getElementById("path_" + path_num);
element.parentNode.removeChild(element);
create_svg_element_by_json({
"element": "rect",
"Attr": {
"x": freehand_min_x,
"y": freehand_min_y,
"width": (freehand_max_x - freehand_min_x ) + "px",
"height": (freehand_max_y - freehand_min_y ) + "px",
"id": "rect_" + rect_num,
"fill": current_draw_element_fill,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width
}
});
rect_num = rect_num + 1 ;
break;
}
}
}
function fun_mouseDOWN(evt) function fun_mouseDOWN(evt)
{ {
var x = evt.pageX;
var y = evt.pageY;
switch (current_draw_element) var x = evt.pageX;
{ var y = evt.pageY;
case "freehandcircle":
d_attr = "M" + x + " " + y + " ";
signature_started = 1 ;
create_svg_element_by_json({ switch (current_draw_element)
"element": "path", {
"Attr": { case "select":
"d": d_attr, signature_started = 1 ;
"id": "path_" + path_num, rect_x = x ;
"fill": "none", rect_y = y ;
"stroke": current_draw_element_stroke, create_svg_element_by_json({
"stroke-width": current_draw_element_stroke_width "element": "rect",
} "Attr": {
"x": x,
}); "y": y,
"width": "1px",
freehandcircle_min_x = x ; "height": "1px",
freehandcircle_max_x = x ; "id": "rect_" + rect_num,
freehandcircle_min_y = y ; "fill": 'none',
freehandcircle_max_y = y ; "stroke": 'black',
"stroke-width": '1px',
break "stroke-dasharray": "2,2"
case "path": }
d_attr = "M" + x + " " + y + " "; });
signature_started = 1 ; break;
case "fhellipse":
create_svg_element_by_json({ d_attr = "M" + x + " " + y + " ";
"element": "path", signature_started = 1 ;
"Attr": {
"d": d_attr, create_svg_element_by_json({
"id": "path_" + path_num, "element": "path",
"fill": "none", "Attr": {
"stroke": current_draw_element_stroke, "d": d_attr,
"stroke-width": current_draw_element_stroke_width "id": "path_" + path_num,
} "fill": "none",
"stroke": current_draw_element_stroke,
}); "stroke-width": current_draw_element_stroke_width,
"stroke-opacity": 0.5
break }
case "rect":
signature_started = 1 ; });
rect_x = x ;
rect_y = y ; freehand_min_x = x ;
create_svg_element_by_json({ freehand_max_x = x ;
"element": "rect", freehand_min_y = y ;
"Attr": { freehand_max_y = y ;
"x": x,
"y": y, break;
"width": "1px", case "fhrect":
"height": "1px", d_attr = "M" + x + " " + y + " ";
"id": "rect_" + rect_num, signature_started = 1 ;
"fill": current_draw_element_fill,
"stroke": current_draw_element_stroke, create_svg_element_by_json({
"stroke-width": current_draw_element_stroke_width "element": "path",
} "Attr": {
"d": d_attr,
}); "id": "path_" + path_num,
break "fill": "none",
case "line": "stroke": current_draw_element_stroke,
signature_started = 1 ; "stroke-width": current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
freehand_min_x = x ;
freehand_max_x = x ;
freehand_min_y = y ;
freehand_max_y = y ;
break;
case "path":
d_attr = "M" + x + " " + y + " ";
signature_started = 1 ;
create_svg_element_by_json({
"element": "path",
"Attr": {
"d": d_attr,
"id": "path_" + path_num,
"fill": "none",
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
break;
case "square":
case "rect":
signature_started = 1 ;
rect_x = x ;
rect_y = y ;
create_svg_element_by_json({
"element": "rect",
"Attr": {
"x": x,
"y": y,
"width": "1px",
"height": "1px",
"id": "rect_" + rect_num,
"fill": current_draw_element_fill,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width,
"fill-opacity": 0.5,
"stroke-opacity": 0.5
}
});
break;
case "line":
signature_started = 1 ;
create_svg_element_by_json({
"element": "line",
"Attr": {
"x1": x,
"y1": y,
"x2": x + 1 + "px",
"y2": y + 1 + "px",
"id": "line_" + line_num,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
break;
case "circle":
case "ellipse":
signature_started = 1 ;
create_svg_element_by_json({
"element": "ellipse",
"Attr": {
"cx": x,
"cy": y,
"rx": 1 + "px",
"ry": 1 + "px",
"id": "ellipse_" + ellipse_num,
"fill": current_draw_element_fill,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width,
"fill-opacity": 0.5,
"stroke-opacity": 0.5
}
});
break;
case "delete":
var T=evt.target
if(SVGRoot == evt.target ) return ;
T.parentNode.removeChild(T);
break;
}
create_svg_element_by_json({
"element": "line",
"Attr": {
"x1": x,
"y1": y,
"x2": x + 1 + "px",
"y2": y + 1 + "px",
"id": "line_" + line_num,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width
}
});
break
case "ellipse":
signature_started = 1 ;
create_svg_element_by_json({
"element": "ellipse",
"Attr": {
"cx": x,
"cy": y,
"rx": 1 + "px",
"ry": 1 + "px",
"id": "ellipse_" + ellipse_num,
"fill": current_draw_element_fill,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width
}
});
break
case "delete":
var T=evt.target
if(SVGRoot == evt.target ) return ;
T.parentNode.removeChild(T);
break;
}//switch
} }
function fun_mouseMOVE(evt) function fun_mouseMOVE(evt)
{ {
if (signature_started == 1 ) if (signature_started == 1 )
{ {
var x = evt.pageX; var x = evt.pageX;
var y = evt.pageY; var y = evt.pageY;
switch (current_draw_element) switch (current_draw_element)
{ {
case "path": case "path":
d_attr = d_attr + "L" + x + " " + y + " "; d_attr = d_attr + "L" + x + " " + y + " ";
var shape = SVGDocument.getElementById("path_" + path_num); var shape = SVGDocument.getElementById("path_" + path_num);
shape.setAttributeNS(null, "d", d_attr); shape.setAttributeNS(null, "d", d_attr);
break break;
case "rect": case "line":
var shape = SVGDocument.getElementById("line_" + line_num);
shape.setAttributeNS(null, "x2", x);
shape.setAttributeNS(null, "y2", y);
break;
var shape = SVGDocument.getElementById("rect_" + rect_num); case "square":
var start_x = shape.getAttributeNS(null, "x");
var start_y = shape.getAttributeNS(null, "y");
if(rect_x < x ){ var shape = SVGDocument.getElementById("rect_" + rect_num);
shape.setAttributeNS(null, "x", rect_x); var size = Math.max( Math.abs(x-rect_x) , Math.abs(y-rect_y) );
shape.setAttributeNS(null, "width", x - rect_x);
}else{
shape.setAttributeNS(null, "x", x);
shape.setAttributeNS(null, "width", rect_x - x);
}
if(rect_y < y ){
shape.setAttributeNS(null, "y", rect_y);
shape.setAttributeNS(null, "height", y - rect_y);
}else{
shape.setAttributeNS(null, "y", y);
shape.setAttributeNS(null, "height", rect_y - y);
}
break
case "line":
var shape = SVGDocument.getElementById("line_" + line_num);
shape.setAttributeNS(null, "x2", x);
shape.setAttributeNS(null, "y2", y);
break
case "ellipse":
var shape = SVGDocument.getElementById("ellipse_" + ellipse_num);
var cx = shape.getAttributeNS(null, "cx");
var cy = shape.getAttributeNS(null, "cy");
var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
shape.setAttributeNS(null, "rx", rad);
shape.setAttributeNS(null, "ry", rad);
break;
case "freehandcircle": shape.setAttributeNS(null, "width", size);
d_attr = d_attr + "L" + x + " " + y + " "; shape.setAttributeNS(null, "height", size);
var shape = SVGDocument.getElementById("path_" + path_num); if(rect_x < x ){
shape.setAttributeNS(null, "d", d_attr); shape.setAttributeNS(null, "x", rect_x);
}else{
shape.setAttributeNS(null, "x", rect_x - size);
}
if(rect_y < y ){
shape.setAttributeNS(null, "y", rect_y);
}else{
shape.setAttributeNS(null, "y", rect_y - size);
}
freehandcircle_min_x = min_of(x , freehandcircle_min_x ) ; break;
freehandcircle_max_x = max_of(x , freehandcircle_max_x ) ; case "select":
freehandcircle_min_y = min_of(y , freehandcircle_min_y ) ; case "rect":
freehandcircle_max_y = max_of(y , freehandcircle_max_y ) ;
break;
}//switch
}//if var shape = SVGDocument.getElementById("rect_" + rect_num);
}//function
if(rect_x < x ){
shape.setAttributeNS(null, "x", rect_x);
shape.setAttributeNS(null, "width", x - rect_x);
}else{
shape.setAttributeNS(null, "x", x);
shape.setAttributeNS(null, "width", rect_x - x);
}
if(rect_y < y ){
shape.setAttributeNS(null, "y", rect_y);
shape.setAttributeNS(null, "height", y - rect_y);
}else{
shape.setAttributeNS(null, "y", y);
shape.setAttributeNS(null, "height", rect_y - y);
}
break;
case "circle":
var shape = SVGDocument.getElementById("ellipse_" + ellipse_num);
var cx = shape.getAttributeNS(null, "cx");
var cy = shape.getAttributeNS(null, "cy");
var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
shape.setAttributeNS(null, "rx", rad);
shape.setAttributeNS(null, "ry", rad);
break;
case "ellipse":
var shape = SVGDocument.getElementById("ellipse_" + ellipse_num);
var cx = shape.getAttributeNS(null, "cx");
var cy = shape.getAttributeNS(null, "cy");
shape.setAttributeNS(null, "rx", Math.abs(x-cx));
shape.setAttributeNS(null, "ry", Math.abs(y-cy));
break;
case "fhellipse":
d_attr = d_attr + "L" + x + " " + y + " ";
var shape = SVGDocument.getElementById("path_" + path_num);
shape.setAttributeNS(null, "d", d_attr);
freehand_min_x = min_of(x , freehand_min_x ) ;
freehand_max_x = max_of(x , freehand_max_x ) ;
freehand_min_y = min_of(y , freehand_min_y ) ;
freehand_max_y = max_of(y , freehand_max_y ) ;
break;
case "fhrect":
d_attr = d_attr + "L" + x + " " + y + " ";
var shape = SVGDocument.getElementById("path_" + path_num);
shape.setAttributeNS(null, "d", d_attr);
freehand_min_x = min_of(x , freehand_min_x ) ;
freehand_max_x = max_of(x , freehand_max_x ) ;
freehand_min_y = min_of(y , freehand_min_y ) ;
freehand_max_y = max_of(y , freehand_max_y ) ;
break;
}
}
}
function min_of(a ,b){ function min_of(a ,b){
if (a < b ) { return a ;} if (a < b ) { return a ;}
else {return b ;} else {return b ;}
} }
function max_of(a ,b){ function max_of(a ,b){
if (a > b ) { return a ;} if (a > b ) { return a ;}
else {return b ;} else {return b ;}
} }
function create_svg_element_by_json(data) function create_svg_element_by_json(data)
{ {
var shape = SVGDocument.createElementNS(svgns, data.element); var shape = SVGDocument.createElementNS(svgns, data.element);
assignAttr(shape, data.Attr); assignAttr(shape, data.Attr);
SVGDocument.documentElement.appendChild(shape); SVGDocument.documentElement.appendChild(shape);
}//function }
function assignAttr(Node,Attr){ function assignAttr(Node,Attr){
for (i in Attr) { for (i in Attr) {
Node.setAttributeNS(null, i, Attr[i]); Node.setAttributeNS(null, i, Attr[i]);
} }
}//function }
function SVGclear_svg() function SVGclear_svg()
{ {
var Nodes = SVGRoot.childNodes ; var Nodes = SVGRoot.childNodes ;
var Length = SVGRoot.childNodes.length ; var Length = SVGRoot.childNodes.length ;
var i = 0 ; var i = 0 ;
for(var Rep=0; Rep< Length; Rep++){ for(var Rep=0; Rep< Length; Rep++){
if(Nodes[i].nodeType == 1){ if(Nodes[i].nodeType == 1){
Nodes[i].parentNode.removeChild(Nodes[i]); Nodes[i].parentNode.removeChild(Nodes[i]);
} }
else{ else{
i++; i++;
} }
}//for }
} }
function SvgToString(elem , indent) function SvgToString(elem , indent)
{ {
var out = "" ; var out = "" ;
if (elem) if (elem)
{ {
var attrs = elem.attributes; var attrs = elem.attributes;
@@ -343,27 +467,31 @@ function SvgToString(elem , indent)
var i; var i;
var childs = elem.childNodes; var childs = elem.childNodes;
// don't include scripts in output svg
if (elem.nodeName == "script") return "";
for (i=0; i<indent; i++) out += " "; for (i=0; i<indent; i++) out += " ";
out += "<" + elem.nodeName; out += "<" + elem.nodeName;
for (i=attrs.length-1; i>=0; i--) for (i=attrs.length-1; i>=0; i--)
{ {
attr = attrs.item(i); attr = attrs.item(i);
// don't include events in output svg
if (attr.nodeName == "onload" ||
attr.nodeName == "onmousedown" ||
attr.nodeName == "onmousemove" ||
attr.nodeName == "onmouseup") continue;
out += " " + attr.nodeName + "=\"" + attr.nodeValue+ "\""; out += " " + attr.nodeName + "=\"" + attr.nodeValue+ "\"";
} }
if (elem.hasChildNodes()) if (elem.hasChildNodes())
{ {
out += ">\n"; out += ">\n";
indent++; indent++;
for (i=0; i<childs.length; i++) for (i=0; i<childs.length; i++)
{ {
if (childs.item(i).nodeType == 1) // element node .. if (childs.item(i).nodeType == 1) // element node
out = out + SvgToString(childs.item(i) ,indent); out = out + SvgToString(childs.item(i) ,indent);
else if (childs.item(i).nodeType == 3) // text node .. else if (childs.item(i).nodeType == 3) // text node
{ {
for (j=0; j<indent; j++) out += " "; for (j=0; j<indent; j++) out += " ";
out += childs.item(i).nodeValue + "\n"; out += childs.item(i).nodeValue + "\n";
@@ -381,12 +509,9 @@ function SvgToString(elem , indent)
} }
return out; return out;
} }
function SVGsubmit_svg(){
var str = "<?xml version=\"1.0\" standalone=\"no\"?> \
<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \
\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> \n"
str = str + SvgToString(SVGRoot , 0);
top.return_str_to_html(str);
}
function SVGsubmit_svg(){
var str = "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
str = str + SvgToString(SVGRoot , 0);
top.serializeHandler(str);
}

BIN
circle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 663 B

BIN
clear.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 373 B

161
colorpicker/css/colorpicker.css
View File

@@ -1,161 +0,0 @@
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(../images/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(../images/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(../images/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(../images/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(../images/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(../images/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(../images/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(../images/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(../images/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(../images/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(../images/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(../images/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}

218
colorpicker/css/layout.css
View File

@@ -1,218 +0,0 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
html, body {
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #52697E;
}
body {
text-align: center;
overflow: auto;
}
.wrapper {
width: 700px;
margin: 0 auto;
text-align: left;
}
h1 {
font-size: 21px;
height: 47px;
line-height: 47px;
text-transform: uppercase;
}
.navigationTabs {
height: 23px;
line-height: 23px;
border-bottom: 1px solid #ccc;
}
.navigationTabs li {
float: left;
height: 23px;
line-height: 23px;
padding-right: 3px;
}
.navigationTabs li a{
float: left;
dispaly: block;
height: 23px;
line-height: 23px;
padding: 0 10px;
overflow: hidden;
color: #52697E;
background-color: #eee;
position: relative;
text-decoration: none;
}
.navigationTabs li a:hover {
background-color: #f0f0f0;
}
.navigationTabs li a.active {
background-color: #fff;
border: 1px solid #ccc;
border-bottom: 0px solid;
}
.tabsContent {
border: 1px solid #ccc;
border-top: 0px solid;
width: 698px;
overflow: hidden;
}
.tab {
padding: 16px;
display: none;
}
.tab h2 {
font-weight: bold;
font-size: 16px;
}
.tab h3 {
font-weight: bold;
font-size: 14px;
margin-top: 20px;
}
.tab p {
margin-top: 16px;
clear: both;
}
.tab ul {
margin-top: 16px;
list-style: disc;
}
.tab li {
margin: 10px 0 0 35px;
}
.tab a {
color: #8FB0CF;
}
.tab strong {
font-weight: bold;
}
.tab pre {
font-size: 11px;
margin-top: 20px;
width: 668px;
overflow: auto;
clear: both;
}
.tab table {
width: 100%;
}
.tab table td {
padding: 6px 10px 6px 0;
vertical-align: top;
}
.tab dt {
margin-top: 16px;
}
#colorSelector {
position: relative;
width: 36px;
height: 36px;
background: url(../images/select.png);
}
#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(../images/select.png) center;
}
#colorSelector2 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url(../images/select2.png);
}
#colorSelector2 div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url(../images/select2.png) center;
}
#colorpickerHolder2 {
top: 32px;
left: 0;
width: 356px;
height: 0;
overflow: hidden;
position: absolute;
}
#colorpickerHolder2 .colorpicker {
background-image: url(../images/custom_background.png);
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
background-image: url(../images/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
background-image: url(../images/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
background-image: url(../images/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
background-image: url(../images/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
background-image: url(../images/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
background-image: url(../images/custom_hsb_s.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
background-image: url(../images/custom_hsb_h.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
background-image: url(../images/custom_hsb_b.png);
display: none;
}
#colorpickerHolder2 .colorpicker_submit {
background-image: url(../images/custom_submit.png);
}
#colorpickerHolder2 .colorpicker input {
color: #778398;
}
#customWidget {
position: relative;
height: 36px;
}

BIN
colorpicker/images/Thumbs.db
View File

Binary file not shown.

BIN
colorpicker/images/blank.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 49 B

BIN
colorpicker/images/colorpicker_background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
colorpicker/images/colorpicker_hex.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 532 B

BIN
colorpicker/images/colorpicker_hsb_b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 970 B

BIN
colorpicker/images/colorpicker_hsb_h.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1012 B

BIN
colorpicker/images/colorpicker_hsb_s.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
colorpicker/images/colorpicker_indic.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 B

BIN
colorpicker/images/colorpicker_overlay.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
colorpicker/images/colorpicker_rgb_b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 970 B

BIN
colorpicker/images/colorpicker_rgb_g.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
colorpicker/images/colorpicker_rgb_r.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
colorpicker/images/colorpicker_select.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 78 B

BIN
colorpicker/images/colorpicker_submit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 984 B

BIN
colorpicker/images/custom_background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
colorpicker/images/custom_hex.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 562 B

BIN
colorpicker/images/custom_hsb_b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
colorpicker/images/custom_hsb_h.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 970 B

BIN
colorpicker/images/custom_hsb_s.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
colorpicker/images/custom_indic.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 B

BIN
colorpicker/images/custom_rgb_b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1008 B

BIN
colorpicker/images/custom_rgb_g.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
colorpicker/images/custom_rgb_r.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1018 B

BIN
colorpicker/images/custom_submit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 997 B

BIN
colorpicker/images/select.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 506 B

BIN
colorpicker/images/select2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 518 B

BIN
colorpicker/images/slider.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 315 B

171
colorpicker/index.html
View File

@@ -1,171 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
<title>ColorPicker - jQuery plugin</title>
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
</head>
<body>
<div class="wrapper">
<h1>Color Picker - jQuery plugin</h1>
<ul class="navigationTabs">
<li><a href="#about" rel="about">About</a></li>
<li><a href="#download" rel="download">Download</a></li>
<li><a href="#implement" rel="implement">Implement</a></li>
</ul>
<div class="tabsContent">
<div class="tab">
<h2>About</h2>
<p>A simple component to select color in the same way you select color in Adobe Photoshop</p>
<h3>Features</h3>
<ul>
<li>Flat mode - as element in page</li>
<li>Powerful controls for color selection</li>
<li>Easy to customize the look by changing some images</li>
<li>Fits into the viewport</li>
</ul>
<h3>Examples</h3>
<p>Flat mode.</p>
<p id="colorpickerHolder">
</p>
<pre>
$('#colorpickerHolder').ColorPicker({flat: true});
</pre>
<p>Custom skin and using flat mode to display the color picker in a custom widget.</p>
<div id="customWidget">
<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
<div id="colorpickerHolder2">
</div>
</div>
<p>Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
<pre>
$('#colorpickerField1').ColorPicker({
onSubmit: function(hsb, hex, rgb) {
$('#colorpickerField1').val(hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
</pre>
<p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>
<p>
<div id="colorSelector"><div style="background-color: #0000ff"></div></div>
</p>
<pre>
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}
});
</pre>
</div>
<div class="tab">
<h2>Download</h2>
<p><a href="colorpicker.zip">colorpicker.zip (73 kb)</a>: jQuery, Javscript files, CSS files, images, examples and instructions.</p>
<h3>Changelog</h3>
<dl>
<dt>22.08.2008</dt>
<dd>Fixed bug: where some events were not canceled right on Safari</dd>
<dd>Fixed bug: where teh view port was not detected right on Safari</dd>
<dt>16-07-2008</dt>
<dd>Fixed bug where the letter 'F' could not be typed in the Hex field</dd>
<dd>Fixed bug where the changes on Hex field where not parsed</dd>
<dd>Added new option 'livePreview'</dd>
<dt>08-07-2008</dt>
<dd>Fixed typo in the code, both JavaScript and CSS</dd>
<dd>Changed the cursor for some elements</dd>
<dd>Added new demo explaining how to implement custom skin</dd>
<dt>07.07.2008</dt>
<dd>The first release.</dd>
</dl>
</div>
<div class="tab">
<h2>Implement</h2>
<p>Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.</p>
<pre>
&lt;link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /&gt;
&lt;script type="text/javascript" src="js/colorpicker.js"&gt;&lt;/script&gt;
</pre>
<h3>Invocation code</h3>
<p>All you have to do is to select the elements in a jQuery way and call the plugin.</p>
<pre>
$('input').ColorPickerSetColor(options);
</pre>
<h3>Options</h3>
<p>A hash of parameters. All parameters are optional.</p>
<table>
<tr>
<td><strong>eventName</strong></td>
<td>string</td>
<td>The desired event to trigger the colorpicker. Default: 'click'</td>
</tr>
<tr>
<td><strong>color</strong></td>
<td>string or hash</td>
<td>The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'</td>
</tr>
<tr>
<td><strong>flat</strong></td>
<td>boolean</td>
<td>Whatever if the color picker is appended to the element or triggered by an event. Default false</td>
</tr>
<tr>
<td><strong>livePreview</strong></td>
<td>boolean</td>
<td>Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true</td>
</tr>
<tr>
<td><strong>onShow</strong></td>
<td>function</td>
<td>Callback function triggered when the color picker is shown</td>
</tr>
<tr>
<td><strong>onBeforeShow</strong></td>
<td>function</td>
<td>Callback function triggered before the color picker is shown</td>
</tr>
<tr>
<td><strong>onHide</strong></td>
<td>function</td>
<td>Callback function triggered when the color picker is hidden</td>
</tr>
<tr>
<td><strong>onChange</strong></td>
<td>function</td>
<td>Callback function triggered when the color is changed</td>
</tr>
<tr>
<td><strong>onSubmit</strong></td>
<td>function</td>
<td>Callback function triggered when the color it is chosen</td>
</tr>
</table>
<h3>Set color</h3>
<p>If you want to set a new color.</p>
<pre>$('input').ColorPickerSetColor(color);</pre>
<p>The 'color' argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).</p>
</div>
</div>
</div>
</body>
</html>

450
colorpicker/js/colorpicker.js
View File

@@ -1,450 +0,0 @@
/**
*
* Color picker
* Author: Stefan Petre www.eyecon.ro
*
*/
(function ($) {
var ColorPicker = function () {
var
ids = {},
inAction,
charMin = 65,
visible,
tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
defaults = {
eventName: 'click',
onShow: function () {},
onBeforeShow: function(){},
onHide: function () {},
onChange: function () {},
onSubmit: function () {},
color: 'ff0000',
livePreview: true,
flat: false
},
fillRGBFields = function (hsb, cal) {
var rgb = HSBToRGB(hsb);
$(cal).data('colorpicker').fields
.eq(1).val(rgb.r).end()
.eq(2).val(rgb.g).end()
.eq(3).val(rgb.b).end();
},
fillHSBFields = function (hsb, cal) {
$(cal).data('colorpicker').fields
.eq(4).val(hsb.h).end()
.eq(5).val(hsb.s).end()
.eq(6).val(hsb.b).end();
},
fillHexFields = function (hsb, cal) {
$(cal).data('colorpicker').fields
.eq(0).val(HSBToHex(hsb)).end();
},
setSelector = function (hsb, cal) {
$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
$(cal).data('colorpicker').selectorIndic.css({
left: parseInt(150 * hsb.s/100, 10),
top: parseInt(150 * (100-hsb.b)/100, 10)
});
},
setHue = function (hsb, cal) {
$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
},
setCurrentColor = function (hsb, cal) {
$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
},
setNewColor = function (hsb, cal) {
$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
},
keyDown = function (ev) {
var pressedKey = ev.charCode || ev.keyCode || -1;
if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
return false;
}
var cal = $(this).parent().parent();
if (cal.data('colorpicker').livePreview === true) {
change.apply(this);
}
},
change = function (ev) {
var cal = $(this).parent().parent(), col;
if (this.parentNode.className.indexOf('_hex') > 0) {
cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
cal.data('colorpicker').color = col = fixHSB({
h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
});
} else {
cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
}));
}
if (ev) {
fillRGBFields(col, cal.get(0));
fillHexFields(col, cal.get(0));
fillHSBFields(col, cal.get(0));
}
setSelector(col, cal.get(0));
setHue(col, cal.get(0));
setNewColor(col, cal.get(0));
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
},
blur = function (ev) {
var cal = $(this).parent().parent();
cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus')
},
focus = function () {
charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
$(this).parent().addClass('colorpicker_focus');
},
downIncrement = function (ev) {
var field = $(this).parent().find('input').focus();
var current = {
el: $(this).parent().addClass('colorpicker_slider'),
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
y: ev.pageY,
field: field,
val: parseInt(field.val(), 10),
preview: $(this).parent().parent().data('colorpicker').livePreview
};
$(document).bind('mouseup', current, upIncrement);
$(document).bind('mousemove', current, moveIncrement);
},
moveIncrement = function (ev) {
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
if (ev.data.preview) {
change.apply(ev.data.field.get(0), [true]);
}
return false;
},
upIncrement = function (ev) {
change.apply(ev.data.field.get(0), [true]);
ev.data.el.removeClass('colorpicker_slider').find('input').focus();
$(document).unbind('mouseup', upIncrement);
$(document).unbind('mousemove', moveIncrement);
return false;
},
downHue = function (ev) {
var current = {
cal: $(this).parent(),
y: $(this).offset().top
};
current.preview = current.cal.data('colorpicker').livePreview;
$(document).bind('mouseup', current, upHue);
$(document).bind('mousemove', current, moveHue);
},
moveHue = function (ev) {
change.apply(
ev.data.cal.data('colorpicker')
.fields
.eq(4)
.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
.get(0),
[ev.data.preview]
);
return false;
},
upHue = function (ev) {
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
$(document).unbind('mouseup', upHue);
$(document).unbind('mousemove', moveHue);
return false;
},
downSelector = function (ev) {
var current = {
cal: $(this).parent(),
pos: $(this).offset()
};
current.preview = current.cal.data('colorpicker').livePreview;
$(document).bind('mouseup', current, upSelector);
$(document).bind('mousemove', current, moveSelector);
},
moveSelector = function (ev) {
change.apply(
ev.data.cal.data('colorpicker')
.fields
.eq(6)
.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
.end()
.eq(5)
.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
.get(0),
[ev.data.preview]
);
return false;
},
upSelector = function (ev) {
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
$(document).unbind('mouseup', upSelector);
$(document).unbind('mousemove', moveSelector);
return false;
},
enterSubmit = function (ev) {
$(this).addClass('colorpicker_focus');
},
leaveSubmit = function (ev) {
$(this).removeClass('colorpicker_focus');
},
clickSubmit = function (ev) {
var cal = $(this).parent();
var col = cal.data('colorpicker').color;
cal.data('colorpicker').origColor = col;
setCurrentColor(col, cal.get(0));
cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col));
},
show = function (ev) {
var cal = $('#' + $(this).data('colorpickerId'));
cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
var pos = $(this).offset();
var viewPort = getViewport();
var top = pos.top + this.offsetHeight;
var left = pos.left;
if (top + 176 > viewPort.t + viewPort.h) {
top -= this.offsetHeight + 176;
}
if (left + 356 > viewPort.l + viewPort.w) {
left -= 356;
}
cal.css({left: left + 'px', top: top + 'px'});
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
cal.show();
}
$(document).bind('mousedown', {cal: cal}, hide);
return false;
},
hide = function (ev) {
if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
ev.data.cal.hide();
}
$(document).unbind('mousedown', hide);
}
},
isChildOf = function(parentEl, el, container) {
if (parentEl == el) {
return true;
}
if (parentEl.contains) {
return parentEl.contains(el);
}
if ( parentEl.compareDocumentPosition ) {
return !!(parentEl.compareDocumentPosition(el) & 16);
}
var prEl = el.parentNode;
while(prEl && prEl != container) {
if (prEl == parentEl)
return true;
prEl = prEl.parentNode;
}
return false;
},
getViewport = function () {
var m = document.compatMode == 'CSS1Compat';
return {
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
};
},
fixHSB = function (hsb) {
return {
h: Math.min(360, Math.max(0, hsb.h)),
s: Math.min(100, Math.max(0, hsb.s)),
b: Math.min(100, Math.max(0, hsb.b))
};
},
fixRGB = function (rgb) {
return {
r: Math.min(255, Math.max(0, rgb.r)),
g: Math.min(255, Math.max(0, rgb.g)),
b: Math.min(255, Math.max(0, rgb.b))
};
},
fixHex = function (hex) {
var len = 6 - hex.length;
if (len > 0) {
var o = [];
for (var i=0; i<len; i++) {
o.push('0');
}
o.push(hex);
hex = o.join('');
}
return hex;
},
HexToRGB = function (hex) {
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
},
HexToHSB = function (hex) {
return RGBToHSB(HexToRGB(hex));
},
RGBToHSB = function (rgb) {
var hsb = {};
hsb.b = Math.max(Math.max(rgb.r,rgb.g),rgb.b);
hsb.s = (hsb.b <= 0) ? 0 : Math.round(100*(hsb.b - Math.min(Math.min(rgb.r,rgb.g),rgb.b))/hsb.b);
hsb.b = Math.round((hsb.b /255)*100);
if((rgb.r==rgb.g) && (rgb.g==rgb.b)) hsb.h = 0;
else if(rgb.r>=rgb.g && rgb.g>=rgb.b) hsb.h = 60*(rgb.g-rgb.b)/(rgb.r-rgb.b);
else if(rgb.g>=rgb.r && rgb.r>=rgb.b) hsb.h = 60 + 60*(rgb.g-rgb.r)/(rgb.g-rgb.b);
else if(rgb.g>=rgb.b && rgb.b>=rgb.r) hsb.h = 120 + 60*(rgb.b-rgb.r)/(rgb.g-rgb.r);
else if(rgb.b>=rgb.g && rgb.g>=rgb.r) hsb.h = 180 + 60*(rgb.b-rgb.g)/(rgb.b-rgb.r);
else if(rgb.b>=rgb.r && rgb.r>=rgb.g) hsb.h = 240 + 60*(rgb.r-rgb.g)/(rgb.b-rgb.g);
else if(rgb.r>=rgb.b && rgb.b>=rgb.g) hsb.h = 300 + 60*(rgb.r-rgb.b)/(rgb.r-rgb.g);
else hsb.h = 0;
hsb.h = Math.round(hsb.h);
return hsb;
},
HSBToRGB = function (hsb) {
var rgb = {};
var h = Math.round(hsb.h);
var s = Math.round(hsb.s*255/100);
var v = Math.round(hsb.b*255/100);
if(s == 0) {
rgb.r = rgb.g = rgb.b = v;
} else {
var t1 = v;
var t2 = (255-s)*v/255;
var t3 = (t1-t2)*(h%60)/60;
if(h==360) h = 0;
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
else {rgb.r=0; rgb.g=0; rgb.b=0}
}
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
},
RGBToHex = function (rgb) {
var hex = [
rgb.r.toString(16),
rgb.g.toString(16),
rgb.b.toString(16)
];
$.each(hex, function (nr, val) {
if (val.length == 1) {
hex[nr] = '0' + val;
}
});
return hex.join('');
},
HSBToHex = function (hsb) {
return RGBToHex(HSBToRGB(hsb));
};
return {
init: function (options) {
options = $.extend({}, defaults, options||{});
if (typeof options.color == 'string') {
options.color = HexToHSB(options.color);
} else if (options.color.r != undefined && options.color.g != undefined && options.color.b != undefined) {
options.color = RGBToHSB(options.color);
} else if (options.color.h != undefined && options.color.s != undefined && options.color.b != undefined) {
options.color = fixHSB(options.color);
} else {
return this;
}
options.origColor = options.color;
return this.each(function () {
if (!$(this).data('colorpickerId')) {
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
$(this).data('colorpickerId', id);
var cal = $(tpl).attr('id', id);
if (options.flat) {
cal.appendTo(this).show();
} else {
cal.appendTo(document.body);
}
options.fields = cal
.find('input')
.bind('keydown', keyDown)
.bind('change', change)
.bind('blur', blur)
.bind('focus', focus);
cal.find('span').bind('mousedown', downIncrement);
options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
options.selectorIndic = options.selector.find('div div');
options.hue = cal.find('div.colorpicker_hue div');
cal.find('div.colorpicker_hue').bind('mousedown', downHue);
options.newColor = cal.find('div.colorpicker_new_color');
options.currentColor = cal.find('div.colorpicker_current_color');
cal.data('colorpicker', options);
cal.find('div.colorpicker_submit')
.bind('mouseenter', enterSubmit)
.bind('mouseleave', leaveSubmit)
.bind('click', clickSubmit);
fillRGBFields(options.color, cal.get(0));
fillHSBFields(options.color, cal.get(0));
fillHexFields(options.color, cal.get(0));
setHue(options.color, cal.get(0));
setSelector(options.color, cal.get(0));
setCurrentColor(options.color, cal.get(0));
setNewColor(options.color, cal.get(0));
if (options.flat) {
cal.css({
position: 'relative',
display: 'block'
});
} else {
$(this).bind(options.eventName, show);
}
}
});
},
showPicker: function() {
return this.each( function () {
if ($(this).data('colorpickerId')) {
show.apply(this);
}
});
},
hidePicker: function() {
return this.each( function () {
if ($(this).data('colorpickerId')) {
$('#' + $(this).data('colorpickerId')).hide();
}
});
},
setColor: function(col) {
if (typeof col == 'string') {
col = HexToHSB(col);
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
col = RGBToHSB(col);
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
col = fixHSB(col);
} else {
return this;
}
return this.each(function(){
if ($(this).data('colorpickerId')) {
var cal = $('#' + $(this).data('colorpickerId'));
cal.data('colorpicker').color = col;
cal.data('colorpicker').origColor = col;
fillRGBFields(col, cal.get(0));
fillHSBFields(col, cal.get(0));
fillHexFields(col, cal.get(0));
setHue(col, cal.get(0));
setSelector(col, cal.get(0));
setCurrentColor(col, cal.get(0));
setNewColor(col, cal.get(0));
}
});
}
};
}();
$.fn.extend({
ColorPicker: ColorPicker.init,
ColorPickerHide: ColorPicker.hide,
ColorPickerShow: ColorPicker.show,
ColorPickerSetColor: ColorPicker.setColor
});
})(jQuery)

34
colorpicker/js/eye.js
View File

@@ -1,34 +0,0 @@
/**
*
* Zoomimage
* Author: Stefan Petre www.eyecon.ro
*
*/
(function($){
var EYE = window.EYE = function() {
var _registered = {
init: []
};
return {
init: function() {
$.each(_registered.init, function(nr, fn){
fn.call();
});
},
extend: function(prop) {
for (var i in prop) {
if (prop[i] != undefined) {
this[i] = prop[i];
}
}
},
register: function(fn, type) {
if (!_registered[type]) {
_registered[type] = [];
}
_registered[type].push(fn);
}
};
}();
$(EYE.init);
})(jQuery);

66
colorpicker/js/layout.js
View File

@@ -1,66 +0,0 @@
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#colorpickerHolder').ColorPicker({flat: true});
$('#colorpickerHolder2').ColorPicker({
flat: true,
color: '#00ff00',
onSubmit: function(hsb, hex, rgb) {
$('#colorSelector2 div').css('backgroundColor', '#' + hex);
}
});
$('#colorpickerHolder2>div').css('position', 'absolute');
var widt = false;
$('#colorSelector2').bind('click', function() {
$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
widt = !widt;
});
$('#colorpickerField1').ColorPicker({
onSubmit: function(hsb, hex, rgb) {
$('#colorpickerField1').val(hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}
});
};
var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};
EYE.register(initLayout, 'init');
})(jQuery)

3549
colorpicker/js/sdjquery.js
View File

File diff suppressed because it is too large Load Diff

252
colorpicker/js/utils.js
View File

@@ -1,252 +0,0 @@
/**
*
* Utilities
* Author: Stefan Petre www.eyecon.ro
*
*/
(function($) {
EYE.extend({
getPosition : function(e, forceIt)
{
var x = 0;
var y = 0;
var es = e.style;
var restoreStyles = false;
if (forceIt && jQuery.curCSS(e,'display') == 'none') {
var oldVisibility = es.visibility;
var oldPosition = es.position;
restoreStyles = true;
es.visibility = 'hidden';
es.display = 'block';
es.position = 'absolute';
}
var el = e;
if (el.getBoundingClientRect) { // IE
var box = el.getBoundingClientRect();
x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;
y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;
} else {
x = el.offsetLeft;
y = el.offsetTop;
el = el.offsetParent;
if (e != el) {
while (el) {
x += el.offsetLeft;
y += el.offsetTop;
el = el.offsetParent;
}
}
if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {
x -= document.body.offsetLeft;
y -= document.body.offsetTop;
}
el = e.parentNode;
while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML')
{
if (jQuery.curCSS(el, 'display') != 'inline') {
x -= el.scrollLeft;
y -= el.scrollTop;
}
el = el.parentNode;
}
}
if (restoreStyles == true) {
es.display = 'none';
es.position = oldPosition;
es.visibility = oldVisibility;
}
return {x:x, y:y};
},
getSize : function(e)
{
var w = parseInt(jQuery.curCSS(e,'width'), 10);
var h = parseInt(jQuery.curCSS(e,'height'), 10);
var wb = 0;
var hb = 0;
if (jQuery.curCSS(e, 'display') != 'none') {
wb = e.offsetWidth;
hb = e.offsetHeight;
} else {
var es = e.style;
var oldVisibility = es.visibility;
var oldPosition = es.position;
es.visibility = 'hidden';
es.display = 'block';
es.position = 'absolute';
wb = e.offsetWidth;
hb = e.offsetHeight;
es.display = 'none';
es.position = oldPosition;
es.visibility = oldVisibility;
}
return {w:w, h:h, wb:wb, hb:hb};
},
getClient : function(e)
{
var h, w;
if (e) {
w = e.clientWidth;
h = e.clientHeight;
} else {
var de = document.documentElement;
w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
}
return {w:w,h:h};
},
getScroll : function (e)
{
var t=0, l=0, w=0, h=0, iw=0, ih=0;
if (e && e.nodeName.toLowerCase() != 'body') {
t = e.scrollTop;
l = e.scrollLeft;
w = e.scrollWidth;
h = e.scrollHeight;
} else {
if (document.documentElement) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
if (typeof pageYOffset != 'undefined') {
t = pageYOffset;
l = pageXOffset;
}
iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
}
return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
},
getMargins : function(e, toInteger)
{
var t = jQuery.curCSS(e,'marginTop') || '';
var r = jQuery.curCSS(e,'marginRight') || '';
var b = jQuery.curCSS(e,'marginBottom') || '';
var l = jQuery.curCSS(e,'marginLeft') || '';
if (toInteger)
return {
t: parseInt(t, 10)||0,
r: parseInt(r, 10)||0,
b: parseInt(b, 10)||0,
l: parseInt(l, 10)
};
else
return {t: t, r: r, b: b, l: l};
},
getPadding : function(e, toInteger)
{
var t = jQuery.curCSS(e,'paddingTop') || '';
var r = jQuery.curCSS(e,'paddingRight') || '';
var b = jQuery.curCSS(e,'paddingBottom') || '';
var l = jQuery.curCSS(e,'paddingLeft') || '';
if (toInteger)
return {
t: parseInt(t, 10)||0,
r: parseInt(r, 10)||0,
b: parseInt(b, 10)||0,
l: parseInt(l, 10)
};
else
return {t: t, r: r, b: b, l: l};
},
getBorder : function(e, toInteger)
{
var t = jQuery.curCSS(e,'borderTopWidth') || '';
var r = jQuery.curCSS(e,'borderRightWidth') || '';
var b = jQuery.curCSS(e,'borderBottomWidth') || '';
var l = jQuery.curCSS(e,'borderLeftWidth') || '';
if (toInteger)
return {
t: parseInt(t, 10)||0,
r: parseInt(r, 10)||0,
b: parseInt(b, 10)||0,
l: parseInt(l, 10)||0
};
else
return {t: t, r: r, b: b, l: l};
},
traverseDOM : function(nodeEl, func)
{
func(nodeEl);
nodeEl = nodeEl.firstChild;
while(nodeEl){
EYE.traverseDOM(nodeEl, func);
nodeEl = nodeEl.nextSibling;
}
},
getInnerWidth : function(el, scroll) {
var offsetW = el.offsetWidth;
return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
},
getInnerHeight : function(el, scroll) {
var offsetH = el.offsetHeight;
return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
},
getExtraWidth : function(el) {
if($.boxModel)
return (parseInt($.curCSS(el, 'paddingLeft'))||0)
+ (parseInt($.curCSS(el, 'paddingRight'))||0)
+ (parseInt($.curCSS(el, 'borderLeftWidth'))||0)
+ (parseInt($.curCSS(el, 'borderRightWidth'))||0);
return 0;
},
getExtraHeight : function(el) {
if($.boxModel)
return (parseInt($.curCSS(el, 'paddingTop'))||0)
+ (parseInt($.curCSS(el, 'paddingBottom'))||0)
+ (parseInt($.curCSS(el, 'borderTopWidth'))||0)
+ (parseInt($.curCSS(el, 'borderBottomWidth'))||0);
return 0;
},
isChildOf: function(parentEl, el, container) {
if (parentEl == el) {
return true;
}
if (!el || !el.nodeType || el.nodeType != 1) {
return false;
}
if (parentEl.contains && !$.browser.safari) {
return parentEl.contains(el);
}
if ( parentEl.compareDocumentPosition ) {
return !!(parentEl.compareDocumentPosition(el) & 16);
}
var prEl = el.parentNode;
while(prEl && prEl != container) {
if (prEl == parentEl)
return true;
prEl = prEl.parentNode;
}
return false;
},
centerEl : function(el, axis)
{
var clientScroll = EYE.getScroll();
var size = EYE.getSize(el);
if (!axis || axis == 'vertically')
$(el).css(
{
top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'
}
);
if (!axis || axis == 'horizontally')
$(el).css(
{
left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'
}
);
}
});
if (!$.easing.easeout) {
$.easing.easeout = function(p, n, firstNum, delta, duration) {
return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
};
}
})(jQuery);

BIN
delete.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 549 B

4241
jquery-1.3.js vendored
View File

File diff suppressed because it is too large Load Diff

19
jquery.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

116
jquery.rightClick.js Normal file
View File

@@ -0,0 +1,116 @@
// jQuery Right-Click Plugin
//
// Version 1.01
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 20 December 2008
//
// Visit http://abeautifulsite.net/notebook/68 for more information
//
// Usage:
//
// // Capture right click
// $("#selector").rightClick( function(e) {
// // Do something
// });
//
// // Capture right mouse down
// $("#selector").rightMouseDown( function(e) {
// // Do something
// });
//
// // Capture right mouseup
// $("#selector").rightMouseUp( function(e) {
// // Do something
// });
//
// // Disable context menu on an element
// $("#selector").noContext();
//
// History:
//
// 1.01 - Updated (20 December 2008)
// - References to 'this' now work the same way as other jQuery plugins, thus
// the el parameter has been deprecated. Use this or $(this) instead
// - The mouse event is now passed to the callback function
// - Changed license to GNU GPL
//
// 1.00 - Released (13 May 2008)
//
// License:
//
// This plugin is dual-licensed under the GNU General Public License and the MIT License
// and is copyright 2008 A Beautiful Site, LLC.
//
if(jQuery) (function(){
$.extend($.fn, {
rightClick: function(handler) {
$(this).each( function() {
$(this).mousedown( function(e) {
var evt = e;
$(this).mouseup( function() {
$(this).unbind('mouseup');
if( evt.button == 2 ) {
handler.call( $(this), evt );
return false;
} else {
return true;
}
});
});
$(this)[0].oncontextmenu = function() {
return false;
}
});
return $(this);
},
rightMouseDown: function(handler) {
$(this).each( function() {
$(this).mousedown( function(e) {
if( e.button == 2 ) {
handler.call( $(this), e );
return false;
} else {
return true;
}
});
$(this)[0].oncontextmenu = function() {
return false;
}
});
return $(this);
},
rightMouseUp: function(handler) {
$(this).each( function() {
$(this).mouseup( function(e) {
if( e.button == 2 ) {
handler.call( $(this), e );
return false;
} else {
return true;
}
});
$(this)[0].oncontextmenu = function() {
return false;
}
});
return $(this);
},
noContext: function() {
$(this).each( function() {
$(this)[0].oncontextmenu = function() {
return false;
}
});
return $(this);
}
});
})(jQuery);

BIN
line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 665 B

BIN
none.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 B

BIN
path.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 801 B

BIN
rect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 428 B

16
save.php
View File

@@ -1,16 +0,0 @@
<?php
$svg= $_REQUEST["svg_data"];
/*
echo $svg;
echo "</br>"
echo urldecode($svg);
$svg_data_to_display_for_html= htmlspecialchars(urldecode($svg));
echo $svg_data_to_display_for_html ;
*/
$svg_data= urldecode($svg);
$file = "sig.svg";
$fh = fopen($file, "w") or die("Can't open file");
fwrite($fh, $svg_data);
fclose($fh);
?>

BIN
select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 B

40
simple-colorpicker/README
View File

@@ -1,40 +0,0 @@
Really Simple Color Picker
-------------------------------
Written by Lakshan Perera
For more info please visit: http://www.web2media.net/laktek/?p=96
Source code is hosted at: http://github.com/laktek/really-simple-color-picker
Color Picker requires jQuery 1.2.6 or higher. So make sure to load it before Color Picker (there's no other dependencies!).
For default styles of the color picker load the CSS file that comes with the plugin.
<script language="javascript" type="text/javascript" src=jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script>
<link rel="stylesheet" href="colorPicker.css" type="text/css" />
Add a text field to take the color input.
<div><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
Then call 'colorPicker' method on the text field when document loads.
<script language="javascript">
jQuery(document).ready(function($) {
$('#color1').colorPicker();
}
</script>
Your favorite colors are missing?
Just add them to the palette
<script language="javascript">
//use this method to add new colors to palette
$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
</script>
Or completely change the color palette as you need...
<script language="javascript">
$.fn.colorPicker.defaultColors = ['000', '000', 'fff', 'fff'];
</script>
That’s all you have to do!

BIN
simple-colorpicker/arrow.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 111 B

BIN
simple-colorpicker/arrow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

30
simple-colorpicker/colorPicker.css
View File

@@ -1,30 +0,0 @@
div.color_picker {
height: 16px;
width: 16px;
padding: 0 !important;
border: 1px solid #ccc;
background: url(arrow.gif) no-repeat top right;
cursor: pointer;
line-height: 16px;
}
div#color_selector {
width: 110px;
position: absolute;
border: 1px solid #598FEF;
background-color: #EFEFEF;
padding: 2px;
}
div#color_custom {width: 100%; float:left }
div#color_custom label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
div#color_custom input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
div.color_swatch {
height: 12px;
width: 12px;
border: 1px solid #000;
margin: 2px;
float: left;
cursor: pointer;
line-height: 12px;
}

75
simple-colorpicker/demo.html
View File

@@ -1,75 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Really Simple Color Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
//use this method to add new colors to pallete
//$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
$('#color1').colorPicker();
$('#color2').colorPicker();
$('#color3').colorPicker();
//fires an event when the color is changed
//$('#color1').change(function(){
//alert("color changed");
//});
});
</script>
<style type="text/css">
/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
/* General styles */
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
/* Form styles */
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }
div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
div.form-container div.controlset label,
div.form-container div.controlset input,
div.form-container div.controlset div { display: inline; float: left; }
div.form-container div.controlset label { width: 100px;}
</style>
<link rel="stylesheet" href="colorPicker.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<h2>Really Simple Color Picker (jQuery)</h2>
<p>More information about this can be found in <a href="http://www.web2media.net/laktek/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p>
<div class="form-container">
<form action="#" method="post">
<fieldset>
<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
<div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div>
<div class="controlset"><label for="color3">Color 3</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
</fieldset>
</form>
</div>
</body>
</html>

158
simple-colorpicker/jquery.colorPicker.js
View File

@@ -1,158 +0,0 @@
/**
* Really Simple Color Picker in jQuery
*
* Copyright (c) 2008 Lakshan Perera (www.laktek.com)
* Licensed under the MIT (MIT-LICENSE.txt) licenses.
*
*/
(function($){
$.fn.colorPicker = function(){
if(this.length > 0) buildSelector();
return this.each(function(i) { buildPicker(this)});
};
var selectorOwner;
var selectorShowing = false;
buildPicker = function(element){
//build color picker
control = $("<div class='color_picker'>&nbsp;</div>")
control.css('background-color', $(element).val());
control.attr('id' , 'div_' + $(element).attr("id"));
//bind click event to color picker
control.bind("click", toggleSelector);
//add the color picker section
$(element).after(control);
//hide the input box
$(element).hide();
};
buildSelector = function(){
selector = $("<div id='color_selector'></div>");
//add color pallete
$.each($.fn.colorPicker.defaultColors, function(i){
swatch = $("<div class='color_swatch'>&nbsp;</div>")
swatch.css("background-color", "#" + this);
swatch.bind("click", function(e){ changeColor($(this).css("background-color")) });
swatch.bind("mouseover", function(e){
$(this).css("border-color", "#598FEF");
$("input#color_value").val(toHex($(this).css("background-color")));
});
swatch.bind("mouseout", function(e){
$(this).css("border-color", "#000");
$("input#color_value").val(toHex($(selectorOwner).css("background-color")));
});
swatch.appendTo(selector);
});
//add HEX value field
hex_field = $("<label for='color_value'>Hex</label><input type='text' size='8' id='color_value'/>");
hex_field.bind("keydown", function(event){
if(event.keyCode == 13) {changeColor($(this).val());}
if(event.keyCode == 27) {toggleSelector()}
});
$("<div id='color_custom'></div>").append(hex_field).appendTo(selector);
$("body").append(selector);
selector.hide();
};
checkMouse = function(event){
//check the click was on selector itself or on selectorOwner
var selector = "div#color_selector";
var selectorParent = $(event.target).parents(selector).length;
if(event.target == $(selector)[0] || event.target == selectorOwner || selectorParent > 0) return
hideSelector();
}
hideSelector = function(){
var selector = $("div#color_selector");
$(document).unbind("mousedown", checkMouse);
selector.hide();
selectorShowing = false
}
showSelector = function(){
var selector = $("div#color_selector");
//alert($(selectorOwner).offset().top);
selector.css({
top: $(selectorOwner).offset().top + ($(selectorOwner).outerHeight()),
left: $(selectorOwner).offset().left
});
hexColor = $(selectorOwner).prev("input").val();
$("input#color_value").val(hexColor);
selector.show();
//bind close event handler
$(document).bind("mousedown", checkMouse);
selectorShowing = true
}
toggleSelector = function(event){
selectorOwner = this;
selectorShowing ? hideSelector() : showSelector();
}
changeColor = function(value){
if(selectedValue = toHex(value)){
$(selectorOwner).css("background-color", selectedValue);
$(selectorOwner).prev("input").val(selectedValue).change();
//close the selector
hideSelector();
}
};
//converts RGB string to HEX - inspired by http://code.google.com/p/jquery-color-utils
toHex = function(color){
//valid HEX code is entered
if(color.match(/[0-9a-fA-F]{3}$/) || color.match(/[0-9a-fA-F]{6}$/)){
color = (color.charAt(0) == "#") ? color : ("#" + color);
}
//rgb color value is entered (by selecting a swatch)
else if(color.match(/^rgb\(([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5]),[ ]{0,1}([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5]),[ ]{0,1}([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5])\)$/)){
var c = ([parseInt(RegExp.$1),parseInt(RegExp.$2),parseInt(RegExp.$3)]);
var pad = function(str){
if(str.length < 2){
for(var i = 0,len = 2 - str.length ; i<len ; i++){
str = '0'+str;
}
}
return str;
}
if(c.length == 3){
var r = pad(c[0].toString(16)),g = pad(c[1].toString(16)),b= pad(c[2].toString(16));
color = '#' + r + g + b;
}
}
else color = false;
return color
}
//public methods
$.fn.colorPicker.addColors = function(colorArray){
$.fn.colorPicker.defaultColors = $.fn.colorPicker.defaultColors.concat(colorArray);
};
$.fn.colorPicker.defaultColors =
[ '000000', '993300','333300', '000080', '333399', '333333', '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99' , 'CCFFFF', '99CCFF', 'FFFFFF'];
})(jQuery);

BIN
simple-colorpicker/screenshot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
submit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 668 B

55
svg-editor.css Normal file
View File

@@ -0,0 +1,55 @@
#svg_editor .canvas {
width: 640px;
height: 480px;
border: 1px solid #808080;
}
#svg_editor div#palette_holder {
border: 1px solid #808080;
border-top: none;
float: left;
width: 640px;
overflow-x: scroll;
overflow-y: hidden;
height: 31px;
}
#fill_color, #stroke_color {
height: 16px;
width: 16px;
border: 1px solid #808080;
}
#fill_color {
background: url('none.png');
}
#stroke_color {
background: #000000;
}
#svg_editor div#palette {
float: left;
width: 6848px;
height: 16px;
}
#svg_editor div#tools {
float: left;
}
#svg_editor div#workarea {
float: left;
}
#svg_editor div.palette_item {
height: 16px;
width: 16px;
float: left;
}
.tool_button {
height: 16px;
width: 16px;
border: 4px solid #E8E8E4;
}

105
svg-editor.html
View File

@@ -1,70 +1,69 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="svg-editor.css" type="text/css"/>
<script src="jquery-1.3.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="colorpicker/css/colorpicker.css" /> <script type="text/javascript" src="jquery.rightClick.js"></script>
<script type="text/javascript" src="colorpicker/js/colorpicker.js"></script> <script type="text/javascript" src="svg-editor.js"></script>
<script language="JavaScript" type="text/javascript" src="SvgEditor.js"></script>
<script language="javascript" type="text/javascript" src="simple-colorpicker/jquery.colorPicker.js"/></script><link rel="stylesheet" href="simple-colorpicker/colorPicker.css" type="text/css" />
</head> </head>
<body> <body>
<div id="svg_editor">
<table border="1"> <div id="tools">
<tr><td> Draw Your SVG image here </td><td> Control </td></tr>
<tr><td>
<div> <div>
<object data="blank.svg" type="image/svg+xml" width="350px" height="360px"> <img class="tool_button" id="tool_select" src="select.png" />
<embed src="blank.svg" type="image/svg+xml" width="350px" height="360px"> <img class="tool_button" id="tool_path" src="path.png" />
<img class="tool_button" id="tool_line" src="line.png" />
<br/>
<img class="tool_button" id="tool_square" src="rect.png" />
<img class="tool_button" id="tool_rect" src="rect.png" />
<img class="tool_button" id="tool_fhrect" src="rect.png" />
<br/>
<img class="tool_button" id="tool_circle" src="circle.png" />
<img class="tool_button" id="tool_ellipse" src="circle.png" />
<img class="tool_button" id="tool_fhellipse" src="circle.png" />
<br/>
<img class="tool_button" id="tool_delete" src="delete.png" />
<img class="tool_button" id="tool_clear" src="clear.png" />
<img class="tool_button" id="tool_submit" src="submit.png" />
</div>
<div>Fill
<div id="fill_color"></div>
</div>
<div>Stroke
<select id="stroke_width">
<option selected="selected" value="1px">1px</option>
<option value="2px">2px</option>
<option value="3px">3px</option>
<option value="5px">5px</option>
<option value="7px">7px</option>
</select>
<div id="stroke_color"></div>
</div>
</div>
<div id="workarea">
<div id="canvas">
<object class="canvas" data="blank.svg" type="image/svg+xml">
<embed class="canvas" src="blank.svg" type="image/svg+xml" />
</object> </object>
</div> </div>
</td><td> <div id="palette_holder">
<div id="palette">
</div>
<div id="control_box">
<input type="button" value="clear" onclick="window.clear_svg()">
<input type="button" value="path" onclick="window.set_draw_mode('path')">
<input type="button" value="rect" onclick="window.set_draw_mode('rect')">
<input type="button" value="line" onclick="window.set_draw_mode('line')">
</br>
<input type="button" value="circle" onclick="window.set_draw_mode('ellipse')">
<input type="button" value="freehandcircle" onclick="window.set_draw_mode('freehandcircle')">
<input type="button" value="save" onclick="window.submit_svg()">
<input type="button" value="delete" onclick="window.set_draw_mode('delete')">
</br>
Select Stroke Color
<input type="button" title="select stroke color" id="colorSelectorStroke">
<input id="color1" type="text" name="color1" value="#333399" onchange="window.set_stroke_color(this.value); var col = this.value ; f1(col);"/></div>
</br>
Stroke Width <select onchange="window.set_stroke_width(this.options[this.selectedIndex].value )" id="linewidth">
<option value="1px">1px</option>
<option value="2px">2px</option>
<option value="3px">3px</option>
<option value="5px">5px</option>
<option value="7px">7px</option>
</select>
</br>
Select Fill Color
<div title="select fill color" id="colorSelectorFill"></div>
<input id="color2" type="text" name="color2" value="#333399" onchange="window.set_fill_color(this.value); var col = this.value ; $('#colorSelectorFill').ColorPickerSetColor(col);" /></div>
<input type="button" value="empty fill" onclick="window.set_fill_color('none'); $('#colorSelectorFill').css('backgroundColor', '#ffffff');">
</div> </div>
</br> </div>
</div>
</td></tr></table>
</body> </body>
</html> </html>

88
svg-editor.js Normal file
View File

@@ -0,0 +1,88 @@
var 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","#FFAACC","#FFD5E5","#280B17","#50162D","#782144","#A02C5A","#C83771","#D35F8D","#DE87AA","#E9AFC6","#F4D7E3","#241C1F","#48373E","#6C535D","#916F7C","#AC939D","#C8B7BE","#E3DBDE"]
$(document).ready(function(){
var str = '<div class="palette_item" style="background: url(\'none.png\');"></div>'
$.each(palette, function(i,item){
str += '<div class="palette_item" style="background: ' + item + ';"></div>';
});
$('#palette').append(str);
$('#stroke_width').change(function(){
window.set_stroke_width(this.options[this.selectedIndex].value);
});
$('.palette_item').click(function(){
color = $(this).css('background-color');
if (color == 'transparent') {
color = 'none';
$('#fill_color').css('background', 'url(\'none.png\')');
} else {
$('#fill_color').css('background', color);
}
window.set_fill_color(color);
});
$('.palette_item').rightClick(function(){
color = $(this).css('background-color');
if (color == 'transparent') {
color = 'none';
$('#stroke_color').css('background', 'url(\'none.png\')');
} else {
$('#stroke_color').css('background', color);
}
window.set_stroke_color(color);
});
$('#tool_select').click(function(){
window.set_draw_mode('select');
});
$('#tool_path').click(function(){
window.set_draw_mode('path');
});
$('#tool_line').click(function(){
window.set_draw_mode('line');
});
$('#tool_square').click(function(){
window.set_draw_mode('square');
});
$('#tool_rect').click(function(){
window.set_draw_mode('rect');
});
$('#tool_fhrect').click(function(){
window.set_draw_mode('fhrect');
});
$('#tool_circle').click(function(){
window.set_draw_mode('circle');
});
$('#tool_ellipse').click(function(){
window.set_draw_mode('ellipse');
});
$('#tool_fhellipse').click(function(){
window.set_draw_mode('fhellipse');
});
$('#tool_delete').click(function(){
window.set_draw_mode('delete');
});
$('#tool_clear').click(function(){
window.clear_svg();
});
$('#tool_submit').click(function(){
window.submit_svg();
});
})
function serializeHandler(str){
alert(str);
}