infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

better color picker in whiteboard

pull/1/head
ansuz 2017-03-31 11:02:59 +02:00
parent bd07b3a80f
commit 96dac80bd5
2 changed files with 86 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
www/whiteboard/index.html
View File

@ -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;
}
</style>
</head>
<body>

88
www/whiteboard/main.js
View File

@ -52,19 +52,57 @@ define([
$width.on('change', updateBrushWidth);
var pickColor = function (cb) {
var $picker = $('<input>', {
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 "<span class='palette' style='background-color:"+c+"'></span>";
}).join("");
palette.forEach(function (color, i) {
var $color = $('<span>', {
'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 = $('<input>', { 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 = $('<button>', {
id: "color-picker",
title: "choose a color",
'class': "fa fa-square rightside-button",
})
.text(' ')
.on('click', function () {
pickColor(function (color) {
setColor(color);
})
});
setColor('#000');
$container.append($color);
return $color;
};
var editHash;
var onInit = config.onInit = function (info) {
userList = info.userList;
@ -187,6 +255,8 @@ define([
});
$rightside.append($forget);
makeColorButton($rightside);
var editHash;
var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
@ -250,6 +320,9 @@ define([
updateTitle(json.metadata.title || defaultName);
titleUpdated = true;
}
if (typeof(json.metadata.palette) !== 'object') {
json.metadata.palette = {};
}
}
if (!titleUpdated) {
updateTitle(defaultName);
@ -278,6 +351,8 @@ define([
var json = JSON.parse(userDoc);
var remoteDoc = json.content;
// TODO update palette if it has changed
canvas.loadFromJSON(remoteDoc);
canvas.renderAll();
@ -349,6 +424,7 @@ define([
Visible.onChange(function (yes) { if (yes) { unnotify(); } });
}
/* TODO: restore palette from metadata.palette */
Cryptpad.getLastName(function (err, lastName) {
if (err) {
console.log("Could not get previous name");