From 96dac80bd5a5dd4894084df4898189f34a920491 Mon Sep 17 00:00:00 2001 From: ansuz Date: Fri, 31 Mar 2017 11:02:59 +0200 Subject: [PATCH] better color picker in whiteboard --- www/whiteboard/index.html | 20 ++------- www/whiteboard/main.js | 88 ++++++++++++++++++++++++++++++++++++--- 2 files changed, 86 insertions(+), 22 deletions(-) diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html index 4f849e69e..d48d84bda 100644 --- a/www/whiteboard/index.html +++ b/www/whiteboard/index.html @@ -25,21 +25,6 @@ background-size: cover; background-position: center; } - textarea{ - width: 100%; - height: 100vh; - max-width: 100%; - max-height: 100vh; - - font-size: 18px; - background-color: #073642; - color: #839496; - - overflow-x: hidden; - - /* disallow textarea resizes */ - resize: none; - } #canvas-area { flex: 1; display: flex; @@ -60,7 +45,7 @@ #copy { padding-left: 75px; } - span.palette { + span.palette-color { height: 4vw; width: 4vw; display: inline-block; @@ -76,6 +61,9 @@ #width, #colors { position: relative; } + #color-picker { + display: block; + } diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js index 5afae1593..f5df84c11 100644 --- a/www/whiteboard/main.js +++ b/www/whiteboard/main.js @@ -52,19 +52,57 @@ define([ $width.on('change', updateBrushWidth); + var pickColor = function (cb) { + var $picker = $('', { + type: 'color', + value: module.color || '#000' + }) + .css({ + display: 'none', + }) + .on('change', function () { + var color = this.value; + cb(color); + }); + setTimeout(function () { + $picker.click(); + }); + }; + + var setColor = function (c) { + canvas.freeDrawingBrush.color = c; + module.$color.css({ + 'color': c, + }); + }; + // TODO add a better color palette var palette = ['red', 'blue', 'green', 'white', 'black', 'purple', 'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink']; var $colors = $('#colors'); - $colors.html(function (i, val) { - return palette.map(function (c) { - return ""; - }).join(""); + palette.forEach(function (color, i) { + var $color = $('', { + 'class': 'palette-color', + }) + .css({ + 'background-color': color, + }) + .dblclick(function () { + pickColor(function (c) { + $color.css({ + 'background-color': c, + }); + }); + // TODO commit chosen color to pad metadata: + // json.metadata.palette[i] + }); + + $colors.append($color); }); - $('.palette').on('click', function () { + $('.palette-color').on('click', function () { var color = $(this).css('background-color'); - canvas.freeDrawingBrush.color = color; + setColor(color); }); var setEditable = function (bool) { @@ -151,6 +189,36 @@ define([ config.onLocal(); }; + + var makeColorButton = function ($container) { + var $testColor = $('', { type: 'color', value: '!' }); + + // if colors aren't supported, bail out + if ($testColor.attr('type') !== 'color' || + $testColor.val() === '!') { + console.log("Colors aren't supported. Aborting"); + return; + } + + var $color = module.$color = $('