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;
}