source: extensions/GrumPluginClasses/js/ui.inputColorPicker.js @ 20009

Last change on this file since 20009 was 16012, checked in by grum, 12 years ago

feature:2634- compatibility with Piwigo 2.4
+add some objects on js framework

  • Property svn:executable set to *
File size: 35.8 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: ui.inputColorPicker.js
4 * file version: 1.0.1
5 * date: 2012-06-18
6 *
7 * A jQuery plugin provided by the piwigo's plugin "GrumPluginClasses"
8 *
9 * -----------------------------------------------------------------------------
10 * Author     : Grum
11 *   email    : grum@piwigo.com
12 *   website  : http://photos.grum.fr
13 *
14 *   << May the Little SpaceFrog be with you ! >>
15 * -----------------------------------------------------------------------------
16 *
17 *
18 *
19 *
20 * :: HISTORY ::
21 *
22 * | release | date       |
23 * | 1.0.0   | 2010/11/04 | * first release
24 * |         |            |
25 * | 1.0.1   | 2012/06/18 | * improve memory managment
26 * |         |            |
27 * |         |            |
28 * |         |            |
29 * |         |            |
30 *
31 */
32
33
34
35(
36  function($)
37  {
38    /*
39     * plugin 'public' functions
40     */
41    var publicMethods =
42    {
43      init : function (opt)
44        {
45          return this.each(function()
46            {
47              // default values for the plugin
48              var $this=$(this),
49                  data = $this.data('options'),
50                  objects = $this.data('objects'),
51                  properties = $this.data('properties'),
52                  options =
53                    {
54                      colors:
55                        {
56                          fg:
57                            {
58                              color:'#ffffff',
59                              opacity:1
60                            },
61                          bg:
62                            {
63                              color:'#000000',
64                              opacity:1
65                            }
66                        },
67                      alpha:true,
68                      texts:
69                        {
70                          r:'R',
71                          g:'G',
72                          b:'B',
73                          a:'A',
74                          color:'#',
75                          h:'H',
76                          s:'S',
77                          v:'V'
78                        },
79                      mode:2, // 1 (fg) - 2  (fg+bg)
80                      selected:'fg',
81                      change:null
82                    };
83
84              // if options given, merge it
85              // if(opt) $.extend(options, opt); ==> options are set by setters
86
87              $this.data('options', options);
88
89
90              if(!properties)
91              {
92                $this.data('properties',
93                  {
94                    initialized:false,
95                    refreshing:false
96                  }
97                );
98                properties=$this.data('properties');
99              }
100
101              if(!objects)
102              {
103                objects =
104                  {
105                    container:$('<div/>',
106                        {
107                          'class':'ui-inputColorPicker'
108                        }
109                    ),
110                    dotAreaSV:$('<div/>',
111                      {
112                        'class':'ui-inputColorPicker-dotAreaSV'
113                      }
114                    ),
115                    dotAreaH:$('<div/>',
116                      {
117                        'class':'ui-inputColorPicker-dotAreaH'
118                      }
119                    ),
120                    inputContainer:$('<table>',
121                      {
122                        'class':'ui-inputColorPicker-inputContainer'
123                      }
124                    ),
125                    inputCRL:$('<td/>', {'class':'label'} ), // red label
126                    inputCRI:$('<td/>', {'class':'input'} ), // red input
127                    inputCGL:$('<td/>', {'class':'label'} ),
128                    inputCGI:$('<td/>', {'class':'input'} ),
129                    inputCBL:$('<td/>', {'class':'label'} ),
130                    inputCBI:$('<td/>', {'class':'input'} ),
131                    inputCHL:$('<td/>', {'class':'label'} ),
132                    inputCHI:$('<td/>', {'class':'input'} ),
133                    inputCSL:$('<td/>', {'class':'label'} ),
134                    inputCSI:$('<td/>', {'class':'input'} ),
135                    inputCVL:$('<td/>', {'class':'label'} ),
136                    inputCVI:$('<td/>', {'class':'input'} ),
137                    inputCAL:$('<td/>', {'class':'label'} ),
138                    inputCAI:$('<td/>', {'class':'input'} ),
139                    inputCcolorL:$('<td/>', {'class':'label'} ),
140                    inputCcolorI:$('<td/>', {'class':'input'} ),
141                    inputCFB:$('<td/>',
142                      {
143                        colspan:2,
144                        rowspan:2
145                      }
146                    )
147
148                  };
149
150                $this
151                  .html('')
152                  .append(
153                      objects.container
154                        .append(objects.dotAreaSV)
155                        .append(objects.dotAreaH)
156                        .append(objects.inputContainer
157                                  .append($('<tr/>').append(objects.inputCRL).append(objects.inputCRI).append(objects.inputCHL).append(objects.inputCHI))
158                                  .append($('<tr/>').append(objects.inputCGL).append(objects.inputCGI).append(objects.inputCSL).append(objects.inputCSI))
159                                  .append($('<tr/>').append(objects.inputCBL).append(objects.inputCBI).append(objects.inputCVL).append(objects.inputCVI))
160                                  .append($('<tr/>').append(objects.inputCAL).append(objects.inputCAI).append(objects.inputCFB))
161                                  .append($('<tr/>').append(objects.inputCcolorL).append(objects.inputCcolorI))
162                        )
163                  );
164
165                objects.dotAreaSV.inputDotArea(
166                  {
167                    range:
168                      {
169                        x:[0,100],
170                        y:[0,100]
171                      },
172                    width:132,
173                    height:132,
174                    change: function (event, value)
175                      {
176                        privateMethods.computeCurrentColor($this, 'dotAreaSV');
177                      }
178                  }
179                );
180                objects.dotAreaH.inputDotArea(
181                  {
182                    range:
183                      {
184                        x:false,
185                        y:[0,359]
186                      },
187                    width:20,
188                    height:132,
189                    change: function (event, value)
190                      {
191                        privateMethods.computeCurrentColor($this, 'dotAreaH');
192                      }
193                  }
194                );
195                objects.inputCRI.inputNum(
196                  {
197                    minValue:0,
198                    maxValue:255,
199                    stepValue:1,
200                    numDec:0,
201                    unitValue:'',
202                    //btInc:'+',
203                    //btDec:'-',
204                    value:0,
205                    showSlider:'auto',
206                    change: function (event, value)
207                      {
208                        privateMethods.computeCurrentColor($this, 'rgbR');
209                      }
210                  }
211                );
212                objects.inputCGI.inputNum(
213                  {
214                    minValue:0,
215                    maxValue:255,
216                    stepValue:1,
217                    numDec:0,
218                    unitValue:'',
219                    //btInc:'+',
220                    //btDec:'-',
221                    value:0,
222                    showSlider:'auto',
223                    change: function (event, value)
224                      {
225                        privateMethods.computeCurrentColor($this, 'rgbG');
226                      }
227                  }
228                );
229                objects.inputCBI.inputNum(
230                  {
231                    minValue:0,
232                    maxValue:255,
233                    stepValue:1,
234                    numDec:0,
235                    unitValue:'',
236                    //btInc:'+',
237                    //btDec:'-',
238                    value:0,
239                    showSlider:'auto',
240                    change: function (event, value)
241                      {
242                        privateMethods.computeCurrentColor($this, 'rgbB');
243                      }
244                  }
245                );
246                objects.inputCAI.inputNum(
247                  {
248                    minValue:0,
249                    maxValue:100,
250                    stepValue:1,
251                    numDec:0,
252                    unitValue:'',
253                    //btInc:'+',
254                    //btDec:'-',
255                    value:0,
256                    showSlider:'auto',
257                    change: function (event, value)
258                      {
259                        privateMethods.computeCurrentColor($this, 'alpha');
260                      }
261                  }
262                );
263                objects.inputCHI.inputNum(
264                  {
265                    minValue:0,
266                    maxValue:359,
267                    stepValue:1,
268                    numDec:0,
269                    unitValue:'',
270                    //btInc:'+',
271                    //btDec:'-',
272                    value:0,
273                    showSlider:'auto',
274                    change: function (event, value)
275                      {
276                        privateMethods.computeCurrentColor($this, 'hsvH');
277                      }
278                  }
279                );
280                objects.inputCSI.inputNum(
281                  {
282                    minValue:0,
283                    maxValue:100,
284                    stepValue:1,
285                    numDec:0,
286                    unitValue:'',
287                    //btInc:'+',
288                    //btDec:'-',
289                    value:0,
290                    showSlider:'auto',
291                    change: function (event, value)
292                      {
293                        privateMethods.computeCurrentColor($this, 'hsvS');
294                      }
295                  }
296                );
297                objects.inputCVI.inputNum(
298                  {
299                    minValue:0,
300                    maxValue:100,
301                    stepValue:1,
302                    numDec:0,
303                    unitValue:'',
304                    //btInc:'+',
305                    //btDec:'-',
306                    value:0,
307                    showSlider:'auto',
308                    change: function (event, value)
309                      {
310                        privateMethods.computeCurrentColor($this, 'hsvV');
311                      }
312                  }
313                );
314                objects.inputCcolorI.inputText(
315                  {
316                    value:'',
317                    displayChar:6,
318                    maxChar:6,
319                    regExp:'/^(?:[a-f0-9]{2}){3}$/i',
320                    change: function (event, value)
321                      {
322                        privateMethods.computeCurrentColor($this, 'color');
323                      }
324                  }
325                );
326                objects.inputCFB.inputColorsFB(
327                  {
328                    width:40,
329                    height:40,
330                    change: function (event, value)
331                      {
332                        privateMethods.computeCurrentColor($this, 'fb');
333                      }
334                  }
335                );
336
337
338                $this.data('objects', objects);
339              }
340
341              privateMethods.setOptions($this, opt);
342            }
343          );
344        }, // init
345      destroy : function ()
346        {
347          return this.each(
348            function()
349            {
350              // default values for the plugin
351              var $this=$(this),
352                  objects = $this.data('objects');
353              objects.dotAreaSV.remove();
354              objects.dotAreaH.remove();
355              objects.inputCRL.remove();
356              objects.inputCRI.remove();
357              objects.inputCHL.remove();
358              objects.inputCHI.remove();
359              objects.inputCGL.remove();
360              objects.inputCGI.remove();
361              objects.inputCSL.remove();
362              objects.inputCSI.remove();
363              objects.inputCBL.remove();
364              objects.inputCBI.remove();
365              objects.inputCVL.remove();
366              objects.inputCVI.remove();
367              objects.inputCAL.remove();
368              objects.inputCAI.remove();
369              objects.inputCFB.remove();
370              objects.inputCcolorL.remove();
371              objects.inputCcolorI.remove();
372              objects.inputContainer.remove();
373              objects.container.remove();
374
375              $this
376                .unbind()
377                .removeData();
378
379              delete $this;
380            }
381          );
382        }, // destroy
383
384      options: function (value)
385        {
386          return(
387            this.each(
388              function()
389              {
390                privateMethods.setOptions($(this), value);
391              }
392            )
393          );
394        }, // options
395
396      colors: function (value)
397        {
398          if(value!=null)
399          {
400            // set selected value
401            return(
402              this.each(
403                function()
404                {
405                  privateMethods.setColors($(this), value);
406                }
407              )
408            );
409          }
410          else
411          {
412            // return the selected tags
413            var options=this.data('options');
414            return(options.colors);
415          }
416        }, // colors
417
418      texts: function (value)
419        {
420          if(value!=null)
421          {
422            // set selected value
423            return(
424              this.each(
425                function()
426                {
427                  privateMethods.setTexts($(this), value, true);
428                }
429              )
430            );
431          }
432          else
433          {
434            // return the selected tags
435            var options=this.data('options');
436            return(options.texts);
437          }
438        }, // texts
439
440      alpha: function (value)
441        {
442          if(value!=null)
443          {
444            // set selected value
445            return(
446              this.each(
447                function()
448                {
449                  privateMethods.setAlpha($(this), value);
450                }
451              )
452            );
453          }
454          else
455          {
456            // return the selected tags
457            var options=this.data('options');
458            return(options.alpha);
459          }
460        }, // alpha
461
462      selected: function (value)
463        {
464          if(value!=null)
465          {
466            // set selected value
467            return(
468              this.each(
469                function()
470                {
471                  privateMethods.setSelected($(this), value);
472                }
473              )
474            );
475          }
476          else
477          {
478            // return the selected tags
479            var options=this.data('options');
480            return(options.selected);
481          }
482        }, // selected
483
484      mode: function (value)
485        {
486          if(value!=null)
487          {
488            // set selected value
489            return(
490              this.each(
491                function()
492                {
493                  privateMethods.setMode($(this), value);
494                }
495              )
496            );
497          }
498          else
499          {
500            // return the selected tags
501            var options=this.data('options');
502            return(options.mode);
503          }
504        }, // mode
505
506      change: function (value)
507        {
508          if(value!=null && $.isFunction(value))
509          {
510            // set selected value
511            return(
512              this.each(
513                function()
514                {
515                  privateMethods.setEventChange($(this), value);
516                }
517              )
518            );
519          }
520          else
521          {
522            // return the selected value
523            var options=this.data('options');
524
525            if(options)
526            {
527              return(options.change);
528            }
529            else
530            {
531              return(null);
532            }
533          }
534        } // change
535
536    }; // methods
537
538
539    /*
540     * plugin 'private' methods
541     */
542    var privateMethods =
543    {
544      setOptions : function (object, value)
545        {
546          var properties=object.data('properties'),
547              options=object.data('options');
548
549          if(!$.isPlainObject(value)) return(false);
550
551          properties.initialized=false;
552
553          privateMethods.setMode(object, (value.mode!=null)?value.mode:options.mode);
554          privateMethods.setSelected(object, (value.selected!=null)?value.selected:options.selected);
555          privateMethods.setColors(object, (value.colors!=null)?value.colors:options.colors);
556          privateMethods.setAlpha(object, (value.alpha!=null)?value.alpha:options.alpha);
557          privateMethods.setTexts(object, (value.texts!=null)?value.texts:options.texts);
558
559          privateMethods.setEventChange(object, (value.change!=null)?value.change:options.change);
560
561          properties.initialized=true;
562        },
563
564      setAlpha : function (object, value)
565        {
566          var options=object.data('options'),
567              objects=object.data('objects');
568
569          if((!properties.initialized || options.alpha!=value) && (value==true || value==false))
570          {
571            options.alpha=value;
572
573            if(options.alpha)
574            {
575              objects.inputCAI.css('visibility', 'visible');
576              objects.inputCAL.css('visibility', 'visible');
577            }
578            else
579            {
580              objects.inputCAI.css('visibility', 'hidden');
581              objects.inputCAL.css('visibility', 'hidden');
582            }
583          }
584          return(options.alpha);
585        }, //setAlpha
586
587      setMode : function (object, value)
588        {
589          var options=object.data('options'),
590              objects=object.data('objects');
591
592          if((!properties.initialized || options.mode!=value) && (value==1 || value==2))
593          {
594            options.mode=value;
595
596            objects.inputCFB.inputColorsFB('mode', options.mode);
597          }
598          return(options.mode);
599        }, //setMode
600
601
602      setSelected : function (object, value)
603        {
604          var options=object.data('options'),
605              objects=object.data('objects');
606
607          if((!properties.initialized || options.selected!=value) && (value=='fg' || value=='bg'))
608          {
609            options.selected=value;
610
611            objects.inputCFB.inputColorsFB('selected', options.selected);
612          }
613          return(options.selected);
614        }, //setSelected
615
616
617      setTexts : function (object, value)
618        {
619          var options=object.data('options'),
620              objects=object.data('objects');
621
622          if(value.r!=null)
623          {
624            options.texts.r=value.r;
625            objects.inputCRL.html(options.texts.r);
626          }
627          if(value.g!=null)
628          {
629            options.texts.g=value.g;
630            objects.inputCGL.html(options.texts.g);
631          }
632          if(value.b!=null)
633          {
634            options.texts.b=value.b;
635            objects.inputCBL.html(options.texts.b);
636          }
637          if(value.h!=null)
638          {
639            options.texts.h=value.h;
640            objects.inputCHL.html(options.texts.h);
641          }
642          if(value.s!=null)
643          {
644            options.texts.s=value.s;
645            objects.inputCSL.html(options.texts.s);
646          }
647          if(value.v!=null)
648          {
649            options.texts.v=value.v;
650            objects.inputCVL.html(options.texts.v);
651          }
652          if(value.a!=null)
653          {
654            options.texts.a=value.a;
655            objects.inputCAL.html(options.texts.a);
656          }
657          if(value.color!=null)
658          {
659            options.texts.color=value.color;
660            objects.inputCcolorL.html(options.texts.color);
661          }
662
663          return(options.texts);
664        }, //setColors
665
666      /**
667       * @param String color : a '#rrggbb' string
668       * @param Integer opacity : [0..100] value
669       * @param String target : 'fg' or 'bg'
670       * @param String from : '' for refreshing all items
671       */
672      setColor : function (object, color, opacity, target, from)
673        {
674          var objects=object.data('objects'),
675              properties=object.data('properties'),
676              options=object.data('options'),
677              rgbColor={r:0, g:0, b:0},
678              hsvColor={h:0, s:0, v:0},
679              svColorHue=0;
680
681          if(properties.refreshing || !(target=='fg' || target=='bg')) return(false);
682
683          properties.refreshing=true;
684
685          rgbColor=privateMethods.strToRGB(color);
686          hsvColor=privateMethods.RGBtoHSV(rgbColor);
687
688          if(from=='hsvH') hsvColor.h=objects.inputCHI.inputNum('value');
689          if(from=='hsvS') hsvColor.s=objects.inputCSI.inputNum('value');
690          if(from=='hsvV') hsvColor.v=objects.inputCVI.inputNum('value');
691          if(from=='dotAreaSV')
692          {
693            sv=objects.dotAreaSV.inputDotArea('values');
694            hsvColor.s=100-Math.round(sv.y);
695            hsvColor.v=Math.round(sv.x);
696          }
697          if(from=='dotAreaH') hsvColor.h=360-Math.round(objects.dotAreaH.inputDotArea('values').y);
698          svColorHue=hsvColor.h;
699
700          if(from=='' || from=='fb') objects.inputCAI.inputNum('value', opacity);
701
702          if(from!='hsvH' && from!='dotAreaSV' && from!='alpha') objects.dotAreaSV.inputDotArea('values', { x:hsvColor.v, y:100-hsvColor.s } );
703          if(from!='dotAreaH' && from!='alpha' && from!='hsvS' && from!='hsvV' && color!='#000000') objects.dotAreaH.inputDotArea('values', { y:360-hsvColor.h } );
704          if(from!='rgbR' && from!='rgbG' && from!='rgbB' && from!='alpha')
705          {
706            objects.inputCRI.inputNum('value', rgbColor.r);
707            objects.inputCGI.inputNum('value', rgbColor.g);
708            objects.inputCBI.inputNum('value', rgbColor.b);
709          }
710          if(from!='hsvH' && from!='hsvS' && from!='hsvV' && from!='alpha')
711          {
712            if(color!='#000000')
713            {
714              objects.inputCHI.inputNum('value', hsvColor.h);
715            }
716            else
717            {
718              svColorHue=objects.inputCHI.inputNum('value');
719            }
720            objects.inputCSI.inputNum('value', hsvColor.s);
721            objects.inputCVI.inputNum('value', hsvColor.v);
722          }
723          if(from!='color' && from!='alpha') objects.inputCcolorI.inputText('value', color.substr(1));
724
725          if(from!='alpha') objects.dotAreaSV
726                              .find('div.ui-inputDotArea')
727                              .css('background-color',
728                                privateMethods.RGBToStr(privateMethods.HSVtoRGB({h:svColorHue,s:100,v:100}))
729                              );
730
731          if(from!='fb') objects.inputCFB.inputColorsFB(target, {color:color, opacity:opacity/100} );
732
733          if(from!='')
734          {
735            if(target=='fg')
736            {
737              options.colors.fg.color=color;
738              options.colors.fg.opacity=opacity/100;
739            }
740            else
741            {
742              options.colors.bg.color=color;
743              options.colors.bg.opacity=opacity/100;
744            }
745          }
746
747          properties.refreshing=false;
748
749          if(options.change) object.trigger('inputColorPickerChange', {target:target, color:{color:color, opacity:opacity/100} } );
750        },
751
752      setColors : function (object, value)
753        {
754          var objects=object.data('objects'),
755              options=object.data('options');
756
757          if(value.fg!=null)
758          {
759            if(value.fg.color!=null) options.colors.fg.color=value.fg.color;
760            if(value.fg.opacity!=null) options.colors.fg.opacity=value.fg.opacity;
761            if(objects.inputCFB.inputColorsFB('selected')=='fg')
762            {
763              privateMethods.setColor(object, options.colors.fg.color, Math.round(options.colors.fg.opacity*100), 'fg', '');
764            }
765            else
766            {
767              objects.inputCFB.inputColorsFB('fg', options.colors.fg);
768            }
769          }
770
771          if(value.bg!=null)
772          {
773            if(value.bg.color!=null) options.colors.bg.color=value.bg.color;
774            if(value.bg.opacity!=null) options.colors.bg.opacity=value.bg.opacity;
775            if(objects.inputCFB.inputColorsFB('selected')=='bg')
776            {
777              privateMethods.setColor(object, options.colors.bg.color, Math.round(options.colors.bg.opacity*100), 'bg', '');
778            }
779            else
780            {
781              objects.inputCFB.inputColorsFB('bg', options.colors.bg);
782            }
783          }
784
785          return(options.colors);
786        }, //setFG
787
788      setEventChange : function (object, value)
789        {
790          var options=object.data('options');
791
792          options.change=value;
793          object.unbind('inputColorPickerChange');
794          if(value) object.bind('inputColorPickerChange', options.change);
795          return(options.change);
796        },
797
798      computeCurrentColor : function (object, from)
799        {
800          var options=object.data('options'),
801              objects=object.data('objects'),
802              properties=object.data('properties'),
803              colors={},
804              target=objects.inputCFB.inputColorsFB('selected');
805
806          if(properties.refreshing) return(false);
807
808          switch(from)
809          {
810            case 'dotAreaSV':
811            case 'dotAreaH':
812              var sv=objects.dotAreaSV.inputDotArea('values');
813              colors.color=privateMethods.RGBToStr(
814                privateMethods.HSVtoRGB(
815                  {
816                    h:360-objects.dotAreaH.inputDotArea('values').y,
817                    s:100-sv.y,
818                    v:sv.x
819                  }
820                )
821              );
822              if(target=='fg')
823              {
824                colors.opacity=Math.round(options.colors.fg.opacity*100);
825              }
826              else
827              {
828                colors.opacity=Math.round(options.colors.bg.opacity*100);
829              }
830              break;
831            case 'hsvH':
832            case 'hsvS':
833            case 'hsvV':
834              colors.color=privateMethods.RGBToStr(
835                privateMethods.HSVtoRGB(
836                  {
837                    h:objects.inputCHI.inputNum('value'),
838                    s:objects.inputCSI.inputNum('value'),
839                    v:objects.inputCVI.inputNum('value')
840                  }
841                )
842              );
843              if(target=='fg')
844              {
845                colors.opacity=Math.round(options.colors.fg.opacity*100);
846              }
847              else
848              {
849                colors.opacity=Math.round(options.colors.bg.opacity*100);
850              }
851              break;
852            case 'rgbR':
853            case 'rgbG':
854            case 'rgbB':
855              colors.color=privateMethods.RGBToStr(
856                {
857                  r:objects.inputCRI.inputNum('value'),
858                  g:objects.inputCGI.inputNum('value'),
859                  b:objects.inputCBI.inputNum('value')
860                }
861              );
862              if(target=='fg')
863              {
864                colors.opacity=Math.round(options.colors.fg.opacity*100);
865              }
866              else
867              {
868                colors.opacity=Math.round(options.colors.bg.opacity*100);
869              }
870              break;
871            case 'alpha':
872              if(target=='fg')
873              {
874                colors.color=options.colors.fg.color;
875              }
876              else
877              {
878                colors.color=options.colors.bg.color;
879              }
880              colors.opacity=objects.inputCAI.inputNum('value');
881              break;
882            case 'fb':
883              if(target=='fg')
884              {
885                colors.color=options.colors.fg.color;
886                colors.opacity=Math.round(options.colors.fg.opacity*100);
887              }
888              else
889              {
890                colors.color=options.colors.bg.color;
891                colors.opacity=Math.round(options.colors.bg.opacity*100);
892              }
893              break;
894            case 'color':
895              colors.color='#'+objects.inputCcolorI.inputText('value');
896              if(target=='fg')
897              {
898                colors.opacity=Math.round(options.colors.fg.opacity*100);
899              }
900              else
901              {
902                colors.opacity=Math.round(options.colors.bg.opacity*100);
903              }
904              break;
905          }
906
907          privateMethods.setColor(object, colors.color, colors.opacity, target, from);
908        },
909
910      /**
911       * convert a RGB object {r,g,b} to String '#rrggbb'
912       * @param Object color : {r,g,b} object
913       * @return String
914       */
915      RGBToStr : function (color)
916        {
917          var r=color.r.toString(16),
918              g=color.g.toString(16),
919              b=color.b.toString(16);
920          if(r.length<2) r='0'+r;
921          if(g.length<2) g='0'+g;
922          if(b.length<2) b='0'+b;
923          return('#'+r+g+b);
924        },
925
926      /**
927       * convert a string to RGB object {r,g,b}
928       * string can be '#rrggbb' or 'rgb(r,g,b)'
929       * @param String color
930       * @return Object
931       */
932      strToRGB : function (color)
933        {
934          var returned={
935                r:0,
936                g:0,
937                b:0
938              },
939              re1=/^rgb\((\d){1,3},(\d){1,3},(\d){1,3}\)$/i,
940              re2=/^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i,
941              colors=re1.exec(color);
942
943          if(colors!=null)
944          {
945            returned.r=parseInt(colors[1]);
946            returned.g=parseInt(colors[2]);
947            returned.b=parseInt(colors[3]);
948          }
949          else
950          {
951            colors=re2.exec(color);
952
953            if(colors!=null)
954            {
955              returned.r=parseInt('0x'+colors[1]);
956              returned.g=parseInt('0x'+colors[2]);
957              returned.b=parseInt('0x'+colors[3]);
958            }
959          }
960          return(returned);
961        },
962
963      /**
964       * convert an RGB object {r,g,b} to HSV object {h,s,v}
965       * @param Object color : {r,g,b}
966       * @return Object
967       */
968      RGBtoHSV : function (color)
969        {
970          var returned={
971                h:0,
972                s:0,
973                v:0
974          },
975          color={
976            r:color.r/255,
977            g:color.g/255,
978            b:color.b/255
979          },
980          max=Math.max(color.r, color.g, color.b),
981          min=Math.min(color.r, color.g, color.b);
982
983          if(max==min)
984          {
985            returned.h=0;
986          }
987          else if(max==color.r)
988          {
989            returned.h=Math.round((60*(color.g-color.b)/(max-min)+360)%360);
990          }
991          else if(max==color.g)
992          {
993            returned.h=Math.round((60*(color.b-color.r)/(max-min)+120));
994          }
995          else if(max==color.b)
996          {
997            returned.h=Math.round((60*(color.r-color.g)/(max-min)+240));
998          }
999
1000          returned.s=Math.round(100*(max==0?0:1-min/max));
1001          returned.v=Math.round(100*max);
1002
1003          return(returned);
1004        },
1005
1006      /**
1007       * convert an HSV object {h,s,v} to RGB object {r,g,b}
1008       * @param Object color : {h,s,v}
1009       * @return Object : {r,g,b}
1010       */
1011      HSVtoRGB : function (color)
1012        {
1013          var h=Math.floor(Math.abs(color.h/60))%6,
1014              f=color.h/60-h,
1015              l=Math.round(2.55*color.v*(1-color.s/100)),
1016              m=Math.round(2.55*color.v*(1-f*color.s/100)),
1017              n=Math.round(2.55*color.v*(1-(1-f)*color.s/100)),
1018              v=Math.round(2.55*color.v);
1019
1020          switch(h)
1021          {
1022            case 0:
1023              return({r:v, g:n, b:l});
1024              break;
1025            case 1:
1026              return({r:m, g:v, b:l});
1027              break;
1028            case 2:
1029              return({r:l, g:v, b:n});
1030              break;
1031            case 3:
1032              return({r:l, g:m, b:v});
1033              break;
1034            case 4:
1035              return({r:n, g:l, b:v});
1036              break;
1037            case 5:
1038              return({r:v, g:l, b:m});
1039              break;
1040          }
1041          return({r:0, g:0, b:0});
1042        }
1043    };
1044
1045
1046    $.fn.inputColorPicker = function(method)
1047    {
1048      if(publicMethods[method])
1049      {
1050        return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
1051      }
1052      else if(typeof method === 'object' || ! method)
1053      {
1054        return publicMethods.init.apply(this, arguments);
1055      }
1056      else
1057      {
1058        $.error( 'Method ' +  method + ' does not exist on jQuery.inputColorPicker' );
1059      }
1060    } // $.fn.inputColorPicker
1061
1062  }
1063)(jQuery);
1064
1065$.inputDialogColor = function(opt)
1066{
1067  var options=
1068        {
1069          modal:true,
1070          mode:2,
1071          alpha:true,
1072          colors:
1073            {
1074              fg:{ color:'#ffffff', opacity:1 },
1075              bg:{ color:'#000000', opacity:1 }
1076            },
1077          title:'Colors selector',
1078          texts:null,
1079          buttons:
1080            {
1081              ok:'Ok',
1082              cancel:'Cancel'
1083            },
1084          selected:'fg',
1085          change:null
1086        },
1087      objects=
1088        {
1089          dialogBox:$('<div/>'),
1090          colorPicker:$('<div/>', {'class':'dialogColor'} )
1091        },
1092
1093  setOptions = function (opt)
1094    {
1095      if(opt.modal==true || opt.modal==false) options.modal=opt.modal;
1096      if(opt.mode==1 || opt.mode==2) options.mode=opt.mode;
1097      if(opt.alpha==true || opt.alpha==false) options.alpha=opt.alpha;
1098      if(opt.colors!=null) options.colors=opt.colors;
1099      options.texts=opt.texts;
1100      if(opt.selected=='fg' || opt.selected=='bg') options.selected=opt.selected;
1101      if(opt.title) options.title=opt.title;
1102      if(opt.buttons && opt.buttons.ok) options.buttons.ok=opt.buttons.ok;
1103      if(opt.buttons && opt.buttons.cancel) options.buttons.cancel=opt.buttons.cancel;
1104      if(opt.change && $.isFunction(opt.change)) options.change=opt.change;
1105    },
1106
1107  initDialog = function ()
1108    {
1109      var dialogOpt=
1110          {
1111            buttons:{},
1112            width:354,
1113            closeText:'x',
1114            dialogClass:'ui-inputDialogColor',
1115            modal:options.modal,
1116            resizable:false,
1117            title:options.title,
1118            open: null,
1119            close: function ()
1120                    {
1121                      objects.colorPicker.inputColorPicker('destroy').remove();
1122                      $(this).dialog('destroy').remove();
1123                    }
1124          };
1125
1126      if(options.modal)
1127      {
1128        dialogOpt.buttons[options.buttons.ok]=function (event)
1129          {
1130            if(options.change)
1131            {
1132              if(options.mode==1)
1133              {
1134                options.change(event, objects.colorPicker.inputColorPicker('colors').fg );
1135              }
1136              else
1137              {
1138                options.change(event, objects.colorPicker.inputColorPicker('colors') );
1139              }
1140            }
1141            $(this).dialog('close');
1142          };
1143
1144        dialogOpt.buttons[options.buttons.cancel]=function (event)
1145          {
1146            $(this).dialog('close');
1147          };
1148
1149        dialogOpt.open= function ()
1150          {
1151            objects.colorPicker
1152              .inputColorPicker(
1153                {
1154                  mode:options.mode,
1155                  alpha:options.alpha,
1156                  texts:options.texts,
1157                  colors:options.colors,
1158                  selected:options.selected
1159                }
1160              );
1161          };
1162      }
1163      else
1164      {
1165        dialogOpt.open= function ()
1166          {
1167            objects.colorPicker
1168              .inputColorPicker(
1169                {
1170                  mode:options.mode,
1171                  alpha:options.alpha,
1172                  texts:options.texts,
1173                  colors:options.colors,
1174                  change:options.change,
1175                  selected:options.selected
1176                }
1177              );
1178          };
1179      }
1180
1181      objects.dialogBox
1182        .append(objects.colorPicker)
1183        .dialog(dialogOpt);
1184    };
1185
1186  setOptions(opt);
1187  initDialog();
1188
1189} // $.fn.inputDialogColor
1190
1191
Note: See TracBrowser for help on using the repository browser.