From 280102869b57bbf34b3cb5af41c9c582af1bed42 Mon Sep 17 00:00:00 2001
From: Matt Mascarenhas <matt@handmadedev.org>
Date: Sun, 11 Jun 2017 23:49:04 +0100
Subject: [PATCH] hmml_to_html.c: Deduplicate topics and add tooltip

Also fix bug in filter menu navigation, in which the lastFocusedElement
was not getting set after toggling a category via the keyboard
---
 hmml_to_html/hmml_to_html.c | 41 +++++++++++++++++++++++++++++++------
 hmml_to_html/player.js      | 36 ++++++++++++++++++++++++++++----
 2 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/hmml_to_html/hmml_to_html.c b/hmml_to_html/hmml_to_html.c
index 5fae31a..3177292 100644
--- a/hmml_to_html/hmml_to_html.c
+++ b/hmml_to_html/hmml_to_html.c
@@ -305,7 +305,7 @@ StringsDifferL(char *A, char *B, int LengthofA)
     {
         ++i;
     }
-    if(!A[i] && LengthofA == i && B[i] == ' ')
+    if(!A[i] && LengthofA == i && (B[i] == ' ' || B[i] == '\"'))
     {
         return FALSE;
     }
@@ -696,11 +696,40 @@ BuildCategories(buffer *AnnotationClass, buffer *Category, int *MarkerIndex, boo
         *HasCategory = TRUE;
     }
 
-    CopyStringToBuffer(Category, "<div class=\"category %s\"></div>",
-        SanitisePunctuation(Marker));
+    // NOTE(matt): Iterate through the Category->Location looking for "Marker", and bail if we find it
+    char *Ptr = Category->Location;
+    bool Found = FALSE;
+    while(*Ptr)
+    {
+        if(*Ptr == '\"')
+        {
+            ++Ptr;
+            if(!StringsDifferL(SanitisePunctuation(Marker), Ptr, StringLength(SanitisePunctuation(Marker))))
+            {
+                Found = TRUE;
+                break;
+            }
+            else
+            {
+                while(*Ptr != '\"')
+                {
+                    ++Ptr;
+                }
+            }
+        }
+        ++Ptr;
+    }
+
+    if(Found == FALSE)
+    {
+        CopyStringToBuffer(Category, "<div title=\"%s\" class=\"category %s\"></div>",
+                SanitisePunctuation(Marker),
+                SanitisePunctuation(Marker));
+
+        CopyStringToBuffer(AnnotationClass, " cat_%s",
+                SanitisePunctuation(Marker));
+    }
 
-    CopyStringToBuffer(AnnotationClass, " cat_%s",
-            SanitisePunctuation(Marker));
     ++*MarkerIndex;
     return;
 }
@@ -1308,7 +1337,7 @@ main(int ArgC, char **Args)
                 ClaimBuffer(MemoryArena, &ClaimedMemory, &AnnotationClass, "AnnotationClass", 256);
                 ClaimBuffer(MemoryArena, &ClaimedMemory, &AnnotationData, "AnnotationData", 256);
                 ClaimBuffer(MemoryArena, &ClaimedMemory, &Text, "Text", Kilobytes(4));
-                ClaimBuffer(MemoryArena, &ClaimedMemory, &Category, "Category", 256);
+                ClaimBuffer(MemoryArena, &ClaimedMemory, &Category, "Category", 512);
 
                 CopyStringToBuffer(&AnnotationHeader,
 "                <div data-timestamp=\"%d\"",
diff --git a/hmml_to_html/player.js b/hmml_to_html/player.js
index f160b4c..3e0bcd3 100644
--- a/hmml_to_html/player.js
+++ b/hmml_to_html/player.js
@@ -700,7 +700,18 @@ function handleKey(key) {
                     focusedElement.nextElementSibling.classList.contains("filter_content"))
                 {
                     focusedElement.classList.remove("focused");
-                    focusedElement = focusedElement.nextElementSibling;
+                    if(focusedElement.parentNode.classList.contains("filter_topics"))
+                    {
+                        lastFocusedTopic = focusedElement.nextElementSibling;
+                        lastFocusedCategory = lastFocusedTopic;
+                    }
+                    else
+                    {
+                        lastFocusedMedium = focusedElement.nextElementSibling;
+                        lastFocusedCategory = lastFocusedMedium;
+                    }
+                    lastFocusedElement = lastFocusedCategory;
+                    focusedElement = lastFocusedElement;
                     focusedElement.classList.add("focused");
                 }
             }
@@ -714,7 +725,18 @@ function handleKey(key) {
                     focusedElement.previousElementSibling.classList.contains("filter_content"))
                 {
                     focusedElement.classList.remove("focused");
-                    focusedElement = focusedElement.previousElementSibling;
+                    if(focusedElement.parentNode.classList.contains("filter_topics"))
+                    {
+                        lastFocusedTopic = focusedElement.previousElementSibling;
+                        lastFocusedCategory = lastFocusedTopic;
+                    }
+                    else
+                    {
+                        lastFocusedMedium = focusedElement.previousElementSibling;
+                        lastFocusedCategory = lastFocusedMedium;
+                    }
+                    lastFocusedElement = lastFocusedCategory;
+                    focusedElement = lastFocusedElement;
                     focusedElement.classList.add("focused");
                 }
             }
@@ -811,7 +833,10 @@ function filterItemToggle(filterItem) {
     if(filterState[selectedCategory].off)
     {
         filterItem.classList.add("off");
-        filterItem.querySelector(".icon").style.backgroundColor = "transparent";
+        if(!filterItem.parentNode.classList.contains("filter_media"))
+        {
+            filterItem.querySelector(".icon").style.backgroundColor = "transparent";
+        }
         var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
         for(var j = 0; j < testMarkers.length; ++j)
         {
@@ -861,7 +886,10 @@ function filterItemToggle(filterItem) {
     else
     {
         filterItem.classList.remove("off");
-        filterItem.querySelector(".icon").style.backgroundColor = getComputedStyle(filterItem.querySelector(".icon")).getPropertyValue("border-color");
+        if(!filterItem.parentNode.classList.contains("filter_media"))
+        {
+            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)