-Master List
+List
diff --git a/scripts/lists.js b/scripts/lists.js
index bc8593a..1494f52 100644
--- a/scripts/lists.js
+++ b/scripts/lists.js
@@ -10,14 +10,26 @@ if(lists.hasOwnProperty(list_id)){
//If the list id in the query is invalid, go back to the main list.
}
-$("#list-title")[0].innerText = list.title;
-if(list.hasOwnProperty("description")){
- $("#list-description")[0].innerText = list.description;
+if(list.hasOwnProperty("external") && list.external){
+ setTimeout(function(){location.assign(list["link"])}, 600);
+ //If the list specified in the query has the external property, then redirect to the external link. Note that because external lists in the master list are links to external URLs, the only situation where this will arise is if someone manually enters the list name into the query. 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.
}
+$("#list-title")[0].innerHTML = list.title;
+if(list.hasOwnProperty("description")){
+ $("#list-description")[0].innerHTML = list.description;
+}
+//Generate the article header from the list's title and description.
+
if(list.hasOwnProperty("ordered") && list.ordered){
$("#list-container")[0].innerHTML += "
";
//Create an ordered list of the list has attribute "ordered":true.
+} else if (list.hasOwnProperty("inline") && list.inline){
+ $("#list-container")[0].innerHTML += "";
+ //Inline lists do not use HTML list tags but instead display list elements side by side.
} else {
$("#list-container")[0].innerHTML += "";
//By default, lists are unordered.
@@ -26,11 +38,29 @@ if(list.hasOwnProperty("ordered") && list.ordered){
$("#lists")[0].innerHTML += "
Return to Master List ⮌";
//Add a return link to the bottom of the article.
+if(!list.hasOwnProperty("type")){
+ list["type"] = "default";
+}
-switch(list_id){
+switch(list["type"]){
case "master":
+ //The master list has its own special format to follow.
for(id in lists){
- var item = `${lists[id].title}`;
+ if(lists[id].hasOwnProperty("hidden") && lists[id].hidden){
+ continue;
+ }
+ var tooltip = "";
+ if(lists[id].hasOwnProperty("description")){
+ tooltip=lists[id]["description"];
+ //When hovering over a list in the directory, display its description as a tooltip.
+ }
+ var link = `href='index.php?page=lists&list=${id}' 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("external") && lists[id].external){
+ link = `href='${lists[id]["link"]}' target='blank_'`;
+ //For external lists, use their link instead of an internal link. External links should open in a new tab.
+ }
+ var item = `${lists[id].title}`;
$("#list")[0].innerHTML += item;
//The Master List contains a link to every other list in the JSON file.
}
@@ -38,6 +68,7 @@ switch(list_id){
//"Return to Master List" link is not needed on Master List itself.
break;
case "quotes":
+ //Make the quotes section look like a quote board on Goodreads.
for(quote of list.list){
var item = "";
if(quote.hasOwnProperty("title")){
@@ -74,7 +105,33 @@ switch(list_id){
$("#list")[0].innerHTML += item;
}
break;
-
+ case "key-value":
+ //Handle key-value or term-definition type data.
+ for(pair of list.list){
+ var item = "";
+ if(pair.hasOwnProperty("link")){
+ item = `${pair["k"]}`
+ } else {
+ item = `${pair["k"]}`
+ }
+ item += ` — ${pair["v"]}`;
+ $("#list")[0].innerHTML += `
${item}`;
+ }
+ break;
+ case "albums":
+ for(album of list.list){
+ var tooltip = `${album.title} — ${album.artist} (${album.year})`;
+ //Display album data when hovering over cover art.
+ var item = `
`;
+ //Display the album cover. Can be an external link or internal path.
+ if(album.hasOwnProperty("link")){
+ item = `${item}`;
+ //If there's a link to the album, put it on the cover.
+ }
+ item = `${item}
${album.title}
${album.artist}
${album.year}
`;
+ $("#list")[0].innerHTML += `${item}`;
+ }
+ break;
default:
for(item of list.list){
$("#list")[0].innerHTML += `${item}`;
diff --git a/styles/reset.css b/styles/reset.css
index d2f3c7d..980eb1f 100644
--- a/styles/reset.css
+++ b/styles/reset.css
@@ -50,5 +50,8 @@ b{
font-weight:bold;
}
i {
- font-style: italic;
+ font-style: italic;
+}
+u{
+ text-decoration: underline;
}
diff --git a/styles/theme.css b/styles/theme.css
index 633a96f..6f55057 100644
--- a/styles/theme.css
+++ b/styles/theme.css
@@ -102,8 +102,8 @@ footer{
}
a{
- color:inherit;
- text-decoration:inherit;
+ color:var(--azure);
+ text-decoration:underline;
}
.nav-tab{
@@ -164,3 +164,30 @@ article{
ul{
list-style-type: disc;
}
+
+ul li ul{
+ list-style-type: circle;
+ /*Nested list*/
+}
+
+u{
+ text-underline-offset: 0.14em;
+ /*Without this, underlines won't show under descender characters (g,y,j,p,q)*/
+}
+
+.list-key{
+ font-weight:bold;
+}
+
+.list-album{
+ display:inline-block;
+ margin:0.75em;
+ text-align:center;
+ padding:0;
+}
+
+.list-album-cover{
+ width:10em;
+ height:10em;
+ margin:0;
+}