|
5
|
1 |
/* global wpColorPickerL10n */ |
|
0
|
2 |
( function( $, undef ){ |
|
|
3 |
|
|
5
|
4 |
var ColorPicker, |
|
|
5 |
// html stuff |
|
|
6 |
_before = '<a tabindex="0" class="wp-color-result" />', |
|
0
|
7 |
_after = '<div class="wp-picker-holder" />', |
|
|
8 |
_wrap = '<div class="wp-picker-container" />', |
|
|
9 |
_button = '<input type="button" class="button button-small hidden" />'; |
|
|
10 |
|
|
|
11 |
// jQuery UI Widget constructor |
|
5
|
12 |
ColorPicker = { |
|
0
|
13 |
options: { |
|
|
14 |
defaultColor: false, |
|
|
15 |
change: false, |
|
|
16 |
clear: false, |
|
|
17 |
hide: true, |
|
5
|
18 |
palettes: true, |
|
|
19 |
width: 255, |
|
|
20 |
mode: 'hsv' |
|
0
|
21 |
}, |
|
|
22 |
_create: function() { |
|
|
23 |
// bail early for unsupported Iris. |
|
5
|
24 |
if ( ! $.support.iris ) { |
|
0
|
25 |
return; |
|
5
|
26 |
} |
|
|
27 |
|
|
|
28 |
var self = this, |
|
|
29 |
el = self.element; |
|
0
|
30 |
|
|
|
31 |
$.extend( self.options, el.data() ); |
|
|
32 |
|
|
5
|
33 |
// keep close bound so it can be attached to a body listener |
|
|
34 |
self.close = $.proxy( self.close, self ); |
|
|
35 |
|
|
0
|
36 |
self.initialValue = el.val(); |
|
|
37 |
|
|
|
38 |
// Set up HTML structure, hide things |
|
|
39 |
el.addClass( 'wp-color-picker' ).hide().wrap( _wrap ); |
|
|
40 |
self.wrap = el.parent(); |
|
5
|
41 |
self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current ); |
|
0
|
42 |
self.pickerContainer = $( _after ).insertAfter( el ); |
|
|
43 |
self.button = $( _button ); |
|
|
44 |
|
|
5
|
45 |
if ( self.options.defaultColor ) { |
|
0
|
46 |
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString ); |
|
5
|
47 |
} else { |
|
0
|
48 |
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear ); |
|
5
|
49 |
} |
|
0
|
50 |
|
|
5
|
51 |
el.wrap( '<span class="wp-picker-input-wrap" />' ).after(self.button); |
|
0
|
52 |
|
|
|
53 |
el.iris( { |
|
|
54 |
target: self.pickerContainer, |
|
5
|
55 |
hide: self.options.hide, |
|
|
56 |
width: self.options.width, |
|
|
57 |
mode: self.options.mode, |
|
0
|
58 |
palettes: self.options.palettes, |
|
|
59 |
change: function( event, ui ) { |
|
|
60 |
self.toggler.css( { backgroundColor: ui.color.toString() } ); |
|
|
61 |
// check for a custom cb |
|
5
|
62 |
if ( $.isFunction( self.options.change ) ) { |
|
0
|
63 |
self.options.change.call( this, event, ui ); |
|
5
|
64 |
} |
|
0
|
65 |
} |
|
|
66 |
} ); |
|
5
|
67 |
|
|
0
|
68 |
el.val( self.initialValue ); |
|
|
69 |
self._addListeners(); |
|
5
|
70 |
if ( ! self.options.hide ) { |
|
0
|
71 |
self.toggler.click(); |
|
5
|
72 |
} |
|
0
|
73 |
}, |
|
|
74 |
_addListeners: function() { |
|
|
75 |
var self = this; |
|
|
76 |
|
|
5
|
77 |
// prevent any clicks inside this widget from leaking to the top and closing it |
|
|
78 |
self.wrap.on( 'click.wpcolorpicker', function( event ) { |
|
0
|
79 |
event.stopPropagation(); |
|
|
80 |
}); |
|
|
81 |
|
|
5
|
82 |
self.toggler.click( function(){ |
|
|
83 |
if ( self.toggler.hasClass( 'wp-picker-open' ) ) { |
|
|
84 |
self.close(); |
|
|
85 |
} else { |
|
|
86 |
self.open(); |
|
|
87 |
} |
|
|
88 |
}); |
|
|
89 |
|
|
|
90 |
self.element.change( function( event ) { |
|
|
91 |
var me = $( this ), |
|
0
|
92 |
val = me.val(); |
|
|
93 |
// Empty = clear |
|
|
94 |
if ( val === '' || val === '#' ) { |
|
5
|
95 |
self.toggler.css( 'backgroundColor', '' ); |
|
0
|
96 |
// fire clear callback if we have one |
|
5
|
97 |
if ( $.isFunction( self.options.clear ) ) { |
|
0
|
98 |
self.options.clear.call( this, event ); |
|
5
|
99 |
} |
|
0
|
100 |
} |
|
|
101 |
}); |
|
|
102 |
|
|
|
103 |
// open a keyboard-focused closed picker with space or enter |
|
5
|
104 |
self.toggler.on( 'keyup', function( event ) { |
|
|
105 |
if ( event.keyCode === 13 || event.keyCode === 32 ) { |
|
|
106 |
event.preventDefault(); |
|
|
107 |
self.toggler.trigger( 'click' ).next().focus(); |
|
0
|
108 |
} |
|
|
109 |
}); |
|
|
110 |
|
|
|
111 |
self.button.click( function( event ) { |
|
5
|
112 |
var me = $( this ); |
|
0
|
113 |
if ( me.hasClass( 'wp-picker-clear' ) ) { |
|
|
114 |
self.element.val( '' ); |
|
5
|
115 |
self.toggler.css( 'backgroundColor', '' ); |
|
|
116 |
if ( $.isFunction( self.options.clear ) ) { |
|
0
|
117 |
self.options.clear.call( this, event ); |
|
5
|
118 |
} |
|
0
|
119 |
} else if ( me.hasClass( 'wp-picker-default' ) ) { |
|
|
120 |
self.element.val( self.options.defaultColor ).change(); |
|
|
121 |
} |
|
|
122 |
}); |
|
|
123 |
}, |
|
5
|
124 |
open: function() { |
|
|
125 |
this.element.show().iris( 'toggle' ).focus(); |
|
|
126 |
this.button.removeClass( 'hidden' ); |
|
|
127 |
this.toggler.addClass( 'wp-picker-open' ); |
|
|
128 |
$( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close ); |
|
|
129 |
}, |
|
|
130 |
close: function() { |
|
|
131 |
this.element.hide().iris( 'toggle' ); |
|
|
132 |
this.button.addClass( 'hidden' ); |
|
|
133 |
this.toggler.removeClass( 'wp-picker-open' ); |
|
|
134 |
$( 'body' ).off( 'click.wpcolorpicker', this.close ); |
|
0
|
135 |
}, |
|
|
136 |
// $("#input").wpColorPicker('color') returns the current color |
|
|
137 |
// $("#input").wpColorPicker('color', '#bada55') to set |
|
|
138 |
color: function( newColor ) { |
|
5
|
139 |
if ( newColor === undef ) { |
|
|
140 |
return this.element.iris( 'option', 'color' ); |
|
|
141 |
} |
|
0
|
142 |
|
|
5
|
143 |
this.element.iris( 'option', 'color', newColor ); |
|
0
|
144 |
}, |
|
|
145 |
//$("#input").wpColorPicker('defaultColor') returns the current default color |
|
|
146 |
//$("#input").wpColorPicker('defaultColor', newDefaultColor) to set |
|
|
147 |
defaultColor: function( newDefaultColor ) { |
|
5
|
148 |
if ( newDefaultColor === undef ) { |
|
0
|
149 |
return this.options.defaultColor; |
|
5
|
150 |
} |
|
0
|
151 |
|
|
|
152 |
this.options.defaultColor = newDefaultColor; |
|
|
153 |
} |
|
5
|
154 |
}; |
|
0
|
155 |
|
|
|
156 |
$.widget( 'wp.wpColorPicker', ColorPicker ); |
|
5
|
157 |
}( jQuery ) ); |