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

refacto(src): a bit of cleaning

Browse Source
This commit is contained in:
Florent Chehab 2020-04-19 16:32:30 +02:00
parent 0a32a73742
commit 84b4ff019f
No known key found for this signature in database
GPG Key ID: 9A0CE018889EA246
6 changed files with 51 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/index.html
View File

@ -4,37 +4,6 @@
<head> <head>
<title>Whiteboard</title> <title>Whiteboard</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<!--- jquery and dragabbles -!-->
<script type="text/javascript" src="./js/libs/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/libs/jquery-ui.min.js"></script>
<!--- For icons -!-->
<script type="text/javascript" src="./js/libs/fontawseome5.8.1.min.js"></script>
<!--- Socket connection -!-->
<script type="text/javascript" src="./js/libs/socketio2.0.4.min.js"></script>
<!--- Colorpicker -!-->
<script type="text/javascript" src="./js/libs/jqColorPicker.min.js"></script>
<!--- For keybindings -!-->
<script type="text/javascript" src="./js/libs/keymage.min.js"></script>
<script type="text/javascript" src="./js/keybinds.js"></script>
<script type="text/javascript" src="./js/whiteboard.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<!--- CSS References -!-->
<link rel="stylesheet" href="./css/jquery-ui.min.css">
<link href="./css/main.css" rel="stylesheet">
<!--- Set width for Mobile Devices -!-->
<script>
//Set correct width height on mobile browsers
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (isChrome) {
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.52, maximum-scale=1" />');
} else {
$('head').append('<meta name="viewport" content="width=1400" />');
}
</script>
</head> </head>
<body> <body>
@ -154,6 +123,8 @@
<i id="maxBtn" style="position:relative; left:-5px; display: none;" class="fas fa-angle-right"></i> <i id="maxBtn" style="position:relative; left:-5px; display: none;" class="fas fa-angle-right"></i>
</button> </button>
</div> </div>
</div>
</body> </body>
</html> </html>

16
src/js/entry.js
View File

@ -1,16 +0,0 @@
import "./keybinds";
import "./whiteboard";
import "./main";
import "../assets/css/main.css"
//Set correct width height on mobile browsers
const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (isChrome) {
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.52, maximum-scale=1" />');
} else {
$('head').append('<meta name="viewport" content="width=1400" />');
}
if (module.hot) {
module.hot.accept();
}

25
src/js/index.js Normal file
View File

@ -0,0 +1,25 @@
import "jquery-ui/ui/core";
import "jquery-ui/ui/widgets/draggable";
import "@fortawesome/fontawesome-free/js/all";
import "../css/main.css";
import main from "./main";
$(document).ready(function () {
// Set correct width height on mobile browsers
const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (isChrome) {
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.52, maximum-scale=1" />');
} else {
$('head').append('<meta name="viewport" content="width=1400" />');
}
main();
});
if (module.hot) {
module.hot.accept();
}

4
src/js/keybinds.js
View File

