Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

mock_filter.html: Fully working filter [#21]

This commit is contained in:
Matt Mascarenhas 2017-05-19 23:29:35 +01:00
parent 42835373c1
commit 27143e291f
4 changed files with 106 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
hmml_to_html/mock_filter.html
View File

@ -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 class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
<div data-timestamp="630" class="marker rant">
<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
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");

4
hmml_to_html/player.js
View File

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

27
hmml_to_html/riscy.css
View File

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

21
hmml_to_html/style.css
View File

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