IIFE and CSS Fixes

_ext/scripts/utilities/getSetText.js

@@ -8,3 +8,40 @@ function setText(elementId, text) {
 	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
 	element.textContent = text;
 }
+// Leaving this here for now, not removing old functions to avoid breaks until full transition
+const Utility = () => {
+	return {
+		getText: (elementId) => {
+			const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+			return element.textContent;
+		},
+		setText: (elementId, text) => {
+			const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+			element.textContent = text;
+		},
+		getValue: (elementId) => {
+			const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+			console.log("setting: " + elementId + ": " + element.value);
+			return element.value;
+		},
+		setValue: (elementId, value) => {
+			const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+			element.value = value;
+		},
+		//add class .selected to specified element
+		select: (elementId) => {
+			const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+			element.classList.add('selected');
+		},
+		//remove .selected class from specified element
+		deselect: (elementId) => {
+			const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+			element.classList.remove('selected');
+		},
+		//toggle the status of the .selected class on the specified element
+		toggle: (elementId) => {
+			const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+			element.classList.toggle('selected');
+		}
+	}	
+}

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

js/_presets.js

@@ -1,5 +1,5 @@
-//presets
+(() => {
-var presets = {
+    const presets = {
         'Gameboy Color': {
             width: 240,
             height: 203,
@@ -15,49 +15,42 @@ var presets = {
             height: 80,
             palette: 'Commodore 64'
         }
-};
+    };
+    const presetsMenu = document.getElementById('preset-menu');
+    Object.keys(presets).forEach((presetName,) => {
 
-//populate preset list in new pixel menu
+        const button = document.createElement('button');
-Object.keys(presets).forEach(function(presetName,index) {
-
-    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
+        button.addEventListener('click', () => {
-    on('click', button, function() {
-
             //change dimentions on new pixel form
-        setValue('size-width', presets[presetName].width);
+            Utility().setValue('size-width', presets[presetName].width);
-        setValue('size-height', presets[presetName].height);
+            Utility().setValue('size-height', presets[presetName].height);
 
             //set the text of the dropdown to the newly selected preset
-        setText('palette-button', presets[presetName].palette);
+            Utility().setText('palette-button', presets[presetName].palette);
 
             //hide the dropdown menu
-        deselect('preset-menu');
+            Utility().deselect('preset-menu');
-        deselect('preset-button');
+            Utility().deselect('preset-button');
 
             //set the text of the dropdown to the newly selected preset
-        setText('preset-button', presetName);
+            Utility().setText('preset-button', presetName);
+
         });
-
+    });
-});
+    const presetButton = document.getElementById('preset-button');
-
+    presetButton.addEventListener('click', (e) => {
-on('click', 'preset-button', function (e){
         //open or close the preset menu
-    toggle('preset-button');
+        Utility().toggle('preset-button');
-    toggle('preset-menu');
+        Utility().toggle('preset-menu');
 
         //close the palette menu
-    deselect('palette-button');
+        Utility().deselect('palette-button');
-    deselect('palette-menu');
+        Utility().deselect('palette-menu');
 
-    //stop the click from propogating to the parent element
         e.stopPropagation();
-});
+    });
+})();