-
Notifications
You must be signed in to change notification settings - Fork 18
/
color-picker.ts
86 lines (77 loc) · 2.3 KB
/
color-picker.ts
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
/**
* Espilon Color Picker Module
*/
export class EpsilonColorPicker {
/**
* Context
*/
context: JQuery | any;
/**
* Control
*/
control: any;
/**
* Settings array
*/
settings: {
changeDelay: any,
theme: string,
change: any,
format: string,
opacity: boolean
};
/**
* Color Picker instance
*/
instance: JQuery | any;
/**
*
* @param {} control
*/
public constructor( control: { container: JQuery, setting: void, params: { value: number, id: string } } ) {
const self = this;
let clear: JQuery;
this.control = control;
this.context = jQuery( control.container ).find( '.epsilon-color-picker' );
this.settings = {
changeDelay: 500,
theme: 'default',
change: this.changePallete,
format: 'rgb',
opacity: true,
};
if ( 'function' !== typeof jQuery.fn.minicolors ) {
return;
}
if ( '' !== this.context.attr( 'placeholder' ) ) {
this.context.defaultValue = this.context.attr( 'placeholder' );
}
if ( this.control.hasOwnProperty( 'params' ) && this.control.params.hasOwnProperty( 'mode' ) && 'rgba' === this.control.params.mode ) {
this.settings.format = 'rgb';
this.settings.opacity = true;
}
this.context.minicolors( this.settings );
clear = this.context.parents( '.customize-control-epsilon-color-picker' ).find( 'a' );
if ( ! clear.length ) {
clear = this.context.parents( '.repeater-field-epsilon-color-picker' ).find( 'a' );
}
clear.on( 'click', function( e ) {
e.preventDefault();
self.instance = jQuery( this ).parents( '.customize-control-epsilon-color-picker' ).find( 'input.epsilon-color-picker' );
if ( ! self.instance.length ) {
self.instance = jQuery( this ).parents( '.repeater-field-epsilon-color-picker' ).find( 'input.epsilon-color-picker' );
}
self.instance.minicolors( 'value', jQuery( this ).attr( 'data-default' ) );
self.instance.trigger( 'change' );
} );
}
/**
* Real time changes to the "pallete"
*
* @param value
* @param opacity
*/
public changePallete( value: any, opacity: any ) {
jQuery( '.epsilon-color-scheme-selected' ).find( '*[data-field-id="' + jQuery( this ).attr( 'data-customize-setting-link' ) + '"]' ).css( 'background-color', value );
}
}