Skip to content

Commit eb7f01e

Browse files
CodingJackCodingJack
committed
Updating README
1 parent 3ed1ebd commit eb7f01e

File tree

3 files changed

+179
-31
lines changed

3 files changed

+179
-31
lines changed

‎README.md‎

Lines changed: 158 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,158 @@
1-
# Advanced-Color-Picker
2-
Translate any CSS Gradient into full controls
1+
# Advanced Color Picker
2+
Harnessing the full power of CSS Gradients
3+
4+
[Demo](http://www.codingjack.com/advanced-color-picker/)
5+
6+
![Screenshot of the Color Picker Editor](/screenshot.jpg)
7+
8+
## Description
9+
10+
Advanced Color Picker includes full support for modern CSS Gradients, with the ability to translate any valid CSS Gradient into editable controls.
11+
12+
## Features
13+
14+
* **Stacked Gradients** - Bleed semi-transparent gradients into one another
15+
* **Color Hints** - Change the midpoint transition point between colors
16+
* **Pixel-based units** - Set positions to percentage or pixel-based values.
17+
* **Repeating Gradients** - Create interesting patterns with pixel-based units
18+
* **Conic Gradients** - Experiment with conic gradients supported in Chrome & Safari
19+
* **Simple Editor Mode** - Can be used for non-gradient editing (text-color, etc.) via "single" mode
20+
* **Copy/Paste Gradients** - Copy any gradient from the web and paste it into the editor (it's like magic)
21+
22+
## Getting Started
23+
24+
[Download](https://github.com/CodingJack/Advanced-Color-Picker/raw/master/advanced_color_picker.zip) the plugin and copy the files inside the "js" folder to your site. Then add the main script to your web page, setup an input field to be used for the swatch, and "init" the plugin with your custom settings.
25+
26+
## Basic Setup & Options
27+
28+
```html
29+
<!-- example input field that will be automatically converted to a swatch -->
30+
<input type="hidden" class="cj-colorpicker" value="linear-gradient(red, blue)" />
31+
32+
<!-- main script to load -->
33+
<script type="text/javascript" id="cj-colorpicker" src="js/cj-color.min.js"></script>
34+
```
35+
36+
```js
37+
// initial call with custom settings and their defaults
38+
window.advColorPicker( {
39+
// "full" = all controls, "single" = only color controls (no gradients)
40+
mode: 'full',
41+
42+
// the size of the color picker swatches
43+
size: 24,
44+
45+
// the color pickjer swatch skin, "classic" or "light"
46+
skin: 'classic',
47+
48+
// optional color for the modal background
49+
modalBgColor: 'rgba(0,0,0,0.5)',
50+
51+
// optional id attribute to to apply to the editor's outermost wrapper
52+
editorId: null,
53+
54+
// allow multi-color stops in output
55+
// multi-color stops allow for condensed output but are not supported in Edge
56+
multiStops: true,
57+
58+
// allow conic gradients (only supported in webkit browsers)
59+
conic: true,
60+
61+
// show a warning note for conic gradients (if conic is enabled)
62+
conicNote: false,
63+
64+
// show the bar at the bottom of the screen displaying the final output value
65+
outputBar: false,
66+
67+
// set the value of your input when a color is changed
68+
onColorChange: ( input, color ) => input.value = color,
69+
70+
// your default and/or custom color presets
71+
colorPresets: { defaults: [], custom: [] },
72+
73+
// your default and/or gradient presets
74+
gradientPresets: { defaults: [], custom: [] },
75+
76+
// your save/delete preset callback function
77+
onSaveDeletePreset,
78+
} );
79+
```
80+
81+
## data-attr options for input fields
82+
* **type** - "hidden" or "text" required
83+
* **class** - must match the "inputClass" const inside the index.js source file (currently: "cj-colorpicker")
84+
* **value** - any valid CSS color (an empty value will translate to "transparent")
85+
* **data-mode** - "single" (only color controls) or "full" (colors + gradient controls) - default: "full"
86+
* **data-size** - the width/height of the swatch - default: "24"
87+
* **data-skin** - "classic" or "light", the swatch skin - default: "classic"
88+
```html
89+
<input
90+
type="hidden"
91+
class="cj-colorpicker"
92+
value="linear-gradient(blue, red)"
93+
data-mode="full"
94+
data-size="24"
95+
data-skin="classic"
96+
/>
97+
```
98+
99+
## Example "onColorChange" callback
100+
```js
101+
const onColorChange = ( input, color ) => input.value = color;
102+
```
103+
104+
## Example "onSaveDeletePreset" callback
105+
```js
106+
const onSaveDeletePreset = ( {
107+
action, // "save" or "delete"
108+
groupChanged, // "color" or "gradient"
109+
colorPresets, // the current custom color presets array
110+
gradientPresets, // the current custom gradient presets array
111+
} ) => {
112+
// example saving to local storage
113+
window.localStorage.setItem( 'presets', JSON.stringify( {
114+
colorPresets,
115+
gradientPresets,
116+
}));
117+
};
118+
```
119+
120+
## Link to the Demo and open the editor automatically with a custom value
121+
```
122+
// encode the value beforehand via encodeURIComponent()
123+
http://www.codingjack.com/advanced-color-picker/?open=true&value=linear-gradient(blue%2C%20red)
124+
```
125+
126+
## Editing JS/SCSS source files
127+
```
128+
npm install
129+
npm run watch
130+
npm run build
131+
```
132+
133+
## Built With / Techology Used
134+
135+
* [React](https://www.npmjs.com/package/react)
136+
* [SASS](https://www.npmjs.com/package/sass)
137+
* [Babel](https://www.npmjs.com/package/@babel/core)
138+
* [Webpack](https://www.npmjs.com/package/webpack)
139+
* [ESLint](https://www.npmjs.com/package/eslint)
140+
* [core-js](https://www.npmjs.com/package/core-js)
141+
* [array-move](https://www.npmjs.com/package/array-move)
142+
* [color-convert](https://github.com/Qix-/color-convert)
143+
* [React Sortable HOC](https://www.npmjs.com/package/react-sortable-hoc)
144+
* [Material Icons](https://www.npmjs.com/package/material-icons)
145+
146+
## Authors
147+
148+
* **Jason McElwaine** - *Initial work* - [CodingJack](http://www.codingjack.com)
149+
150+
## License
151+
152+
* The original work in this project is licensed under [MIT](https://opensource.org/licenses/MIT)
153+
* All dependencies and cited technology above excluding Material Icons is licensed under [MIT](https://opensource.org/licenses/MIT)
154+
* [Material Icons](https://www.npmjs.com/package/material-icons) is licensed under [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0)
155+
156+
## Considerations
157+
158+
If used in cases where all browsers must be accounted for, disable the "multiStops" and "conic" options.

‎advanced_color_picker.zip‎

139 KB
Binary file not shown.

‎dist/index.html‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -154,42 +154,16 @@
154154
onSaveDeletePreset,
155155
} );
156156
</script>
157-
158-
<script type="text/javascript">
159-
// Example where the page content might change over time:
160-
const pageContentChange = () => {
161-
/*
162-
* if you have a new input element that needs to be converted to a swatch,
163-
* simply call the "advColorPicker" function again
164-
* (no cleanup functions need to be called before changing out your page's content)
165-
*/
166-
167-
/*
168-
document.body.innerHTML = '<input type="hidden" class="cj-colorpicker" value="#8E8E93" />';
169-
window.advColorPicker(); // new settings can also be passed like above it desired
170-
*/
171-
172-
// or call "advColorPicker" again after adding a new input element to the page
173-
const input = document.createElement( 'input' );
174-
input.type = 'hidden';
175-
input.className = 'cj-colorpicker';
176-
input.value = 'green';
177-
document.body.appendChild(input);
178-
window.advColorPicker(); // new settings can also be passed like above it desired
179-
};
180-
</script>
181157

182158
<!--
183-
Or if you choose to omit the "onColorChange" callback in the "init" function,
159+
Or if you choose to omit the "onColorChange" callback in the "advColorPicker" settings,
184160
you can update using input's value using one of the following examples:
185161
-->
186162
<script type="text/javascript">
187163
// document.body.addEventListener('ColorChange', e => e.detail.input.value = e.detail.color);
188164
</script>
189165

190-
<!--
191-
And an alternative for custom preset save/delete callbacks
192-
-->
166+
<!-- An alternative hook for custom preset save/delete callbacks -->
193167
<script type="text/javascript">
194168
/*
195169
document.body.addEventListener('SaveDeleteColorPreset', e => {
@@ -209,8 +183,26 @@
209183
*/
210184
</script>
211185

186+
<!-- Example where the page content might change over time -->
187+
<script type="text/javascript">
188+
const pageContentChange = () => {
189+
/*
190+
* if you have a new input element that needs to be converted to a swatch,
191+
* simply call the "advColorPicker" function again
192+
* (no cleanup functions need to be called before changing out your page's content)
193+
*/
194+
195+
const input = document.createElement( 'input' );
196+
input.type = 'hidden';
197+
input.className = 'cj-colorpicker';
198+
input.value = 'green';
199+
document.body.appendChild(input);
200+
window.advColorPicker(); // new settings can also be passed like above it desired
201+
};
202+
</script>
203+
212204
<!--
213-
auto open example with a custom value, both passed as url params
205+
"auto open" the editor example with a custom value, both passed as url params
214206
color values passed need to be encoded via "encodeURIComponent()" beforehand
215207
Example: http://www.site.com/?open=true&value=linear-gradient(blue%2C%20red)
216208
-->

0 commit comments

Comments
 (0)