Started implementing editor modes

Added prompt in the create menu to choose an editor mode.

css/pixel-editor.scss

@@ -911,6 +911,14 @@ svg {
   font-style: italic;
 }
 
+#editor-mode-info {
+  font-style:italic;
+}
+
+#editor-mode {
+  display:none;
+}
+
 #compatibility-warning {
   display: flex;
   justify-content: center;

js/_createButton.js

@@ -1,6 +1,7 @@
 on('click', 'create-button', function (){
     var width = getValue('size-width');
     var height = getValue('size-height');
+    var mode = getValue("editor-mode");
     newPixel(width,height,'asdfg');
     document.getElementById('new-pixel-warning').style.display = 'block';
 
@@ -16,6 +17,9 @@ on('click', 'create-button', function (){
     //reset new form
     setValue('size-width', 64);
     setValue('size-height', 64);
+    setValue("editor-mode", 'Advanced')
+
+    setText('editor-mode-button', 'Choose a mode...');
     setText('palette-button', 'Choose a palette...');
     setText('preset-button', 'Choose a preset...');
 });

js/_editorMode.js

@@ -0,0 +1,57 @@
+let modes = {
+    'Basic' : {
+        description: 'Basic mode is perfect if you want to create simple sprites or try out palettes.'
+    },
+    'Advanced' : {
+        description: 'Choose advanced mode to gain access to features such as layers.'
+    }
+}
+
+let infoBox = document.getElementById('editor-mode-info');
+
+// Makes the menu open
+on('click', 'editor-mode-button', function (e){
+    //open or close the preset menu
+    toggle('editor-mode-button');
+    toggle('editor-mode-menu');
+
+    //close the palette menu
+    deselect('palette-button');
+    deselect('palette-menu');
+
+    //close the preset menu
+    deselect('preset-button');
+    deselect('preset-menu');
+
+    //stop the click from propogating to the parent element
+    e.stopPropagation();
+});
+
+//populate preset list in new pixel menu
+Object.keys(modes).forEach(function(modeName,index) {
+    var editorModeMenu = document.getElementById('editor-mode-menu');
+
+    //create button
+    var button = document.createElement('button');
+    button.appendChild(document.createTextNode(modeName));
+
+    //insert new element
+    editorModeMenu.appendChild(button);
+
+    //add click event listener
+    on('click', button, function() {
+
+        //change mode on new pixel
+        setValue('editor-mode', modeName);
+        // Change description
+        infoBox.innerHTML = modes[modeName].description;
+
+        //hide the dropdown menu
+        deselect('editor-mode-menu');
+        deselect('editor-mode-button');
+
+        //set the text of the dropdown to the newly selected mode
+        setText('editor-mode-button', modeName);
+    });
+
+});

js/_palettes.js

@@ -44,7 +44,6 @@ on('click', 'load-palette-button', function () {
 
 
 
-
 on('click', 'palette-button', function (e){
     toggle('palette-button');
     toggle('palette-menu');
@@ -55,6 +54,7 @@ on('click', 'palette-button', function (e){
 });
 
 on('click', 'new-pixel', function (){
+    deselect('editor-mode-menu');
     deselect('preset-button');
     deselect('preset-menu');
     deselect('palette-button');

js/_presets.js

@@ -49,7 +49,6 @@ Object.keys(presets).forEach(function(presetName,index) {
 
 });
 
-
 on('click', 'preset-button', function (e){
     //open or close the preset menu
     toggle('preset-button');

js/pixel-editor.js

@@ -19,6 +19,7 @@
 //=include _settings.js
 
 /**dropdown formatting**/
+//=include _editorMode.js
 //=include _presets.js
 //=include _palettes.js
 

views/pixel-editor.hbs

@@ -213,6 +213,14 @@
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
             <h1>New Pixel</h1>
 
+            <!-- Editor mode-->
+            <h2>Editor mode</h2>
+            <button id = "editor-mode-button" class = "dropdown-button">Choose a mode...</button>
+            <div id = "editor-mode-menu" class = "dropdown-menu"></div>
+            <input id="editor-mode" value="{{#if mode}}{{mode}}{{else}}'Advanced'{{/if}}" autocomplete="off" />
+            <p id = "editor-mode-info"></p>
+
+            <!-- Preset-->
             <h2>Preset</h2>
             <button id="preset-button" class="dropdown-button">Choose a preset...</button>
             <div id="preset-menu" class="dropdown-menu"></div>