web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

better color picker in whiteboard

Browse Source
This commit is contained in:
ansuz
2017-03-31 11:02:59 +02:00
parent bd07b3a80f
commit 96dac80bd5
2 changed files with 86 additions and 22 deletions
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-size: cover;
background-position: center; 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 { #canvas-area {
flex: 1; flex: 1;
display: flex; display: flex;
@@ -60,7 +45,7 @@
#copy { #copy {
padding-left: 75px; padding-left: 75px;
} }
span.palette { span.palette-color {
height: 4vw; height: 4vw;
width: 4vw; width: 4vw;
display: inline-block; display: inline-block;
@@ -76,6 +61,9 @@
#width, #colors { #width, #colors {
position: relative; position: relative;
} }
#color-picker {
display: block;
}
</style> </style>
</head> </head>
<body> <body>

88
www/whiteboard/main.js
View File

@@ -52,19 +52,57 @@ define([
$width.on('change', updateBrushWidth); $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 // TODO add a better color palette
var palette = ['red', 'blue', 'green', 'white', 'black', 'purple', var palette = ['red', 'blue', 'green', 'white', 'black', 'purple',
'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink']; 'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'];
var $colors = $('#colors'); var $colors = $('#colors');
$colors.html(function (i, val) { palette.forEach(function (color, i) {
return palette.map(function (c) { var $color = $('<span>', {
return "<span class='palette' style='background-color:"+c+"'></span>"; 'class': 'palette-color',
}).join(""); })
.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'); var color = $(this).css('background-color');
canvas.freeDrawingBrush.color = color; setColor(color);
}); });
var setEditable = function (bool) { var setEditable = function (bool) {
@@ -151,6 +189,36 @@ define([
config.onLocal(); 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 editHash;
var onInit = config.onInit = function (info) { var onInit = config.onInit = function (info) {
userList = info.userList; userList = info.userList;
@@ -187,6 +255,8 @@ define([
}); });
$rightside.append($forget); $rightside.append($forget);
makeColorButton($rightside);
var editHash; var editHash;
var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys); var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
@@ -250,6 +320,9 @@ define([
updateTitle(json.metadata.title || defaultName); updateTitle(json.metadata.title || defaultName);
titleUpdated = true; titleUpdated = true;
} }
if (typeof(json.metadata.palette) !== 'object') {
json.metadata.palette = {};
}
} }
if (!titleUpdated) { if (!titleUpdated) {
updateTitle(defaultName); updateTitle(defaultName);
@@ -278,6 +351,8 @@ define([
var json = JSON.parse(userDoc); var json = JSON.parse(userDoc);
var remoteDoc = json.content; var remoteDoc = json.content;
// TODO update palette if it has changed
canvas.loadFromJSON(remoteDoc); canvas.loadFromJSON(remoteDoc);
canvas.renderAll(); canvas.renderAll();
@@ -349,6 +424,7 @@ define([
Visible.onChange(function (yes) { if (yes) { unnotify(); } }); Visible.onChange(function (yes) { if (yes) { unnotify(); } });
} }
/* TODO: restore palette from metadata.palette */
Cryptpad.getLastName(function (err, lastName) { Cryptpad.getLastName(function (err, lastName) {
if (err) { if (err) {
console.log("Could not get previous name"); console.log("Could not get previous name");