Merge branch 'lovasoa/whitebophir' into tool/document

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [lovasoa]

.github/pull_request_template.md

@@ -0,0 +1,11 @@
+<!--
+Thanks for taking the time to contribute to WBO !
+Please use this field to describe the changes you made, and mention
+the eventual issues this PR addresses: https://github.com/lovasoa/whitebophir/issues
+Please also check the other existing pull requests: https://github.com/lovasoa/whitebophir/pulls
+Please leave the license agreement below to grant us the rights to use your code.
+-->
+<sub>
+By opening a pull request, I certify that I hold the intellectual property of the code I am submitting,
+and I am granting the initial authors of WBO a perpetual, worldwide, non-exclusive, royalty-free, and irrevocable license to this code.
+</sub>

.github/workflows/CI.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test
+      env:
+        CI: true

.gitignore

@@ -22,4 +22,7 @@ npm-debug.log
 wbo-backup.zip
 
 # Jetbrains
-.idea/
+.idea/
+
+# Nightwatch test results
+tests_output/

README.md

@@ -16,7 +16,7 @@ A demonstration server is available at [wbo.ophir.dev](https://wbo.ophir.dev)
 
   <tr>
    <td> teaching math on <b>WBO</b>
-   <td> <img alt=wbo teaching" width="300" src="https://user-images.githubusercontent.com/552629/59915737-a386e580-941d-11e9-81ff-db9e37f140db.png" />
+   <td> <img alt="wbo teaching" width="300" src="https://user-images.githubusercontent.com/552629/59915737-a386e580-941d-11e9-81ff-db9e37f140db.png" />
    <td> drawing art
    <td> <img alt="angel drawn on WBO" width="300" src="https://user-images.githubusercontent.com/552629/59914139-08404100-941a-11e9-9c29-bd2569fe4730.png"/>
 </table>
@@ -56,7 +56,7 @@ Then [install node.js](https://nodejs.org/en/download/) (v10.0 or superior)
 if you don't have it already, then install WBO's dependencies:
 
 ```
-npm install
+npm install --production
 ```
 
 Finally, you can start the server:
@@ -66,8 +66,12 @@ PORT=5001 npm start
 
 This will run WBO directly on your machine, on port 5001, without any isolation from the other services.
 
+### Running WBO on a subfolder
+
+By default, WBO launches his own web server and serves all of its content at the root of the server (on `/`).
+If you want to make the server accessible with a different path like `https://your.domain.com/wbo/` you have to setup a reverse proxy.
+See instructions on our Wiki about [how to setup a reverse proxy for WBO](https://github.com/lovasoa/whitebophir/wiki/Setup-behind-Reverse-Proxies).
+
 ## Troubleshooting
 
 If you experience an issue or want to propose a new feature in WBO, please [open a github issue](https://github.com/lovasoa/whitebophir/issues/new).
-
-<small>Demonstration server hosted by [openode](https://www.openode.io/)</small>

client-data/board.css

@@ -43,17 +43,18 @@ html, body, svg {
 	-ms-overflow-style: none;
 	scrollbar-width: none;
 	font-size: 16px;
-	border-radius:0;
-	overflow-y:scroll;
-	position:fixed;
+	border-radius: 0;
+	overflow-y: scroll;
+	position: fixed;
 	margin-bottom: 30px;
-	left:0;
-	top:0;
-	color:black;
-	height:100%;
-	transition-duration:1s;
-	cursor:default;
+	left: 0;
+	top: 0;
+	color: black;
+	max-height: 100%;
+	transition-duration: 1s;
+	cursor: default;
 	padding: 10px;
+	pointer-events: none;
 }
 
 #menu.closed {
@@ -82,6 +83,10 @@ html, body, svg {
 	padding:0;
 }
 
+#settings {
+	margin-bottom: 0;
+}
+
 #menu .tool {
 	-webkit-touch-callout: none; /* iOS Safari */
 	-webkit-user-select: none; /* Safari */
@@ -108,22 +113,27 @@ html, body, svg {
 	box-shadow: inset 0 0 3px #8FA2BC;
 }
 
-
-@keyframes minimize {
-	to {max-width:100%;}
-}
 #menu .tool:hover {
-	color:black;
-	animation-name: minimize;
-	animation-duration: 1.2s;
-	animation-iteration-count: 2;
-	animation-timing-function: cubic-bezier(.4,.2,.2,1);
-	animation-direction: alternate;
+	max-width: 100%;
 }
 
-#menu .tool:focus-within,
-#menu  #settings .tool:hover {
-	max-width:100%;
+@media (hover: none), (pointer: coarse) {
+	#menu .tool:hover {
+		max-width: 40px;
+	}
+
+	#menu .tool:focus {
+		max-width: 100%;
+	}
+
+	#menu {
+		pointer-events: auto;
+	}
+
+	#menu:focus-within {
+		pointer-events: none;
+	}
+
 }
 
 #menu .tool.curTool {
