1+ < html >
2+ < head >
3+ < meta charset ="utf-8 " />
4+ < meta name ="viewport " content ="width=device-width, initial-scale=1 ">
5+ < style >
6+ html ,
7+ body {
8+ height : 100% ;
9+ }
10+ body {
11+ font-size : 18px ;
12+ font-family : 'Roboto' , sans-serif;
13+ margin : 0 ;
14+ }
15+ form {
16+ margin : 0 ;
17+ }
18+ .main {
19+ display : flex;
20+ align-items : center;
21+ justify-content : center;
22+ height : 100% ;
23+ }
24+ </ style >
25+ </ head >
26+ < body >
27+ < div class ="main ">
28+ < form autocomplete ="off ">
29+ <!-- basic input element -->
30+ < input type ="hidden " class ="cj-colorpicker " data-mode ="single " value ="linear-gradient(160deg, #FF057C, #7C64D5, #4CC3FF) " />
31+ < input type ="hidden " class ="cj-colorpicker " />
32+ <!--
33+ type:
34+ "hidden" or "text" required
35+ class:
36+ must match the "inputClass" const inside the index.js source file (currently: "cj-colorpicker")
37+ value:
38+ any valid CSS color (an empty value will translate to "transparent")
39+ data-mode:
40+ "single" (only color controls) or "full" (colors + gradient controls) -- default: "full"
41+ data-size:
42+ the width/height of the swatch -- default: "24"
43+ data-skin:
44+ "classic" or "light", the swatch skin -- default: "classic"
45+ -->
46+ <!--
47+ <input
48+ type="hidden"
49+ class="cj-colorpicker"
50+ value="linear-gradient(blue, red)"
51+ data-mode="full"
52+ data-size="24"
53+ data-skin="classic"
54+ />
55+ -->
56+ </ form >
57+ </ div >
58+
59+ <!-- include the main script. The id of "cj-colorpicker" is mandatory -->
60+ < script id ="cj-colorpicker " type ="text/javascript " src ="js/cj-color.min.js "> </ script >
61+
62+ < script type ="text/javascript ">
63+ // example managing custom presets from local storage
64+ let presets = window . localStorage . getItem ( 'presets' ) ;
65+ let colorPresets = { custom : [ ] } ;
66+ let gradientPresets = { custom : [ ] } ;
67+
68+ // maybe override the built-in default presets as well
69+ /*
70+ colorPresets.defaults = ['red', 'blue'];
71+ gradientPresets.defaults = ['linear-gradient(white, black)', radial-gradient(red, blue)];
72+ */
73+
74+ if ( presets ) {
75+ try {
76+ presets = JSON . parse ( presets ) ;
77+ } catch ( e ) {
78+ presets = null ;
79+ }
80+ if ( presets ) {
81+ const {
82+ colorPresets : customColors ,
83+ gradientPresets : customGradients ,
84+ } = presets ;
85+
86+ colorPresets . custom = customColors ;
87+ gradientPresets . custom = customGradients ;
88+ }
89+ }
90+
91+ // callback for when custom presets are saved or deleted
92+ const onSaveDeletePreset = ( {
93+ action, // "save" or "delete"
94+ groupChanged, // "color" or "gradient"
95+ colorPresets, // the current custom color presets array
96+ gradientPresets, // the current custom gradient presets array
97+ } ) => {
98+ window . localStorage . setItem ( 'presets' , JSON . stringify ( {
99+ colorPresets,
100+ gradientPresets,
101+ } ) ) ;
102+ } ;
103+
104+ // set the value of your input field when the color changes
105+ // (the App DOES NOT write to your input field intentionally)
106+ const onColorChange = ( input , color ) => input . value = color ;
107+
108+ // initial call with custom settings
109+ window . advColorPicker ( {
110+ // "full" = all controls, "single" = only color controls (no gradients) -- default: "full"
111+ mode : 'full' ,
112+
113+ // the size of the color picker swatches -- default: 24
114+ size : 24 ,
115+
116+ // the color pickjer swatch skin, "classic" or "light" -- default: "classic"
117+ skin : 'classic' ,
118+
119+ // allow multi-color stops in output -- default: true
120+ // multi-color stops allow for condensed output but are not supported in Edge
121+ multiStops : true ,
122+
123+ // allow conic gradients (only supported in webkit browsers) -- default: true
124+ conic : true ,
125+
126+ // show the default warning note for conic gradients (if conic is enabled) -- default: false
127+ conicNote : false ,
128+
129+ // show the bar at the bottom of the screen displaying the final output value -- default: true
130+ outputBar : true ,
131+
132+ // color change callback function (see above)
133+ onColorChange,
134+
135+ // default and/or custom color presets: { defaults: [], custom: [] }
136+ colorPresets,
137+
138+ // default and/or gradient presets: { defaults: [], custom: [] }
139+ gradientPresets,
140+
141+ // save/delete preset callback function (see above)
142+ onSaveDeletePreset,
143+ } ) ;
144+ </ script >
145+
146+ < script type ="text/javascript ">
147+ // Example where the page content might change over time:
148+ const pageContentChange = ( ) => {
149+ /*
150+ * if you have a new input element that needs to be converted to a swatch,
151+ * simply call the "advColorPicker" function again
152+ * (no cleanup functions need to be called before changing out your page's content)
153+ */
154+
155+ /*
156+ document.body.innerHTML = '<input type="hidden" class="cj-colorpicker" value="#8E8E93" />';
157+ window.advColorPicker(); // new settings can also be passed like above it desired
158+ */
159+
160+ // or call "advColorPicker" again after adding a new input element to the page
161+ const input = document . createElement ( 'input' ) ;
162+ input . type = 'hidden' ;
163+ input . className = 'cj-colorpicker' ;
164+ input . value = 'green' ;
165+ document . body . appendChild ( input ) ;
166+ window . advColorPicker ( ) ; // new settings can also be passed like above it desired
167+ } ;
168+ </ script >
169+
170+ <!--
171+ Or if you choose to omit the "onColorChange" callback in the "init" function,
172+ you can update using input's value using one of the following examples:
173+ -->
174+ < script type ="text/javascript ">
175+ // document.body.addEventListener('ColorChange', e => e.detail.input.value = e.detail.color);
176+ </ script >
177+
178+ <!--
179+ And an alternative for custom preset save/delete callbacks
180+ -->
181+ < script type ="text/javascript ">
182+ /*
183+ document.body.addEventListener('SaveDeleteColorPreset', e => {
184+ const {
185+ action, // "save" or "delete"
186+ groupChanged, // "color" or "gradient"
187+ colorPresets, // the current custom color presets Array
188+ gradientPresets, // the current custom gradient presets Array
189+ } = e.detail;
190+
191+ // example saving to local storage
192+ window.localStorage.setItem('presets', JSON.stringify({
193+ colorPresets,
194+ gradientPresets,
195+ }));
196+ } );
197+ */
198+ </ script >
199+
200+ <!--
201+ auto open example with a custom value, both passed as url params
202+ color values passed need to be encoded via "encodeURIComponent()" beforehand
203+ -->
204+ < script type ="text/javascript ">
205+ window . addEventListener ( 'load' , ( ) => {
206+ const urlParams = new URLSearchParams ( window . location . search ) ;
207+ const open = urlParams . get ( 'open' ) ;
208+ const value = urlParams . get ( 'value' ) ;
209+ if ( open || value ) {
210+ // targeting the first input
211+ const input = document . querySelector ( '.cj-colorpicker' ) ;
212+ if ( value ) {
213+ input . value = value ;
214+ }
215+ if ( open === 'true' ) {
216+ input . click ( ) ;
217+ }
218+ }
219+ } ) ;
220+ </ script >
221+ </ body >
222+ </ html >
0 commit comments