From 82aa5ab1140929f730cbafc42560b8c7b53830ea Mon Sep 17 00:00:00 2001
From: Nicola <47360416+unsettledgames@users.noreply.github.com>
Date: Mon, 31 Jan 2022 00:16:27 +0100
Subject: [PATCH] Fixed topbar css

Aded InputComponents.js to take care (dynamically create, add events) of input elements.
---
 build.js                      |  2 +-
 css/_components.scss          | 56 +++++++++++++++++++++++++++++++++
 css/_main-menu.scss           | 12 +++----
 css/pixel-editor.scss         |  1 +
 js/InputComponents.js         | 59 +++++++++++++++++++++++++++++++++++
 js/pixel-editor.js            |  6 ++--
 svg/check.svg                 | 10 ++++++
 views/components/checkbox.hbs |  7 +++++
 views/main-menu.hbs           |  2 +-
 9 files changed, 144 insertions(+), 11 deletions(-)
 create mode 100644 css/_components.scss
 create mode 100644 js/InputComponents.js
 create mode 100644 svg/check.svg
 create mode 100644 views/components/checkbox.hbs

diff --git a/build.js b/build.js
index 1172994..410972b 100644
--- a/build.js
+++ b/build.js
@@ -56,7 +56,7 @@ function compile_page(){
 
         .pipe(handlebars({encoding: 'utf8', debug: true, bustCache: true})
             .partials('./views/[!index]*.hbs').partials('./views/popups/*.hbs')
-            //.helpers({ svg: hb_svg })
+            .partials('./views/components/*.hbs')
             .helpers('./helpers/**/*.js')
             .data({
                 projectSlug: 'pixel-editor',
diff --git a/css/_components.scss b/css/_components.scss
new file mode 100644
index 0000000..32bd510
--- /dev/null
+++ b/css/_components.scss
@@ -0,0 +1,56 @@
+.checkbox-holder {
+    position:relative;
+    width:15px;
+    height:15px;
+    display:block;
+
+    .checkbox {
+        display: inline-block;
+        cursor: pointer;
+        padding-right: 1em;
+
+        .box {
+            color: $basetext;
+            background: darken($basecolor, 5%);
+            border: none;
+            padding: 0.5rem;
+            border-radius: 0.5rem;
+            box-sizing: border-box;
+            margin-right: 0.5rem;
+            display: inline-block;
+            vertical-align: middle;
+            border: solid 2px $basecolor;
+            pointer-events: none;
+
+            svg {
+                visibility: hidden;
+                width: 1em;
+                height: 1em;
+                display: block;
+                path {
+                    fill: $basetext;
+                }
+            }
+
+        }
+
+        //checked
+        &.checked .box svg {
+            visibility: visible;
+        }
+
+        label {
+            display: inline-block;
+            pointer-events: none;
+        } //hover label or box
+
+        &:hover:not(.disabled){
+             border-color: $basecolor;
+        }
+
+        &.disabled {
+            cursor: not-allowed;
+            .box svg path {fill: $basetext;}
+        }
+    }
+}
\ No newline at end of file
diff --git a/css/_main-menu.scss b/css/_main-menu.scss
index b9c6532..73c5352 100644
--- a/css/_main-menu.scss
+++ b/css/_main-menu.scss
@@ -108,6 +108,11 @@ li#editor-info {
 			display:inline;
 			padding-right:20px;
 		}
+
+		.checkbox-holder {
+			display: inline;
+		}
+
 		input {
 			margin-left:10px;
 			background-color:darken($basecolor, 6%);
@@ -122,12 +127,5 @@ li#editor-info {
 			width:25px;
 			height:15px;
 		}
-
-		input[type=checkbox] {
-			padding:1px;
-			width:20px;
-			height:20px;
-			background-color:darken($basecolor, 5%) !important;
-		}
 	}
 }
\ No newline at end of file
diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss
index eb94914..4f24dae 100644
--- a/css/pixel-editor.scss
+++ b/css/pixel-editor.scss
@@ -2,6 +2,7 @@
 @import 'general';
 @import 'zindex';
 @import 'shake';
+@import 'components';
 @import 'help';
 @import 'layers';
 @import 'canvas';
diff --git a/js/InputComponents.js b/js/InputComponents.js
new file mode 100644
index 0000000..bc75392
--- /dev/null
+++ b/js/InputComponents.js
@@ -0,0 +1,59 @@
+const InputComponents = (() => {
+    setInputEvents();
+
+    function setInputEvents() {
+        // Make the checkboxes toggleable
+        let checkboxes = document.getElementsByClassName("checkbox");
+        for (let i=0; i<checkboxes.length; i++) {
+            Events.on("click", checkboxes[i], toggleBox);
+        }
+    }
+
+    function toggleBox(event) {
+        if (event.target.classList.contains("checked"))
+            event.target.classList.remove("checked");
+        else
+            event.target.classList.add("checked");
+    }
+
+    function createCheckbox(id, label) {
+        let element = document.createElement("div");
+        let inner = document.createElement("div");
+        let hiddenInput = document.createElement("input");
+        let box = document.createElement("div");
+        let labelEl = document.createElement("label");
+
+        labelEl.innerHTML = label;
+        box.innerHTML = '\
+        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\
+             width="405.272px" height="405.272px" viewBox="0 0 405.272 405.272" style="enable-background:new 0 0 405.272 405.272;"\
+             xml:space="preserve">\
+        <g>\
+            <path d="M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836\
+                c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064\
+                c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z"/>\
+        </g>\
+        </svg>';
+
+        element.className = "checkbox-holder";
+        inner.className = "checkbox";
+        hiddenInput.type = "hidden";
+        box.className = "box";
+        box.id = id;
+
+        inner.appendChild(labelEl);
+        inner.appendChild(hiddenInput);
+        inner.appendChild(box);
+        element.appendChild(inner);
+        
+    }
+
+    function updated() {
+        setInputEvents();
+    }
+
+    return {
+        updated,
+        createCheckbox
+    }
+})();
diff --git a/js/pixel-editor.js b/js/pixel-editor.js
index f8e6760..27d6f1c 100644
--- a/js/pixel-editor.js
+++ b/js/pixel-editor.js
@@ -9,6 +9,7 @@
 /** UTILITY AND INPUT **/
 //=include Util.js
 //=include Events.js
+//=include InputComponents.js
 //=include Dialogue.js
 //=include History.js
 //=include Settings.js
@@ -70,9 +71,10 @@ PresetModule.instrumentPresetMenu();
 
 //when the page is done loading, you can get ready to start
 window.onload = function () {
-    //featureToggles.onLoad();
-
+	// First cursor update
     ToolManager.currentTool().updateCursor();
+	// Apply checkboxes
+
 	
 	//check if there are any url parameters
 	if (window.location.pathname.replace('/pixel-editor/','').length <= 1)  {
diff --git a/svg/check.svg b/svg/check.svg
new file mode 100644
index 0000000..aa27513
--- /dev/null
+++ b/svg/check.svg
@@ -0,0 +1,10 @@
+
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="405.272px" height="405.272px" viewBox="0 0 405.272 405.272" style="enable-background:new 0 0 405.272 405.272;"
+	 xml:space="preserve">
+<g>
+	<path d="M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836
+		c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064
+		c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z"/>
+</g>
+</svg>
diff --git a/views/components/checkbox.hbs b/views/components/checkbox.hbs
new file mode 100644
index 0000000..531e98c
--- /dev/null
+++ b/views/components/checkbox.hbs
@@ -0,0 +1,7 @@
+<div class="checkbox-holder">
+    <div class="checkbox checked">
+        <label>Snap to grid</label>
+        <input type="hidden"/>
+        <div class="box">{{svg "check"}}</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/main-menu.hbs b/views/main-menu.hbs
index 18c03e9..1457cc1 100644
--- a/views/main-menu.hbs
+++ b/views/main-menu.hbs
@@ -69,7 +69,7 @@
 	<li id="editor-info">
 		<ul>
 			<li><label><span>Tool size: </span><input type="text" width="10px"/></label></li>
-			<li><label><span>Continuous: </span><input type="checkbox"/></label></li>
+			<li>{{> checkbox}}</li>
 		</ul>
 	</li>
 </ul>
\ No newline at end of file