WebDev
/
VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add indicator on thickness slider to show the tool affected

This commit is contained in:
raphael 2019-02-05 13:51:59 +01:00
parent 2a2102f725
commit 4e76f40aea
3 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -43,7 +43,6 @@ Call your site with GET parameters to change the WhiteboardID or the Username
* You shoud be able to customize without ever toutching the whiteboard.js (take a look at index.html & main.js)
## ToDo
* Show indicator on slider which tool is active (Pen, Text...)
* Make undo function more reliable on texts
* Add more callbacks for errors and things ...

3
public/index.html
View File

@ -63,7 +63,8 @@
</button>
</div>
<div style="width: 190px; height: 44px; border: 1px solid green;" class="btn-group">
<div style="position:relative; width: 190px; height: 44px; border: 1px solid green;" class="btn-group">
<div class="activeToolIcon" style="position:absolute; top:2px; left:2px; font-size: 0.6em;"><i class="fa fa-pencil-alt"></i></div>
<img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;" src="./img/slider-background.svg">
<input title="Thickness" id="whiteboardThicknessSlider" style="position: absolute; left:9px; width: 130px; top: 15px;"
type="range" min="1" max="50" value="3">

8
public/js/main.js
View File

@ -62,7 +62,13 @@ $(document).ready(function () {
$(".whiteboardTool").click(function () {
$(".whiteboardTool").removeClass("active");
$(this).addClass("active");
whiteboard.setTool($(this).attr("tool"));
var activeTool = $(this).attr("tool");
whiteboard.setTool(activeTool);
if(activeTool == "mouse" || activeTool == "recSelect") {
$(".activeToolIcon").empty();
} else {
$(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
}
});
// upload image button