Ticket #2982: colorpicker.diff

File colorpicker.diff, 7.7 KB (added by Cloudream, 14 years ago)
  • colorpicker.html

     
    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    22        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    33<html>
    44        <head>
    55                <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    66                <title>Color picker</title>
    7                 <script type="text/javascript" src="../../jquery/src/core.js"></script>
    8                 <script type="text/javascript" src="../../jquery/src/selector.js"></script>
    9                 <script type="text/javascript" src="../../jquery/src/event.js"></script>
    10                 <script type="text/javascript" src="../../jquery/src/ajax.js"></script>
    11                 <script type="text/javascript" src="../../jquery/src/fx.js"></script>
    12                 <script type="text/javascript" src="../../jquery/src/offset.js"></script>
    13        
    14                 <script type="text/javascript" src="../ui.base.js"></script>
    15                 <script type="text/javascript" src="../ui.slider.js"></script>
     7
     8                <script type="text/javascript" src="../../../trunk/jquery-1.2.6.js"></script>
     9               
     10                <script type="text/javascript" src="../../../trunk/ui/ui.core.js"></script>
     11                <script type="text/javascript" src="../../../trunk/ui/ui.slider.js"></script>
     12
    1613                <script type="text/javascript" src="ui.colorpicker.js"></script>
    17                 <script src="pngFix/jquery.pngFix.js" type="text/javascript" charset="utf-8"></script>
     14
     15                <script type="text/javascript" src="pngFix/jquery.pngFix.js"></script>
     16
    1817                <link type="text/css" rel="stylesheet" href="ui.colorpicker.css"></link>
    1918               
    20                 <script type="text/javascript" charset="utf-8">
     19                <script type="text/javascript">
    2120                        $(document).ready(function() {
    22                                 $("<div>").appendTo("body").colorpicker();
     21                                $("<div/>").appendTo("body").colorpicker();
    2322                                $(document).pngFix();
    2423                        });
    2524                </script>
     25
    2626        </head>
    2727        <body>
    2828                <!-- No markup! -->
  • ui.colorpicker.js

     
    1 ;(function($) {
     1;(function($) {
    22
    3         $.fn.extend({
    4                 colorpicker: function(options) {
    5                         var args = Array.prototype.slice.call(arguments, 1);
    6                         return this.each(function() {
    7                                 if (typeof options == "string") {
    8                                         var inst = $.data(this, "colorpicker");
    9                                         if(inst) inst[options].apply(inst, args);
    10                                 } else if(!$.data(this, "colorpicker"))
    11                                         new $.ui.colorpicker(this, options);
    12                         });
    13                 }
    14         });
    15        
    16         $.ui.colorpicker = function(element, options) {
     3$.widget("ui.colorpicker", {
    174
     5        plugins: {},
     6        ui: function(e) {
     7                return {
     8                        options: this.options,
     9                        element: this.element,
     10                        rgb: this.currentColor,
     11                        hex: (this.toHex(this.currentColor.r) + this.toHex(this.currentColor.g) + this.toHex(this.currentColor.b)).toUpperCase()
     12                };
     13        },
     14        propagate: function(n,e) {
     15                $.ui.plugin.call(this, n, [e, this.ui()]);
     16                return this.element.triggerHandler(n == "pick" ? n : "pick"+n, [e, this.ui()], this.options[n]);
     17        },
     18
     19        init: function() {
     20
    1821                //Initialize needed constants
    1922                var self = this;
    20                 this.element = $(element);
    21                 var o = this.options = $.extend({}, options);
     23                var element = this.element;
     24                var o = this.options = $.extend({}, self.options);
    2225               
    2326                $.data(element, "colorpicker", this);
    2427                this.element.addClass("ui-colorpicker")
     
    8588                });             
    8689               
    8790               
    88         };
     91        },
     92
     93        destroy: function() {
     94                if(!$.data(this.element[0], 'colorpicker')) return;
     95                this.element
     96                        .removeClass("ui-colorpicker ui-colorpicker-disabled")
     97                        .removeData("colorpicker")
     98                        .unbind(".colorpicker");
     99        },
     100        enable: function() {
     101                this.element.removeClass("ui-colorpicker-disabled");
     102                this.options.disabled = false;
     103        },
     104        disable: function() {
     105                this.element.addClass("ui-colorpicker-disabled");
     106                this.options.disabled = true;
     107        },
     108        setVertColor: function(indic){
     109                var n=256/6, j=256/n, C=indic, c=C%n;
     110                this.baseColor = {
     111                        r : parseInt(C<n?255:C<n*2?255-c*j:C<n*4?0:C<n*5?c*j:255),
     112                        g : parseInt(C<n*2?0:C<n*3?c*j:C<n*5?255:255-c*j),
     113                        b : parseInt(C<n?c*j:C<n*3?255:C<n*4?255-c*j:0)
     114                };
     115               
     116                $("div.ui-colorpicker-color", this.element).css('backgroundColor', 'rgb(' + this.baseColor.r + ',' + this.baseColor.g + ',' + this.baseColor.b + ')');
     117        },
     118        setGradientColor: function(){
     119                var r = Math.round((1-(1-(this.baseColor.r/255))*(this.lastValues[0]/255))*(255-this.lastValues[1]));
     120                var g = Math.round((1-(1-(this.baseColor.g/255))*(this.lastValues[0]/255))*(255-this.lastValues[1]));
     121                var b = Math.round((1-(1-(this.baseColor.b/255))*(this.lastValues[0]/255))*(255-this.lastValues[1]));
     122                this.colorfieldCurrent.css('backgroundColor','rgb(' + r + ',' + g + ',' + b + ')');
     123                $('input.ui-colorpicker-rgbR', this.element)[0].value = r;
     124                $('input.ui-colorpicker-rgbG', this.element)[0].value = g;
     125                $('input.ui-colorpicker-rgbB', this.element)[0].value = b;
     126                $('input.ui-colorpicker-hex', this.element)[0].value = (this.toHex(r) + this.toHex(g) + this.toHex(b)).toUpperCase();
     127                this.currentColor = {r:r,g:g,b:b};
     128        },
     129        toHex: function(color){
     130                color=parseInt(color).toString(16);
     131                return color.length<2?"0"+color:color;
     132        }
     133});
    89134       
    90         $.extend($.ui.colorpicker.prototype, {
    91                 plugins: {},
    92                 ui: function(e) {
    93                         return {
    94                                 instance: this,
    95                                 options: this.options,
    96                                 element: this.element,
    97                                 rgb: this.currentColor,
    98                                 hex: (this.toHex(this.currentColor.r) + this.toHex(this.currentColor.g) + this.toHex(this.currentColor.b)).toUpperCase()
    99                         };
    100                 },
    101                 propagate: function(n,e) {
    102                         $.ui.plugin.call(this, n, [e, this.ui()]);
    103                         return this.element.triggerHandler(n == "pick" ? n : "pick"+n, [e, this.ui()], this.options[n]);
    104                 },
    105                 destroy: function() {
    106                         if(!$.data(this.element[0], 'colorpicker')) return;
    107                         this.element
    108                                 .removeClass("ui-colorpicker ui-colorpicker-disabled")
    109                                 .removeData("colorpicker")
    110                                 .unbind(".colorpicker");
    111                 },
    112                 enable: function() {
    113                         this.element.removeClass("ui-colorpicker-disabled");
    114                         this.options.disabled = false;
    115                 },
    116                 disable: function() {
    117                         this.element.addClass("ui-colorpicker-disabled");
    118                         this.options.disabled = true;
    119                 },
    120                 setVertColor: function(indic){
    121                         var n=256/6, j=256/n, C=indic, c=C%n;
    122                         this.baseColor = {
    123                                 r : parseInt(C<n?255:C<n*2?255-c*j:C<n*4?0:C<n*5?c*j:255),
    124                                 g : parseInt(C<n*2?0:C<n*3?c*j:C<n*5?255:255-c*j),
    125                                 b : parseInt(C<n?c*j:C<n*3?255:C<n*4?255-c*j:0)
    126                         };
    127                        
    128                         $("div.ui-colorpicker-color", this.element).css('backgroundColor', 'rgb(' + this.baseColor.r + ',' + this.baseColor.g + ',' + this.baseColor.b + ')');
    129                 },
    130                 setGradientColor: function(){
    131                         var r = Math.round((1-(1-(this.baseColor.r/255))*(this.lastValues[0]/255))*(255-this.lastValues[1]));
    132                         var g = Math.round((1-(1-(this.baseColor.g/255))*(this.lastValues[0]/255))*(255-this.lastValues[1]));
    133                         var b = Math.round((1-(1-(this.baseColor.b/255))*(this.lastValues[0]/255))*(255-this.lastValues[1]));
    134                         this.colorfieldCurrent.css('backgroundColor','rgb(' + r + ',' + g + ',' + b + ')');
    135                         $('input.ui-colorpicker-rgbR', this.element)[0].value = r;
    136                         $('input.ui-colorpicker-rgbG', this.element)[0].value = g;
    137                         $('input.ui-colorpicker-rgbB', this.element)[0].value = b;
    138                         $('input.ui-colorpicker-hex', this.element)[0].value = (this.toHex(r) + this.toHex(g) + this.toHex(b)).toUpperCase();
    139                         this.currentColor = {r:r,g:g,b:b};
    140                 },
    141                 toHex: function(color){
    142                         color=parseInt(color).toString(16);
    143                         return color.length<2?"0"+color:color;
    144                 }
    145         });
    146        
    147135})(jQuery);
    148  No newline at end of file