Changeset 8760

Show
Ignore:
Timestamp:
08/28/08 17:42:21 (3 months ago)
Author:
ryan
Message:

Use farbtastic for custom header color picker. Props rmmccue. see #5591

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • trunk/wp-admin/custom-header.php

    r8656 r8760  
    4545 
    4646        add_action("admin_print_scripts-$page", array(&$this, 'js_includes')); 
     47        add_action("admin_print_styles-$page", array(&$this, 'css_includes')); 
    4748        add_action("admin_head-$page", array(&$this, 'take_action'), 50); 
    4849        add_action("admin_head-$page", array(&$this, 'js'), 50); 
    …… 
    7778 
    7879        if ( 1 == $step ) 
    79             wp_enqueue_script('colorpicker'); 
     80            wp_enqueue_script('farbtastic'); 
    8081        elseif ( 2 == $step ) 
    8182            wp_enqueue_script('cropper'); 
     83    } 
     84 
     85    /** 
     86     * Setup the enqueue for the CSS files 
     87     * 
     88     * @since 2.7 
     89     */ 
     90    function css_includes() { 
     91        $step = $this->step(); 
     92 
     93        if ( 1 == $step ) { 
     94            wp_enqueue_style('farbtastic'); 
     95        } 
    8296    } 
    8397 
    …… 
    124138    function js_1() { ?> 
    125139<script type="text/javascript"> 
    126     var cp = new ColorPicker(); 
     140    var buttons = ['#name', '#desc', '#pickcolor', '#defaultcolor']; 
     141    var farbtastic; 
    127142 
    128143    function pickColor(color) { 
    129         $('name').style.color = color; 
    130         $('desc').style.color = color; 
    131         $('textcolor').value = color; 
    132     } 
    133     function PopupWindow_hidePopup(magicword) { 
    134         if ( magicword != 'prettyplease' ) 
    135             return false; 
    136         if (this.divName != null) { 
    137             if (this.use_gebi) { 
    138                 document.getElementById(this.divName).style.visibility = "hidden"; 
    139             } 
    140             else if (this.use_css) { 
    141                 document.all[this.divName].style.visibility = "hidden"; 
    142             } 
    143             else if (this.use_layers) { 
    144                 document.layers[this.divName].visibility = "hidden"; 
    145             } 
    146         } 
    147         else { 
    148             if (this.popupWindow && !this.popupWindow.closed) { 
    149                 this.popupWindow.close(); 
    150                 this.popupWindow = null; 
    151             } 
    152         } 
    153         return false; 
    154     } 
    155     function colorSelect(t,p) { 
    156         if ( cp.p == p && document.getElementById(cp.divName).style.visibility != "hidden" ) { 
    157             cp.hidePopup('prettyplease'); 
    158         } else { 
    159             cp.p = p; 
    160             cp.select(t,p); 
    161         } 
    162     } 
     144        jQuery('#name').css('color', color); 
     145        jQuery('#desc').css('color', color); 
     146        jQuery('#textcolor').val(color); 
     147        farbtastic.setColor(color); 
     148    } 
     149     
     150    jQuery(document).ready(function() { 
     151        jQuery('#pickcolor').click(function() { 
     152            jQuery('#colorPickerDiv').show(); 
     153        }); 
     154         
     155        jQuery('#hidetext').click(function() { 
     156            toggle_text(); 
     157        }); 
     158         
     159        farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); }); 
     160        pickColor('#<?php echo get_theme_mod('header_textcolor', HEADER_TEXTCOLOR); ?>'); 
     161         
     162        <?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?> 
     163        toggle_text(); 
     164        <?php } ?> 
     165    }); 
     166     
     167    jQuery(document).mousedown(function(){ 
     168        // Make the picker disappear, since we're using it in an independant div 
     169        hide_picker(); 
     170    }); 
     171 
    163172    function colorDefault() { 
    164173        pickColor('#<?php echo HEADER_TEXTCOLOR; ?>'); 
    165174    } 
    166175 
    167     function hide_text() { 
    168         $('name').style.display = 'none'; 
    169         $('desc').style.display = 'none'; 
    170         $('pickcolor').style.display = 'none'; 
    171         $('defaultcolor').style.display = 'none'; 
    172         $('textcolor').value = 'blank'; 
    173         $('hidetext').value = '<?php _e('Show Text'); ?>'; 
    174 //      $('hidetext').onclick = 'show_text()'; 
    175         Event.observe( $('hidetext'), 'click', show_text ); 
    176     } 
    177  
    178     function show_text() { 
    179         $('name').style.display = 'block'; 
    180         $('desc').style.display = 'block'; 
    181         $('pickcolor').style.display = 'inline'; 
    182         $('defaultcolor').style.display = 'inline'; 
    183         $('textcolor').value = '<?php echo HEADER_TEXTCOLOR; ?>'; 
    184         $('hidetext').value = '<?php _e('Hide Text'); ?>'; 
    185         Event.stopObserving( $('hidetext'), 'click', show_text ); 
    186         Event.observe( $('hidetext'), 'click', hide_text ); 
    187     } 
    188  
    189     <?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?> 
    190 Event.observe( window, 'load', hide_text ); 
    191     <?php } ?> 
     176    function hide_picker(what) { 
     177        var update = false; 
     178        jQuery('#colorPickerDiv').each(function(){ 
     179            var id = jQuery(this).attr('id'); 
     180            if (id == what) { 
     181                return; 
     182            } 
     183            var display = jQuery(this).css('display'); 
     184            if (display == 'block') { 
     185                jQuery(this).fadeOut(2); 
     186            } 
     187        }); 
     188    } 
     189 
     190    function toggle_text(force) { 
     191        if(jQuery('#textcolor').val() == 'blank') { 
     192            //Show text 
     193            jQuery( buttons.toString() ).show(); 
     194            jQuery('#textcolor').val('<?php echo HEADER_TEXTCOLOR; ?>'); 
     195            jQuery('#hidetext').val('<?php _e('Hide Text'); ?>'); 
     196        } 
     197        else { 
     198            //Hide text 
     199            jQuery( buttons.toString() ).hide(); 
     200            jQuery('#textcolor').val('blank'); 
     201            jQuery('#hidetext').val('<?php _e('Show Text'); ?>'); 
     202        } 
     203    } 
     204 
     205 
    192206 
    193207</script> 
    …… 
    203217<script type="text/javascript"> 
    204218    function onEndCrop( coords, dimensions ) { 
    205         $( 'x1' ).value = coords.x1; 
    206         $( 'y1' ).value = coords.y1; 
    207         $( 'x2' ).value = coords.x2; 
    208         $( 'y2' ).value = coords.y2; 
    209         $( 'width' ).value = dimensions.width; 
    210         $( 'height' ).value = dimensions.height; 
     219        jQuery( '#x1' ).val(coords.x1); 
     220        jQuery( '#y1' ).val(coords.y1); 
     221        jQuery( '#x2' ).val(coords.x2); 
     222        jQuery( '#y2' ).val(coords.y2); 
     223        jQuery( '#width' ).val(dimensions.width); 
     224        jQuery( '#height' ).val(dimensions.height); 
    211225    } 
    212226 
    213227    // with a supplied ratio 
    214     Event.observe( 
    215         window, 
    216         'load', 
    217         function() { 
    218             var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>; 
    219             var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>; 
    220             var ratio = xinit / yinit; 
    221             var ximg = $('upload').width; 
    222             var yimg = $('upload').height; 
    223             if ( yimg < yinit || ximg < xinit ) { 
    224                 if ( ximg / yimg > ratio ) { 
    225                     yinit = yimg; 
    226                     xinit = yinit * ratio; 
    227                 } else { 
    228                     xinit = ximg; 
    229                     yinit = xinit / ratio; 
    230                 } 
     228    jQuery(document).ready(function() { 
     229        var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>; 
     230        var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>; 
     231        var ratio = xinit / yinit; 
     232        var ximg = jQuery('#upload').width(); 
     233        var yimg = jQuery('#upload').height(); 
     234        if ( yimg < yinit || ximg < xinit ) { 
     235            if ( ximg / yimg > ratio ) { 
     236                yinit = yimg; 
     237                xinit = yinit * ratio; 
     238            } else { 
     239                xinit = ximg; 
     240                yinit = xinit / ratio; 
    231241            } 
    232            new Cropper.Img( 
    233                'upload', 
    234                { 
    235                    ratioDim: { x: xinit, y: yinit }, 
    236                    displayOnInit: true, 
    237                    onEndCrop: onEndCrop 
    238                 } 
    239             ) 
    240         } 
    241     ); 
     242        } 
     243        new Cropper.Img( 
     244            'upload', 
     245            { 
     246                ratioDim: { x: xinit, y: yinit }, 
     247                displayOnInit: true, 
     248                onEndCrop: onEndCrop 
     249            } 
     250        ) 
     251    }); 
    242252</script> 
    243253<?php 
    …… 
    267277<form method="post" action="<?php echo admin_url('themes.php?page=custom-header&amp;updated=true') ?>"> 
    268278<input type="button" value="<?php _e('Hide Text'); ?>" onclick="hide_text()" id="hidetext" /> 
    269 <input type="button" value="<?php _e('Select a Text Color'); ?>" onclick="colorSelect($('textcolor'), 'pickcolor')" id="pickcolor" /><input type="button" value="<?php _e('Use Original Color'); ?>" onclick="colorDefault()" id="defaultcolor" /> 
     279<input type="button" value="<?php _e('Select a Text Color'); ?>" id="pickcolor" /><input type="button" value="<?php _e('Use Original Color'); ?>" onclick="colorDefault()" id="defaultcolor" /> 
    270280<?php wp_nonce_field('custom-header') ?> 
    271281<input type="hidden" name="textcolor" id="textcolor" value="#<?php attribute_escape(header_textcolor()) ?>" /><input name="submit" type="submit" value="<?php _e('Save Changes'); ?>" /></form> 
    272282<?php } ?> 
    273283 
    274 <div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;visibility:hidden;"> </div> 
     284<div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;display:none;"> </div> 
    275285</div> 
    276286<div class="wrap"> 

  • trunk/wp-includes/script-loader.php

    r8722 r8760  
    212212        ) ); 
    213213 
     214        $scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' ); 
    214215    } 
    215216} 
    …… 
    246247    $styles->add( 'login', '/wp-admin/css/login.css' ); 
    247248    $styles->add( 'plugin-install', '/wp-admin/css/plugin-install.css' ); 
     249    $styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.2' ); 
    248250 
    249251    foreach ( $rtl_styles as $rtl_style )