(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": "Blowin' in the Wind", "sub-title": "", "author": "Bob Dylan", "description": [ "How many roads must a man walk down
Before you call him a man?
How many seas must a white dove sail
Before she sleeps in the sand?
Yes, and how many times must the cannonballs fly
Before they're forever banned?", "The answer, my friend, is blowin' in the wind
The answer is blowin' in the wind", "Yes, and how many years must a mountain exist
Before it is washed to the sea?
And how many years can some people exist
Before they're allowed to be free?
Yes, and how many times can a man turn his head
And pretend that he just doesn't see?", "The answer, my friend, is blowin' in the wind
The answer is blowin' in the wind", "Yes, and how many times must a man look up
Before he can see the sky?
And how many ears must one man have
Before he can hear people cry?
Yes, and how many deaths will it take 'til he knows
That too many people have died?", "The answer, my friend, is blowin' in the wind
The answer is blowin' in the wind", "Listen and view: JOANA CASANOVA & JOE MAGNARELLI", ], "imgUrl": `${prefix}dylan.jpg`, "link": `javascript:void(0)`, "poem": true, "mainImg": true, }, ], "Anthroposophy": [ { "title": "Education as a Social Question", "sub-title": "Lecture One of Six – Historical necessities of the Present", "author": "Rudolf Steiner", "description": [ "A recent series of lectures and discussions has given me deep insight into what presently takes place in human feelings, into what exists as an inner tragedy in humanity's evolution. Now I am again able to spend a few days here in this place which is so closely bound up with the work we must believe will gradually produce the force to guide the present tragedy of humanity into more hopeful channels.", "Perhaps at no time has there been less inclination than now to raise the soul to the spiritual worlds in the true sense of the word, and it is especially necessary now to do so. Only from these spiritual worlds can come the strength modern humanity requires if it is to advance in its whole humanity. Today there is the most widespread belief that the problems and tasks of the present can be resolved by the thoughts and impulses derived from knowledge based on the external world. How long it will take until a sufficiently large part of humanity will be convinced that real salvation is only attainable on the spiritual path, is extremely difficult to say, for the very reason that reflecting on this question is not fruitful. It is certain, however, that progress can only be made if sufficiently large numbers of people are permeated by the conviction that salvation can come only from the spiritual worlds.", ], "imgUrl": `${prefix}steiner-education-image.jpg`, "link": `${prefix}steiner-education-social.html`, "poem": false, }, { "title": "The Joy of Christmas", "sub-title": "", "author": "Kristina Kaine", "description": [ "After allowing hope and peace to live in our hearts over the last two weeks, we now come to joy. Chara is the Greek word for joy.", "In chapter 15 of St John’s Gospel are the words, “that my joy may be in you, and that your joy may be full.” The sign of love is joy, chara. This is not frivolous happiness; chara is related to charis which means grace, graciousness and gratitude. It is a quiet feeling that swells our heart and fills our whole being with light. We feel humbly confident, strong but not overpowering, and certainly filled with gratitude.", "Joy is a deed, an accomplishment that we cannot really explain, we can only experience it. We experience joy when we connect with higher things. Like when we catch a glimpse of the purpose of a child born in the Middle East two thousand years ago changing the world forever, joy rises in our hearts like a morning mist allowing the first rays of the sun to shine through.", ], "imgUrl": `${prefix}madonna-terranuova.jpg`, "link": `${prefix}kaine-christmas.html`, "poem": false, }, { "title": "Meeting Anthroposophia Today", "sub-title": "", "author": "Robert McDermott interviewed by Ashton Arnoldy", "description": [ "Ashton Arnoldy: So you’ve just retired from being a professor for the Philosophy, Cosmology, and Consciousness program at the California Institute of Integral Studies (CIIS), where you were also once president. Would you like to share a bit more about yourself?", "Robert McDermott: Sure. I’m essentially a professor. I was a professor for fifty-eight years. Two years in administration at City University of New York, and nine years at CIIS. Throughout all the time that I was a professor, I was also in administration—chairing boards and serving as president for various organizations. So I have a strong administration gene. Ah, but also a professorial gene. So for me the two parts of my life are, in fact, very close, very complementary and hardly divisible. So when people ask, What will you do when you retire? And I’ll say, Oh, I’m going to do the same - the same as I did while I was a professor and a president. I will try to get more knowledge, which I will then try to share in writing and lecturing and teaching, and I will continue to be active, for example, in this conversation, which is, you know, a form of teaching, but really sharing—sharing what I’m thinking, etc. There I am — I’m ready for your questions, at least I’m ready as I will be.", "Ashton Arnoldy: Prior to discovering Steiner, you had been deeply involved with the work of the philosopher and spiritual teacher Sri Aurobindo—publishing his work in English, and making a documentary about his work. What was it about Steiner’s work that pulled you? Steiner took on more prominence in your life—is that right?", "Robert McDermott: That’s exactly right, Anthroposophy became more prominent, my primary spiritual commitment. And I think that any of these biographical questions lead me to give two answers. One is practical and that I understand. The other one is karmic and spiritual and more complicated that I accept, and I can point to, but I don’t really understand it very well when it’s happening and it’s only in retrospect that I can say \"that makes sense\"." ], "imgUrl": `${prefix}anthroposophia.jpg`, "link": `${prefix}anthroposophia-today.html`, "poem": false, }, ], "Current Events": [ { "title": "Peace Is Not Our Profession", "sub-title": "The Madness of Nuclear Warfare, Alive and Well in America", "author": "William J. Astore", "description": [ "Hey, cheer up because it truly is a beauty! I’m talking about this country’s latest “stealth bomber,” the B-21 Raider, just revealed by Northrop Grumman, the company that makes it, in all its glory. With its striking bat-winged shape and its ability to deliver a very big bang (as in nuclear weapons), it’s our very own “bomber of the future.” As Secretary of Defense Lloyd Austin put it at its explosive debut, it will “fortify America’s ability to deter aggression, today and into the future.” Now, that truly makes me proud to be an American.", "And while you’re at it, on this MAD (as in mutually assured destruction) world of ours, let that scene, that peculiar form of madness, involving the potential end of everything on Planet Earth, sink in. As a retired Air Force officer, it reminded me all too vividly of my former service and brought to mind the old motto of the Strategic Air Command (SAC), “Peace Is Our Profession.” Headed in its proudest years by the notorious General Curtis LeMay, it promised “peace” via the threat of the total nuclear annihilation of America’s enemies.", "SAC long controlled two “legs” of this country’s nuclear triad: its land-based bombers and intercontinental ballistic missiles, or ICBMs. During the Cold War, those Titans, Minutemen, and MX “Peacekeepers” were kept on constant alert, ready to pulverize much of the planet at a moment’s notice. It didn’t matter that this country was likely to be pulverized, too, in any war with the Soviet Union. What mattered was remaining atop the nuclear pile. A concomitant benefit was keeping conventional wars from spinning out of control by threatening the nuclear option or, as was said at the time, “going nuclear.” (In the age of Biden, it’s “Armageddon.”)", ], "imgUrl": `${prefix}mad-2.jpg`, "link": `${prefix}astore-mad.html`, "poem": false, }, ], "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.", ], "imgUrl": `${prefix}edna-1.jpg`, "link": `${prefix}edna-renascence.html`, "poem": true, }, { "title": "The Return of the Magi", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "This town is one we've seen before:
These crooked lanes, that stable door,
Although it must have been a dream,
For never were we here before.", "And that quick dog, scared and lean,
Crossing the square scarcely seen
And the dark-haired girl leaning out
The hostel window familiar seem.", ], "imgUrl": `${prefix}3-kings-2.jpg`, "link": `${prefix}return-of-magi.html`, "poem": true, }, ], "Fiction": [ { "title": "The Other Me", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "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.", "A block of rooms had been reserved at the Intercontinental, where the meeting was to be held. It has excellent facilities for large company meetings. I, however, booked a room for myself at the Imperial Hotel. It has not changed since the nineteenth century – at least not outwardly. Everything is as it always has been, except for the plumbing, and even that is kept highly polished. The luxurious, renowned 5-star Hotel Imperial is set directly on the Ringstraße boulevard in the heart of Vienna and takes you back to the times of the Austro-Hungarian Empire. It features exclusive hotel rooms, a gourmet restaurant and a 24-hour rooftop fitness center with a sauna. It was inaugurated in 1873 by Emperor Francis Joseph as the Palais Württemberg. My younger colleagues, who little knew what they were missing, smiled at my eccentricity. But I didn’t care. There was to be a “surprise” dinner party in my honor in the Intercontinental after the meeting, at which I would give a maudlin speech and leave early so the others wouldn’t be frustrated by my avuncular presence.", ], "imgUrl": `${prefix}cafe-sperl.jpg`, "link": `${prefix}fts-other-me.html`, "poem": false, }, { "title": "Intrusion", "sub-title": "", "author": "Gary Beck", "description": [ "Corinne Jones' legs ached as she trudged through the cold evening rain to the bus stop on Third Avenue. The poorly designed bus shelter only partially shielded her from the slanting downpour. She waited like a weary farm animal whose labor was done, yet the barn was still far away, for the bus that would take her uptown and across 125th street to Harlem. She held the bag of leftovers under her porous old blue cloth coat in an effort to keep them dry for her granddaughter, Sharina. The thought of that beautiful child helped her endure the life eroding fatigue that was washing over her as relentlessly as the rain.", "After a twenty minute wait that seemed forever the bus finally arrived. Corinne hauled herself up the steps, swiped her fare card through the slot and looked for a seat. She started up the aisle and saw Betty Ann, an older black woman who worked as a maid for the Swintons, a wealthy white family who were friends of her employers. Shortly after she went to work for the Pardees she met Betty Ann when they shared duties at an open house party. Betty Ann hated her employers in particular and whites in general. She tried to infect Corinne with her prejudice and started to tell her how to steal from her employers. Corinne stopped her abruptly and refused to have anything to do with her after that. Over the years Betty Ann had forgotten what caused her enmity, but she loathed Corinne and insulted her whenever they met. They often took the same bus home at night and Betty Ann would greet her each time: \"You old bitch. Fuck you.\" And Corinne would respond: \"You mean old hag.\" The ritual concluded, they would ignore each other the rest of the way.", ], "imgUrl": `${prefix}125-street.jpg`, "link": `${prefix}beck-intrusion.html`, "poem": false, }, ], "Children's Corner": [ { "title": "Magic Mound", "sub-title": "Chapter 3", "author": "Frank Thomas Smith", "description": [ "When Sergio woke up it was cool and the leaves on the trees and bushes hung heavy with dew. A fine mist covered the earth below the mound and birds were chirping and insects buzzing. The sun wasn't visible but the sky was orange behind him. He thought this strange because the sun had been near to setting in front of him when he had closed his eyes.", "\"Divino!\" He nudged his brother, who grunted. \"Do you remember which side the sun was on when we fell asleep?\" But Divino didn't remember.", "\"You are right, little man, it was on the other side, in the west, where it always is when it sets.\"", "Suddenly Divino was wide awake. \"Who said that?\"", "Sergio jumped to his feet and looked around.", "\"I'm down here,\" the same voice said.", ], "imgUrl": `${prefix}magic-mound-3.jpg`, "link": `${prefix}magic-mound-3.html`, "poem": false, }, ], "Social Science": [ { "title": "Favela Children", "sub-title": "Chapter 2", "author": "Ute Creamer", "description": [ "Londrina, September 18, 1965", "The visits seem never to end. High society rushes to the favela with Brazilian beginner's zeal. Favela social work is the current craze. My head reels from so many new faces bubbling with torrents of Brazilian sounds. I am so confused by all this that my brain cells can no longer differentiate between Portuguese, French. Serbo-Croatian and Russian.", "A comical side of our life is the constant shuttling between the poorest, shabbiest part of Londrina and the city's prominence. Suddenly it's \"to the mayor!\" and we hastily wipe the red dust from our shoes and the red ring from under our fingernails (po, dust, is the number one subject during embarrassed silences instead of the weather), try to cover up flea-bites, rip off the favela clothes and rush to the prefectura (city-hall).", "We hardly arrive home with our faces stiff from smiling when the next visitor is announced: a German family which is \"developing\" in Bolivia. They no sooner leave than two nuns arrive who are in turn replaced by the business manager of Fuganti's, Paraná 's Macys.", ], "imgUrl": `${prefix}favela-cover.jpg`, "link": `${prefix}favela-children-2.html`, "poem": false, }, ], }; 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 => { // 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); } }); } 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").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 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"]) { 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"; 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(); }; })();