Skip to content

Commit 2a960ce

Browse files
author
Govind Kumar
authored
Merge pull request #7 from emgk/issue/6
Fixed WP 4.9 compatibilty issue.
2 parents 785a077 + 0154e4e commit 2a960ce

2 files changed

Lines changed: 214 additions & 55 deletions

File tree

‎includes/class-admin.php‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ public function veChangeStyle() {
4848
}
4949

5050
public function registerJSCSS() {
51-
wp_enqueue_style( 'wp-color-picker' );
5251
wp_enqueue_style( 'wp-color-picker' );
5352
wp_enqueue_script( 'wp-color-picker-alpha', WPVE_URL . '/js/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2.2' );
5453
}
@@ -83,7 +82,7 @@ public function veTextWidgetSetting() {
8382
</tr>
8483
<tr>
8584
<th scope="row"><?php echo __( 'Overlay Color','visual-text-editor' );?> </th>
86-
<td><input type="text" name="overlaycolor" data-alpha="true" id="overlaycolor" value="<?php echo esc_attr( get_option( 'overlaycolor' ) );?>"/><br/><span class="description"><?php echo __( 'Lightbox overlay color','visual-text-editor' );?> </span></td>
85+
<td><input type="text" name="overlaycolor" data-alpha="true" class="color-picker" id="overlaycolor" value="<?php echo esc_attr( get_option( 'overlaycolor' ) );?>"/><br/><span class="description"><?php echo __( 'Lightbox overlay color','visual-text-editor' );?> </span></td>
8786
</tr>
8887
<tr>
8988
<th scope="row">

‎js/wp-color-picker-alpha.js‎

Lines changed: 213 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,32 @@
44
* Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker
55
* Only run in input and is defined data alpha in true
66
*
7-
* Version: 1.2.2
8-
* https://github.com/23r9i0/wp-color-picker-alpha
9-
* Copyright (c) 2015 Sergio P.A. (23r9i0).
7+
* Version: 2.1.3
8+
* https://github.com/kallookoo/wp-color-picker-alpha
109
* Licensed under the GPLv2 license.
1110
*/
1211
( function( $ ) {
13-
// Variable for some backgrounds ( grid )
14-
var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==',
15-
// html stuff for wpColorPicker copy of the original color-picker.js
16-
_before = '<a tabindex="0" class="wp-color-result" />',
17-
_after = '<div class="wp-picker-holder" />',
18-
_wrap = '<div class="wp-picker-container" />',
19-
_button = '<input type="button" class="button button-small hidden" />';
12+
// Prevent double-init.
13+
if ( $.wp.wpColorPicker.prototype._hasAlpha ) {
14+
return;
15+
}
2016

17+
// Variable for some backgrounds ( grid )
18+
var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==',
19+
// html stuff for wpColorPicker copy of the original color-picker.js
20+
_after = '<div class="wp-picker-holder" />',
21+
_wrap = '<div class="wp-picker-container" />',
22+
_button = '<input type="button" class="button button-small" />',
23+
// Prevent CSS issues in < WordPress 4.9
24+
_deprecated = ( wpColorPickerL10n.current !== undefined );
25+
// Declare some global variables when is deprecated or not
26+
if ( _deprecated ) {
27+
var _before = '<a tabindex="0" class="wp-color-result" />';
28+
} else {
29+
var _before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',
30+
_wrappingLabel = '<label></label>',
31+
_wrappingLabelText = '<span class="screen-reader-text"></span>';
32+
}
2133
/**
2234
* Overwrite Color
2335
* for enable support rbga
@@ -41,94 +53,237 @@
4153
* Overwrite wpColorPicker
4254
*/
4355
$.widget( 'wp.wpColorPicker', $.wp.wpColorPicker, {
56+
_hasAlpha: true,
57+
/**
58+
* @summary Creates the color picker.
59+
*
60+
* Creates the color picker, sets default values, css classes and wraps it all in HTML.
61+
*
62+
* @since 3.5.0
63+
*
64+
* @access private
65+
*
66+
* @returns {void}
67+
*/
4468
_create: function() {
45-
// bail early for unsupported Iris.
46-
if ( ! $.support.iris )
69+
// Return early if Iris support is missing.
70+
if ( ! $.support.iris ) {
4771
return;
72+
}
4873

4974
var self = this,
50-
el = self.element;
75+
el = self.element;
5176

77+
// Override default options with options bound to the element.
5278
$.extend( self.options, el.data() );
5379

54-
// keep close bound so it can be attached to a body listener
80+
// Create a color picker which only allows adjustments to the hue.
81+
if ( self.options.type === 'hue' ) {
82+
return self._createHueOnly();
83+
}
84+
85+
// Bind the close event.
5586
self.close = $.proxy( self.close, self );
5687

5788
self.initialValue = el.val();
5889

59-
// Set up HTML structure, hide things
60-
el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
61-
self.wrap = el.parent();
62-
self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor : self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
63-
self.pickerContainer = $( _after ).insertAfter( el );
64-
self.button = $( _button );
90+
// Add a CSS class to the input field.
91+
el.addClass( 'wp-color-picker' );
92+
93+
if ( _deprecated ) {
94+
el.hide().wrap( _wrap );
95+
self.wrap = el.parent();
96+
self.toggler = $( _before )
97+
.insertBefore( el )
98+
.css( { backgroundColor : self.initialValue } )
99+
.attr( 'title', wpColorPickerL10n.pick )
100+
.attr( 'data-current', wpColorPickerL10n.current );
101+
self.pickerContainer = $( _after ).insertAfter( el );
102+
self.button = $( _button ).addClass('hidden');
103+
} else {
104+
/*
105+
* Check if there's already a wrapping label, e.g. in the Customizer.
106+
* If there's no label, add a default one to match the Customizer template.
107+
*/
108+
if ( ! el.parent( 'label' ).length ) {
109+
// Wrap the input field in the default label.
110+
el.wrap( _wrappingLabel );
111+
// Insert the default label text.
112+
self.wrappingLabelText = $( _wrappingLabelText )
113+
.insertBefore( el )
114+
.text( wpColorPickerL10n.defaultLabel );
115+
}
116+
117+
/*
118+
* At this point, either it's the standalone version or the Customizer
119+
* one, we have a wrapping label to use as hook in the DOM, let's store it.
120+
*/
121+
self.wrappingLabel = el.parent();
122+
123+
// Wrap the label in the main wrapper.
124+
self.wrappingLabel.wrap( _wrap );
125+
// Store a reference to the main wrapper.
126+
self.wrap = self.wrappingLabel.parent();
127+
// Set up the toggle button and insert it before the wrapping label.
128+
self.toggler = $( _before )
129+
.insertBefore( self.wrappingLabel )
130+
.css( { backgroundColor: self.initialValue } );
131+
// Set the toggle button span element text.
132+
self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick );
133+
// Set up the Iris container and insert it after the wrapping label.
134+
self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );
135+
// Store a reference to the Clear/Default button.
136+
self.button = $( _button );
137+
}
65138

139+
// Set up the Clear/Default button.
66140
if ( self.options.defaultColor ) {
67141
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
142+
if ( ! _deprecated ) {
143+
self.button.attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel );
144+
}
68145
} else {
69146
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
147+
if ( ! _deprecated ) {
148+
self.button.attr( 'aria-label', wpColorPickerL10n.clearAriaLabel );
149+
}
70150
}
71151

72-
el.wrap( '<span class="wp-picker-input-wrap" />' ).after( self.button );
152+
if ( _deprecated ) {
153+
el.wrap( '<span class="wp-picker-input-wrap" />' ).after( self.button );
154+
} else {
155+
// Wrap the wrapping label in its wrapper and append the Clear/Default button.
156+
self.wrappingLabel
157+
.wrap( '<span class="wp-picker-input-wrap hidden" />' )
158+
.after( self.button );
159+
160+
/*
161+
* The input wrapper now contains the label+input+Clear/Default button.
162+
* Store a reference to the input wrapper: we'll use this to toggle
163+
* the controls visibility.
164+
*/
165+
self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
166+
}
73167

74168
el.iris( {
75-
target : self.pickerContainer,
76-
hide : self.options.hide,
77-
width : self.options.width,
78-
mode : self.options.mode,
79-
palettes : self.options.palettes,
80-
change : function( event, ui ) {
169+
target: self.pickerContainer,
170+
hide: self.options.hide,
171+
width: self.options.width,
172+
mode: self.options.mode,
173+
palettes: self.options.palettes,
174+
/**
175+
* @summary Handles the onChange event if one has been defined in the options.
176+
*
177+
* Handles the onChange event if one has been defined in the options and additionally
178+
* sets the background color for the toggler element.
179+
*
180+
* @since 3.5.0
181+
*
182+
* @param {Event} event The event that's being called.
183+
* @param {HTMLElement} ui The HTMLElement containing the color picker.
184+
*
185+
* @returns {void}
186+
*/
187+
change: function( event, ui ) {
81188
if ( self.options.alpha ) {
82-
self.toggler.css( { 'background-image' : 'url(' + image + ')' } ).html( '<span />' );
83-
self.toggler.find( 'span' ).css( {
84-
'width' : '100%',
85-
'height' : '100%',
189+
self.toggler.css( { 'background-image' : 'url(' + image + ')' } );
190+
if ( _deprecated ) {
191+
self.toggler.html( '<span class="color-alpha" />' );
192+
} else {
193+
self.toggler.css( {
194+
'position' : 'relative'
195+
} );
196+
if ( self.toggler.find('span.color-alpha').length == 0 ) {
197+
self.toggler.append('<span class="color-alpha" />');
198+
}
199+
}
200+
201+
self.toggler.find( 'span.color-alpha' ).css( {
202+
'width' : '30px',
203+
'height' : '24px',
86204
'position' : 'absolute',
87205
'top' : 0,
88206
'left' : 0,
89-
'border-top-left-radius' : '3px',
90-
'border-bottom-left-radius' : '3px',
207+
'border-top-left-radius' : '2px',
208+
'border-bottom-left-radius' : '2px',
91209
'background' : ui.color.toString()
92210
} );
93211
} else {
94212
self.toggler.css( { backgroundColor : ui.color.toString() } );
95213
}
96214

97-
// Check for a custom cb
98-
if ( $.isFunction( self.options.change ) )
215+
if ( $.isFunction( self.options.change ) ) {
99216
self.options.change.call( this, event, ui );
217+
}
100218
}
101219
} );
102220

103221
el.val( self.initialValue );
104222
self._addListeners();
105223

224+
// Force the color picker to always be closed on initial load.
106225
if ( ! self.options.hide ) {
107226
self.toggler.click();
108227
}
109228
},
229+
/**
230+
* @summary Binds event listeners to the color picker.
231+
*
232+
* @since 3.5.0
233+
*
234+
* @access private
235+
*
236+
* @returns {void}
237+
*/
110238
_addListeners: function() {
111239
var self = this;
112240

113-
// prevent any clicks inside this widget from leaking to the top and closing it
241+
/**
242+
* @summary Prevent any clicks inside this widget from leaking to the top and closing it.
243+
*
244+
* @since 3.5.0
245+
*
246+
* @param {Event} event The event that's being called.
247+
*
248+
* @returs {void}
249+
*/
114250
self.wrap.on( 'click.wpcolorpicker', function( event ) {
115251
event.stopPropagation();
116-
} );
252+
});
117253

118-
self.toggler.on( 'click', function() {
254+
/**
255+
* @summary Open or close the color picker depending on the class.
256+
*
257+
* @since 3.5
258+
*/
259+
self.toggler.click( function(){
119260
if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
120261
self.close();
121262
} else {
122263
self.open();
123264
}
124265
});
125266

267+
/**
268+
* @summary Checks if value is empty when changing the color in the color picker.
269+
*
270+
* Checks if value is empty when changing the color in the color picker.
271+
* If so, the background color is cleared.
272+
*
273+
* @since 3.5.0
274+
*
275+
* @param {Event} event The event that's being called.
276+
*
277+
* @returns {void}
278+
*/
126279
self.element.on( 'change', function( event ) {
127280
// Empty or Error = clear
128281
if ( $( this ).val() === '' || self.element.hasClass( 'iris-error' ) ) {
129282
if ( self.options.alpha ) {
130-
self.toggler.removeAttr( 'style' );
131-
self.toggler.find( 'span' ).css( 'backgroundColor', '' );
283+
if ( _deprecated ) {
284+
self.toggler.removeAttr( 'style' );
285+
}
286+
self.toggler.find( 'span.color-alpha' ).css( 'backgroundColor', '' );
132287
} else {
133288
self.toggler.css( 'backgroundColor', '' );
134289
}
@@ -139,20 +294,25 @@
139294
}
140295
} );
141296

142-
// open a keyboard-focused closed picker with space or enter
143-
self.toggler.on( 'keyup', function( event ) {
144-
if ( event.keyCode === 13 || event.keyCode === 32 ) {
145-
event.preventDefault();
146-
self.toggler.trigger( 'click' ).next().focus();
147-
}
148-
});
149-
297+
/**
298+
* @summary Enables the user to clear or revert the color in the color picker.
299+
*
300+
* Enables the user to either clear the color in the color picker or revert back to the default color.
301+
*
302+
* @since 3.5.0
303+
*
304+
* @param {Event} event The event that's being called.
305+
*
306+
* @returns {void}
307+
*/
150308
self.button.on( 'click', function( event ) {
151309
if ( $( this ).hasClass( 'wp-picker-clear' ) ) {
152310
self.element.val( '' );
153311
if ( self.options.alpha ) {
154-
self.toggler.removeAttr( 'style' );
155-
self.toggler.find( 'span' ).css( 'backgroundColor', '' );
312+
if ( _deprecated ) {
313+
self.toggler.removeAttr( 'style' );
314+
}
315+
self.toggler.find( 'span.color-alpha' ).css( 'backgroundColor', '' );
156316
} else {
157317
self.toggler.css( 'backgroundColor', '' );
158318
}
@@ -164,7 +324,7 @@
164324
self.element.val( self.options.defaultColor ).change();
165325
}
166326
});
167-
}
327+
},
168328
});
169329

170330
/**
@@ -332,5 +492,5 @@
332492

333493
// Auto Call plugin is class is color-picker
334494
jQuery( document ).ready( function( $ ) {
335-
$( '#overlaycolor' ).wpColorPicker();
336-
} );
495+
$( '.color-picker' ).wpColorPicker();
496+
} );

0 commit comments

Comments
 (0)