Merge pull request #17 from liamortiz/master

IIFE and CSS Fixes

_ext/scripts/utilities/getSetText.js

@@ -7,4 +7,4 @@ function getText(elementId) {
 function setText(elementId, text) {
 	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
 	element.textContent = text;
-}
+}

css/pixel-editor.scss

@@ -1611,22 +1611,38 @@ div#pb-options {
 	}
 	
 	#sp-quickstart-container {
-		height:100%;
+		max-height: 500px;
 		width:70%;
 		float:right;
-		position:relative;
 		padding:40px;
 
 		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
 		box-sizing: border-box;         /* Opera/IE 8+ */
+
+		overflow-y: scroll;
+		&::-webkit-scrollbar {
+			background: #232125;
+			width: 0.5em;
+		}
+		&::-webkit-scrollbar-track {
+			margin-top: -0.125em;
+			width: 0.5em;
+		}
+		&::-webkit-scrollbar-thumb {
+			background: #332f35;
+			border-radius: 0.25em;
+			border: solid 0.125em #232125; //same color as scrollbar back to fake padding
+		}
+		&::-webkit-scrollbar-corner {
+			background: #232125;
+		}
 	}
 
 	#sp-quickstart {
 		display:flex;
 		flex-direction: row;
 		flex-wrap: wrap;
-		overflow-y:scroll;
 		height:100%;
 
 		// Fancy scrollbar
@@ -1658,13 +1674,12 @@ div#pb-options {
 		display: flex;
   		align-items: center;
 		text-transform: uppercase;
-		position:relative;
 		width:16%;
+		min-width: 100px;
 		border-radius:5%;
 		margin-right:4%;
 		margin-top:4%;
 		background-color:$basecolor;
-		float:left;
 
 		font-size: 18px;
 		text-align:center;

js/Util.js

@@ -0,0 +1,35 @@
+// Acts as a public static class
+class Util {
+    static getElement(elementOrElementId) {
+        return typeof elementOrElementId
+            ? document.getElementById(elementOrElementId)
+            : elementOrElementId;
+    }
+    static getText(elementId) {
+        return this.getElement(elementId).textContent;
+    }
+
+    static setText(elementId, text) {
+        this.getElement(elementId).textContent = text;
+    }
+    static getValue(elementId) {
+        return this.getElement(elementId).value;
+    }
+    
+    static setValue(elementId, value) {
+        this.getElement(elementId).value = value;
+    }
+    //add class .selected to specified element
+    static select(elementId) {
+        this.getElement(elementId).classList.add('selected');
+    }
+    
+    //remove .selected class from specified element
+    static deselect(elementId) {
+        this.getElement(elementId).classList.remove('selected');
+    }
+    //toggle the status of the .selected class on the specified element
+    static toggle(elementId) {
+        this.getElement(elementId).classList.toggle('selected');
+    }
+}

js/_newPixel.js

