WordPress.org

Make WordPress Core

Ticket #5591: farbtastic.diff

File farbtastic.diff, 50.1 KB (added by rmccue, 11 years ago)

Convert custom-header.php to jQuery

  • wp-admin/css/farbtastic.css

     
     1.farbtastic {
     2  position: relative;
     3}
     4.farbtastic * {
     5  position: absolute;
     6  cursor: crosshair;
     7}
     8.farbtastic, .farbtastic .wheel {
     9  width: 195px;
     10  height: 195px;
     11}
     12.farbtastic .color, .farbtastic .overlay {
     13  top: 47px;
     14  left: 47px;
     15  width: 101px;
     16  height: 101px;
     17}
     18.farbtastic .wheel {
     19  background: url(../images/wheel.png) no-repeat;
     20  width: 195px;
     21  height: 195px;
     22}
     23.farbtastic .overlay {
     24  background: url(../images/mask.png) no-repeat;
     25}
     26.farbtastic .marker {
     27  width: 17px;
     28  height: 17px;
     29  margin: -8px 0 0 -8px;
     30  overflow: hidden;
     31  background: url(../images/marker.png) no-repeat;
     32}
     33 No newline at end of file
  • wp-admin/custom-header.php

     
    4444                $page = add_theme_page(__('Custom Image Header'), __('Custom Image Header'), 'edit_themes', 'custom-header', array(&$this, 'admin_page'));
    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);
    4950                add_action("admin_head-$page", $this->admin_header_callback, 51);
     
    7677                $step = $this->step();
    7778
    7879                if ( 1 == $step )
    79                         wp_enqueue_script('colorpicker');
     80                        wp_enqueue_script('farbtastic');
    8081                elseif ( 2 == $step )
    8182                        wp_enqueue_script('cropper');
    8283        }
    8384
    8485        /**
     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                }
     96        }
     97
     98        /**
    8599         * Execute custom header modification.
    86100         *
    87101         * @since unknown
     
    123137         */
    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;
     144                jQuery('#name').css('color', color);
     145                jQuery('#desc').css('color', color);
     146                farbtastic.setColor(color);
    132147        }
    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";
     148       
     149        jQuery(document).ready(function() {
     150                jQuery('#pickcolor').click(function() {
     151                        jQuery('#colorPickerDiv').show();
     152                });
     153               
     154                jQuery('#hidetext').click(function() {
     155                        toggle_text();
     156                });
     157               
     158                farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); });
     159                pickColor('#<?php echo HEADER_TEXTCOLOR; ?>');
     160               
     161                <?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?>
     162                toggle_text();
     163                <?php } ?>
     164        });
     165       
     166        jQuery(document).mousedown(function(){
     167                // Make the picker disappear, since we're using it in an independant div
     168                hide_picker();
     169        });
     170
     171        function hide_picker(what) {
     172                var update = false;
     173                jQuery('#colorPickerDiv').each(function(){
     174                        var id = jQuery(this).attr('id');
     175                        if (id == what) {
     176                                return;
    139177                        }
    140                         else if (this.use_css) {
    141                                 document.all[this.divName].style.visibility = "hidden";
     178                        var display = jQuery(this).css('display');
     179                        if (display == 'block') {
     180                                jQuery(this).fadeOut(2);
    142181                        }
    143                         else if (this.use_layers) {
    144                                 document.layers[this.divName].visibility = "hidden";
    145                         }
     182                });
     183        }
     184
     185        function toggle_text(force) {
     186                if(jQuery('#textcolor').val() == 'blank') {
     187                        //Show text
     188                        jQuery( buttons.toString() ).show();
     189                        jQuery('#textcolor').val('<?php echo HEADER_TEXTCOLOR; ?>');
     190                        jQuery('#hidetext').val('<?php _e('Hide Text'); ?>');
    146191                }
    147192                else {
    148                         if (this.popupWindow && !this.popupWindow.closed) {
    149                                 this.popupWindow.close();
    150                                 this.popupWindow = null;
    151                         }
     193                        //Hide text
     194                        jQuery( buttons.toString() ).hide();
     195                        jQuery('#textcolor').val('blank');
     196                        jQuery('#hidetext').val('<?php _e('Show Text'); ?>');
    152197                }
    153                 return false;
    154198        }
    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         }
    163         function colorDefault() {
    164                 pickColor('#<?php echo HEADER_TEXTCOLOR; ?>');
    165         }
    166199
    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         }
    177200
    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         }
    188201
    189         <?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?>
    190 Event.observe( window, 'load', hide_text );
    191         <?php } ?>
    192 
    193202</script>
    194203<?php
    195204        }
     
    202211        function js_2() { ?>
    203212<script type="text/javascript">
    204213        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;
     214                jQuery( '#x1' ).val(coords.x1);
     215                jQuery( '#y1' ).val(coords.y1);
     216                jQuery( '#x2' ).val(coords.x2);
     217                jQuery( '#y2' ).val(coords.y2);
     218                jQuery( '#width' ).val(dimensions.width);
     219                jQuery( '#height' ).val(dimensions.height);
    211220        }
    212221
    213222        // 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                                 }
     223        jQuery(document).ready(function() {
     224                var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>;
     225                var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>;
     226                var ratio = xinit / yinit;
     227                var ximg = $('upload').width;
     228                var yimg = $('upload').height;
     229                if ( yimg < yinit || ximg < xinit ) {
     230                        if ( ximg / yimg > ratio ) {
     231                                yinit = yimg;
     232                                xinit = yinit * ratio;
     233                        } else {
     234                                xinit = ximg;
     235                                yinit = xinit / ratio;
    231236                        }
    232                         new Cropper.Img(
    233                                 'upload',
    234                                 {
    235                                         ratioDim: { x: xinit, y: yinit },
    236                                         displayOnInit: true,
    237                                         onEndCrop: onEndCrop
    238                                 }
    239                         )
    240237                }
    241         );
     238                new Cropper.Img(
     239                        'upload',
     240                        {
     241                                ratioDim: { x: xinit, y: yinit },
     242                                displayOnInit: true,
     243                                onEndCrop: onEndCrop
     244                        }
     245                )
     246        });
    242247</script>
    243248<?php
    244249        }
     
    266271<?php if ( !defined( 'NO_HEADER_TEXT' ) ) { ?>
    267272<form method="post" action="<?php echo admin_url('themes.php?page=custom-header&amp;updated=true') ?>">
    268273<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" />
     274<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" />
    270275<?php wp_nonce_field('custom-header') ?>
    271276<input type="hidden" name="textcolor" id="textcolor" value="#<?php attribute_escape(header_textcolor()) ?>" /><input name="submit" type="submit" value="<?php _e('Save Changes'); ?>" /></form>
    272277<?php } ?>
    273278
    274 <div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;visibility:hidden;"> </div>
     279<div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;display:none;"> </div>
    275280</div>
    276281<div class="wrap">
    277282<h2><?php _e('Upload New Header Image'); ?></h2><p><?php _e('Here you can upload a custom header image to be shown at the top of your blog instead of the default one. On the next screen you will be able to crop the image.'); ?></p>
  • wp-admin/js/farbtastic.js

    Cannot display: file marked as a binary type.
    svn:mime-type = application/octet-stream
    
    Property changes on: wp-admin\images\marker.png
    ___________________________________________________________________
    Name: svn:mime-type
       + application/octet-stream
    
    Cannot display: file marked as a binary type.
    svn:mime-type = application/octet-stream
    
    Property changes on: wp-admin\images\mask.png
    ___________________________________________________________________
    Name: svn:mime-type
       + application/octet-stream
    
    Cannot display: file marked as a binary type.
    svn:mime-type = application/octet-stream
    
    Property changes on: wp-admin\images\wheel.png
    ___________________________________________________________________
    Name: svn:mime-type
       + application/octet-stream
    
     
     1// $Id: farbtastic.js,v 1.2 2007/01/08 22:53:01 unconed Exp $
     2// Farbtastic 1.2
     3
     4var farbtastic_click = false;
     5
     6jQuery.fn.farbtastic = function (callback) {
     7  jQuery.farbtastic(this, callback);
     8  return this;
     9};
     10
     11jQuery.farbtastic = function (container, callback) {
     12  var container = jQuery(container).get(0);
     13  return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback));
     14}
     15
     16jQuery._farbtastic = function (container, callback) {
     17  // Store farbtastic object
     18  var fb = this;
     19
     20  // Insert markup
     21  jQuery(container).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>');
     22  var e = jQuery('.farbtastic', container);
     23  fb.wheel = jQuery('.wheel', container).get(0);
     24  // Dimensions
     25  fb.radius = 84;
     26  fb.square = 100;
     27  fb.width = 194;
     28 
     29  // Fix background PNGs in IE6
     30  if (navigator.appVersion.match(/MSIE [0-6]\./)) {
     31    jQuery('*', e).each(function () {
     32      if (this.currentStyle.backgroundImage != 'none') {
     33        var image = this.currentStyle.backgroundImage;
     34        image = this.currentStyle.backgroundImage.substring(5, image.length - 2);
     35        jQuery(this).css({
     36          'backgroundImage': 'none',
     37          'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
     38        });
     39      }
     40    });
     41  }
     42
     43  /**
     44   * Link to the given element(s) or callback.
     45   */
     46  fb.linkTo = function (callback) {
     47    // Unbind previous nodes
     48    if (typeof fb.callback == 'object') {
     49      jQuery(fb.callback).unbind('keyup', fb.updateValue);
     50    }
     51
     52    // Reset color
     53    fb.color = null;
     54
     55    // Bind callback or elements
     56    if (typeof callback == 'function') {
     57      fb.callback = callback;
     58    }
     59    else if (typeof callback == 'object' || typeof callback == 'string') {
     60      fb.callback = jQuery(callback);
     61      fb.callback.bind('keyup', fb.updateValue);
     62      if (fb.callback.get(0).value) {
     63        fb.setColor(fb.callback.get(0).value);
     64      }
     65    }
     66    return this;
     67  }
     68  fb.updateValue = function (event) {
     69    if (this.value && this.value != fb.color) {
     70      fb.setColor(this.value);
     71    }
     72  }
     73
     74  /**
     75   * Change color with HTML syntax #123456
     76   */
     77  fb.setColor = function (color) {
     78    var unpack = fb.unpack(color);
     79    if (fb.color != color && unpack) {
     80      fb.color = color;
     81      fb.rgb = unpack;
     82      fb.hsl = fb.RGBToHSL(fb.rgb);
     83      fb.updateDisplay();
     84    }
     85    return this;
     86  }
     87
     88  /**
     89   * Change color with HSL triplet [0..1, 0..1, 0..1]
     90   */
     91  fb.setHSL = function (hsl) {
     92    fb.hsl = hsl;
     93    fb.rgb = fb.HSLToRGB(hsl);
     94    fb.color = fb.pack(fb.rgb);
     95    fb.updateDisplay();
     96    return this;
     97  }
     98
     99  /////////////////////////////////////////////////////
     100
     101  /**
     102   * Retrieve the coordinates of the given event relative to the center
     103   * of the widget.
     104   */
     105  fb.widgetCoords = function (event) {
     106    var x, y;
     107    var el = event.target || event.srcElement;
     108    var reference = fb.wheel;
     109
     110    if (typeof event.offsetX != 'undefined') {
     111      // Use offset coordinates and find common offsetParent
     112      var pos = { x: event.offsetX, y: event.offsetY };
     113
     114      // Send the coordinates upwards through the offsetParent chain.
     115      var e = el;
     116      while (e) {
     117        e.mouseX = pos.x;
     118        e.mouseY = pos.y;
     119        pos.x += e.offsetLeft;
     120        pos.y += e.offsetTop;
     121        e = e.offsetParent;
     122      }
     123
     124      // Look for the coordinates starting from the wheel widget.
     125      var e = reference;
     126      var offset = { x: 0, y: 0 }
     127      while (e) {
     128        if (typeof e.mouseX != 'undefined') {
     129          x = e.mouseX - offset.x;
     130          y = e.mouseY - offset.y;
     131          break;
     132        }
     133        offset.x += e.offsetLeft;
     134        offset.y += e.offsetTop;
     135        e = e.offsetParent;
     136      }
     137
     138      // Reset stored coordinates
     139      e = el;
     140      while (e) {
     141        e.mouseX = undefined;
     142        e.mouseY = undefined;
     143        e = e.offsetParent;
     144      }
     145    }
     146    else {
     147      // Use absolute coordinates
     148      var pos = fb.absolutePosition(reference);
     149      x = (event.pageX || 0*(event.clientX + jQuery('html').get(0).scrollLeft)) - pos.x;
     150      y = (event.pageY || 0*(event.clientY + jQuery('html').get(0).scrollTop)) - pos.y;
     151    }
     152    // Subtract distance to middle
     153    return { x: x - fb.width / 2, y: y - fb.width / 2 };
     154  }
     155
     156  /**
     157   * Mousedown handler
     158   */
     159  fb.mousedown = function (event) {
     160        farbtastic_click = true;
     161    // Capture mouse
     162    if (!document.dragging) {
     163      jQuery(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);
     164      document.dragging = true;
     165    }
     166
     167    // Check which area is being dragged
     168    var pos = fb.widgetCoords(event);
     169    fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square;
     170
     171    // Process
     172    fb.mousemove(event);
     173    return false;
     174  }
     175
     176  /**
     177   * Mousemove handler
     178   */
     179  fb.mousemove = function (event) {
     180    // Get coordinates relative to color picker center
     181    var pos = fb.widgetCoords(event);
     182
     183    // Set new HSL parameters
     184    if (fb.circleDrag) {
     185      var hue = Math.atan2(pos.x, -pos.y) / 6.28;
     186      if (hue < 0) hue += 1;
     187      fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]);
     188    }
     189    else {
     190      var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5));
     191      var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5));
     192      fb.setHSL([fb.hsl[0], sat, lum]);
     193    }
     194    return false;
     195  }
     196
     197  /**
     198   * Mouseup handler
     199   */
     200  fb.mouseup = function () {
     201    // Uncapture mouse
     202        farbtastic_click = false;
     203    jQuery(document).unbind('mousemove', fb.mousemove);
     204    jQuery(document).unbind('mouseup', fb.mouseup);
     205    document.dragging = false;
     206  }
     207
     208  /**
     209   * Update the markers and styles
     210   */
     211  fb.updateDisplay = function () {
     212    // Markers
     213    var angle = fb.hsl[0] * 6.28;
     214    jQuery('.h-marker', e).css({
     215      left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px',
     216      top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'
     217    });
     218
     219    jQuery('.sl-marker', e).css({
     220      left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px',
     221      top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'
     222    });
     223
     224    // Saturation/Luminance gradient
     225    jQuery('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])));
     226
     227    // Linked elements or callback
     228    if (typeof fb.callback == 'object') {
     229      // Set background/foreground color
     230      jQuery(fb.callback).css({
     231        backgroundColor: fb.color,
     232        color: fb.hsl[2] > 0.5 ? '#000' : '#fff'
     233      });
     234
     235      // Change linked value
     236      jQuery(fb.callback).each(function() {
     237        if (this.value && this.value != fb.color) {
     238          this.value = fb.color;
     239        }
     240      });
     241    }
     242    else if (typeof fb.callback == 'function') {
     243      fb.callback.call(fb, fb.color);
     244    }
     245  }
     246
     247  /**
     248   * Get absolute position of element
     249   */
     250  fb.absolutePosition = function (el) {
     251    var r = { x: el.offsetLeft, y: el.offsetTop };
     252    // Resolve relative to offsetParent
     253    if (el.offsetParent) {
     254      var tmp = fb.absolutePosition(el.offsetParent);
     255      r.x += tmp.x;
     256      r.y += tmp.y;
     257    }
     258    return r;
     259  };
     260
     261  /* Various color utility functions */
     262  fb.pack = function (rgb) {
     263    var r = Math.round(rgb[0] * 255);
     264    var g = Math.round(rgb[1] * 255);
     265    var b = Math.round(rgb[2] * 255);
     266    return '#' + (r < 16 ? '0' : '') + r.toString(16) +
     267           (g < 16 ? '0' : '') + g.toString(16) +
     268           (b < 16 ? '0' : '') + b.toString(16);
     269  }
     270
     271  fb.unpack = function (color) {
     272    if (color.length == 7) {
     273      return [parseInt('0x' + color.substring(1, 3)) / 255,
     274        parseInt('0x' + color.substring(3, 5)) / 255,
     275        parseInt('0x' + color.substring(5, 7)) / 255];
     276    }
     277    else if (color.length == 4) {
     278      return [parseInt('0x' + color.substring(1, 2)) / 15,
     279        parseInt('0x' + color.substring(2, 3)) / 15,
     280        parseInt('0x' + color.substring(3, 4)) / 15];
     281    }
     282  }
     283
     284  fb.HSLToRGB = function (hsl) {
     285    var m1, m2, r, g, b;
     286    var h = hsl[0], s = hsl[1], l = hsl[2];
     287    m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
     288    m1 = l * 2 - m2;
     289    return [this.hueToRGB(m1, m2, h+0.33333),
     290        this.hueToRGB(m1, m2, h),
     291        this.hueToRGB(m1, m2, h-0.33333)];
     292  }
     293
     294  fb.hueToRGB = function (m1, m2, h) {
     295    h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
     296    if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
     297    if (h * 2 < 1) return m2;
     298    if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
     299    return m1;
     300  }
     301
     302  fb.RGBToHSL = function (rgb) {
     303    var min, max, delta, h, s, l;
     304    var r = rgb[0], g = rgb[1], b = rgb[2];
     305    min = Math.min(r, Math.min(g, b));
     306    max = Math.max(r, Math.max(g, b));
     307    delta = max - min;
     308    l = (min + max) / 2;
     309    s = 0;
     310    if (l > 0 && l < 1) {
     311      s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
     312    }
     313    h = 0;
     314    if (delta > 0) {
     315      if (max == r && max != g) h += (g - b) / delta;
     316      if (max == g && max != b) h += (2 + (b - r) / delta);
     317      if (max == b && max != r) h += (4 + (r - g) / delta);
     318      h /= 6;
     319    }
     320    return [h, s, l];
     321  }
     322
     323  // Install mousedown handler (the others are set on the document on-demand)
     324  jQuery('*', e).mousedown(fb.mousedown);
     325
     326    // Init color
     327  fb.setColor('#000000');
     328
     329  // Set linked elements/callback
     330  if (callback) {
     331    fb.linkTo(callback);
     332  }
     333}
     334 No newline at end of file
  • wp-includes/js/colorpicker.js

     
    1 // ===================================================================
    2 // Author: Matt Kruse <matt@mattkruse.com>
    3 // WWW: http://www.mattkruse.com/
    4 //
    5 // NOTICE: You may use this code for any purpose, commercial or
    6 // private, without any further permission from the author. You may
    7 // remove this notice from your final code if you wish, however it is
    8 // appreciated by the author if at least my web site address is kept.
    9 //
    10 // You may *NOT* re-distribute this code in any way except through its
    11 // use. That means, you can include it in your product, or your web
    12 // site, or any other form where the code is actually being used. You
    13 // may not put the plain javascript up on your site for download or
    14 // include it in your javascript libraries for download.
    15 // If you wish to share this code with others, please just point them
    16 // to the URL instead.
    17 // Please DO NOT link directly to my .js files from your site. Copy
    18 // the files to your server and use them there. Thank you.
    19 // ===================================================================
    20 
    21 
    22 /* SOURCE FILE: AnchorPosition.js */
    23 
    24 /*
    25 AnchorPosition.js
    26 Author: Matt Kruse
    27 Last modified: 10/11/02
    28 
    29 DESCRIPTION: These functions find the position of an <A> tag in a document,
    30 so other elements can be positioned relative to it.
    31 
    32 COMPATABILITY: Netscape 4.x,6.x,Mozilla, IE 5.x,6.x on Windows. Some small
    33 positioning errors - usually with Window positioning - occur on the
    34 Macintosh platform.
    35 
    36 FUNCTIONS:
    37 getAnchorPosition(anchorname)
    38   Returns an Object() having .x and .y properties of the pixel coordinates
    39   of the upper-left corner of the anchor. Position is relative to the PAGE.
    40 
    41 getAnchorWindowPosition(anchorname)
    42   Returns an Object() having .x and .y properties of the pixel coordinates
    43   of the upper-left corner of the anchor, relative to the WHOLE SCREEN.
    44 
    45 NOTES:
    46 
    47 1) For popping up separate browser windows, use getAnchorWindowPosition.
    48    Otherwise, use getAnchorPosition
    49 
    50 2) Your anchor tag MUST contain both NAME and ID attributes which are the
    51    same. For example:
    52    <A NAME="test" ID="test"> </A>
    53 
    54 3) There must be at least a space between <A> </A> for IE5.5 to see the
    55    anchor tag correctly. Do not do <A></A> with no space.
    56 */
    57 
    58 // getAnchorPosition(anchorname)
    59 //   This function returns an object having .x and .y properties which are the coordinates
    60 //   of the named anchor, relative to the page.
    61 function getAnchorPosition(anchorname) {
    62         // This function will return an Object with x and y properties
    63         var useWindow=false;
    64         var coordinates=new Object();
    65         var x=0,y=0;
    66         // Browser capability sniffing
    67         var use_gebi=false, use_css=false, use_layers=false;
    68         if (document.getElementById) { use_gebi=true; }
    69         else if (document.all) { use_css=true; }
    70         else if (document.layers) { use_layers=true; }
    71         // Logic to find position
    72         if (use_gebi && document.all) {
    73                 x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
    74                 y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);
    75                 }
    76         else if (use_gebi) {
    77                 var o=document.getElementById(anchorname);
    78                 x=AnchorPosition_getPageOffsetLeft(o);
    79                 y=AnchorPosition_getPageOffsetTop(o);
    80                 }
    81         else if (use_css) {
    82                 x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
    83                 y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);
    84                 }
    85         else if (use_layers) {
    86                 var found=0;
    87                 for (var i=0; i<document.anchors.length; i++) {
    88                         if (document.anchors[i].name==anchorname) { found=1; break; }
    89                         }
    90                 if (found==0) {
    91                         coordinates.x=0; coordinates.y=0; return coordinates;
    92                         }
    93                 x=document.anchors[i].x;
    94                 y=document.anchors[i].y;
    95                 }
    96         else {
    97                 coordinates.x=0; coordinates.y=0; return coordinates;
    98                 }
    99         coordinates.x=x;
    100         coordinates.y=y;
    101         return coordinates;
    102         }
    103 
    104 // getAnchorWindowPosition(anchorname)
    105 //   This function returns an object having .x and .y properties which are the coordinates
    106 //   of the named anchor, relative to the window
    107 function getAnchorWindowPosition(anchorname) {
    108         var coordinates=getAnchorPosition(anchorname);
    109         var x=0;
    110         var y=0;
    111         if (document.getElementById) {
    112                 if (isNaN(window.screenX)) {
    113                         x=coordinates.x-document.body.scrollLeft+window.screenLeft;
    114                         y=coordinates.y-document.body.scrollTop+window.screenTop;
    115                         }
    116                 else {
    117                         x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
    118                         y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;
    119                         }
    120                 }
    121         else if (document.all) {
    122                 x=coordinates.x-document.body.scrollLeft+window.screenLeft;
    123                 y=coordinates.y-document.body.scrollTop+window.screenTop;
    124                 }
    125         else if (document.layers) {
    126                 x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
    127                 y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;
    128                 }
    129         coordinates.x=x;
    130         coordinates.y=y;
    131         return coordinates;
    132         }
    133 
    134 // Functions for IE to get position of an object
    135 function AnchorPosition_getPageOffsetLeft (el) {
    136         var ol=el.offsetLeft;
    137         while ((el=el.offsetParent) != null) { ol += el.offsetLeft; }
    138         return ol;
    139         }
    140 function AnchorPosition_getWindowOffsetLeft (el) {
    141         return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;
    142         }
    143 function AnchorPosition_getPageOffsetTop (el) {
    144         var ot=el.offsetTop;
    145         while((el=el.offsetParent) != null) { ot += el.offsetTop; }
    146         return ot;
    147         }
    148 function AnchorPosition_getWindowOffsetTop (el) {
    149         return AnchorPosition_getPageOffsetTop(el)-document.body.scrollTop;
    150         }
    151 
    152 /* SOURCE FILE: PopupWindow.js */
    153 
    154 /*
    155 PopupWindow.js
    156 Author: Matt Kruse
    157 Last modified: 02/16/04
    158 
    159 DESCRIPTION: This object allows you to easily and quickly popup a window
    160 in a certain place. The window can either be a DIV or a separate browser
    161 window.
    162 
    163 COMPATABILITY: Works with Netscape 4.x, 6.x, IE 5.x on Windows. Some small
    164 positioning errors - usually with Window positioning - occur on the
    165 Macintosh platform. Due to bugs in Netscape 4.x, populating the popup
    166 window with <STYLE> tags may cause errors.
    167 
    168 USAGE:
    169 // Create an object for a WINDOW popup
    170 var win = new PopupWindow();
    171 
    172 // Create an object for a DIV window using the DIV named 'mydiv'
    173 var win = new PopupWindow('mydiv');
    174 
    175 // Set the window to automatically hide itself when the user clicks
    176 // anywhere else on the page except the popup
    177 win.autoHide();
    178 
    179 // Show the window relative to the anchor name passed in
    180 win.showPopup(anchorname);
    181 
    182 // Hide the popup
    183 win.hidePopup();
    184 
    185 // Set the size of the popup window (only applies to WINDOW popups
    186 win.setSize(width,height);
    187 
    188 // Populate the contents of the popup window that will be shown. If you
    189 // change the contents while it is displayed, you will need to refresh()
    190 win.populate(string);
    191 
    192 // set the URL of the window, rather than populating its contents
    193 // manually
    194 win.setUrl("http://www.site.com/");
    195 
    196 // Refresh the contents of the popup
    197 win.refresh();
    198 
    199 // Specify how many pixels to the right of the anchor the popup will appear
    200 win.offsetX = 50;
    201 
    202 // Specify how many pixels below the anchor the popup will appear
    203 win.offsetY = 100;
    204 
    205 NOTES:
    206 1) Requires the functions in AnchorPosition.js
    207 
    208 2) Your anchor tag MUST contain both NAME and ID attributes which are the
    209    same. For example:
    210    <A NAME="test" ID="test"> </A>
    211 
    212 3) There must be at least a space between <A> </A> for IE5.5 to see the
    213    anchor tag correctly. Do not do <A></A> with no space.
    214 
    215 4) When a PopupWindow object is created, a handler for 'onmouseup' is
    216    attached to any event handler you may have already defined. Do NOT define
    217    an event handler for 'onmouseup' after you define a PopupWindow object or
    218    the autoHide() will not work correctly.
    219 */
    220 
    221 // Set the position of the popup window based on the anchor
    222 function PopupWindow_getXYPosition(anchorname) {
    223         var coordinates;
    224         if (this.type == "WINDOW") {
    225                 coordinates = getAnchorWindowPosition(anchorname);
    226                 }
    227         else {
    228                 coordinates = getAnchorPosition(anchorname);
    229                 }
    230         this.x = coordinates.x;
    231         this.y = coordinates.y;
    232         }
    233 // Set width/height of DIV/popup window
    234 function PopupWindow_setSize(width,height) {
    235         this.width = width;
    236         this.height = height;
    237         }
    238 // Fill the window with contents
    239 function PopupWindow_populate(contents) {
    240         this.contents = contents;
    241         this.populated = false;
    242         }
    243 // Set the URL to go to
    244 function PopupWindow_setUrl(url) {
    245         this.url = url;
    246         }
    247 // Set the window popup properties
    248 function PopupWindow_setWindowProperties(props) {
    249         this.windowProperties = props;
    250         }
    251 // Refresh the displayed contents of the popup
    252 function PopupWindow_refresh() {
    253         if (this.divName != null) {
    254                 // refresh the DIV object
    255                 if (this.use_gebi) {
    256                         document.getElementById(this.divName).innerHTML = this.contents;
    257                         }
    258                 else if (this.use_css) {
    259                         document.all[this.divName].innerHTML = this.contents;
    260                         }
    261                 else if (this.use_layers) {
    262                         var d = document.layers[this.divName];
    263                         d.document.open();
    264                         d.document.writeln(this.contents);
    265                         d.document.close();
    266                         }
    267                 }
    268         else {
    269                 if (this.popupWindow != null && !this.popupWindow.closed) {
    270                         if (this.url!="") {
    271                                 this.popupWindow.location.href=this.url;
    272                                 }
    273                         else {
    274                                 this.popupWindow.document.open();
    275                                 this.popupWindow.document.writeln(this.contents);
    276                                 this.popupWindow.document.close();
    277                         }
    278                         this.popupWindow.focus();
    279                         }
    280                 }
    281         }
    282 // Position and show the popup, relative to an anchor object
    283 function PopupWindow_showPopup(anchorname) {
    284         this.getXYPosition(anchorname);
    285         this.x += this.offsetX;
    286         this.y += this.offsetY;
    287         if (!this.populated && (this.contents != "")) {
    288                 this.populated = true;
    289                 this.refresh();
    290                 }
    291         if (this.divName != null) {
    292                 // Show the DIV object
    293                 if (this.use_gebi) {
    294                         document.getElementById(this.divName).style.left = this.x + "px";
    295                         document.getElementById(this.divName).style.top = this.y;
    296                         document.getElementById(this.divName).style.visibility = "visible";
    297                         }
    298                 else if (this.use_css) {
    299                         document.all[this.divName].style.left = this.x;
    300                         document.all[this.divName].style.top = this.y;
    301                         document.all[this.divName].style.visibility = "visible";
    302                         }
    303                 else if (this.use_layers) {
    304                         document.layers[this.divName].left = this.x;
    305                         document.layers[this.divName].top = this.y;
    306                         document.layers[this.divName].visibility = "visible";
    307                         }
    308                 }
    309         else {
    310                 if (this.popupWindow == null || this.popupWindow.closed) {
    311                         // If the popup window will go off-screen, move it so it doesn't
    312                         if (this.x<0) { this.x=0; }
    313                         if (this.y<0) { this.y=0; }
    314                         if (screen && screen.availHeight) {
    315                                 if ((this.y + this.height) > screen.availHeight) {
    316                                         this.y = screen.availHeight - this.height;
    317                                         }
    318                                 }
    319                         if (screen && screen.availWidth) {
    320                                 if ((this.x + this.width) > screen.availWidth) {
    321                                         this.x = screen.availWidth - this.width;
    322                                         }
    323                                 }
    324                         var avoidAboutBlank = window.opera || ( document.layers && !navigator.mimeTypes['*'] ) || navigator.vendor == 'KDE' || ( document.childNodes && !document.all && !navigator.taintEnabled );
    325                         this.popupWindow = window.open(avoidAboutBlank?"":"about:blank","window_"+anchorname,this.windowProperties+",width="+this.width+",height="+this.height+",screenX="+this.x+",left="+this.x+",screenY="+this.y+",top="+this.y+"");
    326                         }
    327                 this.refresh();
    328                 }
    329         }
    330 // Hide the popup
    331 function PopupWindow_hidePopup() {
    332         if (this.divName != null) {
    333                 if (this.use_gebi) {
    334                         document.getElementById(this.divName).style.visibility = "hidden";
    335                         }
    336                 else if (this.use_css) {
    337                         document.all[this.divName].style.visibility = "hidden";
    338                         }
    339                 else if (this.use_layers) {
    340                         document.layers[this.divName].visibility = "hidden";
    341                         }
    342                 }
    343         else {
    344                 if (this.popupWindow && !this.popupWindow.closed) {
    345                         this.popupWindow.close();
    346                         this.popupWindow = null;
    347                         }
    348                 }
    349         }
    350 // Pass an event and return whether or not it was the popup DIV that was clicked
    351 function PopupWindow_isClicked(e) {
    352         if (this.divName != null) {
    353                 if (this.use_layers) {
    354                         var clickX = e.pageX;
    355                         var clickY = e.pageY;
    356                         var t = document.layers[this.divName];
    357                         if ((clickX > t.left) && (clickX < t.left+t.clip.width) && (clickY > t.top) && (clickY < t.top+t.clip.height)) {
    358                                 return true;
    359                                 }
    360                         else { return false; }
    361                         }
    362                 else if (document.all) { // Need to hard-code this to trap IE for error-handling
    363                         var t = window.event.srcElement;
    364                         while (t.parentElement != null) {
    365                                 if (t.id==this.divName) {
    366                                         return true;
    367                                         }
    368                                 t = t.parentElement;
    369                                 }
    370                         return false;
    371                         }
    372                 else if (this.use_gebi && e) {
    373                         var t = e.originalTarget;
    374                         while (t.parentNode != null) {
    375                                 if (t.id==this.divName) {
    376                                         return true;
    377                                         }
    378                                 t = t.parentNode;
    379                                 }
    380                         return false;
    381                         }
    382                 return false;
    383                 }
    384         return false;
    385         }
    386 
    387 // Check an onMouseDown event to see if we should hide
    388 function PopupWindow_hideIfNotClicked(e) {
    389         if (this.autoHideEnabled && !this.isClicked(e)) {
    390                 this.hidePopup();
    391                 }
    392         }
    393 // Call this to make the DIV disable automatically when mouse is clicked outside it
    394 function PopupWindow_autoHide() {
    395         this.autoHideEnabled = true;
    396         }
    397 // This global function checks all PopupWindow objects onmouseup to see if they should be hidden
    398 function PopupWindow_hidePopupWindows(e) {
    399         for (var i=0; i<popupWindowObjects.length; i++) {
    400                 if (popupWindowObjects[i] != null) {
    401                         var p = popupWindowObjects[i];
    402                         p.hideIfNotClicked(e);
    403                         }
    404                 }
    405         }
    406 // Run this immediately to attach the event listener
    407 function PopupWindow_attachListener() {
    408         if (document.layers) {
    409                 document.captureEvents(Event.MOUSEUP);
    410                 }
    411         window.popupWindowOldEventListener = document.onmouseup;
    412         if (window.popupWindowOldEventListener != null) {
    413                 document.onmouseup = new Function("window.popupWindowOldEventListener(); PopupWindow_hidePopupWindows();");
    414                 }
    415         else {
    416                 document.onmouseup = PopupWindow_hidePopupWindows;
    417                 }
    418         }
    419 // CONSTRUCTOR for the PopupWindow object
    420 // Pass it a DIV name to use a DHTML popup, otherwise will default to window popup
    421 function PopupWindow() {
    422         if (!window.popupWindowIndex) { window.popupWindowIndex = 0; }
    423         if (!window.popupWindowObjects) { window.popupWindowObjects = new Array(); }
    424         if (!window.listenerAttached) {
    425                 window.listenerAttached = true;
    426                 PopupWindow_attachListener();
    427                 }
    428         this.index = popupWindowIndex++;
    429         popupWindowObjects[this.index] = this;
    430         this.divName = null;
    431         this.popupWindow = null;
    432         this.width=0;
    433         this.height=0;
    434         this.populated = false;
    435         this.visible = false;
    436         this.autoHideEnabled = false;
    437 
    438         this.contents = "";
    439         this.url="";
    440         this.windowProperties="toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable,alwaysRaised,dependent,titlebar=no";
    441         if (arguments.length>0) {
    442                 this.type="DIV";
    443                 this.divName = arguments[0];
    444                 }
    445         else {
    446                 this.type="WINDOW";
    447                 }
    448         this.use_gebi = false;
    449         this.use_css = false;
    450         this.use_layers = false;
    451         if (document.getElementById) { this.use_gebi = true; }
    452         else if (document.all) { this.use_css = true; }
    453         else if (document.layers) { this.use_layers = true; }
    454         else { this.type = "WINDOW"; }
    455         this.offsetX = 0;
    456         this.offsetY = 0;
    457         // Method mappings
    458         this.getXYPosition = PopupWindow_getXYPosition;
    459         this.populate = PopupWindow_populate;
    460         this.setUrl = PopupWindow_setUrl;
    461         this.setWindowProperties = PopupWindow_setWindowProperties;
    462         this.refresh = PopupWindow_refresh;
    463         this.showPopup = PopupWindow_showPopup;
    464         this.hidePopup = PopupWindow_hidePopup;
    465         this.setSize = PopupWindow_setSize;
    466         this.isClicked = PopupWindow_isClicked;
    467         this.autoHide = PopupWindow_autoHide;
    468         this.hideIfNotClicked = PopupWindow_hideIfNotClicked;
    469         }
    470 
    471 /* SOURCE FILE: ColorPicker2.js */
    472 
    473 /*
    474 Last modified: 02/24/2003
    475 
    476 DESCRIPTION: This widget is used to select a color, in hexadecimal #RRGGBB
    477 form. It uses a color "swatch" to display the standard 216-color web-safe
    478 palette. The user can then click on a color to select it.
    479 
    480 COMPATABILITY: See notes in AnchorPosition.js and PopupWindow.js.
    481 Only the latest DHTML-capable browsers will show the color and hex values
    482 at the bottom as your mouse goes over them.
    483 
    484 USAGE:
    485 // Create a new ColorPicker object using DHTML popup
    486 var cp = new ColorPicker();
    487 
    488 // Create a new ColorPicker object using Window Popup
    489 var cp = new ColorPicker('window');
    490 
    491 // Add a link in your page to trigger the popup. For example:
    492 <A HREF="#" onClick="cp.show('pick');return false;" NAME="pick" ID="pick">Pick</A>
    493 
    494 // Or use the built-in "select" function to do the dirty work for you:
    495 <A HREF="#" onClick="cp.select(document.forms[0].color,'pick');return false;" NAME="pick" ID="pick">Pick</A>
    496 
    497 // If using DHTML popup, write out the required DIV tag near the bottom
    498 // of your page.
    499 <SCRIPT LANGUAGE="JavaScript">cp.writeDiv()</SCRIPT>
    500 
    501 // Write the 'pickColor' function that will be called when the user clicks
    502 // a color and do something with the value. This is only required if you
    503 // want to do something other than simply populate a form field, which is
    504 // what the 'select' function will give you.
    505 function pickColor(color) {
    506         field.value = color;
    507         }
    508 
    509 NOTES:
    510 1) Requires the functions in AnchorPosition.js and PopupWindow.js
    511 
    512 2) Your anchor tag MUST contain both NAME and ID attributes which are the
    513    same. For example:
    514    <A NAME="test" ID="test"> </A>
    515 
    516 3) There must be at least a space between <A> </A> for IE5.5 to see the
    517    anchor tag correctly. Do not do <A></A> with no space.
    518 
    519 4) When a ColorPicker object is created, a handler for 'onmouseup' is
    520    attached to any event handler you may have already defined. Do NOT define
    521    an event handler for 'onmouseup' after you define a ColorPicker object or
    522    the color picker will not hide itself correctly.
    523 */
    524 ColorPicker_targetInput = null;
    525 function ColorPicker_writeDiv() {
    526         document.writeln("<DIV ID=\"colorPickerDiv\" STYLE=\"position:absolute;visibility:hidden;\"> </DIV>");
    527         }
    528 
    529 function ColorPicker_show(anchorname) {
    530         this.showPopup(anchorname);
    531         }
    532 
    533 function ColorPicker_pickColor(color,obj) {
    534         obj.hidePopup();
    535         pickColor(color);
    536         }
    537 
    538 // A Default "pickColor" function to accept the color passed back from popup.
    539 // User can over-ride this with their own function.
    540 function pickColor(color) {
    541         if (ColorPicker_targetInput==null) {
    542                 alert("Target Input is null, which means you either didn't use the 'select' function or you have no defined your own 'pickColor' function to handle the picked color!");
    543                 return;
    544                 }
    545         ColorPicker_targetInput.value = color;
    546         }
    547 
    548 // This function is the easiest way to popup the window, select a color, and
    549 // have the value populate a form field, which is what most people want to do.
    550 function ColorPicker_select(inputobj,linkname) {
    551         if (inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!="textarea") {
    552                 alert("colorpicker.select: Input object passed is not a valid form input object");
    553                 window.ColorPicker_targetInput=null;
    554                 return;
    555                 }
    556         window.ColorPicker_targetInput = inputobj;
    557         this.show(linkname);
    558         }
    559 
    560 // This function runs when you move your mouse over a color block, if you have a newer browser
    561 function ColorPicker_highlightColor(c) {
    562         var thedoc = (arguments.length>1)?arguments[1]:window.document;
    563         var d = thedoc.getElementById("colorPickerSelectedColor");
    564         d.style.backgroundColor = c;
    565         d = thedoc.getElementById("colorPickerSelectedColorValue");
    566         d.innerHTML = c;
    567         }
    568 
    569 function ColorPicker() {
    570         var windowMode = false;
    571         // Create a new PopupWindow object
    572         if (arguments.length==0) {
    573                 var divname = "colorPickerDiv";
    574                 }
    575         else if (arguments[0] == "window") {
    576                 var divname = '';
    577                 windowMode = true;
    578                 }
    579         else {
    580                 var divname = arguments[0];
    581                 }
    582 
    583         if (divname != "") {
    584                 var cp = new PopupWindow(divname);
    585                 }
    586         else {
    587                 var cp = new PopupWindow();
    588                 cp.setSize(225,250);
    589                 }
    590 
    591         // Object variables
    592         cp.currentValue = "#FFFFFF";
    593 
    594         // Method Mappings
    595         cp.writeDiv = ColorPicker_writeDiv;
    596         cp.highlightColor = ColorPicker_highlightColor;
    597         cp.show = ColorPicker_show;
    598         cp.select = ColorPicker_select;
    599 
    600         // Code to populate color picker window
    601         var colors = new Array( "#4180B6","#69AEE7","#000000","#000033","#000066","#000099","#0000CC","#0000FF","#330000","#330033","#330066","#330099",
    602                                                         "#3300CC","#3300FF","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#990000","#990033","#990066","#990099",
    603                                                         "#9900CC","#9900FF","#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#FF0000","#FF0033","#FF0066","#FF0099",
    604                                                         "#FF00CC","#FF00FF","#7FFFFF","#7FFFFF","#7FF7F7","#7FEFEF","#7FE7E7","#7FDFDF","#7FD7D7","#7FCFCF","#7FC7C7","#7FBFBF",
    605                                                         "#7FB7B7","#7FAFAF","#7FA7A7","#7F9F9F","#7F9797","#7F8F8F","#7F8787","#7F7F7F","#7F7777","#7F6F6F","#7F6767","#7F5F5F",
    606                                                         "#7F5757","#7F4F4F","#7F4747","#7F3F3F","#7F3737","#7F2F2F","#7F2727","#7F1F1F","#7F1717","#7F0F0F","#7F0707","#7F0000",
    607 
    608                                                         "#4180B6","#69AEE7","#003300","#003333","#003366","#003399","#0033CC","#0033FF","#333300","#333333","#333366","#333399",
    609                                                         "#3333CC","#3333FF","#663300","#663333","#663366","#663399","#6633CC","#6633FF","#993300","#993333","#993366","#993399",
    610                                                         "#9933CC","#9933FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF","#FF3300","#FF3333","#FF3366","#FF3399",
    611                                                         "#FF33CC","#FF33FF","#FF7FFF","#FF7FFF","#F77FF7","#EF7FEF","#E77FE7","#DF7FDF","#D77FD7","#CF7FCF","#C77FC7","#BF7FBF",
    612                                                         "#B77FB7","#AF7FAF","#A77FA7","#9F7F9F","#977F97","#8F7F8F","#877F87","#7F7F7F","#777F77","#6F7F6F","#677F67","#5F7F5F",
    613                                                         "#577F57","#4F7F4F","#477F47","#3F7F3F","#377F37","#2F7F2F","#277F27","#1F7F1F","#177F17","#0F7F0F","#077F07","#007F00",
    614 
    615                                                         "#4180B6","#69AEE7","#006600","#006633","#006666","#006699","#0066CC","#0066FF","#336600","#336633","#336666","#336699",
    616                                                         "#3366CC","#3366FF","#666600","#666633","#666666","#666699","#6666CC","#6666FF","#996600","#996633","#996666","#996699",
    617                                                         "#9966CC","#9966FF","#CC6600","#CC6633","#CC6666","#CC6699","#CC66CC","#CC66FF","#FF6600","#FF6633","#FF6666","#FF6699",
    618                                                         "#FF66CC","#FF66FF","#FFFF7F","#FFFF7F","#F7F77F","#EFEF7F","#E7E77F","#DFDF7F","#D7D77F","#CFCF7F","#C7C77F","#BFBF7F",
    619                                                         "#B7B77F","#AFAF7F","#A7A77F","#9F9F7F","#97977F","#8F8F7F","#87877F","#7F7F7F","#77777F","#6F6F7F","#67677F","#5F5F7F",
    620                                                         "#57577F","#4F4F7F","#47477F","#3F3F7F","#37377F","#2F2F7F","#27277F","#1F1F7F","#17177F","#0F0F7F","#07077F","#00007F",
    621 
    622                                                         "#4180B6","#69AEE7","#009900","#009933","#009966","#009999","#0099CC","#0099FF","#339900","#339933","#339966","#339999",
    623                                                         "#3399CC","#3399FF","#669900","#669933","#669966","#669999","#6699CC","#6699FF","#999900","#999933","#999966","#999999",
    624                                                         "#9999CC","#9999FF","#CC9900","#CC9933","#CC9966","#CC9999","#CC99CC","#CC99FF","#FF9900","#FF9933","#FF9966","#FF9999",
    625                                                         "#FF99CC","#FF99FF","#3FFFFF","#3FFFFF","#3FF7F7","#3FEFEF","#3FE7E7","#3FDFDF","#3FD7D7","#3FCFCF","#3FC7C7","#3FBFBF",
    626                                                         "#3FB7B7","#3FAFAF","#3FA7A7","#3F9F9F","#3F9797","#3F8F8F","#3F8787","#3F7F7F","#3F7777","#3F6F6F","#3F6767","#3F5F5F",
    627                                                         "#3F5757","#3F4F4F","#3F4747","#3F3F3F","#3F3737","#3F2F2F","#3F2727","#3F1F1F","#3F1717","#3F0F0F","#3F0707","#3F0000",
    628 
    629                                                         "#4180B6","#69AEE7","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#33CC00","#33CC33","#33CC66","#33CC99",
    630                                                         "#33CCCC","#33CCFF","#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF","#99CC00","#99CC33","#99CC66","#99CC99",
    631                                                         "#99CCCC","#99CCFF","#CCCC00","#CCCC33","#CCCC66","#CCCC99","#CCCCCC","#CCCCFF","#FFCC00","#FFCC33","#FFCC66","#FFCC99",
    632                                                         "#FFCCCC","#FFCCFF","#FF3FFF","#FF3FFF","#F73FF7","#EF3FEF","#E73FE7","#DF3FDF","#D73FD7","#CF3FCF","#C73FC7","#BF3FBF",
    633                                                         "#B73FB7","#AF3FAF","#A73FA7","#9F3F9F","#973F97","#8F3F8F","#873F87","#7F3F7F","#773F77","#6F3F6F","#673F67","#5F3F5F",
    634                                                         "#573F57","#4F3F4F","#473F47","#3F3F3F","#373F37","#2F3F2F","#273F27","#1F3F1F","#173F17","#0F3F0F","#073F07","#003F00",
    635 
    636                                                         "#4180B6","#69AEE7","#00FF00","#00FF33","#00FF66","#00FF99","#00FFCC","#00FFFF","#33FF00","#33FF33","#33FF66","#33FF99",
    637                                                         "#33FFCC","#33FFFF","#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF","#99FF00","#99FF33","#99FF66","#99FF99",
    638                                                         "#99FFCC","#99FFFF","#CCFF00","#CCFF33","#CCFF66","#CCFF99","#CCFFCC","#CCFFFF","#FFFF00","#FFFF33","#FFFF66","#FFFF99",
    639                                                         "#FFFFCC","#FFFFFF","#FFFF3F","#FFFF3F","#F7F73F","#EFEF3F","#E7E73F","#DFDF3F","#D7D73F","#CFCF3F","#C7C73F","#BFBF3F",
    640                                                         "#B7B73F","#AFAF3F","#A7A73F","#9F9F3F","#97973F","#8F8F3F","#87873F","#7F7F3F","#77773F","#6F6F3F","#67673F","#5F5F3F",
    641                                                         "#57573F","#4F4F3F","#47473F","#3F3F3F","#37373F","#2F2F3F","#27273F","#1F1F3F","#17173F","#0F0F3F","#07073F","#00003F",
    642 
    643                                                         "#4180B6","#69AEE7","#FFFFFF","#FFEEEE","#FFDDDD","#FFCCCC","#FFBBBB","#FFAAAA","#FF9999","#FF8888","#FF7777","#FF6666",
    644                                                         "#FF5555","#FF4444","#FF3333","#FF2222","#FF1111","#FF0000","#FF0000","#FF0000","#FF0000","#EE0000","#DD0000","#CC0000",
    645                                                         "#BB0000","#AA0000","#990000","#880000","#770000","#660000","#550000","#440000","#330000","#220000","#110000","#000000",
    646                                                         "#000000","#000000","#000000","#001111","#002222","#003333","#004444","#005555","#006666","#007777","#008888","#009999",
    647                                                         "#00AAAA","#00BBBB","#00CCCC","#00DDDD","#00EEEE","#00FFFF","#00FFFF","#00FFFF","#00FFFF","#11FFFF","#22FFFF","#33FFFF",
    648                                                         "#44FFFF","#55FFFF","#66FFFF","#77FFFF","#88FFFF","#99FFFF","#AAFFFF","#BBFFFF","#CCFFFF","#DDFFFF","#EEFFFF","#FFFFFF",
    649 
    650                                                         "#4180B6","#69AEE7","#FFFFFF","#EEFFEE","#DDFFDD","#CCFFCC","#BBFFBB","#AAFFAA","#99FF99","#88FF88","#77FF77","#66FF66",
    651                                                         "#55FF55","#44FF44","#33FF33","#22FF22","#11FF11","#00FF00","#00FF00","#00FF00","#00FF00","#00EE00","#00DD00","#00CC00",
    652                                                         "#00BB00","#00AA00","#009900","#008800","#007700","#006600","#005500","#004400","#003300","#002200","#001100","#000000",
    653                                                         "#000000","#000000","#000000","#110011","#220022","#330033","#440044","#550055","#660066","#770077","#880088","#990099",
    654                                                         "#AA00AA","#BB00BB","#CC00CC","#DD00DD","#EE00EE","#FF00FF","#FF00FF","#FF00FF","#FF00FF","#FF11FF","#FF22FF","#FF33FF",
    655                                                         "#FF44FF","#FF55FF","#FF66FF","#FF77FF","#FF88FF","#FF99FF","#FFAAFF","#FFBBFF","#FFCCFF","#FFDDFF","#FFEEFF","#FFFFFF",
    656 
    657                                                         "#4180B6","#69AEE7","#FFFFFF","#EEEEFF","#DDDDFF","#CCCCFF","#BBBBFF","#AAAAFF","#9999FF","#8888FF","#7777FF","#6666FF",
    658                                                         "#5555FF","#4444FF","#3333FF","#2222FF","#1111FF","#0000FF","#0000FF","#0000FF","#0000FF","#0000EE","#0000DD","#0000CC",
    659                                                         "#0000BB","#0000AA","#000099","#000088","#000077","#000066","#000055","#000044","#000033","#000022","#000011","#000000",
    660                                                         "#000000","#000000","#000000","#111100","#222200","#333300","#444400","#555500","#666600","#777700","#888800","#999900",
    661                                                         "#AAAA00","#BBBB00","#CCCC00","#DDDD00","#EEEE00","#FFFF00","#FFFF00","#FFFF00","#FFFF00","#FFFF11","#FFFF22","#FFFF33",
    662                                                         "#FFFF44","#FFFF55","#FFFF66","#FFFF77","#FFFF88","#FFFF99","#FFFFAA","#FFFFBB","#FFFFCC","#FFFFDD","#FFFFEE","#FFFFFF",
    663 
    664                                                         "#4180B6","#69AEE7","#FFFFFF","#FFFFFF","#FBFBFB","#F7F7F7","#F3F3F3","#EFEFEF","#EBEBEB","#E7E7E7","#E3E3E3","#DFDFDF",
    665                                                         "#DBDBDB","#D7D7D7","#D3D3D3","#CFCFCF","#CBCBCB","#C7C7C7","#C3C3C3","#BFBFBF","#BBBBBB","#B7B7B7","#B3B3B3","#AFAFAF",
    666                                                         "#ABABAB","#A7A7A7","#A3A3A3","#9F9F9F","#9B9B9B","#979797","#939393","#8F8F8F","#8B8B8B","#878787","#838383","#7F7F7F",
    667                                                         "#7B7B7B","#777777","#737373","#6F6F6F","#6B6B6B","#676767","#636363","#5F5F5F","#5B5B5B","#575757","#535353","#4F4F4F",
    668                                                         "#4B4B4B","#474747","#434343","#3F3F3F","#3B3B3B","#373737","#333333","#2F2F2F","#2B2B2B","#272727","#232323","#1F1F1F",
    669                                                         "#1B1B1B","#171717","#131313","#0F0F0F","#0B0B0B","#070707","#030303","#000000","#000000","#000000","#000000","#000000");
    670         var total = colors.length;
    671         var width = 72;
    672         var cp_contents = "";
    673         var windowRef = (windowMode)?"window.opener.":"";
    674         if (windowMode) {
    675                 cp_contents += "<html><head><title>Select Color</title></head>";
    676                 cp_contents += "<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0><span style='text-align: center;'>";
    677                 }
    678         cp_contents += "<table style='border: none;' cellspacing=0 cellpadding=0>";
    679         var use_highlight = (document.getElementById || document.all)?true:false;
    680         for (var i=0; i<total; i++) {
    681                 if ((i % width) == 0) { cp_contents += "<tr>"; }
    682                 if (use_highlight) { var mo = 'onMouseOver="'+windowRef+'ColorPicker_highlightColor(\''+colors[i]+'\',window.document)"'; }
    683                 else { mo = ""; }
    684                 cp_contents += '<td style="background-color: '+colors[i]+';"><a href="javascript:void()" onclick="'+windowRef+'ColorPicker_pickColor(\''+colors[i]+'\','+windowRef+'window.popupWindowObjects['+cp.index+']);return false;" '+mo+'>&nbsp;</a></td>';
    685                 if ( ((i+1)>=total) || (((i+1) % width) == 0)) {
    686                         cp_contents += "</tr>";
    687                         }
    688                 }
    689         // If the browser supports dynamically changing TD cells, add the fancy stuff
    690         if (document.getElementById) {
    691                 var width1 = Math.floor(width/2);
    692                 var width2 = width = width1;
    693                 cp_contents += "<tr><td colspan='"+width1+"' style='background-color: #FFF;' ID='colorPickerSelectedColor'>&nbsp;</td><td colspan='"+width2+"' style='text-align: center;' id='colorPickerSelectedColorValue'>#FFFFFF</td></tr>";
    694                 }
    695         cp_contents += "</table>";
    696         if (windowMode) {
    697                 cp_contents += "</span></body></html>";
    698                 }
    699         // end populate code
    700 
    701         // Write the contents to the popup object
    702         cp.populate(cp_contents+"\n");
    703         // Move the table down a bit so you can see it
    704         cp.offsetY = 25;
    705         cp.autoHide();
    706         return cp;
    707         }
  • wp-includes/script-loader.php

     
    2828                'enterImageDescription' => __('Enter a description of the image')
    2929        ) );
    3030
    31         $scripts->add( 'colorpicker', '/wp-includes/js/colorpicker.js', array('prototype'), '3517' );
    32 
    3331        // Let a plugin replace the visual editor
    3432        $visual_editor = apply_filters('visual_editor', array('tiny_mce'));
    3533        $scripts->add( 'editor', false, $visual_editor, '20080321' );
     
    211209                        'plugin_information' => __('Plugin Information:')
    212210                ) );
    213211
     212                $scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' );
    214213        }
    215214}
    216215
     
    245244        $styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css', array(), '20080613' );
    246245        $styles->add( 'login', '/wp-admin/css/login.css' );
    247246        $styles->add( 'plugin-install', '/wp-admin/css/plugin-install.css' );
     247        $styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.2' );
    248248
    249249        foreach ( $rtl_styles as $rtl_style )
    250250                $styles->add_data( $rtl_style, 'rtl', true );