-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
129 lines (124 loc) · 13.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript" src="cbox.js"></script>
</head>
<body>
<h1>Color Picker</h1>
<p>Written by Peter O. in 2012/2013.
<a href="http://upokecenter.dreamhosters.com/">http://upokecenter.dreamhosters.com/</a></p>
<p>
A color picker in JavaScript. Supports adapters for integrating other popular color pickers, and can use native color selection controls.
In the public domain under CC0.
</p>
<h2>Donate to me</h2>
<p>
If you like this, consider donating to me to help pay my loans and other costs:
</p>
<p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
name="submit" border="2" alt="PayPal - The safer, easier way to pay online!">
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</p>
<h2>Download</h2>
<ul>
<li><a href="https://github.com/peteroupc/colorpicker/zipball/master">Download source code as zip</a></li>
<li><a href="https://github.com/peteroupc/colorpicker/tarball/master">Download source code as tar.gz</a></li>
<li><a href="https://github.com/peteroupc/colorpicker">Browse source code</a></li>
</ul>
<h2>Demo</h2>
<p>Include these scripts in your HTML header:</p>
<pre>
<script type="text/javascript" src="cbox.js"></script>
</pre>
<p>Then, color input boxes, and textboxes with IDs or class names starting with "color_" or "acolor_" or
"rgbahex_" or "argbhex_" will turn into color pickers.</p>
<form action="index.html">
<p><label for="color_c2"><a href="http://upokecenter.dreamhosters.com/articles/how-to-enter-colors/">Normal Color Picker</a>:</label>
<input type="text" value="blue" name="c1" id="color_c1"></p>
<pre>
<input type="text" value="blue" name="c1" id="color_c1">
OR
<input type="text" value="blue" name="c1" class="color_c1">
</pre>
<p><label for="acolor_c2"><a href="http://upokecenter.dreamhosters.com/articles/how-to-enter-colors/">Alpha Color Picker</a>:</label>
<input type="text" value="#ff0000" name="c2" id="acolor_c2">
<pre>
<input type="text" value="#ff0000" name="c2" id="acolor_c2">
</pre>
<p><label for="acolor_c2"><a href="http://upokecenter.dreamhosters.com/articles/how-to-enter-colors/">
Alpha Color Picker (RRGGBBAA format)</a>:</label><br/>
<input type="text" value="ff0000ff" name="c2" id="rgbahex_c2">
<pre>
<input type="text" value="ff0000ff" name="c2" id="rgbahex_c2">
</pre>
<p><label for="acolor_c2"><a href="http://upokecenter.dreamhosters.com/articles/how-to-enter-colors/">
Alpha Color Picker (AARRGGBB format)</a>:</label><br/>
<input type="text" value="ff0000ff" name="c2" id="argbhex_c2">
<pre>
<input type="text" value="ff0000ff" name="c2" id="argbhex_c2">
</pre>
<a href="http://upokecenter.dreamhosters.com/articles/how-to-enter-colors/">Native Color Picker</a>:
<input type="color" value="#00ff00" name="c3">
<pre>
<input type="color" value="#00ff00" name="c3">
</pre>
<input type="submit" value="Fake Submit">
</form>
<h2>Share</h2>
<p>Share this color picker with others.</p>
<p>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="en">Share with Twitter</a>
<script type="text/javascript" charset="UTF-8" src="http://platform.twitter.com/widgets.js"></script>
<span><g:plusone size="medium"></g:plusone></span>
<span><fb:like href="http://peteroupc.github.com/colorpicker/" send="true" width="450" show_faces="true"></fb:like></span>
</p>
<hr>
<p>
=======<br>
Color Picker<br>===========<br><br>Written by Peter O. in 2012/2013. http://upokecenter.dreamhosters.com/<br><br>
A color picker in JavaScript. Supports adapters for integrating other popular color pickers, and can use native color selection controls.
In the public domain under CC0.<br><br>## Donate to me<br><br>If you like this, consider donating to me to help pay my loans and other costs:<br><br>http://upokecenter.dreamhosters.com/d<br><br>## How to use:<br><br>In general, include the scripts "cbox.js" and "objlib.js" to your HTML:<br><br> <script type="text/javascript" src="objlib.js"></script><br> <script type="text/javascript" src="cbox.js"></script><br><br>When the page is ready, it will convert certain textboxes into color pickers:<br><br>
* Textboxes with IDs or class names starting with "color_". and input elements with type "color", will be converted into normal color pickers.
<br>* Textboxes with IDs or class names starting with "rgbahex_" will be converted into alpha color pickers that use
the color format RRGGBBAA, with no "#" character, and with hexadecimal components.
<br>* Textboxes with IDs or class names starting with "argbhex_" will be converted into alpha color pickers that use
the color format AARRGGBB, with no "#" character, and with hexadecimal components.
<br>* Textboxes with IDs or class names starting with "acolor_" will be converted into alpha color pickers.<br><br>For more advanced features, use the following functions.<br><br>## Available Functions<br><br>PDColorPicker.setColorPicker( _input_, _extra_) - sets up a color picker for the given textbox. The <br>_input_ parameter is the HTML element for the input text box. The _extra_ parameter takes the following keys:<br><br>1. usealpha - whether this color picker should use the alpha channel or not.
<br>2. info - the color model used. If null, the default color model is used, which is initially `PDColorPicker.HueSatVal`.
<br>3. flat - if true, shows the color selection control in-line rather than in the form of a text box and button. Default is false.<br>
<br>4. rgbahex - if true, the color format used is RRGGBBAA, with hexadecimal components.
<br>5. argbhex - if true, the color format used is AARRGGBB, with hexadecimal components.
<br>PDColorPicker.getDefaultColorModel() - gets the default color model used by the color picker.<br>The model is a JavaScript object with the following keys:<br><br>* fromrgbcolor - a function that takes an RGB color as an input and returns a converted form<br> of the color as output. The RGB color is a three-element array consisting of the red (0-255), green (0-255), and blue (0-255) components.<br>* torgbcolor - a function that takes a converted form of the color and returns an RGB color.<br>* maxes - an array containing maximum values for each component of the converted color.<br>* reversed - an array containing boolean values for each component of the converted color. Each value indicates whether the value goes down to up in the display rather than up to down.<br>* indexes - an array that determines which axes of the display correspond to which color component. 0 refers to the X-axis, 1 to the Y-axis, and 2 to the sidebar.<br><br>Two color models are included: `PDColorPicker.HueLumSat` and `PDColorPicker.HueSatVal`.<br><br>PDColorPicker.setDefaultColorModel() - sets the default color model used by the color picker.<br><br>PDColorPicker.getColorChangeEvent().add( _handler_ ) - adds a function to call when a color picker's color changes. The function takes two parameters: a four-element array representing the color <br>(red/green/blue/alpha, each 0-255) and the HTML element (the text box) whose value changed.<br><br>PDColorPicker.getColorChangeEvent().remove( _handler_ ) - removes an event handler for a color change event.<br><br>PDColorPicker.getColorPreviewEvent().add( _handler_ ) - adds a function to call when a color picker's color is being previewed. The function takes the same parameters as for color change events.<br><br>PDColorPicker.getColorPreviewEvent().remove( _handler_ ) - removes an event handler for a color preview event.<br><br>PDColorPicker.addColorPickerAdapter( _handler_, _extra_ ) - adds a function to call when setting up a color picker. This is used mainly to support third-party JavaScript color pickers; the <br>function should include code that links the text box with the third-party color picker. If this function returns true, the code was linked to the third-party color picker <br>successfully. The _input_ parameter is the HTML element for the input text box. The _extra_ parameter takes the following keys:<br><br>1. usealpha - whether this color picker should use the alpha channel or not.
<br>2. info - the color model used.
<br>3. flat - if true, shows the color selection control in-line rather than in the form of a text box and button.
<br>4. rgbahex - if true, the color format used is RRGGBBAA, with hexadecimal components.
<br>5. argbhex - if true, the color format used is AARRGGBB, with hexadecimal components.
<br><br>**The following methods are generally only useful when making color picker adapters:**<br><br>PDColorPicker.createColorPickerButton( _input_, _extra_ ) - adds a color picker button next to the color text box. This is a helper function used within functions called via `addColorPickerHandler()`. <br>_input_ and _extra_ have the same meaning as in ` addColorPickerAdapter()`. Returns the HTML element for the button just added.<br><br>PDColorPicker.doColorChange( _input_, _extra_, _button_) - triggers the color change event, using the current value of the color text box.<br>_input_ and _extra_ have the same meaning as in ` addColorPickerAdapter()`. `button` should be the button returned from `createColorPickerButton`.<br><br>PDColorPicker.doColorPreview( _input_, _extra_, _button_ ) - triggers the color preview event, using the current value of the color text box. <br>_input_ and _extra_ have the same meaning as in ` addColorPickerAdapter()`. `button` should be the button returned from `createColorPickerButton`.<br><br>## Server-Side Processing<br><br>Every form sent to the server should be validated on the server side. The color boxes accept a wide variety of values for<br>colors, which need to be validated and converted to a common format. Use the server-side scripts in another of my projects:<br><br>https://github.com/peteroupc/colorvalidator<br><br>That project contains scripts for five popular server-side languages: PHP, Python, Ruby, C#, and Java. These scripts are<br>also released to the public domain.<br>
</p>
</pre>
<script>
if(document.location.href.indexOf("file://")!=0){
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = '//apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
if(!ieversionorbelow(8)){
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
}
</script>
</body></html>