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