modified code
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@7 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Narendra Sisodiya
parent
f4c716e365
commit
899d973ffb
|
|
@ -0,0 +1,278 @@
|
|||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 2, June 1991
|
||||
|
||||
Copyright (C) 1989, 1991 Free Software Foundation, Inc.
|
||||
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The licenses for most software are designed to take away your
|
||||
freedom to share and change it. By contrast, the GNU General Public
|
||||
License is intended to guarantee your freedom to share and change free
|
||||
software--to make sure the software is free for all its users. This
|
||||
General Public License applies to most of the Free Software
|
||||
Foundation's software and to any other program whose authors commit to
|
||||
using it. (Some other Free Software Foundation software is covered by
|
||||
the GNU Lesser General Public License instead.) You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
this service if you wish), that you receive source code or can get it
|
||||
if you want it, that you can change the software or use pieces of it
|
||||
in new free programs; and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to make restrictions that forbid
|
||||
anyone to deny you these rights or to ask you to surrender the rights.
|
||||
These restrictions translate to certain responsibilities for you if you
|
||||
distribute copies of the software, or if you modify it.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must give the recipients all the rights that
|
||||
you have. You must make sure that they, too, receive or can get the
|
||||
source code. And you must show them these terms so they know their
|
||||
rights.
|
||||
|
||||
We protect your rights with two steps: (1) copyright the software, and
|
||||
(2) offer you this license which gives you legal permission to copy,
|
||||
distribute and/or modify the software.
|
||||
|
||||
Also, for each author's protection and ours, we want to make certain
|
||||
that everyone understands that there is no warranty for this free
|
||||
software. If the software is modified by someone else and passed on, we
|
||||
want its recipients to know that what they have is not the original, so
|
||||
that any problems introduced by others will not reflect on the original
|
||||
authors' reputations.
|
||||
|
||||
Finally, any free program is threatened constantly by software
|
||||
patents. We wish to avoid the danger that redistributors of a free
|
||||
program will individually obtain patent licenses, in effect making the
|
||||
program proprietary. To prevent this, we have made it clear that any
|
||||
patent must be licensed for everyone's free use or not licensed at all.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. This License applies to any program or other work which contains
|
||||
a notice placed by the copyright holder saying it may be distributed
|
||||
under the terms of this General Public License. The "Program", below,
|
||||
refers to any such program or work, and a "work based on the Program"
|
||||
means either the Program or any derivative work under copyright law:
|
||||
that is to say, a work containing the Program or a portion of it,
|
||||
either verbatim or with modifications and/or translated into another
|
||||
language. (Hereinafter, translation is included without limitation in
|
||||
the term "modification".) Each licensee is addressed as "you".
|
||||
|
||||
Activities other than copying, distribution and modification are not
|
||||
covered by this License; they are outside its scope. The act of
|
||||
running the Program is not restricted, and the output from the Program
|
||||
is covered only if its contents constitute a work based on the
|
||||
Program (independent of having been made by running the Program).
|
||||
Whether that is true depends on what the Program does.
|
||||
|
||||
1. You may copy and distribute verbatim copies of the Program's
|
||||
source code as you receive it, in any medium, provided that you
|
||||
conspicuously and appropriately publish on each copy an appropriate
|
||||
copyright notice and disclaimer of warranty; keep intact all the
|
||||
notices that refer to this License and to the absence of any warranty;
|
||||
and give any other recipients of the Program a copy of this License
|
||||
along with the Program.
|
||||
|
||||
You may charge a fee for the physical act of transferring a copy, and
|
||||
you may at your option offer warranty protection in exchange for a fee.
|
||||
|
||||
2. You may modify your copy or copies of the Program or any portion
|
||||
of it, thus forming a work based on the Program, and copy and
|
||||
distribute such modifications or work under the terms of Section 1
|
||||
above, provided that you also meet all of these conditions:
|
||||
|
||||
a) You must cause the modified files to carry prominent notices
|
||||
stating that you changed the files and the date of any change.
|
||||
|
||||
b) You must cause any work that you distribute or publish, that in
|
||||
whole or in part contains or is derived from the Program or any
|
||||
part thereof, to be licensed as a whole at no charge to all third
|
||||
parties under the terms of this License.
|
||||
|
||||
c) If the modified program normally reads commands interactively
|
||||
when run, you must cause it, when started running for such
|
||||
interactive use in the most ordinary way, to print or display an
|
||||
announcement including an appropriate copyright notice and a
|
||||
notice that there is no warranty (or else, saying that you provide
|
||||
a warranty) and that users may redistribute the program under
|
||||
these conditions, and telling the user how to view a copy of this
|
||||
License. (Exception: if the Program itself is interactive but
|
||||
does not normally print such an announcement, your work based on
|
||||
the Program is not required to print an announcement.)
|
||||
|
||||
These requirements apply to the modified work as a whole. If
|
||||
identifiable sections of that work are not derived from the Program,
|
||||
and can be reasonably considered independent and separate works in
|
||||
themselves, then this License, and its terms, do not apply to those
|
||||
sections when you distribute them as separate works. But when you
|
||||
distribute the same sections as part of a whole which is a work based
|
||||
on the Program, the distribution of the whole must be on the terms of
|
||||
this License, whose permissions for other licensees extend to the
|
||||
entire whole, and thus to each and every part regardless of who wrote it.
|
||||
|
||||
Thus, it is not the intent of this section to claim rights or contest
|
||||
your rights to work written entirely by you; rather, the intent is to
|
||||
exercise the right to control the distribution of derivative or
|
||||
collective works based on the Program.
|
||||
|
||||
In addition, mere aggregation of another work not based on the Program
|
||||
with the Program (or with a work based on the Program) on a volume of
|
||||
a storage or distribution medium does not bring the other work under
|
||||
the scope of this License.
|
||||
|
||||
3. You may copy and distribute the Program (or a work based on it,
|
||||
under Section 2) in object code or executable form under the terms of
|
||||
Sections 1 and 2 above provided that you also do one of the following:
|
||||
|
||||
a) Accompany it with the complete corresponding machine-readable
|
||||
source code, which must be distributed under the terms of Sections
|
||||
1 and 2 above on a medium customarily used for software interchange; or,
|
||||
|
||||
b) Accompany it with a written offer, valid for at least three
|
||||
years, to give any third party, for a charge no more than your
|
||||
cost of physically performing source distribution, a complete
|
||||
machine-readable copy of the corresponding source code, to be
|
||||
distributed under the terms of Sections 1 and 2 above on a medium
|
||||
customarily used for software interchange; or,
|
||||
|
||||
c) Accompany it with the information you received as to the offer
|
||||
to distribute corresponding source code. (This alternative is
|
||||
allowed only for noncommercial distribution and only if you
|
||||
received the program in object code or executable form with such
|
||||
an offer, in accord with Subsection b above.)
|
||||
|
||||
The source code for a work means the preferred form of the work for
|
||||
making modifications to it. For an executable work, complete source
|
||||
code means all the source code for all modules it contains, plus any
|
||||
associated interface definition files, plus the scripts used to
|
||||
control compilation and installation of the executable. However, as a
|
||||
special exception, the source code distributed need not include
|
||||
anything that is normally distributed (in either source or binary
|
||||
form) with the major components (compiler, kernel, and so on) of the
|
||||
operating system on which the executable runs, unless that component
|
||||
itself accompanies the executable.
|
||||
|
||||
If distribution of executable or object code is made by offering
|
||||
access to copy from a designated place, then offering equivalent
|
||||
access to copy the source code from the same place counts as
|
||||
distribution of the source code, even though third parties are not
|
||||
compelled to copy the source along with the object code.
|
||||
|
||||
4. You may not copy, modify, sublicense, or distribute the Program
|
||||
except as expressly provided under this License. Any attempt
|
||||
otherwise to copy, modify, sublicense or distribute the Program is
|
||||
void, and will automatically terminate your rights under this License.
|
||||
However, parties who have received copies, or rights, from you under
|
||||
this License will not have their licenses terminated so long as such
|
||||
parties remain in full compliance.
|
||||
|
||||
5. You are not required to accept this License, since you have not
|
||||
signed it. However, nothing else grants you permission to modify or
|
||||
distribute the Program or its derivative works. These actions are
|
||||
prohibited by law if you do not accept this License. Therefore, by
|
||||
modifying or distributing the Program (or any work based on the
|
||||
Program), you indicate your acceptance of this License to do so, and
|
||||
all its terms and conditions for copying, distributing or modifying
|
||||
the Program or works based on it.
|
||||
|
||||
6. Each time you redistribute the Program (or any work based on the
|
||||
Program), the recipient automatically receives a license from the
|
||||
original licensor to copy, distribute or modify the Program subject to
|
||||
these terms and conditions. You may not impose any further
|
||||
restrictions on the recipients' exercise of the rights granted herein.
|
||||
You are not responsible for enforcing compliance by third parties to
|
||||
this License.
|
||||
|
||||
7. If, as a consequence of a court judgment or allegation of patent
|
||||
infringement or for any other reason (not limited to patent issues),
|
||||
conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot
|
||||
distribute so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you
|
||||
may not distribute the Program at all. For example, if a patent
|
||||
license would not permit royalty-free redistribution of the Program by
|
||||
all those who receive copies directly or indirectly through you, then
|
||||
the only way you could satisfy both it and this License would be to
|
||||
refrain entirely from distribution of the Program.
|
||||
|
||||
If any portion of this section is held invalid or unenforceable under
|
||||
any particular circumstance, the balance of the section is intended to
|
||||
apply and the section as a whole is intended to apply in other
|
||||
circumstances.
|
||||
|
||||
It is not the purpose of this section to induce you to infringe any
|
||||
patents or other property right claims or to contest validity of any
|
||||
such claims; this section has the sole purpose of protecting the
|
||||
integrity of the free software distribution system, which is
|
||||
implemented by public license practices. Many people have made
|
||||
generous contributions to the wide range of software distributed
|
||||
through that system in reliance on consistent application of that
|
||||
system; it is up to the author/donor to decide if he or she is willing
|
||||
to distribute software through any other system and a licensee cannot
|
||||
impose that choice.
|
||||
|
||||
This section is intended to make thoroughly clear what is believed to
|
||||
be a consequence of the rest of this License.
|
||||
|
||||
8. If the distribution and/or use of the Program is restricted in
|
||||
certain countries either by patents or by copyrighted interfaces, the
|
||||
original copyright holder who places the Program under this License
|
||||
may add an explicit geographical distribution limitation excluding
|
||||
those countries, so that distribution is permitted only in or among
|
||||
countries not thus excluded. In such case, this License incorporates
|
||||
the limitation as if written in the body of this License.
|
||||
|
||||
9. The Free Software Foundation may publish revised and/or new versions
|
||||
of the General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the Program
|
||||
specifies a version number of this License which applies to it and "any
|
||||
later version", you have the option of following the terms and conditions
|
||||
either of that version or of any later version published by the Free
|
||||
Software Foundation. If the Program does not specify a version number of
|
||||
this License, you may choose any version ever published by the Free Software
|
||||
Foundation.
|
||||
|
||||
10. If you wish to incorporate parts of the Program into other free
|
||||
programs whose distribution conditions are different, write to the author
|
||||
to ask for permission. For software which is copyrighted by the Free
|
||||
Software Foundation, write to the Free Software Foundation; we sometimes
|
||||
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 promoting the sharing and reuse of software generally.
|
||||
|
||||
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
|
||||
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
|
||||
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
|
||||
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
|
||||
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
|
||||
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
|
||||
REPAIR OR CORRECTION.
|
||||
|
||||
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
|
||||
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
|
||||
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
|
||||
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
|
||||
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
|
||||
POSSIBILITY OF SUCH DAMAGES.
|
||||
|
|
@ -4,17 +4,21 @@ $(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){
|
||||
|
|
@ -49,3 +53,6 @@ function return_str_to_html(str){
|
|||
});
|
||||
}
|
||||
|
||||
function f1(col){
|
||||
$('#colorSelectorStroke').ColorPickerSetColor(col);
|
||||
}
|
||||
|
|
|
|||
20
blanksvg.js
20
blanksvg.js
|
|
@ -1,6 +1,15 @@
|
|||
SVGDocument = null;
|
||||
SVGRoot = null;
|
||||
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 ;
|
||||
|
||||
|
||||
var d_attr = "" ;
|
||||
var signature_started = 0 ;
|
||||
var path_elememt = 0 ;
|
||||
|
|
@ -10,23 +19,16 @@
|
|||
var ellipse_num = 1 ;
|
||||
var rect_x = null ;
|
||||
var rect_y = null ;
|
||||
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 ;
|
||||
|
||||
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 ;
|
||||
|
||||
|
||||
|
||||
function SVGset_draw_mode(ele_name) {
|
||||
current_draw_element = ele_name;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
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!
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 111 B |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
/**
|
||||
* 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'> </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'> </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);
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -6,6 +6,9 @@
|
|||
<script type="text/javascript" src="colorpicker/js/colorpicker.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>
|
||||
<body>
|
||||
|
||||
|
|
@ -39,7 +42,7 @@
|
|||
|
||||
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>
|
||||
|
|
@ -52,9 +55,16 @@ Stroke Width <select onchange="window.set_stroke_width(this.options[this.selecte
|
|||
</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>
|
||||
|
||||
</br>
|
||||
|
||||
|
||||
|
||||
|
||||
</td></tr></table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue