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

add picker palette and splotch

Browse Source
This commit is contained in:
hhaoao 2021-11-11 15:48:33 +08:00
parent 932f791e2b
commit 1df67d4acb
3 changed files with 9807 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9736
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

27
src/css/main.css
View File

@ -192,3 +192,30 @@ button {
padding: 5px;
margin: 5px;
}
.picker_wrapper .picker_palette {
width: 100%;
order: 1;
display: flex;
margin-top: 0;
margin-bottom: 0;
flex-wrap: wrap;
}
.picker_wrapper .picker_splotch {
/*flex:1;*/
width: 17px;
height: 19px;
margin: 4px 4px;
box-shadow: 0 0 0 1px silver;
border: 2px solid transparent;
}
.picker_wrapper .picker_splotch:hover {
border: 2px solid black;
}
.picker_wrapper .picker_splotch.picker_splotch_active {
border: 2px dotted yellow;
}

44
src/js/main.js
View File

@ -771,6 +771,50 @@ function initWhiteboard() {
onChange: function (bgcolor) {
whiteboard.setTextBackgroundColor(bgcolor.rgbaString);
},
onOpen: function(current_color){
this._domPalette = $('.picker_palette', this.domElement);
let palette = ["rgba(255, 136, 0, 1)", "rgba(0, 0, 0, 1)", "rgba(0, 128, 0, 1)"];
if ($(".picker_splotch", this._domPalette).length === 0) {
for (let i = 0; i < palette.length; i++){
let palette_Color_obj = new (this.color.constructor)(palette[i]);
let splotch_div = $("<div></div>")
.addClass("picker_splotch")
.attr({
"id": "s" + i,
})
.css("background-color", palette_Color_obj.hslaString)
.on('click', {that: this, obj: palette_Color_obj}, function(e){
e.data.that._setColor(e.data.obj.hslaString);
});
this._domPalette.append(splotch_div);
}
};
},
template: (function(){/*#####
<div class="picker_wrapper" tabindex="-1">
<div class="picker_arrow"></div>
<div class="picker_hue picker_slider">
<div class="picker_selector"></div>
</div>
<div class="picker_sl">
<div class="picker_selector"></div>
</div>
<div class="picker_alpha picker_slider">
<div class="picker_selector"></div>
</div>
<div class="picker_palette"></div>
<div class="picker_editor">
<input aria-label="Type a color name or hex value"/>
</div>
<div class="picker_sample"></div>
<div class="picker_done">
<button>Ok</button>
</div>
<div class="picker_cancel">
<button>Cancel</button>
</div>
</div>
#####*/}).toString().split(/#####/)[1]
});
// on startup select mouse