@@ -209,12 +209,12 @@ function newPixel (width, height, editorMode, fileContent = null) {
 
 function newFromTemplate(preset, x, y) {
 	if (preset != '') {
-		setText('palette-button-splash', presets[preset].palette);
-		setText('palette-button', presets[preset].palette);
+		const presetProperties = PresetModule.propertiesOf(preset);
+		Util.setText('palette-button-splash', presetProperties.palette);
+		Util.setText('palette-button', presetProperties.palette);
 
-		x = presets[preset].width;
-		y = presets[preset].height;
+		x = presetProperties.width;
+		y = presetProperties.height;
 	}
-
 	newPixel(x, y, pixelEditorMode == 'Advanced' ? 'Basic' : 'Advanced');
 }

js/_palettes.js

@@ -1,93 +1,91 @@
 //populate palettes list in new pixel menu
-Object.keys(palettes).forEach(function(paletteName,index) {
+(() => {
+    const palettesMenu = document.getElementById('palette-menu');
+    const splashPalettes = document.getElementById('palette-menu-splash');
+    const noPaletteButton = document.getElementById('no-palette-button');
+    const newPixelElement = document.getElementById('new-pixel');
+    const paletteButton = document.getElementById('palette-button');
+    const paletteButtonSplash = document.getElementById('palette-button-splash');
+    const loadPaletteButton = document.getElementById('load-palette-button');
+    const loadPaletteButtonSplash = document.getElementById('load-palette-button-splash');
 
-    var palettesMenu = document.getElementById('palette-menu');
-    var splashPalettes = document.getElementById('palette-menu-splash');
+    Object.keys(palettes).forEach((paletteName,) => {
 
-    //create button
-    var button = document.createElement('button');
-    button.appendChild(document.createTextNode(paletteName));
+        const button = document.createElement('button');
+        button.appendChild(document.createTextNode(paletteName));
 
-    //if the palette was specified by the user, change the dropdown to it
-    if (palettes[paletteName].specified == true) {
-        setText('palette-button', paletteName);
-        setText('palette-button-splash', paletteName)
-        //Show empty palette option
-        document.getElementById('no-palette-button').style.display = 'block';
+        //if the palette was specified by the user, change the dropdown to it
+        if (palettes[paletteName].specified) {
+            Util.setText('palette-button', paletteName);
+            Util.setText('palette-button-splash', paletteName)
+            //Show empty palette option
+            noPaletteButton.style.display = 'block';
+        }
+
+        const buttonEvent = () => {
+            //hide the dropdown menu
+            Util.deselect('palette-menu');
+            Util.deselect('palette-button');
+            Util.deselect('palette-menu-splash');
+            Util.deselect('palette-button-splash');
+
+            //show empty palette option
+            noPaletteButton.style.display = 'block';
+
+            //set the text of the dropdown to the newly selected preset
+            Util.setText('palette-button', paletteName);
+            Util.setText('palette-button-splash', paletteName);
+        }
+
+        // Making a copy for the splash page too
+        const copyButton = button.cloneNode(true);
+        copyButton.addEventListener('click', buttonEvent);
+        button.addEventListener('click', buttonEvent);
+
+        // Appending it to the splash palette menu
+        splashPalettes.appendChild(copyButton);
+        palettesMenu.appendChild(button);
+    });
+
+
+    const loadPaletteButtonEvent = () => {
+        document.getElementById('load-palette-browse-holder').click();
     }
+    const clickPaletteButtonEvent = (e) => {
+        Util.toggle('palette-button');
+        Util.toggle('palette-menu');
 
-    var buttonEvent = function() {
+        Util.deselect('preset-button');
+        Util.deselect('preset-menu');
 
-        //hide the dropdown menu
-        deselect('palette-menu');
-        deselect('palette-button');
-        deselect('palette-menu-splash');
-        deselect('palette-button-splash');
+        // Splash version
+        Util.toggle('palette-button-splash');
+        Util.toggle('palette-menu-splash');
 
-        //show empty palette option
-        document.getElementById('no-palette-button').style.display = 'block';
+        e.stopPropagation();
+    }
+    // Load Palettes
+    loadPaletteButton.addEventListener('click', loadPaletteButtonEvent);
+    loadPaletteButtonSplash.addEventListener('click', loadPaletteButtonEvent);
 
-        //set the text of the dropdown to the newly selected preset
-        setText('palette-button', paletteName);
-        setText('palette-button-splash', paletteName);
-    };
+    // Palette menu click
+    paletteButtonSplash.addEventListener('click', clickPaletteButtonEvent);
+    paletteButton.addEventListener('click', clickPaletteButtonEvent);
 
-    on('click', button, buttonEvent);
+    noPaletteButton.addEventListener('click', () => {
+        noPaletteButton.style.display = 'none';
+        Util.setText('palette-button', 'Choose a palette...');
+    })
 
-    //insert new element
-    palettesMenu.appendChild(button);
+    newPixelElement.addEventListener('click', () => {
+        Util.deselect('editor-mode-menu');
+        Util.deselect('preset-button');
+        Util.deselect('preset-menu');
+        Util.deselect('palette-button');
+        Util.deselect('palette-menu');
 
-    // Making a copy for the splash page too
-    var copyButton = button.cloneNode(true);
-    // Attaching the same event
-    on('click', copyButton, buttonEvent);
-    // Appending it to the splash palette menu
-    splashPalettes.appendChild(copyButton);
-});
-
-var noPaletteButtonClickEvent = function () {
-    document.getElementById('no-palette-button').style.display = 'none';
-    setText('palette-button', 'Choose a palette...');
-}
-
-var loadPaletteButtonEvent = function () {
-    document.getElementById('load-palette-browse-holder').click();
-}
-
-var clickPaletteButtonEvent = function (e){
-    toggle('palette-button');
-    toggle('palette-menu');
-
-    deselect('preset-button');
-    deselect('preset-menu');
-
-    // Splash version
-    toggle('palette-button-splash');
-    toggle('palette-menu-splash');
-
-    e.stopPropagation();
-}
-
-//select no palette
-on('click', 'no-palette-button', noPaletteButtonClickEvent);
-
-//select load palette
-on('click', 'load-palette-button', loadPaletteButtonEvent);
-//select load palette
-on('click', 'load-palette-button-splash', loadPaletteButtonEvent);
-
-// Palette menu click
-on('click', 'palette-button', clickPaletteButtonEvent);
-on('click', 'palette-button-splash', clickPaletteButtonEvent);
-
-on('click', 'new-pixel', function (){
-    deselect('editor-mode-menu');
-    deselect('preset-button');
-    deselect('preset-menu');
-    deselect('palette-button');
-    deselect('palette-menu');
-
-    // Splash version
-    deselect('palette-button-splash');
-    deselect('palette-menu-splash');
-});
+        // Splash version
+        Util.deselect('palette-button-splash');
+        Util.deselect('palette-menu-splash');
+    })
+})(); 

js/_presets.js

@@ -1,63 +1,60 @@
-//presets
-var presets = {
-    'Gameboy Color': {
-        width: 240,
-        height: 203,
-        palette: 'Gameboy Color'
-    },
-    'PICO-8': {
-        width: 128,
-        height: 128,
-        palette: 'PICO-8'
-    },
-    'Commodore 64': {
-        width: 40,
-        height: 80,
-        palette: 'Commodore 64'
+const PresetModule = (() => {
+    const presets = {
+        'Gameboy Color': {width: 240, height: 203, palette: 'Gameboy Color'},
+        'PICO-8': {width: 128, height: 128, palette: 'PICO-8'},
+        'Commodore 64': {width: 40, height: 80, palette: 'Commodore 64'}
+    };
+
+    function instrumentPresetMenu() {
+        console.info("Initializing presets..");
+        // Add a button for all the presets available
+        const presetsMenu = document.getElementById('preset-menu');
+        Object.keys(presets).forEach((presetName,) => {
+
+            const button = document.createElement('button');
+            button.appendChild(document.createTextNode(presetName));
+
+            presetsMenu.appendChild(button);
+
+            button.addEventListener('click', () => {
+                //change dimentions on new pixel form
+                Util.setValue('size-width', presets[presetName].width);
+                Util.setValue('size-height', presets[presetName].height);
+
+                //set the text of the dropdown to the newly selected preset
+                Util.setText('palette-button', presets[presetName].palette);
+
+                //hide the dropdown menu
+                Util.deselect('preset-menu');
+                Util.deselect('preset-button');
+
+                //set the text of the dropdown to the newly selected preset
+                Util.setText('preset-button', presetName);
+
+            });
+        });
+
+        const presetButton = document.getElementById('preset-button');
+        presetButton.addEventListener('click', (e) => {
+            //open or close the preset menu
+            Util.toggle('preset-button');
+            Util.toggle('preset-menu');
+
+            //close the palette menu
+            Util.deselect('palette-button');
+            Util.deselect('palette-menu');
+
+            e.stopPropagation();
+        });
     }
-};
 
-//populate preset list in new pixel menu
-Object.keys(presets).forEach(function(presetName,index) {
+    function propertiesOf(presetId) {
+        return presets[presetId];
+    }
 
-    var presetsMenu = document.getElementById('preset-menu');
-
-    //create button
-    var button = document.createElement('button');
-    button.appendChild(document.createTextNode(presetName));
-
-    //insert new element
-    presetsMenu.appendChild(button);
-
-    //add click event listener
-    on('click', button, function() {
-
-        //change dimentions on new pixel form
-        setValue('size-width', presets[presetName].width);
-        setValue('size-height', presets[presetName].height);
-
-        //set the text of the dropdown to the newly selected preset
-        setText('palette-button', presets[presetName].palette);
-
-        //hide the dropdown menu
-        deselect('preset-menu');
-        deselect('preset-button');
-
-        //set the text of the dropdown to the newly selected preset
-        setText('preset-button', presetName);
-    });
-
-});
-
-on('click', 'preset-button', function (e){
-    //open or close the preset menu
-    toggle('preset-button');
-    toggle('preset-menu');
-
-    //close the palette menu
-    deselect('palette-button');
-    deselect('palette-menu');
-
-    //stop the click from propogating to the parent element
-    e.stopPropagation();
-});
+    return {
+        propertiesOf,
+        instrumentPresetMenu
+    };
+    
+})();

js/pixel-editor.js

@@ -14,6 +14,7 @@
 //=include _pixelEditorUtility.js
 //=include sortable.js
 //=include _algorithms.js
+//=include Util.js
 
 /**init**/
 //=include _consts.js
@@ -82,3 +83,6 @@
 
 /**feature toggles**/
 //=include _featureToggles.js
+
+// Controls execution of this preset module
+PresetModule.instrumentPresetMenu();