From 5d30c8b4a5790fe0d4547e175232e174ee864cdc Mon Sep 17 00:00:00 2001 From: John McLear Date: Tue, 16 Aug 2011 21:29:51 +0100 Subject: [PATCH 1/2] Peter will hate this but I extended Etherpad to support 64 colors and removed the requirements for a background image on the colorpicker dialogue --- node/handler/PadMessageHandler.js | 2 +- static/css/pad.css | 22 ++++++++++++++-------- static/img/colorpicker.gif | Bin 1992 -> 0 bytes static/pad.html | 2 ++ 4 files changed, 17 insertions(+), 9 deletions(-) delete mode 100644 static/img/colorpicker.gif diff --git a/node/handler/PadMessageHandler.js b/node/handler/PadMessageHandler.js index 2d0cf001..6623d162 100644 --- a/node/handler/PadMessageHandler.js +++ b/node/handler/PadMessageHandler.js @@ -746,7 +746,7 @@ function handleClientReady(client, message) "rev": pad.getHeadRevisionNumber(), "globalPadId": message.padId }, - "colorPalette": ["#ffc7c7", "#fff1c7", "#e3ffc7", "#c7ffd5", "#c7ffff", "#c7d5ff", "#e3c7ff", "#ffc7f1", "#ff8f8f", "#ffe38f", "#c7ff8f", "#8fffab", "#8fffff", "#8fabff", "#c78fff", "#ff8fe3", "#d97979", "#d9c179", "#a9d979", "#79d991", "#79d9d9", "#7991d9", "#a979d9", "#d979c1", "#d9a9a9", "#d9cda9", "#c1d9a9", "#a9d9b5", "#a9d9d9", "#a9b5d9", "#c1a9d9", "#d9a9cd"], + "colorPalette": ["#ffc7c7", "#fff1c7", "#e3ffc7", "#c7ffd5", "#c7ffff", "#c7d5ff", "#e3c7ff", "#ffc7f1", "#ff8f8f", "#ffe38f", "#c7ff8f", "#8fffab", "#8fffff", "#8fabff", "#c78fff", "#ff8fe3", "#d97979", "#d9c179", "#a9d979", "#79d991", "#79d9d9", "#7991d9", "#a979d9", "#d979c1", "#d9a9a9", "#d9cda9", "#c1d9a9", "#a9d9b5", "#a9d9d9", "#a9b5d9", "#c1a9d9", "#d9a9cd", "#4c9c82", "#12d1ad", "#2d8e80", "#7485c3", "#a091c7", "#3185ab", "#6818b4", "#e6e76d", "#a42c64", "#f386e5", "#4ecc0c", "#c0c236", "#693224", "#b5de6a", "#9b88fd", "#358f9b", "#496d2f", "#e267fe", "#d23056", "#1a1a64", "#5aa335", "#d722bb", "#86dc6c", "#b5a714", "#955b6a", "#9f2985", "#4b81c8", "#3d6a5b", "#434e16", "#d16084", "#af6a0e", "#8c8bd8"], "clientIp": "127.0.0.1", "userIsGuest": true, "userColor": authorColorId, diff --git a/static/css/pad.css b/static/css/pad.css index 8b0db73c..16ce1839 100644 --- a/static/css/pad.css +++ b/static/css/pad.css @@ -348,11 +348,16 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; } #myswatch { width: 100%; height: 100%; background: transparent;/*...initially*/ } #mycolorpicker { - background: url(../img/colorpicker.gif) no-repeat left top; - width: 232px; height: 140px; + /*background: url(../img/colorpicker.gif) no-repeat left top;*/ + width: 232px; height: 230px; position: absolute; left: -240px; top: 0px; z-index: 101; display: none;/*...initially*/ + border-style: solid; + border-radius: 5px; + border-color: #000; + background: #fff; + border-width:1px; } #mycolorpicker ul li @@ -362,12 +367,12 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; } #mycolorpicker .picked { border: 1px solid #000 !important; } #mycolorpicker .picked .pickerswatch { border: 1px solid #fff; } -#mycolorpickersave { position: absolute; left: 14px; top: 102px; - width: 47px; height: 0; padding-top: 20px; overflow: hidden; - cursor: pointer; } -#mycolorpickercancel { position: absolute; left: 87px; top: 102px; - width: 44px; height: 0; padding-top: 20px; overflow: hidden; - cursor: pointer; } +#mycolorpickersave { position: absolute; left: 10px; top: 192px; + width: 60px; padding: 4px; overflow: hidden; color: #000; + cursor: pointer; color:#000; font-size:13px; border-radius:5px; border-style:solid; border-color:#000; border-width:1px;text-align:center;background-color:#86DC6C;} +#mycolorpickercancel { position: absolute; left: 87px; top: 192px; + width: 60px; padding: 4px; overflow: hidden; color: #000; + cursor: pointer; color:#000; font-size:13px; border-radius:5px; border-style:solid; border-color:#000; border-width:1px;text-align:center;background-color:#FF8F8F;} #myusernameform { margin-left: 35px; } #myusernameedit { font-size: 1.3em; color: #fff; padding: 3px; height: 18px; margin: 0; border: 0; @@ -1095,3 +1100,4 @@ width:27px !important; cursor: hand; cursor: pointer; } + diff --git a/static/img/colorpicker.gif b/static/img/colorpicker.gif deleted file mode 100644 index 4f74446586bab9cd55c8af2b7ef3a14c3f22d7b8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1992 zcmci9`#;kQ1Hkd`zFT1?qmifNOdOXDjhrX!IfWGFUXqqGQ|W}1Lr*T}V4GYHrU~0P zWNw==a_4cWZSKRFTZO1mIW8ra2-Td|`6r&wKk)wHgw9s+WPwX#>U3x=H`}`me$tRwzjs8j*h2K zp9+OSkx10l)z#bEE0IVB1_q>3>Bz{)*x1vl*^I=wY4wJ>sePDqn&}f%V zSvz|Zxx8|IMWvvs`f*KdU427iQ*%qTx3l%BOSDs`|JT{o-P7CGFCm^j74Kwyd0=e( z+4C0zmoHimyG^{7&CX3+_8G=qdb70r{zHwA8_sOy)8>}U$0Pak*KhJppZxb<9BVit zZ-|19U*9lE9Ic{9(Ec1&+@1Ceb9K5eliibnKGU;nR9D)6LEobSmK$C+kY?&Hxuq4s z9ishkXXz~~g69$WV?4af2st-g@_}~jCxV;t7_Tqiz5rfh^sI8M^y-YwDCWiEiyE|} zE-u)~`Ww;=x5_Q-%O?4i*WwOL(EdQJSO+QFWT zpX@UP;TC~e%;RZ;g50tffBtehfs2j#G&9QGEOwuX{2@eG?XQ|)`V#kH>i0WuZU}z; z{N~k@@1d%sXscfadmh|zub!@-m~SsUvu7IHy1Mi{?V2>>H~i;!ub$#hVo3O%^%-f2 z!sEDaQJ)R1I}H!VJ#pCCS~HjKsh-{ok$+>2#DT94lBomQDP#+{S(IzS0ZnMY{eVVC zU3VC%{LlM`r^Ertfq{y}ahr6->=XkqQ>&&3}+?!ly z17%BBhCQo84Jn4}j|cr#5H-*L>rqrS5`=^?wSEwkXJ&x?mLAPznLJ8yC;h-Xj z-(3f!ueAoCsC#!Qi04NT1tJQW!ApD|&6988!H`j)rsUdmC~$r13ZU~FXSw>jLA}Ik za}K9c*}O%#T-&COHK}Wjsliw{A^-qvXu^e5l`2h%nx=0nCm5TBrGc39DXUd#FSj`R z5XYjf!I3jPUrewrCPf6)qToCLShCk)Tp~=Z>tKan9s%jd2{#sThl49Qhi{?Ry42+n z{BEStEs7Xp^6=^At1-Nbx^<- zDzxi75C&L+bvm_oq`t#&OC^*UR6J`w0HV~p>QG-W&`pQ=V2#5Jh>i=x~# z;d_M+87ya`5ho1N+wHNY0NE6SXP|K)pzm4`@F>YN`#f zg_JvCaVtct{HjDgj4aw1cHC=+6ZMM{G;MrsW4F$P*xlEZYx|N3+oP!IbaqYaG`k67$J0D%S~kg!ALLM39K-2sqG)7M8*06h@a!2=J$ zs4x&E+aVj`rzX=h#8`^JJ;2KK9X*a)<1cmBtx|hb9G`tn2LmD@N)xL|>S$F}{V*z~ z-9_1|W>(2n7kY#wr1FrE19!Bj8$ourx!ZO#4YDUbh}#NwGFxQ?uO+q!M~)ezHK2N} zN-m-m@iNL=9fQsbFaQioFVXf0qrnHgVBv!$+GoSS|16njxTlNreaPS+UTX=0o5bP$ zl(RufDu6#sr%$`z>MR%vg!qw6K=~@gJ!UIpYo7%LqJKoVhQ^H(OgPl%~R1O(y#m z!F`J!&$i0>YGcnssI3#W(od}p7Ta11xACancel +
From 9d37d91ce1f4a2af55cff5937e7819d4a7bd5ad2 Mon Sep 17 00:00:00 2001 From: Peter 'Pita' Martischka Date: Sat, 20 Aug 2011 18:22:10 +0100 Subject: [PATCH 2/2] added a colorPicker --- node/utils/Minify.js | 2 +- static/css/pad.css | 22 +- static/js/broadcast.js | 9 +- static/js/collab_client.js | 31 +-- static/js/farbtastic.js | 531 +++++++++++++++++++++++++++++++++++++ static/js/pad2.js | 12 +- static/js/pad_userlist.js | 28 +- static/pad.html | 10 +- 8 files changed, 594 insertions(+), 51 deletions(-) create mode 100644 static/js/farbtastic.js diff --git a/node/utils/Minify.js b/node/utils/Minify.js index 8d6a72ef..3bc74393 100644 --- a/node/utils/Minify.js +++ b/node/utils/Minify.js @@ -31,7 +31,7 @@ var gzip = require('gzip'); var server = require('../server'); var os = require('os'); -var padJS = ["jquery.min.js", "pad_utils.js", "plugins.js", "undo-xpopup.js", "json2.js", "pad_cookie.js", "pad_editor.js", "pad_editbar.js", "pad_docbar.js", "pad_modals.js", "ace.js", "collab_client.js", "pad_userlist.js", "pad_impexp.js", "pad_savedrevs.js", "pad_connectionstatus.js", "pad2.js", "jquery-ui.js", "chat.js"]; +var padJS = ["jquery.min.js", "pad_utils.js", "plugins.js", "undo-xpopup.js", "json2.js", "pad_cookie.js", "pad_editor.js", "pad_editbar.js", "pad_docbar.js", "pad_modals.js", "ace.js", "collab_client.js", "pad_userlist.js", "pad_impexp.js", "pad_savedrevs.js", "pad_connectionstatus.js", "pad2.js", "jquery-ui.js", "chat.js", "farbtastic.js"]; var timesliderJS = ["jquery.min.js", "plugins.js", "undo-xpopup.js", "json2.js", "colorutils.js", "draggable.js", "pad_utils.js", "pad_cookie.js", "pad_editor.js", "pad_editbar.js", "pad_docbar.js", "pad_modals.js", "easysync2_client.js", "domline_client.js", "linestylefilter_client.js", "cssmanager_client.js", "broadcast.js", "broadcast_slider.js", "broadcast_revisions.js"]; diff --git a/static/css/pad.css b/static/css/pad.css index 16ce1839..9d854b17 100644 --- a/static/css/pad.css +++ b/static/css/pad.css @@ -347,9 +347,9 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; } } #myswatch { width: 100%; height: 100%; background: transparent;/*...initially*/ } + #mycolorpicker { - /*background: url(../img/colorpicker.gif) no-repeat left top;*/ - width: 232px; height: 230px; + width: 232px; height: 265px; position: absolute; left: -240px; top: 0px; z-index: 101; display: none;/*...initially*/ @@ -358,8 +358,10 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; } border-color: #000; background: #fff; border-width:1px; + padding-left:10px; + padding-top:10px; } - +/* #mycolorpicker ul li { float: left; @@ -367,12 +369,16 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; } #mycolorpicker .picked { border: 1px solid #000 !important; } #mycolorpicker .picked .pickerswatch { border: 1px solid #fff; } -#mycolorpickersave { position: absolute; left: 10px; top: 192px; - width: 60px; padding: 4px; overflow: hidden; color: #000; - cursor: pointer; color:#000; font-size:13px; border-radius:5px; border-style:solid; border-color:#000; border-width:1px;text-align:center;background-color:#86DC6C;} -#mycolorpickercancel { position: absolute; left: 87px; top: 192px; +*/ +#mycolorpickersave { position: absolute; left: 10px; top: 240px; + width: 80px; padding: 4px; overflow: hidden; color: #000; + cursor: pointer; color:#000; font-size:13px; border-radius:5px; border-style:solid; border-color:#000; border-width:1px;text-align:center;background-color:lightgrey;} +#mycolorpickercancel { position: absolute; left: 107px; top: 240px; width: 60px; padding: 4px; overflow: hidden; color: #000; - cursor: pointer; color:#000; font-size:13px; border-radius:5px; border-style:solid; border-color:#000; border-width:1px;text-align:center;background-color:#FF8F8F;} + cursor: pointer; color:#000; font-size:13px; border-radius:5px; border-style:solid; border-color:#000; border-width:1px;text-align:center;background-color:lightgrey;} +#mycolorpickerpreview { position: absolute; left: 207px; top: 240px; width:15px; padding:4px; overflow: hidden; color: #fff; border-radius:5px; border-style: solid; border-width:1px;border-color:#000; height:15px;} + + #myusernameform { margin-left: 35px; } #myusernameedit { font-size: 1.3em; color: #fff; padding: 3px; height: 18px; margin: 0; border: 0; diff --git a/static/js/broadcast.js b/static/js/broadcast.js index 442c52ce..c2ab308e 100644 --- a/static/js/broadcast.js +++ b/static/js/broadcast.js @@ -741,13 +741,10 @@ function loadBroadcastJS() for (var author in newAuthorData) { var data = newAuthorData[author]; - if ((typeof data.colorId) == 'number') + var bgcolor = data.colorId; + if (bgcolor && dynamicCSS) { - var bgcolor = clientVars.colorPalette[data.colorId]; - if (bgcolor && dynamicCSS) - { - dynamicCSS.selectorStyle('.' + linestylefilter.getAuthorClassName(author)).backgroundColor = bgcolor; - } + dynamicCSS.selectorStyle('.' + linestylefilter.getAuthorClassName(author)).backgroundColor = bgcolor; } authorData[author] = data; } diff --git a/static/js/collab_client.js b/static/js/collab_client.js index ff3395c7..dd744be4 100644 --- a/static/js/collab_client.js +++ b/static/js/collab_client.js @@ -471,26 +471,19 @@ function getCollabClient(ace2editor, serverVars, initialUserInfo, options) function tellAceAuthorInfo(userId, colorId, inactive) { - if (colorId || (typeof colorId) == "number") + var cssColor = colorId; + if (inactive) { - colorId = Number(colorId); - if (options && options.colorPalette && options.colorPalette[colorId]) - { - var cssColor = options.colorPalette[colorId]; - if (inactive) - { - editor.setAuthorInfo(userId, { - bgcolor: cssColor, - fade: 0.5 - }); - } - else - { - editor.setAuthorInfo(userId, { - bgcolor: cssColor - }); - } - } + editor.setAuthorInfo(userId, { + bgcolor: cssColor, + fade: 0.5 + }); + } + else + { + editor.setAuthorInfo(userId, { + bgcolor: cssColor + }); } } diff --git a/static/js/farbtastic.js b/static/js/farbtastic.js new file mode 100644 index 00000000..7bc99487 --- /dev/null +++ b/static/js/farbtastic.js @@ -0,0 +1,531 @@ +// Farbtastic 2.0 alpha +(function ($) { + +var __debug = false; + +var __factor = 0.5; + +$.fn.farbtastic = function (options) { + $.farbtastic(this, options); + return this; +}; + +$.farbtastic = function (container, options) { + var container = $(container)[0]; + return container.farbtastic || (container.farbtastic = new $._farbtastic(container, options)); +} + +$._farbtastic = function (container, options) { + var fb = this; + + ///////////////////////////////////////////////////// + + /** + * Link to the given element(s) or callback. + */ + fb.linkTo = function (callback) { + // Unbind previous nodes + if (typeof fb.callback == 'object') { + $(fb.callback).unbind('keyup', fb.updateValue); + } + + // Reset color + fb.color = null; + + // Bind callback or elements + if (typeof callback == 'function') { + fb.callback = callback; + } + else if (typeof callback == 'object' || typeof callback == 'string') { + fb.callback = $(callback); + fb.callback.bind('keyup', fb.updateValue); + if (fb.callback[0].value) { + fb.setColor(fb.callback[0].value); + } + } + return this; + } + fb.updateValue = function (event) { + if (this.value && this.value != fb.color) { + fb.setColor(this.value); + } + } + + /** + * Change color with HTML syntax #123456 + */ + fb.setColor = function (color) { + var unpack = fb.unpack(color); + if (fb.color != color && unpack) { + fb.color = color; + fb.rgb = unpack; + fb.hsl = fb.RGBToHSL(fb.rgb); + fb.updateDisplay(); + } + return this; + } + + /** + * Change color with HSL triplet [0..1, 0..1, 0..1] + */ + fb.setHSL = function (hsl) { + fb.hsl = hsl; + + var convertedHSL = [hsl[0]] + convertedHSL[1] = hsl[1]*__factor+((1-__factor)/2); + convertedHSL[2] = hsl[2]*__factor+((1-__factor)/2); + + fb.rgb = fb.HSLToRGB(convertedHSL); + fb.color = fb.pack(fb.rgb); + fb.updateDisplay(); + + return this; + } + + ///////////////////////////////////////////////////// + + /** + * Initialize the color picker widget. + */ + fb.initWidget = function () { + + // Insert markup and size accordingly. + var dim = { + width: options.width, + height: options.width + }; + $(container) + .html( + '
' + + '
' + + '' + + '' + + '
' + ) + .find('*').attr(dim).css(dim).end() + .find('div>*').css('position', 'absolute'); + + // IE Fix: Recreate canvas elements with doc.createElement and excanvas. + $.browser.msie && $('canvas', container).each(function () { + // Fetch info. + var attr = { 'class': $(this).attr('class'), style: this.getAttribute('style') }, + e = document.createElement('canvas'); + // Replace element. + $(this).before($(e).attr(attr)).remove(); + // Init with explorerCanvas. + G_vmlCanvasManager && G_vmlCanvasManager.initElement(e); + // Set explorerCanvas elements dimensions and absolute positioning. + $(e).attr(dim).css(dim).css('position', 'absolute') + .find('*').attr(dim).css(dim); + }); + + // Determine layout + fb.radius = (options.width - options.wheelWidth) / 2 - 1; + fb.square = Math.floor((fb.radius - options.wheelWidth / 2) * 0.7) - 1; + fb.mid = Math.floor(options.width / 2); + fb.markerSize = options.wheelWidth * 0.3; + fb.solidFill = $('.farbtastic-solid', container).css({ + width: fb.square * 2 - 1, + height: fb.square * 2 - 1, + left: fb.mid - fb.square, + top: fb.mid - fb.square + }); + + // Set up drawing context. + fb.cnvMask = $('.farbtastic-mask', container); + fb.ctxMask = fb.cnvMask[0].getContext('2d'); + fb.cnvOverlay = $('.farbtastic-overlay', container); + fb.ctxOverlay = fb.cnvOverlay[0].getContext('2d'); + fb.ctxMask.translate(fb.mid, fb.mid); + fb.ctxOverlay.translate(fb.mid, fb.mid); + + // Draw widget base layers. + fb.drawCircle(); + fb.drawMask(); + } + + /** + * Draw the color wheel. + */ + fb.drawCircle = function () { + var tm = +(new Date()); + // Draw a hue circle with a bunch of gradient-stroked beziers. + // Have to use beziers, as gradient-stroked arcs don't work. + var n = 24, + r = fb.radius, + w = options.wheelWidth, + nudge = 8 / r / n * Math.PI, // Fudge factor for seams. + m = fb.ctxMask, + angle1 = 0, color1, d1; + m.save(); + m.lineWidth = w / r; + m.scale(r, r); + // Each segment goes from angle1 to angle2. + for (var i = 0; i <= n; ++i) { + var d2 = i / n, + angle2 = d2 * Math.PI * 2, + // Endpoints + x1 = Math.sin(angle1), y1 = -Math.cos(angle1); + x2 = Math.sin(angle2), y2 = -Math.cos(angle2), + // Midpoint chosen so that the endpoints are tangent to the circle. + am = (angle1 + angle2) / 2, + tan = 1 / Math.cos((angle2 - angle1) / 2), + xm = Math.sin(am) * tan, ym = -Math.cos(am) * tan, + // New color + color2 = fb.pack(fb.HSLToRGB([d2, 1, 0.5])); + if (i > 0) { + if ($.browser.msie) { + // IE's gradient calculations mess up the colors. Correct along the diagonals. + var corr = (1 + Math.min(Math.abs(Math.tan(angle1)), Math.abs(Math.tan(Math.PI / 2 - angle1)))) / n; + color1 = fb.pack(fb.HSLToRGB([d1 - 0.15 * corr, 1, 0.5])); + color2 = fb.pack(fb.HSLToRGB([d2 + 0.15 * corr, 1, 0.5])); + // Create gradient fill between the endpoints. + var grad = m.createLinearGradient(x1, y1, x2, y2); + grad.addColorStop(0, color1); + grad.addColorStop(1, color2); + m.fillStyle = grad; + // Draw quadratic curve segment as a fill. + var r1 = (r + w / 2) / r, r2 = (r - w / 2) / r; // inner/outer radius. + m.beginPath(); + m.moveTo(x1 * r1, y1 * r1); + m.quadraticCurveTo(xm * r1, ym * r1, x2 * r1, y2 * r1); + m.lineTo(x2 * r2, y2 * r2); + m.quadraticCurveTo(xm * r2, ym * r2, x1 * r2, y1 * r2); + m.fill(); + } + else { + // Create gradient fill between the endpoints. + var grad = m.createLinearGradient(x1, y1, x2, y2); + grad.addColorStop(0, color1); + grad.addColorStop(1, color2); + m.strokeStyle = grad; + // Draw quadratic curve segment. + m.beginPath(); + m.moveTo(x1, y1); + m.quadraticCurveTo(xm, ym, x2, y2); + m.stroke(); + } + } + // Prevent seams where curves join. + angle1 = angle2 - nudge; color1 = color2; d1 = d2; + } + m.restore(); + __debug && $('body').append('
drawCircle '+ (+(new Date()) - tm) +'ms'); + }; + + /** + * Draw the saturation/luminance mask. + */ + fb.drawMask = function () { + var tm = +(new Date()); + + // Iterate over sat/lum space and calculate appropriate mask pixel values. + var size = fb.square * 2, sq = fb.square; + function calculateMask(sizex, sizey, outputPixel) { + var isx = 1 / sizex, isy = 1 / sizey; + + for (var y = 0; y <= sizey; ++y) { + var l = 1 - y * isy; + for (var x = 0; x <= sizex; ++x) { + var s = 1 - x * isx; + // From sat/lum to alpha and color (grayscale) + var a = 1 - 2 * Math.min(l * s, (1 - l) * s); + var c = (a > 0) ? ((2 * l - 1 + a) * .5 / a) : 0; + + a = a*__factor+(1-__factor)/2; + c = c*__factor+(1-__factor)/2; + + outputPixel(x, y, c, a); + } + } + } + + // Method #1: direct pixel access (new Canvas). + if (fb.ctxMask.getImageData) { + // Create half-resolution buffer. + var sz = Math.floor(size / 2); + var buffer = document.createElement('canvas'); + buffer.width = buffer.height = sz + 1; + var ctx = buffer.getContext('2d'); + var frame = ctx.getImageData(0, 0, sz + 1, sz + 1); + + var i = 0; + calculateMask(sz, sz, function (x, y, c, a) { + frame.data[i++] = frame.data[i++] = frame.data[i++] = c * 255; + frame.data[i++] = a * 255; + }); + + ctx.putImageData(frame, 0, 0); + fb.ctxMask.drawImage(buffer, 0, 0, sz + 1, sz + 1, -sq, -sq, sq * 2, sq * 2); + } + // Method #2: drawing commands (old Canvas). + else if (!$.browser.msie) { + // Render directly at half-resolution + var sz = Math.floor(size / 2); + calculateMask(sz, sz, function (x, y, c, a) { + c = Math.round(c * 255); + fb.ctxMask.fillStyle = 'rgba(' + c + ', ' + c + ', ' + c + ', ' + a +')'; + fb.ctxMask.fillRect(x * 2 - sq - 1, y * 2 - sq - 1, 2, 2); + }); + } + // Method #3: vertical DXImageTransform gradient strips (IE). + else { + var cache_last, cache, w = 6; // Each strip is 6 pixels wide. + var sizex = Math.floor(size / w); + // 6 vertical pieces of gradient per strip. + calculateMask(sizex, 6, function (x, y, c, a) { + if (x == 0) { + cache_last = cache; + cache = []; + } + c = Math.round(c * 255); + a = Math.round(a * 255); + // We can only start outputting gradients once we have two rows of pixels. + if (y > 0) { + var c_last = cache_last[x][0], + a_last = cache_last[x][1], + color1 = fb.packDX(c_last, a_last), + color2 = fb.packDX(c, a), + y1 = Math.round(fb.mid + ((y - 1) * .333 - 1) * sq), + y2 = Math.round(fb.mid + (y * .333 - 1) * sq); + $('
').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 9fca8ec8..25477c6f 100644 --- a/static/pad.html +++ b/static/pad.html @@ -134,20 +134,20 @@ We removed this feature cause its not worth the space it needs in the editbar
+
+ Save Cancel +
- - +