From 27143e291f1ed0d8f540b7cfa6b925b1710b49e7 Mon Sep 17 00:00:00 2001 From: Matt Mascarenhas Date: Fri, 19 May 2017 23:29:35 +0100 Subject: [PATCH] mock_filter.html: Fully working filter [#21] --- hmml_to_html/mock_filter.html | 70 +++++++++++++++++++++++++++++------ hmml_to_html/player.js | 4 +- hmml_to_html/riscy.css | 27 +++++++++++++- hmml_to_html/style.css | 21 ++++++++++- 4 files changed, 106 insertions(+), 16 deletions(-) diff --git a/hmml_to_html/mock_filter.html b/hmml_to_html/mock_filter.html index 0acc00b..65157de 100644 --- a/hmml_to_html/mock_filter.html +++ b/hmml_to_html/mock_filter.html @@ -72,7 +72,7 @@ -
+
Filter mode:
@@ -160,13 +160,22 @@
10:24More stuff referring to the milton forum post3
-
-
10:42Some text. Simples!
+
+
10:301. Some text. Simples!
-
10:42Some text. Simples!
+
10:301. Some text. Simples!
-
10:42Some text. Simples!
+
10:301. Some text. Simples!
+
+
+
+
10:422. Some text. Simples!
+
+
10:422. Some text. Simples!
+
+
+
10:422. Some text. Simples!
@@ -236,9 +245,8 @@ var filterState = { "rendering": { "type": "topic", "off": false }, "research": { "type": "medium", "off": false }}; // Filter Mode Toggle +var testMarkers = document.querySelectorAll(".marker"); filterModeElement.addEventListener("click", function(ev) { - - var testMarkers = document.querySelectorAll(".marker"); 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,10 +400,50 @@ for (var i = 0; i < refSources.length; ++i) { }); } -function onRefChanged(ref) { - var sourceMenus = document.querySelectorAll(".menu"); - for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex) +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; if (ref !== undefined && ref !== null) { var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref"); diff --git a/hmml_to_html/player.js b/hmml_to_html/player.js index 01d6890..6b353c3 100644 --- a/hmml_to_html/player.js +++ b/hmml_to_html/player.js @@ -225,8 +225,8 @@ Player.prototype.updateProgress = function() { this.scrollPosition = this.markersContainer.scrollTop; } - if (this.currentMarker && this.currentMarker.ref) { - this.refsCallback(this.currentMarker.ref); + if (this.currentMarker) { + this.refsCallback(this.currentMarker.ref, this.currentMarker.el); } else if (prevMarker && prevMarker.ref) { this.refsCallback(null); } diff --git a/hmml_to_html/riscy.css b/hmml_to_html/riscy.css index 8e07915..937891d 100644 --- a/hmml_to_html/riscy.css +++ b/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; +} diff --git a/hmml_to_html/style.css b/hmml_to_html/style.css index 7d7ac17..2c67ec1 100644 --- a/hmml_to_html/style.css +++ b/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; }