move pattern definition back into (#65)

* .gitignore

* move pattern definition back into js (#64)

Co-authored-by: finnboeger <finnboeger@users.noreply.github.com>

.gitignore

@@ -17,9 +17,7 @@ npm-debug.log
 
 .DS_Store
 
-# Openode
+wbo-backup*
-.openode
-wbo-backup.zip
 
 # Jetbrains
 .idea/

client-data/js/board.js

@@ -498,8 +498,13 @@ Tools.generateUID = function (prefix, suffix) {
 	return uid;
 };
 
-Tools.createSVGElement = function (name) {
+Tools.createSVGElement = function createSVGElement(name, attrs) {
-	return document.createElementNS(Tools.svg.namespaceURI, name);
+	var elem = document.createElementNS(Tools.svg.namespaceURI, name);
+	if (typeof(attrs) !== "object") return elem;
+	Object.keys(attrs).forEach(function (key, i) {
+		elem.setAttributeNS(null, key, attrs[key]);
+	});
+	return elem;
 };
 
 Tools.positionElement = function (elem, x, y) {

client-data/tools/grid/grid.js

@@ -27,24 +27,76 @@
 (function grid() { //Code isolation
 
     var index = 0; //grid off by default
-    var states = ["none", "url(../tools/grid/patterns.svg#grid)", "url(../tools/grid/patterns.svg#dots)"];
+    var states = ["none", "url(#grid)", "url(#dots)"];
 
     function toggleGrid(evt) {
         index = (index + 1) % states.length;
         gridContainer.setAttributeNS(null, "fill", states[index]);
     }
 
-    function createSVGElement(name, attrs) {
+    function createPatterns() {
-        var elem = document.createElementNS("http://www.w3.org/2000/svg", name);
+        // create patterns
-        Object.keys(attrs).forEach(function (key, i) {
+        // small (inner) grid
-            elem.setAttributeNS(null, key, attrs[key]);
+        var smallGrid = Tools.createSVGElement("pattern", {
+            id: "smallGrid",
+            width: "30",
+            height: "30",
+            patternUnits: "userSpaceOnUse"
         });
-        return elem;
+        smallGrid.appendChild(
+            Tools.createSVGElement("path", {
+                d: "M 30 0 L 0 0 0 30",
+                fill: "none",
+                stroke: "gray",
+                'stroke-width': "0.5"
+            })
+        );
+        // (outer) grid
+        var grid = Tools.createSVGElement("pattern", {
+            id: "grid",
+            width: "300",
+            height: "300",
+            patternUnits: "userSpaceOnUse"
+        });
+        grid.appendChild(Tools.createSVGElement("rect", {
+            width: "300",
+            height: "300",
+            fill: "url(#smallGrid)"
+        }));
+        grid.appendChild(
+            Tools.createSVGElement("path", {
+                d: "M 300 0 L 0 0 0 300",
+                fill: "none",
+                stroke: "gray", 'stroke-width': "1"
+            })
+        );
+        // dots
+        var dots = Tools.createSVGElement("pattern", {
+            id: "dots",
+            width: "30",
+            height: "30",
+            x: "-10",
+            y: "-10",
+            patternUnits: "userSpaceOnUse"
+        });
+        dots.appendChild(Tools.createSVGElement("circle", {
+            fill: "gray",
+            cx: "10",
+            cy: "10",
+            r: "2"
+        }));
+
+        var defs = Tools.svg.getElementById("defs");
+        defs.appendChild(smallGrid);
+        defs.appendChild(grid);
+        defs.appendChild(dots);
     }
 
     var gridContainer = (function init() {
+        // initialize patterns
+        createPatterns();
         // create grid container
-        var gridContainer = createSVGElement("rect", {
+        var gridContainer = Tools.createSVGElement("rect", {
             id: "gridContainer",
             width: "100%", height: "100%",
             fill: states[index]

client-data/tools/grid/patterns.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-    <defs id="defs">
-        <pattern id="smallGrid" width="30" height="30" patternUnits="userSpaceOnUse">
-            <path d="M 30 0 L 0 0 0 30" fill="none" stroke="gray" stroke-width="0.5"/>
-        </pattern>
-        <pattern id="grid" width="300" height="300" patternUnits="userSpaceOnUse">
-            <rect width="300" height="300" fill="url(#smallGrid)"/>
-            <path d="M 300 0 L 0 0 0 300" fill="none" stroke="gray" stroke-width="1"/>
-        </pattern>
-        <pattern id="dots" width="30" height="30" x="-10" y="-10" patternUnits="userSpaceOnUse">
-            <circle fill="gray" cx="10" cy="10" r="2"/>
-        </pattern>
-    </defs>
-</svg>