Fixed mode switching, started SplashPage IIFE

js/Dialogue.js

@@ -3,6 +3,8 @@
  */
 const Dialogue = (() => {
     let currentOpenDialogue = "";
+    let dialogueOpen = true;
+
     const popUpContainer = document.getElementById("pop-up-container");
     const cancelButtons = popUpContainer.getElementsByClassName('close-button');
 
@@ -68,9 +70,14 @@ const Dialogue = (() => {
         }
     }
 
+    function isOpen() {
+        return dialogueOpen;
+    }
+
     return {
         showDialogue,
-        closeDialogue
+        closeDialogue,
+        isOpen
     }
 })();
 

js/SplashPage.js

@@ -0,0 +1,39 @@
+const SplashPage = (() => {
+    const images = [
+        new SplashCoverImage('Rayquaza', 'Unsettled', 'https://lospec.com/unsettled'),
+        new SplashCoverImage('Mountains', 'Skeddles', 'https://lospec.com/skeddles'),
+        new SplashCoverImage('Sweetie', 'GrafxKid', 'https://twitter.com/GrafxKid'),
+        new SplashCoverImage('Glacier', 'WindfallApples', 'https://lospec.com/windfallapples'),
+        new SplashCoverImage('Polyphorge1', 'Polyphorge', 'https://lospec.com/poly-phorge'),
+        new SplashCoverImage('Fusionnist', 'Fusionnist', 'https://lospec.com/fusionnist')
+    ];
+    const coverImage = document.getElementById('editor-logo');
+    const authorLink = coverImage.getElementsByTagName('a')[0];
+    const chosenImage = images[Math.round(Math.random() * (images.length - 1))];
+
+    initSplashPage();
+
+    function initSplashPage() {
+        coverImage.style.backgroundImage = 'url("' + chosenImage.path + '.png")';
+        authorLink.setAttribute('href', chosenImage.link);
+        authorLink.innerHTML = 'Art by ' + chosenImage.author;
+
+        Dialogue.showDialogue("splash", false);
+    }
+
+    function SplashCoverImage(path, author, link) {
+        this.path = path;
+        this.author = author;
+        this.link = link;
+    }
+
+    return {
+        
+    }
+})();
+
+
+
+
+
+

js/_createButton.js

