raphael/whiteboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add new feature so we save recent colors

Browse Source
This commit is contained in:
Raphael 2021-12-09 22:07:26 +01:00
parent cd8efc0eda
commit 5cf713d851
1 changed files with 111 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
src/js/main.js
View File

@ -756,66 +756,119 @@ function initWhiteboard() {
whiteboard.dropIndicator.hide(); whiteboard.dropIndicator.hide();
}); });
new Picker({ if (!localStorage.getItem("savedColors")) {
parent: $("#whiteboardColorpicker")[0], localStorage.setItem(
color: "#000000", "savedColors",
onChange: function (color) { JSON.stringify(["rgba(255, 136, 0, 1)", "rgba(0, 0, 0, 1)", "rgba(0, 128, 0, 1)"])
whiteboard.setDrawColor(color.rgbaString); );
}, }
});
new Picker({ let colorPickerOnOpen = function (current_color) {
parent: $("#textboxBackgroundColorPicker")[0], this._domPalette = $(".picker_palette", this.domElement);
color: "#f5f587", const palette = JSON.parse(localStorage.getItem("savedColors"));
bgcolor: "#f5f587", if ($(".picker_splotch", this._domPalette).length === 0) {
onChange: function (bgcolor) { for (let i = 0; i < palette.length; i++) {
whiteboard.setTextBackgroundColor(bgcolor.rgbaString); let palette_Color_obj = new this.color.constructor(palette[i]);
}, let splotch_div = $(
onOpen: function(current_color){ '<div style="position:relative;"><span position="' +
this._domPalette = $('.picker_palette', this.domElement); i +
let palette = ["rgba(255, 136, 0, 1)", "rgba(0, 0, 0, 1)", "rgba(0, 128, 0, 1)"]; '" class="removeColor" style="position:absolute; cursor:pointer; right:-1px; top:-4px;">x</span></div>'
if ($(".picker_splotch", this._domPalette).length === 0) { )
for (let i = 0; i < palette.length; i++){ .addClass("picker_splotch")
let palette_Color_obj = new (this.color.constructor)(palette[i]); .attr({
let splotch_div = $("<div></div>") id: "s" + i,
.addClass("picker_splotch") })
.attr({ .css("background-color", palette_Color_obj.hslaString)
"id": "s" + i, .on("click", { that: this, obj: palette_Color_obj }, function (e) {
}) e.data.that._setColor(e.data.obj.hslaString);
.css("background-color", palette_Color_obj.hslaString) });
.on('click', {that: this, obj: palette_Color_obj}, function(e){ splotch_div.find(".removeColor").on("click", function (e) {
e.data.that._setColor(e.data.obj.hslaString); e.preventDefault();
}); $(this).parent("div").remove();
palette.splice(i, 1);
localStorage.setItem("savedColors", JSON.stringify(palette));
});
this._domPalette.append(splotch_div); this._domPalette.append(splotch_div);
} }
}; }
}, };
template: (function(){/*#####
<div class="picker_wrapper" tabindex="-1"> const colorPickerTemplate = `
<div class="picker_arrow"></div> <div class="picker_wrapper" tabindex="-1">
<div class="picker_hue picker_slider"> <div class="picker_arrow"></div>
<div class="picker_selector"></div> <div class="picker_hue picker_slider">
</div> <div class="picker_selector"></div>
<div class="picker_sl"> </div>
<div class="picker_selector"></div> <div class="picker_sl">
</div> <div class="picker_selector"></div>
<div class="picker_alpha picker_slider"> </div>
<div class="picker_selector"></div> <div class="picker_alpha picker_slider">
</div> <div class="picker_selector"></div>
<div class="picker_palette"></div> </div>
<div class="picker_editor"> <div class="picker_palette"></div>
<input aria-label="Type a color name or hex value"/> <div class="picker_editor">
</div> <input aria-label="Type a color name or hex value"/>
<div class="picker_sample"></div> </div>
<div class="picker_done"> <div class="picker_sample"></div>
<button>Ok</button> <div class="picker_done">
</div> <button>Ok</button>
<div class="picker_cancel"> </div>
<button>Cancel</button> <div class="picker_cancel">
</div> <button>Cancel</button>
</div> </div>
#####*/}).toString().split(/#####/)[1] </div>
}); `;
let colorPicker = null;
function intColorPicker(initColor) {
if (colorPicker) {
colorPicker.destroy();
}
colorPicker = new Picker({
parent: $("#whiteboardColorpicker")[0],
color: initColor || "#000000",
onChange: function (color) {
whiteboard.setDrawColor(color.rgbaString);
},
onDone: function (color) {
let palette = JSON.parse(localStorage.getItem("savedColors"));
if (!palette.includes(color.rgbaString)) {
palette.push(color.rgbaString);
localStorage.setItem("savedColors", JSON.stringify(palette));
}
intColorPicker(color.rgbaString);
},
onOpen: colorPickerOnOpen,
template: colorPickerTemplate,
});
}
intColorPicker();
let bgColorPicker = null;
function intBgColorPicker(initColor) {
if (bgColorPicker) {
bgColorPicker.destroy();
}
bgColorPicker = new Picker({
parent: $("#textboxBackgroundColorPicker")[0],
color: initColor || "#f5f587",
bgcolor: initColor || "#f5f587",
onChange: function (bgcolor) {
whiteboard.setTextBackgroundColor(bgcolor.rgbaString);
},
onDone: function (bgcolor) {
let palette = JSON.parse(localStorage.getItem("savedColors"));
if (!palette.includes(color.rgbaString)) {
palette.push(color.rgbaString);
localStorage.setItem("savedColors", JSON.stringify(palette));
}
intBgColorPicker(color.rgbaString);
},
onOpen: colorPickerOnOpen,
template: colorPickerTemplate,
});
}
intBgColorPicker();
// on startup select mouse // on startup select mouse
shortcutFunctions.setTool_mouse(); shortcutFunctions.setTool_mouse();