@@ -141,6 +151,10 @@ html, body, svg {
 	overflow: hidden;
 }
 
+#menu img.tool-icon {
+	pointer-events: none;
+}
+
 #menu .tool-icon > * {
 	display: block;
 	margin: auto;
@@ -184,6 +198,7 @@ input {
 .colorPresets {
 	margin-right: 20px;
 	vertical-align: top;
+	display: inline-block;
 }
 
 .colorPresetButton {
@@ -221,4 +236,13 @@ text {
 	font-family:"Arial", "Helvetica", sans-serif;
 	user-select:none;
 	-moz-user-select:none;
+}
+
+circle.opcursor {
+	pointer-events: none;
+	transition: .1s;
+}
+
+#cursor-me {
+	transition: 0s;
 }

client-data/board.html

@@ -5,19 +5,20 @@
 	<meta charset="utf-8" />
 	<title>{{board}} | WBO | {{translations.collaborative_whiteboard}}</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<link rel="stylesheet" type="text/css" href="board.css" />
-	<script src="/socket.io/socket.io.js"></script>
+	<link rel="stylesheet" type="text/css" href="../board.css" />
+	<script src="../socket.io/socket.io.js"></script>
 	<meta name="description" content="{{translations.tagline}}'" />
 	<meta name="keywords"
 		content="{{translations.collaborative_whiteboard}},online,draw,paint,shared,realtime,wbo,whitebophir" />
-	<link rel="apple-touch-icon" href="/favicon.svg">
+	<link rel="apple-touch-icon" href="../favicon.svg">
+	<link rel="icon" type="image/x-icon" sizes="16x16" href="../favicon.ico">
 	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
 	<meta property="og:title" content="{{board}} board on WBO" />
-	<meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
-	<meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
-	<link rel="canonical" href="{{baseUrl}}/boards/{{boardUriComponent}}?lang={{language}}" />
+ 	<meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
+ 	<meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
+	<link rel="canonical" href="{{boardUriComponent}}?lang={{language}}" />
 	{{#languages}}
-	<link rel="alternate" hreflang="{{.}}" href="{{../baseUrl}}/boards/{{../boardUriComponent}}?lang={{.}}" />
+	<link rel="alternate" hreflang="{{.}}" href="{{../boardUriComponent}}?lang={{.}}" />
 	{{/languages}}
 </head>
 
@@ -26,6 +27,8 @@
 	<div id="board">
 		<svg id="canvas" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
 			<defs id="defs"></defs>
+			<g id="drawingArea"></g>
+			<g id="cursors"></g>
 		</svg>
 	</div>
 
@@ -34,27 +37,27 @@
 	<div id="menu">
 		<div id="menuItems">
 			<ul id="tools" class="tools">
-				<li class="tool">
+				<li class="tool" tabindex="-1">
 					<img class="tool-icon" width="35" height="35" src="" alt="icon" /><span class="tool-name"></span>
 				</li>
 			</ul>
 
 			<ul class="tools" id="settings">
-				<li class="tool">
+				<li class="tool" tabindex="-1">
 					<input class="tool-icon" type="color" id="chooseColor" value="#1913B0" />
 					<label class="tool-name" for="chooseColor">{{translations.color}}</label>
 					<span class="colorPresets" id="colorPresetSel">
 						<span class="colorPresetButton"></span>
 					</span>
 				</li>
-				<li class="tool">
+				<li class="tool" tabindex="-1">
 					<img class="tool-icon" width="60" height="60" src="icon-size.svg" alt="size" />
 					<label class="tool-name slider" for="chooseSize">
 						<span>{{translations.size}}</span>
 						<input type="range" id="chooseSize" value="4" min="1" max="50" step="1" class="rangeChooser" />
 					</label>
 				</li>
-				<li class="tool">
+				<li class="tool" tabindex="-1">
 					<span class="tool-icon">
 						<svg viewBox="0 0 8 8">
 							<pattern id="opacityPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
@@ -63,7 +66,7 @@
 								<rect x=2 y=0 width=2 height=2 fill=#eeeeee />
 								<rect x=0 y=2 width=2 height=2 fill=#eeeeee />
 							</pattern>
-							<circle cx=4 cy=4 id="opacityIndicator" r=3.5  fill="url(#opacityPattern)" />
+							<circle cx=4 cy=4 id="opacityIndicator" r=3.5 fill="url(#opacityPattern)" />
 						</svg>
 					</span>
 					<label class="tool-name slider" for="chooseOpacity">
@@ -77,19 +80,21 @@
 	</div>
 
 
-	<script type="application/json" id="translations">{{{json translations}}}</script>
-	<script src="js/path-data-polyfill.js"></script>
-	<script src="js/minitpl.js"></script>
-	<script src="js/board.js"></script>
-	<script src="tools/pencil/pencil.js"></script>
-	<script src="tools/line/line.js"></script>
-	<script src="tools/rect/rect.js"></script>
-	<script src="tools/text/text.js"></script>
-	<script src="tools/eraser/eraser.js"></script>
-	<script src="tools/hand/hand.js"></script>
-	<script src="tools/zoom/zoom.js"></script>
-	<script src="tools/document/document.js"></script>
-	<script src="/js/canvascolor/canvascolor.min.js"></script>
+	<script type="application/json" id="translations">{{{ json translations }}}</script>
+	<script type="application/json" id="configuration">{{{ json configuration }}}</script>
+	<script src="../js/path-data-polyfill.js"></script>
+	<script src="../js/minitpl.js"></script>
+	<script src="../js/board.js"></script>
+	<script src="../tools/pencil/pencil.js"></script>
+	<script src="../tools/cursor/cursor.js"></script>
+	<script src="../tools/line/line.js"></script>
+	<script src="../tools/rect/rect.js"></script>
+	<script src="../tools/text/text.js"></script>
+	<script src="../tools/eraser/eraser.js"></script>
+	<script src="../tools/hand/hand.js"></script>
+	<script src="../tools/document/document.js"></script>
+	<script src="../tools/zoom/zoom.js"></script>
+	<script src="../js/canvascolor/canvascolor.min.js"></script>
 </body>
 
-</html>
+</html>

client-data/index.css

@@ -1,5 +1,5 @@
 html {
-	background: linear-gradient(135deg, #c4dfffa0, transparent), url(/background.png);
+	background: linear-gradient(135deg, #c4dfffa0, transparent), url(background.png);
 	width:100%;
 	height: 100%;
 	margin:0;
@@ -30,8 +30,8 @@ main {
 	margin: auto;
 	margin-top: 80px;
 	width:100%;
-	max-width: 1100px;
-	font-size:1.2em;
+	max-width: 1250px;
+	font-size: 1.1em;
 	position:relative;
 	text-align:justify;
 	transition:.1s;
@@ -132,13 +132,12 @@ footer{
 .lang-selector ul {
 	padding-left: 22px;
 	list-style: none;
-  width: 50px;
+	width: 50px;
 	background: white;
-  max-height: 0;
-  overflow: hidden;
+	max-height: 0;
+	overflow: hidden;
 	transition-duration: 1s;
 	border-radius: 5px;
-
 }
 
 .lang-selector:hover ul {
@@ -162,5 +161,6 @@ footer{
 }
 
 .lang-selector li:hover {
-	list-style:disclosure-closed;
+	list-style: circle;
+	list-style: disclosure-closed;
 }