diff --git a/Readme.md b/Readme.md index f37e742..adb9ad6 100644 --- a/Readme.md +++ b/Readme.md @@ -48,9 +48,6 @@ If you would like to contribute please fork the project and [report bugs][2] or If only tested in Firefox last version and WordPress last version ## Changelog -###### v1.2 - * Update script, see [#2](../../pull/4) - ###### v1.2 * Add functionality to change the width of the element, see [#2](../../issues/2) diff --git a/dist/wp-color-picker-alpha.min.js b/dist/wp-color-picker-alpha.min.js index 3a50ee9..a722508 100644 --- a/dist/wp-color-picker-alpha.min.js +++ b/dist/wp-color-picker-alpha.min.js @@ -1,2 +1,4 @@ -// wp-color-picker-alpha - v1.2.1; https://github.com/23r9i0/wp-color-picker-alpha; Copyright (c) 2015 Sergio P.A. (23r9i0); Licensed GPLv2 -!function(t){var o="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==",i='',e='
',r='
',a='';Color.fn.toString=function(){if(this._alpha<1)return this.toCSS("rgba",this._alpha).replace(/\s+/g,"");var t=parseInt(this._color,10).toString(16);return this.error?"":(t.length<6&&(t=("00000"+t).substr(-6)),"#"+t)},t.widget("wp.wpColorPicker",t.wp.wpColorPicker,{_create:function(){if(t.support.iris){var n=this,s=n.element;t.extend(n.options,s.data()),n.close=t.proxy(n.close,n),n.initialValue=s.val(),s.addClass("wp-color-picker").hide().wrap(r),n.wrap=s.parent(),n.toggler=t(i).insertBefore(s).css({backgroundColor:n.initialValue}).attr("title",wpColorPickerL10n.pick).data("current",wpColorPickerL10n.current),n.pickerContainer=t(e).insertAfter(s),n.button=t(a),n.options.defaultColor?n.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString):n.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),s.wrap('').after(n.button),s.iris({target:n.pickerContainer,hide:n.options.hide,width:n.options.width,mode:n.options.mode,palettes:n.options.palettes,change:function(i,e){n.options.alpha?(n.toggler.css({"background-image":"url("+o+")"}).html(""),n.toggler.find("span").css({width:"100%",height:"100%",position:"absolute",top:0,left:0,"border-top-left-radius":"3px","border-bottom-left-radius":"3px",background:e.color.toString()})):n.toggler.css({backgroundColor:e.color.toString()}),t.isFunction(n.options.change)&&n.options.change.call(this,i,e)}}),s.val(n.initialValue),n._addListeners(),n.options.hide||n.toggler.click()}},_addListeners:function(){var o=this;o.wrap.on("click.wpcolorpicker",function(t){t.stopPropagation()}),o.toggler.on("click",function(){o.toggler.hasClass("wp-picker-open")?o.close():o.open()}),o.element.on("change",function(i){(""===t(this).val()||o.element.hasClass("iris-error"))&&(o.options.alpha?(o.toggler.removeAttr("style"),o.toggler.find("span").css("backgroundColor","")):o.toggler.css("backgroundColor",""),t.isFunction(o.options.clear)&&o.options.clear.call(this,i))}),o.toggler.on("keyup",function(t){(13===t.keyCode||32===t.keyCode)&&(t.preventDefault(),o.toggler.trigger("click").next().focus())}),o.button.on("click",function(i){t(this).hasClass("wp-picker-clear")?(o.element.val(""),o.options.alpha?(o.toggler.removeAttr("style"),o.toggler.find("span").css("backgroundColor","")):o.toggler.css("backgroundColor",""),t.isFunction(o.options.clear)&&o.options.clear.call(this,i)):t(this).hasClass("wp-picker-default")&&o.element.val(o.options.defaultColor).change()})}}),t.widget("a8c.iris",t.a8c.iris,{_create:function(){if(this._super(),this.options.alpha=this.element.data("alpha")||!1,this.element.is(":input")||(this.options.alpha=!1),"undefined"!=typeof this.options.alpha&&this.options.alpha){var o=this,i=o.element,e='
',r=t(e).appendTo(o.picker.find(".iris-picker-inner")),a=r.find(".iris-slider-offset-alpha"),n={aContainer:r,aSlider:a};"undefined"!=typeof i.data("custom-width")?o.options.customWidth=parseInt(i.data("custom-width"))||0:o.options.customWidth=100,o.options.defaultWidth=i.width(),(o._color._alpha<1||-1!=o._color.toString().indexOf("rgb"))&&i.width(parseInt(o.options.defaultWidth+o.options.customWidth)),t.each(n,function(t,i){o.controls[t]=i}),o.controls.square.css({"margin-right":"0"});var s=o.picker.width()-o.controls.square.width()-20,l=s/6,c=s/2-l;t.each(["aContainer","strip"],function(t,i){o.controls[i].width(c).css({"margin-left":l+"px"})}),o._initControls(),o._change()}},_initControls:function(){if(this._super(),this.options.alpha){var t=this,o=t.controls;o.aSlider.slider({orientation:"vertical",min:0,max:100,step:1,value:parseInt(100*t._color._alpha),slide:function(o,i){t._color._alpha=parseFloat(i.value/100),t._change.apply(t,arguments)}})}},_change:function(){this._super();var t=this,i=t.element;if(this.options.alpha){var e=t.controls,r=parseInt(100*t._color._alpha),a=t._color.toRgb(),n=["rgb("+a.r+","+a.g+","+a.b+") 0%","rgba("+a.r+","+a.g+","+a.b+", 0) 100%"],s=t.options.defaultWidth,l=t.options.customWidth,c=t.picker.closest(".wp-picker-container").find(".wp-color-result");e.aContainer.css({background:"linear-gradient(to bottom, "+n.join(", ")+"), url("+o+")"}),c.hasClass("wp-picker-open")&&(e.aSlider.slider("value",r),t._color._alpha<1?(e.strip.attr("style",e.strip.attr("style").replace(/rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g,"rgb($1$3$5)")),i.width(parseInt(s+l))):i.width(s))}var p=i.data("reset-alpha")||!1;p&&t.picker.find(".iris-palette-container").on("click.palette",".iris-palette",function(){t._color._alpha=1,t.active="external",t._change()})},_addInputListeners:function(t){var o=this,i=100,e=function(i){var e=new Color(t.val()),r=t.val();t.removeClass("iris-error"),e.error?""!==r&&t.addClass("iris-error"):e.toString()!==o._color.toString()&&("keyup"===i.type&&r.match(/^[0-9a-fA-F]{3}$/)||o._setOption("color",e.toString()))};t.on("change",e).on("keyup",o._debounce(e,i)),o.options.hide&&t.on("focus",function(){o.show()})}})}(jQuery),jQuery(document).ready(function(t){t(".color-picker").wpColorPicker()}); \ No newline at end of file +/*! wp-color-picker-alpha - v1.2 +* https://github.com/23r9i0/wp-color-picker-alpha +* Copyright (c) 2015 Sergio P.A. (23r9i0); Licensed GPLv2 */ +!function(t){var o="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==",i='',e='
',r='
',a='';Color.fn.toString=function(){if(this._alpha<1)return this.toCSS("rgba",this._alpha).replace(/\s+/g,"");var t=parseInt(this._color,10).toString(16);if(this.error)return"";if(t.length<6)for(var o=6-t.length-1;o>=0;o--)t="0"+t;return"#"+t},t.widget("wp.wpColorPicker",t.wp.wpColorPicker,{_create:function(){if(t.support.iris){var n=this,s=n.element;t.extend(n.options,s.data()),n.close=t.proxy(n.close,n),n.initialValue=s.val(),s.addClass("wp-color-picker").hide().wrap(r),n.wrap=s.parent(),n.toggler=t(i).insertBefore(s).css({backgroundColor:n.initialValue}).attr("title",wpColorPickerL10n.pick).attr("data-current",wpColorPickerL10n.current),n.pickerContainer=t(e).insertAfter(s),n.button=t(a),n.options.defaultColor?n.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString):n.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),s.wrap('').after(n.button),s.iris({target:n.pickerContainer,hide:n.options.hide,width:n.options.width,mode:n.options.mode,palettes:n.options.palettes,change:function(i,e){n.options.alpha?(n.toggler.css({"background-image":"url("+o+")"}).html(""),n.toggler.find("span").css({width:"100%",height:"100%",position:"absolute",top:0,left:0,"border-top-left-radius":"3px","border-bottom-left-radius":"3px",background:e.color.toString()})):n.toggler.css({backgroundColor:e.color.toString()}),t.isFunction(n.options.change)&&n.options.change.call(this,i,e)}}),s.val(n.initialValue),n._addListeners(),n.options.hide||n.toggler.click()}},_addListeners:function(){var o=this;o.wrap.on("click.wpcolorpicker",function(t){t.stopPropagation()}),o.toggler.click(function(){o.toggler.hasClass("wp-picker-open")?o.close():o.open()}),o.element.change(function(i){var e=t(this),r=e.val();(""===r||o.element.hasClass("iris-error"))&&(o.options.alpha?(o.toggler.removeAttr("style"),o.toggler.find("span").css("backgroundColor","")):o.toggler.css("backgroundColor",""),t.isFunction(o.options.clear)&&o.options.clear.call(this,i))}),o.toggler.on("keyup",function(t){(13===t.keyCode||32===t.keyCode)&&(t.preventDefault(),o.toggler.trigger("click").next().focus())}),o.button.click(function(i){var e=t(this);e.hasClass("wp-picker-clear")?(o.element.val(""),o.options.alpha?(o.toggler.removeAttr("style"),o.toggler.find("span").css("backgroundColor","")):o.toggler.css("backgroundColor",""),t.isFunction(o.options.clear)&&o.options.clear.call(this,i)):e.hasClass("wp-picker-default")&&o.element.val(o.options.defaultColor).change()})}}),t.widget("a8c.iris",t.a8c.iris,{_create:function(){if(this._super(),this.options.alpha=this.element.data("alpha")||!1,this.element.is(":input")||(this.options.alpha=!1),"undefined"!=typeof this.options.alpha&&this.options.alpha){var o=this,i=o.element,e='
',r=t(e).appendTo(o.picker.find(".iris-picker-inner")),a=r.find(".iris-slider-offset-alpha"),n={aContainer:r,aSlider:a};"undefined"!=typeof i.data("custom-width")?o.options.customWidth=parseInt(i.data("custom-width"))||0:o.options.customWidth=100,console.log(o.options.customWidth),o.options.defaultWidth=i.width(),(o._color._alpha<1||1!=o._color.toString().indexOf("rgb"))&&i.width(parseInt(o.options.defaultWidth+o.options.customWidth)),t.each(n,function(t,i){o.controls[t]=i}),o.controls.square.css({"margin-right":"0"});var s=o.picker.width()-o.controls.square.width()-20,l=s/6,c=s/2-l;t.each(["aContainer","strip"],function(t,i){o.controls[i].width(c).css({"margin-left":l+"px"})}),o._initControls(),o._change()}},_initControls:function(){if(this._super(),this.options.alpha){var t=this,o=t.controls;o.aSlider.slider({orientation:"vertical",min:0,max:100,step:1,value:parseInt(100*t._color._alpha),slide:function(o,i){t._color._alpha=parseFloat(i.value/100),t._change.apply(t,arguments)}})}},_change:function(){this._super();var t=this,i=t.element;if(this.options.alpha){var e=t.controls,r=parseInt(100*t._color._alpha),a=t._color.toRgb(),n=["rgb("+a.r+","+a.g+","+a.b+") 0%","rgba("+a.r+","+a.g+","+a.b+", 0) 100%"],s=t.options.defaultWidth,l=t.options.customWidth,c=t.picker.closest(".wp-picker-container").find(".wp-color-result");if(e.aContainer.css({background:"linear-gradient(to bottom, "+n.join(", ")+"), url("+o+")"}),c.hasClass("wp-picker-open"))if(e.aSlider.slider("value",r),t._color._alpha<1){var p=e.strip.attr("style").replace(/rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g,"rgb($1$3$5)");e.strip.attr("style",p),i.width(parseInt(s+l))}else i.width(s)}var d=i.data("reset-alpha")||!1;d&&t.picker.find(".iris-palette-container").on("click.palette",".iris-palette",function(){t._color._alpha=1,t.active="external",t._change()})},_addInputListeners:function(t){var o=this,i=100,e=function(i){var e=new Color(t.val()),r=t.val();t.removeClass("iris-error"),e.error?""!==r&&t.addClass("iris-error"):e.toString()!==o._color.toString()&&("keyup"===i.type&&r.match(/^[0-9a-fA-F]{3}$/)||o._setOption("color",e.toString()))};t.on("change",e).on("keyup",o._debounce(e,i)),o.options.hide&&t.one("focus",function(){o.show()})}})}(jQuery),jQuery(document).ready(function(t){t(".color-picker").wpColorPicker()}); \ No newline at end of file diff --git a/plugin/wp-color-picker-alpha/Readme.md b/plugin/wp-color-picker-alpha/Readme.md index 8d1aecc..ab3316a 100644 --- a/plugin/wp-color-picker-alpha/Readme.md +++ b/plugin/wp-color-picker-alpha/Readme.md @@ -8,9 +8,6 @@ Licensed under the GPLv2 license. ## Changelog -###### v1.1 -Update script - ###### v1.1 Add more options to test diff --git a/plugin/wp-color-picker-alpha/wp-color-picker-alpha.js b/plugin/wp-color-picker-alpha/wp-color-picker-alpha.js index d653b50..0d040cf 100644 --- a/plugin/wp-color-picker-alpha/wp-color-picker-alpha.js +++ b/plugin/wp-color-picker-alpha/wp-color-picker-alpha.js @@ -4,18 +4,18 @@ * Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker * Only run in input and is defined data alpha in true * - * Version: 1.2.1 + * Version: 1.2 * https://github.com/23r9i0/wp-color-picker-alpha * Copyright (c) 2015 Sergio P.A. (23r9i0). * Licensed under the GPLv2 license. */ ( function( $ ) { - // Variable for some backgrounds ( grid ) - var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==', + // Variable for some backgrounds + var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg=='; // html stuff for wpColorPicker copy of the original color-picker.js - _before = '', - _after = '
', - _wrap = '
', + var _before = '', + _after = '
', + _wrap = '
', _button = ''; /** @@ -31,8 +31,11 @@ if ( this.error ) return ''; - if ( hex.length < 6 ) - hex = ( '00000' + hex ).substr( -6 ); + if ( hex.length < 6 ) { + for ( var i = 6 - hex.length - 1; i >= 0; i-- ) { + hex = '0' + hex; + } + } return '#' + hex; }; @@ -43,11 +46,12 @@ $.widget( 'wp.wpColorPicker', $.wp.wpColorPicker, { _create: function() { // bail early for unsupported Iris. - if ( ! $.support.iris ) + if ( ! $.support.iris ) { return; + } var self = this, - el = self.element; + el = self.element; $.extend( self.options, el.data() ); @@ -58,10 +62,10 @@ // Set up HTML structure, hide things el.addClass( 'wp-color-picker' ).hide().wrap( _wrap ); - self.wrap = el.parent(); - self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor : self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).data( 'current', wpColorPickerL10n.current ); + self.wrap = el.parent(); + self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current ); self.pickerContainer = $( _after ).insertAfter( el ); - self.button = $( _button ); + self.button = $( _button ); if ( self.options.defaultColor ) { self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString ); @@ -69,42 +73,42 @@ self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear ); } - el.wrap( '' ).after( self.button ); + el.wrap( '' ).after(self.button); el.iris( { - target : self.pickerContainer, - hide : self.options.hide, - width : self.options.width, - mode : self.options.mode, - palettes : self.options.palettes, - change : function( event, ui ) { + target: self.pickerContainer, + hide: self.options.hide, + width: self.options.width, + mode: self.options.mode, + palettes: self.options.palettes, + change: function( event, ui ) { if ( self.options.alpha ) { - self.toggler.css( { 'background-image' : 'url(' + image + ')' } ).html( '' ); - self.toggler.find( 'span' ).css( { - 'width' : '100%', - 'height' : '100%', - 'position' : 'absolute', - 'top' : 0, - 'left' : 0, - 'border-top-left-radius' : '3px', - 'border-bottom-left-radius' : '3px', - 'background' : ui.color.toString() - } ); + self.toggler.css( { 'background-image': 'url(' + image + ')' } ).html(''); + self.toggler.find('span').css({ + 'width': '100%', + 'height': '100%', + 'position': 'absolute', + 'top': 0, + 'left': 0, + 'border-top-left-radius': '3px', + 'border-bottom-left-radius': '3px', + 'background': ui.color.toString() + }); } else { - self.toggler.css( { backgroundColor : ui.color.toString() } ); + self.toggler.css( { backgroundColor: ui.color.toString() } ); } - - // Check for a custom cb - if ( $.isFunction( self.options.change ) ) + // check for a custom cb + if ( $.isFunction( self.options.change ) ) { self.options.change.call( this, event, ui ); + } } } ); el.val( self.initialValue ); self._addListeners(); - - if ( ! self.options.hide ) + if ( ! self.options.hide ) { self.toggler.click(); + } }, _addListeners: function() { var self = this; @@ -112,9 +116,9 @@ // prevent any clicks inside this widget from leaking to the top and closing it self.wrap.on( 'click.wpcolorpicker', function( event ) { event.stopPropagation(); - } ); + }); - self.toggler.on( 'click', function() { + self.toggler.click( function(){ if ( self.toggler.hasClass( 'wp-picker-open' ) ) { self.close(); } else { @@ -122,21 +126,23 @@ } }); - self.element.on( 'change', function( event ) { + self.element.change( function( event ) { + var me = $( this ), + val = me.val(); // Empty or Error = clear - if ( $( this ).val() === '' || self.element.hasClass( 'iris-error' ) ) { + if ( val === '' || self.element.hasClass('iris-error') ) { if ( self.options.alpha ) { - self.toggler.removeAttr( 'style' ); - self.toggler.find( 'span' ).css( 'backgroundColor', '' ); + self.toggler.removeAttr('style'); + self.toggler.find('span').css( 'backgroundColor', '' ); } else { self.toggler.css( 'backgroundColor', '' ); } - // fire clear callback if we have one - if ( $.isFunction( self.options.clear ) ) + if ( $.isFunction( self.options.clear ) ) { self.options.clear.call( this, event ); + } } - } ); + }); // open a keyboard-focused closed picker with space or enter self.toggler.on( 'keyup', function( event ) { @@ -146,20 +152,20 @@ } }); - self.button.on( 'click', function( event ) { - if ( $( this ).hasClass( 'wp-picker-clear' ) ) { + self.button.click( function( event ) { + var me = $( this ); + if ( me.hasClass( 'wp-picker-clear' ) ) { self.element.val( '' ); if ( self.options.alpha ) { - self.toggler.removeAttr( 'style' ); - self.toggler.find( 'span' ).css( 'backgroundColor', '' ); + self.toggler.removeAttr('style'); + self.toggler.find('span').css( 'backgroundColor', '' ); } else { self.toggler.css( 'backgroundColor', '' ); } - - if ( $.isFunction( self.options.clear ) ) + if ( $.isFunction( self.options.clear ) ) { self.options.clear.call( this, event ); - - } else if ( $( this ).hasClass( 'wp-picker-default' ) ) { + } + } else if ( me.hasClass( 'wp-picker-default' ) ) { self.element.val( self.options.defaultColor ).change(); } }); @@ -177,18 +183,19 @@ this.options.alpha = this.element.data( 'alpha' ) || false; // Is not input disabled - if ( ! this.element.is( ':input' ) ) + if ( ! this.element.is( ':input' ) ) { this.options.alpha = false; + } if ( typeof this.options.alpha !== 'undefined' && this.options.alpha ) { - var self = this, - el = self.element, - _html = '
', + var self = this, + el = self.element, + _html = '
', aContainer = $( _html ).appendTo( self.picker.find( '.iris-picker-inner' ) ), - aSlider = aContainer.find( '.iris-slider-offset-alpha' ), - controls = { - aContainer : aContainer, - aSlider : aSlider + aSlider = aContainer.find( '.iris-slider-offset-alpha' ), + controls = { + aContainer: aContainer, + aSlider: aSlider }; if ( typeof el.data( 'custom-width' ) !== 'undefined' ) { @@ -197,27 +204,30 @@ self.options.customWidth = 100; } + console.log( self.options.customWidth ); + // Set default width for input reset self.options.defaultWidth = el.width(); // Update width for input - if ( self._color._alpha < 1 || self._color.toString().indexOf('rgb') != -1 ) + if ( self._color._alpha < 1 || self._color.toString().indexOf('rgb') != 1 ) { el.width( parseInt( self.options.defaultWidth + self.options.customWidth ) ); + } // Push new controls - $.each( controls, function( k, v ) { + $.each( controls, function( k, v ){ self.controls[k] = v; - } ); + }); // Change size strip and add margin for sliders - self.controls.square.css( { 'margin-right': '0' } ); - var emptyWidth = ( self.picker.width() - self.controls.square.width() - 20 ), - stripsMargin = ( emptyWidth / 6 ), - stripsWidth = ( ( emptyWidth / 2 ) - stripsMargin ); + self.controls.square.css({'margin-right': '0'}); + var emptyWidth = ( self.picker.width() - self.controls.square.width() - 20 ), + stripsMargin = emptyWidth/6, + stripsWidth = (emptyWidth/2) - stripsMargin; $.each( [ 'aContainer', 'strip' ], function( k, v ) { - self.controls[v].width( stripsWidth ).css( { 'margin-left' : stripsMargin + 'px' } ); - } ); + self.controls[v].width( stripsWidth ).css({ 'margin-left': stripsMargin + 'px' }); + }); // Add new slider self._initControls(); @@ -230,18 +240,18 @@ this._super(); if ( this.options.alpha ) { - var self = this, + var self = this, controls = self.controls; controls.aSlider.slider({ - orientation : 'vertical', - min : 0, - max : 100, - step : 1, - value : parseInt( self._color._alpha * 100 ), - slide : function( event, ui ) { + orientation: 'vertical', + min: 0, + max: 100, + step: 1, + value: parseInt( self._color._alpha*100 ), + slide: function( event, ui ) { // Update alpha value - self._color._alpha = parseFloat( ui.value / 100 ); + self._color._alpha = parseFloat( ui.value/100 ); self._change.apply( self, arguments ); } }); @@ -249,26 +259,25 @@ }, _change: function() { this._super(); - var self = this, - el = self.element; + el = self.element; if ( this.options.alpha ) { - var controls = self.controls, - alpha = parseInt( self._color._alpha * 100 ), - color = self._color.toRgb(), - gradient = [ + var controls = self.controls, + alpha = parseInt( self._color._alpha*100 ), + color = self._color.toRgb(), + gradient = [ 'rgb(' + color.r + ',' + color.g + ',' + color.b + ') 0%', 'rgba(' + color.r + ',' + color.g + ',' + color.b + ', 0) 100%' ], defaultWidth = self.options.defaultWidth, - customWidth = self.options.customWidth, - target = self.picker.closest( '.wp-picker-container' ).find( '.wp-color-result' ); + customWidth = self.options.customWidth, + target = self.picker.closest('.wp-picker-container').find( '.wp-color-result' ); // Generate background slider alpha, only for CSS3 old browser fuck!! :) - controls.aContainer.css( { 'background' : 'linear-gradient(to bottom, ' + gradient.join( ', ' ) + '), url(' + image + ')' } ); + controls.aContainer.css({ 'background': 'linear-gradient(to bottom, ' + gradient.join( ', ' ) + '), url(' + image + ')' }); - if ( target.hasClass( 'wp-picker-open' ) ) { + if ( target.hasClass('wp-picker-open') ) { // Update alpha value controls.aSlider.slider( 'value', alpha ); @@ -277,7 +286,10 @@ * and change input width for view all value */ if ( self._color._alpha < 1 ) { - controls.strip.attr( 'style', controls.strip.attr( 'style' ).replace( /rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g, 'rgb($1$3$5)' ) ); + var style = controls.strip.attr( 'style' ).replace( /rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g, 'rgb($1$3$5)' ); + + controls.strip.attr( 'style', style ); + el.width( parseInt( defaultWidth + customWidth ) ); } else { el.width( defaultWidth ); @@ -285,34 +297,35 @@ } } - var reset = el.data( 'reset-alpha' ) || false; - + var reset = el.data('reset-alpha') || false; if ( reset ) { self.picker.find( '.iris-palette-container' ).on( 'click.palette', '.iris-palette', function() { self._color._alpha = 1; - self.active = 'external'; + self.active = 'external'; self._change(); - } ); + }); } }, _addInputListeners: function( input ) { - var self = this, + var self = this, debounceTimeout = 100, - callback = function( event ) { + callback = function( event ){ var color = new Color( input.val() ), - val = input.val(); + val = input.val(); input.removeClass( 'iris-error' ); // we gave a bad color if ( color.error ) { // don't error on an empty input - if ( val !== '' ) + if ( val !== '' ) { input.addClass( 'iris-error' ); + } } else { if ( color.toString() !== self._color.toString() ) { // let's not do this on keyup for hex shortcodes - if ( ! ( event.type === 'keyup' && val.match( /^[0-9a-fA-F]{3}$/ ) ) ) + if ( ! ( event.type === 'keyup' && val.match( /^[0-9a-fA-F]{3}$/ ) ) ) { self._setOption( 'color', color.toString() ); + } } } }; @@ -321,9 +334,9 @@ // If we initialized hidden, show on first focus. The rest is up to you. if ( self.options.hide ) { - input.on( 'focus', function() { + input.one( 'focus', function() { self.show(); - } ); + }); } } } ); @@ -331,5 +344,5 @@ // Auto Call plugin is class is color-picker jQuery( document ).ready( function( $ ) { - $( '.color-picker' ).wpColorPicker(); + $( '.color-picker' ).wpColorPicker(); } ); \ No newline at end of file diff --git a/plugin/wp-color-picker-alpha/wp-color-picker-alpha.php b/plugin/wp-color-picker-alpha/wp-color-picker-alpha.php index 2b228f0..ca0dea5 100644 --- a/plugin/wp-color-picker-alpha/wp-color-picker-alpha.php +++ b/plugin/wp-color-picker-alpha/wp-color-picker-alpha.php @@ -3,7 +3,7 @@ * Plugin Name: WP Color Picker Alpha * Plugin URI: https://github.com/23r9i0/wp-color-picker-alpha * Description: Plugin to test wp-color-picker-alpha script - * Version: 1.2.1 + * Version: 1..1 * Author: Sergio P.A. ( 23r9i0 ) * Author URI: http://dsergio.com/ * License: GPLv2 or later diff --git a/src/wp-color-picker-alpha.js b/src/wp-color-picker-alpha.js index d653b50..0d040cf 100644 --- a/src/wp-color-picker-alpha.js +++ b/src/wp-color-picker-alpha.js @@ -4,18 +4,18 @@ * Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker * Only run in input and is defined data alpha in true * - * Version: 1.2.1 + * Version: 1.2 * https://github.com/23r9i0/wp-color-picker-alpha * Copyright (c) 2015 Sergio P.A. (23r9i0). * Licensed under the GPLv2 license. */ ( function( $ ) { - // Variable for some backgrounds ( grid ) - var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==', + // Variable for some backgrounds + var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg=='; // html stuff for wpColorPicker copy of the original color-picker.js - _before = '', - _after = '
', - _wrap = '
', + var _before = '', + _after = '
', + _wrap = '
', _button = ''; /** @@ -31,8 +31,11 @@ if ( this.error ) return ''; - if ( hex.length < 6 ) - hex = ( '00000' + hex ).substr( -6 ); + if ( hex.length < 6 ) { + for ( var i = 6 - hex.length - 1; i >= 0; i-- ) { + hex = '0' + hex; + } + } return '#' + hex; }; @@ -43,11 +46,12 @@ $.widget( 'wp.wpColorPicker', $.wp.wpColorPicker, { _create: function() { // bail early for unsupported Iris. - if ( ! $.support.iris ) + if ( ! $.support.iris ) { return; + } var self = this, - el = self.element; + el = self.element; $.extend( self.options, el.data() ); @@ -58,10 +62,10 @@ // Set up HTML structure, hide things el.addClass( 'wp-color-picker' ).hide().wrap( _wrap ); - self.wrap = el.parent(); - self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor : self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).data( 'current', wpColorPickerL10n.current ); + self.wrap = el.parent(); + self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current ); self.pickerContainer = $( _after ).insertAfter( el ); - self.button = $( _button ); + self.button = $( _button ); if ( self.options.defaultColor ) { self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString ); @@ -69,42 +73,42 @@ self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear ); } - el.wrap( '' ).after( self.button ); + el.wrap( '' ).after(self.button); el.iris( { - target : self.pickerContainer, - hide : self.options.hide, - width : self.options.width, - mode : self.options.mode, - palettes : self.options.palettes, - change : function( event, ui ) { + target: self.pickerContainer, + hide: self.options.hide, + width: self.options.width, + mode: self.options.mode, + palettes: self.options.palettes, + change: function( event, ui ) { if ( self.options.alpha ) { - self.toggler.css( { 'background-image' : 'url(' + image + ')' } ).html( '' ); - self.toggler.find( 'span' ).css( { - 'width' : '100%', - 'height' : '100%', - 'position' : 'absolute', - 'top' : 0, - 'left' : 0, - 'border-top-left-radius' : '3px', - 'border-bottom-left-radius' : '3px', - 'background' : ui.color.toString() - } ); + self.toggler.css( { 'background-image': 'url(' + image + ')' } ).html(''); + self.toggler.find('span').css({ + 'width': '100%', + 'height': '100%', + 'position': 'absolute', + 'top': 0, + 'left': 0, + 'border-top-left-radius': '3px', + 'border-bottom-left-radius': '3px', + 'background': ui.color.toString() + }); } else { - self.toggler.css( { backgroundColor : ui.color.toString() } ); + self.toggler.css( { backgroundColor: ui.color.toString() } ); } - - // Check for a custom cb - if ( $.isFunction( self.options.change ) ) + // check for a custom cb + if ( $.isFunction( self.options.change ) ) { self.options.change.call( this, event, ui ); + } } } ); el.val( self.initialValue ); self._addListeners(); - - if ( ! self.options.hide ) + if ( ! self.options.hide ) { self.toggler.click(); + } }, _addListeners: function() { var self = this; @@ -112,9 +116,9 @@ // prevent any clicks inside this widget from leaking to the top and closing it self.wrap.on( 'click.wpcolorpicker', function( event ) { event.stopPropagation(); - } ); + }); - self.toggler.on( 'click', function() { + self.toggler.click( function(){ if ( self.toggler.hasClass( 'wp-picker-open' ) ) { self.close(); } else { @@ -122,21 +126,23 @@ } }); - self.element.on( 'change', function( event ) { + self.element.change( function( event ) { + var me = $( this ), + val = me.val(); // Empty or Error = clear - if ( $( this ).val() === '' || self.element.hasClass( 'iris-error' ) ) { + if ( val === '' || self.element.hasClass('iris-error') ) { if ( self.options.alpha ) { - self.toggler.removeAttr( 'style' ); - self.toggler.find( 'span' ).css( 'backgroundColor', '' ); + self.toggler.removeAttr('style'); + self.toggler.find('span').css( 'backgroundColor', '' ); } else { self.toggler.css( 'backgroundColor', '' ); } - // fire clear callback if we have one - if ( $.isFunction( self.options.clear ) ) + if ( $.isFunction( self.options.clear ) ) { self.options.clear.call( this, event ); + } } - } ); + }); // open a keyboard-focused closed picker with space or enter self.toggler.on( 'keyup', function( event ) { @@ -146,20 +152,20 @@ } }); - self.button.on( 'click', function( event ) { - if ( $( this ).hasClass( 'wp-picker-clear' ) ) { + self.button.click( function( event ) { + var me = $( this ); + if ( me.hasClass( 'wp-picker-clear' ) ) { self.element.val( '' ); if ( self.options.alpha ) { - self.toggler.removeAttr( 'style' ); - self.toggler.find( 'span' ).css( 'backgroundColor', '' ); + self.toggler.removeAttr('style'); + self.toggler.find('span').css( 'backgroundColor', '' ); } else { self.toggler.css( 'backgroundColor', '' ); } - - if ( $.isFunction( self.options.clear ) ) + if ( $.isFunction( self.options.clear ) ) { self.options.clear.call( this, event ); - - } else if ( $( this ).hasClass( 'wp-picker-default' ) ) { + } + } else if ( me.hasClass( 'wp-picker-default' ) ) { self.element.val( self.options.defaultColor ).change(); } }); @@ -177,18 +183,19 @@ this.options.alpha = this.element.data( 'alpha' ) || false; // Is not input disabled - if ( ! this.element.is( ':input' ) ) + if ( ! this.element.is( ':input' ) ) { this.options.alpha = false; + } if ( typeof this.options.alpha !== 'undefined' && this.options.alpha ) { - var self = this, - el = self.element, - _html = '
', + var self = this, + el = self.element, + _html = '
', aContainer = $( _html ).appendTo( self.picker.find( '.iris-picker-inner' ) ), - aSlider = aContainer.find( '.iris-slider-offset-alpha' ), - controls = { - aContainer : aContainer, - aSlider : aSlider + aSlider = aContainer.find( '.iris-slider-offset-alpha' ), + controls = { + aContainer: aContainer, + aSlider: aSlider }; if ( typeof el.data( 'custom-width' ) !== 'undefined' ) { @@ -197,27 +204,30 @@ self.options.customWidth = 100; } + console.log( self.options.customWidth ); + // Set default width for input reset self.options.defaultWidth = el.width(); // Update width for input - if ( self._color._alpha < 1 || self._color.toString().indexOf('rgb') != -1 ) + if ( self._color._alpha < 1 || self._color.toString().indexOf('rgb') != 1 ) { el.width( parseInt( self.options.defaultWidth + self.options.customWidth ) ); + } // Push new controls - $.each( controls, function( k, v ) { + $.each( controls, function( k, v ){ self.controls[k] = v; - } ); + }); // Change size strip and add margin for sliders - self.controls.square.css( { 'margin-right': '0' } ); - var emptyWidth = ( self.picker.width() - self.controls.square.width() - 20 ), - stripsMargin = ( emptyWidth / 6 ), - stripsWidth = ( ( emptyWidth / 2 ) - stripsMargin ); + self.controls.square.css({'margin-right': '0'}); + var emptyWidth = ( self.picker.width() - self.controls.square.width() - 20 ), + stripsMargin = emptyWidth/6, + stripsWidth = (emptyWidth/2) - stripsMargin; $.each( [ 'aContainer', 'strip' ], function( k, v ) { - self.controls[v].width( stripsWidth ).css( { 'margin-left' : stripsMargin + 'px' } ); - } ); + self.controls[v].width( stripsWidth ).css({ 'margin-left': stripsMargin + 'px' }); + }); // Add new slider self._initControls(); @@ -230,18 +240,18 @@ this._super(); if ( this.options.alpha ) { - var self = this, + var self = this, controls = self.controls; controls.aSlider.slider({ - orientation : 'vertical', - min : 0, - max : 100, - step : 1, - value : parseInt( self._color._alpha * 100 ), - slide : function( event, ui ) { + orientation: 'vertical', + min: 0, + max: 100, + step: 1, + value: parseInt( self._color._alpha*100 ), + slide: function( event, ui ) { // Update alpha value - self._color._alpha = parseFloat( ui.value / 100 ); + self._color._alpha = parseFloat( ui.value/100 ); self._change.apply( self, arguments ); } }); @@ -249,26 +259,25 @@ }, _change: function() { this._super(); - var self = this, - el = self.element; + el = self.element; if ( this.options.alpha ) { - var controls = self.controls, - alpha = parseInt( self._color._alpha * 100 ), - color = self._color.toRgb(), - gradient = [ + var controls = self.controls, + alpha = parseInt( self._color._alpha*100 ), + color = self._color.toRgb(), + gradient = [ 'rgb(' + color.r + ',' + color.g + ',' + color.b + ') 0%', 'rgba(' + color.r + ',' + color.g + ',' + color.b + ', 0) 100%' ], defaultWidth = self.options.defaultWidth, - customWidth = self.options.customWidth, - target = self.picker.closest( '.wp-picker-container' ).find( '.wp-color-result' ); + customWidth = self.options.customWidth, + target = self.picker.closest('.wp-picker-container').find( '.wp-color-result' ); // Generate background slider alpha, only for CSS3 old browser fuck!! :) - controls.aContainer.css( { 'background' : 'linear-gradient(to bottom, ' + gradient.join( ', ' ) + '), url(' + image + ')' } ); + controls.aContainer.css({ 'background': 'linear-gradient(to bottom, ' + gradient.join( ', ' ) + '), url(' + image + ')' }); - if ( target.hasClass( 'wp-picker-open' ) ) { + if ( target.hasClass('wp-picker-open') ) { // Update alpha value controls.aSlider.slider( 'value', alpha ); @@ -277,7 +286,10 @@ * and change input width for view all value */ if ( self._color._alpha < 1 ) { - controls.strip.attr( 'style', controls.strip.attr( 'style' ).replace( /rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g, 'rgb($1$3$5)' ) ); + var style = controls.strip.attr( 'style' ).replace( /rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g, 'rgb($1$3$5)' ); + + controls.strip.attr( 'style', style ); + el.width( parseInt( defaultWidth + customWidth ) ); } else { el.width( defaultWidth ); @@ -285,34 +297,35 @@ } } - var reset = el.data( 'reset-alpha' ) || false; - + var reset = el.data('reset-alpha') || false; if ( reset ) { self.picker.find( '.iris-palette-container' ).on( 'click.palette', '.iris-palette', function() { self._color._alpha = 1; - self.active = 'external'; + self.active = 'external'; self._change(); - } ); + }); } }, _addInputListeners: function( input ) { - var self = this, + var self = this, debounceTimeout = 100, - callback = function( event ) { + callback = function( event ){ var color = new Color( input.val() ), - val = input.val(); + val = input.val(); input.removeClass( 'iris-error' ); // we gave a bad color if ( color.error ) { // don't error on an empty input - if ( val !== '' ) + if ( val !== '' ) { input.addClass( 'iris-error' ); + } } else { if ( color.toString() !== self._color.toString() ) { // let's not do this on keyup for hex shortcodes - if ( ! ( event.type === 'keyup' && val.match( /^[0-9a-fA-F]{3}$/ ) ) ) + if ( ! ( event.type === 'keyup' && val.match( /^[0-9a-fA-F]{3}$/ ) ) ) { self._setOption( 'color', color.toString() ); + } } } }; @@ -321,9 +334,9 @@ // If we initialized hidden, show on first focus. The rest is up to you. if ( self.options.hide ) { - input.on( 'focus', function() { + input.one( 'focus', function() { self.show(); - } ); + }); } } } ); @@ -331,5 +344,5 @@ // Auto Call plugin is class is color-picker jQuery( document ).ready( function( $ ) { - $( '.color-picker' ).wpColorPicker(); + $( '.color-picker' ).wpColorPicker(); } ); \ No newline at end of file