picker/colorpicker.js

   1 /*!
   2  * Color Picker 0.1.0 - Raphael plugin
   3  *
   4  * Copyright (c) 2010 Dmitry Baranovskiy (http://raphaeljs.com)
   5  * Based on Color Wheel (http://jweir.github.com/colorwheel) by John Weir (http://famedriver.com)
   6  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
   7  */
   8 (function (Raphael) {
   9     Raphael.colorpicker = function (x, y, size, initcolor, element) {
  10         return new ColorPicker(x, y, size, initcolor, element);
  11     };
  12     Raphael.fn.colorPickerIcon = function (x, y, r) {
  13         var segments = pi * r * 2 / Math.min(r / 8, 4);
  14         var a = pi / 2 - pi * 2 / segments * 1.5,
  15             path = ["M", x, y - r, "A", r, r, 0, 0, 1, r * Math.cos(a) + x, y - r * Math.sin(a), "L", x, y, "z"].join();
  16         for (var i = 0; i < segments; i++) {
  17             this.path(path).attr({
  18                 stroke: "none",
  19                 fill: "hsb(" + (segments - i) * (255 / segments) / 255 + ", 1, 1)",
  20                 transform: "r" + [90 + (360 / segments) * i, x, y]
  21             });
  22         }
  23         return this.circle(x, y, r).attr({
  24             fill: "r#fff-#fff",
  25             "fill-opacity": 0,
  26             "stroke-width": Math.round(r * .03),
  27             stroke: "#fff"
  28         });
  29     };
  30     var pi = Math.PI;
  31     function angle(x, y) {
  32         return (x < 0) * 180 + Math.atan(-y / -x) * 180 / pi;
  33     }
  34     var doc = document, win = window,
  35         ColorPicker = function (x, y, size, initcolor, element) {
  36             size = size || 200;
  37             var w3 = 3 * size / 200,
  38                 w1 = size / 200,
  39                 fi = 1.6180339887,
  40                 size20 = size / 20,
  41                 size2 = size / 2,
  42                 padding = 2 * size / 200,
  43                 height = size + size20 * 2 + padding * 3,
  44                 t = this,
  45                 H = 1, S = 1, B = 1, s = size - (size20 * 4),
  46                 r = element ? Raphael(element, size, height) : Raphael(x, y, size, height),
  47                 xy = s / 6 + size20 * 2 + padding,
  48                 wh = s * 2 / 3 - padding * 2;
  49             w1 < 1 && (w1 = 1);
  50             w3 < 1 && (w3 = 1);
  51
  52
  53             r.colorPickerIcon(size2, size2, size2 - padding);
  54
  55             t.cursor = r.set();
  56             t.cursor.push(r.circle(size2, size2, size20 / 2).attr({
  57                 stroke: "#000",
  58                 opacity: .5,
  59                 "stroke-width": w3
  60             }));
  61             t.cursor.push(t.cursor[0].clone().attr({
  62                 stroke: "#fff",
  63                 opacity: 1,
  64                 "stroke-width": w1
  65             }));
  66             t.disc = r.circle(size2, size2, size2 - padding).attr({
  67                 fill: "#000",
  68                 "fill-opacity": 0,
  69                 stroke: "none",
  70                 cursor: "crosshair"
  71             });
  72             var style = t.disc.node.style;
  73             style.unselectable = "on";
  74             style.MozUserSelect =  "none";
  75             style.WebkitUserSelect= "none";
  76
  77             // brightness drawing
  78             var h = size20 * 2 + 2;
  79             t.brect = r.rect(padding + h / fi / 2, size + padding * 2, size - padding * 2 - h / fi, h - padding * 2).attr({
  80                 stroke: "#fff",
  81                 fill: "180-#fff-#000"
  82             });
  83             t.cursorb = r.set();
  84             t.cursorb.push(r.rect(size - padding - h / fi, size + padding, ~~(h / fi), h, w3).attr({
  85                 stroke: "#000",
  86                 opacity: .5,
  87                 "stroke-width": w3
  88             }));
  89             t.cursorb.push(t.cursorb[0].clone().attr({
  90                 stroke: "#fff",
  91                 opacity: 1,
  92                 "stroke-width": w1
  93             }));
  94             t.btop = t.brect.clone().attr({
  95                 stroke: "#000",
  96                 fill: "#000",
  97                 opacity: 0
  98             });
  99             style = t.btop.node.style;
 100             style.unselectable = "on";
 101             style.MozUserSelect =  "none";
 102             style.WebkitUserSelect= "none";
 103
 104             t.bwidth = ~~(h / fi) / 2;
 105             t.minx = padding + t.bwidth;
 106             t.maxx = size - h / fi - padding + t.bwidth;
 107
 108             t.H = t.S = t.B = 1;
 109             t.padding = padding;
 110             t.raphael = r;
 111             t.size2 = size2;
 112             t.size20 = size20;
 113             t.x = x;
 114             t.y = y;
 115
 116             // events
 117             t.disc.drag(function (dx, dy, x, y) {
 118                 t.docOnMove(dx, dy, x, y);
 119             }, function (x, y) {
 120                 t.hsOnTheMove = true;
 121                 t.setHS(x - t.x, y - t.y);
 122             }, function () {
 123                 t.hsOnTheMove = false;
 124             });
 125             t.btop.drag(function (dx, dy, x, y) {
 126                 t.docOnMove(dx, dy, x, y);
 127             }, function (x, y) {
 128                 t.bOnTheMove = true;
 129                 t.setB(x - t.x);
 130             }, function () {
 131                 t.bOnTheMove = false;
 132             });
 133
 134             t.color(initcolor || "#fff");
 135             this.onchanged && this.onchanged(this.color());
 136         };
 137     ColorPicker.prototype.setB = function (x) {
 138         x < this.minx && (x = this.minx);
 139         x > this.maxx && (x = this.maxx);
 140         this.cursorb.attr({x: x - this.bwidth});
 141         this.B = (x - this.minx) / (this.maxx - this.minx);
 142         this.onchange && this.onchange(this.color());
 143     };
 144     ColorPicker.prototype.setHS = function (x, y) {
 145         var X = x - this.size2,
 146             Y = y - this.size2,
 147             R = this.size2 - this.size20 / 2 - this.padding,
 148             d = angle(X, Y),
 149             rd = d * pi / 180;
 150         isNaN(d) && (d = 0);
 151         if (X * X + Y * Y > R * R) {
 152             x = R * Math.cos(rd) + this.size2;
 153             y = R * Math.sin(rd) + this.size2;
 154         }
 155         this.cursor.attr({cx: x, cy: y});
 156         this.H = (1 - d / 360) % 1;
 157         this.S = Math.min((X * X + Y * Y) / R / R, 1);
 158         this.brect.attr({fill: "180-hsb(" + [this.H, this.S] + ",1)-#000"});
 159         this.onchange && this.onchange(this.color());
 160     };
 161     ColorPicker.prototype.docOnMove = function (dx, dy, x, y) {
 162         if (this.hsOnTheMove) {
 163             this.setHS(x - this.x, y - this.y);
 164         }
 165         if (this.bOnTheMove) {
 166             this.setB(x - this.x);
 167         }
 168     };
 169     ColorPicker.prototype.remove = function () {
 170         this.raphael.remove();
 171         this.color = function () {
 172             return false;
 173         };
 174     };
 175     ColorPicker.prototype.color = function (color) {
 176         if (color) {
 177             color = Raphael.getRGB(color);
 178             var hex = color.hex;
 179             color = Raphael.rgb2hsb(color.r, color.g, color.b);
 180             d = color.h * 360;
 181             this.H = color.h;
 182             this.S = color.s;
 183             this.B = color.b;
 184
 185             this.cursorb.attr({x: this.B * (this.maxx - this.minx) + this.minx - this.bwidth});
 186             this.brect.attr({fill: "180-hsb(" + [this.H, this.S] + ",1)-#000"});
 187
 188             var d = (1 - this.H) * 360,
 189                 rd = d * pi / 180,
 190                 R = (this.size2 - this.size20 / 2 - this.padding) * this.S,
 191                 x = Math.cos(rd) * R + this.size2,
 192                 y = Math.sin(rd) * R + this.size2;
 193             this.cursor.attr({cx: x, cy: y});
 194             return this;
 195         } else {
 196             return Raphael.hsb2rgb(this.H, this.S, this.B).hex;
 197         }
 198     };
 199 })(window.Raphael);