(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 = { "Featured Art": [ { "title": "The Flag is Bleeding", "sub-title": "", "author": "Faith Ringgold", "description": [ "“The Flag is Bleeding” is part of a series called American People that Ringgold began in 1963. The 20 paintings depict diverse subjects—men and women, Black and white—in a variety of scenarios that consider tensions between the races.", 'Faith Ringgold (born October 8, 1930 in Harlem, New York City) is an American painter, writer, mixed media sculptor, and performance artist, best known for her narrative quilts. Ringgold began her painting career in the 1950s. Her early work is composed with flat figures and shapes. She was inspired by the writings of James Baldwin and Amiri Baraka, African art, Impressionism, and Cubism to create the works she made in the 1960s. Though she received a great deal of attention with these images, many of her early paintings focused on the underlying racism in everyday activities; which made sales difficult, and disquieted galleries and collectors.  These works were also politically based and reflected her experiences growing up during the Harlem Renaissance – themes which matured during the Civil Rights Movement and Women\'s movement... Check out https://en.wikipedia.org/wiki/Faith_Ringgold for more.', ], "imgUrl": `${prefix}ringgold-flag-burning.webp`, "link": `javascript:void(0)`, "mainImg": true, }, ], "Book Review": [ { "title": "The Coronavirus Pandemic - Anthroposophical Perspectives", "sub-title": "by Judith von Halle - translated by Frank Thomas Smith", "author": "Paula Cappa", "description": [ "Author Judith von Halle writes an impressive and brave perspective on why the Coronavirus pandemic is happening to us at this time. She addresses the psychological aspects but focuses mostly on spiritual knowledge, spiritual reality, and “spiritual-science.” The term spiritual-science drew my curiosity. This 100-page book is a monograph that I would often pause in the reading so I could reflect on the somewhat radical ideas. Some readers will find certain insights a bridge too far, as I did at times, but most of it makes convincing sense and offers the reader a unique understanding of Covid-19. Haven’t we all asked, “Why is this happening now? What is really going on here with all this sickness, death, and widespread contagion?”", ], "imgUrl": `${prefix}coronavirus-book-cover.jpg`, "link": `${prefix}cappa-review-coronavirus.html`, }, ], "Anthroposophy": [ { "title": "First Class Lesson Two", "sub-title": "Esoteric Lessons for the First Class of the Free School for Spiritual Science at the Goetheanum", "author": "Rudolf Steiner", "description": [ "We will relate what is said today to the previous lesson, partly to preserve the thread, and partly because there are members present who were not here last time. We shall therefore start with a short recapitulation of the last lesson.", "We proceeded in thought to the place where the human being – who with normal consciousness can grasp the sense-world, which is the world that surrounds him – can feel himself related to the super-sensible, related to a being which corresponds to his own being. And we want to first develop this sensation before proceeding to the mysteries of the spiritual life, which we will do shortly.", ], "imgUrl": `${prefix}esoteric-lessons-cover.jpg`, "link": `${prefix}first-class-one-lesson-two.html`, }, { "title": "Spiritual Scientific Cosmology", "sub-title": "Lecture One", "author": "Rudolf Steiner", "description": [ "The lecture cycle on the basic elements of Theosophy that I recently announced will have to be given later at a more appropriate time. I have postponed those lectures and decided for now to dedicate Thursdays to the subject of cosmology, the evolution of the world, that is, the teaching about the inception of the world and the shaping of the human being within this world in a theosophical sense.", "I am aware that this involves the most difficult chapter of theosophical teaching, and I can inform you that several of our branches have decided not to even touch upon this chapter because it is too difficult. Nevertheless, I have decided to do so, because I believe that the indications I am able to give may be useful to many of you. Even though we cannot cover the subject completely at once, we can nevertheless receive indications that will serve to allow us to penetrate more deeply into the material later.", ], "imgUrl": `${prefix}big-bang.jpg`, "link": `${prefix}steiner-cosmology.html`, }, { "title": "Una Historia de la Antroposofía en la Argentina", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "Para la jornada semipública de la Sociedad Antroposófica en la Argentina de septiembre 2018, fui invitado a participar con una charla sobre “la historia de la Antroposofía en la Argentina”. Pregunté si querían inspiración o verdad. Verdad por supuesto, me dijeron. Pero, al final, decidí no participar en la jornada y, en vez, escribir sobre lo que yo conozco de esa historia – no solamente la parte positiva e inspiradora, sino también la parte oscura...", ], "imgUrl": `${prefix}brain-bulb.jpg`, "link": `${prefix}historia-antroposofia-argentina.html`, }, ], "Current Events": [ { "title": "My Life with Maus", "sub-title": "", "author": "Tom Engelhardt", "description": [ 'Sometimes life has a way of making you realize things about yourself. Recently, I discovered that an urge of mine, almost four decades old, had been the very opposite of that of a rural Tennessee school board this January. In another life, I played a role in what could be thought of as the unbanning of the graphic novel Maus.', ], "imgUrl": `${prefix}maus-cover.jpg`, "link": `${prefix}engelhardt-maus.html`, }, ], "Poetry": [ { "title": "Berlin Queries and other poems", "sub-title": "", "author": "Richard Lord", "description": [ "When you ask where something is, in Berlin,
And it’s not there anymore, but gone somewhere else,
They’ll find something else, but just like your wish,
That’s just like your wish, but in a different place.", ], "imgUrl": `${prefix}berlin-wall.jpg`, "link": `${prefix}lord-berlin-poems-2.html`, }, { "title": "Chess and Cheese in Crete", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "To sit outdoors in Crete
with you and coffee, hardtoast,
creamy butter and yoghurt
after a morning swim
in the rosy-fingered dawn...", "And for lunch at the bubbling port
unidentifiable sea-things,
lukewarm vegetables, cheese,
the deceptive yellow wine
churning my burning blood,", ], "imgUrl": `${prefix}lovers-crete.jpg`, "link": `${prefix}daughter-sun-and-others.html`, }, { "title": "The Song of the Smoke", "sub-title": "", "author": "W.E.B. Du Bois", "description": [ "I am the smoke king,
I am black.
I am swinging in the sky,
I am ringing worlds on high;
I am the thought of the throbbing mills,
I am the soul of the Soul toil kills,
I am the ripple of trading rills.
Up I’m curling from the sod,
I am whirling home to God.
I am the smoke king,
I am black.", ], "imgUrl": `${prefix}du-bois.jpg`, "link": `${prefix}smoke-king.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(/\s/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"].toLowerCase().replace(/\s/g, ""); 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 firstChild = document.querySelector("#main-div").firstElementChild; const navDiv = document.createElement("div"); navDiv.appendChild(picNavDiv); 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(/\s/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"]; 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 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 === "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() // } //------------------- }());