diff --git a/assets/alpha-color.js b/assets/alpha-color.js new file mode 100644 index 0000000..fc63810 --- /dev/null +++ b/assets/alpha-color.js @@ -0,0 +1,365 @@ +/** + * Created by shramee on 6/10/15. + */ +/** + * lib-alpha-color-picker + * + * Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker + * Only run in input and is defined data alpha in true + * + * Version: 1.1 + * https://github.com/23r9i0/lib-alpha-color-picker + * Copyright (c) 2015 Sergio P.A. (23r9i0). + * Licensed under the GPLv2 license. + */ +( function( $, undef ) { + // 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 + var _before = '', + _after = '
', + _wrap = '
', + _button = ''; + + /** + * Overwrite Color + * for enable support rbga + */ + Color.fn.toString = function() { + if ( this._alpha < 1 ) + return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' ); + + var hex = parseInt( this._color, 10 ).toString( 16 ); + + if ( this.error ) + return ''; + + if ( hex.length < 6 ) { + for ( var i = 6 - hex.length - 1; i >= 0; i-- ) { + hex = '0' + hex; + } + } + + return '#' + hex; + }; + + /** + * Overwrite wpColorPicker + */ + $.widget( 'lib.libColorPicker', $.wp.wpColorPicker, { + _create: function() { + // bail early for unsupported Iris. + if ( ! $.support.iris ) { + return; + } + + var self = this, + el = self.element; + + $.extend( self.options, el.data() ); + + // keep close bound so it can be attached to a body listener + self.close = $.proxy( self.close, self ); + + self.initialValue = el.val(); + + // 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 ).attr( 'data-current', wpColorPickerL10n.current ); + self.pickerContainer = $( _after ).insertAfter( el ); + self.button = $( _button ); + + if ( self.options.defaultColor ) { + self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString ); + } else { + self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear ); + } + + el.wrap( '' ).after(self.button); + + el.lib_iris( { + 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() + }); + $( event.target ).val( ui.color.toString() ); + } else { + self.toggler.css( { backgroundColor: ui.color.toString() } ); + } + // 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 ) { + self.toggler.click(); + } + }, + _addListeners: function() { + var self = this; + + // 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.click( function(){ + if ( self.toggler.hasClass( 'wp-picker-open' ) ) { + self.close(); + } else { + self.open(); + } + }); + + self.element.change( function( event ) { + var me = $( this ), + val = me.val(); + // Empty or Error = clear + if ( val === '' || self.element.hasClass('iris-error') ) { + if ( self.options.alpha ) { + 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 ) ) { + self.options.clear.call( this, event ); + } + } + }); + + // open a keyboard-focused closed picker with space or enter + self.toggler.on( 'keyup', function( event ) { + if ( event.keyCode === 13 || event.keyCode === 32 ) { + event.preventDefault(); + self.toggler.trigger( 'click' ).next().focus(); + } + }); + + 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', '' ); + } else { + self.toggler.css( 'backgroundColor', '' ); + } + if ( $.isFunction( self.options.clear ) ) { + self.options.clear.call( this, event ); + } + } else if ( me.hasClass( 'wp-picker-default' ) ) { + self.element.val( self.options.defaultColor ).change(); + } + }); + }, + open: function() { + this.element.show().lib_iris( 'toggle' ).focus(); + this.button.removeClass( 'hidden' ); + this.toggler.addClass( 'wp-picker-open' ); + $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close ); + }, + close: function() { + this.element.hide().lib_iris( 'toggle' ); + this.button.addClass( 'hidden' ); + this.toggler.removeClass( 'wp-picker-open' ); + $( 'body' ).off( 'click.wpcolorpicker', this.close ); + }, + + // $("#input").wpColorPicker('color') returns the current color + // $("#input").wpColorPicker('color', '#bada55') to set + color: function( newColor ) { + if ( newColor === undef ) { + return this.element.lib_iris( 'option', 'color' ); + } + + this.element.lib_iris( 'option', 'color', newColor ); + } + }); + + /** + * Overwrite iris + */ + $.widget( 'lib.lib_iris', $.a8c.iris, { + _create: function() { + this._super(); + + // Global option for check is mode rbga is enabled + this.options.alpha = this.element.data( 'alpha' ) || false; + + // Is not input disabled + 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 = '
', + aContainer = $( _html ).appendTo( self.picker.find( '.iris-picker-inner' ) ), + aSlider = aContainer.find( '.iris-slider-offset-alpha' ), + controls = { + aContainer: aContainer, + aSlider: aSlider + }; + + // 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 ) { + el.width( parseInt( self.options.defaultWidth+100 ) ); + } + + // Push new controls + $.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) - 1 - stripsMargin; + + $.each( [ 'aContainer', 'strip' ], function( k, v ) { + self.controls[v].width( stripsWidth ).css({ 'margin-left': stripsMargin + 'px' }); + }); + + // Add new slider + self._initControls(); + + // For updated widget + self._change(); + } + }, + _initControls: function() { + this._super(); + + if ( this.options.alpha ) { + 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 ) { + // Update alpha value + self._color._alpha = parseFloat( ui.value/100 ); + self._change.apply( self, arguments ); + } + }); + } + }, + _change: function() { + this._super(); + var self = this, + el = self.element; + + if ( this.options.alpha ) { + 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, + 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 + ')' }); + + if ( target.hasClass('wp-picker-open') ) { + // Update alpha value + controls.aSlider.slider( 'value', alpha ); + + /** + * Disabled change opacity in default slider Saturation ( only is alpha enabled ) + * and change input width for view all value + */ + if ( self._color._alpha < 1 ) { + 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+50 ) ); + } else { + el.width( defaultWidth ); + } + } + } + + 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._change(); + }); + } + }, + _addInputListeners: function( input ) { + var self = this, + debounceTimeout = 700, // originally set to 100, but some user perceive it as "jumps to random colors at third digit" + callback = function( event ){ + var color = new Color( 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 !== '' ) { + 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}$/ ) ) ) { + self._setOption( 'color', color.toString() ); + } + } + } + }; + + input.on( 'change', callback ).on( 'keyup', self._debounce( callback, debounceTimeout ) ); + + // If we initialized hidden, show on first focus. The rest is up to you. + if ( self.options.hide ) { + input.one( 'focus', function() { + self.show(); + }); + } + } + } ); +}( jQuery ) ); + +// Auto Call plugin is class is color-picker +jQuery( document ).ready( function( $ ) { + $( '.color-picker' ).wpColorPicker(); +} ); \ No newline at end of file diff --git a/assets/dashicons-select.css b/assets/dashicons-select.css new file mode 100644 index 0000000..e69de29 diff --git a/assets/dashicons-select.js b/assets/dashicons-select.js new file mode 100644 index 0000000..14e102b --- /dev/null +++ b/assets/dashicons-select.js @@ -0,0 +1,41 @@ +/** + * Created by shramee on 26/2/16. + */ +( function ( $ ) { + $.fn.dashicons = ['menu','admin-site','dashboard','admin-post','admin-media','admin-links','admin-page','admin-comments','admin-appearance','admin-plugins','admin-users','admin-tools','admin-settings','admin-network','admin-home','admin-generic','admin-collapse','filter','admin-customizer','admin-multisite','welcome-write-blog','welcome-add-page','welcome-view-site','welcome-widgets-menus','welcome-comments','welcome-learn-more','format-aside','format-image','format-gallery','format-video','format-status','format-quote','format-chat','format-audio','camera','images-alt','images-alt2','video-alt','video-alt2','video-alt3','media-archive','media-audio','media-code','media-default','media-document','media-interactive','media-spreadsheet','media-text','media-video','playlist-audio','playlist-video','controls-play','controls-pause','controls-forward','controls-skipforward','controls-back','controls-skipback','controls-repeat','controls-volumeon','controls-volumeoff','image-crop','image-rotate','image-rotate-left','image-rotate-right','image-flip-vertical','image-flip-horizontal','image-filter','undo','redo','editor-bold','editor-italic','editor-ul','editor-ol','editor-quote','editor-alignleft','editor-aligncenter','editor-alignright','editor-insertmore','editor-spellcheck','editor-expand','editor-contract','editor-kitchensink','editor-underline','editor-justify','editor-textcolor','editor-paste-word','editor-paste-text','editor-removeformatting','editor-video','editor-customchar','editor-outdent','editor-indent','editor-help','editor-strikethrough','editor-unlink','editor-rtl','editor-break','editor-code','editor-paragraph','editor-table','align-left','align-right','align-center','align-none','lock','unlock','calendar','calendar-alt','visibility','hidden','post-status','edit','trash','sticky','external','arrow-up','arrow-down','arrow-right','arrow-left','arrow-up-alt','arrow-down-alt','arrow-right-alt','arrow-left-alt','arrow-up-alt2','arrow-down-alt2','arrow-right-alt2','arrow-left-alt2','sort','leftright','randomize','list-view','exerpt-view','grid-view','share','share-alt','share-alt2','twitter','rss','email','email-alt','facebook','facebook-alt','googleplus','networking','hammer','art','migrate','performance','universal-access','universal-access-alt','tickets','nametag','clipboard','heart','megaphone','schedule','wordpress','wordpress-alt','pressthis','update','screenoptions','info','cart','feedback','cloud','translation','tag','category','archive','tagcloud','text','yes','no','no-alt','plus','plus-alt','minus','dismiss','marker','star-filled','star-half','star-empty','flag','warning','location','location-alt','vault','shield','shield-alt','sos','search','slides','analytics','chart-pie','chart-bar','chart-line','chart-area','groups','businessman','id','id-alt','products','awards','forms','testimonial','portfolio','book','book-alt','download','upload','backup','clock','lightbulb','microphone','desktop','tablet','smartphone','phone','index-card','carrot','building','store','album','palmtree','tickets-alt','money','smiley','thumbs-up','thumbs-down','layout']; + $.fn.dashiconSelector = function () { + var $i, + $di = $( '
' ).addClass( 'dashicons-all-icons' ).css( 'display', 'none' ), + $diwrap = $( '
' ).addClass( 'dashicons-all-icons-wrap' ).css( 'display', 'inline-block' ), + $btn = $( '