Moved dialogue related things to their own IIFE

Refactored all calls to showDialogue and closeDialogue to use the IIFE version

js/Dialogue.js

@@ -0,0 +1,77 @@
+/** Handles the pop up windows (NewPixel, ResizeCanvas ecc)
+ * 
+ */
+const Dialogue = (() => {
+    let currentOpenDialogue = "";
+    const popUpContainer = document.getElementById("pop-up-container");
+    const cancelButtons = popUpContainer.getElementsByClassName('close-button');
+
+    // Add click handlers for all cancel buttons
+    for (var i = 0; i < cancelButtons.length; i++) {
+        cancelButtons[i].addEventListener('click', function () {
+            closeDialogue();
+        });
+    }
+
+    /** Closes a dialogue window if the user clicks everywhere but in the current window
+     * 
+     */
+     popUpContainer.addEventListener('click', function (e) {
+        if (e.target == popUpContainer)
+            closeDialogue();
+    });
+
+    /** Shows the dialogue window called dialogueName, which is a child of pop-up-container in pixel-editor.hbs
+     * 
+     * @param {*} dialogueName The name of the window to show
+     * @param {*} trackEvent Should I track the GA event?
+     */
+    function showDialogue (dialogueName, trackEvent) {
+        if (typeof trackEvent === 'undefined') trackEvent = true; 
+
+        // Updating currently open dialogue
+        currentOpenDialogue = dialogueName;
+        // The pop up window is open
+        dialogueOpen = true;
+        // Showing the pop up container
+        popUpContainer.style.display = 'block';
+
+        // Showing the window
+        document.getElementById(dialogueName).style.display = 'block';
+
+        // If I'm opening the palette window, I initialize the colour picker
+        if (dialogueName == 'palette-block' && documentCreated) {
+            cpInit();
+            pbInit();
+        }
+
+        //track google event
+        if (trackEvent)
+            ga('send', 'event', 'Palette Editor Dialogue', dialogueName); /*global ga*/
+    }
+
+    /** Closes the current dialogue by hiding the window and the pop-up-container
+     * 
+     */
+    function closeDialogue () {
+        popUpContainer.style.display = 'none';
+        var popups = popUpContainer.children;
+
+        for (var i = 0; i < popups.length; i++) {
+            popups[i].style.display = 'none';
+        }
+
+        dialogueOpen = false;
+
+        if (currentOpenDialogue == "palette-block") {
+            ColorModule.addToSimplePalette();
+        }
+    }
+
+    return {
+        showDialogue,
+        closeDialogue
+    }
+})();
+
+console.log("Dialog: " + Dialogue);

js/_createButton.js

@@ -67,7 +67,7 @@ Input.on('click', 'create-button', function (){
     Util.setText('preset-button', 'Choose a preset...');
 });
 
-/** Triggered when the "Create" button in the new pixel dialogue is pressed
+/** Triggered when the "Create" button in the splash page is pressed
  * 
  */
  Input.on('click', 'create-button-splash', function (){

js/_createColorPalette.js

@@ -1,5 +1,5 @@
 
-/** Creates the colour palette
+/** Creates the colour palette when starting up the editor from _newPixel.js
  * 
  * @param {*} paletteColors The colours of the palette
  * @param {*} deletePreviousPalette Tells if the app should delete the previous palette or not 

js/_dialogue.js

@@ -1,64 +0,0 @@
-let currentOpenDialogue = "";
-
-/** Shows the dialogue window called dialogueName, which is a child of pop-up-container in pixel-editor.hbs
- * 
- * @param {*} dialogueName The name of the window to show
- * @param {*} trackEvent Should I track the GA event?
- */
-function showDialogue (dialogueName, trackEvent) {
-    if (typeof trackEvent === 'undefined') trackEvent = true; 
-
-    // Updating currently open dialogue
-    currentOpenDialogue = dialogueName;
-    // The pop up window is open
-    dialogueOpen = true;
-    // Showing the pop up container
-    popUpContainer.style.display = 'block';
-
-    // Showing the window
-    document.getElementById(dialogueName).style.display = 'block';
-
-    // If I'm opening the palette window, I initialize the colour picker
-    if (dialogueName == 'palette-block' && documentCreated) {
-        cpInit();
-        pbInit();
-    }
-
-    //track google event
-    if (trackEvent)
-        ga('send', 'event', 'Palette Editor Dialogue', dialogueName); /*global ga*/
-}
-
-/** Closes the current dialogue by hiding the window and the pop-up-container
- * 
- */
-function closeDialogue () {
-    popUpContainer.style.display = 'none';
-    var popups = popUpContainer.children;
-
-    for (var i = 0; i < popups.length; i++) {
-        popups[i].style.display = 'none';
-    }
-
-    dialogueOpen = false;
-
-    if (currentOpenDialogue == "palette-block") {
-        ColorModule.addToSimplePalette();
-    }
-}
-
-/** Closes a dialogue window if the user clicks everywhere but in the current window
- * 
- */
-popUpContainer.addEventListener('click', function (e) {
-    if (e.target == popUpContainer)
-        closeDialogue();
-});
-
-//add click handlers for all cancel buttons
-var cancelButtons = popUpContainer.getElementsByClassName('close-button');
-for (var i = 0; i < cancelButtons.length; i++) {
-    cancelButtons[i].addEventListener('click', function () {
-        closeDialogue();
-    });
-}

js/_featuresLog.js

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

js/_fileMenu.js

@@ -27,7 +27,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
 
                 //File Menu
                 case 'New':
-                    showDialogue('new-pixel');
+                    Dialogue.showDialogue('new-pixel');
                     break;
                 case 'Save project':
                     //create name
@@ -169,17 +169,17 @@ for (var i = 1; i < mainMenuItems.length; i++) {
                     //fill form with current settings values
                     Util.setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates);
 
-                    showDialogue('settings');
+                    Dialogue.showDialogue('settings');
                     break;
                     //Help Menu
                 case 'Help':
-                    showDialogue('help');
+                    Dialogue.showDialogue('help');
                     break;
                 case 'About':
-                    showDialogue('about');
+                    Dialogue.showDialogue('about');
                     break;
                 case 'Changelog':
-                    showDialogue('changelog');
+                    Dialogue.showDialogue('changelog');
                     break;
             }
 

js/_newPixel.js

@@ -143,7 +143,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 	redoStates = [];
 
 	// Closing the "New Pixel dialogue"
-	closeDialogue();
+	Dialogue.closeDialogue();
 	// Updating the cursor of the current tool
 	currentTool.updateCursor();
 

js/_onLoad.js

@@ -14,7 +14,7 @@ window.onload = function () {
 		console.log('no url parameters were found');
 
 		//show splash screen
-		showDialogue('splash', false);
+		Dialogue.showDialogue('splash', false);
 	}
 
 	//url parameters were specified
@@ -53,7 +53,7 @@ window.onload = function () {
 				//dimentions were not specified -- show splash screen with palette preselected
 				else {
 					//show splash
-					showDialogue('new-pixel', false);
+					Dialogue.showDialogue('new-pixel', false);
 				}
 				
 			})
