Finished (basic) advanced palette editor

js/_colorPicker.js

@@ -462,6 +462,8 @@ function updatePickerByHex(hex) {
     activePickerIcon.style.left = '' + xPos + 'px';
     activePickerIcon.style.top = '' + (miniPickerCanvas.height - yPos) + 'px';
     activePickerIcon.style.backgroundColor = '#' + getMiniPickerColour();
+
+    colourPreview.style.backgroundColor = hex;
     
     updateOtherIcons();
     updateMiniSlider(hex);
@@ -521,6 +523,7 @@ function updateMiniSlider(hex) {
     styles[1] += "background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, " +
     "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",1) 100%);}";
 
+    updateMiniPickerSpectrum();
     updateStyles();
 }
 
@@ -785,7 +788,6 @@ function getSelectedColours() {
 }
 
 function getHexPreviewColour(hex) {
-
     //if brightness is over threshold, make the text dark
     if (colorBrightness(hex) > 110) {
         return '#332f35'

js/_dialogue.js

@@ -1,3 +1,5 @@
+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
@@ -6,6 +8,8 @@
 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
@@ -30,14 +34,14 @@ function showDialogue (dialogueName, trackEvent) {
  */
 function closeDialogue () {
     popUpContainer.style.display = 'none';
-
     var popups = popUpContainer.children;
+
     for (var i = 0; i < popups.length; i++) {
         popups[i].style.display = 'none';
+    }
 
-        if (popups[i].id == "palette-block") {
+    if (currentOpenDialogue == "palette-block") {
-            pbAddToSimplePalette();
+        pbAddToSimplePalette();
-        }
     }
 
     dialogueOpen = false;

js/_paletteBlock.js

@@ -1,3 +1,5 @@
+/** INIT is called when it shouldn't **/
+
 let coloursList = document.getElementById("palette-list");
 
 let rampMenu = document.getElementById("pb-ramp-options");
@@ -21,17 +23,18 @@ new ResizeObserver(updateSizeData).observe(coloursList.parentElement);
 // Initializes the palette block
 function pbInit() {
     let simplePalette = document.getElementById("colors-menu");
+    let childCount = coloursList.childElementCount;
 
     currentSquareSize = coloursList.children[0].clientWidth;
     coloursList = document.getElementById("palette-list");
 
     // Remove all the colours
-    for (let i=0; i<coloursList.childElementCount; i++) {
+    for (let i=0; i<childCount; i++) {
         coloursList.children[0].remove();
     }
 
-    // Add all the colours in the simplepalette
+    // Add all the colours from the simplepalette
-    for (let i=0; i<simplePalette.childElementCount; i++) {
+    for (let i=0; i<simplePalette.childElementCount-1; i++) {
         addSingleColour(cssToHex(simplePalette.children[i].children[0].style.backgroundColor));
     }
 }
@@ -77,11 +80,11 @@ function addSingleColour(colour) {
         li.addEventListener("mousedown", startRampSelection);
         li.addEventListener("mouseup", endRampSelection);
         li.addEventListener("mousemove", updateRampSelection);
+        li.addEventListener("onclick", endRampSelection);
 
         coloursList.appendChild(li);
     }
 }
-
 /** Adds all the colours currently selected in the colour picker
  * 
  */
@@ -209,12 +212,28 @@ function clearBorders() {
  * @param {*} mouseEvent 
  */
 function endRampSelection(mouseEvent) {
-    if (mouseEvent.which == 3) {
+    let col;
-        // I'm not selecting a ramp anymore
+
-        isRampSelecting = false;
+    if (currentSelection.startCoords.length == 0) {
-        // Setting the end coordinates
+        currentSelection.endIndex = getElementIndex(mouseEvent.target);
-        currentSelection.endCoords = getColourCoordinates(getElementIndex(mouseEvent.target));
+        currentSelection.startIndex = currentSelection.endIndex;
+        currentSelection.startCoords = getColourCoordinates(currentSelection.startIndex);
     }
+
+    // I'm not selecting a ramp anymore
+    isRampSelecting = false;
+    // Setting the end coordinates
+    currentSelection.endCoords = getColourCoordinates(getElementIndex(mouseEvent.target));
+
+    // Setting the colour in the colour picker
+    col = cssToHex(coloursList.children[currentSelection.startIndex].style.backgroundColor);
+    updatePickerByHex(col);
+    updateSlidersByHex(col);
+    updateMiniPickerColour();
+
+    updateRampSelection();
+
+    currentSelection.startCoords = [];
 }
 
 function closeAllSubmenus() {
@@ -259,8 +278,6 @@ function closeAllSubmenus() {
             return i;
         }
     }
-
-    alert("Couldn't find the selected colour");
 }
 
 /** Resizes the squares depending on the scroll amount (only resizes if the user is 
@@ -297,14 +314,22 @@ function cssToHex(rgb) {
 
 function pbAddToSimplePalette() {
     let simplePalette = document.getElementById("colors-menu");
+    let childCount = simplePalette.childElementCount;
 
     // Removing all the colours
-    for (let i=0; i<simplePalette.childElementCount; i++) {
+    for (let i=0; i<childCount-1; i++) {
-        simplePalette.children[0].remove();
+        simplePalette.removeChild(simplePalette.children[0]);
     }
 
     // Adding the new ones
     for (let i=0; i<coloursList.childElementCount; i++) {
-        addColor(cssToHex(coloursList.children[i].style.backgroundColor));
+        let col = coloursList.children[i].style.backgroundColor;
+		
+		if (col.includes("rgb")) {
+            addColor(cssToHex(col));
+        }
+		else  {
+            addColor(col);
+        }
     }
 }

views/pixel-editor.hbs

@@ -367,7 +367,9 @@
 
         <!-- PALETTE -->
         <div id = "palette-block">
-            <h1>Edit palette</h1>
+			<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
+            
+			<h1>Edit palette</h1>
             
             <div id = "colour-picker">
                 <div id = "cp-modes">