386 lines
18 KiB
JavaScript
386 lines
18 KiB
JavaScript
//Variale `list` is imported from JSON with query_handler.php.
|
|
//var lists = JSON.parse(document.getElementById("lists-json").innerText);
|
|
var list_id = document.getElementById("query-list").innerText;
|
|
//Get list id from <var> tag created in query-handler.php.
|
|
var selected_list = null;
|
|
if(lists.hasOwnProperty(list_id)){
|
|
selected_list = lists[list_id];
|
|
} else {
|
|
selected_list = lists["master"];
|
|
//If the list id in the query is invalid, go back to the main list.
|
|
}
|
|
|
|
|
|
|
|
function gen_list_html(list){
|
|
//This function creates HTML from a list's JSON object by iterativel calling the gen_item_html function to convert individual items. This design paradigm facilitates the construction of nested lists or lists with sections.
|
|
var html = "";
|
|
if(!list.hasOwnProperty("type")){
|
|
list.type = "default";
|
|
}
|
|
|
|
if(!list.hasOwnProperty("subtype")){
|
|
list.subtype = "default";
|
|
}
|
|
|
|
var list_type = list.type;
|
|
|
|
if(list.hasOwnProperty("sections")){
|
|
list_type = "sectioned";
|
|
//Lists that have separate sections require special handling involving recursion.
|
|
}
|
|
|
|
switch(list_type){
|
|
case "master":
|
|
for(id in lists){
|
|
html += gen_item_html(id,type="list-id");
|
|
}
|
|
html = `<ul>${html}</ul>`;
|
|
break;
|
|
|
|
case "quotes":
|
|
html += "<hr />";
|
|
for(quote of list.list){
|
|
html += gen_item_html(quote,type="quote");
|
|
}
|
|
break;
|
|
|
|
case "key-value":
|
|
for(pair of list.list){
|
|
html += gen_item_html(pair,type="kv-pair");
|
|
}
|
|
html = (list.hasOwnProperty("ordered") && list.ordered) ? `<ol>${html}</ol>` : `<ul>${html}</ul>`;
|
|
//Create an ordered list if list has the property "ordered".
|
|
break;
|
|
|
|
|
|
case "gallery":
|
|
document.getElementById("lists").style.textAlign="center";
|
|
//Center the rows of exhibits on the page.
|
|
if(!list.hasOwnProperty("subtype")){
|
|
list.subtype="default";
|
|
}
|
|
for(exhibit of list.list){
|
|
html += gen_item_html(exhibit,type="exhibit",subtype=list.subtype);
|
|
}
|
|
break;
|
|
|
|
case "external":
|
|
//This branch will only run if someone manually enters the list name into the query; clicking an external-type list from the Master List will just open the link in a new tab.
|
|
setTimeout(function(){location.assign(list["link"])}, 600);
|
|
//If the list specified in the query has the external property, then redirect to the external link. I use setTimeout in order to allow the rest of the code to run.
|
|
list.title = `Redirecting to List of ${list.title}...`;
|
|
list.list = [];
|
|
//It takes a second to redirect, so put some filler on the page while the reader waits.
|
|
break;
|
|
|
|
case "sectioned":
|
|
if(!list.hasOwnProperty("section-level")||list["section-level"]==null){
|
|
list["section-level"] = 1;
|
|
//Section-level defines the heading level of the section. Top level is 1.
|
|
}
|
|
if(!list.hasOwnProperty("dropdown")||list.dropdown==null){
|
|
list.dropdown = true;
|
|
//By default, sections ARE in details/summary tags.
|
|
}
|
|
if(!list.hasOwnProperty("dropdown-open")||list["dropdown-open"]==null){
|
|
list["dropdown-open"] = false;
|
|
//By default, sections are collapsed.
|
|
}
|
|
for(section of list.sections){
|
|
var section_html = "";
|
|
var level = list["section-level"] + 1;
|
|
section["section-level"] = level;
|
|
//Nested secions are of lower levels.
|
|
if(!section.hasOwnProperty("type")||section.type==undefined){
|
|
section.type = list.type;
|
|
//This branch transfers the list type down from higher levels. By default, the bottom-level lists will inherit the type of the top-level object unless otherwise specified.
|
|
}
|
|
if(!section.hasOwnProperty("subtype")||section.subtype==undefined){
|
|
section.subtype = list.subtype;
|
|
//Sections should also inherit subtypes.
|
|
}
|
|
if(!section.hasOwnProperty("dropdown")||section.dropdown==undefined){
|
|
section.dropdown = list.dropdown;
|
|
//Inherit dropdown-ness unless otherwise specified.
|
|
}
|
|
if(!section.hasOwnProperty("dropdown-open")||section["dropdown-open"]==undefined){
|
|
section["dropdown-open"] = list["dropdown-open"];
|
|
//Inherit whether the dropdown should be collapsed or open.
|
|
}
|
|
var description = (section.hasOwnProperty("description")) ? `<p>${section.description}</p>` : "";
|
|
//Sections can have their own descriptions.
|
|
|
|
var title = `<h${level}>${section.title}</h${level}>`;
|
|
//Wrap the section title in a header tag.
|
|
|
|
if(section.hasOwnProperty("dropdown") && section.dropdown){
|
|
//If the section is marked with the "dropdown" attribute, then nest the section's data in a details/summary tag.
|
|
var open = (section["dropdown-open"]) ? "open":"";
|
|
section_html = `<details class="heading" ${open}><summary class="heading">${title}</summary>${description}${gen_list_html(section)}</details>`;
|
|
} else {
|
|
section_html = `${title}${description}${gen_list_html(section)}`;
|
|
}
|
|
//Sectioned
|
|
html += `<section id="${section.title}">${section_html}</section>`;
|
|
//Assigning ids allows for the possibility of fragment linking.
|
|
}
|
|
break;
|
|
|
|
default:
|
|
for(item of list.list){
|
|
html += gen_item_html(item);
|
|
}
|
|
|
|
html = (list.hasOwnProperty("ordered") && list.ordered) ? `<ol>${html}</ol>` : `<ul>${html}</ul>`;
|
|
//Create an ordered list if list has the property "ordered".
|
|
}
|
|
|
|
return html;
|
|
|
|
}
|
|
|
|
function gen_item_html(item,type="default",subtype=null){
|
|
var item_html = "";
|
|
switch(type){
|
|
case "list-id":
|
|
if(lists[item].hasOwnProperty("hidden") && lists[item].hidden){
|
|
return "";
|
|
//Lists marked with the "hidden" attribute are in-development and should not be displayed on the Master List.
|
|
}
|
|
if(!lists[item].hasOwnProperty("title")){
|
|
lists[item].title = item;
|
|
//If a title is not set for the list, then just use its id.
|
|
}
|
|
var tooltip = "";
|
|
if(lists[item].hasOwnProperty("description")){
|
|
tooltip=lists[item]["description"];
|
|
//When hovering over a list in the directory, display its description as a tooltip.
|
|
}
|
|
var link = `href='index.php?page=lists&list=${item}' target='_self'`;
|
|
//By default, lists have internal links that change the query value to that list's title. Internal links should open in the same tab.
|
|
if(lists[id].hasOwnProperty("type") && lists[item].type=="external"){
|
|
link = `href='${lists[item]["link"]}' target='_blank'`;
|
|
//For external lists, use their link instead of an internal link. External links should open in a new tab.
|
|
}
|
|
item_html = `<li title="${tooltip}"><a ${link}>${lists[item].title}</a></li>`;
|
|
//The Master List contains a link to every other list in the JSON file.
|
|
break;
|
|
|
|
case "quote":
|
|
//Format quotes like they are formatted on Goodreads.
|
|
if(!item.hasOwnProperty("quote")){
|
|
//If the quote is blank, then things are going to get real weird. Most likely, this will be caused by a typo, so this branch is a safeguard against any resulting errors.
|
|
return "";
|
|
}
|
|
item_html = "<p>";
|
|
if(item.hasOwnProperty("title")){
|
|
item_html += `<b>${item.title}</b><br />`;
|
|
//Add a title if the quote has one (e.g. "The Litany Against Fear").
|
|
}
|
|
item_html += `“${item.quote}”<br>`;
|
|
//Add the text of the quote.
|
|
if(item.hasOwnProperty("card") && !item.hasOwnProperty("quotee")){
|
|
item.quotee="";
|
|
//If a flavor text doesn't have a quotee, don't write "Unknown".
|
|
}
|
|
|
|
item_html += ` — ${item.hasOwnProperty("quotee") ? item.quotee : "Unknown"}`;
|
|
//Add the quotee's name, or "Unknown" if one is not specified.
|
|
if(item.hasOwnProperty("source")){
|
|
if(item.hasOwnProperty("quotee") && item.quotee!=""){
|
|
item_html += ", ";
|
|
//Unless there is no quotee, separate the quotee from the source with ", "
|
|
}
|
|
item_html += item.source;
|
|
//Add the source if the quote has one.
|
|
}
|
|
|
|
if(item.hasOwnProperty("card")){
|
|
if(item.quotee!=""||item.hasOwnProperty("source")){
|
|
item_html += `, `;
|
|
//Separate quotee or source from card title with ", "
|
|
}
|
|
item_html += `<a target='_blank' href='https://gatherer.wizards.com/pages/card/Details.aspx?multiverseid=${item.multiverseid}'>${item.card}</a> (Magic: the Gathering)`;
|
|
}
|
|
item_html += "</p><hr />";
|
|
//Delimit the quotes with a horizontal rule.
|
|
break;
|
|
|
|
case "kv-pair":
|
|
if(!(item.hasOwnProperty("k")&&item.hasOwnProperty("v"))||Object.keys(item).length==1){
|
|
var key = Object.keys(item)[0];
|
|
item["k"] = key;
|
|
item["v"] = item[key];
|
|
//If the item is an object containing a single key-value pair, then use that pair as the k and v for displaying.
|
|
}
|
|
if(item.hasOwnProperty("link")){
|
|
item_html = `<span class="list-key"><a href="${item.link}" target="_blank">${item["k"]}</a></span>`;
|
|
} else {
|
|
item_html = `<span class="list-key">${item["k"]}</span>`;
|
|
}
|
|
item_html += ` — ${item["v"]}`;
|
|
|
|
if(item.hasOwnProperty("list") && Array.isArray(item.list)){
|
|
//Sublist time, baby!
|
|
var temp = {
|
|
"title":item_html,
|
|
"list":item.list,
|
|
"ordered": (item.hasOwnProperty("ordered")) ? item.ordered:undefined,
|
|
"dropdown": (item.hasOwnProperty("dropdown")) ? item.dropdown:undefined,
|
|
"dropdown-open": (item.hasOwnProperty("dropdown-open")) ? item["dropdown-open"]:undefined
|
|
};
|
|
//If a key-value pair has a list key with an array attribute, then reformat it as a sublist whose title is the kv pair and whose list is the array.
|
|
item_html = gen_item_html(temp,type="sublist")
|
|
} else {
|
|
item_html = `<li>${item_html}</li>`;
|
|
}
|
|
break;
|
|
|
|
|
|
case "exhibit":
|
|
var tooltip, alt, text, img_src, image;
|
|
tooltip = text = img_src = image = "";
|
|
classes = {"div":[],"img":[],"a":[]}
|
|
switch(subtype){
|
|
case "album":
|
|
tooltip = `${item.title} (${item.year}) - ${item.artist}`;
|
|
alt = tooltip;
|
|
img_src = item.cover;
|
|
text = `${item.title}<br />${item.artist}<br />(${item.year})`;
|
|
break;
|
|
case "movie":
|
|
tooltip = `${item.title} (${item.year})`;
|
|
alt = tooltip;
|
|
img_src = item.poster;
|
|
text = `${item.title}<br />(${item.year})`;
|
|
break;
|
|
case "mtg-card":
|
|
var gatherer_link = "https://gatherer.wizards.com/pages/card/Details.aspx?multiverseid=";
|
|
var gatherer_image = "https://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=";
|
|
|
|
if(item.hasOwnProperty("multiverseid")&&!item.hasOwnProperty("link")){
|
|
if(Array.isArray(item.multiverseid)){
|
|
//If the multiverseid is an array, treat it as a transform card and link to the Gatherer page for the front half.
|
|
item.link = gatherer_link+item.multiverseid[0];
|
|
} else {
|
|
item.link = gatherer_link+item.multiverseid;
|
|
}
|
|
//If there's no alternate link specified, then use the multiverseid to generate the Gatherer link.
|
|
}
|
|
if(item.hasOwnProperty("multiverseid")&&!item.hasOwnProperty("image")){
|
|
if(Array.isArray(item.multiverseid)){
|
|
img_src = [];
|
|
for(id of item.multiverseid){
|
|
img_src.push(gatherer_image+id+"&type=card")
|
|
}
|
|
//If there are multiple (two) multiverseids, make a link src for each of them for convenience.
|
|
} else {
|
|
img_src = gatherer_image+item.multiverseid+"&type=card";
|
|
}
|
|
//If there's no alternate link specified, then use the multiverseid to generate the Gatherer link for the image.
|
|
} else {
|
|
if(Array.isArray(item.image)){
|
|
img_src=[];
|
|
for(src of item.image){
|
|
img_src.push(src);
|
|
}
|
|
//If multiple (two) image sources are specified, create an array of both.
|
|
} else {
|
|
img_src = item.image;
|
|
}
|
|
}
|
|
if(item.hasOwnProperty("name")){
|
|
alt = tooltip = item.name;
|
|
}
|
|
|
|
if(Array.isArray(img_src)){
|
|
image = `<img title="${tooltip}" alt="${tooltip}" src="${img_src[0]}" class="gallery exhibit-${subtype} card-front ${classes.img.join(" ")}" /><img title="${tooltip}" alt="${tooltip}" src="${img_src[1]}" class="gallery exhibit-${subtype} card-back ${classes.img.join(" ")}" />`
|
|
//Two srcs are to be treated as those of a transform card, which switches on hover.
|
|
classes.div.push("card-transform");
|
|
}
|
|
|
|
|
|
break;
|
|
default:
|
|
}
|
|
|
|
if(image==""||!image){
|
|
image = image = `<img title="${tooltip}" alt="${tooltip}" src="${img_src}" class="gallery exhibit-${subtype} ${classes.img.join(" ")}" />`;
|
|
//If the image variable is not already defined, then generate it.
|
|
}
|
|
//Gallery items must have an image.
|
|
if(item.hasOwnProperty("link")){
|
|
image = `<a href='${item.link}' target='_blank' class="${classes.a.join(" ")}">${image}</a>`;
|
|
//If there's a link associated with the exhibit, put it on the image.
|
|
}
|
|
item_html = (text=="") ? image : `${image}<br />${text}`;
|
|
//If there's no text, then there's no need for a line break.
|
|
item_html = `<div class="gallery exhibit-${subtype} ${classes.div.join(" ")}">${item_html}</div>`
|
|
|
|
break;
|
|
|
|
case "sublist":
|
|
//Sublists can be any type (most likely default or key-value), so the best way to deal with them is recursion.
|
|
if(item.hasOwnProperty("dropdown") && item.dropdown){
|
|
var open = (item.hasOwnProperty("dropdown-open")&&item["dropdown-open"])?"open":"";
|
|
item_html = `<li><details ${open}><summary>${item.title}</summary>${gen_list_html(item)}</details></li>`;
|
|
} else {
|
|
item_html = `<li>${item.title}${gen_list_html(item)}</li>`;
|
|
}
|
|
|
|
|
|
break;
|
|
|
|
default:
|
|
if(["string","number"].includes(typeof item)){
|
|
item_html = `<li>${item}</li>`;
|
|
//If the element is a simple string or number, then we don't need to do any special formatting.
|
|
} else if (typeof item === "object"){
|
|
var keys = Object.keys(item);
|
|
if(keys.length == 1){
|
|
if (Array.isArray(item[keys[0]])){
|
|
//An item that is a dictionary only containing a list is probably a sublist. Format it as such, and pass it back through this switch statement.
|
|
var temp = {
|
|
"title":keys[0],
|
|
"type":"default",
|
|
"list":item[keys[0]]
|
|
};
|
|
item_html = gen_item_html(temp,"sublist");
|
|
} else {
|
|
item_html = gen_item_html(item,"kv-pair");
|
|
//A item that is dictionary with one key, whose value is not a list, is to be treated as a term-explanation type key-value pair.
|
|
}
|
|
} else {
|
|
item_html = gen_item_html(item,"sublist");
|
|
//At this point, if there is no other specification, an item that's an object is probably a sublist.
|
|
}
|
|
}
|
|
}
|
|
return item_html;
|
|
}
|
|
|
|
function str2html(md){
|
|
//This function replaces escapes commands and Markdown with their HTML equivalents.
|
|
html = md.replaceAll("\n","<br />");
|
|
return html;
|
|
}
|
|
|
|
|
|
document.getElementById("list-title").innerHTML = selected_list.title;
|
|
if(selected_list.hasOwnProperty("description")){
|
|
document.getElementById("list-description").innerHTML = selected_list.description;
|
|
} else {
|
|
document.getElementById("list-description").style.display = "none";
|
|
//If the list has no description, hide the element to remove the awkward space from the padding.
|
|
}
|
|
//Generate the article header from the list's title and description.
|
|
|
|
document.getElementById("list-container").innerHTML += str2html(gen_list_html(selected_list));
|
|
//Call the gen_list_html function to convert the list from a JSON object to sophisticated HTML.
|
|
|
|
if(list_id != "master"){
|
|
document.getElementById("lists").innerHTML += "<br /><p><a id='list-return-link' href='index.php?page=lists&list=master'>Return to Master List ↩</a></p>";
|
|
//Add a return link to the bottom of the article.
|
|
}
|