From 2f5057f36bdc3173dda07a43b8e036b381a5718b Mon Sep 17 00:00:00 2001
From: Matt Mascarenhas <matt@handmadedev.org>
Date: Sat, 10 Jun 2017 16:56:04 +0100
Subject: [PATCH] hmml_to_html.c: Fix dot colouring [#3]

This additionally fixes the lightness stuff on Chrome
---
 hmml_to_html/player.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/hmml_to_html/player.js b/hmml_to_html/player.js
index ed0e787..f160b4c 100644
--- a/hmml_to_html/player.js
+++ b/hmml_to_html/player.js
@@ -811,6 +811,7 @@ function filterItemToggle(filterItem) {
     if(filterState[selectedCategory].off)
     {
         filterItem.classList.add("off");
+        filterItem.querySelector(".icon").style.backgroundColor = "transparent";
         var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
         for(var j = 0; j < testMarkers.length; ++j)
         {
@@ -824,6 +825,7 @@ function filterItemToggle(filterItem) {
                     if(markerCategories[k].classList.contains(selectedCategory))
                     {
                         markerCategories[k].classList.add("off");
+                        markerCategories[k].style.backgroundColor = "transparent";
                     }
                 }
             }
@@ -859,6 +861,8 @@ function filterItemToggle(filterItem) {
     else
     {
         filterItem.classList.remove("off");
+        filterItem.querySelector(".icon").style.backgroundColor = getComputedStyle(filterItem.querySelector(".icon")).getPropertyValue("border-color");
+        setDotLightness(filterItem.querySelector(".icon"));
         var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
         for(var j = 0; j < testMarkers.length; ++j)
         {
@@ -872,6 +876,8 @@ function filterItemToggle(filterItem) {
                     if(markerCategories[k].classList.contains(selectedCategory))
                     {
                         markerCategories[k].classList.remove("off");
+                        markerCategories[k].style.backgroundColor = getComputedStyle(markerCategories[k]).getPropertyValue("border-color");
+                        setDotLightness(markerCategories[k]);
                     }
                 }
             }
@@ -1138,16 +1144,17 @@ function RGBtoHSL(colour)
 function getBackgroundBrightness(element) {
     var colour = getComputedStyle(element).getPropertyValue("background-color");
     var depth = 0;
-    while(colour == "transparent" && depth <= 4)
+    while((colour == "transparent" || colour == "rgba(0, 0, 0, 0)") && depth <= 4)
     {
         element = element.parentNode;
         colour = getComputedStyle(element).getPropertyValue("background-color");
         ++depth;
     }
 	var rgb = colour.slice(4, -1).split(", ");
-	return Math.sqrt(rgb[0] * rgb[0] * .241 +
+	var result = Math.sqrt(rgb[0] * rgb[0] * .241 +
 	rgb[1] * rgb[1] * .691 +
 	rgb[2] * rgb[2] * .068);
+    return result;
 }
 
 function setTextLightness(textElement)