You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
4.8 KiB
103 lines
4.8 KiB
//comic_archive.js was created by geno7
|
|
|
|
//Writing sections of the archive page involves 2 steps:
|
|
//first, use the writeArchive function in this .js file. set the parameters (the stuff inside the parenthesis, comma separated) to toggle options.
|
|
//then, to place that section of the archive on the html page, you'd make a div, and give that div a class name of whatever you've called that section of the archive in the first parameter.
|
|
//if you put anything in that div, the list of comics will get appended after it. i.e. you can put the title of that specific section as a header in that div.
|
|
|
|
/* writeArchive(
|
|
"chrono", //class of the div that you want this section of the archive to appear in. to have it be on your html page, make an empty div with this class.
|
|
1, //earliest page to list
|
|
maxpg, //latest page to list. setting to maxpg will make it automatically update with the latest page
|
|
0, //if set to 0, list is displayed "latest first". if set to -1, list is displayed chronologically
|
|
false, //if set to true, each comic will have its own thumbnail image next to it. if a comic doesn't have its own thumbnail, it'll be set to the default thumbnail.
|
|
true //if set to true, each comic will have a display number
|
|
);
|
|
*/
|
|
/* writeArchive("lastfirst", 1, maxpg, 0, true,true); */
|
|
|
|
writeArchive("chapter1",1,19,0,false,true) //writeArchive is for listing a RANGE of pages, take advantage of this by using headers to divide them into chapters or by month
|
|
|
|
writeArchive("chapter2", 20, 21, 0, false,true);
|
|
|
|
writeArchive("chapter3", 9, 12, -1, false,false);
|
|
|
|
writeArchive("chapter4", 13, 15, -1, false,false);
|
|
|
|
//below this point is stuff you don't really need to pay attention to if you're not super familiar with JS
|
|
|
|
function writeArchive(divClass, min, max, reverseOrder, useThumbs,useNums) {
|
|
//create a table to put the archive data
|
|
let archiveTable = document.createElement("TABLE");
|
|
archiveTable.setAttribute("class", "archiveTable"); //set class to archiveTable for css styling
|
|
let getDiv = document.getElementsByClassName(divClass)[0]; //get div class
|
|
getDiv.appendChild(archiveTable);
|
|
//make the table from the currently available comics
|
|
for (i = min; i <= max; i++) {
|
|
let row = archiveTable.insertRow(reverseOrder); //if reverseOrder is set to 0 it'll reverse the order, otherwise it'll display it in regular order
|
|
|
|
//insert table cells
|
|
let cellThumb = useThumbs ? row.insertCell() : 0; //only insert thumbs and number rows if useThumbs and useNums are toggled respectively
|
|
let cellNum = useNums ? row.insertCell() : 0;
|
|
|
|
let cellTitle = row.insertCell();
|
|
let cellDate = row.insertCell();
|
|
|
|
//default values when you don't have page data set
|
|
let pgTitle = "Page " + i;
|
|
let pgDate = "";
|
|
let pgNum = "";
|
|
|
|
//url of thumbnail
|
|
let pgThumb = thumbFolder + "/" + image + i + "." + thumbExt;
|
|
//url of default thumbnail
|
|
let pgThumbDefault = thumbFolder + "/" + thumbDefault + "." + thumbExt;
|
|
|
|
if (pgData.length >= i) {
|
|
//set values to the values indicated in the pgData object if available
|
|
if (pgData[i - 1].title) {
|
|
pgTitle = pgData[i - 1].title;
|
|
}
|
|
if (pgData[i - 1].date) {
|
|
pgDate = pgData[i - 1].date;
|
|
}
|
|
if (pgData[i - 1].date) {
|
|
pgDate = pgData[i - 1].date;
|
|
}
|
|
if (pgData[i - 1].pgNum) {
|
|
pgNum = pgData[i - 1].pgNum;
|
|
}
|
|
}
|
|
|
|
//make the whole row a clickable link to the corresponding comic
|
|
row.setAttribute("class", `archiveRow`);
|
|
|
|
let linkToComic = `${indexPage}?pg=${i + navScrollTo}`;
|
|
|
|
row.addEventListener("click", () => {
|
|
window.location.href = linkToComic;
|
|
});
|
|
|
|
if (useThumbs) {
|
|
//draw thumbnails if you have thumbnails toggled
|
|
cellThumb.innerHTML = `<img alt="${pgTitle}" title="${pgTitle}" src="${pgThumb}" onerror="javascript:this.src='${pgThumbDefault}'"/>`;
|
|
cellThumb.setAttribute("class", "archiveCellThumb");
|
|
}
|
|
|
|
if (useNums) {
|
|
//same for numbers
|
|
cellNum.innerHTML = `<span><strong>${pgNum}</strong></span>`;
|
|
cellNum.setAttribute("class", "archiveCellNum");
|
|
}
|
|
|
|
//draw each row
|
|
cellTitle.innerHTML = `<span><strong>${pgTitle}</strong></span>`;
|
|
cellTitle.setAttribute("class", "archiveCellTitle");
|
|
cellDate.innerHTML = "<span> " + pgDate + " </span>";
|
|
cellDate.setAttribute("class", "archiveCellDate");
|
|
console.log(i + `created row - ${pgTitle} - ${linkToComic}`);
|
|
|
|
//left align text if not using thumbnails
|
|
cellTitle.className += " leftAlignTableText";
|
|
}
|
|
} |