(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": "Somewhere Over the Rainbow", "sub-title": "", "author": "", "description": [ "
\"As for my feelings toward 'Over the Rainbow,' it's become part of my life. It is so symbolic of all my dreams and wishes that I'm sure that's why people sometimes get tears in their eyes when they hear me sing it.\"
", "
Judy Garland
", "Judy Garland (born Frances Ethel Gumm; June 10,1922 – June 22, 1969) was an American actress and singer. While critically acclaimed for many different roles throughout her career, she is widely known for playing the part of Dorothyin The Wizard of Oz (1939) She attained international stardom as an actress in both musical and dramatic roles, as a recording artist and on the concert stage.", "Garland began performing as a child with her two older sisters, in a vaudeville group \"The Gumm Sisters\" and was later signed to Metro-Goldwyn-Mayer as a teenager. She appeared in more than two dozen films for MGM. Garland was a frequent on-screen partner of both Mickey Rooney and Gene Kelly and regularly collaborated with director and second husband Vincente Minnelli. Other starring roles during this period included Meet Me inSt. Louis (1944), The Harvey Girls (1946), Easter Parade (1948) and Summer Stock (1950). In 1950, after 15 years with MGM, the studio released her amid a series of personal struggles that prevented her from fulfilling the terms of her contract.", "Although her film career became intermittent thereafter, two of Garland's most critically acclaimed roles came later in her career: she received a nomination for the Academy Award for Best Actress for her performance in A Star Is Born (1954) and a nomination for Best Supporting Actress for her performance in Judgment at Nuremberg (1961). She also made record-breaking concert appearances, released eight studio albums and hosted her own Emmy-nominated television series, The Judy Garland Show (1963–1964).", "She struggled in her personal life from an early age. The pressures of early stardom affected her physical and mental health from the time she was a teenager; her self-image was influenced by constant criticism from film executives who believed that she was physically unattractive and who manipulated her onscreen physical appearance. Throughout her adulthood she was plagued by alcohol and substance abuse, as well as financial instability. Her lifelong substance use disorder ultimately led to her death from an accidental barbiturate overdose in 1969, at age 47.", "That's from Wikipedia. I saw Judy perform at the Palace theater in New York when I was nineteen years old, just before leaving for U.S. Army basic training. It was during the Korean War. I was already in love with her, (although I went to the Palace with a girlfriend) probably because of The Wizard of Oz (1938) and other films. She was sensational, possessed of a charisma impossible to describe. The audience was devastated, when she finished and ran off there was absolute silence...until the standing ovation began and never ended.", "Here are links to her singing Somewhere Over the Rainbow in The wizard of Oz and in 1951 at the Palace:", "In the Wizard of Oz", "\"\"", "at the Palace", "\"\"", ], "imgUrl": `${prefix}judy-1.jpg`, "link": `javascript:void(0)`, "poem": false, "mainImg": true, }, ], "Anthroposophy": [ { "title": "Esoteric Lessons for the First Class of the School for Spiritual Science", "sub-title": "Lesson Seven", "author": "Rudolf Steiner", "description": [ "My dear friends,", "Quite a large number of new members of this School are present, and I am therefore obliged to again say a few words about its principles. First if all, this School represents the impulse of the anthroposophical movement which was renewed here durng the Christmas Conference at the Goetheanum. Previously there were several esoteric circles. All these esoteric circles must be gradually absorbed into this School, beause with the Christmas Conference a new spirit was introduced into the anthroposophical movement insofar as it streams through the Anthroposophical Society.", "I have repeatedly spoken about what the difference is between the anthropoophical movement before the Christmas Conference and the one we now have since Christmas. Previously the Anthroposophical Society was a kind of administrative body for anthroposophical teaching and content. Within the Anthroposophical Society, Anthroposophy was, so to speak, cultivated. Since Christmas anthroposophy is not only cultivated, it is also carried out; meaning that everything which passes through the Anthroposophical Society as activity, as thought, is anthroposophy itself.", ], "imgUrl": `${prefix}1goetheanum.jpg`, "link": `${prefix}steiner-class-1-7.html`, "poem": false, }, { "title": "The Rub", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "I was sitting on the veranda, the winter sun high enough to warm me. I closed the book I was reading – a kindle edition of Stephen King's The Green Mile – and looked into the small forest which began about thirty yards from where I was sitting. I saw, or thought I saw a face there within the green. It was unclear, unfocused, so to speak. A cloud-like formation crept from the east to cover it, but then dissipated. I tried to determine who it was, but could not. I thought of Jesus, whom I had had occasion to meet some years ago in a dream when I lived in Geneva. I wrote it down in my “dream book”:", "May 15, 1985 - I was with John Rogan in a park. We were walking away from a lake when a woman's voice called to us. “You there of the same race.” We turned and saw a man with a light-colored beard and a woman walking together on the lake. They were smiling and walking toward us on the water. We started to tingle all over and felt weak with joy. John went down on one knee. I just stood there. A wonderful feeling of recognition coursed through me – and thankfulness. Yes, this is it, oh my God! But they stopped before reaching us. It was too much perhaps. The woman said, I think to John, “You would like us to continue, I know, but ...” I woke up. It was Christ. The woman, I don't know. Maybe they were both Christ, different aspects of him [or Mary Magdalene]. They were dressed in normal, casual modern clothes." ], "imgUrl": `${prefix}hamlet-2.jpg`, "link": `${prefix}the-rub.html`, "poem": false, }, ], "Children's Corner": [ { "title": "Grandma Butterfly", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "Grown-ups called her Doña Margarita. She had come to Argentina from Europe many years ago. It was said that she had lost her whole family in the war. That’s why she had no grandchildren. The children on the block used to call her Grandma because she was like a grandmother to us all.", "She worked as an operator for the telephone company and almost every day she called one of us from her job and gave us a message from God: that we be good, that we obey our parents, that we love and help one another – that kind of thing. She didn’t say they were messages from God, but my friend Agustina, who knows more about those things, said they must be and the rest of us were sure that she was right. After Grandma retired she didn’t call us any more because she would have had to pay for the calls and she didn’t have much money.", "On her last day at work I was the one she called: \“Hello, Carolina. It’s me, Grandma.\"", ], "imgUrl": `${prefix}butterfly-lady.jpg`, "link": `${prefix}grandma.html`, "poem": false, }, { "title": "The Magic Mound", "sub-title": "Chapter 2 - Sergio And Divino Find The Magic Mound", "author": "Frank Thomas Smith", "description": [ "It was late afternoon when Sergio and Divino started out, but there were still several hours of daylight left. Sergio studied the rushing stream that separated the house from the forest, then backed up and ran toward it as fast as he could. At the last moment he gave a mighty leap and landed safe and dry on the other side. Divino, knowing he couldn't jump across as his brother had, stood on the bank and felt like crying.", "\"Go back to the house,\" Sergio said. \"You're too small for this job.\" Divino looked so sad that Sergio relented. \"Oh, all right, come along downstream. Maybe there's a narrow spot where even you can cross.\"", "They followed the stream, Sergio on one side, Divino on the other, until they came to a bend where some large rocks lay in the water forming stepping-stones. Divino skipped easily across them. \"Someone must have put them there so little kids can cross too,\" he said. But his brother laughed and said they must have always been there.", ], "imgUrl": `${prefix}magic-mound-3.jpg`, "link": `${prefix}magic-mound-2.html`, "poem": false, }, ], "Fiction": [ { "title": "Slapstick Blues", "sub-title": "", "author": "DC Diamondopolous", "description": [ "Booker La Croix liked nothing better than to put on his best hat, hitch a ride from Huddle Creek up to Baton Rouge, and spend his day off in a dark theatre watching the moving pictures. He paid his seven cents for the ticket, went around the side entrance, and climbed the steps to the balcony. The matinee featured his favorite, Buster Keaton, in The Balloonatic and Our Hospitality, and there would be short movies in-between. It'd be a whole afternoon of laughter, except when he looked over, wishing his sister to be sitting there next to him. With Lila Mae gone, his closest friends were books and the flickers.", "His brother Jeremiah thought him crazy to spend his day off watching white folks. The youngest of five boys, Booker was always picked on. His brothers nicknamed him Booker for preferring to read over playing ball and sneaking shots of moonshine. They teased him for working in the parish library and laughed at him when he tried to slick back his hair with brilliantine like Rudolph Valentino, but nothing straightened his thick coiled hair.", ], "imgUrl": `${prefix}cotton-club-2.jpg`, "link": `${prefix}slapstick-blues.html`, "poem": false, }, ], "Current Events": [ { "title": "Deaf to History's Questions", "sub-title": "A Tale of Two Elizabeths, One Joe, One Donald, and Us", "author": "Andrew Bacevich", "description": [ "Britons mourned the recent passing of Queen Elizabeth II, and understandably so. The outpouring of affection for their long-serving monarch was more than commendable, it was touching. Yet count me among those mystified that so many Americans also professed to care. With all due respect to Queen Latifah, we decided way back in 1776 that we’d had our fill of royalty.", "Mere weeks after the death of Elizabeth II came the demise of another Elizabeth, better known as Liz, whose tenure as British prime minister shattered all previous records for brevity. Forty-four days after Her Majesty had asked her to form a government, Liz Truss announced her decision to step down. Cries of “No, Liz, stay on!” were muted indeed, while she herself seemed to feel a sense of relief that her moment at the pinnacle of British politics had ended so swiftly.", "As a general rule, I no more care who resides at 10 Downing Street than who lives in Buckingham Palace, since neither bears more than the most marginal relevance to the well-being of the United States. Even so, I confess that I found the made-for-tabloids tale of Truss’s rise and fall riveting — not a Shakespearean tragedy perhaps but a compelling dramedy offering raw material — most memorably in the form of lettuce — sufficient to supply stand-up comics the world over.", ], "imgUrl": `${prefix}warhol-uncle-sam.jpg`, "link": `${prefix}bacevich-deaf-to-history.html`, "poem": false, }, { "title": "The White House Rodeo", "sub-title": "", "author": "Mike Davis", "description": [ "Earlier this year, four gaunt horsemen in black shrouds cantered down Pennsylvania Avenue. Since no one complained or even noticed, they grazed their hungry steeds on the White House lawn. They’ve been there ever since and threaten never to leave.", "This interview with them is a Tomdispatch exclusive:", '“First Horseman, please state your name for our readers.”', '“My name is Oil and my price is $50 per barrel and higher yet to come.”', '“Fine, and you’re from?”', '“Hubbert’s Peak.”', '“Is that in Colorado?”', 'No response', ], "imgUrl": `${prefix}four-horsemen.jpg`, "link": `${prefix}davis-rodeo.html`, "poem": false, }, ], "Spiritual Science": [ { "title": "The Diamond Way", "sub-title": "Baseball as an Esoteric Ritual", "author": "Hannah M.G.Shapero", "description": [ "It is the vernal equinox, and the ritual has begun. The participants enter into the sacred quadrant and take their stations at geometrically significant places. They are all men, dressed in pure white garb, marked with colorful esoteric symbols. They hold ritual implements in their hands. Four more men arrive; they are dressed in dark blue. Like concelebrating priests, they confer on the details of the liturgy. Then they too take their places.", "A sacred hymn is intoned, and after that come the opening words of the ceremony: \“PLAY BALL!\”", "We need look no further than the local baseball diamond to find high ritual. There is no need to hanker after secret Masonic rites in closed halls or occult workings in incense-filled chambers. Wherever baseball is played, a true ritual goes on, as exoteric as daylight, as powerful as spring.", ], "imgUrl": `${prefix}baseball3.jpg`, "link": `${prefix}diamond.html`, "poem": false, }, ], "Poetry": [ { "title": "Reincarnation Blues - Canto XII", "sub-title": "", "author": "Frank Thomas Smith", "description": [ "Proof of God is in the hexagon,
It's not at all like the pentagon.
If you don't believe me, see the bee,
whose brain is smaller than a pea.", "It never went to school to learn
the best way to make a hive
and yet its six-sided cells all yearn
to keep the baby-bees alive.", ], "imgUrl": `${prefix}bee-cell-1.png`, "link": `${prefix}reincarnation-blues-12.html`, "poem": true, }, { "title": "Liberty, Equality, Fraternity", "sub-title": "", "author": "Michael Schreyer", "description": [ "The ideals of the French Revolution,
brought to the world much to early,
misunderstood for so many years,
are barely contained now with meaning.", "So they remain merely as slogans
incapacitated for action.
How can we do what's needed
to transpose them into reality?", ], "imgUrl": `${prefix}freedom-e-f.jpg`, "link": `${prefix}freedom-eng.html`, "poem": true, }, ], }; 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 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"]; 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"; 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 = "left"; } 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(); }; })();