(function () {
'use strict';
const stylesheet = document.querySelector("#stylesheet");
const toggleStylesheetLightButton = document.querySelector("#light");
const toggleStylesheetDarkButton = document.querySelector("#dark");
const navMenu = document.querySelector("#nav-menu");
navMenu.offsetTop;
const mainPage = document.querySelector("#main-div");
const topBar = document.querySelector("#top-bar");
const lightDarkWarning = document.querySelector("#light-dark-warning");
const abnormalLogo = document.querySelector("#logo");
const abnormalLogoStylesheet = document.querySelector("#logo-stylesheet");
const footerAbnormal = document.querySelector("#footer-fourth");
const introScreen = document.querySelector("[data-intro-screen]");
const stylesheetSelector = document.createElement("div");
const previousStylesheet = document.createElement("div");
const menuButton = document.querySelector("#menu-button-open-close");
const navMobile = document.querySelector("#mobile-nav-menu");
const menuBar = document.querySelector("#mobile-menu-bar");
const pageName = document.querySelector("#page-name");
/*change prefix from "./" for test page inside the issue's
folder to "./issue-number/" for root index file */
const prefix = "./159/";
const articles = {
"Featured Art": [
{
title: "Self-portrait by Frida Kahlo",
"sub-title": "",
author: "",
description: [
"Frida Kahlo, born Magdalena Carmen Frida Kahlo y Calderón; 6 July 1907 – 13 July 1954) was a Mexican painter known for her many portraits, self-portraits, and works inspired by the nature and artifacts of Mexico. Inspired by the country's popular culture, she employed a naïve folk art style to explore questions of identity, postcolonialism, gender, class, and race in Mexican society. Her paintings often had strong autobiographical elements and mixed realism with fantasy. In addition to belonging to the post-revolutionary Mexicayotl movement, which sought to define a Mexican identity, Kahlo has been described as a surrealist or magical realist.",
"Born to a German father and a mestiza mother, Kahlo spent most of her childhood and adult life at La Casa Azul, her family home in Coyoacán, now publicly accessible as the Frida Kahlo Museum. Although she was disabled by polio as a child, Kahlo had been a promising student headed for medical school until a traffic accident at age eighteen, which caused her lifelong pain and medical problems. During her recovery, she returned to her childhood hobby of art with the idea of becoming an artist.",
"Kahlo's interests in politics and art led to her joining the Mexican Communist Party in 1927, through which she met fellow Mexican artist Diego Rivera. The couple married in 1928, and spent the late 1920s and early 1930s travelling in Mexico and the United States together. During this time, she developed her artistic style, drew her main inspiration from Mexican folk culture, and painted mostly small self-portraits which mixed elements from pre-Columbian and Catholic beliefs. Her paintings raised the interest of Surrealist artist André Breton, who arranged for Kahlo's first solo exhibition at the Julien Levy Gallery in New York in 1938.",
'Continue reading...',
],
imgUrl: `${prefix}frida-1.jpg`,
link: `https://southerncrossreview.org/127/frida-letter-eng.html`,
poem: false,
mainImg: true,
},
],
Fiction: [
{
title: "The Other Me",
"sub-title": "",
author: "Frank Thomas Smith",
description: [
"Joe Biden's refusal at 81 to stop trying to stay on as POTUS (President of the United States in secret Service double-talk) reminds me of my own history. It was like this:Vienna: it was my last meeting before mandatory retirement, something I myself had mandated. I had noticed that old people never want to let go; my father and his father were like that. My grandfather was still haunting the Board meetings at ninety. My father merely held onto the company’s reins until 75, when I took over. Although I knew that I would also some day reach the age of mandatory retirement, I mandated it anyway; 65 seems as remote to thirty-year-olds as thirty does to teenagers.",
"General Meetings are still always held in romantic foreign places. Considering that our head office and main manufacturing units are in Milwaukee, almost anywhere fits the description. This has the dual advantage of keeping everyone in a good mood and limiting the number of stockholders attending. I arrived a day early, wishing to renew my acquaintance with Vienna, a city very rich in history and beauty and blood and which never changes, at least not outwardly.",
],
imgUrl: `${prefix}cafe-sperl.jpg`,
link: `${prefix}fts-other-me.html`,
poem: false,
mainImg: false,
},
{
title: "The Queen of Spades",
"sub-title": "",
author: "Alexander Pushkin",
description: [
"Translated from the Russian by Mrs. Sutherland Edwards",
"There was a card party at the rooms of Narumoff, a lieutenant in the Horse Guards. A long winter night had passed unnoticed, and it was five o'clock in the morning when supper was served. The winners sat down to table with an excellent appetite; the losers let their plates remain empty before them. Little by little, however, with the assistance of the champagne, the conversation became animated, and was shared by all.",
'"How did you get on this evening, Surin?" said the host to one of his friends.',
'"Oh, I lost, as usual. I really have no luck. I play mirandole. You know that I keep cool. Nothing moves me; I never change my play, and yet I always lose."',
],
imgUrl: `${prefix}queen-of-spades-1-2.png`,
link: `${prefix}queen-of-spades-1-2.html`,
poem: false,
mainImg: false,
},
],
Anthroposophy: [
{
title: "The History and Actuality of Imperialism",
"sub-title":
"Lecture one of three, Dornach, Switzerland – February 20 1920",
author: "Rudolf Steiner",
description: [
"Today's lecture will be episodic, a kind of interspersion into our considerations, because I would like our English friends, who will soon be going home, to be able to take as much as possible with them. Therefore I will structure this lecture in a way to be as effective as possible. Today I would like, at first historically, not so much referring to the present – that can be done tomorrow perhaps – I would like to say something about imperialism, historically, but in a spiritual-scientific sense.",
"Imperialism is a much discussed phenomenon recently, and discussed by those who are more or less conscious of its relationship to the total phenomena of the present time. But when such things are discussed, what is not taken into account, or at least not enough, is that we live within the historical course of events, that we stand in a very definitive historical evolutionary epoch and that we can only understand this evolutionary epoch if we know where the phenomena which surround us, in which we live, come from.",
"Basically, what is most effective today and what will show itself to be an even more effective imperialism in the future will be its bearer – the Anglo-American people. As far as its name is concerned, it has shown itself to be something new: economic imperialism. But most important is the fact that everything said about this economic imperialism is untrue, everything, I would say, seems to be hanging in the air, which more or less consciously leads to untruthfulness. So in order to recognize how in these times realities are completely different from what is said about them, a more profound observation of the historical course of events is necessary.",
],
imgUrl: `${prefix}imperialism1.jpg`,
link: `https://southerncrossreview.org/73/imperialism1.html`,
poem: false,
mainImg: false,
},
{
title: "Characteristics of Judaism & Zionism",
"sub-title":
"Question and answer period for workers building the First Goetheanum",
author: "Rudolf Steiner",
description: [
"Editor's note: This lecture was given at a time when the question of the Zionists' dream of a Jewish state in Palestine collided with the preference of other Jews for assimilation into European society. Rudolf Steiner, though not Jewish, clearly favored assimilation. This position was coherent given his concept of a Threefold Society in which the political state is only responsible for human and civil rights, whereas culture and religion is the province of the free spiritual/cultural sphere of society. Thus he considered a Jewish state reactionary. \"The attempt to set up a Jewish State denotes a decidedly reactionary drift, a retrogression that leads nowhere and runs counter to progress.\" He did not of course foresee the Nazis and the holocaust.",
"Question: Have the Jews, as a people, fulfilled their mission in the evolution of humanity?",
"Dr. Steiner: Discussion on this subject is unfortunately all too apt to lead to propaganda. But what must be said quite objectively on the subject has nothing whatever to do with propaganda in any shape or form.",
" The way in which the development of the Jewish people proceeded in olden times was a most important preparation for the subsequent rise of Christianity. Before Christianity came into the world, the Jews had a deeply spiritual religion but, as I have told you, it was a religion which took account only of the spiritual law of nature. — If a Jew were asked: Upon what does the coming of spring depend? — he said: Upon the will of Jehovah! — Why is so-and-so an unrighteous man? — Because Jehovah wills it so! — Why does famine break out in a country? — Because Jehovah wills it! — Everything was referred to this one God. And that was why the ancient Jews did not live at peace with the peoples around them, whom they did not understand and who did not understand them. The neighbouring peoples did not worship this one and only God in the same way but recognised spiritual beings in all the phenomena of nature — a multiplicity of spiritual beings.",
],
imgUrl: `${prefix}judaism.jpg`,
link: `https://southerncrossreview.org/76/steiner-judaism.html`,
poem: false,
mainImg: false,
},
{
title: "The Historical Spread of Christianity and Islam",
"sub-title": "",
author: "Rudolf Steiner",
description: [
"19 March 1924, Dornach, GA 353 (questions by the workers building the First Goetheanum)",
"The question which has been asked, Gentlemen, is wide-ranging, and we’ll need a few sessions to discuss it.",
"Today I’d like to go into more detail about the later part of the time when Christianity spread. If we look at Christianity today, it has three forms. These have to be considered if we want to find the right way of tracing what really happened because of the Mystery of Golgotha, considering the ideas that are held today.",
"Let us first of all consider Europe. As I have shown the other day, we have Asia over there, with Europe really a kind of peninsula of Asia. As you know, it looks like this [sketching on the blackboard]. This would be Norway, then Russia over here; this takes us to the north coast of Germany; and here is Denmark. Over here we come to Holland, France, and this would be Spain. Here we have Italy, Greece, the Black Sea, and we then come to Asia. Africa would be down below.",
],
imgUrl: `${prefix}islam-christianity.jpg`,
link: `${prefix}christianity-islam.html`,
poem: false,
mainImg: false,
},
{
title: "Anthroposophical Guidelines",
"sub-title": "",
author: "Rudolf Steiner",
description: [
"38. If one has been able to contemplate man in his image-nature and in his revealed spirituality in accordance with the indications given in the previous Guidelines, one stands in the spiritual world where one sees man as an active spiritual being, and also sees the psychic-moral laws in their reality. For the moral world-order appears now as the earthly likeness of an order belonging to the spiritual world. And the physical and moral world-orders bond themselves in unity.",
"39. The will comes from within man. It is completely foreign to the natural laws gained from the outer world. The sense organs’ similarity to external natural objects is discernible. The will can not yet manifest itself in their activities. The essence which is revealed in the rhythmic system is less similar to everything external. The will can intervene in this system to a certain extent. But this system is still involved with becoming and dying. The will is still bound by this.",
],
imgUrl: `${prefix}guidelines.jpg`,
link: `${prefix}guidelines-38-61.html`,
poem: false,
mainImg: false,
},
],
"Current Events": [
{
title: "The Candidate from Hell",
"sub-title": "The Man of the Moment (And What a Moment It Is!)",
author: "Tom Engelhardt",
description: [
"Donald Trump is all too literally the candidate from hell and, yes, he’s threatening to take the United States and the world to — no place else! — hell and back. He’s the greatest danger to this planet imaginable. And I’m not even thinking about what else he’d do, were he to win election 2024 and return to the Oval Office, having reassured his religious voters that, should they opt for him this November, they’ll never have to do so again. (“Get out and vote, just this time… You won’t have to do it anymore. Four more years, you know what? It’ll be fixed, it’ll be fine, you won’t have to vote anymore, my beautiful Christians.”)",
"Forget all of that, including the racism, the madness, the urge to transform this country into the all-American equivalent of an autocracy. Forget every last bit of it — even if, yes, that’s one hell of a lot to forget! Instead, focus on just one thing: Donald Trump and his crew, including that gem J.D. Vance, who attacked what he called “the Green New Scam” at the Republican convention, are determined to fossil-fuelize our future in a fashion never before seen, not at least under these circumstances.",
],
imgUrl: `${prefix}engelhardt-trump-from-hell.jpg`,
link: `${prefix}engelhardt-trump-from-hell.html`,
poem: false,
mainImg: false,
},
{
title: "Project 2025",
"sub-title": "",
author: "Shailly Gupta Barnes and Liz Theoharis",
description: [
"The Roman poet Juvenal coined the phrase “bread and circuses” nearly 2,000 years ago for the extravagant entertainment the Roman Empire used to distract attention from imperial policies that caused widespread discontent. Imagine the lavish banquets, gladiatorial bouts, use and abuse of young men and women for the pleasure of the rich, and so much more that characterized the later years of that empire. And none of it seems that far off from the situation we, in these increasingly dis-United States, find ourselves in today.",
"Although the Roman Empire described itself as being in favor of life and peace, the various Caesars and their enablers regularly dealt death and destruction in their wake. They spread the Pax Romana (the Roman Peace), including a taxation system that left the poor in debt servitude, a military that caused terror and violence across the then-known world, and a ruling authority that pitted whole communities against each other, while legislating who could associate with whom (passing marriage laws, for instance, that banned gay, inter-racial, or even cross-class marriages). The emperor in power in Jesus’s time, Caesar Augustus, was known for ushering in a Golden Age of Moral Values that went hand in hand with that Pax Romana, and it meant war and death, especially for the poor.",
],
imgUrl: `${prefix}project-2025.jpg`,
link: `${prefix}project-2025.html`,
poem: false,
mainImg: false,
},
],
"Social Science": [
{
title: "Favela Children - Chapter 13",
"sub-title": "",
author: "Ute Creamer",
description: [
"December 1974",
"My class, the sixth grade, and I decided to organize a Christmas party for poor children. We rehearsed a simple manger play in Portuguese. We worked for weeks making hand-made presents, in the school as well as at home: Some knitted dolls and animals, others made necklaces, some drew holy pictures. All baked Christmas cookies and put them in hand-painted cans. They went to so much trouble, as though they were making presents for their best friends.The Dutch family Ens put their sitio at our disposal and we spent the whole day there with the children: my pupils, their parents and the favela children, a total of about seventy. What luck that we have the Ens family! The festival was very nice. At eleven o'clock we met at the sitio, decorated the real, planted evergreen trees and played. My pupils had prepared some games such as sack-hopping, etc, with prizes. The ice was soon broken. The parents admired how Zéca and Cido played with the children.",
],
imgUrl: `${prefix}favela-cover.jpg`,
link: `${prefix}favela-children-13.html`,
poem: false,
mainImg: false,
},
],
"Children's Corner": [
{
title: "The Magic Mound - Chapter 16",
"sub-title": "",
author: "Frank Thomas Smith",
description: [
"Food was no problem in Maxalabora. One of the boys had only to stand on Platero's back and reach up to pluck tropical fruit from the trees. The was also a grape-like berry that grew on silver-colored bushes. They liked these best because of their exquisite sweetness. Even Platero ate them from Divines hand. Sergio said he had never heard of a donkey eating grapes before and Divino replied that no one had ever heard of a donkey that flew over chasms either. They agreed that Platero was an extraordinary donkey.",
"There was still no proper path to follow, so they continued heading south hoping for some clue to indicate where they should go. They were especially attentive to their surroundings at sunset, for they remembered how the raven's verse continued:",
"The first evening at sunset they saw nothing like an arc. The second night was no different. Divino mentioned Tamoshot several times, hoping he would appear unexpectedly as he had before. But Tamoshot did not come to show them the way. On the third day it rained. No water could get through their tararobes, but the ground became soggy and the going was more difficult. A thick fog descended over the forest and it got dark early because of the fog and rain. They were lucky to find a relatively comfortable place to spend the night between the exposed roots of a huge tree. Just as they were settling down to a miserable night the rain stopped and a wind rose that blew away the fog. They saw the sun set in the west. Then:",
],
imgUrl: `${prefix}magic-mound-cover.png`,
link: `${prefix}magic-mound-16.html`,
poem: false,
mainImg: false,
},
],
Memoir: [
{
title: "Exile’s End",
"sub-title": "",
author: "Frank Thomas Smith",
description: [
"Brooklyn Prep",
"Sometimes you make a choice that fails. The result may be positive or negative or simply meaningless. The failure of this choice was positive, although I didn't realize it until much later.",
"Upon graduating from elementary school, P.S. 152, I applied for admission to Brooklyn Preparatory High School. I don't remember why, although it was probably because some friend convinced me that it was cool and small and had a good but humble football team. It was located in downtown Brooklyn, so would require a trolley-bus trip to and from every day. This didn't bother me, on the contrary I rather looked forward to it. I had to take an admission test, which didn't bother me either, because until then I had found school examinations easy. Much later I came to suspect that the teachers who prepared them feared their teaching ability would appear incompetent if many students failed, in the public schools at least.",
],
imgUrl: `${prefix}exiles-end-cvr-sm.jpg`,
link: `${prefix}exiles-end-2.html`,
poem: false,
mainImg: false,
},
],
Poetry: [
{
title: "First Letter of Paul to the Corinthians",
"sub-title": "",
author: "St. Paul",
description: [
"If I speak in the tongues of men and of angels, but have not love,
I am a noisy gong or a clanging cymbal.
And if I have prophetic powers, and understand all mysteries and all knowledge,
and if I have all faith, so as to remove mountains,
but have not love, I am nothing.
If I give away all I have, and if I deliver up my body to be burned,
but have not love, I gain nothing.
Love is patient and kind; love does not envy or boast;
it is not arrogant or rude.
It does not insist on its own way; it is not irritable or resentful;
it does not rejoice at wrongdoing, but rejoices with the truth.",
],
imgUrl: `${prefix}greek-letter.jpg`,
link: `${prefix}paul-corinthians.html`,
poem: true,
mainImg: false,
},
{
title: "The Prophet",
"sub-title": "",
author: "Alexander Pushkin",
description: [
"My spirit wracked by thirst for grace,
I wandered in a darkling land
Till at a crossing of the ways
I saw a six-wing'd Seraph stand.
With fingers light as dream at night
He brushed mine eyes and they grew bright
Opening unto prophecies
Wild as a startled eaglet's eyes.",
],
imgUrl: `${prefix}pushkin-image.jpeg`,
link: `${prefix}pushkin-foreman.html`,
poem: true,
mainImg: false,
},
],
};
const articlesKeys = Object.keys(articles);
// Uncheck all other hidden checkboxes when one is checked
// colapses nav-menu dropdowns when a new one is expanded
function createNavMenu(navMenuElement) {
function createMenuLinks() {
articlesKeys.forEach((category) => {
// create dropdown menu if there is more than one article in category
if (articles[category].length === 1) {
if (!articles[category][0]["title"]) return;
const div = document.createElement("div");
const p = document.createElement("p");
const title = articles[category][0]["title"]
.toLowerCase()
.replace(/[^a-zA-Z0-9]/g, "");
p.className = "nav-menu-links";
p.innerText = category;
p.dataset.title = title;
div.appendChild(p);
navMenuElement.appendChild(div);
} else if (articles[category].length > 1) {
const content = document
.querySelector("[data-dropdown-template]")
.content.cloneNode(true);
const hiddenInput = content.querySelector("[data-hidden-input]");
const label = content.querySelector("[data-label]");
const title = content.querySelector("[data-title]");
const list = content.querySelector("[data-list]");
hiddenInput.id = `${category}-input`;
label.htmlFor = hiddenInput.id;
title.innerHTML = `${category} ▼`;
articles[category].forEach((article) => {
const li = document.createElement("li");
const title = article["title"]
.replace(/[^a-zA-Z0-9]/g, "")
.toLowerCase();
li.className = "nav-menu-links";
li.id = article["title"];
li.innerText = `${article.title} - ${article.author}`;
li.dataset.title = title;
list.appendChild(li);
});
navMenuElement.appendChild(content);
}
});
const createSingleLink = (title, id) => {
const div = document.createElement("div");
const p = document.createElement("p");
p.className = "nav-menu-links";
p.innerText = title;
p.dataset.title = id;
div.appendChild(p);
navMenuElement.appendChild(div);
};
createSingleLink("Letters to the Editor", "pic-nav-menu");
createSingleLink("Other Sections", "pic-nav-menu");
createSingleLink("Subscribe", "subscribe");
}
createMenuLinks();
//event listeners
const navmenuLinkArray = Array.from(
navMenuElement.querySelectorAll(".nav-menu-links"),
);
const scrollToTarget = (target) => {
const headerOffset = 120;
const elementPositon = target.getBoundingClientRect().top;
const offsetPosition = elementPositon + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: "smooth",
});
};
navmenuLinkArray.forEach((link) => {
link.addEventListener("click", () => {
let article = document.querySelector(`#${link.dataset.title}`);
scrollToTarget(article);
if (menuBar.dataset.opened === "true") {
menuBar.dataset.opened = "false";
}
});
});
const navChekboxes = Array.from(
document.querySelectorAll(".nav-hidden-inputs"),
);
navChekboxes.forEach((input) => {
input.addEventListener("change", () => {
navChekboxes.forEach((element) => {
console.log("hi");
if (element === input) return;
element.checked = false;
});
});
});
}
function checkAndReduce() {
const title = mainPage.querySelector("h2");
if (title.innerText.length > 20) {
title.style.fontSize = "2.5em";
}
}
function appendPicNavMenu() {
const picNavDiv = document
.querySelector("[data-pic-nav]")
.content.cloneNode(true);
const nav = picNavDiv.querySelector("nav");
nav.id = "pic-nav-menu";
const subscribeDiv = document
.querySelector("[data-subscribe-div]")
.content.cloneNode(true);
const subscribe = subscribeDiv.querySelector("div");
subscribe.id = "subscribe";
const firstChild = document.querySelector("#main-div").lastElementChild;
const navDiv = document.createElement("div");
navDiv.appendChild(picNavDiv);
navDiv.appendChild(subscribe);
firstChild.insertAdjacentElement("afterend", navDiv);
}
function createArticlePeek(object) {
const keys = Object.keys(object);
keys.forEach((key) => {
if (keys.indexOf(key) !== 0) {
const categoryTitle = document.createElement("h1");
categoryTitle.innerText = key;
categoryTitle.className = "category-title";
mainPage.appendChild(categoryTitle);
}
object[key].forEach((article) => {
const articleDiv = document
.querySelector("[data-article-template]")
.content.cloneNode(true);
const articleInnerDiv = articleDiv.querySelector("article");
const div1 = articleDiv.querySelector("div");
div1.cloneNode(true);
const titleElement = articleDiv.querySelector("h2");
const author = articleDiv.querySelector("h1");
const subTitle = articleDiv.querySelector("h3");
const description = articleDiv.querySelector(
"[data-article-description]",
);
const img = articleDiv.querySelector("[data-article-img]");
const linkContainer = articleDiv.querySelector("[data-link-container]");
const link = articleDiv.querySelector("[data-article-link]");
articleInnerDiv.id = article["title"]
.toLowerCase()
.replace(/[^a-zA-Z0-9]/g, "");
titleElement.innerHTML = article["title"];
author.innerHTML = article["author"];
if (article["sub-title"] && article["sub-title"].length !== 0) {
subTitle.innerText = article["sub-title"];
}
img.src = article["imgUrl"];
linkContainer.style.display = "flex";
linkContainer.style.width = "100%";
linkContainer.style.justifyContent = "center";
link.href = article["link"];
link.style.fontSize = "130%";
link.style.fontWeight = "500";
// Special Atributes for "Featured Art"
if (article["mainImg"]) {
// doubleFeaturedArt({
// div1,
// div2,
// titleElement,
// subTitle,
// articleInnerDiv,
// img,
// description,
// });
titleElement.style.marginBottom = "1em";
link.style.display = "none";
img.style.maxWidth = "60%";
img.style.maxHeight = "100%";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
img.style.marginBottom = "1em";
img.style.float = "none";
img.insertAdjacentElement("afterend", author);
}
// if its a poem, make the div and link float (so the text doesn't go under the img)
if (article["poem"]) {
description.style.float = "left";
link.style.clear = "left";
link.style.float = "right";
}
let i = 1;
const className = article["title"]
.replace(/[^a-zA-Z0-9]/g, "")
.toLowerCase();
description.id = `${className}-paragraphs-div`;
link.id = `${className}-main-link`;
article["description"].forEach((descriptionParagraph) => {
const paragraph = document.createElement("p");
paragraph.innerHTML = descriptionParagraph;
paragraph.className = `${className}-paragraph-${i}`;
description.appendChild(paragraph);
i++;
});
mainPage.appendChild(articleDiv);
checkAndReduce();
});
});
appendPicNavMenu();
}
function mobilePortrait() {
if (previousStylesheet.dataset.stylesheet == "mobile") return
pageName.innerHTML = "Menu";
//create elements in mobile-navbar
createNavMenu(navMobile);
//get modify input and label "for" in mobile nav
const navMobileInputs = Array.from(navMobile.querySelectorAll("input"));
const navMobileLabels = Array.from(navMobile.querySelectorAll("label"));
navMobileInputs.forEach(input => {
input.id += "-mobile";
});
navMobileLabels.forEach(label => {
label.htmlFor += "-mobile";
});
//append elements
topBar.appendChild(navMobile);
//create observer functions
let observerMobileMenu = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type == "attributes") {
if (menuBar.dataset.opened == "true") {
navMobile.classList.add("open");
menuButton.classList.add("close");
} else {
navMobile.classList.remove("open");
menuButton.classList.remove("close");
}
}
});
});
//create menu open button - three lines
for (let i = 0; i < 3; i++) {
const menuButtonLine = document.createElement("div");
menuButtonLine.className = "menu-button-line";
menuButton.appendChild(menuButtonLine);
}
//give new class to desktop menu
navMobile.className = "nav-menu menu-mobile desktop-hide";
//observe for changes
observerMobileMenu.observe(menuBar, {
attributes: true,
});
//menu button listener
menuButton.addEventListener("click", () => {
if (menuBar.dataset.opened === "false") {
menuBar.dataset.opened = "true";
} else {
menuBar.dataset.opened = "false";
}
});
previousStylesheet.dataset.stylesheet = "mobile";
// musicLinks.innerHTML = "Words and Music"
}
//scroll to top on refresh
window.onbeforeunload = function () {
window.scrollTo(0, 0);
};
//create elements for data-attributes
// function to set data atributes acording to screen width
function setStylesheetDataAttr() {
if (screen.width <= 650) {
if (stylesheetSelector.dataset.stylesheet == "mobile") return
stylesheetSelector.dataset.stylesheet = "mobile";
} else if (screen.width >= 651 && screen.width < 1200) {
if (stylesheetSelector.dataset.stylesheet == "medium") return
stylesheetSelector.dataset.stylesheet = "medium";
} else {
if (stylesheetSelector.dataset.stylesheet == "desktop") return
stylesheetSelector.dataset.stylesheet = "desktop";
}
}
//execute on rezise
window.addEventListener("resize", () => {
setStylesheetDataAttr();
});
//ovserve changes on data-attributes and execute functions
let observerStylesheetAttr = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type == "attributes") {
if (stylesheetSelector.dataset.stylesheet === "mobile") {
mobilePortrait();
}
}
});
});
observerStylesheetAttr.observe(stylesheetSelector, {
attributes: true,
});
//onload functions
window.addEventListener("load", () => {
setStylesheetDataAttr();
mainPage.offsetTop;
introScreen.classList.add("fade-out");
setTimeout(() => {
introScreen.style.display = "none";
document.querySelector("html").style.overflowY = "visible";
lightDarkWarning.classList.remove("desktop-hide", "mobile-hide");
}, 1000);
//local storage - if exists change theme
if (!localStorage.getItem("style")) return
lightDarkWarning.style.display = "none";
const lightOrDark = localStorage.getItem("style");
if (lightOrDark === "dark") {
stylesheet.href = `${prefix}css/dark.css`;
}
if (screen.width <= 650) {
mobilePortrait();
}
});
//remove light-and-dark warning onclick
lightDarkWarning.addEventListener("click", () => {
lightDarkWarning.style.display = "none";
});
// Toggle Stylesheets
toggleStylesheetLightButton.addEventListener("click", () => {
stylesheet.href = `${prefix}css/light.css`;
localStorage.setItem("style", "light");
});
toggleStylesheetDarkButton.addEventListener("click", () => {
stylesheet.href = `${prefix}css/dark.css`;
localStorage.setItem("style", "dark");
});
// Sticky navbar
const stickyFunc = () => {
const limit = mainPage.offsetTop;
const navCol = document.querySelector("#sticky-div ");
if (window.pageYOffset + 50 >= limit) {
navCol.classList.add("fixed-nav-col");
} else {
navCol.classList.remove("fixed-nav-col");
}
};
//observer function, scroll-in abnormal logo when footer is 50% visible
let notFirstTime = 0;
const observer = new IntersectionObserver(
entries => {
if (entries[0].isIntersecting === true) {
if (notFirstTime > 0) return
abnormalLogoStylesheet.href = `${prefix}css/logo2.css`;
abnormalLogo.classList.add("logo-animation");
notFirstTime++;
}
},
{ threshold: [0.5] }
);
observer.observe(footerAbnormal);
createNavMenu(navMenu);
createArticlePeek(articles);
window.onscroll = () => {
stickyFunc();
};
})();