home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress2 / wp-admin / js / color-picker.js < prev    next >
Encoding:
Text File  |  2017-09-03  |  10.0 KB  |  364 lines
  1. /* global wpColorPickerL10n */
  2. ( function( $, undef ) {
  3.  
  4.     var ColorPicker,
  5.         _before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',
  6.         _after = '<div class="wp-picker-holder" />',
  7.         _wrap = '<div class="wp-picker-container" />',
  8.         _button = '<input type="button" class="button button-small" />',
  9.         _wrappingLabel = '<label></label>',
  10.         _wrappingLabelText = '<span class="screen-reader-text"></span>';
  11.  
  12.     /**
  13.      * @summary Creates a jQuery UI color picker.
  14.      *
  15.      * Creates a jQuery UI color picker that is used in the theme customizer.
  16.      *
  17.      * @since 3.5.0
  18.      */
  19.     ColorPicker = {
  20.         options: {
  21.             defaultColor: false,
  22.             change: false,
  23.             clear: false,
  24.             hide: true,
  25.             palettes: true,
  26.             width: 255,
  27.             mode: 'hsv',
  28.             type: 'full',
  29.             slider: 'horizontal'
  30.         },
  31.         /**
  32.          * @summary Creates a color picker that only allows you to adjust the hue.
  33.          *
  34.          * @since 3.5.0
  35.          *
  36.          * @access private
  37.          *
  38.          * @returns {void}
  39.          */
  40.         _createHueOnly: function() {
  41.             var self = this,
  42.                 el = self.element,
  43.                 color;
  44.  
  45.             el.hide();
  46.  
  47.             // Set the saturation to the maximum level.
  48.             color = 'hsl(' + el.val() + ', 100, 50)';
  49.  
  50.             // Create an instance of the color picker, using the hsl mode.
  51.             el.iris( {
  52.                 mode: 'hsl',
  53.                 type: 'hue',
  54.                 hide: false,
  55.                 color: color,
  56.                 /**
  57.                  * @summary Handles the onChange event if one has been defined in the options.
  58.                  *
  59.                  * @param {Event} event    The event that's being called.
  60.                  * @param {HTMLElement} ui The HTMLElement containing the color picker.
  61.                  *
  62.                  * @returns {void}
  63.                  */
  64.                 change: function( event, ui ) {
  65.                     if ( $.isFunction( self.options.change ) ) {
  66.                         self.options.change.call( this, event, ui );
  67.                     }
  68.                 },
  69.                 width: self.options.width,
  70.                 slider: self.options.slider
  71.             } );
  72.         },
  73.         /**
  74.          * @summary Creates the color picker.
  75.          *
  76.          * Creates the color picker, sets default values, css classes and wraps it all in HTML.
  77.          *
  78.          * @since 3.5.0
  79.          *
  80.          * @access private
  81.          *
  82.          * @returns {void}
  83.          */
  84.         _create: function() {
  85.             // Return early if Iris support is missing.
  86.             if ( ! $.support.iris ) {
  87.                 return;
  88.             }
  89.  
  90.             var self = this,
  91.                 el = self.element;
  92.  
  93.             // Override default options with options bound to the element.
  94.             $.extend( self.options, el.data() );
  95.  
  96.             // Create a color picker which only allows adjustments to the hue.
  97.             if ( self.options.type === 'hue' ) {
  98.                 return self._createHueOnly();
  99.             }
  100.  
  101.             // Bind the close event.
  102.             self.close = $.proxy( self.close, self );
  103.  
  104.             self.initialValue = el.val();
  105.  
  106.             // Add a CSS class to the input field.
  107.             el.addClass( 'wp-color-picker' );
  108.  
  109.             /*
  110.              * Check if there's already a wrapping label, e.g. in the Customizer.
  111.              * If there's no label, add a default one to match the Customizer template.
  112.              */
  113.             if ( ! el.parent( 'label' ).length ) {
  114.                 // Wrap the input field in the default label.
  115.                 el.wrap( _wrappingLabel );
  116.                 // Insert the default label text.
  117.                 self.wrappingLabelText = $( _wrappingLabelText )
  118.                     .insertBefore( el )
  119.                     .text( wpColorPickerL10n.defaultLabel );
  120.             }
  121.  
  122.             /*
  123.              * At this point, either it's the standalone version or the Customizer
  124.              * one, we have a wrapping label to use as hook in the DOM, let's store it.
  125.              */
  126.             self.wrappingLabel = el.parent();
  127.  
  128.             // Wrap the label in the main wrapper.
  129.             self.wrappingLabel.wrap( _wrap );
  130.             // Store a reference to the main wrapper.
  131.             self.wrap = self.wrappingLabel.parent();
  132.             // Set up the toggle button and insert it before the wrapping label.
  133.             self.toggler = $( _before )
  134.                 .insertBefore( self.wrappingLabel )
  135.                 .css( { backgroundColor: self.initialValue } );
  136.             // Set the toggle button span element text.
  137.             self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick );
  138.             // Set up the Iris container and insert it after the wrapping label.
  139.             self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );
  140.             // Store a reference to the Clear/Default button.
  141.             self.button = $( _button );
  142.  
  143.             // Set up the Clear/Default button.
  144.             if ( self.options.defaultColor ) {
  145.                 self.button
  146.                     .addClass( 'wp-picker-default' )
  147.                     .val( wpColorPickerL10n.defaultString )
  148.                     .attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel );
  149.             } else {
  150.                 self.button
  151.                     .addClass( 'wp-picker-clear' )
  152.                     .val( wpColorPickerL10n.clear )
  153.                     .attr( 'aria-label', wpColorPickerL10n.clearAriaLabel );
  154.             }
  155.  
  156.             // Wrap the wrapping label in its wrapper and append the Clear/Default button.
  157.             self.wrappingLabel
  158.                 .wrap( '<span class="wp-picker-input-wrap hidden" />' )
  159.                 .after( self.button );
  160.  
  161.             /*
  162.              * The input wrapper now contains the label+input+Clear/Default button.
  163.              * Store a reference to the input wrapper: we'll use this to toggle
  164.              * the controls visibility.
  165.              */
  166.             self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
  167.  
  168.             el.iris( {
  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 ) {
  188.                     self.toggler.css( { backgroundColor: ui.color.toString() } );
  189.  
  190.                     if ( $.isFunction( self.options.change ) ) {
  191.                         self.options.change.call( this, event, ui );
  192.                     }
  193.                 }
  194.             } );
  195.  
  196.             el.val( self.initialValue );
  197.             self._addListeners();
  198.  
  199.             // Force the color picker to always be closed on initial load.
  200.             if ( ! self.options.hide ) {
  201.                 self.toggler.click();
  202.             }
  203.         },
  204.         /**
  205.          * @summary Binds event listeners to the color picker.
  206.          *
  207.          * @since 3.5.0
  208.          *
  209.          * @access private
  210.          *
  211.          * @returns {void}
  212.          */
  213.         _addListeners: function() {
  214.             var self = this;
  215.  
  216.             /**
  217.              * @summary Prevent any clicks inside this widget from leaking to the top and closing it.
  218.              *
  219.              * @since 3.5.0
  220.              *
  221.              * @param {Event} event The event that's being called.
  222.              *
  223.              * @returs {void}
  224.              */
  225.             self.wrap.on( 'click.wpcolorpicker', function( event ) {
  226.                 event.stopPropagation();
  227.             });
  228.  
  229.             /**
  230.              * @summary Open or close the color picker depending on the class.
  231.              *
  232.              * @since 3.5
  233.              */
  234.             self.toggler.click( function(){
  235.                 if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
  236.                     self.close();
  237.                 } else {
  238.                     self.open();
  239.                 }
  240.             });
  241.  
  242.             /**
  243.              * @summary Checks if value is empty when changing the color in the color picker.
  244.              *
  245.              * Checks if value is empty when changing the color in the color picker.
  246.              * If so, the background color is cleared.
  247.              *
  248.              * @since 3.5.0
  249.              *
  250.              * @param {Event} event The event that's being called.
  251.              *
  252.              * @returns {void}
  253.              */
  254.             self.element.change( function( event ) {
  255.                 var me = $( this ),
  256.                     val = me.val();
  257.  
  258.                 if ( val === '' || val === '#' ) {
  259.                     self.toggler.css( 'backgroundColor', '' );
  260.                     // Fire clear callback if we have one.
  261.                     if ( $.isFunction( self.options.clear ) ) {
  262.                         self.options.clear.call( this, event );
  263.                     }
  264.                 }
  265.             });
  266.  
  267.             /**
  268.              * @summary Enables the user to clear or revert the color in the color picker.
  269.              *
  270.              * Enables the user to either clear the color in the color picker or revert back to the default color.
  271.              *
  272.              * @since 3.5.0
  273.              *
  274.              * @param {Event} event The event that's being called.
  275.              *
  276.              * @returns {void}
  277.              */
  278.             self.button.click( function( event ) {
  279.                 var me = $( this );
  280.                 if ( me.hasClass( 'wp-picker-clear' ) ) {
  281.                     self.element.val( '' );
  282.                     self.toggler.css( 'backgroundColor', '' );
  283.                     if ( $.isFunction( self.options.clear ) ) {
  284.                         self.options.clear.call( this, event );
  285.                     }
  286.                 } else if ( me.hasClass( 'wp-picker-default' ) ) {
  287.                     self.element.val( self.options.defaultColor ).change();
  288.                 }
  289.             });
  290.         },
  291.         /**
  292.          * @summary Opens the color picker dialog.
  293.          *
  294.          * @since 3.5.0
  295.          *
  296.          * @returns {void}
  297.          */
  298.         open: function() {
  299.             this.element.iris( 'toggle' );
  300.             this.inputWrapper.removeClass( 'hidden' );
  301.             this.wrap.addClass( 'wp-picker-active' );
  302.             this.toggler
  303.                 .addClass( 'wp-picker-open' )
  304.                 .attr( 'aria-expanded', 'true' );
  305.             $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
  306.         },
  307.         /**
  308.          * @summary Closes the color picker dialog.
  309.          *
  310.          * @since 3.5.0
  311.          *
  312.          * @returns {void}
  313.          */
  314.         close: function() {
  315.             this.element.iris( 'toggle' );
  316.             this.inputWrapper.addClass( 'hidden' );
  317.             this.wrap.removeClass( 'wp-picker-active' );
  318.             this.toggler
  319.                 .removeClass( 'wp-picker-open' )
  320.                 .attr( 'aria-expanded', 'false' );
  321.             $( 'body' ).off( 'click.wpcolorpicker', this.close );
  322.         },
  323.         /**
  324.          * @summary Returns iris object or sets new color.
  325.          *
  326.          * Returns the iris object if no new color is provided. If a new color is provided, it sets the new color.
  327.          *
  328.          * @param newColor {string|*} The new color to use. Can be undefined.
  329.          *
  330.          * @since 3.5.0
  331.          *
  332.          * @returns {string} The element's color
  333.          */
  334.         color: function( newColor ) {
  335.             if ( newColor === undef ) {
  336.                 return this.element.iris( 'option', 'color' );
  337.             }
  338.             this.element.iris( 'option', 'color', newColor );
  339.         },
  340.         /**
  341.          * @summary Returns iris object or sets new default color.
  342.          *
  343.          * Returns the iris object if no new default color is provided.
  344.          * If a new default color is provided, it sets the new default color.
  345.          *
  346.          * @param newDefaultColor {string|*} The new default color to use. Can be undefined.
  347.          *
  348.          * @since 3.5.0
  349.          *
  350.          * @returns {boolean|string} The element's color.
  351.          */
  352.         defaultColor: function( newDefaultColor ) {
  353.             if ( newDefaultColor === undef ) {
  354.                 return this.options.defaultColor;
  355.             }
  356.  
  357.             this.options.defaultColor = newDefaultColor;
  358.         }
  359.     };
  360.  
  361.     // Register the color picker as a widget.
  362.     $.widget( 'wp.wpColorPicker', ColorPicker );
  363. }( jQuery ) );
  364.