refacto(src): a bit of cleaning
This commit is contained in:
Florent Chehab
parent
0a32a73742
commit
84b4ff019f
|
|
@ -4,37 +4,6 @@
|
|||
<head>
|
||||
<title>Whiteboard</title>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
|
@ -154,6 +123,8 @@
|
|||
<i id="maxBtn" style="position:relative; left:-5px; display: none;" class="fas fa-angle-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
//> 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.
|
||||
|
||||
var keybinds = {
|
||||
const keybinds = {
|
||||
// 'key(s)' : 'function',
|
||||
'defmod-shift-z' : 'clearWhiteboard',
|
||||
'defmod-z' : 'undoStep',
|
||||
|
|
@ -43,4 +43,6 @@ var keybinds = {
|
|||
'shift-enter' : 'addToBackground',
|
||||
'escape' : 'cancelAllActions',
|
||||
'del' : 'deleteSelection'
|
||||
}
|
||||
}
|
||||
|
||||
export default keybinds;
|
||||
|
|
@ -1,4 +1,10 @@
|
|||
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 randomid = getQueryVariable("randomid");
|
||||
|
|
@ -141,27 +147,22 @@ $(document).ready(function () {
|
|||
setDrawColorBlack: function () {
|
||||
whiteboard.setDrawColor("black");
|
||||
whiteboard.redrawMouseCursor();
|
||||
$("#whiteboardColorpicker").css({ "background": "black" });
|
||||
},
|
||||
setDrawColorRed: function () {
|
||||
whiteboard.setDrawColor("red");
|
||||
whiteboard.redrawMouseCursor();
|
||||
$("#whiteboardColorpicker").css({ "background": "red" });
|
||||
},
|
||||
setDrawColorGreen: function () {
|
||||
whiteboard.setDrawColor("green");
|
||||
whiteboard.redrawMouseCursor();
|
||||
$("#whiteboardColorpicker").css({ "background": "green" });
|
||||
},
|
||||
setDrawColorBlue: function () {
|
||||
whiteboard.setDrawColor("blue");
|
||||
whiteboard.redrawMouseCursor();
|
||||
$("#whiteboardColorpicker").css({ "background": "blue" });
|
||||
},
|
||||
setDrawColorYellow: function () {
|
||||
whiteboard.setDrawColor("yellow");
|
||||
whiteboard.redrawMouseCursor();
|
||||
$("#whiteboardColorpicker").css({ "background": "yellow" });
|
||||
},
|
||||
|
||||
toggleLineRecCircle: function () {
|
||||
|
|
@ -682,4 +683,8 @@ function getQueryVariable(variable) {
|
|||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default main;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
var whiteboard = {
|
||||
const whiteboard = {
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
drawcolor: "black",
|
||||
|
|
@ -95,7 +95,7 @@ var whiteboard = {
|
|||
var touche = e.touches[0];
|
||||
_this.prevX = touche.clientX - $(_this.mouseOverlay).offset().left + 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") {
|
||||
|
|
@ -264,8 +264,8 @@ var whiteboard = {
|
|||
|
||||
//On textcontainer click (Add a new textbox)
|
||||
_this.textContainer.on("click", function (e) {
|
||||
currX = (e.offsetX || e.pageX - $(e.target).offset().left);
|
||||
currY = (e.offsetY || e.pageY - $(e.target).offset().top);
|
||||
var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
|
||||
var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
|
||||
var fontsize = _this.thickness * 0.5;
|
||||
var txId = 'tx' + (+new Date());
|
||||
_this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] });
|
||||
|
|
@ -754,6 +754,7 @@ var whiteboard = {
|
|||
setDrawColor(color) {
|
||||
var _this = this;
|
||||
_this.drawcolor = color;
|
||||
$("#whiteboardColorpicker").css({ "background": color });
|
||||
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
|
||||
_this.sendFunction({ "t": "setTextboxFontColor", "d": [_this.latestActiveTextBoxId, color] });
|
||||
_this.setTextboxFontColor(_this.latestActiveTextBoxId, color);
|
||||
|
|
@ -847,7 +848,7 @@ var whiteboard = {
|
|||
this.cursorContainer.find(".userbadge").remove();
|
||||
},
|
||||
getImageDataBase64() {
|
||||
_this = this;
|
||||
var _this = this;
|
||||
var width = this.mouseOverlay.width();
|
||||
var height = this.mouseOverlay.height();
|
||||
var copyCanvas = document.createElement('canvas');
|
||||
|
|
@ -978,4 +979,6 @@ function lanczosInterpolate(xm1, ym1, x0, y0, x1, y1, x2, y2, a) {
|
|||
c1 -= delta;
|
||||
c2 -= delta;
|
||||
return [cm1 * xm1 + c0 * x0 + c1 * x1 + c2 * x2, cm1 * ym1 + c0 * y0 + c1 * y1 + c2 * y2];
|
||||
}
|
||||
}
|
||||
|
||||
export default whiteboard;
|
||||
Loading…
Reference in New Issue