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');
-    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) {
+            Utility().setText('palette-button', paletteName);
+            Utility().setText('palette-button-splash', paletteName)
+            //Show empty palette option
+            noPaletteButton.style.display = 'block';
+        }
+
+        const buttonEvent = () => {
+            //hide the dropdown menu
+            Utility().deselect('palette-menu');
+            Utility().deselect('palette-button');
+            Utility().deselect('palette-menu-splash');
+            Utility().deselect('palette-button-splash');
+
+            //show empty palette option
+            noPaletteButton.style.display = 'block';
+
+            //set the text of the dropdown to the newly selected preset
+            Utility().setText('palette-button', paletteName);
+            Utility().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) => {
+        Utility().toggle('palette-button');
+        Utility().toggle('palette-menu');
 
-    var buttonEvent = function() {
+        Utility().deselect('preset-button');
+        Utility().deselect('preset-menu');
 
-        //hide the dropdown menu
-        deselect('palette-menu');
-        deselect('palette-button');
-        deselect('palette-menu-splash');
-        deselect('palette-button-splash');
+        // Splash version
+        Utility().toggle('palette-button-splash');
+        Utility().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';
+        Utility().setText('palette-button', 'Choose a palette...');
+    })
 
-    //insert new element
-    palettesMenu.appendChild(button);
+    newPixelElement.addEventListener('click', () => {
+        Utility().deselect('editor-mode-menu');
+        Utility().deselect('preset-button');
+        Utility().deselect('preset-menu');
+        Utility().deselect('palette-button');
+        Utility().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
+        Utility().deselect('palette-button-splash');
+        Utility().deselect('palette-menu-splash');
+    })
+})(); 

js/_presets.js

@@ -1,63 +1,56 @@
-//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 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 presetsMenu = document.getElementById('preset-menu');
+    Object.keys(presets).forEach((presetName,) => {
 
-//populate preset list in new pixel menu
-Object.keys(presets).forEach(function(presetName,index) {
+        const button = document.createElement('button');
+        button.appendChild(document.createTextNode(presetName));
 
-    var presetsMenu = document.getElementById('preset-menu');
+        presetsMenu.appendChild(button);
 
-    //create button
-    var button = document.createElement('button');
-    button.appendChild(document.createTextNode(presetName));
+        button.addEventListener('click', () => {
+            //change dimentions on new pixel form
+            Utility().setValue('size-width', presets[presetName].width);
+            Utility().setValue('size-height', presets[presetName].height);
 
-    //insert new element
-    presetsMenu.appendChild(button);
+            //set the text of the dropdown to the newly selected preset
+            Utility().setText('palette-button', presets[presetName].palette);
 
-    //add click event listener
-    on('click', button, function() {
+            //hide the dropdown menu
+            Utility().deselect('preset-menu');
+            Utility().deselect('preset-button');
 
-        //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
+            Utility().setText('preset-button', presetName);
 
-        //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);
+        });
     });
+    const presetButton = document.getElementById('preset-button');
+    presetButton.addEventListener('click', (e) => {
+        //open or close the preset menu
+        Utility().toggle('preset-button');
+        Utility().toggle('preset-menu');
 
-});
+        //close the palette menu
+        Utility().deselect('palette-button');
+        Utility().deselect('palette-menu');
 
-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();
-});
+        e.stopPropagation();
+    });
+})();