Skip to content

Commit 0dd5125

Browse files
AlberplzAlberplz
committed
Update to 1.3
New options added: cpSaveClickOutside, cpOKButton, cpOKButtonClass, cpOKButtonText, cpDialogDisplay, cpAlphaChannel #13, #15, #32, #42, #44, #45, #46
1 parent b6a90a8 commit 0dd5125

26 files changed

+878
-390
lines changed

‎examples/app/app.component.ts

+22-4
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,14 @@ export class Cmyk {
1111
})
1212

1313
export class AppComponent {
14-
constructor(private cpService: ColorPickerService) { }
14+
15+
constructor(private cpService: ColorPickerService) {
16+
this.arrayColors['color'] = '#2883e9';
17+
this.arrayColors['color2'] = '#e920e9';
18+
this.arrayColors['color3'] = 'rgb(255,245,0)';
19+
this.arrayColors['color4'] = 'rgb(236,64,64)';
20+
this.arrayColors['color5'] = 'rgba(45,208,45,1)';
21+
}
1522

1623
private color: string = '#2889e9';
1724
private color2: string = "hsla(300,82%,52%)";
@@ -21,10 +28,17 @@ export class AppComponent {
2128
private color6: string = "#1973c0";
2229
private color7: string = "#f200bd";
2330
private color8: string = "#a8ff00";
24-
private color9: string = "#3b4da1";
25-
private color10: string = "#f03164";
26-
private color11: string = "#00f";
31+
private color9: string = "#278ce2";
32+
private color10: string = "#0a6211";
33+
private color11: string = "#f2ff00";
2734
private color12: string = "#f200bd";
35+
private color13: string = "#1973c0";
36+
private color14: string = "#a8ff00";
37+
private color15: string = "#a51ad6a3";
38+
39+
private arrayColors: any = {};
40+
private selectedColor: string = 'color';
41+
2842
private toggle: boolean;
2943
private toggle2: boolean;
3044
private lastColor = '#ff0';
@@ -44,4 +58,8 @@ export class AppComponent {
4458
cmyk.k = k;
4559
return cmyk;
4660
}
61+
62+
onChangeColorHex8(color: string): string {
63+
return this.cpService.outputFormat(this.cpService.stringToHsva(color, true), 'rgba', true);
64+
}
4765
}

‎examples/app/demo.html

+188-58
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,11 @@ <h4><b>by Alberto Pujante</b></h4>
4646
<div class="col-md-5">
4747
<input [(colorPicker)]="color3"
4848
[style.background]="color3"
49-
[value]="color3"
49+
[value]="color3"
5050
[cpOutputFormat]="'rgba'"/><br><br>
5151
<input [(colorPicker)]="color4"
5252
[style.background]="color4"
53-
[value]="color4"
53+
[value]="color4"
5454
[cpOutputFormat]="'hsla'"/>
5555
</div>
5656
<div class="col-md-7">
@@ -130,17 +130,39 @@ <h4><b>by Alberto Pujante</b></h4>
130130
[style.background]="color8"
131131
[value]="color8"
132132
[cpCancelButton]="true"
133-
[cpCancelButtonClass]= "'btn btn-primary btn-xs cp-cancel-button-class'"/>
133+
[cpCancelButtonClass]= "'btn btn-primary btn-xs'"/>
134134
</div>
135135
<div class="col-md-7">
136-
<p>Change cancel button class, default is 'cp-cancel-button-class' and only sets button position,<br>
137-
in this example we are using a bootstrap button:</p>
136+
<p>Change cancel button class, in this example we are using a bootstrap button:</p>
138137
<pre>
139138
&lt;input [(colorPicker)]="color"
140139
[style.background]="color"
141140
[value]="color"
142141
[cpCancelButton]="true"
143-
[cpCancelButtonClass]= "'btn btn-primary btn-xs cp-cancel-button-class'"/&gt;
142+
[cpCancelButtonClass]= "'btn btn-primary btn-xs'"/&gt;
143+
</pre>
144+
</div>
145+
</div>
146+
147+
<hr>
148+
<div class="row" >
149+
<div class="col-md-5" >
150+
<input [(colorPicker)]="color9"
151+
[style.background]="color9"
152+
[value]="color9"
153+
[cpOKButton]="true"
154+
[cpSaveClickOutside]="false"
155+
[cpOKButtonClass]= "'btn btn-primary btn-xs'"/>
156+
</div>
157+
<div class="col-md-7">
158+
<p>Show OK button:</p>
159+
<pre>
160+
&lt;input [(colorPicker)]="color"
161+
[style.background]="color"
162+
[value]="color"
163+
[cpOKButton]="true"
164+
[cpSaveClickOutside]="false"
165+
[cpOKButtonClass]= "'btn btn-primary btn-xs'"/&gt;
144166
</pre>
145167
</div>
146168
</div>
@@ -149,9 +171,9 @@ <h4><b>by Alberto Pujante</b></h4>
149171
<div class="row">
150172
<div class="col-md-5">
151173

152-
<input [colorPicker]="color9"
153-
(colorPickerChange)="cmyk=onChangeColor($event);color9=$event"
154-
[style.background]="color9"/>
174+
<input [colorPicker]="color10"
175+
(colorPickerChange)="cmyk=onChangeColor($event);color10=$event"
176+
[style.background]="color10"/>
155177

156178
<div class="clearfix"></div>
157179

@@ -194,48 +216,21 @@ <h4><b>by Alberto Pujante</b></h4>
194216
<hr>
195217
<div class="row">
196218
<div class="col-md-5">
197-
<input [(colorPicker)]="color10" [style.background]="color10" [cpPresetColors]="['#fff', '#000']"/>
219+
<input [(colorPicker)]="color11"
220+
[style.background]="color11"
221+
[cpPresetColors]="['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']"/>
198222
</div>
199223
<div class="col-md-7">
200224
<p>With preset colors:</p>
201225
<pre>
202226
&lt;input [(colorPicker)]="color"
203227
[style.background]="color"
204-
[cpPresetColors]="['#fff', '#000']"/&gt;
228+
[cpPresetColors]="['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']"/&gt;
205229
</pre>
206230
</div>
207231
</div>
208232

209233
<hr>
210-
<div class="row">
211-
<div id="color-comparator" class="col-md-5">
212-
<button (click)="toggle=true;lastColor=color11"
213-
[style.background]="lastColor"
214-
#ignoredElement></button>
215-
<input [(colorPicker)]="color11"
216-
[(cpToggle)]="toggle"
217-
[style.background]="color11"
218-
[cpIgnoredElements]="[ignoredElement]"/>
219-
<div class="clearfix"></div>
220-
<br>
221-
<div><b>Toggle status: {{toggle}}</b></div>
222-
</div>
223-
<div class="col-md-7">
224-
<p>Control color picker dialog with cpToggle:</p>
225-
<pre>
226-
&lt;button (click)="toggle=true;lastColor=color"
227-
[style.background]="lastColor"
228-
#ignoredElement&gt;&lt;/button&gt;
229-
230-
&lt;input [(colorPicker)]="color"
231-
[(cpToggle)]="toggle"
232-
[style.background]="color"
233-
[cpIgnoredElements]="[ignoredElement]"/&gt;
234-
</pre>
235-
</div>
236-
</div>
237-
238-
<hr>
239234
<div class="row">
240235
<div class="col-md-5">
241236
<input #ignoredInput [(colorPicker)]="color12"
@@ -261,6 +256,106 @@ <h4><b>by Alberto Pujante</b></h4>
261256
</pre>
262257
</div>
263258
</div>
259+
260+
<hr>
261+
<div class="row">
262+
<div class="col-md-5">
263+
<input [(colorPicker)]="color13"
264+
[style.background]="color13"
265+
[cpAlphaChannel]="'disabled'"
266+
[value]="color13"/>
267+
<br>
268+
<input [(colorPicker)]="color14"
269+
[style.background]="color14"
270+
[cpAlphaChannel]="'hex8'"
271+
[cpOutputFormat]="'rgba'"
272+
[value]="color14"/>
273+
<br>
274+
<input [colorPicker]="color15"
275+
(colorPickerChange)="rgbaText=onChangeColorHex8($event);color15=$event"
276+
[style.background]="rgbaText"
277+
[cpAlphaChannel]="'hex8'"
278+
[cpOutputFormat]="'hex'"
279+
[value]="color15"/>
280+
</div>
281+
<div class="col-md-7">
282+
<p>Change alpha channel behaviour:</p>
283+
<pre>
284+
&lt;input [(colorPicker)]="color"
285+
[style.background]="color"
286+
[cpAlphaChannel]="'disabled'"
287+
[value]="color"/&gt;
288+
289+
&lt;input [(colorPicker)]="color"
290+
[style.background]="color"
291+
[cpAlphaChannel]="'hex8'"
292+
[cpOutputFormat]="'rgba'"
293+
[value]="color"/&gt;
294+
295+
&lt;input [colorPicker]="color"
296+
(colorPickerChange)="rgbaText=onChangeColorHex8($event);color=$event"
297+
[style.background]="rgbaText"
298+
[cpAlphaChannel]="'hex8'"
299+
[value]="color"/&gt;
300+
</pre>
301+
</div>
302+
</div>
303+
304+
<hr>
305+
<div class="row" style="height: 320px">
306+
307+
<div class="col-md-3">
308+
<span [(colorPicker)]="arrayColors[selectedColor]"
309+
[cpDialogDisplay]="'inline'"
310+
[style.background]="arrayColors[selectedColor]"
311+
[cpCancelButtonClass]= "'btn btn-primary btn-xs'"
312+
[cpCancelButton]="true"
313+
[cpToggle]="true">
314+
</span>
315+
</div>
316+
317+
<div class="col-md-2">
318+
319+
<div class="array-colors-element"
320+
[style.background]="arrayColors['color']"
321+
(click)="selectedColor='color'"></div>
322+
323+
<div class="array-colors-element"
324+
[style.background]="arrayColors['color2']"
325+
(click)="selectedColor='color2'"></div>
326+
327+
<div class="array-colors-element"
328+
[style.background]="arrayColors['color3']"
329+
(click)="selectedColor='color3'"></div>
330+
331+
<div class="array-colors-element"
332+
[style.background]="arrayColors['color4']"
333+
(click)="selectedColor='color4'"></div>
334+
335+
<div class="array-colors-element"
336+
[style.background]="arrayColors['color5']"
337+
(click)="selectedColor='color5'"></div>
338+
339+
</div>
340+
341+
<div class="col-md-7">
342+
<p>Show the dialog permanently: </p>
343+
<pre>
344+
&lt;span [(colorPicker)]="arrayColors[selectedColor]"
345+
[cpType]="'fixed'"
346+
[style.background]="arrayColors[selectedColor]"
347+
[cpToggle]="true"&gt;&lt;/span&gt;
348+
349+
&lt;div [style.background]="arrayColors['color']"
350+
(click)="selectedColor='color'"&gt;&lt;/div&gt;
351+
352+
&lt;div [style.background]="arrayColors['color2']"
353+
(click)="selectedColor='color2'"&gt;&lt;/div&gt;
354+
355+
...
356+
</pre>
357+
</div>
358+
</div>
264359

265360
<hr>
266361
<br>
@@ -300,13 +395,6 @@ <h4><b>by Alberto Pujante</b></h4>
300395
Dialog position is calculated relative to the dialog (false) or relative to the dialog arrow (true).
301396
</td>
302397
</tr>
303-
<tr>
304-
<td>cpCancelButton</td>
305-
<td>
306-
<b>false</b>, true<br>
307-
When the user cancels the initial color is restored.
308-
</td>
309-
</tr>
310398
<tr>
311399
<td>cpWidth</td>
312400
<td>
@@ -322,17 +410,36 @@ <h4><b>by Alberto Pujante</b></h4>
322410
</td>
323411
</tr>
324412
<tr>
325-
<td>cpCancelButtonClass</td>
413+
<td>cpSaveClickOutside</td>
414+
<td>
415+
<b>true</b>, false<br>
416+
If true the initial color is restored when user clicks outside.
417+
</td>
418+
</tr>
419+
<tr>
420+
<td>cpOKButton</td>
326421
<td>
327-
<b>'cancel-button-class'</b><br>
328-
Default class only sets button position:
329-
<pre>
330-
.cp-cancel-button-class&#123;
331-
position:absolute;
332-
top: 275px;
333-
left: 161px;
334-
&#125;
335-
</pre>
422+
<b>false</b>, true<br>
423+
Shows the Ok button. Saves the selected color.
424+
</td>
425+
</tr>
426+
<tr>
427+
<td>cpOKButtonText</td>
428+
<td>
429+
<b>'OK'</b>
430+
</td>
431+
</tr>
432+
<tr>
433+
<td>cpOKButtonClass</td>
434+
<td>
435+
Class to customize the OK button.
436+
</td>
437+
</tr>
438+
<tr>
439+
<td>cpCancelButton</td>
440+
<td>
441+
<b>false</b>, true<br>
442+
Shows the Cancel button. Cancel the selected color.
336443
</td>
337444
</tr>
338445
<tr>
@@ -341,6 +448,12 @@ <h4><b>by Alberto Pujante</b></h4>
341448
<b>'Cancel'</b>
342449
</td>
343450
</tr>
451+
<tr>
452+
<td>cpCancelButtonClass</td>
453+
<td>
454+
Class to customize the Cancel button.
455+
</td>
456+
</tr>
344457
<tr>
345458
<td>cpFallbackColor</td>
346459
<td>
@@ -376,6 +489,23 @@ <h4><b>by Alberto Pujante</b></h4>
376489
Array of HTML elements that will be ignored by the color picker when they are clicked.
377490
</td>
378491
</tr>
492+
<tr>
493+
<td>cpDialogDisplay</td>
494+
<td>
495+
<b>'popup'</b>, 'inline'<br>
496+
popup: dialog is showed when user clicks in the directive.<br>
497+
inline: dialog is showed permanently. You can show/hide the dialog with cpToggle.
498+
</td>
499+
</tr>
500+
<tr>
501+
<td>cpAlphaChannel</td>
502+
<td>
503+
<b>'hex6'</b>, 'hex8', 'disabled'<br>
504+
hex6: alpha channel is not allowed in hexadecimal values.<br>
505+
hex8: alpha channel is allowed in hexadecimal values.<br>
506+
disabled: alpha channel disabled.<br>
507+
</td>
508+
</tr>
379509
</tbody>
380510
</table>
381511
</div>
@@ -384,4 +514,4 @@ <h4><b>by Alberto Pujante</b></h4>
384514
<footer class="footer">&copy; Alberto Pujante 2016 | <a href="https://github.com/Alberplz/angular2-color-picker">Angular2 Color Picker</a></footer>
385515
<br>
386516

387-
</div>
517+
</div>

0 commit comments

Comments
 (0)