').css({
+ position: 'absolute',
+ filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr="+ color1 +", EndColorStr="+ color2 +", GradientType=0)",
+ top: y1,
+ height: y2 - y1,
+ // Avoid right-edge sticking out.
+ left: fb.mid + (x * w - sq - 1),
+ width: w - (x == sizex ? Math.round(w / 2) : 0)
+ }).appendTo(fb.cnvMask);
+ }
+ cache.push([c, a]);
+ });
+ }
+ __debug && $('body').append('
drawMask '+ (+(new Date()) - tm) +'ms');
+ }
+
+ /**
+ * Draw the selection markers.
+ */
+ fb.drawMarkers = function () {
+ // Determine marker dimensions
+ var sz = options.width, lw = Math.ceil(fb.markerSize / 4), r = fb.markerSize - lw + 1;
+ var angle = fb.hsl[0] * 6.28,
+ x1 = Math.sin(angle) * fb.radius,
+ y1 = -Math.cos(angle) * fb.radius,
+ x2 = 2 * fb.square * (.5 - fb.hsl[1]),
+ y2 = 2 * fb.square * (.5 - fb.hsl[2]),
+ c1 = fb.invert ? '#fff' : '#000',
+ c2 = fb.invert ? '#000' : '#fff';
+
+ var circles = [
+ { x: x1, y: y1, r: r, c: '#000', lw: lw + 1 },
+ { x: x1, y: y1, r: fb.markerSize, c: '#fff', lw: lw },
+ { x: x2, y: y2, r: r, c: c2, lw: lw + 1 },
+ { x: x2, y: y2, r: fb.markerSize, c: c1, lw: lw },
+ ];
+
+ // Update the overlay canvas.
+ fb.ctxOverlay.clearRect(-fb.mid, -fb.mid, sz, sz);
+ for (i in circles) {
+ var c = circles[i];
+ fb.ctxOverlay.lineWidth = c.lw;
+ fb.ctxOverlay.strokeStyle = c.c;
+ fb.ctxOverlay.beginPath();
+ fb.ctxOverlay.arc(c.x, c.y, c.r, 0, Math.PI * 2, true);
+ fb.ctxOverlay.stroke();
+ }
+ }
+
+ /**
+ * Update the markers and styles
+ */
+ fb.updateDisplay = function () {
+ // Determine whether labels/markers should invert.
+ fb.invert = (fb.rgb[0] * 0.3 + fb.rgb[1] * .59 + fb.rgb[2] * .11) <= 0.6;
+
+ // Update the solid background fill.
+ fb.solidFill.css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])));
+
+ // Draw markers
+ fb.drawMarkers();
+
+ // Linked elements or callback
+ if (typeof fb.callback == 'object') {
+ // Set background/foreground color
+ $(fb.callback).css({
+ backgroundColor: fb.color,
+ color: fb.invert ? '#fff' : '#000'
+ });
+
+ // Change linked value
+ $(fb.callback).each(function() {
+ if ((typeof this.value == 'string') && this.value != fb.color) {
+ this.value = fb.color;
+ }
+ });
+ }
+ else if (typeof fb.callback == 'function') {
+ fb.callback.call(fb, fb.color);
+ }
+ }
+
+ /**
+ * Helper for returning coordinates relative to the center.
+ */
+ fb.widgetCoords = function (event) {
+ return {
+ x: event.pageX - fb.offset.left - fb.mid,
+ y: event.pageY - fb.offset.top - fb.mid
+ };
+ }
+
+ /**
+ * Mousedown handler
+ */
+ fb.mousedown = function (event) {
+ // Capture mouse
+ if (!$._farbtastic.dragging) {
+ $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);
+ $._farbtastic.dragging = true;
+ }
+
+ // Update the stored offset for the widget.
+ fb.offset = $(container).offset();
+
+ // Check which area is being dragged
+ var pos = fb.widgetCoords(event);
+ fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) > (fb.square + 2);
+
+ // Process
+ fb.mousemove(event);
+ return false;
+ }
+
+ /**
+ * Mousemove handler
+ */
+ fb.mousemove = function (event) {
+ // Get coordinates relative to color picker center
+ var pos = fb.widgetCoords(event);
+
+ // Set new HSL parameters
+ if (fb.circleDrag) {
+ var hue = Math.atan2(pos.x, -pos.y) / 6.28;
+ fb.setHSL([(hue + 1) % 1, fb.hsl[1], fb.hsl[2]]);
+ }
+ else {
+ var sat = Math.max(0, Math.min(1, -(pos.x / fb.square / 2) + .5));
+ var lum = Math.max(0, Math.min(1, -(pos.y / fb.square / 2) + .5));
+
+ fb.setHSL([fb.hsl[0], sat, lum]);
+ }
+ return false;
+ }
+
+ /**
+ * Mouseup handler
+ */
+ fb.mouseup = function () {
+ // Uncapture mouse
+ $(document).unbind('mousemove', fb.mousemove);
+ $(document).unbind('mouseup', fb.mouseup);
+ $._farbtastic.dragging = false;
+ }
+
+ /* Various color utility functions */
+ fb.dec2hex = function (x) {
+ return (x < 16 ? '0' : '') + x.toString(16);
+ }
+
+ fb.packDX = function (c, a) {
+ return '#' + fb.dec2hex(a) + fb.dec2hex(c) + fb.dec2hex(c) + fb.dec2hex(c);
+ };
+
+ fb.pack = function (rgb) {
+ var r = Math.round(rgb[0] * 255);
+ var g = Math.round(rgb[1] * 255);
+ var b = Math.round(rgb[2] * 255);
+ return '#' + fb.dec2hex(r) + fb.dec2hex(g) + fb.dec2hex(b);
+ };
+
+ fb.unpack = function (color) {
+ if (color.length == 7) {
+ function x(i) {
+ return parseInt(color.substring(i, i + 2), 16) / 255;
+ }
+ return [ x(1), x(3), x(5) ];
+ }
+ else if (color.length == 4) {
+ function x(i) {
+ return parseInt(color.substring(i, i + 1), 16) / 15;
+ }
+ return [ x(1), x(2), x(3) ];
+ }
+ };
+
+ fb.HSLToRGB = function (hsl) {
+ var m1, m2, r, g, b;
+ var h = hsl[0], s = hsl[1], l = hsl[2];
+ m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s;
+ m1 = l * 2 - m2;
+ return [
+ this.hueToRGB(m1, m2, h + 0.33333),
+ this.hueToRGB(m1, m2, h),
+ this.hueToRGB(m1, m2, h - 0.33333)
+ ];
+ };
+
+ fb.hueToRGB = function (m1, m2, h) {
+ h = (h + 1) % 1;
+ if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
+ if (h * 2 < 1) return m2;
+ if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
+ return m1;
+ };
+
+ fb.RGBToHSL = function (rgb) {
+ var r = rgb[0], g = rgb[1], b = rgb[2],
+ min = Math.min(r, g, b),
+ max = Math.max(r, g, b),
+ delta = max - min,
+ h = 0,
+ s = 0,
+ l = (min + max) / 2;
+ if (l > 0 && l < 1) {
+ s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
+ }
+ if (delta > 0) {
+ if (max == r && max != g) h += (g - b) / delta;
+ if (max == g && max != b) h += (2 + (b - r) / delta);
+ if (max == b && max != r) h += (4 + (r - g) / delta);
+ h /= 6;
+ }
+ return [h, s, l];
+ };
+
+ // Parse options.
+ if (!options.callback) {
+ options = { callback: options };
+ }
+ options = $.extend({
+ width: 300,
+ wheelWidth: (options.width || 300) / 10,
+ callback: null
+ }, options);
+
+ // Initialize.
+ fb.initWidget();
+
+ // Install mousedown handler (the others are set on the document on-demand)
+ $('canvas.farbtastic-overlay', container).mousedown(fb.mousedown);
+
+ // Set linked elements/callback
+ if (options.callback) {
+ fb.linkTo(options.callback);
+ }
+ // Set to gray.
+ fb.setColor('#808080');
+}
+
+})(jQuery);
diff --git a/static/js/pad2.js b/static/js/pad2.js
index 2653cccc..b568973d 100644
--- a/static/js/pad2.js
+++ b/static/js/pad2.js
@@ -226,6 +226,12 @@ function handshake()
clientVars = obj;
clientVars.userAgent = "Anonymous";
clientVars.collab_client_vars.clientAgent = "Anonymous";
+
+ //translate old colorIDs to RGB strings
+ if(typeof clientVars.userColor == "number")
+ {
+ clientVars.userColor = clientVars.colorPalette[clientVars.userColor];
+ }
//initalize the pad
pad.init();
@@ -264,6 +270,9 @@ function handshake()
}
}
});
+
+ // Bind the colorpicker
+ var fb = $('#colorpicker').farbtastic({ callback: '#mycolorpickerpreview', width: 220});
}
var pad = {
@@ -363,6 +372,7 @@ var pad = {
colorId: clientVars.userColor,
userAgent: pad.getDisplayUserAgent()
};
+
if (clientVars.specialKey)
{
pad.myUserInfo.specialKey = clientVars.specialKey;
@@ -786,7 +796,7 @@ var pad = {
},
preloadImages: function()
{
- var images = ['../static/img/colorpicker.gif'];
+ var images = []; // Removed as we now use CSS and JS for colorpicker
function loadNextImage()
{
diff --git a/static/js/pad_userlist.js b/static/js/pad_userlist.js
index 11b29bbb..1217affc 100644
--- a/static/js/pad_userlist.js
+++ b/static/js/pad_userlist.js
@@ -513,7 +513,7 @@ var paduserlist = (function()
}
var userData = {};
- userData.color = pad.getColorPalette()[info.colorId];
+ userData.color = info.colorId;
userData.name = info.name;
userData.status = '';
userData.activity = '';
@@ -703,7 +703,8 @@ var paduserlist = (function()
{
$("#myswatchbox").addClass('myswatchboxhoverable').removeClass('myswatchboxunhoverable');
}
- $("#myswatch").css('background', pad.getColorPalette()[myUserInfo.colorId]);
+
+ $("#myswatch").css({'background-color': myUserInfo.colorId});
}
};
return self;
@@ -718,20 +719,25 @@ function getColorPickerSwatchIndex(jnode)
function closeColorPicker(accept)
{
if (accept)
- {
- var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
- if (newColorId >= 0)
- { // fails on NaN
- myUserInfo.colorId = newColorId;
- pad.notifyChangeColor(newColorId);
+ {
+ var newColor = $("#mycolorpickerpreview").css("background-color");
+ var parts = newColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+ // parts now should be ["rgb(0, 70, 255", "0", "70", "255"]
+ delete (parts[0]);
+ for (var i = 1; i <= 3; ++i) {
+ parts[i] = parseInt(parts[i]).toString(16);
+ if (parts[i].length == 1) parts[i] = '0' + parts[i];
}
-
+ var newColor = "#" +parts.join(''); // "0070ff"
+
+ myUserInfo.colorId = newColor;
+ pad.notifyChangeColor(newColor);
paduserlist.renderMyUserInfo();
}
else
{
- pad.notifyChangeColor(previousColorId);
- paduserlist.renderMyUserInfo();
+ //pad.notifyChangeColor(previousColorId);
+ //paduserlist.renderMyUserInfo();
}
colorPickerOpen = false;
diff --git a/static/pad.html b/static/pad.html
index 9d285f10..90f4ca2d 100644
--- a/static/pad.html
+++ b/static/pad.html
@@ -119,18 +119,20 @@