@ -5,7 +5,7 @@
//> defmod is "command" on OS X and "ctrl" elsewhere //> defmod is "command" on OS X and "ctrl" elsewhere
//Advanced Example: 'defmod-k j' -> For this to fire you have to first press both ctrl and k, and then j. //Advanced Example: 'defmod-k j' -> For this to fire you have to first press both ctrl and k, and then j.
var keybinds = { const keybinds = {
// 'key(s)' : 'function', // 'key(s)' : 'function',
'defmod-shift-z' : 'clearWhiteboard', 'defmod-shift-z' : 'clearWhiteboard',
'defmod-z' : 'undoStep', 'defmod-z' : 'undoStep',
@ -44,3 +44,5 @@ var keybinds = {
'escape' : 'cancelAllActions', 'escape' : 'cancelAllActions',
'del' : 'deleteSelection' 'del' : 'deleteSelection'
} }
export default keybinds;

15
src/js/main.js
View File

@ -1,4 +1,10 @@
import keymage from "keymage"; import keymage from "keymage";
import io from 'socket.io-client';
import whiteboard from "./whiteboard";
import keybinds from "./keybinds";
import Picker from "vanilla-picker";
function main(){
var whiteboardId = getQueryVariable("whiteboardid"); var whiteboardId = getQueryVariable("whiteboardid");
var randomid = getQueryVariable("randomid"); var randomid = getQueryVariable("randomid");
@ -141,27 +147,22 @@ $(document).ready(function () {
setDrawColorBlack: function () { setDrawColorBlack: function () {
whiteboard.setDrawColor("black"); whiteboard.setDrawColor("black");
whiteboard.redrawMouseCursor(); whiteboard.redrawMouseCursor();
$("#whiteboardColorpicker").css({ "background": "black" });
}, },
setDrawColorRed: function () { setDrawColorRed: function () {
whiteboard.setDrawColor("red"); whiteboard.setDrawColor("red");
whiteboard.redrawMouseCursor(); whiteboard.redrawMouseCursor();
$("#whiteboardColorpicker").css({ "background": "red" });
}, },
setDrawColorGreen: function () { setDrawColorGreen: function () {
whiteboard.setDrawColor("green"); whiteboard.setDrawColor("green");
whiteboard.redrawMouseCursor(); whiteboard.redrawMouseCursor();
$("#whiteboardColorpicker").css({ "background": "green" });
}, },
setDrawColorBlue: function () { setDrawColorBlue: function () {
whiteboard.setDrawColor("blue"); whiteboard.setDrawColor("blue");
whiteboard.redrawMouseCursor(); whiteboard.redrawMouseCursor();
$("#whiteboardColorpicker").css({ "background": "blue" });
}, },
setDrawColorYellow: function () { setDrawColorYellow: function () {
whiteboard.setDrawColor("yellow"); whiteboard.setDrawColor("yellow");
whiteboard.redrawMouseCursor(); whiteboard.redrawMouseCursor();
$("#whiteboardColorpicker").css({ "background": "yellow" });
}, },
toggleLineRecCircle: function () { toggleLineRecCircle: function () {
@ -683,3 +684,7 @@ function getQueryVariable(variable) {
} }
return false; return false;
} }
}
export default main;

13
src/js/whiteboard.js
View File

@ -1,4 +1,4 @@
var whiteboard = { const whiteboard = {
canvas: null, canvas: null,
ctx: null, ctx: null,
drawcolor: "black", drawcolor: "black",
@ -95,7 +95,7 @@ var whiteboard = {
var touche = e.touches[0]; var touche = e.touches[0];
_this.prevX = touche.clientX - $(_this.mouseOverlay).offset().left + 1; _this.prevX = touche.clientX - $(_this.mouseOverlay).offset().left + 1;
_this.prevY = touche.clientY - $(_this.mouseOverlay).offset().top + 1; _this.prevY = touche.clientY - $(_this.mouseOverlay).offset().top + 1;
latestTouchCoods = [_this.prevX, _this.prevY]; _this.latestTouchCoods = [_this.prevX, _this.prevY];
} }
if (_this.tool === "pen") { if (_this.tool === "pen") {
@ -264,8 +264,8 @@ var whiteboard = {
//On textcontainer click (Add a new textbox) //On textcontainer click (Add a new textbox)
_this.textContainer.on("click", function (e) { _this.textContainer.on("click", function (e) {
currX = (e.offsetX || e.pageX - $(e.target).offset().left); var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
currY = (e.offsetY || e.pageY - $(e.target).offset().top); var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
var fontsize = _this.thickness * 0.5; var fontsize = _this.thickness * 0.5;
var txId = 'tx' + (+new Date()); var txId = 'tx' + (+new Date());
_this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] }); _this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] });
@ -754,6 +754,7 @@ var whiteboard = {
setDrawColor(color) { setDrawColor(color) {
var _this = this; var _this = this;
_this.drawcolor = color; _this.drawcolor = color;
$("#whiteboardColorpicker").css({ "background": color });
if (_this.tool == "text" && _this.latestActiveTextBoxId) { if (_this.tool == "text" && _this.latestActiveTextBoxId) {
_this.sendFunction({ "t": "setTextboxFontColor", "d": [_this.latestActiveTextBoxId, color] }); _this.sendFunction({ "t": "setTextboxFontColor", "d": [_this.latestActiveTextBoxId, color] });
_this.setTextboxFontColor(_this.latestActiveTextBoxId, color); _this.setTextboxFontColor(_this.latestActiveTextBoxId, color);
@ -847,7 +848,7 @@ var whiteboard = {
this.cursorContainer.find(".userbadge").remove(); this.cursorContainer.find(".userbadge").remove();
}, },
getImageDataBase64() { getImageDataBase64() {
_this = this; var _this = this;
var width = this.mouseOverlay.width(); var width = this.mouseOverlay.width();
var height = this.mouseOverlay.height(); var height = this.mouseOverlay.height();
var copyCanvas = document.createElement('canvas'); var copyCanvas = document.createElement('canvas');
@ -979,3 +980,5 @@ function lanczosInterpolate(xm1, ym1, x0, y0, x1, y1, x2, y2, a) {
c2 -= delta; c2 -= delta;
return [cm1 * xm1 + c0 * x0 + c1 * x1 + c2 * x2, cm1 * ym1 + c0 * y0 + c1 * y1 + c2 * y2]; return [cm1 * xm1 + c0 * x0 + c1 * x1 + c2 * x2, cm1 * ym1 + c0 * y0 + c1 * y1 + c2 * y2];
} }
export default whiteboard;