(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");
const backToTop = document.querySelector("#back-to-top");
/*change prefix from "./" for test page inside the issue's
folder to "./issue-number/" for root index file */
const prefix = "./";
const articles = {
"Reincarnation Blues": [
{
"title": "Reincarnation Blues",
"sub-title": "",
"author": "Frank Thomas Smith",
"description": [
"Introduction
",
"Blues is associated with sad memories and, more importantly, hope. But hope is often enabled by “eternal rest” in a heavenly nirvana after death. No more slavery, no more suffering, no more pain. But reincarnation tells a different story. Death yes, but a merely temporary one in order to lick your wounds, get a grip and begin again on a long, difficult path of development.",
"So the Blues of these verses is a kind of wake-up call, that it ain't so easy after all, that the quest is just beginning. And it's certainly not as boring as “eternal rest”. Start with Canto I. If you think it's worthwhile, continue, there are twelve. If not, don't forget to wave goodbye.",
"CANTO 1",
],
"imgUrl": `https://southerncrossreview.org/reincarnation_blues/reincarnation-blues-cover.jpg`,
"link": `https://southerncrossreview.org/reincarnation_blues/reincarnation-blues-intro.html`,
"poem": false,
"mainImg": true,
},
],
"Anthroposophy": [
{
"title": "Anththroposophy – an Introduction",
"sub-title": "",
"author": "Frank Thomas Smith",
"description": [
"There is nothing secret about anthroposophy. An enormous literature on the subject exists, including many books and lectures (more than 6,000) by Rudolf Steiner, published in German. A relatively small portion has been translated into Spanish, but what is available is more than sufficient for anyone who desires to be well informed. Literature by other authors also exists.",
"As anthroposophy is intimately connected with Rudolf Steiner, it will be convenient to say a few words about him before going into the material itself. Steiner was born in 1861 in what was then a part of the Austro-Hungarian Empire, then became Yugoslavia and is now Croatia. His father, a hunter by profession, was chief of a railroad station in a small rural town. Steiner was a gifted child, so his parents later moved close to Vienna so he could continue his studies. Aside from his intellectual capacities, he had other gifts. He could “see” elemental beings in nature, for example. When, however, he realized that no one else shared these clairvoyant experiences, he decided to remain silent about them.",
],
"imgUrl": `https://southerncrossreview.org/155/steiner4.jpg`,
"link": `https://southerncrossreview.org/155/fts-anthroposophy-introduction.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Inner Aspect of the Social Riddle",
"sub-title": "",
"author": "Rudolf Steiner",
"description": [
"Just now, when I am giving public lectures on the social question here in Zürich, it is perhaps appropriate that in our study-group we should occupy ourselves with the inner aspect of the social problem, so exceptionally important at the present time.",
"We know that in every human being whom we encounter in the outer world, who stands before our bodily faculties of perception, we must recognise beneath the surface the real inner man. We first become aware of this inner man when we appreciate that fundamentally he is connected with everything relevant to human life and knowledge that weaves and surges through the world.",
"Just think, my dear friends, how different, with regard particularly to the human being, our anthroposophical conception of the world is from the ordinary conception! Remember my attempt to give an outline of the anthroposophical view; recall all you have read in my Occult Science, and you will realise the following: the evolution of the Earth is not only bound up with man, but is conceived as having emerged from the earlier incarnations, so to speak, of our Earth planet. Our present Earth-evolution emerged from the Old Moon evolution, this from the Old Sun, the Old Sun from Old Saturn. Then consider everything which had to be brought together to carry this planetary evolution forward to the Earth stage, and you will say: throughout the whole cosmic process man is never absent. He is involved in all of it. All the forces and happenings of the cosmos are focused on man—that is how we must conceive it.",
],
"imgUrl": `${prefix}steiner-inner-aspect-social-question-1-main.png`,
"link": `${prefix}steiner-inner-aspect-social-question-1.html`,
"poem": false,
"mainImg": false,
},
{
"title": " The Social Future",
"sub-title": "",
"author": "Rudolf Steiner",
"description": [
"25 October 1919, Zurich, GA 322a",
"The Organization of a Practical Economic Life on the Associative Basis. Transformation of the Market and Fixing of Prices. Money and Taxation. Credit.",
"The idea of the Threefold Social Organism set forth in my book Toward a Threefold Society, has grown out of perceptions which have ripened in view of the facts of modern social evolution, such as I attempted to describe yesterday. This idea of the threefold ordering of the social body aims at a practical solution to the problems of life and includes nothing u topian. Hence, before writing my book, I presupposed that it would be received with a common instinct for actual facts, and that it would not be judged out of preconceived theories, preconceived party opinions. If what I said yesterday be correct, and it is correct, namely that the social facts in the conditions of human life have grown so complicated that it is extremely difficult to survey them, a new method of dealing with the matters under discussion today will be necessary in order to enkindle the general social purpose. In view of this complexity of facts, it is only too comprehensible that there should be no understanding of the economic phenomena, except of such as have come within the experience of individual people; but everything of this nature is dependent upon the whole of economic life, and at the present time not only on the economic life of one country, but on that of the entire world. The individual human being will have to judge the needs of world-economy from the experience of his own immediate circle. He will, of course, go astray. Anyone who knows the demands of thought that are in line with strict reality knows also how important it is to approach the phenomena of the world with a certain amount of instinct for the truth, in order to gain fundamental facts of knowledge. Such facts play the same part in life as fundamental truths in the knowledge gained at school.",
],
"imgUrl": `${prefix}steiner-social-future-2-main.png`,
"link": `${prefix}steiner-social-future-2.html`,
"poem": false,
"mainImg": false,
},
],
"Spiritual Science": [
{
"title": "The Last Temptation",
"sub-title": "",
"author": "Nikos Kazantzakis",
"description": [
"The dual substance of Christ-the yearning, so human, so superhuman, of man to attain to God, or more exactly, to return to God and identify himself with him-has always been a deep inscrutable mystery to me. This nostalgia for God, at once so mysterious and so real, has opened in me large wounds and also large flowing springs.",
"My principal anguish and the source of all my joys and sorrows from my youth onward has been the incessant, merciless battle between the spirit and the flesh.",
"Within me are the dark immemorial forces of the Evil One, human and pre-human; within me too are the luminous forces, human and pre-human, of God - and my soul is the arena where these two armies have clashed and met.",
"The anguish has been intense. I loved my body and did not want it to perish; I loved my soul and did not want it to decay. 1 have fought to reconcile these two primordial forces which are so contrary to one another, to make them realize that they are not enemies but rather fellow-workers so that they might rejoice in their harmony - and so that I might rejoice with them.",
],
"imgUrl": `${prefix}kazantzakis-last-temptation-main.png`,
"link": `${prefix}kazantzakis-last-temptation.html`,
"poem": false,
"mainImg": false,
},
],
"Mystery Drama": [
{
"title": "HeyZeus",
"sub-title": "",
"author": "Frank Thomas Smith",
"description": [
"Dim lights, soft music. THOMAS prepares the set: a table downstage center, a chair on either side, a half-empty bottle of red wine and two glasses. JUDY, an attractive young actress, black if possible, enters with a candle, which she places on the table and lights. THOMAS pours wine into the glasses. They sit. Lights up, soft.",
"JUDY: So what now? I mean it’s all very interesting, but so what?",
"THOMAS: So plenty. If Jesus Christ himself appears to you in Prospect Park it must mean something for god’s sake.",
"JUDY: What? ...assuming it was him.",
],
"imgUrl": `${prefix}heyzeus-the-girlfriend-main.png`,
"link": `${prefix}heyzeus-the-girlfriend.html`,
"poem": false,
"mainImg": false,
},
],
"True Tales": [
{
"title": "Un nuevo colegio Waldorf",
"sub-title": "",
"author": "por Claudia Lemus",
"description": [
"Aquí escribo recuerdos de mi infancia. Algunos recuerdos me vienen fácilmente, como si fuesen un ovillo de lana y tiro de la punta. Otros, son solo hebras que las fui ordenando lo más cronológico que se me ocurrió, y los anudé. Es posible que no estén bien ordenados, o yo les haya agregado de mi imaginación de niña. Si es así, y alguien lo puede corregir, bienvenido.",
"En el año 1966 comencé mi primer grado, en un colegio Waldorf de Buenos Aires en la calle Warnes de Florida. Llamado Paula Albarracín de Sarmiento. [Rudolf Steiner Schule]",
"Luego de unos litigios entre el claustro de maestros en el año siguiente. Algunos padres decidieron comenzar otro colegio en San Isidro, el colegio se llamó San Miguel Arcángel, esto fue en el año lectivo de 1968, o sea cuando comenzamos el tercer grado.",
"Éramos muy poquitos niños, creo que nueve en el grado donde yo estaba, sus nombres eran Bibi, Marcelo, Susana, Patricia, Silvia, Matilde, Amelia, Beatriz, otra Claudia y yo. Con el tiempo fueron llegando más niños (Juan, Regina, otra Patricia, otro Marcelo, Gerardo, Jost, Ineke, Renate, Michael, espero no olvidarme de ninguno).",
],
"imgUrl": `${prefix}lemus-waldorf-main.png`,
"link": `${prefix}lemus-waldorf.html`,
"poem": false,
"mainImg": false,
},
],
"Current Events": [
{
"title": "The Personification of Decline",
"sub-title": "",
"author": "Tom Engelhardt",
"description": [
"Once upon a time, nothing in this world could have convinced me that I would be living through this moment in this America on this planet. As a start, once upon an increasingly distant time, Donald J. Trump as president of the United States would have been inconceivable. Literally beyond conception, even in some wildly dystopian satiric novel about an all-too(un)-American future.",
"I mean, forget anything else, a man who in private life bankrupted six (yes, six!) companies has now been elected president of the United States not just once but twice. You know, the fellow who thinks of those he considers his domestic enemies (and that’s not too strong a word for it), whether Democrats, Republicans, or journalists as nothing short of — and this is the word he uses — “evil.” Once upon a time, this would have been inconceivable even in your wildest all-(un)-American dreams! Not a shot in hell of a chance! Never!",
],
"imgUrl": `${prefix}engelhardt-trump-main.png`,
"link": `${prefix}engelhardt-trump.html`,
"poem": false,
"mainImg": false,
},
{
"title": "I Love America",
"sub-title": "",
"author": "Nader Terani",
"description": [
"We bombed Iran and, despite a temporary cessation of hostilities, it’s likely that President Donald Trump and his counterpart in Tel Aviv, Prime Minister Benjamin Netanyahu, intend to drag the United States into yet another destabilizing effort in the Middle East, perhaps the most dangerous one yet. As an Iranian American, I feel as if my greatest fears are now being realized.",
"Like many Iranian Americans, I love this country and the many blessings that it’s provided my family — so much so that I proudly chose to wear the uniform of its Navy. I’ll never forget the immense sense of pride I felt, on July 31st, 1996, when I was sworn into the United States Navy, or the unparalleled sense of responsibility I experienced when I wore my uniform for the first time as an American sailor graduating from boot camp at the Recruit Training Center in Great Lakes, Illinois, in 1997. I then had the honor of being selected as the first Iranian American to serve as a member of the United States Navy Presidential Honor Guard in Washington, D.C. And on every one of those occasions, my loved ones, Iranian immigrants all, proudly stood by my side, beaming with joy as I embarked on what I viewed as a sacred commitment to serve the nation that I love.",
],
"imgUrl": `${prefix}terani-i-love-america-main.jpg`,
"link": `${prefix}terani-i-love-america.html`,
"poem": false,
"mainImg": false,
},
],
"Fiction": [
{
"title": "The Brick",
"sub-title": "",
"author": "Claudia Lemus",
"description": [
"I was out walking one Sunday, hurrying along a street in the suburbs of Buenos Aires. I didn't want to be late for family lunch at nonnas house. Every Sunday we ate her home-made ravioli.",
"She started cooking on Saturday afternoon, preparing the filling and the suco, or sauce—it was delicious! You could smell the delicious aroma as soon as you arrived at her house.",
"As I passed by a house that had been demolished some time ago, I heard someone whispering: “Chist! Chist!\"",
"I turn around and see no one. I look carefully in all directions and find myself alone on the sidewalk. There are no people across the street either. I keep walking, thinking it must have been my imagination. Again: “Chist! Chist!”",
],
"imgUrl": `${prefix}lemus-ladrillo-main.png`,
"link": `${prefix}lemus-ladrillo-eng.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Miryam",
"sub-title": "",
"author": "Louise Rinser",
"description": [
"Translated by Frank Thomas Smith",
"Why then couldn’t I be so unreservedly happy like the others? The mustard seed grew too quickly in me. Trees that shoot up too quickly have soft wood. And what a short time ago it was that the people had shouted: Crucify him, the criminal! And what a short time before that they had called out: Hoshiana! However, my worries seemed unjustified. Everything continued to go well, for a long while.",
"That was when that Councilor Gamaliel, who had spoken in favor of both accused, came to me as leader of one of the groups we called communities. I seemed to him competent to answer his question and he came right to the point: You were Rabbi Yeshua’s companion and are initiated in his teaching, and knew him from close up. Tell me: Who was he?",
"You know that.",
],
"imgUrl": `${prefix}miryam.jpg`,
"link": `${prefix}rinser-miryam-3.html`,
"poem": false,
"mainImg": false,
},
],
"Christian Hermeticism": [
{
"title": "Meditations on the Tarot - Letter IV",
"sub-title": "THE EMPEROR",
"author": "Annonymous",
"description": [
"Dear Unknown Friend,",
"The less superficial a person is—and the more he knows and is capable of —the greater is his authority. To be something, to know something and to be capable of something is what endows a person with authority. One can also say that a person has authority in proportion to what he unites within himself of the profundity of mysticism, the direct wisdom of gnosis and the productive power of magic. Whosoever has this to a certain degree can found a “school”. Whosoever has this to a still higher degree can “lay down the law”. It is authority alone which is the true and unique power of law. Compulsion is only an expedient to which one takes recourse in order to remedy a lack of authority. Where there is authority, i.e. where there is present the breath of sacred magic filled by the rays of light of gnosis emanated from the profound fire of mysticism, there compulsion is superfluous.",
],
"imgUrl": `${prefix}meditations-tarot-letter-4-main.png`,
"link": `${prefix}meditations-tarot-letter-4.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Meditations on the Tarot - Letter V",
"sub-title": "THE POPE",
"author": "Annonymous",
"description": [
"At vero Malki-tzadek rex Salem, proferens panem et vinum, erat enim sacerdos Dei Altissimi, benedixit ei, et ait: Benedictus Abram Deo excelso…et benedictus Deus excelsus…",
"(Genesis xiv, 18-20) (And Melchizedek king of Salem brought out bread and wine; he was priest of God Most High. And he blessed him and said: Blessed be Abram by God Most High…and blessed be God Most High…)",
"Ego sum via et veritas et vita: nemo venit ad Patrem, nisi per me. (John xiv, 6) (I am the way, and the truth, and the life: no one comes to the Father, but by me.)",
"De cetero nemo mihi molestus sit: ego enim stigmata Domini Jesu in corpore meo porto.",
],
"imgUrl": `${prefix}meditations-tarot-letter-5-main.png`,
"link": `${prefix}meditations-tarot-letter-5.html`,
"poem": false,
"mainImg": false,
},
],
"Social Science": [
{
"title": "Favela Children",
"sub-title": "Chapter 19",
"author": "Ute Creamer",
"description": [
"June 1979. Sao Joao Festival",
"We have been preparing for the Sao Joao festival for weeks. The boys are building the booths, the girls are cutting the banners, etc. All are making lanterns and rehearsing the quadrilla. The past few days have been of intense activity. Cido baked corn-cakes with his cooking pupils, made mamao-jam. I went to the market with Dona Edda to buy huge amounts of popcorn, peanuts, salt, juice, milk, chocolate, sausages, etc.",
"The festival began at three o'clock. Each group of children was responsible for a sales or games booth: bingo, quentao, pipoca, (hot cider, popcorn), rice pudding, sausage, ring-throwing, kick-the-can, and so on. Others took care of the bazaar (things prepared by the children and used clothing). The people streamed in. Dona Ute here, Cido there, Dona Ute, Cido - calls for help from all sides. We ran back and forth. So many people, adults and children!",
"It grew dark and we lit the lanterns. Just at that moment Roberto had his attack. He's lame and has cramp-like attacks now and then. He screamed and moaned, rolling his eyes. When he came to his first words were: I want to dance the quadrilha. I was afraid of that. During rehearsals I took him by the hand and we danced together. But he would be a disturbance during the real performance. His mother came and we were able to start the lantern parade. A line of glowing points snaking through the favela. Then we lit the bonfire with torches and recited the fire-poem. The children danced the quadrilha, then the adults and finally we all danced freely.",
"A beautifull festival."
],
"imgUrl": `${prefix}favela-cover.jpg`,
"link": `${prefix}favela-children-19.html`,
"poem": false,
"mainImg": false,
},
],
"Memoir": [
{
"title": "Exile’s End - Episode 7",
"sub-title": "",
"author": "Frank T. Smith",
"description": [
"Upon arrival, I walked out of the train station intending to find out how to get to my new outfit, or at least to the Second Armored Division. A young German approached me and asked in German if I was Cpl. Frank T. Smith. Actually, he smiled and told me I was Cpl. Frank T. Smith, because I was the only uniformed passenger to leave the train.",
"He grabbed my duffel bag and led me to an army car. “Come,” he said, “I, Hans, will take you to the x Group,” as he tossed my bag into the trunk. You can imagine my surprise that the x Group, a part of the Second Armored Division, had sent a driver to pick me up, a mere corporal, at the station. It was so strange that I wondered if I was being kidnapped by the Soviets. I asked the driver, Hans, if it was usual that corporals are picked up at the station when they first arrive. He said, “O nein. You must be very important corporal.”",
"It took a while to figure out, but I finally understood the reason. They — the x Group had of course received a copy of my orders, so knew I was coming. How they knew how and when, I never did find out. In my orders my MOS (Military Occupational Specialty) was shown as “intelligence analyst.” What must the Commanding Officer (if he even knew) and the First Sergeant (who certainly knew) be thinking? Easy: Why are they transferring an intelligence analyst to this, our until now comfortable unit? Because, I eventually discovered, the First Sergeant was operating a 20% commission loan racket. Let's say a soldier of any rank needed some extra money for whatever reason. He could get it from the First Sergeant who, by the way, was the person who actually paid everyone in the company on payday. So, if you had borrowed $20, you received $4 less on payday. Did the C.O. know about it and receive a cut? Unknown, but possible. They probably thought that I had come to investigate the rumors. I realized this when, after a few months, I needed a loan, so I went to the First Sergeant. Of course, why not? Everyone else does. When I asked him for a twenty buck loan, he looked avuncularly at me and shook his head. \"Sorry corporal, but I'm kinda short myself this month.”",
],
"imgUrl": `https://southerncrossreview.org/164/exiles-end-main.png`,
"link": `https://southerncrossreview.org/164/exiles-end-7.html`,
"poem": false,
"mainImg": false,
},
{
"title": "Exile's End - Episode 8",
"sub-title": "",
"author": "Frank Thomas Smith",
"description": [
"When we docked in New York harbor I got on the line of soldiers waiting to sign out. But I saw my parents waiting on the dock and I couldn't very well send Renate down alone, so I got off the line, took her hand and we strolled down the gangplank. The corporal (sorry “specialist 4”) signing out called “hey, where ya goin'?” “Home,” I answered, “see ya tomorra,” thus picking up my old Brooklyn accent.",
"I enrolled in Brooklyn College at night, in the day working at a variety of jobs. I took courses in physics, political science and anthropology, the last being the only one I found interesting. Renate got a job right away with Swissair reservations based on her previous experience working for SAS in Germany and her excellent English.",
"At the streetcar and traffic center a few blocks from Brooklyn College there was an Air Force recruiting station. A Staff Sergeant welcomed me like his long-lost best friend when I walked in claiming curiosity about volunteering for flight school. My idea was to enlist for four years, learn to fly, then get out and get a job as a commercial airline pilot, although I didn't tell him that. He told me I would keep my army pay-grade, that in that respect it was like re- enlisting, but in this case for flight school. I'd have to take a physical and appear before a board, but all that's just bureaucratic. (I found out not only here but also when applying for civilian employment that the words “intelligence analyst” had a positive effect.) I filled out a form with all my data and he said he'd call me when he had all the exams and interviews scheduled.",
],
"imgUrl": `${prefix}exiles-end-main.png`,
"link": `${prefix}exiles-end-episode-8.html`,
"poem": false,
"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 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);
}
function createLettersLink() {
const div = document.createElement("div");
const p = document.createElement("p");
const a = document.createElement("a");
a.href = "https://southerncrossreview.org/163/letters163.html";
a.style.color = "inherit";
a.style.textDecoration = "none";
p.className = "nav-menu-links";
a.innerText = "Letters to the Editor";
p.dataset.title = "letters";
p.appendChild(a);
div.appendChild(p);
navMenuElement.appendChild(div);
}
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);
}
});
//createSingleLink("Letters to the Editor", "pic-nav-menu");
createSingleLink("Other Sections", "pic-nav-menu");
createSingleLink("Subscribe", "subscribe");
createLettersLink();
}
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) => {
if (link.dataset.title === "letters") return;
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) => {
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 = "40%";
img.style.minWidth = "30%";
img.style.maxHeight = "100%";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
img.style.marginBottom = "1em";
img.style.float = "none";
img.insertAdjacentElement("afterend", author);
description.style.width = "80%";
description.style.marginLeft = "auto";
description.style.marginRight = "auto";
}
// 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");
});
//back to top button
backToTop.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
});
// 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");
backToTop.classList.remove("back-to-top-hide");
} else {
navCol.classList.remove("fixed-nav-col");
backToTop.classList.add("back-to-top-hide");
}
};
//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();
};
})();