refacto(front): whitebardId init

* More straightforward
* Use std for getting url params
* Show the final whiteboardid in url

src/js/main.js

@@ -8,29 +8,37 @@ import pdfjsLib from "pdfjs-dist/webpack";
 import shortcutFunctions from "./shortcutFunctions";
 import ReadOnlyService from "./services/ReadOnlyService";
 import InfoService from "./services/InfoService";
-import { getQueryVariable, getSubDir } from "./utils";
+import { getSubDir } from "./utils";
 import ConfigService from "./services/ConfigService";
 import { v4 as uuidv4 } from "uuid";
 
-let whiteboardId = getQueryVariable("whiteboardid");
+const urlParams = new URLSearchParams(window.location.search);
-const randomid = getQueryVariable("randomid");
+let whiteboardId = urlParams.get("whiteboardid");
-if (randomid && !whiteboardId) {
+const randomid = urlParams.get("randomid");
-    //set random whiteboard on empty whiteboardid
+
+if (randomid) {
     whiteboardId = uuidv4();
-    const urlParams = new URLSearchParams(window.location.search);
     urlParams.delete("randomid");
+    window.location.search = urlParams;
+}
+
+if (!whiteboardId) {
+    whiteboardId = "myNewWhiteboard";
+}
+
+whiteboardId = unescape(encodeURIComponent(whiteboardId)).replace(/[^a-zA-Z0-9\-]/g, "");
+
+if (urlParams.get("whiteboardid") !== whiteboardId) {
     urlParams.set("whiteboardid", whiteboardId);
     window.location.search = urlParams;
 }
 
-whiteboardId = whiteboardId || "myNewWhiteboard";
+const myUsername = urlParams.get("username") || "unknown" + (Math.random() + "").substring(2, 6);
-whiteboardId = unescape(encodeURIComponent(whiteboardId)).replace(/[^a-zA-Z0-9\-]/g, "");
+const accessToken = urlParams.get("accesstoken") || "";
-const myUsername = getQueryVariable("username") || "unknown" + (Math.random() + "").substring(2, 6);
-const accessToken = getQueryVariable("accesstoken") || "";
 
 // Custom Html Title
-const title = getQueryVariable("title");
+const title = urlParams.get("title");
-if (!title === false) {
+if (title) {
     document.title = decodeURIComponent(title);
 }
 
@@ -131,7 +139,7 @@ function initWhiteboard() {
         // by default set in readOnly mode
         ReadOnlyService.activateReadOnlyMode();
 
-        if (getQueryVariable("webdav") == "true") {
+        if (urlParams.get("webdav") === "true") {
             $("#uploadWebDavBtn").show();
         }
 

src/js/utils.js

@@ -15,23 +15,6 @@ export function getCurrentTimeMs() {
     return new Date().getTime();
 }
 
-/**
- * get 'GET' parameter by variable name
- * @param variable
- * @return {boolean|*}
- */
-export function getQueryVariable(variable) {
-    const query = window.location.search.substring(1);
-    const vars = query.split("&");
-    for (let i = 0; i < vars.length; i++) {
-        const pair = vars[i].split("=");
-        if (pair[0] === variable) {
-            return pair[1];
-        }
-    }
-    return false;
-}
-
 export function getSubDir() {
     const url = document.URL.substr(0, document.URL.lastIndexOf("/"));
     const urlSplit = url.split("/");

src/js/whiteboard.js

@@ -64,7 +64,6 @@ const whiteboard = {
             this.settings[i] = newSettings[i];
         }
         this.settings["username"] = this.settings["username"].replace(/[^0-9a-z]/gi, "");
-        this.settings["whiteboardId"] = this.settings["whiteboardId"].replace(/[^0-9a-z]/gi, "");
 
         //background grid (repeating image) and smallest screen indication
         _this.backgroundGrid = $(