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

fix spelling error and format code

Browse Source
This commit is contained in:
cracker 2018-09-08 19:15:23 +02:00
parent 200391c613
commit 3efb36ac19
3 changed files with 653 additions and 648 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/index.html
View File

@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Whiteboard</title> <title>Whiteboard</title>
<!--- JS References -!--> <!--- JS References -!-->
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script> <!--- for dragabbles -!--> <script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<!--- for dragabbles -!-->
<script type="text/javascript" src="./js/socketio2.0.4.min.js"></script> <script type="text/javascript" src="./js/socketio2.0.4.min.js"></script>
<script type="text/javascript" src="./js/jqColorPicker.min.js"></script> <script type="text/javascript" src="./js/jqColorPicker.min.js"></script>
@ -18,6 +20,7 @@
<link href="./css/main.css" rel="stylesheet"> <link href="./css/main.css" rel="stylesheet">
</head> </head>
<body style="position: relative; margin: 0px; height: 100vh; width: 100%; overflow: hidden;"> <body style="position: relative; margin: 0px; height: 100vh; width: 100%; overflow: hidden;">
<!---Whiteboard container -!--> <!---Whiteboard container -!-->
<div style="height: 100vh; width: 100%;" id="whiteboardContainer"></div> <div style="height: 100vh; width: 100%;" id="whiteboardContainer"></div>
@ -59,7 +62,8 @@
<div style="width: 190px; height: 44px; border: 1px solid green;" class="btn-group"> <div style="width: 190px; height: 44px; border: 1px solid green;" class="btn-group">
<img style="position: absolute; left: 11px; top: 16px; height:14px; width:130px;" src="./img/slider-background.svg"> <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"> <input title="Thickness" id="whiteboardThicknessSlider" style="position: absolute; left:9px; width: 130px; top: 15px;" type="range"
min="1" max="50" value="3">
<div title="Colorpicker" style="position: absolute; left: 155px; top: 10px; width: 26px; height: 23px; border-radius: 3px; overflow: hidden; border: 1px solid darkgrey;"> <div title="Colorpicker" style="position: absolute; left: 155px; top: 10px; width: 26px; height: 23px; border-radius: 3px; overflow: hidden; border: 1px solid darkgrey;">
<div id="whiteboardColorpicker" value="#000000" style="width: 40px; height: 35px; border: 0px; padding: 0px; position: relative; top: 0px; left: -5px;"></div> <div id="whiteboardColorpicker" value="#000000" style="width: 40px; height: 35px; border: 0px; padding: 0px; position: relative; top: 0px; left: -5px;"></div>
</div> </div>
@ -88,4 +92,5 @@
<input style="display:none;" id="myFile" type="file" /> <input style="display:none;" id="myFile" type="file" />
</div> </div>
</body> </body>
</html> </html>

3
public/js/main.js
View File

@ -1,7 +1,7 @@
var whiteboardId = getQueryVariable("whiteboardid"); var whiteboardId = getQueryVariable("whiteboardid");
whiteboardId = whiteboardId || "myNewWhiteboard"; whiteboardId = whiteboardId || "myNewWhiteboard";
var myUsername = getQueryVariable("username"); var myUsername = getQueryVariable("username");
myUsername = myUsername || "unkonwn"+(Math.random()+"").substring(2,6); myUsername = myUsername || "unknown" + (Math.random() + "").substring(2, 6);
var url = document.URL.substr(0, document.URL.lastIndexOf('/')); var url = document.URL.substr(0, document.URL.lastIndexOf('/'));
var signaling_socket = null; var signaling_socket = null;
@ -139,7 +139,6 @@ $(document).ready(function() {
var reader = new window.FileReader(); var reader = new window.FileReader();
reader.readAsDataURL(blob); reader.readAsDataURL(blob);
reader.onloadend = function () { reader.onloadend = function () {
console.log("Uploading image!");
base64data = reader.result; base64data = reader.result;
uploadImgAndAddToWhiteboard(base64data); uploadImgAndAddToWhiteboard(base64data);
} }

11
public/js/whiteboard.js
View File

@ -271,20 +271,21 @@ var whiteboard = {
destCanvasContext.drawImage(_this.canvas, left, top, width, height, 0, 0, width, height); destCanvasContext.drawImage(_this.canvas, left, top, width, height, 0, 0, width, height);
imgDiv.find(".xCanvasBtn").click(function () { imgDiv.find(".xCanvasBtn").click(function () {
_this.imgDragActive = false; _this.imgDragActive = false;
if(_this.tool==="pen") if (_this.tool === "pen") {
_this.mouseOverlay.css({ "cursor": "none" }); _this.mouseOverlay.css({ "cursor": "none" });
else } else {
_this.mouseOverlay.css({ "cursor": "crosshair" }); _this.mouseOverlay.css({ "cursor": "crosshair" });
}
imgDiv.remove(); imgDiv.remove();
dragOutOverlay.remove(); dragOutOverlay.remove();
}); });
imgDiv.find(".addToCanvasBtn").click(function () { imgDiv.find(".addToCanvasBtn").click(function () {
_this.imgDragActive = false; _this.imgDragActive = false;
if(_this.tool==="pen") if (_this.tool === "pen") {
_this.mouseOverlay.css({ "cursor": "none" }); _this.mouseOverlay.css({ "cursor": "none" });
else } else {
_this.mouseOverlay.css({ "cursor": "crosshair" }); _this.mouseOverlay.css({ "cursor": "crosshair" });
}
var widthT = imgDiv.width(); var widthT = imgDiv.width();
var heightT = imgDiv.height(); var heightT = imgDiv.height();
var p = imgDiv.position(); var p = imgDiv.position();