Make WordPress Core

Changeset 20120


Ignore:
Timestamp:
03/06/2012 02:03:50 AM (13 years ago)
Author:
koopersmith
Message:

Theme Customizer: Add working color pickers. First pass. see #19910.

Location:
trunk/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize-setting.php

    r20028 r20120  
    341341            case 'color':
    342342                ?>
    343                 <label><?php echo esc_html( $this->label ); ?><br/>
    344                     <span class="hex-prepend">#</span>
    345                     <input type="text" class="hex-input" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
    346                     <a href="#" class="pickcolor hex-color-example"></a>
     343                <label>
     344                    <span><?php echo esc_html( $this->label ); ?></span>
     345                    <div class="color-picker">
     346                        <input class="color-picker-value" type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
     347                        <a href="#"></a>
     348                        <div class="color-picker-controls">
     349                            <div class="farbtastic-placeholder"></div>
     350                            <span>#</span>
     351                            <input type="text" />
     352                        </div>
     353                    </div>
    347354                </label>
    348355                <?php
  • trunk/wp-includes/css/customize-controls.dev.css

    r20110 r20120  
    227227}
    228228
    229 .customize-section .hex-prepend {
     229/*
     230 * Color Picker
     231 */
     232
     233.customize-section .color-picker {
     234    margin-top: 4px;
     235}
     236
     237.customize-section .color-picker a {
     238    display: block;
     239    height: 20px;
     240    width: 40px;
     241    border: solid 3px rgba( 0, 0, 0, 0.1 );
     242    background-color: #fff;
     243
     244    -webkit-border-radius: 3px;
     245    border-radius: 3px;
     246}
     247
     248.customize-section .color-picker .color-picker-controls {
     249    display: none;
     250}
     251.customize-section .color-picker span {
    230252    float: left;
    231253    display: block;
     
    241263}
    242264
    243 .customize-section input[type="text"].hex-input {
     265.customize-section .color-picker input[type="text"] {
    244266    -webkit-border-radius: 0 3px 3px 0;
    245267    border-radius: 0 3px 3px 0;
    246268    width: 150px;
    247269}
    248 
    249 .customize-section .hex-color-example {
    250     border: 1px solid #dfdfdf;
    251     -webkit-border-radius: 3px;
    252     border-radius: 3px;
    253     padding: 3px 14px;
    254     background-color: #ef45da
    255 }
  • trunk/wp-includes/js/customize-controls.dev.js

    r20106 r20120  
    127127            return;
    128128
    129         var previewer,
    130             controls = $('[name^="' + api.settings.prefix + '"]');
     129        var controls = $('[name^="' + api.settings.prefix + '"]'),
     130            previewer, pickers, validateColor;
    131131
    132132        // Initialize Previewer
     
    161161        });
    162162
     163        // Set up color pickers
     164        pickers = $('.color-picker');
     165        validateColor = function( to ) {
     166            return /^[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test( to ) ? to : null;
     167        };
     168
     169        $( '.farbtastic-placeholder', pickers ).each( function() {
     170            var picker = $(this),
     171                text   = new api.Element( picker.siblings('input') ),
     172                parent = picker.parent(),
     173                toggle = parent.siblings('a'),
     174                value  = api( parent.siblings('input').prop('name').replace( api.settings.prefix, '' ) ),
     175                farb;
     176
     177            value.validate = validateColor;
     178            text.link( value );
     179            value.link( text );
     180
     181            farb = $.farbtastic( this, function( color ) {
     182                value.set( color.replace( '#', '' ) );
     183            });
     184
     185            value.bind( function( color ) {
     186                color = '#' + color;
     187                toggle.css( 'background', color );
     188                farb.setColor( color );
     189            });
     190        });
     191
     192        $('.color-picker a').click( function(e) {
     193            $(this).siblings('div').toggle();
     194        });
     195
    163196        // Fetch prefixed settings.
    164197        $('[name^="' + api.settings.prefix + '"]').each( function() {
Note: See TracChangeset for help on using the changeset viewer.