Fixed topbar css

Aded InputComponents.js to take care (dynamically create, add events) of input elements.

Author: unsettledgames

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',

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;}
+        }
+    }
+}

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;
-		}
 	}
 }

css/pixel-editor.scss

@@ -2,6 +2,7 @@
 @import 'general';
 @import 'zindex';
 @import 'shake';
+@import 'components';
 @import 'help';
 @import 'layers';
 @import 'canvas';

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
+    }
+})();

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)  {

svg/check.svg

@@ -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>

views/components/checkbox.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>