WordPress.org

Make WordPress Core

Changeset 20120


Ignore:
Timestamp:
03/06/12 02:03:50 (2 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.