@@ -38,7 +38,6 @@ function create(isSplash) {
  * 
  */
 Input.on('click', 'create-button', function (){
-    console.log("Here");
     // Getting the values of the form
     var width = Util.getValue('size-width');
     var height = Util.getValue('size-height');

js/_editorMode.js

@@ -3,19 +3,17 @@ let modes = {
         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.'
+        description: 'Choose advanced mode to gain access to more advanced features such as layers and advanced palette editing.'
     }
 }
 
 Input.on('click', 'switch-editor-mode-splash', function (e) {
-	console.log('switching mode')
-    switchMode();
+    toggleMode();
 });
 
-function switchMode(mustConfirm = true) {
-	console.log('switching mode', 'current:',pixelEditorMode)
+function switchMode(newMode) {
 	//switch to advanced mode
-    if (pixelEditorMode == 'Basic') {
+    if (newMode == 'Advanced') {
         // Switch to advanced ez pez lemon squez
         document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
 		// Show the layer menus
@@ -36,12 +34,9 @@ function switchMode(mustConfirm = true) {
     else {
 		//if there is a current layer (a document is active)
         if (currentLayer) {
-        	//confirm with user before flattening image
-        	if (mustConfirm ) {
-	            if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
-	                return;
-	            }
-	        }
+			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();
@@ -60,7 +55,6 @@ function switchMode(mustConfirm = true) {
         // 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');
 
@@ -69,6 +63,15 @@ function switchMode(mustConfirm = true) {
     }
 }
 
+function toggleMode() {
+	console.log("From " + pixelEditorMode);
+	
+	if (pixelEditorMode == 'Advanced')
+		switchMode('Basic');
+	else
+		switchMode('Advanced');
+}
+
 Input.on('click', 'switch-mode-button', function (e) {
-    switchMode();
+    toggleMode();
 });

js/_featuresLog.js

@@ -1 +0,0 @@
-Dialogue.showDialogue("splash", false);

js/_hotkeyListener.js

@@ -18,7 +18,7 @@ function KeyPress(e) {
     //if no document has been created yet,
     //orthere is a dialog box open
     //ignore hotkeys
-    if (!documentCreated || dialogueOpen) return;
+    if (!documentCreated || Dialogue.isOpen()) return;
 
 	//
 	if (e.key === "Escape") {

js/_jscolor.js

@@ -1077,9 +1077,6 @@ if (!window.jscolor) { window.jscolor = (function () {
                     this.fromString(oldColor);
                     document.getElementById('duplicate-color-warning').style.visibility = 'hidden';
 
-                    //dialog is closed
-                    dialogueOpen = false;
-
                     detachPicker();
                 }
             };
@@ -1088,9 +1085,6 @@ if (!window.jscolor) { window.jscolor = (function () {
             this.show = function () {
                 drawPicker();
 
-                //a dialog is open
-                dialogueOpen = true;
-
                 //[lospec]
                 //find the hex input element 
                 var hexInput = document.getElementById('jscolor-hex-input');

js/_mouseEvents.js

@@ -8,7 +8,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 	canDraw = true;
 
 	//if no document has been created yet, or this is a dialog open, or the currentLayer is locked
-	if (!documentCreated || dialogueOpen || currentLayer.isLocked || !currentLayer.isVisible) return;
+	if (!documentCreated || Dialogue.isOpen() || currentLayer.isLocked || !currentLayer.isVisible) return;
 	//prevent right mouse clicks and such, which will open unwanted menus
 	//mouseEvent.preventDefault();
 
@@ -204,7 +204,7 @@ window.addEventListener("mousemove", draw, false);
 window.addEventListener("mousedown", draw, false);
 
 function draw (mouseEvent) {
-	if (!dialogueOpen)
+	if (!Dialogue.isOpen())
 	{
 		lastMouseMovePos = getCursorPosition(mouseEvent);
 		// Saving the event in case something else needs it

js/_newPixel.js

@@ -194,14 +194,6 @@ function newPixel (width, height, editorMode, fileContent = null) {
 		deleteLayer(false);
 	}
 
-	// Applying the correct editor mode
-	if (pixelEditorMode == 'Basic') {
-		switchMode(false);
-	}
-	else {
-		switchMode(false);
-	}
-
 	// Resetting history
 	undoStates = [];
 	redoStates = [];

js/_splashPage.js

@@ -1,23 +0,0 @@
-function SplashCoverImage(path, author, link) {
-    this.path = path;
-    this.author = author;
-    this.link = link;
-}
-
-let images = [
-    new SplashCoverImage('Rayquaza', 'Unsettled', 'https://lospec.com/unsettled'),
-    new SplashCoverImage('Mountains', 'Skeddles', 'https://lospec.com/skeddles'),
-    new SplashCoverImage('Sweetie', 'GrafxKid', 'https://twitter.com/GrafxKid'),
-    new SplashCoverImage('Glacier', 'WindfallApples', 'https://lospec.com/windfallapples'),
-    new SplashCoverImage('Polyphorge1', 'Polyphorge', 'https://lospec.com/poly-phorge'),
-    new SplashCoverImage('Fusionnist', 'Fusionnist', 'https://lospec.com/fusionnist')
-];
-
-
-let coverImage = document.getElementById('editor-logo');
-let authorLink = coverImage.getElementsByTagName('a')[0];
-let chosenImage = images[Math.round(Math.random() * (images.length - 1))];
-
-coverImage.style.backgroundImage = 'url("' + chosenImage.path + '.png")';
-authorLink.setAttribute('href', chosenImage.link);
-authorLink.innerHTML = 'Art by ' + chosenImage.author;

js/_variables.js

@@ -3,7 +3,6 @@ var canvasSize;
 var zoom = 7;
 var dragging = false;
 var lastMouseClickPos = [0,0];
-var dialogueOpen = true;
 var documentCreated = false;
 var pixelEditorMode = "Basic";
 

js/pixel-editor.js

@@ -25,7 +25,6 @@
 //=include _createColorPalette.js
 //=include _changeZoom.js
 //=include ColorModule.js
-//!=include _featuresLog.js
 //=include _drawLine.js
 //=include _getCursorPosition.js
 //=include _fill.js
@@ -38,7 +37,7 @@
 //=include _resizeSprite.js
 //=include _colorPicker.js
 //=include _paletteBlock.js
-//=include _splashPage.js
+//=include SplashPage.js
 
 /**load file**/
 //=include _loadImage.js