|
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 IE < 8 |
|
20 if ( $.browser.msie && parseInt( $.browser.version, 10 ) < 8 ) |
|
21 return; |
|
22 var self = this; |
|
23 var el = self.element; |
|
24 $.extend( self.options, el.data() ); |
|
25 |
|
26 self.initialValue = el.val(); |
|
27 |
|
28 // Set up HTML structure, hide things |
|
29 el.addClass( 'wp-color-picker' ).hide().wrap( _wrap ); |
|
30 self.wrap = el.parent(); |
|
31 self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( "title", wpColorPickerL10n.pick ).attr( "data-current", wpColorPickerL10n.current ); |
|
32 self.pickerContainer = $( _after ).insertAfter( el ); |
|
33 self.button = $( _button ); |
|
34 |
|
35 if ( self.options.defaultColor ) |
|
36 self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString ); |
|
37 else |
|
38 self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear ); |
|
39 |
|
40 el.wrap('<span class="wp-picker-input-wrap" />').after(self.button); |
|
41 |
|
42 el.iris( { |
|
43 target: self.pickerContainer, |
|
44 hide: true, |
|
45 width: 255, |
|
46 mode: 'hsv', |
|
47 palettes: self.options.palettes, |
|
48 change: function( event, ui ) { |
|
49 self.toggler.css( { backgroundColor: ui.color.toString() } ); |
|
50 // check for a custom cb |
|
51 if ( $.isFunction( self.options.change ) ) |
|
52 self.options.change.call( this, event, ui ); |
|
53 } |
|
54 } ); |
|
55 el.val( self.initialValue ); |
|
56 self._addListeners(); |
|
57 if ( ! self.options.hide ) |
|
58 self.toggler.click(); |
|
59 }, |
|
60 _addListeners: function() { |
|
61 var self = this; |
|
62 |
|
63 self.toggler.click( function( event ){ |
|
64 event.stopPropagation(); |
|
65 self.element.toggle().iris( 'toggle' ); |
|
66 self.button.toggleClass('hidden'); |
|
67 self.toggler.toggleClass( 'wp-picker-open' ); |
|
68 |
|
69 // close picker when you click outside it |
|
70 if ( self.toggler.hasClass( 'wp-picker-open' ) ) |
|
71 $( "body" ).on( 'click', { wrap: self.wrap, toggler: self.toggler }, self._bodyListener ); |
|
72 else |
|
73 $( "body" ).off( 'click', self._bodyListener ); |
|
74 }); |
|
75 |
|
76 self.element.change(function( event ) { |
|
77 var me = $(this), |
|
78 val = me.val(); |
|
79 // Empty = clear |
|
80 if ( val === '' || val === '#' ) { |
|
81 self.toggler.css('backgroundColor', ''); |
|
82 // fire clear callback if we have one |
|
83 if ( $.isFunction( self.options.clear ) ) |
|
84 self.options.clear.call( this, event ); |
|
85 } |
|
86 }); |
|
87 |
|
88 // open a keyboard-focused closed picker with space or enter |
|
89 self.toggler.on('keyup', function( e ) { |
|
90 if ( e.keyCode === 13 || e.keyCode === 32 ) { |
|
91 e.preventDefault(); |
|
92 self.toggler.trigger('click').next().focus(); |
|
93 } |
|
94 }); |
|
95 |
|
96 self.button.click( function( event ) { |
|
97 var me = $(this); |
|
98 if ( me.hasClass( 'wp-picker-clear' ) ) { |
|
99 self.element.val( '' ); |
|
100 self.toggler.css('backgroundColor', ''); |
|
101 if ( $.isFunction( self.options.clear ) ) |
|
102 self.options.clear.call( this, event ); |
|
103 } else if ( me.hasClass( 'wp-picker-default' ) ) { |
|
104 self.element.val( self.options.defaultColor ).change(); |
|
105 } |
|
106 }); |
|
107 }, |
|
108 _bodyListener: function( event ) { |
|
109 if ( ! event.data.wrap.find( event.target ).length ) |
|
110 event.data.toggler.click(); |
|
111 }, |
|
112 // $("#input").wpColorPicker('color') returns the current color |
|
113 // $("#input").wpColorPicker('color', '#bada55') to set |
|
114 color: function( newColor ) { |
|
115 if ( newColor === undef ) |
|
116 return this.element.iris( "option", "color" ); |
|
117 |
|
118 this.element.iris( "option", "color", newColor ); |
|
119 }, |
|
120 //$("#input").wpColorPicker('defaultColor') returns the current default color |
|
121 //$("#input").wpColorPicker('defaultColor', newDefaultColor) to set |
|
122 defaultColor: function( newDefaultColor ) { |
|
123 if ( newDefaultColor === undef ) |
|
124 return this.options.defaultColor; |
|
125 |
|
126 this.options.defaultColor = newDefaultColor; |
|
127 } |
|
128 } |
|
129 |
|
130 $.widget( 'wp.wpColorPicker', ColorPicker ); |
|
131 }( jQuery ) ); |