color-picker.js
5.34 KB
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
/* global wpColorPickerL10n */
( function( $, undef ){
var ColorPicker,
// html stuff
_before = '<a tabindex="0" class="wp-color-result" />',
_after = '<div class="wp-picker-holder" />',
_wrap = '<div class="wp-picker-container" />',
_button = '<input type="button" class="button button-small hidden" />';
// jQuery UI Widget constructor
ColorPicker = {
options: {
defaultColor: false,
change: false,
clear: false,
hide: true,
palettes: true,
width: 255,
mode: 'hsv',
type: 'full',
slider: 'horizontal'
},
_createHueOnly: function() {
var self = this,
el = self.element,
color;
// hide input
el.hide();
// max saturated color for hue to be obvious
color = 'hsl(' + el.val() + ', 100, 50)';
el.iris( {
mode: 'hsl',
type: 'hue',
hide: false,
color: color,
change: function( event, ui ) {
if ( $.isFunction( self.options.change ) ) {
self.options.change.call( this, event, ui );
}
},
width: self.options.width,
slider: self.options.slider
} );
},
_create: function() {
// bail early for unsupported Iris.
if ( ! $.support.iris ) {
return;
}
var self = this,
el = self.element;
$.extend( self.options, el.data() );
// hue-only gets created differently
if ( self.options.type === 'hue' ) {
return self._createHueOnly();
}
// keep close bound so it can be attached to a body listener
self.close = $.proxy( self.close, self );
self.initialValue = el.val();
// Set up HTML structure, hide things
el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
self.wrap = el.parent();
self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
self.pickerContainer = $( _after ).insertAfter( el );
self.button = $( _button );
if ( self.options.defaultColor ) {
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
} else {
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
}
el.wrap( '<span class="wp-picker-input-wrap" />' ).after(self.button);
el.iris( {
target: self.pickerContainer,
hide: self.options.hide,
width: self.options.width,
mode: self.options.mode,
palettes: self.options.palettes,
change: function( event, ui ) {
self.toggler.css( { backgroundColor: ui.color.toString() } );
// check for a custom cb
if ( $.isFunction( self.options.change ) ) {
self.options.change.call( this, event, ui );
}
}
} );
el.val( self.initialValue );
self._addListeners();
if ( ! self.options.hide ) {
self.toggler.click();
}
},
_addListeners: function() {
var self = this;
// prevent any clicks inside this widget from leaking to the top and closing it
self.wrap.on( 'click.wpcolorpicker', function( event ) {
event.stopPropagation();
});
self.toggler.click( function(){
if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
self.close();
} else {
self.open();
}
});
self.element.change( function( event ) {
var me = $( this ),
val = me.val();
// Empty = clear
if ( val === '' || val === '#' ) {
self.toggler.css( 'backgroundColor', '' );
// fire clear callback if we have one
if ( $.isFunction( self.options.clear ) ) {
self.options.clear.call( this, event );
}
}
});
// open a keyboard-focused closed picker with space or enter
self.toggler.on( 'keyup', function( event ) {
if ( event.keyCode === 13 || event.keyCode === 32 ) {
event.preventDefault();
self.toggler.trigger( 'click' ).next().focus();
}
});
self.button.click( function( event ) {
var me = $( this );
if ( me.hasClass( 'wp-picker-clear' ) ) {
self.element.val( '' );
self.toggler.css( 'backgroundColor', '' );
if ( $.isFunction( self.options.clear ) ) {
self.options.clear.call( this, event );
}
} else if ( me.hasClass( 'wp-picker-default' ) ) {
self.element.val( self.options.defaultColor ).change();
}
});
},
open: function() {
this.element.show().iris( 'toggle' ).focus();
this.button.removeClass( 'hidden' );
this.wrap.addClass( 'wp-picker-active' );
this.toggler.addClass( 'wp-picker-open' );
$( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
},
close: function() {
this.element.hide().iris( 'toggle' );
this.button.addClass( 'hidden' );
this.wrap.removeClass( 'wp-picker-active' );
this.toggler.removeClass( 'wp-picker-open' );
$( 'body' ).off( 'click.wpcolorpicker', this.close );
},
// $("#input").wpColorPicker('color') returns the current color
// $("#input").wpColorPicker('color', '#bada55') to set
color: function( newColor ) {
if ( newColor === undef ) {
return this.element.iris( 'option', 'color' );
}
this.element.iris( 'option', 'color', newColor );
},
//$("#input").wpColorPicker('defaultColor') returns the current default color
//$("#input").wpColorPicker('defaultColor', newDefaultColor) to set
defaultColor: function( newDefaultColor ) {
if ( newDefaultColor === undef ) {
return this.options.defaultColor;
}
this.options.defaultColor = newDefaultColor;
}
};
$.widget( 'wp.wpColorPicker', ColorPicker );
}( jQuery ) );