mock_filter.html: Fully working filter [#21]

hmml_to_html/mock_filter.html

@@ -72,7 +72,7 @@
                     </a>
                 </div>
             </div>
-            <div class="menu">
+            <div class="menu filter">
                 <span><img src="hues_HCL.png"></span>
                 <div class="filter">
                     <div class="filter_mode inclusive">Filter mode: </div>
@@ -160,13 +160,22 @@
                         <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div>
                     </div>
                 </div>
-                <div data-timestamp="642" class="marker rant">
+                <div data-timestamp="630" class="marker rant">
-                    <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
+                    <div class="content"><span class="timecode">10:30</span>1. Some text. Simples!</div>
                     <div class="progress faded">
-                        <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
+                        <div class="content"><span class="timecode">10:30</span>1. Some text. Simples!</div>
                     </div>
                     <div class="progress main">
-                        <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
+                        <div class="content"><span class="timecode">10:30</span>1. Some text. Simples!</div>
+                    </div>
+                </div>
+                <div data-timestamp="642" class="marker rant">
+                    <div class="content"><span class="timecode">10:42</span>2. Some text. Simples!</div>
+                    <div class="progress faded">
+                        <div class="content"><span class="timecode">10:42</span>2. Some text. Simples!</div>
+                    </div>
+                    <div class="progress main">
+                        <div class="content"><span class="timecode">10:42</span>2. Some text. Simples!</div>
                     </div>
                 </div>
                 <div data-timestamp="754" class="marker programming" data-ref="https://handmade.network/">
@@ -236,9 +245,8 @@ var filterState = { "rendering":   { "type": "topic",  "off": false },
                     "research":    { "type": "medium", "off": false }};
 
 // Filter Mode Toggle
-filterModeElement.addEventListener("click", function(ev) {
-
 var testMarkers = document.querySelectorAll(".marker");
+filterModeElement.addEventListener("click", function(ev) {
     if(filterMode == "inclusive")
     {
         filterModeElement.classList.remove("inclusive");
@@ -278,7 +286,7 @@ filterModeElement.addEventListener("click", function(ev) {
 });
 
 // Filter Toggle
-var filterCategories = document.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
+var filterCategories = filter.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
 for(var i = 0; i < filterCategories.length; ++i)
 {
     filterCategories[i].addEventListener("click", function(ev) {
@@ -392,8 +400,48 @@ for (var i = 0; i < refSources.length; ++i) {
     });
 }
 
-function onRefChanged(ref) {
+function resetFade()
+{
+    filter.classList.remove("responsible");
+    filter.querySelector(".filter_mode").classList.remove("responsible");
+    var responsibleCategories = filter.querySelectorAll(".filter_content.responsible");
+    for(var i = 0; i < responsibleCategories.length; ++i)
+    {
+        responsibleCategories[i].classList.remove("responsible");
+    }
+}
+
 var sourceMenus = document.querySelectorAll(".menu");
+function onRefChanged(ref, element) {
+    if(element.classList.contains("skip"))
+    {
+        if(!filter.classList.contains("responsible"))
+        {
+            filter.classList.add("responsible");
+        }
+
+        for(var selector = 0; selector < element.classList.length; ++selector)
+        {
+            if(element.classList[selector].startsWith("off_"))
+            {
+                if(!filter.querySelector(".filter_content." + element.classList[selector].replace(/^off_/, "")).classList.contains("responsible"))
+                {
+                    filter.querySelector(".filter_content." + element.classList[selector].replace(/^off_/, "")).classList.add("responsible");
+                }
+            }
+            if((element.classList[selector].startsWith("cat_") || element.classList[selector] in filterState))
+            {
+                if(!filter.querySelector(".filter_mode").classList.add("responsible"))
+                {
+                    filter.querySelector(".filter_mode").classList.add("responsible");
+                }
+            }
+            setTimeout(resetFade, 8000);
+        }
+        player.jumpToNextMarker();
+        return;
+    }
+
     for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)
     {
         var SetMenu = 0;

hmml_to_html/player.js

@@ -225,8 +225,8 @@ Player.prototype.updateProgress = function() {
             this.scrollPosition = this.markersContainer.scrollTop;
         }
 
-        if (this.currentMarker && this.currentMarker.ref) {
+        if (this.currentMarker) {
-            this.refsCallback(this.currentMarker.ref);
+            this.refsCallback(this.currentMarker.ref, this.currentMarker.el);
         } else if (prevMarker && prevMarker.ref) {
             this.refsCallback(null);
         }

hmml_to_html/riscy.css

@@ -67,14 +67,16 @@
 }
 
 /* Blackboard */
-.markers_container.riscy > .marker.blackboard > .content,
+.title.riscy .filter_content.blackboard,
+.markers_container.riscy .blackboard > .content,
 .markers_container.riscy > .marker.blackboard > .progress .content,
 .markers_container.riscy > .marker:hover.blackboard > .faded .content {
     background-size: 12px 12px;
     background-position: center;
 }
 
-.markers_container.riscy > .marker.blackboard > .content {
+.title.riscy .filter_content.blackboard,
+.markers_container.riscy .blackboard > .content {
     background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px),
                       linear-gradient(to bottom, rgba(51, 153, 255, .16) 1px, transparent 1px);
 }
@@ -93,3 +95,24 @@
  *
  * .markers_container.riscy > marker.run
  */
+
+/* TODO(matt): Actually style this */
+@keyframes riscy_fade_text {
+    0% { color: #FFF; }
+    100% { color: #888; }
+}
+
+@keyframes riscy_fade_background {
+    0% { background-color: rgba(42, 49, 114, 0.7); }
+    100% { background-color: #EEE; }
+}
+
+.title.riscy .filter_content.responsible .text {
+    animation-name: riscy_fade_text;
+}
+
+.title.riscy > .menu.filter.responsible,
+.title.riscy .filter_content.responsible,
+.title.riscy > .menu > .filter .filter_mode.responsible {
+    animation-name: riscy_fade_background;
+}

hmml_to_html/style.css

@@ -26,6 +26,15 @@
     right: 0;
 }
 
+.title > .menu.filter.responsible,
+.title .filter_content.responsible,
+.title .filter_content.responsible .text,
+.title > .menu > .filter .filter_mode.responsible {
+    animation-duration: 8s;
+    animation-timing-function: ease-out;
+    animation-iteration-count: 1;
+}
+
 .title > .menu .refs,
 .title > .menu .filter {
     border: 1px solid;
@@ -188,6 +197,14 @@
     border-bottom: 1px solid;
     position: relative;
     cursor: pointer;
+    max-height: 320px;
+    transition: max-height .32s;
+}
+
+.markers_container > .marker.skip {
+    max-height: 0;
+    transition: max-height .32s;
+    overflow: hidden;
 }
 
 .markers_container > .marker .content {
@@ -205,6 +222,7 @@
     font-weight: bold;
 }
 
+.title .filter_content.authored .text,
 .markers_container > .marker.authored {
     font-style: oblique;
 }
@@ -247,7 +265,8 @@
     width: 5px;
 }
 
-.title > .menu > .filter .filter_content .category.off {
+.title > .menu > .filter .filter_content .category.off,
+.markers_container > .marker .content .categories .category.off {
     background: transparent;
 }