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