Added EditorState, moved editor mode management to that IIFE

js/ColorModule.js

@@ -228,7 +228,7 @@ const ColorModule = (() => {
             event.target.parentElement.lastChild.classList.add('hidden');
     
             //show jscolor picker, if basic mode is enabled
-            if (pixelEditorMode == 'Basic')
+            if (EditorState.getCurrentMode() == 'Basic')
                 event.target.parentElement.firstChild.jscolor.show();
             else
                 Dialogue.showDialogue("palette-block", false);

js/EditorState.js

@@ -0,0 +1,74 @@
+const EditorState = (() => {
+    let pixelEditorMode = "Basic";
+
+    Events.on('click', 'switch-editor-mode-splash', function (e) {toggleMode();});
+    Events.on('click', 'switch-mode-button', function (e) {toggleMode();});
+
+    function getCurrentMode() {
+        return pixelEditorMode;
+    }
+
+    function switchMode(newMode) {
+        //switch to advanced mode
+        if (newMode == 'Advanced' && pixelEditorMode == 'Basic') {
+            // Switch to advanced ez pez lemon squez
+            document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
+            // Show the layer menus
+            LayerList.getLayerListEntries().style.display = "inline-block";
+            document.getElementById('layer-button').style.display = 'inline-block';
+            // Hide the palette menu
+            document.getElementById('colors-menu').style.right = '200px'
+    
+            //change splash text
+            document.querySelector('#sp-quickstart-container .mode-switcher').classList.add('advanced-mode');
+    
+            pixelEditorMode = 'Advanced';
+    
+            //turn pixel grid off
+            togglePixelGrid('off');
+        }
+        //switch to basic mode
+        else {
+            //if there is a current layer (a document is active)
+            if (currentLayer) {
+                if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
+                    return;
+                }
+    
+                // Selecting the current layer
+                currentLayer.selectLayer();
+                // Flatten the layers
+                LayerList.flatten(true);
+            }
+    
+            //change menu text
+            document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode';
+    
+            // Hide the layer menus
+            LayerList.getLayerListEntries().style.display = 'none';
+            document.getElementById('layer-button').style.display = 'none';
+            // Show the palette menu
+            document.getElementById('colors-menu').style.display = 'flex';
+            // Move the palette menu
+            document.getElementById('colors-menu').style.right = '0px';
+    
+            //change splash text
+            document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
+    
+            pixelEditorMode = 'Basic';
+            togglePixelGrid('off');
+        }
+    }
+    
+    function toggleMode() {
+        if (pixelEditorMode == 'Advanced')
+            switchMode('Basic');
+        else
+            switchMode('Advanced');
+    }
+
+    return {
+        getCurrentMode,
+        switchMode
+    }
+})();

js/FileManager.js

@@ -134,7 +134,7 @@ const FileManager = (() => {
             var img = new Image();
             img.onload = function() {
                 //create a new pixel with the images dimentions
-                switchMode('Advanced');
+                EditorState.switchMode('Advanced');
                 Startup.newPixel(this.width, this.height);
 
                 //draw the image onto the canvas
@@ -174,7 +174,7 @@ const FileManager = (() => {
         dictionary['canvasWidth'] = currentLayer.canvasSize[0];
         dictionary['canvasHeight'] = currentLayer.canvasSize[1];
         // save editor mode
-        dictionary['editorMode'] = pixelEditorMode;
+        dictionary['editorMode'] = EditorState.getCurrentMode();
         // save palette
         for (let i=0; i<ColorModule.getCurrentPalette().length; i++) {
             dictionary["color" + i] = ColorModule.getCurrentPalette()[i];

js/_editorMode.js

@@ -1,78 +0,0 @@
-// REFACTOR: move everything in EditorState?
-let pixelEditorMode = "Basic";
-
-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 more advanced features such as layers and advanced palette editing.'
-    }
-}
-
-Events.on('click', 'switch-editor-mode-splash', function (e) {
-    toggleMode();
-});
-
-function switchMode(newMode) {
-	//switch to advanced mode
-    if (newMode == 'Advanced' && pixelEditorMode == 'Basic') {
-        // Switch to advanced ez pez lemon squez
-        document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
-		// Show the layer menus
-		LayerList.getLayerListEntries().style.display = "inline-block";
-		document.getElementById('layer-button').style.display = 'inline-block';
-		// Hide the palette menu
-        document.getElementById('colors-menu').style.right = '200px'
-
-		//change splash text
-		document.querySelector('#sp-quickstart-container .mode-switcher').classList.add('advanced-mode');
-
-        pixelEditorMode = 'Advanced';
-
-		//turn pixel grid off
-		togglePixelGrid('off');
-    }
-    //switch to basic mode
-    else {
-		//if there is a current layer (a document is active)
-        if (currentLayer) {
-			if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
-				return;
-			}
-
-			// Selecting the current layer
-			currentLayer.selectLayer();
-			// Flatten the layers
-			LayerList.flatten(true);
-        }
-
-        //change menu text
-        document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode';
-
-		// Hide the layer menus
-		layerList.style.display = 'none';
-		document.getElementById('layer-button').style.display = 'none';
-		// Show the palette menu
-        document.getElementById('colors-menu').style.display = 'flex';
-        // Move the palette menu
-        document.getElementById('colors-menu').style.right = '0px';
-
-		//change splash text
-		document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
-
-		pixelEditorMode = 'Basic';
-		togglePixelGrid('off');
-    }
-}
-
-function toggleMode() {
-	if (pixelEditorMode == 'Advanced')
-		switchMode('Basic');
-	else
-		switchMode('Advanced');
-}
-
-Events.on('click', 'switch-mode-button', function (e) {
-    toggleMode();
-});

js/pixel-editor.js

@@ -17,7 +17,7 @@
 //=include Layer.js
 //=include Startup.js
 //=include _pixelGrid.js
-//=include _editorMode.js
+//=include EditorState.js
 
 /**dropdown formatting**/
 //=include PresetModule.js