(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 subscribeDiv = document.querySelector("#subscribe"); subscribeDiv.offsetTop; const abnormalLogo = document.querySelector("#logo"); const abnormalLogoStylesheet = document.querySelector("#logo-stylesheet"); const footerAbnormal = document.querySelector("#footer-fourth"); document.querySelector("#mobile-subscribe"); 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 = { "Title Page": [ { "title": "Murder Most Foul", "sub-title": "", "author": "Bob Dylan", "description": [ 'Twas a dark day in Dallas, November \'63
A day that will live on in infamy
President Kennedy was a-ridin\' high
Good day to be livin\' and a good day to die
Being led to the slaughter like a sacrificial lamb
He said, "Wait a minute, boys, you know who I am?"
"Of course we do, we know who you are"
Then they blew off his head while he was still in the car
Shot down like a dog in broad daylight', ], "imgUrl": `${prefix}kennedy-dylan.jpg`, "link": `${prefix}murder-most-foul.html`, }, ], "Words and Music": [ { "title": "Manhattan Tower", "sub-title": "a musical Narrative (1946)", "author": "Gordon Jenkins", "description": [ "It was raining the first time I saw my tower
That is, the first time I saw it in reality
In my mind I'd seen it many times before
Standing by the ocean, looking out of a train window at night", "Even the structure I made with blocks as a child was this same tower
That long ago.
My heart beat faster than the raindrops
As I looked up and saw it painted against the sky.
The outside of the building was as beautiful as the outside of anything can be
But the inside was pure enchantment.", ], "imgUrl": `${prefix}../138/tower-2.webp`, "link": `${prefix}../138/manhattan-tower.html`, }, ], "Poetry": [ { "title": "The Drone Cometh", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "All the people of the village unite
to sing and drink and dance the night;
The bride is lovely in her new white gown
Her smile lights up all the town.", "Look out, be careful, the drone's a-comin'
The time has come to think of runnin'!", "All the people so happy and gay
The groom knows not what to say,
The mother of the bride with pride is swollen;
A moment of peace is being stolen.", "Look out, be careful, the drone's a-comin'
The time has come to think of runnin'!", ], "imgUrl": `${prefix}wedding.jpg`, "link": `${prefix}drone-cometh.html`, }, { "title": "Brown Girl Creed", "sub-title": "", "author": "Barbara Jane Reyes", "description": [ "I believe in my mother, the mother almighty,
mover of heaven and earth,
creator of daughters and dinner,
all that is always unseen,
", "I believe in my mother, daughter of Dr. and Mrs. Pulmano,
who dreamed an American dream,
who suffered barely making ends meet,
who suffered giving everything unto everyone, ", ], "imgUrl": `${prefix}reyes.png`, "link": `${prefix}reyes-brown-girl.html`, }, ], "Biography": [ { "title": "Far Away and Long Ago", "sub-title": "Chapter I", "author": "W. H. Hudson", "description": [ "EARLIEST MEMORIES", "Preamble--The house where I was born--The singular Ombu tree--A tree without a name--The plain--The ghost of a murdered slave—Our playmate, the old sheep-dog--A first riding-lesson--The cattle: an evening scene--My mother--Captain Scott--The hermit and his awful penance.", "It was never my intention to write an autobiography. Since I took to writing in my middle years I have, from time to time, related some incident of my boyhood, and these are contained in various chapters in The Naturalist in La Plata, Birds and Man, Adventures among Birds, and other works, also in two or three magazine articles: all this material would have been kept back if I had contemplated such a book as this. When my friends have asked me in recent years why I did not write a history of my early life on the pampas, my answer was that I had already told all that was worth telling in these books. And I really believed it was so; for when a person endeavours to recall his early life in its entirety he finds it is not possible: he is like one who ascends a hill to survey the prospect before him on a day of heavy cloud and shadow, who sees at a distance, now here, now there, some feature in the landscape--hill or wood or tower or spire—touched and made conspicuous by a transitory sunbeam while all else remains in obscurity. The scenes, people, events we are able by an effort to call up do not present themselves in order; there is no order, no sequence or regular progression--nothing, in fact, but isolated spots or patches, brightly illumined and vividly seen, in the midst of a wide shrouded mental landscape.", ], "imgUrl": `${prefix}ombu-tree.jpg`, "link": `${prefix}hudson-far-away-chapter-1.html`, }, ], "Political Science": [ { "title": "Toward a Threefold Society", "sub-title": "Basic Issues of the Social Question", "author": "Rudolf Steiner", "description": [ "The challenges which contemporary society presents will be misunderstood by those who approach them with utopian ideas. It is of course possible to believe that any one of diverse theories, arrived at through personal observation and conviction, will result in making people happy. Such a belief can acquire overwhelming persuasive power. Nevertheless, as far as the social question of the times is concerned, it becomes irrelevant as soon as the attempt is made to assert it.", "The following example, although seeming to carry this proposition to an extreme, is nevertheless valid. Let us assume that someone is in possession of a perfect, theoretical solution to the social question. In spite of this, in attempting to offer it to the public he becomes the victim of an unpractical belief. We no longer live in an age in which public life can be influenced in this way. People's minds are simply not disposed to accept the ideas of another as far as this subject is concerned. They will not say: here is someone who knows how society should be structured, so we will act according to his opinions.", ], "imgUrl": `${prefix}threefold-cover.jpg`, "link": `${prefix}threefold-preface.html`, }, ], "Fiction": [ { "title": "A Streetcar Named Karma", "author": "Frank Thomas Smith", "description": [ "Prague", "A lecture wasn't exactly what I had in mind for the evening, but there we were, Katrina and I, approaching the hall where it was to take place. A full moon shone into the narrow cobblestoned street. Its presence more or less guaranteed that there would be no more snow that night.", "That same day, I think it was early afternoon, I had boarded a streetcar and found a spot among the standees, when the clasp on my briefcase somehow opened as we rounded a sharp curve and the books and papers tumbled out. I bent to retrieve them and fell against another standee, knocking her over and falling almost on top of her. I stammered apologies in German, my native tongue, instead of Czech. My reaction was automatic, but the fact is that in that enlightened age all educated people in Prague spoke German. Hers was lightly accented. She helped me pick up my things, which were strewn around and soiled by the slush the passengers' shoes had tracked into the car. An elderly couple vacated a double seat at the next stop and I quickly grasped the hand-guard and invited her to sit next to the window. I took my place next to her on the aisle. She wasn't a beautiful woman, at least not in the usual sense. You could have called her attractive though. Her most salient feature was her smile, wide and spontaneous, lighting up her face. Though she wore a heavy fur coat against the cold, I could tell that she was somewhat plump, which was to my taste.", ], "imgUrl": `${prefix}streetcar-prague.jpg`, "link": `${prefix}streetcar-karma.html`, }, ], "Anthroposophy": [ { "title": "Esoteric Lessons for the First Class of the School for Spiritual Science at the Goetheanum", "sub-title": "Lesson One", "author": "Rudolf Steiner", "description": [ "My dear friends, With this lesson I would like to restore to the Free School for Spiritual Science as an esoteric institution the task which it has been in danger of being deprived of during the past years. In this introductory lecture I will not go further into explaining that situation, but I wanted to stress the importance of this moment by indicating the seriousness with which our movement – which is daily being endangered and undermined – must be imbued, especially in this School. This is no unnecessary observation, for such seriousness has not been apparent everywhere.", "A kind of preparatory introduction will be given today, my dear friends. And I would like to emphasize that in this School spiritual life is to be revealed in its true meaning, so that you will be able to consider this School as an institution which can provide for the revealed spiritual needs of our times. This spiritual life can be deepened in all its aspects. But a center must exist from out of which this deepening derives, and the Center can be seen by those who wish to be members of the School to be the Goetheanum in Dornach.", ], "imgUrl": `${prefix}`, "link": `${prefix}first-class-lesson-1.html`, }, ], "Current Events": [ { "title": "Be Careful What You Wish For", "sub-title": "The True Lessons of the Afghan War", "author": "Rajan Menon", "description": [ "Disagreements over how to assess the American exodus from Afghanistan have kept the pundits busy these last weeks, even though there wasn’t much to say that hadn’t been said before. For some of them, however, that was irrelevant. Having overseen or promoted the failed Afghan War themselves, all the while brandishing various “metrics” of success, they were engaged in transparent reputation-salvaging.", "Not surprisingly, the entire spectacle has been tiresome and unproductive. Better to devote time and energy to distilling the Afghan war’s larger lessons.", "Here are four worth considering.", "Lesson One: When You Make Policy, Give Serious Thought to Possible Unintended Consequences", "The architects of American policy toward Afghanistan since the late 1970s bear responsibility for the disasters that occurred there because they couldn’t, or wouldn’t, look beyond their noses. As a result, their policies backfired with drastic consequences. Some historical scene-setting is required to understand just why and how.", ], "imgUrl": `${prefix}taliban-soldiers.jpg`, "link": `${prefix}menon-afghan-war.html`, }, { "title": "The Path to a Livable Future", "sub-title": "or Will Rich Corporations Trash the Planet?", "author": "Noam Chomsky and Stan Cox", "description": [ "This month will mark a critical juncture in the struggle to avoid climate catastrophe. At the COP26 global climate summit kicking off next week in Glasgow, Scotland, negotiators will be faced with the urgent need to get the world economy off the business-as-usual track that will take the Earth up to and beyond 3 degrees Celsius* of excess heating before this century’s end, according to the Intergovernmental Panel on Climate Change (IPCC). Yet so far, the pledges of rich nations to cut greenhouse-gas emissions have been far too weak to rein in the temperature rise. Meanwhile, the Biden administration’s climate plans hang in the balance. If Congress fails to pass the reconciliation bill, the next opportunity for the United States to take effective climate action may not arise until it’s too late.", "For the past several decades, Noam Chomsky has been one of the most forceful and persuasive voices confronting injustice, inequity, and the threat posed by human-caused climate chaos to civilization and the Earth. I was eager to know Professor Chomsky’s views on the roots of our current dire predicament and on humanity’s prospects for emerging from this crisis into a livable future. He very graciously agreed to speak with me by way of a video chat. The text here is an abridged version of a conversation we had on October 1, 2021.", ], "imgUrl": `${prefix}isla-las-flores.jpg`, "link": `${prefix}chomsky-cox.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"); p.className = "nav-menu-links"; p.id = articles[category][0]["title"]; p.innerText = category; p.dataset.category = category; 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"); li.className = "nav-menu-links"; li.id = article["title"]; li.innerText = `${article.title} - ${article.author}`; li.dataset.category = category; list.appendChild(li); }); navMenuElement.appendChild(content); } }); } createMenuLinks(); //event listeners const navmenuLinkArray = Array.from( navMenuElement.querySelectorAll(".nav-menu-links") ); navmenuLinkArray.forEach(link => { link.addEventListener("click", () => { createArticlePeek(link.dataset.category, link.id); 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 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(/\s/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 const mobileSubscribe = document.querySelector("#mobile-subscribe"); const mobileSubscribeContent = subscribeDiv.cloneNode(true); 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); mobileSubscribe.appendChild(mobileSubscribeContent); //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 === "light") { stylesheet.href = `${prefix}css/light.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"); }); //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("Title Page", "Murder Most Foul"); //-------------------------------- // 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() // } //------------------- }());