Make WordPress Core


Ignore:
Timestamp:
08/28/2008 05:42:21 PM (16 years ago)
Author:
ryan
Message:

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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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">
Note: See TracChangeset for help on using the changeset viewer.