(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 "./issues-number/" for root index file */
const prefix = "./";
const articles = {
"Featured Art": [
{
"title": "Somebody Stole My Heart",
"sub-title": "",
"author": "Faith Ringgold",
"description": [
"Artist, author, educator, and organizer, Faith Ringgold is one of the most influential cultural figures of her generation, with a career linking the multi-disciplinary practices of the Harlem Renaissance to the political art of young Black artists working today. For sixty years, Ringgold has drawn from both personal autobiography and collective histories to both document her life as an artist and mother and to amplify the struggles for social justice and equity. From creating some of the most indelible artworks of the civil rights era to challenging accepted hierarchies of art versus craft through her experimental story quilts, Faith Ringgold has produced a body of work that bears witness to the complexity of the American experience.",
],
"imgUrl": `${prefix}faith-my-broken-heart.jpg`,
"link": `javascript:void(0)`,
"mainImg": true,
},
],
"Anthroposophy": [
{
"title": "Esoteric Cosmology - 2",
"sub-title": "",
"author": "Rudolf Steiner",
"description": [
"After the introductory remarks last Thursday, I would like to begin by giving you a sketch of world development according to theosophical knowledge. I ask you to bear in mind that as there are only a few hours available, I can only give a sketch in which much can only be briefly indicated. There may be an opportunity later to elucidate further.",
"Before we pursue the history of the development of the universe and, above all, the formation of our planet Earth, we must make our own certain concepts that westerners no longer possess because they have occupied themselves for so long with only physical phenomena. In every book that deals with cosmology, we are told that we only need to look into space to see thousands and thousands of worlds unveil themselves before our eyes, worlds that are similar to our solar system, and that our Earth, the planet on which life has existed for millions of years, is like a particle of dust within these many worlds; and that man is merely a tiny being on this particle of dust. Natural science has considered this to be the case ever since the advent of the Copernican theory.",
],
"imgUrl": `${prefix}big-bang.jpg`,
"link": `${prefix}steiner-cosmology-2.html`,
},
],
"Fictional Reality": [
{
"title": "Adrian's Way to the Universal Basic Income",
"sub-title": "",
"author": "Roberto Fox as told to Frank Thomas Smith",
"description": [
"I don't remember who was host the first time Adrian and I sat together at the same table, but after the usual nods and comments about the food and the weather, we began a conversation which we both found interesting, so it continued whenever we both happened to be there at the same time. Way back then, I usually ate lunch in a vegetarian restaurant in downtown Buenos Aires. It's still there – self-service and self-seating – which means you could and still can sit wherever a seat is available, sort of like in Europe. In Switzerland and Germany if a seat is available in someone else's table, you can ask “Ist hier frei?” and they'll nod, unless they're waiting for someone, and you sit there and eat in silence if both prefer, which is usually the case, or start a conversation.",
"Although Adrian spoke very little about himself, I at least learned that he lived in San Luis – an Argentine province – and came to Buenos Aires only occasionally for untranslatable “trámites” [procedures]. I suppose I liked to talk about myself more than he did, so, when he asked, I said, over dessert, not verbatim, but basically:",
"I was born in Argentina and live here again now after college in the United States and many years there and in Europe. I have been able to observe (with my eyes only half open, at most) cultural, economic and political conditions in the countries I have lived in: Argentina, Switzerland, Germany and the United States, and in many other countries (with eyes mostly closed) due to my employment in the airline industry.",
"(Don't worry, this isn't an autobiography, but I have to establish some kind of credential, albeit a weak one, not being an economist, political scientist, philosopher, or a doctor of anything.)",
],
"imgUrl": `${prefix}ubi.jpg`,
"link": `${prefix}adrian-ubi.html`,
},
{
"title": "The War Prayer",
"sub-title": "",
"author": "Mark Twain",
"description": [
"It was a time of great and exalting excitement. The country was up in arms, the war was on, in every breast burned the holy fire of patriotism; the drums were beating, the bands playing, the toy pistols popping, the bunched firecrackers hissing and spluttering; on every hand and far down the receding and fading spread of roofs and balconies a fluttering wilderness of flags flashed in the sun; daily the young volunteers marched down the wide avenue gay and fine in their new uniforms, the proud fathers and mothers and sisters and sweethearts cheering them with voices choked with happy emotion as they swung by; nightly the packed mass meetings listened, panting, to patriot oratory which stirred the deepest deeps of their hearts, and which they interrupted at briefest intervals with cyclones of applause, the tears running down their cheeks the while; in the churches the pastors preached devotion to flag and country, and invoked the God of Battles, beseeching His aid in our good cause in outpouring of fervid eloquence which moved every listener. It was indeed a glad and gracious time, and the half dozen rash spirits that ventured to disapprove of the war and cast a doubt upon its righteousness straightway got such a stern and angry warning that for their personal safety’s sake they quickly shrank out of sight and offended no more in that way.",
"Sunday morning came — next day the battalions would leave for the front; the church was filled; the volunteers were there, their young faces alight with martial dreams — visions of the stern advance, the gathering momentum, the rushing charge, the flashing sabers, the flight of the foe, the tumult, the enveloping smoke, the fierce pursuit, the surrender — then home from the war, bronzed heroes, welcomed, adored, submerged in golden seas of glory! With the volunteers sat their dear ones, proud, happy, and envied by the neighbors and friends who had no sons and brothers to send forth to the field of honor, there to win for the flag, or, failing, die the noblest of noble deaths. The service proceeded; a war chapter from the Old Testament was read; the first prayer was said; it was followed by an organ burst that shook the building, and with one impulse the house rose, with glowing eyes and beating hearts, and poured out that tremendous invocation —",
'"God the all-terrible! Thou who ordainest! Thunder thy clarion and lightning thy sword!"',
],
"imgUrl": `${prefix}mark-twain-2.jpg`,
"link": `${prefix}twain-prayer.html`,
},
],
"Fiction": [
{
"title": "Evermore",
"sub-title": "",
"author": "Frank Thomas Smith",
"description": [
'I went to the school that Sunday afternoon because there was a Board meeting that evening and we\'d need some papers from the office. The secretary was ill though; nothing serious, but she wouldn\'t be able to attend the meeting, so I, living close, went to the school to get the necessary papers. There were no classes on Sunday, no children running about and calling out, so everything was unnaturally still. But I better start at the beginning to show you why I am in this remote place and what I have to do with the school. ',
'I\'m a journalist, which usually means frustrated writer, and certainly does in my case. I was born and raised in Buenos Aires, Argentina by my Anglo-Argentine parents. My great-grandparents were Anglos - great-grandfather British, great-grandmother American - and their descendents intermarried within the Anglo community, sent their kids to bilingual schools and spoke English at home. In a country like Argentina knowing English fluently is a great advantage because foreign companies, be they American, British or Japanese, need bilingual people. So when I finished university I got a job right off with PanAm (since defunct) as a ticket agent at the airport, despite having studied literature and philosophy. Actually it was fun and was a great opportunity to meet lovely, "free-thinking" girls - at that time still a rarity in Argentina - especially flight attendants.',
],
"imgUrl": `https://southerncrossreview.org/45/comech.jpg`,
"link": `https://southerncrossreview.org/45/evermore.html`,
},
],
"Poetry": [
{
"title": "Renascence",
"sub-title": "",
"author": "Edna St. Vincent Millay",
"description": [
"All I could see from where I stood
Was three long mountains and a wood;
I turned and looked another way,
And saw three islands in a bay.
So with my eyes I traced the line
Of the horizon, thin and fine,
Straight around till I was come
Back to where I'd started from;
And all I saw from where I stood
Was three long mountains and a wood.",
"Over these things I could not see;
These were the things that bounded me;
And I could touch them with my hand,
Almost, I thought, from where I stand.
And all at once things seemed so small
My breath came short, and scarce at all.",
"But, sure, the sky is big, I said;
Miles and miles above my head;
So here upon my back I'll lie
And look my fill into the sky.
And so I looked, and, after all,
The sky was not so very tall.
The sky, I said, must somewhere stop,
And—sure enough!—I see the top!
The sky, I thought, is not so grand;
I 'most could touch it with my hand!
And reaching up my hand to try,
I screamed to feel it touch the sky.",
],
"imgUrl": `${prefix}edna.jpg`,
"link": `${prefix}renascence.html`,
"poem": true,
},
{
"title": "Reincarnation Blues",
"sub-title": "",
"author": "Frank Thomas Smith",
"description": [
"Twas a distant dance ago
Realer than a writer's rhyme
Longer than you'll ever know
Little to do with what's called time.",
"You think there's nothing at all to lose.
You better think again, baby,
And heed the Reincarnation Blues:
That death's a-dawning and that ain't maybe.",
"If a century or two is time at all
Then dream of it before you go
Then dance to it spring and fall
For when you go you'll never know.",
],
"imgUrl": `${prefix}reincarnation-1.webp`,
"link": `${prefix}reincarnation-blues.html`,
},
],
"Current Events": [
{
"title":"Déjà Vu All Over Again",
"sub-title":"",
"author": "Tom Engelhardt",
"description": [
"He’s our very own emperor from hell, an updated version of Nero who, in legend, burned down Rome on a whim, though ours prefers drowning Washington. Why, just the other day, Donald Trump — and you knew perfectly well who I meant — bent the ears of 250 top Republican donors for 84 minutes. Among other things, he assured those all-American (not Russian) oligarchs — and let me quote him in theWashington Post on this — that \“‘the global warming hoax, it just never ends…’ He mocked the concept of sea levels rising, disputing widely held science. ‘To which I say, great, we have more waterfront property.’\”",
"Admittedly, he’s talking about flooded property, including possibly whole cities going underwater in the decades to come, but what the hell! Yes, indeed, he was the president of the United States not so long ago and, if all goes well (for him, not us), he or some doppelganger, could win the Oval Office again in 2024, ensuring the arrival of that new, all-too-wet waterfront property. And yes, he offered up that little gem — about the 9,000th time he’s called climate change a “hoax” (sometimes blaming it on China) — just as a new scientific report came out suggesting that, if things don’t improve in fossil-fuel-burning terms, up to half of the Amazon rain forest, one of the great carbon sinks on Earth, could be transformed into savanna. To quote theWashington Post again:",
'“The warming consequences of suddenly losing half the rainforest would be felt thousands of miles away and for centuries into the future, scientists warn. It would mean escalating storms and worsening wildfires, chronic food shortages and nearly a foot of sea level rise inundating coastal communities. It could trigger other tipping points, such as the melting of ice sheets or the disruption of the South American monsoon.”',
"Hey, Donald, what could possibly go wrong on this all-too-embattled planet of ours?",
],
"imgUrl": `${prefix}atomic.jpg`,
"link": `${prefix}engelhardt-deja-vu.html`,
}
],
"Words and Music": [
{
"title":"Billie's Blues",
"sub-title":"",
"author": "Billie Holiday",
"description": [
"I love my man
I'm a liar if I say I don't
I love my man
I'm a liar if I say I don't
But I'll quit my man
I'm a liar if I say I won't.",
"I've been your slave, baby
Ever since I've been your babe
I've been your slave
Ever since I've been your babe
But before I'll be your dog
I'll see you in your grave.",
],
"imgUrl": `${prefix}billie-2.jpg`,
"link": `${prefix}billies-blues.html`,
}
],
};
const articlesKeys = Object.keys(articles);
const navChekboxes = Array.from(document.querySelectorAll("#nav-menu input"));
// Uncheck all other hidden checkboxes when one is checked
// colapses nav-menu dropdowns when a new one is expanded
function createNavMenu(navMenuElement) {
navChekboxes.forEach(input => {
input.addEventListener("change", () => {
navChekboxes.forEach(element => {
if (element === input) return
element.checked = false;
});
});
});
function createMenuLinks() {
articlesKeys.forEach(category => {
if (articles[category].length === 1) {
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);
}
});
}
createMenuLinks();
//event listeners
const navmenuLinkArray = Array.from(
navMenuElement.querySelectorAll(".nav-menu-links")
);
const scrollToTarget = target => {
const headerOffset = 60;
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";
}
});
});
}
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").firstElementChild;
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 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 link = articleDiv.querySelector("[data-article-link]");
articleInnerDiv.id = article["title"].toLowerCase().replace(/[^a-zA-Z0-9]/g, "");
titleElement.innerText = article["title"];
author.innerText = article["author"];
if (article["sub-title"] && article["sub-title"].length !== 0) {
subTitle.innerText = article["sub-title"];
}
img.src = article["imgUrl"];
link.href = article["link"];
// Special Atributes for "Featured Art"
if (article["mainImg"]) {
titleElement.style.marginBottom = "1em";
link.style.display = "none";
img.style.maxWidth = "80%";
img.style.maxHeight = "100%";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
img.style.marginBottom = "1em";
img.style.float = "none";
author.remove();
author.innerText = `by ${author.innerText}`;
img.insertAdjacentElement("afterend", author);
}
let i = 1;
const className = article["title"]
.replace(/[^a-zA-Z0-9]/g, "")
.toLowerCase();
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();
}
// export function createArticlePeek(category, title) {
// mainPage.innerHTML = ""
// articlesKeys.forEach(group => {
// if (group !== category) return
// articles[group].forEach(article => {
// if (article["title"] !== title) return
// const articleDiv = document.querySelector("[data-article-template]")
// .content.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 link = articleDiv.querySelector("[data-article-link]")
// titleElement.innerText = title
// author.innerText = article["author"]
// if (article["sub-title"] && article["sub-title"].length !== 0) {
// subTitle.innerText = article["sub-title"]
// }
// img.src = article["imgUrl"]
// link.href = article["link"]
// let i = 1
// const className = article["title"]
// .replace(/[^a-zA-Z0-9]/g, "")
// .toLowerCase()
// 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()
// })
// })
// }
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();
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);
//create title page with the first property of "articleObject.js" and it's title
createArticlePeek(articles);
window.onscroll = () => {
stickyFunc();
};
// createArticlePeek(
// Object.keys(articles)[0],
// articles[Object.keys(articles)[0]][0].title
// )
//--------------------------------
// Change navbar position to fixed on scroll
// function navMenuPositionFixed() {
// if (window.pageYOffset + 55 >= navDivTop) {
// navMenu.classList.add("fixed")
// } else {
// navMenu.classList.remove("fixed")
// }
// }
// window.onscroll = () => {
// navMenuPositionFixed()
// }
//-------------------
}());