mirror of
https://github.com/lovasoa/whitebophir
synced 2024-11-10 14:34:20 +00:00
Add a list of predefined colors and shortcuts for them
Color presets (#25) * Add color presets with keys 0..9 Also, initialize size/thickness with 7. * Add click-able buttons for color presets * Refactor color presets: use Minitpl Use Minitpl for creating the color preset buttons. Also, allow for more colors than keys and don't use just numeric keys, but allow all characters. * Fix layout for case if no color presets are defined * colors in array, CSS fix, restore random initColor See: https://github.com/lovasoa/whitebophir/pull/24#issuecomment-608409282 * Remove hardcoded size * Simplify condition Co-authored-by: adrian.buerli <adrian.buerli@ims.co.at>
This commit is contained in:
Ophir LOJKINE
GitHub
parent
baa3b2a048
commit
8eebbe9653
3 changed files with 84 additions and 25 deletions
|
|
@ -46,7 +46,7 @@ html, body, svg {
|
|||
cursor:default;
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
width: 300px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
#menu.closed {
|
||||
|
|
@ -104,7 +104,7 @@ html, body, svg {
|
|||
animation-name: minimize;
|
||||
animation-duration: 1.2s;
|
||||
animation-iteration-count: 2;
|
||||
animation-timing-function: cubic-bezier(.08,.82,.17,1);
|
||||
animation-timing-function: cubic-bezier(.4,.2,.2,1);
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
|
|
@ -170,6 +170,25 @@ input {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.colorPresets {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
padding-right: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.colorPresetButton {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid black;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
padding: 0;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.rangeChooser {
|
||||
display: block;
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -44,6 +44,9 @@
|
|||
<input type="color" id="chooseColor" value="#1913B0" />
|
||||
</span>
|
||||
<label class="tool-name" for="chooseColor">{{translate translations 'Color'}}</label>
|
||||
<span class="colorPresets" id="colorPresetSel">
|
||||
<span class="colorPresetButton"></span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="tool">
|
||||
<span class="tool-icon">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* WHITEBOPHIR
|
||||
*********************************************************
|
||||
* @licstart The following is the entire license notice for the
|
||||
* @licstart The following is the entire license notice for the
|
||||
* JavaScript code in this page.
|
||||
*
|
||||
* Copyright (C) 2013 Ophir LOJKINE
|
||||
|
|
@ -26,6 +26,15 @@
|
|||
|
||||
var Tools = {};
|
||||
|
||||
Tools.i18n = (function i18n() {
|
||||
var translations = JSON.parse(document.getElementById("translations").text);
|
||||
return {
|
||||
"t": function translate(s) {
|
||||
return translations[s] || s;
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
Tools.board = document.getElementById("board");
|
||||
Tools.svg = document.getElementById("canvas");
|
||||
Tools.socket = io.connect('', {
|
||||
|
|
@ -43,15 +52,20 @@ Tools.socket.emit("getboard", Tools.boardName);
|
|||
|
||||
Tools.HTML = {
|
||||
template: new Minitpl("#tools > .tool"),
|
||||
addShortcut: function addShortcut(key, callback) {
|
||||
window.addEventListener("keydown", function (e) {
|
||||
if (e.key === key && !e.target.matches("input[type=text], textarea")) {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
},
|
||||
addTool: function (toolName, toolIcon, toolShortcut) {
|
||||
var callback = function () {
|
||||
Tools.change(toolName);
|
||||
};
|
||||
window.addEventListener("keydown", function (e) {
|
||||
if (e.key === toolShortcut && !e.target.matches("input[type=text], textarea")) {
|
||||
Tools.change(toolName);
|
||||
document.activeElement.blur();
|
||||
}
|
||||
this.addShortcut(toolShortcut, function () {
|
||||
Tools.change(toolName);
|
||||
document.activeElement.blur();
|
||||
});
|
||||
return this.template.add(function (elem) {
|
||||
elem.addEventListener("click", callback);
|
||||
|
|
@ -77,6 +91,19 @@ Tools.HTML = {
|
|||
link.rel = "stylesheet";
|
||||
link.type = "text/css";
|
||||
document.head.appendChild(link);
|
||||
},
|
||||
colorPresetTemplate: new Minitpl("#colorPresetSel .colorPresetButton"),
|
||||
addColorButton: function (button) {
|
||||
var setColor = Tools.setColor.bind(Tools, button.color);
|
||||
if (button.key) this.addShortcut(button.key, setColor);
|
||||
return this.colorPresetTemplate.add(function (elem) {
|
||||
elem.addEventListener("click", setColor);
|
||||
elem.id = "color_" + button.color.replace(/^#/, '');
|
||||
elem.style.backgroundColor = button.color;
|
||||
if (button.key) {
|
||||
elem.title = Tools.i18n.t("keyboard shortcut") + ": " + button.key;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -151,7 +178,7 @@ Tools.change = function (toolName) {
|
|||
Tools.board.addEventListener(event, listener, { 'passive': false });
|
||||
}
|
||||
|
||||
//Call the start callback of the new tool
|
||||
//Call the start callback of the new tool
|
||||
newtool.onstart(Tools.curTool);
|
||||
Tools.curTool = newtool;
|
||||
};
|
||||
|
|
@ -412,16 +439,35 @@ Tools.positionElement = function (elem, x, y) {
|
|||
elem.style.left = x + "px";
|
||||
};
|
||||
|
||||
Tools.colorPresets = [
|
||||
{ color: "#001f3f", key: '1' },
|
||||
{ color: "#FF4136", key: '2' },
|
||||
{ color: "#0074D9", key: '3' },
|
||||
{ color: "#FF851B", key: '4' },
|
||||
{ color: "#FFDC00", key: '5' },
|
||||
{ color: "#3D9970", key: '6' },
|
||||
{ color: "#91E99B", key: '7' },
|
||||
{ color: "#B10DC9", key: '8' },
|
||||
{ color: "#7FDBFF", key: '9' },
|
||||
{ color: "#AAAAAA", key: '0' },
|
||||
{ color: "#01FF70" }
|
||||
];
|
||||
|
||||
Tools.color_chooser = document.getElementById("chooseColor");
|
||||
|
||||
Tools.setColor = function (color) {
|
||||
Tools.color_chooser.value = color;
|
||||
};
|
||||
|
||||
Tools.getColor = (function color() {
|
||||
var chooser = document.getElementById("chooseColor");
|
||||
// Init with a random color
|
||||
var clrs = ["#001f3f", "#0074D9", "#7FDBFF", "#39CCCC", "#3D9970",
|
||||
"#2ECC40", "#01FF70", "#FFDC00", "#FF851B", "#FF4136",
|
||||
"#85144b", "#F012BE", "#B10DC9", "#111111", "#AAAAAA"];
|
||||
chooser.value = clrs[Math.random() * clrs.length | 0];
|
||||
return function () { return chooser.value; };
|
||||
var color_index = (Math.random() * Tools.colorPresets.length) | 0;
|
||||
var initial_color = Tools.colorPresets[color_index].color;
|
||||
Tools.setColor(initial_color);
|
||||
return function () { return Tools.color_chooser.value; };
|
||||
})();
|
||||
|
||||
Tools.colorPresets.forEach(Tools.HTML.addColorButton.bind(Tools.HTML));
|
||||
|
||||
Tools.getSize = (function size() {
|
||||
var chooser = document.getElementById("chooseSize");
|
||||
var sizeIndicator = document.getElementById("sizeIndicator");
|
||||
|
|
@ -451,15 +497,6 @@ Tools.getOpacity = (function opacity() {
|
|||
};
|
||||
})();
|
||||
|
||||
Tools.i18n = (function i18n() {
|
||||
var translations = JSON.parse(document.getElementById("translations").text);
|
||||
return {
|
||||
"t": function translate(s) {
|
||||
return translations[s] || s;
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
//Scale the canvas on load
|
||||
Tools.svg.width.baseVal.value = document.body.clientWidth;
|
||||
Tools.svg.height.baseVal.value = document.body.clientHeight;
|
||||
|
|
|
|||
Loading…
Reference in a new issue