diff --git a/src/index.html b/src/index.html index b0c4f13..90562d8 100644 --- a/src/index.html +++ b/src/index.html @@ -4,37 +4,6 @@ Whiteboard - - - - - - - - - - - - - - - - - - - - - - - @@ -154,6 +123,8 @@ + + \ No newline at end of file diff --git a/src/js/entry.js b/src/js/entry.js deleted file mode 100644 index a1dccac..0000000 --- a/src/js/entry.js +++ /dev/null @@ -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(''); -} else { - $('head').append(''); -} - -if (module.hot) { - module.hot.accept(); -} diff --git a/src/js/index.js b/src/js/index.js new file mode 100644 index 0000000..55472dd --- /dev/null +++ b/src/js/index.js @@ -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(''); + } else { + $('head').append(''); + } + + main(); +}); + + +if (module.hot) { + module.hot.accept(); +} diff --git a/src/js/keybinds.js b/src/js/keybinds.js index 620ed57..7274154 100644 --- a/src/js/keybinds.js +++ b/src/js/keybinds.js @@ -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' -} \ No newline at end of file +} + +export default keybinds; \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index f05f790..093e0cc 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -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; -} \ No newline at end of file +} + +} + +export default main; \ No newline at end of file diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js index 5ae748e..3ce7aac 100644 --- a/src/js/whiteboard.js +++ b/src/js/whiteboard.js @@ -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]; -} \ No newline at end of file +} + +export default whiteboard; \ No newline at end of file