3878 lines
133 KiB
JavaScript
3878 lines
133 KiB
JavaScript
// Processing (Searching / Filtering)
|
||
//
|
||
var CineraProps = {
|
||
IsMobile: IsMobile(),
|
||
Orientation: null,
|
||
};
|
||
|
||
var Search = {
|
||
ResultsSummary: null,
|
||
ResultsContainer: null,
|
||
ProjectsContainer: null,
|
||
QueryElement: null,
|
||
|
||
Projects: [],
|
||
|
||
LastQuery: null,
|
||
MarkerList: null,
|
||
ProjectContainer: null,
|
||
ResultsMarkerIndex: -1,
|
||
RenderHandle: undefined,
|
||
Rendering: false,
|
||
|
||
Prototypes: {
|
||
ProjectContainer: null,
|
||
DayContainer: null,
|
||
Marker: null,
|
||
Highlight: null,
|
||
}
|
||
};
|
||
|
||
function hideEntriesOfProject(ProjectElement)
|
||
{
|
||
if(!ProjectElement.classList.contains("off"))
|
||
{
|
||
ProjectElement.classList.add("off");
|
||
}
|
||
var baseURL = ProjectElement.attributes.getNamedItem("data-baseURL").value;
|
||
var searchLocation = ProjectElement.attributes.getNamedItem("data-searchLocation").value;
|
||
var playerLocation = ProjectElement.attributes.getNamedItem("data-playerLocation").value;
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
var ThisProject = Search.Projects[i];
|
||
if(baseURL === ThisProject.baseURL && searchLocation === ThisProject.searchLocation && playerLocation === ThisProject.playerLocation)
|
||
{
|
||
ThisProject.filteredOut = true;
|
||
if(ThisProject.entriesContainer != null)
|
||
{
|
||
ThisProject.entriesContainer.style.display = "none";
|
||
disableSprite(ThisProject.entriesContainer.parentElement);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function showEntriesOfProject(ProjectElement)
|
||
{
|
||
if(ProjectElement.classList.contains("off"))
|
||
{
|
||
ProjectElement.classList.remove("off");
|
||
}
|
||
var baseURL = ProjectElement.attributes.getNamedItem("data-baseURL").value;
|
||
var searchLocation = ProjectElement.attributes.getNamedItem("data-searchLocation").value;
|
||
var playerLocation = ProjectElement.attributes.getNamedItem("data-playerLocation").value;
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
var ThisProject = Search.Projects[i];
|
||
if(baseURL === ThisProject.baseURL && searchLocation === ThisProject.searchLocation && playerLocation === ThisProject.playerLocation)
|
||
{
|
||
ThisProject.filteredOut = false;
|
||
if(ThisProject.entriesContainer != null)
|
||
{
|
||
ThisProject.entriesContainer.style.display = "flex";
|
||
enableSprite(ThisProject.entriesContainer.parentElement);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function hideProjectSearchResults(baseURL, searchLocation, playerLocation)
|
||
{
|
||
var cineraResults = document.getElementById("cineraResults");
|
||
if(cineraResults)
|
||
{
|
||
var cineraResultsProjects = cineraResults.querySelectorAll(".projectContainer");
|
||
for(var i = 0; i < cineraResultsProjects.length; ++i)
|
||
{
|
||
var resultBaseURL = cineraResultsProjects[i].attributes.getNamedItem("data-baseURL").value;
|
||
var resultSearchLocation = cineraResultsProjects[i].attributes.getNamedItem("data-searchLocation").value;
|
||
var resultPlayerLocation = cineraResultsProjects[i].attributes.getNamedItem("data-playerLocation").value;
|
||
if(baseURL === resultBaseURL && searchLocation === resultSearchLocation && playerLocation === resultPlayerLocation)
|
||
{
|
||
cineraResultsProjects[i].style.display = "none";
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function showProjectSearchResults(baseURL, searchLocation, playerLocation)
|
||
{
|
||
var cineraResults = document.getElementById("cineraResults");
|
||
if(cineraResults)
|
||
{
|
||
var cineraResultsProjects = cineraResults.querySelectorAll(".projectContainer");
|
||
for(var i = 0; i < cineraResultsProjects.length; ++i)
|
||
{
|
||
var resultBaseURL = cineraResultsProjects[i].attributes.getNamedItem("data-baseURL").value;
|
||
var resultSearchLocation = cineraResultsProjects[i].attributes.getNamedItem("data-searchLocation").value;
|
||
var resultPlayerLocation = cineraResultsProjects[i].attributes.getNamedItem("data-playerLocation").value;
|
||
if(baseURL === resultBaseURL && searchLocation === resultSearchLocation && playerLocation === resultPlayerLocation)
|
||
{
|
||
cineraResultsProjects[i].style.display = "flex";
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function toggleEntriesOfProjectAndChildren(ProjectFilterElement)
|
||
{
|
||
var baseURL = ProjectFilterElement.attributes.getNamedItem("data-baseURL").value;
|
||
var searchLocation = ProjectFilterElement.attributes.getNamedItem("data-searchLocation").value;
|
||
var playerLocation = ProjectFilterElement.attributes.getNamedItem("data-playerLocation").value;
|
||
var shouldShow = ProjectFilterElement.classList.contains("off");
|
||
if(shouldShow)
|
||
{
|
||
ProjectFilterElement.classList.remove("off");
|
||
enableSprite(ProjectFilterElement);
|
||
}
|
||
else
|
||
{
|
||
ProjectFilterElement.classList.add("off");
|
||
disableSprite(ProjectFilterElement);
|
||
}
|
||
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
var ThisProject = Search.Projects[i];
|
||
|
||
if(baseURL === ThisProject.baseURL && searchLocation === ThisProject.searchLocation && playerLocation === ThisProject.playerLocation)
|
||
{
|
||
if(shouldShow)
|
||
{
|
||
ThisProject.filteredOut = false;
|
||
enableSprite(ThisProject.projectTitleElement.parentElement);
|
||
if(ThisProject.entriesContainer != null)
|
||
{
|
||
ThisProject.entriesContainer.style.display = "flex";
|
||
}
|
||
showProjectSearchResults(ThisProject.baseURL, ThisProject.searchLocation, ThisProject.playerLocation);
|
||
}
|
||
else
|
||
{
|
||
ThisProject.filteredOut = true;
|
||
disableSprite(ThisProject.projectTitleElement.parentElement);
|
||
if(ThisProject.entriesContainer != null)
|
||
{
|
||
ThisProject.entriesContainer.style.display = "none";
|
||
}
|
||
hideProjectSearchResults(ThisProject.baseURL, ThisProject.searchLocation, ThisProject.playerLocation);
|
||
}
|
||
}
|
||
}
|
||
|
||
var indexChildFilterProjects = ProjectFilterElement.querySelectorAll(".cineraFilterProject");
|
||
|
||
for(var j = 0; j < indexChildFilterProjects.length; ++j)
|
||
{
|
||
var ThisElement = indexChildFilterProjects[j];
|
||
var baseURL = ThisElement.attributes.getNamedItem("data-baseURL").value;
|
||
var searchLocation = ThisElement.attributes.getNamedItem("data-searchLocation").value;
|
||
var playerLocation = ThisElement.attributes.getNamedItem("data-playerLocation").value;
|
||
if(shouldShow)
|
||
{
|
||
showEntriesOfProject(ThisElement);
|
||
showProjectSearchResults(baseURL, searchLocation, playerLocation);
|
||
}
|
||
else
|
||
{
|
||
hideEntriesOfProject(ThisElement);
|
||
hideProjectSearchResults(baseURL, searchLocation, playerLocation);
|
||
}
|
||
}
|
||
}
|
||
|
||
function prepareToParseIndexFile(project)
|
||
{
|
||
project.xhr.addEventListener("load", function() {
|
||
var contents = project.xhr.response;
|
||
var lines = contents.split("\n");
|
||
var mode = "none";
|
||
var episode = null;
|
||
for (var i = 0; i < lines.length; ++i) {
|
||
var line = lines[i];
|
||
if (line.trim().length == 0) { continue; }
|
||
if (line == "---") {
|
||
if (episode != null && episode.filename != null && episode.number != null && episode.title != null) {
|
||
episode.day = getEpisodeName(project.unit, episode.number);
|
||
episode.dayContainerPrototype = project.dayContainerPrototype;
|
||
episode.markerPrototype = Search.Prototypes.Marker;
|
||
episode.playerURLPrefix = project.playerURLPrefix;
|
||
project.episodes.push(episode);
|
||
}
|
||
episode = {};
|
||
mode = "none";
|
||
} else if (line.startsWith("location:")) {
|
||
episode.filename = line.slice(10);
|
||
} else if (line.startsWith("number:")) {
|
||
episode.number = line.slice(8).trim().slice(1, -1);
|
||
} else if (line.startsWith("title:")) {
|
||
episode.title = line.slice(7).trim().slice(1, -1);
|
||
} else if (line.startsWith("markers")) {
|
||
mode = "markers";
|
||
episode.markers = [];
|
||
} else if (mode == "markers") {
|
||
var match = line.match(/"(\d+)": "(.+)"/);
|
||
if (match == null) {
|
||
console.log(name, line);
|
||
} else {
|
||
var totalTime = parseInt(line.slice(1));
|
||
var marker = {
|
||
totalTime: totalTime,
|
||
prettyTime: markerTime(totalTime),
|
||
text: match[2].replace(/\\"/g, "\"")
|
||
}
|
||
episode.markers.push(marker);
|
||
}
|
||
}
|
||
}
|
||
document.querySelector(".spinner").classList.remove("show");
|
||
project.parsed = true;
|
||
runSearch(true);
|
||
});
|
||
project.xhr.addEventListener("error", function() {
|
||
console.error("Failed to load content");
|
||
});
|
||
}
|
||
|
||
function prepareProjects()
|
||
{
|
||
for(var i = 0; i < Search.ProjectsContainer.length; ++i)
|
||
{
|
||
var ID = Search.ProjectsContainer[i].attributes.getNamedItem("data-project").value;
|
||
var baseURL = Search.ProjectsContainer[i].attributes.getNamedItem("data-baseURL").value;
|
||
var searchLocation = Search.ProjectsContainer[i].attributes.getNamedItem("data-searchLocation").value;
|
||
var playerLocation = Search.ProjectsContainer[i].attributes.getNamedItem("data-playerLocation").value;
|
||
var unit = Search.ProjectsContainer[i].attributes.getNamedItem("data-unit").value;
|
||
var theme = Search.ProjectsContainer[i].classList.item(1);
|
||
|
||
Search.Projects[i] =
|
||
{
|
||
baseURL: baseURL,
|
||
searchLocation: searchLocation,
|
||
playerLocation: playerLocation,
|
||
unit: unit,
|
||
playerURLPrefix: (baseURL ? baseURL + "/" : "") + (playerLocation ? playerLocation + "/" : ""),
|
||
indexLocation: (baseURL ? baseURL + "/" : "") + (searchLocation ? searchLocation + "/" : "") + ID + ".index",
|
||
projectTitleElement: Search.ProjectsContainer[i].querySelector(":scope > .cineraProjectTitle"),
|
||
entriesContainer: Search.ProjectsContainer[i].querySelector(":scope > .cineraIndexEntries"),
|
||
dayContainerPrototype: Search.Prototypes.DayContainer.cloneNode(true),
|
||
filteredOut: false,
|
||
parsed: false,
|
||
searched: false,
|
||
resultsToRender: [],
|
||
resultsIndex: 0,
|
||
theme: theme,
|
||
episodes: [],
|
||
xhr: new XMLHttpRequest(),
|
||
}
|
||
|
||
Search.Projects[i].dayContainerPrototype.classList.add(theme);
|
||
Search.Projects[i].dayContainerPrototype.children[1].classList.add(theme);
|
||
|
||
document.querySelector(".spinner").classList.add("show");
|
||
Search.Projects[i].xhr.open("GET", Search.Projects[i].indexLocation);
|
||
Search.Projects[i].xhr.setRequestHeader("Content-Type", "text/plain");
|
||
Search.Projects[i].xhr.send();
|
||
prepareToParseIndexFile(Search.Projects[i]);
|
||
}
|
||
}
|
||
|
||
function getEpisodeName(unit, number) {
|
||
var day = null;
|
||
if(unit)
|
||
{
|
||
day = unit + " " + number;
|
||
}
|
||
return day;
|
||
}
|
||
|
||
function markerTime(totalTime) {
|
||
var markTime = "(";
|
||
var hours = Math.floor(totalTime / 60 / 60);
|
||
var minutes = Math.floor(totalTime / 60) % 60;
|
||
var seconds = totalTime % 60;
|
||
if (hours > 0) {
|
||
markTime += padTimeComponent(hours) + ":";
|
||
}
|
||
|
||
markTime += padTimeComponent(minutes) + ":" + padTimeComponent(seconds) + ")";
|
||
|
||
return markTime;
|
||
}
|
||
|
||
function padTimeComponent(component) {
|
||
return (component < 10 ? "0" + component : component);
|
||
}
|
||
|
||
function resetProjectsForSearch()
|
||
{
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
var project = Search.Projects[i];
|
||
project.searched = false;
|
||
project.resultsToRender = [];
|
||
}
|
||
}
|
||
|
||
function
|
||
IsQuery()
|
||
{
|
||
return Search.LastQuery && Search.LastQuery.length > 0;
|
||
}
|
||
|
||
function runSearch(refresh) {
|
||
var queryStr = document.getElementById("query").value;
|
||
if (refresh || Search.LastQuery != queryStr) {
|
||
var oldResultsContainer = Search.ResultsContainer;
|
||
Search.ResultsContainer = oldResultsContainer.cloneNode(false);
|
||
oldResultsContainer.parentNode.insertBefore(Search.ResultsContainer, oldResultsContainer);
|
||
oldResultsContainer.remove();
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
Search.Projects[i].resultsIndex = 0;
|
||
}
|
||
Search.ResultsMarkerIndex = -1;
|
||
}
|
||
Search.LastQuery = queryStr;
|
||
|
||
resetProjectsForSearch();
|
||
|
||
var numEpisodes = 0;
|
||
var numMarkers = 0;
|
||
var totalSeconds = 0;
|
||
|
||
// NOTE(matt): Function defined within runSearch() so that we can modify numEpisodes, numMarkers and totalSeconds
|
||
function runSearchInterior(resultsToRender, query, episode)
|
||
{
|
||
var matches = [];
|
||
for (var k = 0; k < episode.markers.length; ++k) {
|
||
query.lastIndex = 0;
|
||
var result = query.exec(episode.markers[k].text);
|
||
if (result && result[0].length > 0) {
|
||
numMarkers++;
|
||
matches.push(episode.markers[k]);
|
||
if (k < episode.markers.length-1) {
|
||
totalSeconds += episode.markers[k+1].totalTime - episode.markers[k].totalTime;
|
||
}
|
||
}
|
||
}
|
||
if (matches.length > 0) {
|
||
numEpisodes++;
|
||
resultsToRender.push({
|
||
query: query,
|
||
episode: episode,
|
||
matches: matches
|
||
});
|
||
}
|
||
}
|
||
|
||
if (IsQuery()) {
|
||
switch(Nav.ViewType)
|
||
{
|
||
case view_type.LIST:
|
||
{
|
||
Nav.List.classList.add("hidden");
|
||
} break;
|
||
case view_type.GRID:
|
||
{
|
||
Nav.GridContainer.classList.add("hidden");
|
||
} break;
|
||
}
|
||
Search.ResultsSummary.style.display = "block";
|
||
var shouldRender = false;
|
||
var query = new RegExp(Search.LastQuery.replace("(", "\\(").replace(")", "\\)").replace(/\|+/, "\|").replace(/\|$/, "").replace(/(^|[^\\])\\$/, "$1"), "gi");
|
||
|
||
// Visible
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
var project = Search.Projects[i];
|
||
if(project.parsed && !project.filteredOut && project.episodes.length > 0) {
|
||
if(Nav.SortChronological)
|
||
{
|
||
for(var j = 0; j < project.episodes.length; ++j) {
|
||
var episode = project.episodes[j];
|
||
runSearchInterior(project.resultsToRender, query, episode);
|
||
}
|
||
}
|
||
else
|
||
{
|
||
for(var j = project.episodes.length; j > 0; --j) {
|
||
var episode = project.episodes[j - 1];
|
||
runSearchInterior(project.resultsToRender, query, episode);
|
||
}
|
||
}
|
||
|
||
shouldRender = true;
|
||
project.searched = true;
|
||
|
||
}
|
||
}
|
||
|
||
// Invisible
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
var project = Search.Projects[i];
|
||
if(project.parsed && project.filteredOut && !project.searched && project.episodes.length > 0) {
|
||
if(Nav.SortChronological)
|
||
{
|
||
for(var j = 0; j < project.episodes.length; ++j) {
|
||
var episode = project.episodes[j];
|
||
runSearchInterior(project.resultsToRender, query, episode);
|
||
}
|
||
}
|
||
else
|
||
{
|
||
for(var j = project.episodes.length; j > 0; --j) {
|
||
var episode = project.episodes[j - 1];
|
||
runSearchInterior(project.resultsToRender, query, episode);
|
||
}
|
||
}
|
||
|
||
shouldRender = true;
|
||
project.searched = true;
|
||
|
||
}
|
||
}
|
||
|
||
if(shouldRender)
|
||
{
|
||
if (Search.Rendering) {
|
||
clearTimeout(Search.RenderHandle);
|
||
}
|
||
renderResults();
|
||
}
|
||
}
|
||
else
|
||
{
|
||
switch(Nav.ViewType)
|
||
{
|
||
case view_type.LIST:
|
||
{
|
||
Nav.List.classList.remove("hidden");
|
||
} break;
|
||
case view_type.GRID:
|
||
{
|
||
Nav.GridContainer.classList.remove("hidden");
|
||
} break;
|
||
}
|
||
Search.ResultsSummary.style.display = "none";
|
||
}
|
||
|
||
var totalTime = Math.floor(totalSeconds/60/60) + "h " + Math.floor(totalSeconds/60)%60 + "m " + totalSeconds%60 + "s ";
|
||
|
||
Search.ResultsSummary.textContent = "Found: " + numEpisodes + " episodes, " + numMarkers + " markers, " + totalTime + "total.";
|
||
}
|
||
|
||
function renderResults() {
|
||
var maxItems = 42;
|
||
var numItems = 0;
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
var project = Search.Projects[i];
|
||
if (project.resultsIndex < project.resultsToRender.length) {
|
||
Search.Rendering = true;
|
||
while (numItems < maxItems && project.resultsIndex < project.resultsToRender.length) {
|
||
var query = project.resultsToRender[project.resultsIndex].query;
|
||
var episode = project.resultsToRender[project.resultsIndex].episode;
|
||
var matches = project.resultsToRender[project.resultsIndex].matches;
|
||
if (Search.ResultsMarkerIndex == -1) {
|
||
if(project.resultsIndex == 0 || project.resultsToRender[project.resultsIndex - 1].episode.playerURLPrefix != episode.playerURLPrefix)
|
||
{
|
||
Search.ProjectContainer = Search.Prototypes.ProjectContainer.cloneNode(true);
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
if(Search.Projects[i].playerURLPrefix === episode.playerURLPrefix)
|
||
{
|
||
Search.ProjectContainer.setAttribute("data-baseURL", Search.Projects[i].baseURL);
|
||
Search.ProjectContainer.setAttribute("data-searchLocation", Search.Projects[i].searchLocation);
|
||
Search.ProjectContainer.setAttribute("data-playerLocation", Search.Projects[i].playerLocation);
|
||
if(Search.Projects[i].filteredOut)
|
||
{
|
||
Search.ProjectContainer.style.display = "none";
|
||
}
|
||
}
|
||
}
|
||
Search.ResultsContainer.appendChild(Search.ProjectContainer);
|
||
}
|
||
else
|
||
{
|
||
Search.ProjectContainer = Search.ResultsContainer.lastElementChild;
|
||
}
|
||
|
||
|
||
var dayContainer = episode.dayContainerPrototype.cloneNode(true);
|
||
var dayName = dayContainer.children[0];
|
||
Search.MarkerList = dayContainer.children[1];
|
||
|
||
// TODO(matt): Maybe prepend the entire lineage?
|
||
dayName.textContent = (project.projectTitleElement.textContent ? project.projectTitleElement.textContent + " / " : "") + (episode.day ? episode.day + ": " : "") + episode.title;
|
||
|
||
Search.ProjectContainer.appendChild(dayContainer);
|
||
Search.ResultsMarkerIndex = 0;
|
||
numItems++;
|
||
}
|
||
|
||
while (numItems < maxItems && Search.ResultsMarkerIndex < matches.length) {
|
||
var match = matches[Search.ResultsMarkerIndex];
|
||
var marker = episode.markerPrototype.cloneNode(true);
|
||
marker.setAttribute("href", episode.playerURLPrefix + episode.filename.replace(/"/g, "") + "/#" + match.totalTime);
|
||
query.lastIndex = 0;
|
||
var cursor = 0;
|
||
var text = match.text;
|
||
var result = null;
|
||
marker.appendChild(document.createTextNode(match.prettyTime + " "));
|
||
while (result = query.exec(text)) {
|
||
if (result.index > cursor) {
|
||
marker.appendChild(document.createTextNode(text.slice(cursor, result.index)));
|
||
}
|
||
var highlightEl = Search.Prototypes.Highlight.cloneNode();
|
||
highlightEl.textContent = result[0];
|
||
marker.appendChild(highlightEl);
|
||
cursor = result.index + result[0].length;
|
||
}
|
||
|
||
if (cursor < text.length) {
|
||
marker.appendChild(document.createTextNode(text.slice(cursor, text.length)));
|
||
}
|
||
Search.MarkerList.appendChild(marker);
|
||
numItems++;
|
||
Search.ResultsMarkerIndex++;
|
||
}
|
||
|
||
if (Search.ResultsMarkerIndex == matches.length) {
|
||
Search.ResultsMarkerIndex = -1;
|
||
project.resultsIndex++;
|
||
}
|
||
}
|
||
Search.RenderHandle = setTimeout(renderResults, 0);
|
||
} else {
|
||
Search.Rendering = false;
|
||
}
|
||
}
|
||
}
|
||
|
||
function IsVisible(el) {
|
||
var xPos = 0;
|
||
var yPos = 0;
|
||
var Height = parseInt(getComputedStyle(el).height);
|
||
|
||
while (el) {
|
||
if (el.tagName == "BODY") {
|
||
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
|
||
var yScroll = el.scrollTop || document.documentElement.scrollTop;
|
||
|
||
xPos += (el.offsetLeft - xScroll + el.clientLeft)
|
||
yPos += (el.offsetTop - yScroll + el.clientTop)
|
||
} else {
|
||
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
|
||
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
|
||
}
|
||
|
||
el = el.offsetParent;
|
||
}
|
||
return ((xPos > 0 && xPos < window.innerWidth) && (yPos > 0 && yPos + Height < window.innerHeight));
|
||
}
|
||
|
||
function
|
||
InitQuery(QueryElement)
|
||
{
|
||
if(location.hash && location.hash.length > 0)
|
||
{
|
||
var initialQuery = location.hash;
|
||
if(initialQuery[0] == "#")
|
||
{
|
||
initialQuery = initialQuery.slice(1);
|
||
}
|
||
QueryElement.value = decodeURIComponent(initialQuery);
|
||
}
|
||
|
||
if(document.hasFocus() && IsVisible(QueryElement)) { QueryElement.focus(); }
|
||
}
|
||
|
||
function
|
||
InitPrototypes(ResultsContainer)
|
||
{
|
||
Search.Prototypes.ProjectContainer = document.createElement("DIV");
|
||
Search.Prototypes.ProjectContainer.classList.add("projectContainer");
|
||
|
||
Search.Prototypes.DayContainer = document.createElement("DIV");
|
||
Search.Prototypes.DayContainer.classList.add("dayContainer");
|
||
|
||
var DayName = document.createElement("SPAN");
|
||
DayName.classList.add("dayName");
|
||
Search.Prototypes.DayContainer.appendChild(DayName);
|
||
|
||
var MarkerList = document.createElement("DIV");
|
||
MarkerList.classList.add("markerList");
|
||
Search.Prototypes.DayContainer.appendChild(MarkerList);
|
||
|
||
Search.Prototypes.Marker = document.createElement("A");
|
||
Search.Prototypes.Marker.classList.add("marker");
|
||
if(ResultsContainer.getAttribute("data-single") == 0)
|
||
{
|
||
Search.Prototypes.Marker.setAttribute("target", "_blank");
|
||
}
|
||
|
||
Search.Prototypes.Highlight = document.createElement("B");
|
||
}
|
||
//
|
||
// Processing (Searching / Filtering)
|
||
|
||
// Presenting / Navigating (Laying out and traversing the grid, and sorting)
|
||
//
|
||
var state_bit =
|
||
{
|
||
DISABLE_ANIMATIONS: 1 << 0,
|
||
SORT_REVERSED: 1 << 1,
|
||
VIEW_LIST: 1 << 2,
|
||
VIEW_GRID: 1 << 3,
|
||
|
||
NO_SAVE: 1 << 31,
|
||
};
|
||
|
||
var siblings =
|
||
{
|
||
PREV: 0,
|
||
NEXT: 1,
|
||
};
|
||
|
||
var item_type =
|
||
{
|
||
PROJECT: 0,
|
||
ENTRY: 1,
|
||
};
|
||
|
||
var item_end =
|
||
{
|
||
HEAD: 0,
|
||
TAIL: 1,
|
||
};
|
||
|
||
var view_type =
|
||
{
|
||
LIST: 0,
|
||
GRID: 1,
|
||
};
|
||
|
||
var transition_type =
|
||
{
|
||
SIBLING_SHIFT_PREV: 0,
|
||
SIBLING_SHIFT_NEXT: 1,
|
||
PROJECT_ENTRY: 2,
|
||
PROJECT_EXIT: 3,
|
||
SUBDIVISION_DESCENT: 4,
|
||
SUBDIVISION_ASCENT: 5,
|
||
};
|
||
|
||
var interaction_type =
|
||
{
|
||
PUSH_BUTTON: 0,
|
||
SIBLING_SHIFT_PREV: 1,
|
||
SIBLING_SHIFT_NEXT: 2,
|
||
ASCEND: 3,
|
||
SORT: 4,
|
||
};
|
||
|
||
var Nav = {
|
||
Nexus: null,
|
||
GridContainer: null,
|
||
ButtonsContainer: null,
|
||
GridSize: {
|
||
X: null,
|
||
Y: null,
|
||
},
|
||
GridMinCellsPerDimension: 1,
|
||
GridMaxCellsPerDimension: 4,
|
||
GridDim: {
|
||
X: null,
|
||
Y: null,
|
||
},
|
||
MinButtonDim: 100,
|
||
ButtonDim: null,
|
||
GridColumnGap: null,
|
||
GridRowGap: null,
|
||
|
||
SortChronological: true,
|
||
ViewType: view_type.GRID,
|
||
List: null,
|
||
Grid: null,
|
||
|
||
// NOTE(matt): Controls
|
||
Controls: {
|
||
Header: null,
|
||
Sort: null,
|
||
View: null,
|
||
Anim: null,
|
||
Save: null,
|
||
|
||
Help: null,
|
||
HelpDocumentation: null,
|
||
HelpKeys: [],
|
||
|
||
GridTraversal: {
|
||
Container: null,
|
||
Header: null,
|
||
Ascend: null,
|
||
Prev: null,
|
||
PrevAscends: false,
|
||
Next: null,
|
||
NextAscends: false,
|
||
},
|
||
},
|
||
|
||
Buttons: [],
|
||
|
||
Transition: {
|
||
Enabled: true,
|
||
ButtonsTransitionContainer: null,
|
||
ButtonsContainerCloneElement: null,
|
||
RelevantButtonElement: null,
|
||
|
||
StageDurations: [],
|
||
|
||
Transforms: {
|
||
ButtonsTransitionContainer: {
|
||
Initial: {
|
||
Pos: { X: 0, Y: 0, },
|
||
Scale: { X: 1, Y: 1, },
|
||
Rotation: { X: 0, Y: 0, Z: 0, },
|
||
Opacity: 1,
|
||
ScrollX: 0,
|
||
ZIndex: 0,
|
||
},
|
||
Current: {
|
||
Pos: { X: 0, Y: 0, },
|
||
Scale: { X: 1, Y: 1, },
|
||
Rotation: { X: 0, Y: 0, Z: 0, },
|
||
Opacity: 1,
|
||
ScrollX: 0,
|
||
ZIndex: 0,
|
||
},
|
||
TargetStages: [],
|
||
},
|
||
ButtonsContainer: {
|
||
Initial: {
|
||
Pos: { X: 0, Y: 0, },
|
||
Scale: { X: 1, Y: 1, },
|
||
Rotation: { X: 0, Y: 0, Z: 0, },
|
||
Opacity: 1,
|
||
ScrollX: 0,
|
||
ZIndex: 0,
|
||
},
|
||
Current: {
|
||
Pos: { X: 0, Y: 0, },
|
||
Scale: { X: 1, Y: 1, },
|
||
Rotation: { X: 0, Y: 0, Z: 0, },
|
||
Opacity: 1,
|
||
ScrollX: 0,
|
||
ZIndex: 0,
|
||
},
|
||
TargetStages: [],
|
||
},
|
||
ButtonsContainerClone: {
|
||
Initial: {
|
||
Pos: { X: 0, Y: 0, },
|
||
Scale: { X: 1, Y: 1, },
|
||
Rotation: { X: 0, Y: 0, Z: 0, },
|
||
Opacity: 1,
|
||
ScrollX: 0,
|
||
ZIndex: 0,
|
||
},
|
||
Current: {
|
||
Pos: { X: 0, Y: 0, },
|
||
Scale: { X: 1, Y: 1, },
|
||
Rotation: { X: 0, Y: 0, Z: 0, },
|
||
Opacity: 1,
|
||
ScrollX: 0,
|
||
ZIndex: 0,
|
||
},
|
||
TargetStages: [],
|
||
},
|
||
RelevantButton: {
|
||
Initial: {
|
||
Pos: { X: 0, Y: 0, },
|
||
Scale: { X: 1, Y: 1, },
|
||
Rotation: { X: 0, Y: 0, Z: 0, },
|
||
Opacity: 1,
|
||
ScrollX: 0,
|
||
ZIndex: 0,
|
||
},
|
||
Current: {
|
||
Pos: { X: 0, Y: 0, },
|
||
Scale: { X: 1, Y: 1, },
|
||
Rotation: { X: 0, Y: 0, Z: 0, },
|
||
Opacity: 1,
|
||
ScrollX: 0,
|
||
ZIndex: 0,
|
||
},
|
||
TargetStages: [],
|
||
},
|
||
},
|
||
|
||
StartTime: undefined,
|
||
RequestedFrame: undefined,
|
||
},
|
||
|
||
InteractionQueue: [],
|
||
TraversalStack: [],
|
||
State: null,
|
||
};
|
||
|
||
function
|
||
StateBitIsSet(Bit)
|
||
{
|
||
return Nav.State & Bit;
|
||
}
|
||
|
||
function
|
||
StateBitIsClear(Bit)
|
||
{
|
||
return !(Nav.State & Bit);
|
||
}
|
||
|
||
function
|
||
MaintainingState()
|
||
{
|
||
return StateBitIsClear(state_bit.NO_SAVE);
|
||
}
|
||
|
||
function
|
||
SaveState()
|
||
{
|
||
localStorage.setItem("CineraState", Nav.State);
|
||
}
|
||
|
||
function
|
||
SetStateBit(Bit)
|
||
{
|
||
if(MaintainingState()) { Nav.State |= Bit; SaveState(); }
|
||
}
|
||
|
||
function
|
||
ClearStateBit(Bit)
|
||
{
|
||
if(MaintainingState()) { Nav.State &= ~Bit; SaveState(); }
|
||
}
|
||
|
||
function
|
||
SetHelpKeyAvailability(GridSize)
|
||
{
|
||
for(var i = 0; i < Nav.Controls.HelpKeys.length; ++i)
|
||
{
|
||
Nav.Controls.HelpKeys[i].classList.remove("unavailable");
|
||
}
|
||
|
||
/* NOTE(matt): Key layout:
|
||
0 4 8 12
|
||
1 5 9 13
|
||
2 6 10 14
|
||
3 7 11 15
|
||
*/
|
||
|
||
if(GridSize.X < 4)
|
||
{
|
||
Nav.Controls.HelpKeys[12].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[13].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[14].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[15].classList.add("unavailable");
|
||
|
||
if(GridSize.X < 3)
|
||
{
|
||
Nav.Controls.HelpKeys[8].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[9].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[10].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[11].classList.add("unavailable");
|
||
|
||
if(GridSize.X < 2)
|
||
{
|
||
Nav.Controls.HelpKeys[4].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[5].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[6].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[7].classList.add("unavailable");
|
||
|
||
if(GridSize.X < 1)
|
||
{
|
||
Nav.Controls.HelpKeys[0].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[1].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[2].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[3].classList.add("unavailable");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
if(GridSize.Y < 4)
|
||
{
|
||
Nav.Controls.HelpKeys[3].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[7].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[11].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[15].classList.add("unavailable");
|
||
|
||
if(GridSize.Y < 3)
|
||
{
|
||
Nav.Controls.HelpKeys[2].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[6].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[10].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[14].classList.add("unavailable");
|
||
|
||
if(GridSize.Y < 2)
|
||
{
|
||
Nav.Controls.HelpKeys[1].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[5].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[9].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[13].classList.add("unavailable");
|
||
|
||
if(GridSize.Y < 1)
|
||
{
|
||
Nav.Controls.HelpKeys[0].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[4].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[8].classList.add("unavailable");
|
||
Nav.Controls.HelpKeys[12].classList.add("unavailable");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function
|
||
InitHelpKeys(HelpDocumentation)
|
||
{
|
||
var Paragraph = HelpDocumentation.querySelector(".help_paragraph");
|
||
Nav.Controls.HelpKeys = Paragraph.querySelectorAll(".help_key");
|
||
}
|
||
|
||
function
|
||
SyncNavState()
|
||
{
|
||
Nav.State = localStorage.getItem("CineraState");
|
||
if(Nav.State)
|
||
{
|
||
if(MaintainingState())
|
||
{
|
||
if(StateBitIsSet(state_bit.DISABLE_ANIMATIONS)) { ToggleAnimations(); }
|
||
if(StateBitIsSet(state_bit.SORT_REVERSED)) { Sort(true); }
|
||
|
||
// Nav.ViewType is initialised to view_type.GRID, so we needn't do anything if the Nav.State is also on Grid
|
||
if(StateBitIsSet(state_bit.VIEW_LIST) || !GridSizeIsSupported(Nav.GridSize))
|
||
{
|
||
ToggleView();
|
||
}
|
||
}
|
||
else
|
||
{
|
||
Nav.Controls.Save.textContent = "Save Settings: ✘";
|
||
// Nav.ViewType was initialised to view_type.GRID
|
||
if(!GridSizeIsSupported(Nav.GridSize))
|
||
{
|
||
ToggleView();
|
||
}
|
||
}
|
||
}
|
||
else
|
||
{
|
||
Nav.State = 0;
|
||
SetStateBit(state_bit.VIEW_GRID); // NOTE(matt): Nav.ViewType was initialised to view_type.GRID
|
||
if(!GridSizeIsSupported(Nav.GridSize))
|
||
{
|
||
ToggleView();
|
||
}
|
||
}
|
||
}
|
||
|
||
function
|
||
InitTraversalStack()
|
||
{
|
||
Nav.List = document.getElementById("cineraIndexList");
|
||
|
||
var Projects = Nav.List.querySelectorAll(":scope > .cineraIndexProject");
|
||
|
||
var Level = {
|
||
Projects: null,
|
||
Entries: null,
|
||
HeadIndex: null,
|
||
TailIndex: null,
|
||
}
|
||
|
||
if(Projects.length === 1)
|
||
{
|
||
// NOTE(matt): Automatically descend into the lone project
|
||
Level.Projects = Projects[0].querySelectorAll(":scope > .cineraIndexProject");
|
||
Level.Entries = Projects[0].querySelectorAll(":scope > .cineraIndexEntries > div");
|
||
}
|
||
else
|
||
{
|
||
Level.Projects = Projects;
|
||
// NOTE(matt): The top-level "root" cannot itself contain any entries
|
||
}
|
||
|
||
Nav.TraversalStack.push(Level);
|
||
}
|
||
|
||
function
|
||
ComputeFullButtonItemCount(ParentItemCount, AvailableButtonCount)
|
||
{
|
||
return ParentItemCount > 0 ? Math.ceil(ParentItemCount / AvailableButtonCount) : 0;
|
||
}
|
||
|
||
function
|
||
EmptyElement(Element)
|
||
{
|
||
while(Element.firstChild) { Element.removeChild(Element.firstChild); }
|
||
}
|
||
|
||
function
|
||
SetDim(Element, X, Y)
|
||
{
|
||
Element.style.width = X;
|
||
Element.style.height = Y;
|
||
}
|
||
|
||
function
|
||
EmptyAndResetButton(Button)
|
||
{
|
||
EmptyElement(Button.Element);
|
||
Button.Element.style.fontSize = null;
|
||
Button.Element.style.fontWeight = null;
|
||
|
||
SetDim(Button.Element, null, null);
|
||
|
||
for(var i = 0; i < Button.Element.classList.length;)
|
||
{
|
||
var Class = Button.Element.classList[i];
|
||
if(Class != "cineraButton" && Class != "subdivision")
|
||
{
|
||
Button.Element.classList.remove(Class);
|
||
}
|
||
else
|
||
{
|
||
++i;
|
||
}
|
||
}
|
||
|
||
Button.Projects = null;
|
||
Button.Entries = null;
|
||
Button.HeadIndex = null;
|
||
Button.TailIndex = null;
|
||
}
|
||
|
||
function
|
||
HasPrevSibling(Level)
|
||
{
|
||
return Level.HeadIndex && Level.HeadIndex > 0;
|
||
}
|
||
|
||
function
|
||
HasNextSibling(Level)
|
||
{
|
||
return Level.TailIndex && Level.TailIndex < (Level.Entries ? Level.Entries.length : Level.Projects.length) - 1;
|
||
}
|
||
|
||
function
|
||
Diff(A, B)
|
||
{
|
||
return Math.abs(A - B);
|
||
}
|
||
|
||
function
|
||
SetButtonInfo(NewButton, Prev, Level, Distribution)
|
||
{
|
||
var Result = {
|
||
HeadIndex: null,
|
||
TailIndex: null,
|
||
ItemCount: null,
|
||
Theme: null,
|
||
}
|
||
var ItemsToPlace = null;
|
||
var FullButtonItemCount = null;
|
||
|
||
if(Distribution.ProjectsToPlace)
|
||
{
|
||
ItemsToPlace = Distribution.ProjectsToPlace;
|
||
FullButtonItemCount = Distribution.FullButtonProjectCount;
|
||
}
|
||
else if(Distribution.EntriesToPlace)
|
||
{
|
||
ItemsToPlace = Distribution.EntriesToPlace;
|
||
FullButtonItemCount = Distribution.FullButtonEntryCount;
|
||
Result.Theme = Level.Entries[0].parentElement.parentElement.classList[1];
|
||
}
|
||
|
||
Result.ItemCount = ItemsToPlace > FullButtonItemCount ? FullButtonItemCount : ItemsToPlace;
|
||
if(Result.ItemCount > 0)
|
||
{
|
||
Result.HeadIndex = Prev ? Prev.TailIndex + 1 : Level.HeadIndex ? Level.HeadIndex : 0;
|
||
Result.TailIndex = Result.HeadIndex + Result.ItemCount - 1;
|
||
if(Result.ItemCount > 1)
|
||
{
|
||
if(Result.Theme == null)
|
||
{
|
||
Result.Theme = Level.Projects[Result.HeadIndex].classList[1];
|
||
}
|
||
NewButton.HeadIndex = Result.HeadIndex;
|
||
NewButton.TailIndex = Result.TailIndex;
|
||
}
|
||
else if(Level.Projects && Level.Projects.length > 0)
|
||
{
|
||
if(Distribution.ProjectsToPlace)
|
||
{
|
||
NewButton.Projects = Level.Projects[Result.HeadIndex].querySelectorAll(":scope > .cineraIndexProject");
|
||
Result.Theme = Level.Projects[Result.HeadIndex].classList[1];
|
||
}
|
||
else
|
||
{
|
||
NewButton.Entries = Level.Projects[Result.HeadIndex].querySelectorAll(":scope > .cineraIndexEntries > div");
|
||
}
|
||
}
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
ComputeItemDistribution(Level)
|
||
{
|
||
var Result = {
|
||
ProjectsToPlace: Level.Projects ? Level.HeadIndex !== null && Level.TailIndex !== null ? Diff(Level.HeadIndex, Level.TailIndex) + 1 : Level.Projects.length : 0,
|
||
ButtonsForProjects: 0,
|
||
FullButtonProjectCount: 0,
|
||
|
||
EntriesToPlace: Level.Entries ? Level.HeadIndex !== null && Level.TailIndex !== null ? Diff(Level.HeadIndex, Level.TailIndex) + 1 : Level.Entries.length : 0,
|
||
ButtonsForEntries: 0,
|
||
FullButtonEntryCount: 0,
|
||
};
|
||
|
||
// NOTE(matt): Reserving the top row for projects
|
||
if(Result.ProjectsToPlace > 0 && Result.EntriesToPlace > 0)
|
||
{
|
||
Result.ButtonsForProjects = Math.min(Nav.GridSize.X, Result.ProjectsToPlace);
|
||
}
|
||
Result.ButtonsForEntries = Nav.Buttons.length - Result.ButtonsForProjects;
|
||
if(Result.EntriesToPlace < Result.ButtonsForEntries)
|
||
{
|
||
Result.ButtonsForProjects += (Result.ButtonsForEntries - Result.EntriesToPlace);
|
||
Result.ButtonsForEntries = Nav.Buttons.length - Result.ButtonsForProjects;
|
||
}
|
||
|
||
Result.FullButtonProjectCount = ComputeFullButtonItemCount(Result.ProjectsToPlace, Result.ButtonsForProjects);
|
||
Result.FullButtonEntryCount = ComputeFullButtonItemCount(Result.EntriesToPlace, Result.ButtonsForEntries);
|
||
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
ResetTransform(Transform, IgnoreSorting)
|
||
{
|
||
Transform.Pos.X = 0;
|
||
Transform.Pos.Y = 0;
|
||
|
||
Transform.Scale.X = 1;
|
||
Transform.Scale.Y = 1;
|
||
|
||
Transform.Rotation.X = 0;
|
||
Transform.Rotation.Y = 0;
|
||
Transform.Rotation.Z = (Nav.SortChronological || IgnoreSorting) ? 0 : 180;
|
||
|
||
Transform.Opacity = 1;
|
||
|
||
Transform.ScrollX = 0;
|
||
|
||
Transform.ZIndex = null;
|
||
}
|
||
|
||
function
|
||
ResetButtonsContainerClone()
|
||
{
|
||
EmptyElement(Nav.Transition.ButtonsContainerCloneElement);
|
||
|
||
ResetTransform(Nav.Transition.Transforms.ButtonsTransitionContainer.Current, true);
|
||
ResetTransform(Nav.Transition.Transforms.ButtonsTransitionContainer.Initial, true);
|
||
ApplyTransform(Nav.Transition.ButtonsTransitionContainerElement, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
|
||
|
||
ResetTransform(Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
ResetTransform(Nav.Transition.Transforms.ButtonsContainer.Initial);
|
||
ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
|
||
ResetTransform(Nav.Transition.Transforms.ButtonsContainerClone.Current);
|
||
ResetTransform(Nav.Transition.Transforms.ButtonsContainerClone.Initial);
|
||
ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
|
||
|
||
Nav.Transition.ButtonsContainerCloneElement.style.gridTemplateColumns = Nav.ButtonsContainer.style.gridTemplateColumns;
|
||
Nav.Transition.ButtonsContainerCloneElement.style.gridTemplateRows = Nav.ButtonsContainer.style.gridTemplateRows;
|
||
|
||
Nav.Transition.ButtonsContainerCloneElement.style.paddingRight = null;
|
||
Nav.Transition.ButtonsContainerCloneElement.style.paddingLeft = null;
|
||
Nav.Transition.ButtonsContainerCloneElement.style.position = "absolute";
|
||
|
||
if(Nav.Transition.RelevantButtonElement)
|
||
{
|
||
ResetTransform(Nav.Transition.Transforms.RelevantButton.Current, true);
|
||
ResetTransform(Nav.Transition.Transforms.RelevantButton.Initial, true);
|
||
ApplyTransform(Nav.Transition.RelevantButtonElement, Nav.Transition.Transforms.RelevantButton.Current);
|
||
Nav.Transition.RelevantButtonElement = null;
|
||
}
|
||
|
||
Nav.ButtonsContainer.style.zIndex = 1;
|
||
Nav.ButtonsContainer.style.order = 1;
|
||
Nav.Transition.ButtonsContainerCloneElement.style.order = 0;
|
||
Nav.Transition.ButtonsContainerCloneElement.style.display = "none";
|
||
}
|
||
|
||
function
|
||
CloneButtonsContainer()
|
||
{
|
||
ResetButtonsContainerClone();
|
||
for(var i = 0; i < Nav.ButtonsContainer.children.length; ++i)
|
||
{
|
||
var ChildClone = Nav.ButtonsContainer.children[i].cloneNode(true);
|
||
Nav.Transition.ButtonsContainerCloneElement.appendChild(ChildClone);
|
||
}
|
||
|
||
CopyTransform(Nav.Transition.Transforms.ButtonsContainerClone.Current, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
|
||
Nav.Transition.ButtonsContainerCloneElement.style.zIndex = 1;
|
||
Nav.Transition.ButtonsContainerCloneElement.style.display = "grid";
|
||
}
|
||
|
||
function
|
||
GetIndexOfElement(ParentNodeList, Element)
|
||
{
|
||
var Result = null;
|
||
for(var i = 0; i < ParentNodeList.length; ++i)
|
||
{
|
||
if(Element == ParentNodeList[i])
|
||
{
|
||
Result = i;
|
||
break;
|
||
}
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
GetIndexOfButton(Button)
|
||
{
|
||
var Result = null;
|
||
for(var i = 0; i < Nav.Buttons.length; ++i)
|
||
{
|
||
if(Button == Nav.Buttons[i])
|
||
{
|
||
Result = i
|
||
break;
|
||
}
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
ApplyTransform(Element, Transform)
|
||
{
|
||
var TranslateStyle = "translate(" + Transform.Pos.X + "px, " + Transform.Pos.Y + "px)";
|
||
var ScaleStyle = "scale(" + Transform.Scale.X + "," + Transform.Scale.Y + ")";
|
||
var RotateX = "rotate3d(1, 0, 0, " + Transform.Rotation.X + "deg)";
|
||
var RotateY = "rotate3d(0, 1, 0, " + Transform.Rotation.Y + "deg)";
|
||
var RotateZ = "rotate3d(0, 0, 1, " + Transform.Rotation.Z + "deg)";
|
||
var RotateStyle = RotateX + " " + RotateY + " " + RotateZ;
|
||
|
||
var TransformString = TranslateStyle + " " + ScaleStyle + " " + RotateStyle;
|
||
|
||
Element.style.transform = TransformString;
|
||
Element.style.opacity = Transform.Opacity;
|
||
Element.style.zIndex = Transform.ZIndex;
|
||
|
||
if(Transform.ScrollX !== null)
|
||
{
|
||
Element.scrollLeft = Transform.ScrollX;
|
||
}
|
||
}
|
||
|
||
function
|
||
CopyTransform(Dest, Src)
|
||
{
|
||
Dest.Pos.X = Src.Pos.X;
|
||
Dest.Pos.Y = Src.Pos.Y;
|
||
|
||
Dest.Scale.X = Src.Scale.X;
|
||
Dest.Scale.Y = Src.Scale.Y;
|
||
|
||
Dest.Rotation.X = Src.Rotation.X;
|
||
Dest.Rotation.Y = Src.Rotation.Y;
|
||
Dest.Rotation.Z = Src.Rotation.Z;
|
||
|
||
Dest.Opacity = Src.Opacity;
|
||
|
||
Dest.ScrollX = Src.ScrollX;
|
||
|
||
Dest.ZIndex = Src.ZIndex;
|
||
}
|
||
|
||
function
|
||
TransformsMatch(Current, Target)
|
||
{
|
||
var Result = true;
|
||
if((Target.Pos.X != null && Target.Pos.X != Current.Pos.X) ||
|
||
(Target.Pos.Y != null && Target.Pos.Y != Current.Pos.Y) ||
|
||
(Target.Scale.X != null && Target.Scale.X != Current.Scale.X) ||
|
||
(Target.Scale.Y != null && Target.Scale.Y != Current.Scale.Y) ||
|
||
(Target.Rotation.X != null && Target.Rotation.X != Current.Rotation.X) ||
|
||
(Target.Rotation.Y != null && Target.Rotation.Y != Current.Rotation.Y) ||
|
||
(Target.Rotation.Z != null && Target.Rotation.Z != Current.Rotation.Z) ||
|
||
(Target.Opacity != null && Target.Opacity != Current.Opacity) ||
|
||
(Target.ScrollX != null && Target.ScrollX != Current.ScrollX) ||
|
||
(Target.ZIndex != null && Target.ZIndex != Current.ZIndex))
|
||
{
|
||
Result = false;
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
TransformsComplete(TransformSet)
|
||
{
|
||
var Result = true;
|
||
|
||
var ButtonsContainer = TransformSet.ButtonsContainer;
|
||
var ButtonsContainerClone = TransformSet.ButtonsContainerClone;
|
||
var ButtonsTransitionContainer = TransformSet.ButtonsTransitionContainer;
|
||
var RelevantButton = TransformSet.RelevantButton;
|
||
|
||
if((ButtonsContainer.TargetStages.length && !TransformsMatch(ButtonsContainer.Current, ButtonsContainer.TargetStages[0])) ||
|
||
(ButtonsContainerClone.TargetStages.length && !TransformsMatch(ButtonsContainerClone.Current, ButtonsContainerClone.TargetStages[0])) ||
|
||
(ButtonsTransitionContainer.TargetStages.length && !TransformsMatch(ButtonsTransitionContainer.Current, ButtonsTransitionContainer.TargetStages[0])) ||
|
||
(RelevantButton.TargetStages.length && !TransformsMatch(RelevantButton.Current, RelevantButton.TargetStages[0])))
|
||
{
|
||
Result = false;
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
FinaliseTransforms(TransformsSet)
|
||
{
|
||
Nav.Transition.StartTime = undefined;
|
||
CopyTransform(TransformsSet.ButtonsTransitionContainer.Initial, TransformsSet.ButtonsTransitionContainer.Current);
|
||
CopyTransform(TransformsSet.ButtonsContainer.Initial, TransformsSet.ButtonsContainer.Current);
|
||
CopyTransform(TransformsSet.ButtonsContainerClone.Initial, TransformsSet.ButtonsContainerClone.Current);
|
||
CopyTransform(TransformsSet.RelevantButton.Initial, TransformsSet.RelevantButton.Current);
|
||
ShiftStage();
|
||
}
|
||
|
||
function
|
||
LerpTransforms(TransformSet, t)
|
||
{
|
||
var Result = false;
|
||
if(TransformSet.TargetStages.length)
|
||
{
|
||
var Initial = TransformSet.Initial;
|
||
var Current = TransformSet.Current;
|
||
var Target = TransformSet.TargetStages[0];
|
||
if(Target.Pos.X !== null) { Current.Pos.X = Lerp(Initial.Pos.X, t, Target.Pos.X); Result = true; }
|
||
if(Target.Pos.Y !== null) { Current.Pos.Y = Lerp(Initial.Pos.Y, t, Target.Pos.Y); Result = true; }
|
||
|
||
if(Target.Scale.X !== null) { Current.Scale.X = Lerp(Initial.Scale.X, t, Target.Scale.X); Result = true; }
|
||
if(Target.Scale.Y !== null) { Current.Scale.Y = Lerp(Initial.Scale.Y, t, Target.Scale.Y); Result = true; }
|
||
|
||
if(Target.Rotation.X !== null) { Current.Rotation.X = Lerp(Initial.Rotation.X, t, Target.Rotation.X); Result = true; }
|
||
if(Target.Rotation.Y !== null) { Current.Rotation.Y = Lerp(Initial.Rotation.Y, t, Target.Rotation.Y); Result = true; }
|
||
if(Target.Rotation.Z !== null) { Current.Rotation.Z = Lerp(Initial.Rotation.Z, t, Target.Rotation.Z); Result = true; }
|
||
|
||
if(Target.Opacity !== null) { Current.Opacity = Lerp(Initial.Opacity, t, Target.Opacity); Result = true; }
|
||
|
||
if(Target.ScrollX !== null) { Current.ScrollX = Lerp(Initial.ScrollX, t, Target.ScrollX); Result = true; }
|
||
|
||
if(Target.ZIndex !== null) { Current.ZIndex = Lerp(Initial.ZIndex, t, Target.ZIndex); Result = true; }
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
ShiftStage()
|
||
{
|
||
if(Nav.Transition.StageDurations.length) { Nav.Transition.StageDurations.shift(); }
|
||
if(Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.length) { Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.shift(); }
|
||
if(Nav.Transition.Transforms.ButtonsContainer.TargetStages.length) { Nav.Transition.Transforms.ButtonsContainer.TargetStages.shift(); }
|
||
if(Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.length) { Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.shift(); }
|
||
if(Nav.Transition.Transforms.RelevantButton.TargetStages.length) { Nav.Transition.Transforms.RelevantButton.TargetStages.shift(); }
|
||
}
|
||
|
||
function
|
||
MergeTransform(Dest, Src)
|
||
{
|
||
if(Src.Pos.X !== null) { Dest.Pos.X = Src.Pos.X; }
|
||
if(Src.Pos.Y !== null) { Dest.Pos.Y = Src.Pos.Y; }
|
||
|
||
if(Src.Scale.X !== null) { Dest.Scale.X = Src.Scale.X; }
|
||
if(Src.Scale.Y !== null) { Dest.Scale.Y = Src.Scale.Y; }
|
||
|
||
if(Src.Rotation.X !== null) { Dest.Rotation.X = Src.Rotation.X; }
|
||
if(Src.Rotation.Y !== null) { Dest.Rotation.Y = Src.Rotation.Y; }
|
||
if(Src.Rotation.Z !== null) { Dest.Rotation.Z = Src.Rotation.Z; }
|
||
|
||
if(Src.Opacity !== null) { Dest.Opacity = Src.Opacity; }
|
||
|
||
if(Src.ScrollX !== null) { Dest.ScrollX = Src.ScrollX; }
|
||
|
||
if(Src.ZIndex !== null) { Dest.ZIndex = Src.ZIndex; }
|
||
}
|
||
|
||
function
|
||
DoTransitionStage(Now)
|
||
{
|
||
if(Nav.Transition.StageDurations.length)
|
||
{
|
||
if(Nav.Transition.StartTime === undefined)
|
||
{
|
||
Nav.Transition.StartTime = Now;
|
||
}
|
||
|
||
var Elapsed = Now - Nav.Transition.StartTime;
|
||
var Duration = Nav.Transition.StageDurations[0];
|
||
if(Duration === 0)
|
||
{
|
||
// Instant transform
|
||
if(Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.length)
|
||
{
|
||
MergeTransform(Nav.Transition.Transforms.ButtonsTransitionContainer.Current, Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages[0]);
|
||
ApplyTransform(Nav.Transition.ButtonsTransitionContainerElement, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
|
||
}
|
||
if(Nav.Transition.Transforms.ButtonsContainer.TargetStages.length)
|
||
{
|
||
MergeTransform(Nav.Transition.Transforms.ButtonsContainer.Current, Nav.Transition.Transforms.ButtonsContainer.TargetStages[0]);
|
||
ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
}
|
||
if(Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.length)
|
||
{
|
||
MergeTransform(Nav.Transition.Transforms.ButtonsContainerClone.Current, Nav.Transition.Transforms.ButtonsContainerClone.TargetStages[0]);
|
||
ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
|
||
}
|
||
if(Nav.Transition.Transforms.RelevantButton.TargetStages.length)
|
||
{
|
||
MergeTransform(Nav.Transition.Transforms.RelevantButton.Current, Nav.Transition.Transforms.RelevantButton.TargetStages[0]);
|
||
ApplyTransform(Nav.Transition.RelevantButtonElement, Nav.Transition.Transforms.RelevantButton.Current);
|
||
}
|
||
}
|
||
else
|
||
{
|
||
// Lerp
|
||
var t = Clamp01(Elapsed / Duration);
|
||
if(LerpTransforms(Nav.Transition.Transforms.ButtonsTransitionContainer, t))
|
||
{
|
||
ApplyTransform(Nav.Transition.ButtonsTransitionContainerElement, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
|
||
}
|
||
if(LerpTransforms(Nav.Transition.Transforms.ButtonsContainer, t))
|
||
{
|
||
ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
}
|
||
if(LerpTransforms(Nav.Transition.Transforms.ButtonsContainerClone, t))
|
||
{
|
||
ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
|
||
}
|
||
if(LerpTransforms(Nav.Transition.Transforms.RelevantButton, t))
|
||
{
|
||
ApplyTransform(Nav.Transition.RelevantButtonElement, Nav.Transition.Transforms.RelevantButton.Current);
|
||
}
|
||
}
|
||
if(TransformsComplete(Nav.Transition.Transforms))
|
||
{
|
||
FinaliseTransforms(Nav.Transition.Transforms);
|
||
}
|
||
Nav.Transition.RequestedFrame = window.requestAnimationFrame(DoTransitionStage);
|
||
}
|
||
else
|
||
{
|
||
Nav.Transition.RequestedFrame = undefined;
|
||
ResetButtonsContainerClone();
|
||
DequeueInteraction();
|
||
}
|
||
}
|
||
|
||
function
|
||
CompressTransitionStages()
|
||
{
|
||
while(Nav.Transition.StageDurations.length > 1)
|
||
{
|
||
Nav.Transition.StageDurations.shift()
|
||
}
|
||
Nav.Transition.StageDurations[0] = 0;
|
||
|
||
while(Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.length > 1)
|
||
{
|
||
Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.shift();
|
||
}
|
||
|
||
while(Nav.Transition.Transforms.ButtonsContainer.TargetStages.length > 1)
|
||
{
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.shift();
|
||
}
|
||
|
||
while(Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.length > 1)
|
||
{
|
||
Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.shift();
|
||
}
|
||
|
||
while(Nav.Transition.Transforms.RelevantButton.TargetStages.length > 1)
|
||
{
|
||
Nav.Transition.Transforms.RelevantButton.TargetStages.shift();
|
||
}
|
||
}
|
||
|
||
function
|
||
DoTransition()
|
||
{
|
||
if(Nav.Transition.Enabled == false)
|
||
{
|
||
CompressTransitionStages();
|
||
}
|
||
|
||
CopyTransform(Nav.Transition.Transforms.ButtonsTransitionContainer.Initial, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
|
||
CopyTransform(Nav.Transition.Transforms.ButtonsContainer.Initial, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
CopyTransform(Nav.Transition.Transforms.ButtonsContainerClone.Initial, Nav.Transition.Transforms.ButtonsContainerClone.Current);
|
||
CopyTransform(Nav.Transition.Transforms.RelevantButton.Initial, Nav.Transition.Transforms.RelevantButton.Current);
|
||
|
||
Nav.Transition.StartTime = undefined;
|
||
Nav.Transition.RequestedFrame = window.requestAnimationFrame(DoTransitionStage);
|
||
}
|
||
|
||
function
|
||
NodesMatch(A, B)
|
||
{
|
||
var Result = false;
|
||
var i = 0;
|
||
if(A && B)
|
||
{
|
||
Result = true;
|
||
for(; i < A.length && i < B.length && A[i] == B[i];)
|
||
{
|
||
++i;
|
||
}
|
||
if(i != A.length || i != B.length)
|
||
{
|
||
Result = false;
|
||
}
|
||
}
|
||
else if(!A && !B)
|
||
{
|
||
Result = true;
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
ButtonAndLevelMatch(Button, Level)
|
||
{
|
||
var Result = true;
|
||
if(Button && Level)
|
||
{
|
||
var ButtonProjects = Button.Projects;
|
||
var ButtonEntries = Button.Entries;
|
||
if(Button.Projects && Button.Projects.length === undefined)
|
||
{
|
||
ButtonProjects = Button.Projects.querySelectorAll(":scope > .cineraIndexProject");
|
||
ButtonEntries = Button.Projects.querySelectorAll(":scope > .cineraIndexEntries > div");
|
||
if(ButtonProjects.length == 0)
|
||
{
|
||
ButtonProjects = null;
|
||
}
|
||
if(ButtonEntries.length == 0)
|
||
{
|
||
ButtonEntries = null;
|
||
}
|
||
}
|
||
|
||
if(!NodesMatch(Level.Projects, ButtonProjects))
|
||
{
|
||
Result = false;
|
||
}
|
||
|
||
if(!NodesMatch(Level.Entries, ButtonEntries))
|
||
{
|
||
Result = false;
|
||
}
|
||
|
||
if(Button.HeadIndex != Level.HeadIndex)
|
||
{
|
||
Result = false;
|
||
}
|
||
if(Button.TailIndex != Level.TailIndex)
|
||
{
|
||
Result = false;
|
||
}
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
NullTarget()
|
||
{
|
||
let Result = {
|
||
Pos: { X: null, Y: null, }, Scale: { X: null, Y: null, }, Rotation: { X: null, Y: null, Z: null, },
|
||
Opacity: null, ScrollX: null, ZIndex: null,
|
||
};
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
ComputeButtonGeometryRelativeToGrid(Button)
|
||
{
|
||
var Result = {
|
||
Pos: {
|
||
X: null,
|
||
Y: null,
|
||
},
|
||
Scale: {
|
||
X: null,
|
||
Y: null,
|
||
},
|
||
};
|
||
|
||
var ButtonStyle = window.getComputedStyle(Button);
|
||
|
||
var GridDimX = Nav.GridDim.X;
|
||
var GridDimY = Nav.GridDim.Y;
|
||
|
||
var ButtonDimX = parseInt(ButtonStyle.width);
|
||
var ButtonDimY = parseInt(ButtonStyle.height);
|
||
|
||
Result.Scale.X = ButtonDimX / GridDimX;
|
||
Result.Scale.Y = ButtonDimY / GridDimY;
|
||
|
||
var ButtonPosX = Button.offsetLeft;
|
||
var ButtonPosY = Button.offsetTop;
|
||
|
||
if(!Nav.SortChronological)
|
||
{
|
||
ButtonPosX = GridDimX - ButtonPosX - ButtonDimX;
|
||
ButtonPosY = GridDimY - ButtonPosY - ButtonDimY;
|
||
}
|
||
|
||
var ButtonCentreX = ButtonDimX / 2 + ButtonPosX;
|
||
var ButtonCentreY = ButtonDimY / 2 + ButtonPosY;
|
||
|
||
var GridCentreX = GridDimX / 2;
|
||
var GridCentreY = GridDimY / 2;
|
||
|
||
Result.Pos.X = ButtonCentreX - GridCentreX;
|
||
Result.Pos.Y = ButtonCentreY - GridCentreY;
|
||
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
GetItemType(Level)
|
||
{
|
||
var Result = null;
|
||
if(Level.Projects && Level.Projects.length !== undefined && Level.Projects.length > 0)
|
||
{
|
||
Result = item_type.PROJECT;
|
||
}
|
||
else if(Level.Entries && Level.Entries.length !== undefined && Level.Entries.length > 0)
|
||
{
|
||
Result = item_type.ENTRY;
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
GetTraversalLevelBundle()
|
||
{
|
||
var Result = {
|
||
Generation: null,
|
||
This: null,
|
||
Parent: null,
|
||
Type: null
|
||
};
|
||
Result.Generation = Nav.TraversalStack.length;
|
||
Result.This = Nav.TraversalStack[Result.Generation - 1];
|
||
Result.Parent = Nav.TraversalStack[Result.Generation - 2];
|
||
Result.Type = GetItemType(Result.This);
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
FitText(Element, ItemEnd)
|
||
{
|
||
var Paragraph = Element.firstElementChild;
|
||
var ParagraphStyle = window.getComputedStyle(Paragraph);
|
||
var ElementStyle = window.getComputedStyle(Element);
|
||
var Width = parseInt(ElementStyle.width);
|
||
var Height = parseInt(ElementStyle.height);
|
||
|
||
Element.style.alignItems = "flex-start"; // NOTE(matt): Allows IsOverflowed() to work on a flex-end Element
|
||
var FontSize = parseInt(window.getComputedStyle(Element).fontSize);
|
||
while(FontSize >= 10.2 && (IsOverflowed(Element) || parseInt(ParagraphStyle.width) > Width || parseInt(ParagraphStyle.height) > Height))
|
||
{
|
||
FontSize -= 0.2;
|
||
Element.style.fontSize = FontSize + "px";
|
||
}
|
||
|
||
if(IsOverflowed(Element) || parseInt(ParagraphStyle.width) > Width || parseInt(ParagraphStyle.height) > Height)
|
||
{
|
||
Element.style.fontWeight = "normal";
|
||
}
|
||
|
||
var IsHeadOrTailAndTooTallForElement = ItemEnd !== undefined && (Element.scrollHeight > Element.clientHeight || parseInt(ParagraphStyle.height) > Height);
|
||
// NOTE(matt): Leave "flex-start" in place for tall items, to keep their beginning visible
|
||
if(!IsHeadOrTailAndTooTallForElement)
|
||
{
|
||
Element.style.alignItems = null;
|
||
}
|
||
}
|
||
|
||
function
|
||
AppendItemToButton(Button, Text, ItemEnd)
|
||
{
|
||
var ButtonElementStyle = window.getComputedStyle(Button.Element);
|
||
var VerticalBorderAllowance = parseInt(ButtonElementStyle.borderLeftWidth) + parseInt(ButtonElementStyle.borderRightWidth);
|
||
var HorizontalBorderAllowance;
|
||
var ItemElement = document.createElement("div");
|
||
ItemElement.classList.add("cineraText");
|
||
switch(ItemEnd)
|
||
{
|
||
case item_end.HEAD:
|
||
{
|
||
HorizonalBorderAllowance = parseInt(ButtonElementStyle.borderTopWidth);
|
||
ItemElement.classList.add("head-item");
|
||
} break;
|
||
case item_end.TAIL:
|
||
{
|
||
HorizonalBorderAllowance = parseInt(ButtonElementStyle.borderBottomWidth);
|
||
ItemElement.classList.add("tail-item");
|
||
} break;
|
||
}
|
||
|
||
if(!Nav.SortChronological)
|
||
{
|
||
ItemElement.style.transform = "rotate3d(0, 0, 1, 180deg)";
|
||
}
|
||
|
||
var ParagraphNode = document.createElement("p");
|
||
ParagraphNode.textContent = Text;
|
||
ItemElement.appendChild(ParagraphNode);
|
||
var Item = Button.Element.appendChild(ItemElement);
|
||
|
||
// NOTE(matt): This enables Safari to apply height 50% to the head / tail items
|
||
var ButtonWidth = parseInt(ButtonElementStyle.width);
|
||
var ButtonHeight = parseInt(ButtonElementStyle.height);
|
||
SetDim(Button.Element, ButtonWidth + "px", ButtonHeight + "px");
|
||
////
|
||
|
||
FitText(Item, ItemEnd);
|
||
}
|
||
|
||
function
|
||
UpdateButtons(TransitionType, RelevantButton, PoppedLevel)
|
||
{
|
||
if(GridSizeIsSupported(Nav.GridSize))
|
||
{
|
||
var LevelBundle = GetTraversalLevelBundle();
|
||
|
||
Nav.Controls.GridTraversal.Prev.children[0].textContent = "←";
|
||
Nav.Controls.GridTraversal.PrevAscends = false;
|
||
Nav.Controls.GridTraversal.NextAscends = false;
|
||
if(LevelBundle.Generation <= 1)
|
||
{
|
||
Nav.Controls.GridTraversal.Ascend.classList.add("nowhere");
|
||
Nav.Controls.GridTraversal.Prev.classList.add("nowhere");
|
||
Nav.Controls.GridTraversal.Next.classList.add("nowhere");
|
||
Nav.Controls.GridTraversal.Next.classList.remove("ascension");
|
||
}
|
||
else
|
||
{
|
||
Nav.Controls.GridTraversal.Ascend.classList.remove("nowhere");
|
||
Nav.Controls.GridTraversal.Prev.classList.remove("nowhere");
|
||
Nav.Controls.GridTraversal.Next.classList.remove("nowhere");
|
||
|
||
if(!HasPrevSibling(LevelBundle.This))
|
||
{
|
||
Nav.Controls.GridTraversal.Prev.classList.add("nowhere");
|
||
}
|
||
else if(SiblingIsLeaf(siblings.PREV))
|
||
{
|
||
Nav.Controls.GridTraversal.PrevAscends = true;
|
||
Nav.Controls.GridTraversal.Prev.children[0].textContent = Nav.SortChronological ? "↰" : "↲";
|
||
}
|
||
|
||
if(!HasNextSibling(LevelBundle.This))
|
||
{
|
||
Nav.Controls.GridTraversal.Next.classList.add("nowhere");
|
||
Nav.Controls.GridTraversal.Next.classList.remove("ascension");
|
||
}
|
||
else if(SiblingIsLeaf(siblings.NEXT))
|
||
{
|
||
Nav.Controls.GridTraversal.NextAscends = true;
|
||
Nav.Controls.GridTraversal.Next.classList.add("ascension");
|
||
}
|
||
else
|
||
{
|
||
Nav.Controls.GridTraversal.Next.classList.remove("ascension");
|
||
}
|
||
}
|
||
|
||
var Distribution = ComputeItemDistribution(LevelBundle.This);
|
||
|
||
// NOTE(matt): Centre-alignment. If people would prefer left-alignment, we do that here
|
||
//
|
||
// We're doing simple 1D centring here, so would need to do correct 2D centring
|
||
var HalfEmptyButtonCount = (Nav.Buttons.length - (Distribution.ProjectsToPlace + Distribution.EntriesToPlace)) / 2;
|
||
var EmptyPadding = 0;
|
||
//EmptyPadding = Math.floor(HalfEmptyButtonCount); // NOTE(matt): Comment out to disable centring
|
||
//
|
||
|
||
var Prev = null;
|
||
var ButtonInfo = { HeadIndex: null, TailIndex: null, ItemCount: null, Theme: null, };
|
||
var DoingEntries = false;
|
||
|
||
if(TransitionType !== undefined)
|
||
{
|
||
CloneButtonsContainer();
|
||
}
|
||
|
||
for(var ButtonIndex = 0; ButtonIndex < Nav.Buttons.length; ++ButtonIndex)
|
||
{
|
||
let This = Nav.Buttons[ButtonIndex];
|
||
EmptyAndResetButton(This);
|
||
if(EmptyPadding > 0)
|
||
{
|
||
--EmptyPadding;
|
||
}
|
||
else
|
||
{
|
||
if(Distribution.ProjectsToPlace > 0 || Distribution.EntriesToPlace > 0)
|
||
{
|
||
if(Distribution.ProjectsToPlace > 0)
|
||
{
|
||
This.Projects = LevelBundle.This.Projects;
|
||
if(Distribution.ProjectsToPlace == 1 || Distribution.ProjectsToPlace == Distribution.ButtonsForProjects - ButtonIndex)
|
||
{
|
||
Distribution.FullButtonProjectCount = 1;
|
||
}
|
||
|
||
ButtonInfo = SetButtonInfo(This, Prev, LevelBundle.This, Distribution);
|
||
if(ButtonInfo.ItemCount == 1)
|
||
{
|
||
This.Projects = LevelBundle.This.Projects[ButtonInfo.HeadIndex];
|
||
}
|
||
Distribution.ProjectsToPlace -= ButtonInfo.ItemCount;
|
||
|
||
if(Distribution.FullButtonProjectCount == 1)
|
||
{
|
||
This.Element.classList.add("leaf");
|
||
var TextElement = document.createElement("p");
|
||
TextElement.classList.add("cineraText");
|
||
if(!Nav.SortChronological)
|
||
{
|
||
TextElement.style.transform = "rotate3d(0, 0, 1, 180deg)";
|
||
}
|
||
var Text = LevelBundle.This.Projects[ButtonInfo.HeadIndex].querySelector(".cineraProjectTitle").innerText;
|
||
var TextNode = document.createTextNode(Text);
|
||
TextElement.appendChild(TextNode);
|
||
This.Element.appendChild(TextElement);
|
||
FitText(This.Element);
|
||
}
|
||
else
|
||
{
|
||
var HeadText = LevelBundle.This.Projects[ButtonInfo.HeadIndex].querySelector(".cineraProjectTitle").innerText;
|
||
AppendItemToButton(This, HeadText, item_end.HEAD);
|
||
|
||
var TailText = LevelBundle.This.Projects[ButtonInfo.TailIndex].querySelector(".cineraProjectTitle").innerText;
|
||
AppendItemToButton(This, TailText, item_end.TAIL);
|
||
}
|
||
}
|
||
else
|
||
{
|
||
This.Entries = LevelBundle.This.Entries;
|
||
if(!DoingEntries)
|
||
{
|
||
Prev = null;
|
||
DoingEntries = true;
|
||
}
|
||
|
||
if(Distribution.EntriesToPlace == 1 || Distribution.EntriesToPlace == Distribution.ButtonsForEntries - ButtonIndex)
|
||
{
|
||
Distribution.FullButtonEntryCount = 1;
|
||
}
|
||
|
||
ButtonInfo = SetButtonInfo(This, Prev, LevelBundle.This, Distribution);
|
||
if(ButtonInfo.ItemCount == 1)
|
||
{
|
||
This.Entries = This.Entries[ButtonInfo.HeadIndex];
|
||
}
|
||
Distribution.EntriesToPlace -= ButtonInfo.ItemCount;
|
||
|
||
if(Distribution.FullButtonEntryCount == 1)
|
||
{
|
||
This.Element.classList.add("leaf");
|
||
var ButtonLink = document.createElement("a");
|
||
ButtonLink.classList.add("cineraText");
|
||
if(!Nav.SortChronological)
|
||
{
|
||
ButtonLink.style.transform = "rotate3d(0, 0, 1, 180deg)";
|
||
}
|
||
var EntryAddress = LevelBundle.This.Entries[ButtonInfo.HeadIndex].lastElementChild.getAttribute("href");
|
||
ButtonLink.setAttribute("href", EntryAddress);
|
||
var Text = LevelBundle.This.Entries[ButtonInfo.HeadIndex].innerText;
|
||
var TextNode = document.createTextNode(Text);
|
||
ButtonLink.appendChild(TextNode);
|
||
|
||
This.Element.appendChild(ButtonLink);
|
||
FitText(This.Element);
|
||
}
|
||
else
|
||
{
|
||
var HeadText = LevelBundle.This.Entries[ButtonInfo.HeadIndex].innerText;
|
||
AppendItemToButton(This, HeadText, item_end.HEAD);
|
||
|
||
var TailText = LevelBundle.This.Entries[ButtonInfo.TailIndex].innerText;
|
||
AppendItemToButton(This, TailText, item_end.TAIL);
|
||
}
|
||
}
|
||
|
||
This.Element.classList.add(ButtonInfo.Theme);
|
||
Prev = ButtonInfo;
|
||
}
|
||
else
|
||
{
|
||
This.Element.classList.add(Nav.Nexus.classList[0]);
|
||
}
|
||
}
|
||
if(PoppedLevel && !Nav.Transition.RelevantButtonElement && ButtonAndLevelMatch(This, PoppedLevel))
|
||
{
|
||
Nav.Transition.RelevantButtonElement = This.Element;
|
||
}
|
||
}
|
||
if(TransitionType !== undefined)
|
||
{
|
||
switch(TransitionType)
|
||
{
|
||
case transition_type.SIBLING_SHIFT_PREV:
|
||
{
|
||
// Init targets
|
||
//// ButtonsTransitionContainer
|
||
let TargetA0 = NullTarget();
|
||
var Padding = Nav.GridColumnGap;
|
||
if(Nav.SortChronological)
|
||
{
|
||
TargetA0.ScrollX = 0;
|
||
}
|
||
else
|
||
{
|
||
TargetA0.ScrollX = Nav.GridDim.X + Padding;
|
||
}
|
||
|
||
Nav.Transition.StageDurations.push(320);
|
||
Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.push(TargetA0);
|
||
|
||
// Prep
|
||
Nav.Transition.ButtonsContainerCloneElement.style.position = "relative";
|
||
|
||
var ScrollX;
|
||
if(Nav.SortChronological)
|
||
{
|
||
Nav.ButtonsContainer.style.order = 0;
|
||
Nav.Transition.ButtonsContainerCloneElement.style.order = 1;
|
||
ScrollX = Nav.GridDim.X + Padding;
|
||
}
|
||
else
|
||
{
|
||
Nav.ButtonsContainer.style.order = 1;
|
||
Nav.Transition.ButtonsContainerCloneElement.style.order = 0;
|
||
ScrollX = 0;
|
||
}
|
||
|
||
Nav.Transition.ButtonsContainerCloneElement.style.paddingLeft = Padding + "px";
|
||
|
||
Nav.Transition.Transforms.ButtonsTransitionContainer.Current.ScrollX = ScrollX;
|
||
ApplyTransform(Nav.Transition.ButtonsTransitionContainerElement, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
|
||
} break;
|
||
case transition_type.SIBLING_SHIFT_NEXT:
|
||
{
|
||
// Init targets
|
||
////
|
||
let TargetA0 = NullTarget();
|
||
var Padding = Nav.GridColumnGap;
|
||
if(Nav.SortChronological)
|
||
{
|
||
TargetA0.ScrollX = Nav.GridDim.X + Padding;
|
||
}
|
||
else
|
||
{
|
||
TargetA0.ScrollX = 0;
|
||
}
|
||
|
||
Nav.Transition.StageDurations.push(320);
|
||
Nav.Transition.Transforms.ButtonsTransitionContainer.TargetStages.push(TargetA0);
|
||
|
||
// Prep
|
||
Nav.Transition.ButtonsContainerCloneElement.style.position = "relative";
|
||
|
||
var ScrollX;
|
||
|
||
if(Nav.SortChronological)
|
||
{
|
||
Nav.ButtonsContainer.style.order = 1;
|
||
Nav.Transition.ButtonsContainerCloneElement.style.order = 0;
|
||
ScrollX = 0;
|
||
}
|
||
else
|
||
{
|
||
Nav.ButtonsContainer.style.order = 0;
|
||
Nav.Transition.ButtonsContainerCloneElement.style.order = 1;
|
||
ScrollX = Nav.GridDim.X + Padding;
|
||
}
|
||
|
||
Nav.Transition.ButtonsContainerCloneElement.style.paddingRight = Padding + "px";
|
||
|
||
Nav.Transition.Transforms.ButtonsTransitionContainer.Current.ScrollX = ScrollX;
|
||
ApplyTransform(Nav.Transition.ButtonsTransitionContainerElement, Nav.Transition.Transforms.ButtonsTransitionContainer.Current);
|
||
} break;
|
||
case transition_type.PROJECT_ENTRY:
|
||
{
|
||
// Init targets
|
||
//// ButtonsContainer
|
||
let TargetA0 = NullTarget();
|
||
let TargetA1 = NullTarget();
|
||
let TargetA2 = NullTarget();
|
||
let TargetA3 = NullTarget();
|
||
|
||
if(Nav.SortChronological)
|
||
{
|
||
TargetA0.Rotation.Y = 90;
|
||
}
|
||
else
|
||
{
|
||
TargetA0.Rotation.Y = -90;
|
||
}
|
||
TargetA1.ZIndex = 1;
|
||
TargetA2.Rotation.Y = 0;
|
||
TargetA3.Pos.X = 0;
|
||
TargetA3.Pos.Y = 0;
|
||
TargetA3.Scale.X = 1;
|
||
TargetA3.Scale.Y = 1;
|
||
|
||
//// RelevantButton
|
||
let TargetB0 = NullTarget();
|
||
let TargetB1 = NullTarget();
|
||
let TargetB2 = NullTarget();
|
||
|
||
if(Nav.SortChronological)
|
||
{
|
||
TargetB0.Rotation.Y = -90;
|
||
TargetB2.Rotation.Y = -180;
|
||
}
|
||
else
|
||
{
|
||
TargetB0.Rotation.Y = 90;
|
||
TargetB2.Rotation.Y = 180;
|
||
}
|
||
|
||
//// ButtonsContainerClone
|
||
let TargetC0 = NullTarget();
|
||
let TargetC1 = NullTarget();
|
||
|
||
TargetC1.ZIndex = 0;
|
||
|
||
|
||
Nav.Transition.StageDurations.push(80);
|
||
Nav.Transition.StageDurations.push(0);
|
||
Nav.Transition.StageDurations.push(80);
|
||
Nav.Transition.StageDurations.push(160);
|
||
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA0);
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA1);
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA2);
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA3);
|
||
Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB0);
|
||
Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB1);
|
||
Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB2);
|
||
Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC0);
|
||
Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC1);
|
||
|
||
// Prep
|
||
var RelevantButtonIndex = GetIndexOfButton(RelevantButton);
|
||
Nav.Transition.RelevantButtonElement = Nav.Transition.ButtonsContainerCloneElement.children[RelevantButtonIndex];
|
||
|
||
var ButtonGeometry = ComputeButtonGeometryRelativeToGrid(Nav.Transition.RelevantButtonElement);
|
||
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Pos.X = ButtonGeometry.Pos.X;
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Pos.Y = ButtonGeometry.Pos.Y;
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Scale.X = ButtonGeometry.Scale.X;
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Scale.Y = ButtonGeometry.Scale.Y;
|
||
if(Nav.SortChronological)
|
||
{
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Rotation.Y = 180;
|
||
}
|
||
else
|
||
{
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Rotation.Y = -180;
|
||
}
|
||
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.ZIndex = 0;
|
||
|
||
Nav.Transition.Transforms.ButtonsContainerClone.Current.ZIndex = 1;
|
||
|
||
ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
|
||
ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
} break;
|
||
case transition_type.PROJECT_EXIT:
|
||
{
|
||
// Init targets
|
||
//// ButtonsContainer
|
||
let TargetA0 = NullTarget();
|
||
let TargetA1 = NullTarget();
|
||
let TargetA2 = NullTarget();
|
||
TargetA2.ZIndex = 1;
|
||
|
||
//// RelevantButton
|
||
let TargetB0 = NullTarget();
|
||
let TargetB1 = NullTarget();
|
||
let TargetB2 = NullTarget();
|
||
let TargetB3 = NullTarget();
|
||
|
||
if(Nav.SortChronological)
|
||
{
|
||
TargetB1.Rotation.Y = -90;
|
||
}
|
||
else
|
||
{
|
||
TargetB1.Rotation.Y = 90;
|
||
}
|
||
TargetB3.Rotation.Y = 0;
|
||
|
||
//// ButtonsContainerClone
|
||
let TargetC0 = NullTarget();
|
||
let TargetC1 = NullTarget();
|
||
let TargetC2 = NullTarget();
|
||
let TargetC3 = NullTarget();
|
||
|
||
var ButtonGeometry = ComputeButtonGeometryRelativeToGrid(Nav.Transition.RelevantButtonElement);
|
||
TargetC0.Pos.X = ButtonGeometry.Pos.X;
|
||
TargetC0.Pos.Y = ButtonGeometry.Pos.Y;
|
||
TargetC0.Scale.X = ButtonGeometry.Scale.X;
|
||
TargetC0.Scale.Y = ButtonGeometry.Scale.Y;
|
||
if(Nav.SortChronological)
|
||
{
|
||
TargetC1.Rotation.Y = 90;
|
||
TargetC3.Rotation.Y = 180;
|
||
}
|
||
else
|
||
{
|
||
TargetC1.Rotation.Y = -90;
|
||
TargetC3.Rotation.Y = -180;
|
||
}
|
||
TargetC2.ZIndex = 0;
|
||
|
||
|
||
Nav.Transition.StageDurations.push(160);
|
||
Nav.Transition.StageDurations.push(80);
|
||
Nav.Transition.StageDurations.push(0);
|
||
Nav.Transition.StageDurations.push(80);
|
||
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA0);
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA1);
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA2);
|
||
Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB0);
|
||
Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB1);
|
||
Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB2);
|
||
Nav.Transition.Transforms.RelevantButton.TargetStages.push(TargetB3);
|
||
Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC0);
|
||
Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC1);
|
||
Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC2);
|
||
Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC3);
|
||
|
||
// Prep
|
||
if(Nav.SortChronological)
|
||
{
|
||
Nav.Transition.Transforms.RelevantButton.Current.Rotation.Y = -180;
|
||
}
|
||
else
|
||
{
|
||
Nav.Transition.Transforms.RelevantButton.Current.Rotation.Y = 180;
|
||
}
|
||
ApplyTransform(Nav.Transition.RelevantButtonElement, Nav.Transition.Transforms.RelevantButton.Current);
|
||
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.ZIndex = 0;
|
||
ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
|
||
Nav.Transition.Transforms.ButtonsContainerClone.Current.ZIndex = 1;
|
||
ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
|
||
} break;
|
||
case transition_type.SUBDIVISION_DESCENT:
|
||
{
|
||
// Init targets
|
||
//// ButtonsContainer
|
||
let TargetA0 = NullTarget();
|
||
let TargetA1 = NullTarget();
|
||
|
||
TargetA0.Opacity = 1;
|
||
TargetA1.Pos.X = 0;
|
||
TargetA1.Pos.Y = 0;
|
||
TargetA1.Scale.X = 1;
|
||
TargetA1.Scale.Y = 1;
|
||
|
||
Nav.Transition.StageDurations.push(160);
|
||
Nav.Transition.StageDurations.push(160);
|
||
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA0);
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA1);
|
||
|
||
// Prep
|
||
var RelevantButtonIndex = GetIndexOfButton(RelevantButton);
|
||
Nav.Transition.RelevantButtonElement = Nav.Transition.ButtonsContainerCloneElement.children[RelevantButtonIndex];
|
||
|
||
var ButtonGeometry = ComputeButtonGeometryRelativeToGrid(Nav.Transition.RelevantButtonElement);
|
||
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Pos.X = ButtonGeometry.Pos.X;
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Pos.Y = ButtonGeometry.Pos.Y;
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Scale.X = ButtonGeometry.Scale.X;
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Scale.Y = ButtonGeometry.Scale.Y;
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.Opacity = 0;
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.ZIndex = 1;
|
||
|
||
Nav.Transition.Transforms.ButtonsContainerClone.Current.ZIndex = 0;
|
||
|
||
ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
|
||
ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
} break;
|
||
case transition_type.SUBDIVISION_ASCENT:
|
||
{
|
||
// Init targets
|
||
//// ButtonsContainer
|
||
let TargetA0 = NullTarget();
|
||
let TargetA1 = NullTarget();
|
||
let TargetA2 = NullTarget();
|
||
TargetA2.ZIndex = 1;
|
||
|
||
//// ButtonsContainerClone
|
||
let TargetC0 = NullTarget();
|
||
let TargetC1 = NullTarget();
|
||
let TargetC2 = NullTarget();
|
||
|
||
var ButtonGeometry = ComputeButtonGeometryRelativeToGrid(Nav.Transition.RelevantButtonElement);
|
||
TargetC0.Pos.X = ButtonGeometry.Pos.X;
|
||
TargetC0.Pos.Y = ButtonGeometry.Pos.Y;
|
||
TargetC0.Scale.X = ButtonGeometry.Scale.X;
|
||
TargetC0.Scale.Y = ButtonGeometry.Scale.Y;
|
||
TargetC1.Opacity = 0;
|
||
TargetC2.ZIndex = 0;
|
||
|
||
|
||
Nav.Transition.StageDurations.push(160);
|
||
Nav.Transition.StageDurations.push(160);
|
||
Nav.Transition.StageDurations.push(0);
|
||
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA0);
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA1);
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(TargetA2);
|
||
Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC0);
|
||
Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC1);
|
||
Nav.Transition.Transforms.ButtonsContainerClone.TargetStages.push(TargetC2);
|
||
|
||
// Prep
|
||
Nav.Transition.Transforms.ButtonsContainer.Current.ZIndex = 0;
|
||
Nav.Transition.Transforms.ButtonsContainerClone.Current.ZIndex = 1;
|
||
ApplyTransform(Nav.Transition.ButtonsContainerCloneElement, Nav.Transition.Transforms.ButtonsContainerClone.Current);
|
||
ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
} break;
|
||
}
|
||
DoTransition();
|
||
}
|
||
}
|
||
}
|
||
|
||
function
|
||
PushButton(ButtonElement, Button)
|
||
{
|
||
var Level = {
|
||
Projects: Button.Projects,
|
||
Entries: Button.Entries,
|
||
HeadIndex: Button.HeadIndex,
|
||
TailIndex: Button.TailIndex,
|
||
};
|
||
|
||
var TransitionType = undefined;
|
||
if(Level.Projects !== null || Level.Entries !== null)
|
||
{
|
||
if(Level.Projects !== null)
|
||
{
|
||
if(Level.Projects.length === undefined)
|
||
{
|
||
var Entries = Level.Projects.querySelectorAll(":scope > .cineraIndexEntries > div");
|
||
var Projects = Level.Projects.querySelectorAll(":scope > .cineraIndexProject");
|
||
Level.Entries = Entries.length ? Entries : null;
|
||
Level.Projects = Projects.length ? Projects : null;
|
||
TransitionType = transition_type.PROJECT_ENTRY;
|
||
}
|
||
else
|
||
{
|
||
TransitionType = transition_type.SUBDIVISION_DESCENT;
|
||
}
|
||
Nav.TraversalStack.push(Level);
|
||
UpdateButtons(TransitionType, Button);
|
||
}
|
||
else
|
||
{
|
||
if(Level.Entries.length === undefined)
|
||
{
|
||
var Address = ButtonElement.lastElementChild.getAttribute("href");
|
||
location = Address;
|
||
}
|
||
else
|
||
{
|
||
Nav.TraversalStack.push(Level);
|
||
TransitionType = transition_type.SUBDIVISION_DESCENT;
|
||
UpdateButtons(TransitionType, Button);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function
|
||
RangeContains(Range, Target)
|
||
{
|
||
return (Range.HeadIndex == null && Range.TailIndex == null) || (Range.HeadIndex <= Target && Range.TailIndex >= Target);
|
||
}
|
||
|
||
function
|
||
LengthOf(Level)
|
||
{
|
||
var Result = 0;
|
||
var Items = Level.Projects && Level.Projects.length > 0 ? Level.Projects : Level.Entries;
|
||
if(Items)
|
||
{
|
||
if(Level.HeadIndex !== null && Level.TailIndex !== null)
|
||
{
|
||
Result = Diff(Level.HeadIndex, Level.TailIndex) + 1;
|
||
}
|
||
else if(Items.length !== undefined)
|
||
{
|
||
Result = Items.length;
|
||
}
|
||
else
|
||
{
|
||
Result = 1;
|
||
}
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
DereferenceLevel(Generation)
|
||
{
|
||
var Level = Nav.TraversalStack[Generation - 1];
|
||
var Result = {
|
||
Projects: Level.Projects,
|
||
Entries: Level.Entries,
|
||
HeadIndex: Level.HeadIndex,
|
||
TailIndex: Level.TailIndex,
|
||
};
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
GetSubdivisionFor(LevelBundle, Index, TargetGeneration)
|
||
{
|
||
var Result = {
|
||
Projects: LevelBundle.This.Projects,
|
||
Entries: LevelBundle.This.Entries,
|
||
HeadIndex: null,
|
||
TailIndex: null,
|
||
};
|
||
|
||
var GenerationsToDistribute = 1;
|
||
var Generation = TargetGeneration ? TargetGeneration : LevelBundle.Generation;
|
||
var Parent = DereferenceLevel(Generation - GenerationsToDistribute);
|
||
while(!RangeContains(Parent, Index))
|
||
{
|
||
++GenerationsToDistribute;
|
||
Parent = DereferenceLevel(Generation - GenerationsToDistribute);
|
||
}
|
||
|
||
while(GenerationsToDistribute > 0)
|
||
{
|
||
var Distribution = ComputeItemDistribution(Parent);
|
||
|
||
var ToPlace = null;
|
||
var FullButtonItemCount = null;
|
||
var ButtonCount = null;
|
||
if(LevelBundle.Type == item_type.PROJECT)
|
||
{
|
||
ToPlace = Distribution.ProjectsToPlace;
|
||
FullButtonItemCount = Distribution.FullButtonProjectCount;
|
||
ButtonCount = Distribution.ButtonsForProjects;
|
||
}
|
||
else if(LevelBundle.Type = item_type.ENTRY)
|
||
{
|
||
ToPlace = Distribution.EntriesToPlace;
|
||
FullButtonItemCount = Distribution.FullButtonEntryCount;
|
||
ButtonCount = Distribution.ButtonsForEntries;
|
||
}
|
||
|
||
Result.HeadIndex = null;
|
||
Result.TailIndex = null;
|
||
for(var i = 0; i < ButtonCount; ++i)
|
||
{
|
||
if(ToPlace == ButtonCount - i) { FullButtonItemCount = 1; }
|
||
Result.HeadIndex = Result.TailIndex !== null ? Result.TailIndex + 1 : Parent.HeadIndex !== null ? Parent.HeadIndex : 0;
|
||
Result.TailIndex = Result.HeadIndex + Math.min(FullButtonItemCount, ToPlace) - 1;
|
||
if(RangeContains(Result, Index)) { break; }
|
||
ToPlace -= LengthOf(Result);
|
||
}
|
||
--GenerationsToDistribute;
|
||
Parent.HeadIndex = Result.HeadIndex;
|
||
Parent.TailIndex = Result.TailIndex;
|
||
}
|
||
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
SiblingIsLeaf(SiblingID)
|
||
{
|
||
var LevelBundle = GetTraversalLevelBundle();
|
||
return LengthOf(GetSubdivisionFor(LevelBundle,
|
||
SiblingID == siblings.PREV ? LevelBundle.This.HeadIndex - 1 : LevelBundle.This.TailIndex + 1)) == 1;
|
||
}
|
||
|
||
function
|
||
ShiftToSibling(SiblingID)
|
||
{
|
||
var LevelBundle = GetTraversalLevelBundle();
|
||
|
||
if((SiblingID == siblings.PREV && HasPrevSibling(LevelBundle.This)) ||
|
||
(SiblingID == siblings.NEXT && HasNextSibling(LevelBundle.This)))
|
||
{
|
||
var TransitionType = SiblingID == siblings.PREV ? transition_type.SIBLING_SHIFT_PREV : transition_type.SIBLING_SHIFT_NEXT;
|
||
var CurrentItem = LevelBundle.Type == item_type.PROJECT ? LevelBundle.This.Projects : LevelBundle.This.Entries;
|
||
|
||
var TargetIndex = SiblingID == siblings.PREV ? LevelBundle.This.HeadIndex - 1 : LevelBundle.This.TailIndex + 1;
|
||
LevelBundle.Parent = Nav.TraversalStack[0];
|
||
var TransitionLevel;
|
||
for(let i = 0; i < LevelBundle.Generation; ++i)
|
||
{
|
||
LevelBundle.This = Nav.TraversalStack[i];
|
||
|
||
if((LevelBundle.Type == item_type.PROJECT && CurrentItem == LevelBundle.Parent.Projects) ||
|
||
(LevelBundle.Type == item_type.ENTRY && CurrentItem == LevelBundle.Parent.Entries))
|
||
{
|
||
if(!RangeContains(LevelBundle.This, TargetIndex))
|
||
{
|
||
Nav.TraversalStack[i] = GetSubdivisionFor(LevelBundle, TargetIndex, i + 1);
|
||
if(LengthOf(Nav.TraversalStack[i]) == 1)
|
||
{
|
||
TransitionType = transition_type.SUBDIVISION_ASCENT;
|
||
TransitionLevel = LevelBundle.This;
|
||
Nav.TraversalStack.pop();
|
||
}
|
||
}
|
||
}
|
||
LevelBundle.Parent = Nav.TraversalStack[i];
|
||
}
|
||
UpdateButtons(TransitionType, undefined, TransitionLevel);
|
||
}
|
||
else
|
||
{
|
||
DequeueInteraction();
|
||
}
|
||
}
|
||
|
||
function
|
||
Ascend()
|
||
{
|
||
var LevelBundle = GetTraversalLevelBundle();
|
||
if(LevelBundle.Generation > 1)
|
||
{
|
||
var TransitionType = LevelBundle.This.HeadIndex !== null && LevelBundle.This.TailIndex !== null ? transition_type.SUBDIVISION_ASCENT : transition_type.PROJECT_EXIT;
|
||
var PoppedLevel = Nav.TraversalStack.pop();
|
||
UpdateButtons(TransitionType, undefined, PoppedLevel);
|
||
}
|
||
}
|
||
|
||
function
|
||
ShiftToPrevSibling()
|
||
{
|
||
var LevelBundle = GetTraversalLevelBundle();
|
||
if(LevelBundle.Generation > 1)
|
||
{
|
||
if(Nav.Controls.GridTraversal.PrevAscends == true)
|
||
{
|
||
Ascend();
|
||
}
|
||
}
|
||
ShiftToSibling(siblings.PREV);
|
||
}
|
||
|
||
function
|
||
ShiftToNextSibling()
|
||
{
|
||
ShiftToSibling(siblings.NEXT);
|
||
}
|
||
|
||
function
|
||
InputIsFocused()
|
||
{
|
||
return document.activeElement == Search.QueryElement;
|
||
}
|
||
|
||
function
|
||
ShouldFireGridEvents()
|
||
{
|
||
return Nav.ViewType == view_type.GRID && !InputIsFocused() && !IsQuery();
|
||
}
|
||
|
||
function
|
||
ModifyControlKeybinding(Event)
|
||
{
|
||
// TODO(matt): Settle on the final sets of bindings
|
||
var Chron = Nav.SortChronological;
|
||
var Key = Event.key;
|
||
var IT = interaction_type.PUSH_BUTTON;
|
||
var ID = { Element: null, Button: null, }; // NOTE(matt): InteractionData
|
||
|
||
switch(Key)
|
||
{
|
||
case "?": if(!InputIsFocused()) { Nav.Controls.HelpDocumentation.classList.toggle("visible"); } break;
|
||
case "t": if(!InputIsFocused()) { EnqueueInteraction(interaction_type.SORT); } break;
|
||
case "y": if(!InputIsFocused()) { ToggleView(); } break;
|
||
case "m": if(!InputIsFocused()) { ToggleAnimations(); } break;
|
||
case "h": if(ShouldFireGridEvents()) { EnqueueInteraction(Chron ? interaction_type.SIBLING_SHIFT_PREV : interaction_type.SIBLING_SHIFT_NEXT); } break;
|
||
case "k": if(ShouldFireGridEvents()) { EnqueueInteraction(interaction_type.ASCEND); } break;
|
||
case "l": if(ShouldFireGridEvents()) { EnqueueInteraction(Chron ? interaction_type.SIBLING_SHIFT_NEXT : interaction_type.SIBLING_SHIFT_PREV); } break;
|
||
}
|
||
}
|
||
|
||
function
|
||
BindControlKeys()
|
||
{
|
||
document.addEventListener("keydown", ModifyControlKeybinding);
|
||
}
|
||
|
||
function
|
||
UnbindControlKeys()
|
||
{
|
||
document.removeEventListener("keydown", ModifyControlKeybinding);
|
||
}
|
||
|
||
function
|
||
RebindControlKeys()
|
||
{
|
||
UnbindControlKeys();
|
||
BindControlKeys();
|
||
}
|
||
|
||
function
|
||
KeyIsInGrid(GridSize, KeyPos)
|
||
{
|
||
return GridSize.X > KeyPos.X && GridSize.Y > KeyPos.Y;
|
||
}
|
||
|
||
function
|
||
ComputeNaturalKeyIndex(GridSize, KeyPos)
|
||
{
|
||
return KeyPos.Y * GridSize.X + KeyPos.X;
|
||
}
|
||
|
||
function
|
||
EnqueueGridInteraction(GridSize, KeyPos)
|
||
{
|
||
var Chron = Nav.SortChronological;
|
||
var LastButtonIndex = Nav.Buttons.length - 1;
|
||
var NaturalIndex = ComputeNaturalKeyIndex(GridSize, KeyPos);
|
||
var IT = interaction_type.PUSH_BUTTON;
|
||
var ID = { Element: null, Button: null, }; // NOTE(matt): InteractionData
|
||
ID.Element = Nav.Buttons[Chron ? NaturalIndex : LastButtonIndex - NaturalIndex].Element;
|
||
ID.Button = Nav.Buttons[Chron ? NaturalIndex : LastButtonIndex - NaturalIndex];
|
||
EnqueueInteraction(IT, ID);
|
||
}
|
||
|
||
function
|
||
Get2DPosFromIndex(Layout, Index)
|
||
{
|
||
var Result = {
|
||
X: null,
|
||
Y: null,
|
||
};
|
||
|
||
Result.X = Index % Layout.X;
|
||
Result.Y = (Index - Result.X) / Layout.Y;
|
||
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
ModifyGridKeybinding(Event)
|
||
{
|
||
var Key = Event.key;
|
||
// TODO(matt): With this, we could probably easily add a setting for keyboard layout: e.g. Dvorak
|
||
var PhysicalKeys = [
|
||
"1", "2", "3", "4",
|
||
"q", "w", "e", "r",
|
||
"a", "s", "d", "f",
|
||
"z", "x", "c", "v"
|
||
];
|
||
|
||
var KeyLayout = { X: 4, Y: 4 };
|
||
for(var i = 0; i < PhysicalKeys.length; ++i)
|
||
{
|
||
if(Key == PhysicalKeys[i])
|
||
{
|
||
var KeyPos = Get2DPosFromIndex(KeyLayout, i);
|
||
if(KeyIsInGrid(Nav.GridSize, KeyPos) && ShouldFireGridEvents())
|
||
{
|
||
EnqueueGridInteraction(Nav.GridSize, KeyPos);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function
|
||
BindGridKeys()
|
||
{
|
||
document.addEventListener("keydown", ModifyGridKeybinding);
|
||
}
|
||
|
||
function
|
||
UnbindGridKeys()
|
||
{
|
||
document.removeEventListener("keydown", ModifyGridKeybinding);
|
||
}
|
||
|
||
function
|
||
DoRotationStage(Now)
|
||
{
|
||
if(Nav.Transition.StageDurations.length)
|
||
{
|
||
if(Nav.Transition.StartTime === undefined)
|
||
{
|
||
Nav.Transition.StartTime = Now;
|
||
}
|
||
|
||
var Elapsed = Now - Nav.Transition.StartTime;
|
||
var Duration = Nav.Transition.StageDurations[0];
|
||
|
||
if(Duration === 0)
|
||
{
|
||
if(Nav.Transition.Transforms.ButtonsContainer.TargetStages.length)
|
||
{
|
||
MergeTransform(Nav.Transition.Transforms.ButtonsContainer.Current, Nav.Transition.Transforms.ButtonsContainer.TargetStages[0]);
|
||
ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
}
|
||
}
|
||
else
|
||
{
|
||
var t = Clamp01(Elapsed / Duration);
|
||
if(LerpTransforms(Nav.Transition.Transforms.ButtonsContainer, t))
|
||
{
|
||
ApplyTransform(Nav.ButtonsContainer, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
}
|
||
}
|
||
|
||
for(var i = 0; i < Nav.ButtonsContainer.children.length; ++i)
|
||
{
|
||
var This = Nav.ButtonsContainer.children[i];
|
||
var ThisTexts = This.querySelectorAll(".cineraText");
|
||
for(var j = 0; j < ThisTexts.length; ++j)
|
||
{
|
||
ThisTexts[j].style.transform = "rotate3d(0, 0, 1, " + -Nav.Transition.Transforms.ButtonsContainer.Current.Rotation.Z + "deg)";
|
||
}
|
||
}
|
||
|
||
if(TransformsComplete(Nav.Transition.Transforms))
|
||
{
|
||
FinaliseTransforms(Nav.Transition.Transforms);
|
||
}
|
||
Nav.Transition.RequestedFrame = window.requestAnimationFrame(DoRotationStage);
|
||
}
|
||
else
|
||
{
|
||
Nav.Transition.RequestedFrame = undefined;
|
||
ResetButtonsContainerClone();
|
||
DequeueInteraction();
|
||
Nav.Controls.Header.style.overflow = null;
|
||
}
|
||
}
|
||
|
||
function
|
||
RotateButtons(Initialising)
|
||
{
|
||
// TODO(matt): Consider pushing this through DoTransition(), aware that it'd need to transform ".cineraText" children
|
||
CopyTransform(Nav.Transition.Transforms.ButtonsContainer.Initial, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
Nav.Transition.StartTime = undefined;
|
||
if(!Initialising && Nav.Transition.Enabled)
|
||
{
|
||
Nav.Transition.StageDurations.push(320);
|
||
}
|
||
else
|
||
{
|
||
Nav.Transition.StageDurations.push(0);
|
||
}
|
||
|
||
let Target = NullTarget();
|
||
if(Nav.SortChronological)
|
||
{
|
||
Target.Rotation.Z = 0;
|
||
}
|
||
else
|
||
{
|
||
Target.Rotation.Z = 180;
|
||
}
|
||
Nav.Transition.Transforms.ButtonsContainer.TargetStages.push(Target);
|
||
|
||
CopyTransform(Nav.Transition.Transforms.ButtonsContainer.Initial, Nav.Transition.Transforms.ButtonsContainer.Current);
|
||
Nav.Transition.RequestedFrame = window.requestAnimationFrame(DoRotationStage);
|
||
}
|
||
|
||
function
|
||
AddAnimationClass()
|
||
{
|
||
Nav.Nexus.classList.add("anim");
|
||
}
|
||
|
||
function
|
||
Sort(Initialising)
|
||
{
|
||
ResetButtonsContainerClone();
|
||
|
||
if(Initialising && Nav.Transition.Enabled) { Nav.Nexus.classList.remove("anim"); }
|
||
if(Nav.SortChronological)
|
||
{
|
||
Nav.Controls.Sort.textContent = "Sort: New to Old ⏷";
|
||
Nav.Nexus.classList.add("reversed");
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
if(Search.Projects[i].entriesContainer)
|
||
{
|
||
Search.Projects[i].entriesContainer.style.flexFlow = "column-reverse";
|
||
}
|
||
}
|
||
}
|
||
else
|
||
{
|
||
Nav.Controls.Sort.textContent = "Sort: Old to New ⏶";
|
||
Nav.Nexus.classList.remove("reversed");
|
||
for(var i = 0; i < Search.Projects.length; ++i)
|
||
{
|
||
if(Search.Projects[i].entriesContainer)
|
||
{
|
||
Search.Projects[i].entriesContainer.style.flexFlow = "column";
|
||
}
|
||
}
|
||
}
|
||
if(Initialising && Nav.Transition.Enabled) { setTimeout(AddAnimationClass, 320); }
|
||
|
||
UnbindGridKeys(Nav.GridSize);
|
||
Nav.SortChronological = !Nav.SortChronological;
|
||
if(Nav.Controls.GridTraversal.PrevAscends)
|
||
{
|
||
if(Nav.SortChronological)
|
||
{
|
||
Nav.Controls.GridTraversal.Prev.children[0].textContent = "↰";
|
||
}
|
||
else
|
||
{
|
||
Nav.Controls.GridTraversal.Prev.children[0].textContent = "↲";
|
||
}
|
||
}
|
||
|
||
if(MaintainingState())
|
||
{
|
||
if(Nav.SortChronological) { ClearStateBit(state_bit.SORT_REVERSED); }
|
||
else { SetStateBit(state_bit.SORT_REVERSED); }
|
||
}
|
||
RotateButtons(Initialising);
|
||
BindGridKeys();
|
||
runSearch(true);
|
||
}
|
||
|
||
function
|
||
DequeueInteraction()
|
||
{
|
||
if(Nav.InteractionQueue.length)
|
||
{
|
||
var I = Nav.InteractionQueue.shift();
|
||
|
||
switch(I.Type)
|
||
{
|
||
case interaction_type.PUSH_BUTTON: { PushButton(I.Data.Element, I.Data.Button); } break;
|
||
case interaction_type.SIBLING_SHIFT_PREV: { ShiftToPrevSibling(); } break;
|
||
case interaction_type.SIBLING_SHIFT_NEXT: { ShiftToNextSibling(); } break;
|
||
case interaction_type.ASCEND: { Ascend(); } break;
|
||
case interaction_type.SORT: { Sort(); } break;
|
||
}
|
||
}
|
||
}
|
||
|
||
function
|
||
EnqueueInteraction(InteractionType, Data)
|
||
{
|
||
// TODO(matt): Maybe see about interpolating out of interrupted transitions?
|
||
//
|
||
// Interruptability:
|
||
// Reversible Pairs:
|
||
// SIBLING_SHIFT_PREV by SIBLING_SHIFT_NEXT
|
||
// SIBLING_SHIFT_NEXT (when SHIFT) by SIBLING_SHIFT_PREV
|
||
// SIBLING_SHIFT_NEXT (when ASCEND) by PUSH_BUTTON (of the corresponding button)
|
||
// PUSH_BUTTON by ASCEND
|
||
// ASCEND by PUSH_BUTTON (of the corresponding button)
|
||
// SORT by SORT
|
||
//
|
||
// Mixtures:
|
||
// SIBLING_SHIFT_PREV – SORT
|
||
//
|
||
|
||
var I = {
|
||
Type: InteractionType,
|
||
Data: Data,
|
||
};
|
||
|
||
Nav.InteractionQueue.push(I);
|
||
|
||
if(!Nav.Transition.RequestedFrame)
|
||
{
|
||
DequeueInteraction();
|
||
}
|
||
}
|
||
|
||
function
|
||
UseOrientation(Orientation)
|
||
{
|
||
Nav.GridContainer.classList.remove("Portrait", "Landscape", "Left", "Right");
|
||
switch(Orientation)
|
||
{
|
||
case orientations.PORTRAIT:
|
||
{
|
||
Nav.Controls.GridTraversal.Header.insertBefore(Nav.Controls.GridTraversal.Ascend, Nav.Controls.GridTraversal.Next);
|
||
Nav.GridContainer.classList.add("Portrait");
|
||
} break;
|
||
|
||
case orientations.LANDSCAPE_LEFT:
|
||
{
|
||
Nav.Controls.GridTraversal.Header.parentElement.insertBefore(Nav.Controls.GridTraversal.Ascend, Nav.Controls.GridTraversal.Header);
|
||
Nav.GridContainer.classList.add("Landscape", "Left");
|
||
} break;
|
||
|
||
case orientations.LANDSCAPE_RIGHT:
|
||
{
|
||
Nav.Controls.GridTraversal.Header.parentElement.insertBefore(Nav.Controls.GridTraversal.Ascend, Nav.Controls.GridTraversal.Header);
|
||
Nav.GridContainer.classList.add("Landscape", "Right");
|
||
} break;
|
||
}
|
||
}
|
||
|
||
function
|
||
InitNexus()
|
||
{
|
||
Nav.List.classList.add("hidden");
|
||
var ButtonsContainerPrototype = document.createElement("div");
|
||
ButtonsContainerPrototype.setAttribute("id", "cineraIndexGrid");
|
||
|
||
var ButtonsPrototype = document.createElement("div");
|
||
ButtonsPrototype.classList.add("cineraButtons");
|
||
|
||
var ButtonsClonePrototype = document.createElement("div");
|
||
ButtonsClonePrototype.classList.add("cineraButtons");
|
||
|
||
ButtonsContainerPrototype.appendChild(ButtonsClonePrototype);
|
||
ButtonsContainerPrototype.appendChild(ButtonsPrototype);
|
||
Nav.Transition.ButtonsTransitionContainerElement = Nav.GridContainer.appendChild(ButtonsContainerPrototype);
|
||
Nav.Grid = Nav.Transition.ButtonsTransitionContainerElement;
|
||
|
||
Nav.Transition.ButtonsContainerCloneElement = Nav.Transition.ButtonsTransitionContainerElement.querySelectorAll(".cineraButtons")[0];
|
||
Nav.ButtonsContainer = Nav.Transition.ButtonsTransitionContainerElement.querySelectorAll(".cineraButtons")[1];
|
||
Nav.GridColumnGap = parseInt(window.getComputedStyle(Nav.ButtonsContainer).gridColumnGap);
|
||
Nav.GridRowGap = parseInt(window.getComputedStyle(Nav.ButtonsContainer).gridRowGap);
|
||
|
||
// NOTE(matt): We ResetButtonsContainerClone() anyway, but without cycling this classList Safari seems to do transitions
|
||
// based on the wrong size grid
|
||
Nav.GridContainer.classList.add("hidden");
|
||
ResetButtonsContainerClone();
|
||
Nav.GridContainer.classList.remove("hidden");
|
||
|
||
Nav.Nexus.classList.add("anim");
|
||
|
||
ScrollCondition = true; // NOTE(matt): Variable in cinera_pre.js, we init with the Grid which is the view we want to auto-scroll
|
||
if(CineraProps.IsMobile)
|
||
{
|
||
CineraProps.Orientation = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile);
|
||
UseOrientation(CineraProps.Orientation);
|
||
}
|
||
}
|
||
|
||
function
|
||
ComputePossibleCellsInDimension(AvailableSpaceInPixels, GridGap)
|
||
{
|
||
var Result = 0;
|
||
var SpaceToFill = AvailableSpaceInPixels;
|
||
if(SpaceToFill >= Nav.MinButtonDim)
|
||
{
|
||
SpaceToFill -= Nav.MinButtonDim;
|
||
++Result;
|
||
}
|
||
|
||
for(; SpaceToFill >= (Nav.MinButtonDim + GridGap); )
|
||
{
|
||
SpaceToFill -= (Nav.MinButtonDim + GridGap);
|
||
++Result;
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
GridSizeMeetsMinimumSupported(GridSize)
|
||
{
|
||
return GridSize.X * GridSize.Y >= 2;
|
||
}
|
||
|
||
function
|
||
GridSizeIsSupported(GridSize)
|
||
{
|
||
return (GridSize.X >= Nav.GridMinCellsPerDimension && GridSize.X <= Nav.GridMaxCellsPerDimension) &&
|
||
(GridSize.Y >= Nav.GridMinCellsPerDimension && GridSize.Y <= Nav.GridMaxCellsPerDimension) &&
|
||
GridSizeMeetsMinimumSupported(GridSize);
|
||
}
|
||
|
||
function
|
||
ComputeOptimalGridSize()
|
||
{
|
||
var Result = {
|
||
X: null,
|
||
Y: null,
|
||
};
|
||
|
||
var WindowDim = {
|
||
X: null,
|
||
Y: null,
|
||
};
|
||
if(CineraProps.IsMobile)
|
||
{
|
||
WindowDim = DeriveReliableWindowDimensions();
|
||
}
|
||
else
|
||
{
|
||
WindowDim.X = document.body.clientWidth;
|
||
WindowDim.Y = window.innerHeight;
|
||
}
|
||
var DimReduction = {
|
||
X: 0,
|
||
Y: Nav.Controls.Header.offsetHeight,
|
||
};
|
||
|
||
Nav.Transition.ButtonsTransitionContainerElement.style = null;
|
||
Nav.ButtonsContainer.style = null;
|
||
Nav.Controls.GridTraversal.Container.style = null;
|
||
Nav.Controls.GridTraversal.Ascend.style = null;
|
||
Nav.Controls.GridTraversal.Prev.style = null;
|
||
Nav.Controls.GridTraversal.Next.style = null;
|
||
|
||
// TODO(matt): Maybe structure it such that the grid is always not hidden at this point?
|
||
var GridWasHidden = Nav.GridContainer.classList.contains("hidden");
|
||
if(GridWasHidden)
|
||
{
|
||
Nav.GridContainer.classList.remove("hidden");
|
||
}
|
||
if(CineraProps.IsMobile && (CineraProps.Orientation == orientations.LANDSCAPE_LEFT || CineraProps.Orientation == orientations.LANDSCAPE_RIGHT))
|
||
{
|
||
DimReduction.X += Nav.Controls.GridTraversal.Container.offsetWidth;
|
||
}
|
||
else
|
||
{
|
||
DimReduction.Y += Nav.Controls.GridTraversal.Container.offsetHeight;
|
||
}
|
||
if(GridWasHidden)
|
||
{
|
||
Nav.GridContainer.classList.add("hidden");
|
||
}
|
||
|
||
var MaxWidth = MaxWidthOfElement(Nav.Nexus, WindowDim) - DimReduction.X;
|
||
var MaxHeight = MaxHeightOfElement(Nav.Nexus, WindowDim) - DimReduction.Y;
|
||
|
||
var BodyStyle = window.getComputedStyle(document.body);
|
||
if(Nav.Nexus.parentNode == document.body)
|
||
{
|
||
// TODO(matt): Robustify this
|
||
MaxWidth -= parseInt(BodyStyle.marginRight);
|
||
MaxHeight -= parseInt(BodyStyle.marginBottom);
|
||
}
|
||
|
||
Result.X = ComputePossibleCellsInDimension(MaxWidth, Nav.GridColumnGap);
|
||
Result.Y = ComputePossibleCellsInDimension(MaxHeight, Nav.GridRowGap);
|
||
|
||
if(GridSizeMeetsMinimumSupported(Result))
|
||
{
|
||
Result.X = Clamp(Nav.GridMinCellsPerDimension, Result.X, Nav.GridMaxCellsPerDimension);
|
||
Result.Y = Clamp(Nav.GridMinCellsPerDimension, Result.Y, Nav.GridMaxCellsPerDimension);
|
||
|
||
var ButtonDimBasedOnX = Math.floor((MaxWidth - Nav.GridColumnGap * (Result.X - 1)) / Result.X);
|
||
var ButtonDimBasedOnY = Math.floor((MaxHeight - Nav.GridRowGap * (Result.Y - 1)) / Result.Y);
|
||
|
||
Nav.ButtonDim = Math.min(ButtonDimBasedOnX, ButtonDimBasedOnY);
|
||
Nav.ButtonDim -= Nav.ButtonDim % 2; // NOTE(matt): Even-length helps CSS keep the head & tail's correct size when rotated 180 degrees
|
||
|
||
var GridTemplateColumnsStyle = "repeat(" + Result.X + ", minmax(" + Nav.ButtonDim + "px, " + Nav.ButtonDim + "px))";
|
||
Nav.ButtonsContainer.style.gridTemplateColumns = GridTemplateColumnsStyle;
|
||
|
||
var GridTemplateRowsStyle = "repeat(" + Result.Y + ", " + Nav.ButtonDim + "px)";
|
||
Nav.ButtonsContainer.style.gridTemplateRows = GridTemplateRowsStyle;
|
||
|
||
Nav.GridDim.X = Nav.ButtonDim * Result.X + Nav.GridColumnGap * (Result.X - 1);
|
||
Nav.GridDim.Y = Nav.ButtonDim * Result.Y + Nav.GridRowGap * (Result.Y - 1);
|
||
|
||
SetDim(Nav.Transition.ButtonsTransitionContainerElement, Nav.GridDim.X + "px", Nav.GridDim.Y + "px");
|
||
|
||
Nav.Controls.GridTraversal.Container.style.maxWidth = Nav.GridDim.X + "px";
|
||
Nav.Controls.GridTraversal.Container.style.maxHeight = Nav.GridDim.Y + "px";
|
||
|
||
var TraversalButtonCount = 3;
|
||
if(Nav.Controls.GridTraversal.Container.scrollWidth > Nav.Controls.GridTraversal.Container.clientWidth)
|
||
{
|
||
var TraversalButtonDim = Nav.Controls.GridTraversal.Container.clientWidth / TraversalButtonCount;
|
||
SetDim(Nav.Controls.GridTraversal.Ascend, TraversalButtonDim + "px", TraversalButtonDim + "px");
|
||
SetDim(Nav.Controls.GridTraversal.Prev, TraversalButtonDim + "px", TraversalButtonDim + "px");
|
||
SetDim(Nav.Controls.GridTraversal.Next, TraversalButtonDim + "px", TraversalButtonDim + "px");
|
||
}
|
||
if(Nav.Controls.GridTraversal.Container.scrollHeight > Nav.Controls.GridTraversal.Container.clientHeight)
|
||
{
|
||
var TraversalButtonDim = Nav.Controls.GridTraversal.Container.clientHeight / TraversalButtonCount;
|
||
SetDim(Nav.Controls.GridTraversal.Ascend, TraversalButtonDim + "px", TraversalButtonDim + "px");
|
||
SetDim(Nav.Controls.GridTraversal.Prev, TraversalButtonDim + "px", TraversalButtonDim + "px");
|
||
SetDim(Nav.Controls.GridTraversal.Next, TraversalButtonDim + "px", TraversalButtonDim + "px");
|
||
}
|
||
|
||
}
|
||
|
||
ResetButtonsContainerClone(); // NOTE(matt): This reapplies the sorting Z-rotation
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
GetScrollToElement(NodeList, UpperIndex)
|
||
{
|
||
var Result = undefined;
|
||
if(UpperIndex === null)
|
||
{
|
||
if(NodeList.length)
|
||
{
|
||
Result = NodeList[0].closest(".cineraIndexProject");
|
||
}
|
||
else
|
||
{
|
||
Result = NodeList.closest(".cineraIndexProject");
|
||
}
|
||
}
|
||
else
|
||
{
|
||
Result = NodeList[UpperIndex];
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
EmptyTraversalStack()
|
||
{
|
||
while(Nav.TraversalStack.length > 1)
|
||
{
|
||
Nav.TraversalStack.pop();
|
||
}
|
||
}
|
||
|
||
function
|
||
GetContainingProjectOfLevel(Level)
|
||
{
|
||
var Result = null;
|
||
if(Level.Projects !== null)
|
||
{
|
||
if(Level.Projects.length)
|
||
{
|
||
Result = Level.Projects[0].parentNode;
|
||
}
|
||
else
|
||
{
|
||
Result = Level.Projects.parentNode;
|
||
}
|
||
}
|
||
else if(Level.Entries !== null)
|
||
{
|
||
if(Level.Entries.length)
|
||
{
|
||
Result = Level.Entries[0].closest(".cineraIndexProject");
|
||
}
|
||
else
|
||
{
|
||
Result = Level.Entries.closest(".cineraIndexProject");
|
||
}
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
GetContainingProject(ProjectElement)
|
||
{
|
||
var Result = null;
|
||
if(ProjectElement.parentNode.classList.contains("cineraIndexProject"))
|
||
{
|
||
Result = ProjectElement.parentNode;
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
PushProjectOntoStack(Stack, ContainingProject)
|
||
{
|
||
var Project = {
|
||
Element: ContainingProject,
|
||
Projects: ContainingProject.querySelectorAll(":scope > .cineraIndexProject"),
|
||
Entries: ContainingProject.querySelectorAll(":scope > .cineraIndexEntries > div"),
|
||
Index: null,
|
||
};
|
||
|
||
if(Project.Projects.length == 0) { Project.Projects = null; }
|
||
if(Project.Entries.length == 0) { Project.Entries = null; }
|
||
|
||
var Siblings = ContainingProject.parentNode.querySelectorAll(":scope > .cineraIndexProject");
|
||
Project.Index = GetIndexOfElement(Siblings, ContainingProject);
|
||
Stack.push(Project);
|
||
}
|
||
|
||
function
|
||
BuildProjectsStack(TargetLevel)
|
||
{
|
||
let ProjectsStack = [];
|
||
var ContainingProject = GetContainingProjectOfLevel(TargetLevel);
|
||
|
||
PushProjectOntoStack(ProjectsStack, ContainingProject);
|
||
|
||
ContainingProject = GetContainingProject(ProjectsStack[ProjectsStack.length - 1].Element);
|
||
while(ContainingProject)
|
||
{
|
||
PushProjectOntoStack(ProjectsStack, ContainingProject);
|
||
ContainingProject = GetContainingProject(ProjectsStack[ProjectsStack.length - 1].Element);
|
||
}
|
||
|
||
return ProjectsStack;
|
||
}
|
||
|
||
function
|
||
EmptyTraversalStackIntoProjectsStack()
|
||
{
|
||
let ProjectsStack = [];
|
||
while(Nav.TraversalStack.length > 1)
|
||
{
|
||
let ThisLevel = Nav.TraversalStack[Nav.TraversalStack.length - 1];
|
||
PushLevelProjectUniquely(ProjectsStack, ThisLevel);
|
||
Nav.TraversalStack.pop();
|
||
}
|
||
return ProjectsStack;
|
||
}
|
||
|
||
function
|
||
DeriveTraversalStack(ProjectsStack, TargetLevel)
|
||
{
|
||
if(ProjectsStack && TargetLevel)
|
||
{
|
||
while(ProjectsStack.length > 0)
|
||
{
|
||
var ThisProject = ProjectsStack[ProjectsStack.length - 1];
|
||
|
||
var ButtonInfo = { HeadIndex: null, TailIndex: null, ItemCount: null, };
|
||
let PopulationData = {
|
||
Distribution: null,
|
||
ThisLevel: null,
|
||
Prev: null,
|
||
DoingEntries: false,
|
||
};
|
||
PopulationData.ThisLevel = Nav.TraversalStack[Nav.TraversalStack.length - 1];
|
||
PopulationData.Distribution = ComputeItemDistribution(PopulationData.ThisLevel);
|
||
|
||
for(var ButtonIndex = 0; ButtonIndex < Nav.Buttons.length; ++ButtonIndex)
|
||
{
|
||
let Button = {
|
||
Projects: null,
|
||
Entries: null,
|
||
HeadIndex: null,
|
||
TailIndex: null,
|
||
};
|
||
|
||
if(PopulationData.Distribution.ProjectsToPlace > 0 || PopulationData.Distribution.EntriesToPlace > 0)
|
||
{
|
||
ButtonInfo = PopulateButton(PopulationData, Button, ButtonIndex);
|
||
if(ButtonInfo.HeadIndex <= ThisProject.Index && ButtonInfo.TailIndex >= ThisProject.Index)
|
||
{
|
||
var FoundProject = PseudoPushButton(Button);
|
||
if(FoundProject)
|
||
{
|
||
ProjectsStack.pop();
|
||
}
|
||
break;
|
||
}
|
||
PopulationData.Prev = ButtonInfo;
|
||
}
|
||
}
|
||
}
|
||
|
||
if(TargetLevel.HeadIndex !== null && TargetLevel.TailIndex !== null)
|
||
{
|
||
var Descended = false;
|
||
while(true)
|
||
{
|
||
let PopulationData = {
|
||
Distribution: null,
|
||
ThisLevel: null,
|
||
Prev: null,
|
||
DoingEntries: false,
|
||
};
|
||
PopulationData.ThisLevel = Nav.TraversalStack[Nav.TraversalStack.length - 1];
|
||
PopulationData.Distribution = ComputeItemDistribution(PopulationData.ThisLevel);
|
||
|
||
for(var ButtonIndex = 0; ButtonIndex < Nav.Buttons.length; ++ButtonIndex)
|
||
{
|
||
let Button = {
|
||
Projects: null,
|
||
Entries: null,
|
||
HeadIndex: null,
|
||
TailIndex: null,
|
||
};
|
||
|
||
if(PopulationData.Distribution.ProjectsToPlace > 0 || PopulationData.Distribution.EntriesToPlace > 0)
|
||
{
|
||
ButtonInfo = PopulateButton(PopulationData, Button, ButtonIndex);
|
||
if(ButtonInfo.HeadIndex <= TargetLevel.HeadIndex && ButtonInfo.TailIndex >= TargetLevel.TailIndex)
|
||
{
|
||
Descended = true;
|
||
PseudoPushButton(Button);
|
||
break;
|
||
}
|
||
PopulationData.Prev = ButtonInfo;
|
||
}
|
||
}
|
||
if(!Descended)
|
||
{
|
||
break;
|
||
}
|
||
else
|
||
{
|
||
Descended = false;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function
|
||
GetGenerationOf(Element)
|
||
{
|
||
var Result = 0;
|
||
if(Element.classList.contains("cineraIndexProject"))
|
||
{
|
||
++Result;
|
||
var ContainingProject = GetContainingProject(Element);
|
||
while(ContainingProject)
|
||
{
|
||
++Result;
|
||
ContainingProject = GetContainingProject(ContainingProject);
|
||
}
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
ComputeTargetLevelForViewport()
|
||
{
|
||
var Result = {
|
||
Projects: null,
|
||
Entries: null,
|
||
HeadIndex: null,
|
||
TailIndex: null,
|
||
};
|
||
|
||
var ViewportTop = window.scrollY;
|
||
var ViewportBottom = ViewportTop + window.innerHeight;
|
||
|
||
var ControlsHeight = Nav.Controls.Header.offsetHeight;
|
||
ViewportTop += ControlsHeight;
|
||
|
||
var Elements = [];
|
||
for(var ProjectIndex = 0; ProjectIndex < Search.Projects.length; ++ProjectIndex)
|
||
{
|
||
var ThisProject = Search.Projects[ProjectIndex];
|
||
Elements.push(ThisProject.projectTitleElement);
|
||
if(ThisProject.entriesContainer)
|
||
{
|
||
var Entries = ThisProject.entriesContainer.querySelectorAll(":scope > div");
|
||
if(Nav.SortChronological)
|
||
{
|
||
for(var EntryIndex = 0; EntryIndex < Entries.length; ++EntryIndex)
|
||
{
|
||
Elements.push(Entries[EntryIndex]);
|
||
}
|
||
}
|
||
else
|
||
{
|
||
for(var EntryIndex = Entries.length - 1; EntryIndex >= 0; --EntryIndex)
|
||
{
|
||
Elements.push(Entries[EntryIndex]);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
var Upper = {
|
||
Element: null,
|
||
Parent: null,
|
||
Type: null,
|
||
};
|
||
var Lower = {
|
||
Element: null,
|
||
Parent: null,
|
||
Type: null,
|
||
};
|
||
|
||
for(var i = 0; i < Elements.length; ++i)
|
||
{
|
||
var ElementTop = getElementYOffsetFromPage(Elements[i]);
|
||
if(!Upper.Element)
|
||
{
|
||
if(ElementTop >= ViewportTop)
|
||
{
|
||
Upper.Element = Elements[i];
|
||
Lower.Element = Upper.Element;
|
||
}
|
||
}
|
||
else
|
||
{
|
||
var ElementBottom = ElementTop + Elements[i].scrollHeight;
|
||
if(ElementBottom <= ViewportBottom)
|
||
{
|
||
Lower.Element = Elements[i];
|
||
}
|
||
else
|
||
{
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
Upper.Type = Upper.Element.classList.contains("cineraProjectTitle") ? item_type.PROJECT : item_type.ENTRY;
|
||
Lower.Type = Lower.Element.classList.contains("cineraProjectTitle") ? item_type.PROJECT : item_type.ENTRY;
|
||
|
||
Upper.Parent = Upper.Element.closest(".cineraIndexProject");
|
||
Lower.Parent = Lower.Element.closest(".cineraIndexProject");
|
||
|
||
if(Upper.Parent == Lower.Parent)
|
||
{
|
||
if(Upper.Type == Lower.Type)
|
||
{
|
||
switch(Upper.Type)
|
||
{
|
||
case item_type.PROJECT:
|
||
{
|
||
Result.Projects = Upper.Parent.querySelectorAll(":scope > .cineraIndexProject");
|
||
Result.HeadIndex = GetIndexOfElement(Result.Projects, Upper.Element);
|
||
Result.TailIndex = GetIndexOfElement(Result.Projects, Lower.Element);
|
||
} break;
|
||
case item_type.ENTRY:
|
||
{
|
||
Result.Entries = Upper.Parent.querySelectorAll(":scope > .cineraIndexEntries > div");
|
||
Result.HeadIndex = GetIndexOfElement(Result.Entries, Upper.Element);
|
||
Result.TailIndex = GetIndexOfElement(Result.Entries, Lower.Element);
|
||
} break;
|
||
}
|
||
if(!Nav.SortChronological)
|
||
{
|
||
var Temp = Result.HeadIndex;
|
||
Result.HeadIndex = Result.TailIndex;
|
||
Result.TailIndex = Temp;
|
||
}
|
||
}
|
||
else
|
||
{
|
||
Result.Projects = Upper.Parent.querySelectorAll(":scope > .cineraIndexProject");
|
||
if(Result.Projects.length == 0) { Result.Projects = null; }
|
||
Result.Entries = Upper.Parent.querySelectorAll(":scope > .cineraIndexEntries > div");
|
||
if(Result.Entries.length == 0) { Result.Entries = null; }
|
||
}
|
||
}
|
||
else
|
||
{
|
||
var UpperGeneration = GetGenerationOf(Upper.Parent);
|
||
var LowerGeneration = GetGenerationOf(Lower.Parent);
|
||
while(UpperGeneration > LowerGeneration)
|
||
{
|
||
Upper.Parent = GetContainingProject(Upper.Parent);
|
||
--UpperGeneration;
|
||
}
|
||
while(LowerGeneration > UpperGeneration)
|
||
{
|
||
Lower.Parent = GetContainingProject(Lower.Parent);
|
||
--LowerGeneration;
|
||
}
|
||
|
||
if(UpperGeneration == 0 && LowerGeneration == 0)
|
||
{
|
||
Upper.Parent = null;
|
||
Lower.Parent = null;
|
||
}
|
||
|
||
while(Upper.Parent && Lower.Parent && Upper.Parent != Lower.Parent)
|
||
{
|
||
Upper.Parent = GetContainingProject(Upper.Parent);
|
||
Lower.Parent = GetContainingProject(Lower.Parent);
|
||
}
|
||
|
||
if(Upper.Parent != null)
|
||
{
|
||
Result.Projects = Upper.Parent.querySelectorAll(":scope > .cineraIndexProject");
|
||
if(Result.Projects.length == 0) { Result.Projects = null; }
|
||
Result.Entries = Upper.Parent.querySelectorAll(":scope > .cineraIndexEntries > div");
|
||
if(Result.Entries.length == 0) { Result.Entries = null; }
|
||
}
|
||
}
|
||
|
||
while(Elements.length > 0)
|
||
{
|
||
Elements.pop();
|
||
}
|
||
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
ScrollToWithOffset(Element, Offset)
|
||
{
|
||
var ScrollTop = getElementYOffsetFromPage(Element);
|
||
ScrollTop -= Offset;
|
||
window.scrollTo(0, ScrollTop);
|
||
}
|
||
|
||
function
|
||
ToggleView()
|
||
{
|
||
// NOTE(matt): While we only have two views, a toggle will suffice
|
||
clearTimeout(ScrollerFunction);
|
||
ScrollTicking = false;
|
||
if(Nav.ViewType == view_type.GRID)
|
||
{
|
||
Nav.Controls.View.textContent = "View: List";
|
||
Nav.ViewType = view_type.LIST;
|
||
if(MaintainingState())
|
||
{
|
||
ClearStateBit(state_bit.VIEW_GRID);
|
||
SetStateBit(state_bit.VIEW_LIST);
|
||
}
|
||
|
||
if(!IsQuery())
|
||
{
|
||
Nav.List.classList.remove("hidden");
|
||
Nav.GridContainer.classList.add("hidden");
|
||
var LevelBundle = GetTraversalLevelBundle();
|
||
if(LevelBundle.Generation > 1)
|
||
{
|
||
var Element;
|
||
if(LevelBundle.This.Entries !== null)
|
||
{
|
||
Element = GetScrollToElement(LevelBundle.This.Entries, Nav.SortChronological ? LevelBundle.This.HeadIndex : LevelBundle.This.TailIndex);
|
||
}
|
||
else if(LevelBundle.This.Projects !== null)
|
||
{
|
||
Element = GetScrollToElement(LevelBundle.This.Projects, Nav.SortChronological ? LevelBundle.This.HeadIndex : LevelBundle.This.TailIndex);
|
||
}
|
||
ScrollToWithOffset(Element, Nav.Controls.Header.offsetHeight);
|
||
}
|
||
}
|
||
}
|
||
else
|
||
{
|
||
if(GridSizeIsSupported(Nav.GridSize))
|
||
{
|
||
Nav.Controls.View.textContent = "View: Grid";
|
||
Nav.ViewType = view_type.GRID;
|
||
if(MaintainingState())
|
||
{
|
||
ClearStateBit(state_bit.VIEW_LIST);
|
||
SetStateBit(state_bit.VIEW_GRID);
|
||
}
|
||
|
||
if(!IsQuery())
|
||
{
|
||
var TargetLevel = ComputeTargetLevelForViewport();
|
||
EmptyTraversalStack();
|
||
if(TargetLevel.Projects || TargetLevel.Entries)
|
||
{
|
||
var ProjectsStack = BuildProjectsStack(TargetLevel);
|
||
DeriveTraversalStack(ProjectsStack, TargetLevel);
|
||
}
|
||
Nav.List.classList.add("hidden");
|
||
Nav.GridContainer.classList.remove("hidden");
|
||
|
||
UpdateButtons();
|
||
|
||
ScrollToWithOffset(Nav.Controls.GridTraversal.Header, Nav.Controls.Header.offsetHeight);
|
||
}
|
||
}
|
||
else
|
||
{
|
||
// TODO(matt): Inform user that grid view is unavailable
|
||
}
|
||
}
|
||
ScrollCondition = Nav.ViewType == view_type.GRID;
|
||
}
|
||
|
||
function
|
||
ToggleAnimations()
|
||
{
|
||
Nav.Transition.Enabled = !Nav.Transition.Enabled;
|
||
if(Nav.Transition.Enabled)
|
||
{
|
||
Nav.Controls.Anim.textContent = "Animations: ✔";
|
||
Nav.Nexus.classList.add("anim");
|
||
ClearStateBit(state_bit.DISABLE_ANIMATIONS);
|
||
}
|
||
else
|
||
{
|
||
Nav.Controls.Anim.textContent = "Animations: ✘";
|
||
Nav.Nexus.classList.remove("anim");
|
||
SetStateBit(state_bit.DISABLE_ANIMATIONS);
|
||
}
|
||
}
|
||
|
||
function
|
||
ToggleSave()
|
||
{
|
||
if(MaintainingState())
|
||
{
|
||
Nav.Controls.Save.textContent = "Save Settings: ✘";
|
||
Nav.State = 0;
|
||
Nav.State |= state_bit.NO_SAVE;
|
||
SaveState();
|
||
}
|
||
else
|
||
{
|
||
Nav.Controls.Save.textContent = "Save Settings: ✔";
|
||
Nav.State ^= state_bit.NO_SAVE;
|
||
if(!Nav.Transition.Enabled) { SetStateBit(state_bit.DISABLE_ANIMATIONS); }
|
||
if(!Nav.SortChronological) { SetStateBit(state_bit.SORT_REVERSED); }
|
||
|
||
if(Nav.ViewType == view_type.LIST) { SetStateBit(state_bit.VIEW_LIST); }
|
||
else if(Nav.ViewType == view_type.GRID) { SetStateBit(state_bit.VIEW_GRID); }
|
||
}
|
||
}
|
||
|
||
function
|
||
BindMenuItem(Item)
|
||
{
|
||
// TODO(matt): Enable this to bind the "click" event, making it take a function and parameters
|
||
Item.addEventListener("mouseover", function(ev) { this.classList.add("focused"); });
|
||
Item.addEventListener("mouseout", function(ev) { this.classList.remove("focused"); });
|
||
}
|
||
|
||
function
|
||
BindControls()
|
||
{
|
||
var SettingsMenu = Nav.Controls.Header.querySelector(".cineraMenu.ViewSettings");
|
||
var SettingsMenuContainer = SettingsMenu.querySelector(".cineraMenuContainer");
|
||
|
||
SettingsMenu.addEventListener("mouseenter", function(ev) {
|
||
SettingsMenuContainer.classList.add("visible");
|
||
});
|
||
|
||
SettingsMenu.addEventListener("mouseleave", function(ev) {
|
||
SettingsMenuContainer.classList.remove("visible");
|
||
});
|
||
|
||
SettingsMenu.addEventListener("click", function(ev) {
|
||
SettingsMenuContainer.classList.toggle("visible");
|
||
});
|
||
|
||
BindMenuItem(Nav.Controls.Sort);
|
||
Nav.Controls.Sort.addEventListener("click", function(ev) { ev.stopPropagation(); EnqueueInteraction(interaction_type.SORT); });
|
||
BindMenuItem(Nav.Controls.View);
|
||
Nav.Controls.View.addEventListener("click", function(ev) { ev.stopPropagation(); ToggleView(); });
|
||
BindMenuItem(Nav.Controls.Anim);
|
||
Nav.Controls.Anim.addEventListener("click", function(ev) { ev.stopPropagation(); ToggleAnimations(); });
|
||
BindMenuItem(Nav.Controls.Save);
|
||
Nav.Controls.Save.addEventListener("click", function(ev) { ev.stopPropagation(); ToggleSave(); });
|
||
|
||
var Filter = Nav.Controls.Header.querySelector(".cineraMenu.IndexFilter");
|
||
if(Filter)
|
||
{
|
||
var FilterContainer = Filter.querySelector(".cineraMenuContainer");
|
||
// TODO(matt): Once we have multiple menus, use a menuState on this page
|
||
// menuState.push(Filter);
|
||
|
||
Filter.addEventListener("mouseenter", function(ev) {
|
||
FilterContainer.classList.add("visible");
|
||
});
|
||
|
||
Filter.addEventListener("mouseleave", function(ev) {
|
||
FilterContainer.classList.remove("visible");
|
||
});
|
||
|
||
Filter.addEventListener("click", function(ev) {
|
||
FilterContainer.classList.toggle("visible");
|
||
});
|
||
|
||
var IndexFilterProjects = Filter.querySelectorAll(".cineraFilterProject");
|
||
for(var i = 0; i < IndexFilterProjects.length; ++i)
|
||
{
|
||
IndexFilterProjects[i].addEventListener("mouseover", function(ev) {
|
||
ev.stopPropagation();
|
||
this.classList.add("focused");
|
||
focusSprite(this);
|
||
});
|
||
IndexFilterProjects[i].addEventListener("mouseout", function(ev) {
|
||
ev.stopPropagation();
|
||
this.classList.remove("focused");
|
||
unfocusSprite(this);
|
||
});
|
||
IndexFilterProjects[i].addEventListener("click", function(ev) {
|
||
ev.stopPropagation();
|
||
toggleEntriesOfProjectAndChildren(this);
|
||
});
|
||
}
|
||
}
|
||
|
||
Search.QueryElement.addEventListener("input", function(ev) {
|
||
history.replaceState(null, null, "#" + encodeURIComponent(Search.QueryElement.value));
|
||
runSearch();
|
||
});
|
||
|
||
Nav.Controls.GridTraversal.Prev.addEventListener("click", function() { EnqueueInteraction(interaction_type.SIBLING_SHIFT_PREV) });
|
||
Nav.Controls.GridTraversal.Ascend.addEventListener("click", function() { EnqueueInteraction(interaction_type.ASCEND) });
|
||
Nav.Controls.GridTraversal.Next.addEventListener("click", function() { EnqueueInteraction(interaction_type.SIBLING_SHIFT_NEXT) });
|
||
|
||
BindHelp(Nav.Controls.Help, Nav.Controls.HelpDocumentation);
|
||
}
|
||
|
||
function
|
||
InitButtons()
|
||
{
|
||
if(GridSizeIsSupported(Nav.GridSize))
|
||
{
|
||
var ButtonPrototype = document.createElement("div");
|
||
ButtonPrototype.classList.add("cineraButton", "subdivision");
|
||
for(var i = 0; i < Nav.GridSize.X * Nav.GridSize.Y; ++i)
|
||
{
|
||
Nav.ButtonsContainer.appendChild(ButtonPrototype.cloneNode());
|
||
}
|
||
|
||
var Buttons = Nav.ButtonsContainer.querySelectorAll(".cineraButton.subdivision");
|
||
for(let j = 0; j < Buttons.length; ++j)
|
||
{
|
||
let Button = {
|
||
Element: Buttons[j],
|
||
Projects: [],
|
||
Entries: [],
|
||
HeadIndex: null,
|
||
TailIndex: null,
|
||
};
|
||
|
||
Buttons[j].addEventListener("click", function() {
|
||
let InteractionData = {
|
||
Element: this,
|
||
Button: Button,
|
||
};
|
||
EnqueueInteraction(interaction_type.PUSH_BUTTON, InteractionData);
|
||
});
|
||
|
||
Nav.Buttons.push(Button);
|
||
}
|
||
}
|
||
}
|
||
|
||
function
|
||
ReinitButtons()
|
||
{
|
||
for(; Nav.Buttons.length > 0;)
|
||
{
|
||
Nav.Buttons[0].Element.remove();
|
||
Nav.Buttons.shift();
|
||
}
|
||
InitButtons();
|
||
}
|
||
|
||
function
|
||
PushLevelProjectUniquely(Stack, Level)
|
||
{
|
||
if(Level.HeadIndex == null && Level.TailIndex == null)
|
||
{
|
||
var Found = false;
|
||
var ContainingProject = GetContainingProjectOfLevel(Level);
|
||
|
||
for(var i = 0; i < Stack.length; ++i)
|
||
{
|
||
if(ContainingProject === Stack[i].Element)
|
||
{
|
||
Found = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if(!Found)
|
||
{
|
||
PushProjectOntoStack(Stack, ContainingProject);
|
||
}
|
||
}
|
||
}
|
||
|
||
function
|
||
ButtonContainsLevel(Button, Level)
|
||
{
|
||
var Result = false;
|
||
if(NodesMatch(Button.Projects, Level.Projects) &&
|
||
NodesMatch(Button.Entries, Level.Entries) &&
|
||
Button.HeadIndex <= Level.HeadIndex &&
|
||
Button.TailIndex >= Level.TailIndex)
|
||
{
|
||
Result = true;
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
PopulateButton(PopulationData, Button, ButtonIndex)
|
||
{
|
||
var Result;
|
||
if(PopulationData.Distribution.ProjectsToPlace > 0)
|
||
{
|
||
Button.Projects = PopulationData.ThisLevel.Projects;
|
||
if(PopulationData.Distribution.ProjectsToPlace == 1 || PopulationData.Distribution.ProjectsToPlace == PopulationData.Distribution.ButtonsForProjects - ButtonIndex)
|
||
{
|
||
PopulationData.Distribution.FullButtonProjectCount = 1;
|
||
}
|
||
|
||
Result = SetButtonInfo(Button, PopulationData.Prev, PopulationData.ThisLevel, PopulationData.Distribution);
|
||
if(Result.ItemCount == 1)
|
||
{
|
||
Button.Projects = PopulationData.ThisLevel.Projects[Result.HeadIndex];
|
||
}
|
||
PopulationData.Distribution.ProjectsToPlace -= Result.ItemCount;
|
||
}
|
||
else
|
||
{
|
||
Button.Entries = PopulationData.ThisLevel.Entries;
|
||
if(!PopulationData.DoingEntries)
|
||
{
|
||
PopulationData.Prev = null;
|
||
PopulationData.DoingEntries = true;
|
||
}
|
||
|
||
if(PopulationData.Distribution.EntriesToPlace == 1 || PopulationData.Distribution.EntriesToPlace == PopulationData.Distribution.ButtonsForEntries - ButtonIndex)
|
||
{
|
||
PopulationData.Distribution.FullButtonEntryCount = 1;
|
||
}
|
||
|
||
Result = SetButtonInfo(Button, PopulationData.Prev, PopulationData.ThisLevel, PopulationData.Distribution);
|
||
if(Result.ItemCount == 1)
|
||
{
|
||
Button.Entries = Button.Entries[Result.HeadIndex];
|
||
}
|
||
PopulationData.Distribution.EntriesToPlace -= Result.ItemCount;
|
||
}
|
||
return Result;
|
||
}
|
||
|
||
function
|
||
PseudoPushButton(Button)
|
||
{
|
||
var ButtonIsProjectOrEntry = false;
|
||
|
||
var Level = {
|
||
Projects: Button.Projects,
|
||
Entries: Button.Entries,
|
||
HeadIndex: Button.HeadIndex,
|
||
TailIndex: Button.TailIndex,
|
||
};
|
||
|
||
if(Level.Projects !== null || Level.Entries !== null)
|
||
{
|
||
if(Level.Projects !== null)
|
||
{
|
||
if(Level.Projects.length === undefined)
|
||
{
|
||
var Entries = Level.Projects.querySelectorAll(":scope > .cineraIndexEntries > div");
|
||
var Projects = Level.Projects.querySelectorAll(":scope > .cineraIndexProject");
|
||
Level.Entries = Entries.length ? Entries : null;
|
||
Level.Projects = Projects.length ? Projects : null;
|
||
ButtonIsProjectOrEntry = true;
|
||
}
|
||
Nav.TraversalStack.push(Level);
|
||
}
|
||
else
|
||
{
|
||
if(Level.Entries.length === undefined)
|
||
{
|
||
ButtonIsProjectOrEntry = true;
|
||
}
|
||
else
|
||
{
|
||
Nav.TraversalStack.push(Level);
|
||
}
|
||
}
|
||
}
|
||
|
||
return ButtonIsProjectOrEntry;
|
||
}
|
||
|
||
function
|
||
ResizeFunction()
|
||
{
|
||
CineraProps.Orientation = GetRealOrientation(orientations.LANDSCAPE_LEFT, CineraProps.IsMobile);
|
||
if(CineraProps.IsMobile)
|
||
{
|
||
UseOrientation(CineraProps.Orientation);
|
||
}
|
||
var NewGridSize = ComputeOptimalGridSize();
|
||
if(Nav.GridSize !== NewGridSize)
|
||
{
|
||
UnbindGridKeys();
|
||
Nav.GridSize = NewGridSize;
|
||
ReinitButtons();
|
||
BindGridKeys();
|
||
SetHelpKeyAvailability(Nav.GridSize)
|
||
if(GridSizeIsSupported(Nav.GridSize))
|
||
{
|
||
var TargetLevel = Nav.TraversalStack[Nav.TraversalStack.length - 1];
|
||
var ProjectsStack = EmptyTraversalStackIntoProjectsStack();
|
||
DeriveTraversalStack(ProjectsStack, TargetLevel);
|
||
}
|
||
else if(Nav.ViewType == view_type.GRID)
|
||
{
|
||
ToggleView();
|
||
// TODO(matt): Inform user that we've switched to the list view
|
||
}
|
||
ScrollToWithOffset(Nav.Nexus, 0);
|
||
}
|
||
UpdateButtons();
|
||
}
|
||
|
||
function
|
||
InitResizeEventListener()
|
||
{
|
||
window.addEventListener("resize", function() {
|
||
if(CineraProps.IsMobile)
|
||
{
|
||
window.setTimeout(ResizeFunction, 512);
|
||
}
|
||
else
|
||
{
|
||
ResizeFunction();
|
||
}
|
||
});
|
||
}
|
||
|
||
function
|
||
InitOrientationChangeListener()
|
||
{
|
||
window.onorientationchange = function()
|
||
{
|
||
if(CineraProps.IsMobile)
|
||
{
|
||
window.setTimeout(ResizeFunction, 512);
|
||
}
|
||
else
|
||
{
|
||
ResizeFunction();
|
||
}
|
||
};
|
||
}
|
||
//
|
||
// Presenting / Navigating (Laying out and traversing the grid, and sorting)
|