cinera: Sortable index

This commit is contained in:
Matt Mascarenhas 2018-01-21 18:59:09 +00:00
parent b8013133b9
commit d7d27f59b7
3 changed files with 52 additions and 13 deletions

View File

@ -14,7 +14,7 @@ typedef struct
version CINERA_APP_VERSION = { version CINERA_APP_VERSION = {
.Major = 0, .Major = 0,
.Minor = 5, .Minor = 5,
.Patch = 27 .Patch = 28
}; };
// TODO(matt): Copy in the DB 3 stuff from cinera_working.c // TODO(matt): Copy in the DB 3 stuff from cinera_working.c
@ -4373,7 +4373,7 @@ IndexToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Collat
} }
int ThemeStringLength = StringsDiffer(Config.Theme, "") ? (StringLength(Config.Theme) * 2) : (StringLength(Config.ProjectID) * 2); int ThemeStringLength = StringsDiffer(Config.Theme, "") ? (StringLength(Config.Theme) * 2) : (StringLength(Config.ProjectID) * 2);
char queryContainer[512 + ThemeStringLength]; char queryContainer[680 + ThemeStringLength];
CopyString(queryContainer, CopyString(queryContainer,
"<div class=\"cineraQueryContainer %s\">\n" "<div class=\"cineraQueryContainer %s\">\n"
" <label for=\"query\">Query:</label>\n" " <label for=\"query\">Query:</label>\n"
@ -4387,7 +4387,9 @@ IndexToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Collat
" <div id=\"cineraResultsSummary\">Found: 0 episodes, 0 markers, 0h 0m 0s total.</div>\n" " <div id=\"cineraResultsSummary\">Found: 0 episodes, 0 markers, 0h 0m 0s total.</div>\n"
" <div id=\"cineraResults\"></div>\n" " <div id=\"cineraResults\"></div>\n"
"\n" "\n"
" <dl id=\"cineraIndex\" class=\"%s\">\n", " <div id=\"cineraIndex\" class=\"%s\">\n"
" <div id=\"cineraIndexSort\" data-id=\"chronal\">Sort: Old to New &#9206;</div>\n"
" <div id=\"cineraIndexEntries\">\n",
StringsDiffer(Config.Theme, "") ? Config.Theme : Config.ProjectID, StringsDiffer(Config.Theme, "") ? Config.Theme : Config.ProjectID,
StringsDiffer(Config.Theme, "") ? Config.Theme : Config.ProjectID); StringsDiffer(Config.Theme, "") ? Config.Theme : Config.ProjectID);
@ -4399,8 +4401,10 @@ IndexToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Collat
ClaimBuffer(&PlayerURL, "PlayerURL", 4096); ClaimBuffer(&PlayerURL, "PlayerURL", 4096);
ConstructPlayerURL(&PlayerURL, ""); ConstructPlayerURL(&PlayerURL, "");
char Script[512 + StringLength(URLPrefix.Location) + (StringLength(Config.ProjectID) * 2)]; char Script[532 + StringLength(URLPrefix.Location) + (StringLength(Config.ProjectID) * 2)];
CopyString(Script, " </dl>\n" CopyString(Script,
" </div>\n"
" </div>\n"
" <script type=\"text/javascript\">\n" " <script type=\"text/javascript\">\n"
" var projectID = \"%s\";\n" " var projectID = \"%s\";\n"
" var theme = \"%s\";\n" " var theme = \"%s\";\n"
@ -4458,7 +4462,7 @@ IndexToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Collat
if(StringsDiffer(ProjectInfo[ProjectIndex].Unit, "")) if(StringsDiffer(ProjectInfo[ProjectIndex].Unit, ""))
{ {
CopyStringToBuffer(&CollationBuffers->Index, CopyStringToBuffer(&CollationBuffers->Index,
" <dt>\n" " <div>\n"
" <a href=\"%s\">", PlayerURL.Location); " <a href=\"%s\">", PlayerURL.Location);
char Text[1024]; // NOTE(matt): Surely this will be big enough char Text[1024]; // NOTE(matt): Surely this will be big enough
@ -4471,14 +4475,14 @@ IndexToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Collat
CopyStringToBuffer(&CollationBuffers->Index, CopyStringToBuffer(&CollationBuffers->Index,
"</a>\n" "</a>\n"
" </dt>\n"); " </div>\n");
} }
else else
{ {
CopyStringToBuffer(&CollationBuffers->Index, CopyStringToBuffer(&CollationBuffers->Index,
" <dt>\n" " <div>\n"
" <a href=\"%s\">%s</a>\n" " <a href=\"%s\">%s</a>\n"
" </dt>\n", " </div>\n",
PlayerURL.Location, PlayerURL.Location,
Title); Title);
} }

View File

@ -40,6 +40,23 @@
max-width: 800px; max-width: 800px;
} }
#cineraIndex #cineraIndexSort {
margin-bottom: 8px;
display: inline-block;
padding: 5px;
cursor: pointer;
}
#cineraIndex #cineraIndexEntries {
display: flex;
flex-flow: column;
width: 100%;
}
#cineraIndex #cineraIndexEntries.sort_reverse {
flex-flow: column-reverse;
}
#cineraResults .dayContainer { #cineraResults .dayContainer {
display: flex; display: flex;
} }
@ -55,7 +72,7 @@
width: 200px; width: 200px;
} }
#cineraIndex dt a { #cineraIndexEntries div a {
display: block; display: block;
padding: 5px; padding: 5px;
text-decoration: none; text-decoration: none;

View File

@ -6,8 +6,26 @@ if (location.hash && location.hash.length > 0) {
document.getElementById("query").value = decodeURIComponent(initialQuery); document.getElementById("query").value = decodeURIComponent(initialQuery);
} }
var indexContainer = document.getElementById("cineraIndex"); var indexContainer = document.getElementById("cineraIndex");
var indexSort = indexContainer.querySelector("#cineraIndexSort");
var indexEntries = indexContainer.querySelector("#cineraIndexEntries");
indexSort.addEventListener("click", function(ev) {
switch(this.getAttribute("data-id"))
{
case "chronal":
this.setAttribute("data-id", "reverse_chronal");
this.firstChild.nodeValue = "Sort: New to Old ⏷"
indexEntries.classList.add("sort_reverse");
break;
case "reverse_chronal":
this.setAttribute("data-id", "chronal");
this.firstChild.nodeValue = "Sort: Old to New ⏶"
indexEntries.classList.remove("sort_reverse");
break;
}
})
var lastQuery = null; var lastQuery = null;
var resultsToRender = []; var resultsToRender = [];
var resultsIndex = 0; var resultsIndex = 0;