@@ -62,7 +62,7 @@ window.onload = function () {
 				console.warn('failed to load palette "'+paletteSlug+'"', error);
 				
 				//proceed to splash screen
-				showDialogue('splash', false);
+				Dialogue.showDialogue('splash', false);
 			});
 	} 
 };

js/_resizeCanvas.js

@@ -15,7 +15,7 @@ let rcBorders = {left: 0, right: 0, top: 0, bottom: 0};
 function openResizeCanvasWindow() {
     // Initializes the inputs
     initResizeCanvasInputs();
-    showDialogue('resize-canvas');
+    Dialogue.showDialogue('resize-canvas');
 }
 
 /** Initializes the canvas resizing input
@@ -201,7 +201,7 @@ function resizeCanvas(event, size, customData, saveHistory = true) {
         }
     }
 
-    closeDialogue();
+    Dialogue.closeDialogue();
 }
 
 /** Trims the canvas so tat the sprite is perfectly contained in it

js/_resizeSprite.js

@@ -32,7 +32,7 @@ function openResizeSpriteWindow() {
     startData.widthPercentage = 100;
 
     // Opening the pop up now that it's ready
-    showDialogue('resize-sprite');
+    Dialogue.showDialogue('resize-sprite');
 }
 
 /** Initalizes the input values and binds the elements to their events
@@ -152,7 +152,7 @@ function resizeSprite(event, ratio) {
     startData.widthPercentage = 100;
     startData.heightPercentage = 100;
 
-    closeDialogue();
+    Dialogue.closeDialogue();
 }
 
 /* Trust me, the math for the functions below works. If you want to optimize them feel free to have a look, though */

js/_settings.js

@@ -46,5 +46,5 @@ function saveSettings() {
     Cookies.set('pixelEditorSettings', cookieValue, { expires: Infinity });
 
     //close window
-    closeDialogue();
+    Dialogue.closeDialogue();
 }

js/_variables.js

@@ -13,7 +13,6 @@ var eyedropperPreview = document.getElementById("eyedropper-preview");
 var canvasView = document.getElementById("canvas-view");
 var colors = document.getElementsByClassName("color-button");
 var colorsMenu = document.getElementById("colors-menu");
-var popUpContainer = document.getElementById("pop-up-container");
 
 // main canvas
 var canvas = document.getElementById('pixel-canvas');

js/pixel-editor.js

@@ -5,6 +5,7 @@
 //=include Util.js
 //=include Input.js
 //=include Color.js
+//=include Dialogue.js
 
 /**init**/
 //=include _consts.js
@@ -23,7 +24,6 @@
 //=include _createColorPalette.js
 //=include _changeZoom.js
 //=include ColorModule.js
-//=include _dialogue.js
 //!=include _featuresLog.js
 //=include _drawLine.js
 //=include _getCursorPosition.js

views/main-menu.hbs

@@ -52,7 +52,7 @@
 		<button>Editor</button>
 		<ul>
 			<li><button id="switch-mode-button">Switch to basic mode</button></li>
-			<li><button onclick="showDialogue('splash', false)">Splash page</button></li>
+			<li><button onclick="Dialogue.showDialogue('splash', false)">Splash page</button></li>
 			<li><button>Settings</button></li>
 		</ul>
 	</li>