hmml_to_html.c: Mock-up reference.html
Also adapt onRefChanged() to support multiple sourceMenus
This commit is contained in:
Matt Mascarenhas
parent
678dc869c5
commit
af9f5a593b
|
|
@ -116,12 +116,8 @@ CopyStringToBuffer(char *Src, buffer *Dest)
|
|||
int
|
||||
StringsDiffer(char *A, char *B)
|
||||
{
|
||||
while(*A && *B)
|
||||
while(*A && *B && *A == *B)
|
||||
{
|
||||
if(*A != *B)
|
||||
{
|
||||
return *A - *B;
|
||||
}
|
||||
++A, ++B;
|
||||
}
|
||||
return *A - *B;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,191 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<!-- Load the player -->
|
||||
<script type="text/javascript" src="player.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="title">
|
||||
<span class="episode_name">Coloured Nicks</span>
|
||||
<div class="refs_container">
|
||||
<span>Quotes ▼</span>
|
||||
<div class="mouse_catcher"></div>
|
||||
<div class="refs">
|
||||
<span data-id="a" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">#1 • 2016-11-16</div>
|
||||
<div class="ref_title">Stay RISCY, everyone</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="176" class="timecode"><span class="ref_index">[a]</span><span class="time">2:56</span></span>
|
||||
</div>
|
||||
</span>
|
||||
<span data-id="b" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">#2 • 2016-12-02</div>
|
||||
<div class="ref_title">I dream of nice things</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="312" class="timecode"><span class="ref_index">[b]</span><span class="time">5:12</span></span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="refs_container">
|
||||
<span>References ▼</span>
|
||||
<div class="mouse_catcher"></div>
|
||||
<div class="refs">
|
||||
<a data-id="0" href="https://milton.handmade.network/forums/t/1550-idea_:_ability_to_move_panels_outside_of_the_milton_window" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Milton Forums</div>
|
||||
<div class="ref_title">Idea : ability to move panels outside of the milton window?</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[1]</span><span class="time">1:00</span></span>
|
||||
</div>
|
||||
</a>
|
||||
<a data-id="1" href="https://milton.handmade.network/forums" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source"></div>
|
||||
<div class="ref_title">Milton Forums</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[2]</span><span class="time">1:00</span></span>
|
||||
<span data-timestamp="624" class="timecode"><span class="ref_index">[3]</span><span class="time">10:24</span></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="annotator_container">Annotator: <span class="annotator">Miblo</span></span>
|
||||
</div>
|
||||
<div class="player_container">
|
||||
<div class="video_container" data-videoId="ug5WkCROkOk"></div>
|
||||
<div class="markers_container">
|
||||
<div class="marker authored" data-timestamp="60" data-ref="0,1">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/Zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category research"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/Zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category research"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/Zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category research"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marker" data-timestamp="176" data-ref="a">
|
||||
<div class="content"><span class="timecode">2:56</span>"Stay RISCY, everyone"<sup>a</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">2:56</span>"Stay RISCY, everyone"<sup>a</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">2:56</span>"Stay RISCY, everyone"<sup>a</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marker blackboard" data-timestamp="312" data-ref="b">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>b</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>b</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>b</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marker" data-timestamp="624" data-ref="1">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marker" data-timestamp="642">
|
||||
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:24</span>Some text. Simples!</div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:24</span>Some text. Simples!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var player = new Player(document.querySelector(".player_container"), onRefChanged);
|
||||
window.addEventListener("resize", function() { player.updateSize(); });
|
||||
document.addEventListener("keypress", function(ev) {
|
||||
switch (ev.key) {
|
||||
case 'n':
|
||||
case 'd':
|
||||
case 's': {
|
||||
player.jumpToNextMarker();
|
||||
} break;
|
||||
|
||||
case 'p':
|
||||
case 'a':
|
||||
case 'w': {
|
||||
player.jumpToPrevMarker();
|
||||
} break;
|
||||
}
|
||||
});
|
||||
|
||||
var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
|
||||
for (var i = 0; i < refTimecodes.length; ++i) {
|
||||
refTimecodes[i].addEventListener("click", function(ev) {
|
||||
if (player) {
|
||||
var time = ev.currentTarget.getAttribute("data-timestamp");
|
||||
player.setTime(parseInt(time, 10));
|
||||
player.play();
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var refSources = document.querySelectorAll(".refs .ref");
|
||||
for (var i = 0; i < refSources.length; ++i) {
|
||||
refSources[i].addEventListener("click", function(ev) {
|
||||
if (player) {
|
||||
player.pause();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onRefChanged(ref) {
|
||||
var sourceMenus = document.querySelectorAll(".refs_container");
|
||||
for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)
|
||||
{
|
||||
var SetMenu = 0;
|
||||
if (ref !== undefined && ref !== null) {
|
||||
var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
|
||||
var refs = ref.split(",");
|
||||
|
||||
for (var i = 0; i < refElements.length; ++i) {
|
||||
if (refs.includes(refElements[i].getAttribute("data-id"))) {
|
||||
refElements[i].classList.add("current");
|
||||
SetMenu = 1;
|
||||
} else {
|
||||
refElements[i].classList.remove("current");
|
||||
}
|
||||
}
|
||||
if(SetMenu) {
|
||||
sourceMenus[MenuIndex].classList.add("current");
|
||||
} else {
|
||||
sourceMenus[MenuIndex].classList.remove("current");
|
||||
}
|
||||
|
||||
} else {
|
||||
console.log("%s should deselect, outer loop!", MenuIndex);
|
||||
sourceMenus[MenuIndex].classList.remove("current");
|
||||
var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
|
||||
for (var i = 0; i < refs.length; ++i) {
|
||||
refs[i].classList.remove("current");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -85,24 +85,41 @@
|
|||
}
|
||||
|
||||
.marker .content .categories {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.marker .content .categories .category {
|
||||
border: 1px;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-left: 2px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.category.memory {
|
||||
.marker .content .categories .category.hardware {
|
||||
border-color: #FF3333;
|
||||
background: #FF3333;
|
||||
}
|
||||
|
||||
.marker .content .categories .category.mathematics {
|
||||
border-color: #5E0595;
|
||||
background: #5E0595;
|
||||
}
|
||||
|
||||
.marker .content .categories .category.memory {
|
||||
border-color: #3399FF;
|
||||
background: #3399FF;
|
||||
}
|
||||
|
||||
.category.hardware {
|
||||
border-color: #FF3333;
|
||||
background: #FF3333;
|
||||
.marker .content .categories .category.rendering {
|
||||
border-color: #60B60A;
|
||||
background: #60B60A;
|
||||
}
|
||||
|
||||
.marker .content .categories .category.research {
|
||||
border-color: #5851EB;
|
||||
background: #5851EB;
|
||||
}
|
||||
|
||||
/* MANDATORY */
|
||||
|
|
@ -201,10 +218,6 @@ body {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.title .refs_container:hover .mouse_catcher {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.title .refs_container .refs {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue