User:Okurelin/common.js

console.log("script is running!"); var d = document;

var activator = d.createElement("button"); activator.classList.add("activator"); activator.style.height = "75px"; activator.textContent = "Activate Theme"; activator.addEventListener("click", activateTheme);

var body = d.querySelector("body"); body.appendChild(activator);

body.style.position = "relative"; activator.style.position = "fixed"; activator.style.bottom = "0px"; activator.style.zIndex = "999";

function activateTheme {

var charArray = [ "Kohaku Oukawa", "Aira Shiratori", "Tomoya Mashiro", "Yuta Aoi", "Hinata Aoi", "Tori Himemiya", "Hiiro Amagi", "Mitsuru Tenma", "Midori Takamine", "Hajime Shino", "Sora Harukawa", "Tetora Nagumo", "Shinobu Sengoku", "Tsukasa Suou", "Mao Isara", "Arashi Narukami", "Natsume Sakasaki", "Tatsumi Kazehaya", "Mika Kagehira", "Hokuto Hidaka", "Ibara Saegusa", "Yuzuru Fushimi", "Adonis Otogari", "Jun Sazanami", "Koga Oogami", "HiMERU", "Subaru Akehoshi", "Mayoi Ayase", "Makoto Yuuki", "Souma Kanzaki", "Wataru Hibiki", "Kuro Kiryu", "Eichi Tenshouin", "Kaoru Hakaze", "Izumi Sena", "Shu Itsuki", "Nagisa Ran", "Niki Shiina", "Ritsu Sakuma", "Chiaki Morisawa", "Keito Hasumi", "Kanata Shinkai", "Tsumugi Aoba", "Hiyori Tomoe", "Madara Mikejima", "Leo Tsukinaga", "Nazuna Nito", "Rei Sakuma", "Rinne Amagi", "Akiomi Kunugi", "Jin Sagami", "Seiya Hidaka", "Anzu" ];

function adjustImages { var storyImgs = d.querySelectorAll("img[data-image-name*='Render']");

storyImgs.forEach(function (img) {

img.style.maxWidth = "100px"; img.style.height = "auto"; img.classList.add("story-image");

// console.log("find char name start")

var charFileName = img.getAttribute("data-image-name"); // console.log("char file name is...") // console.log(charFileName)

var charName = findCharName(charFileName); //console.log(`the character name found is ${charName}`)

var nameNode = d.createElement("p"); nameNode.appendClass = "speaker-name"; nameNode.textContent = charName;

if (window.matchMedia("(max-width: 700px)").matches) { nameNode.style.textAlign = "left"; nameNode.textContent += ":" }

img.insertAdjacentElement("afterend", nameNode);

//select td parent of image // let parentTd = img.parentNode.parentNode.parentNode var parentTd = img.closest("td"); var nextTd = parentTd.nextSibling; if (nextTd) { nextTd.classList.add("nextTd"); } else { return; };

//need to account for edge cases in which //there may be 2 images in one cell //after this loop, find all td with 2 div class=center //with the character images and then appropriately //align them possibly stacked

parentTd.style.verticalAlign = "top"; parentTd.style.paddingTop = "1em"; parentTd.style.fontSize = "14px"; parentTd.style.lineHeight = "1.2em";

// console.log("showing contents")

var dialogueBox = d.createElement("div"); dialogueBox.classList.add("dialigue-box");

//also need to account for text content which is not contained in a p tag or other tag for some reason

// let nonParagraphContent = nextTd.textContent

// let newP = d.createElement("p") // newP.textContent = nonParagraphContent

// dialogueBox.appendChild(newP)

//potentially instead of this //with the above code making a new p     //and the below code taking p tags, //just grab the inner html of the nextTd //and simply add that to the dialogueBox...     //worth testing out...      //// the above note has been implemented! obsolete code commented out

// let contents = d.querySelectorAll(".nextTd > *") // // console.log(contents)

// contents.forEach(node => {     //     dialogueBox.appendChild(node)      // })

var contents = nextTd.innerHTML;

dialogueBox.innerHTML = contents;

parentTd.appendChild(dialogueBox);

nextTd.remove;

parentTd.style.display = "flex"; parentTd.style.alignItems = "flex-start"; parentTd.style.justifyContent = "flex-start";

if (window.matchMedia("(max-width: 700px)").matches) { parentTd.style.flexDirection = "column"; }     if (window.matchMedia("(min-width: 701px)").matches) { parentTd.style.flexDirection = "row"; }

//may need to adjust this part to make sure it     //will hit all images even if two or more are //sharing a td initially

var imageDiv = img.parentNode.parentNode;

if (window.matchMedia("(min-width: 701px)").matches) { imageDiv.style.width = "150px"; imageDiv.style.flex = "0 0 150px"; dialogueBox.style.paddingLeft = "2em"; }

});

if (window.matchMedia("(max-width: 700px)").matches) { storyImgs.forEach(function (img) {       img.style.display = "none"      }); }

if (window.matchMedia("(min-width: 701px)").matches) { storyImgs.forEach(function (img) {       img.style.display = "static"      }); }

}

adjustImages;

// Function for parsing file names for each character

function findCharName(file) { if (file.includes("Render")) { //search for string of character's name with if/else statement //and return their name without the rest of the filename. //console.log(file)

var name = "";

var parseName = function (file, chName) { if (file.includes(chName)) { name = chName; }       return name; };

charArray.forEach(function (chName) {

if (parseName(file, chName)) { console.log(name); return name; }

});

return name;

} //else if other kind of render, card? character? need to double check... //may not need to do this part bc i just reduced the //requirement for matching to "Render" from "Dialogue Render" but we'll see, it works rn so imma leave it for now... yeah

}

}