Merge pull request #18 from vickkie/Pair

Selector
vickkie · Mar 24, 2024 · 8991021 · 8991021
2 parents ca86371 + 3ad1abc
commit 8991021
Showing 1 changed file with 31 additions and 28 deletions.
diff --git a/js/main.js b/js/main.js
@@ -1,3 +1,6 @@
+let select = (e) => document.querySelector(e);
+let selectAll = (e) => document.querySelectorAll(e);
+
 // Group 0: service worker
 // main.js
 if ("serviceWorker" in navigator) {
@@ -14,7 +17,7 @@ if ("serviceWorker" in navigator) {
 //Group 1; code to update time
 document.addEventListener("DOMContentLoaded", function () {
   setTimeout(() => {
-    let time = document.querySelector(".time");
+    let time = select(".time");
     function updateTime() {
       var date = new Date();
       time.innerHTML = date.toTimeString().substr(0, 5);
@@ -25,10 +28,10 @@ document.addEventListener("DOMContentLoaded", function () {
     }, 1000);
 
     //Group 2; code to open menu
-    let openMenu = document.querySelector(".button-menu");
-    let closeMenu = document.querySelector(".button-close");
-    let menuholders = document.querySelectorAll(".menu-will-open");
-    let myCursor = document.querySelector(".mf-cursor");
+    let openMenu = select(".button-menu");
+    let closeMenu = select(".button-close");
+    let menuholders = selectAll(".menu-will-open");
+    let myCursor = select(".mf-cursor");
 
     menuholders.forEach((body) => {
       openMenu.addEventListener("click", () => {
@@ -108,7 +111,7 @@ document.addEventListener("DOMContentLoaded", function () {
         return afterPseudo;
       }
 
-      document.querySelectorAll("[line-triggerX]").forEach(function (element) {
+      selectAll("[line-triggerX]").forEach(function (element) {
         const lineTrigger = element.getAttribute("line-triggerX");
 
         const linetimeline = lineTimeline(element);
@@ -147,7 +150,7 @@ document.addEventListener("DOMContentLoaded", function () {
         return afterPseudoY;
       }
 
-      document.querySelectorAll("[line-triggerY]").forEach(function (element) {
+      selectAll("[line-triggerY]").forEach(function (element) {
         const lineyTrigger = element.getAttribute("line-triggerY");
 
         const lineytimeline = lineyTimeline(element);
@@ -192,7 +195,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Group 6 : folding of text from opaCITY AnimaTION
 
-    const fx28Titles = [...document.querySelectorAll("[data-splitting][data-effect28]")];
+    const fx28Titles = [...selectAll("[data-splitting][data-effect28]")];
 
     if (fx28Titles) {
       gsap.registerPlugin(ScrollTrigger);
@@ -266,8 +269,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
     //Group 7; code to change image on menu clicking
 
-    let menGallery = document.querySelector(".menu-gallery"),
-      workMenu = document.querySelector(".menu-work"),
+    let menGallery = select(".menu-gallery"),
+      workMenu = select(".menu-work"),
       gallerypics = menGallery.querySelectorAll(".gallery__item-imginner");
 
     const changeWorkMenu = () => {
@@ -334,11 +337,11 @@ document.addEventListener("DOMContentLoaded", function () {
 
     //Group 8; code to toggle dark-light modes
 
-    let toggleButton = document.querySelector(".knob");
-    let togglePath = document.querySelector(".dark-toggle");
-    let root = document.querySelector("body");
+    let toggleButton = select(".knob");
+    let togglePath = select(".dark-toggle");
+    let root = select("body");
 
-    let xCursor = document.querySelector(".mf-cursor");
+    let xCursor = select(".mf-cursor");
 
     let on = false;
 
@@ -351,7 +354,7 @@ document.addEventListener("DOMContentLoaded", function () {
         duration: 0.4,
         ease: "expo.in",
       });
-      let heylinkers = document.querySelectorAll(".portfolio-map a");
+      let heylinkers = selectAll(".portfolio-map a");
       heylinkers.forEach((heylinker) => {
         gsap.set(heylinker, {
           color: on ? "#fff" : "#000",
@@ -373,10 +376,10 @@ document.addEventListener("DOMContentLoaded", function () {
       let cursor = new MouseFollower();
     }
 
-    if (document.querySelector(".mf-cursor")) {
+    if (select(".mf-cursor")) {
       function hideMf() {
         if (innerWidth < 768) {
-          document.querySelector(".mf-cursor").style.display = "none";
+          select(".mf-cursor").style.display = "none";
         }
       }
 
@@ -386,7 +389,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Group 10:  Magnetic effect for elements with class .viewall
 
-    const els = document.querySelectorAll(".magnetic");
+    const els = selectAll(".magnetic");
 
     els.forEach((el) => {
       el.addEventListener("mouseenter", () => {
@@ -411,10 +414,10 @@ document.addEventListener("DOMContentLoaded", function () {
 
     gsap.registerPlugin(ScrollToPlugin);
 
-    let toContact = document.querySelector(".tocontact"),
-      toworks = document.querySelector(".toworks"),
-      tohero = document.querySelector(".tohero"),
-      toabout = document.querySelector(".toabout");
+    let toContact = select(".tocontact"),
+      toworks = select(".toworks"),
+      tohero = select(".tohero"),
+      toabout = select(".toabout");
 
     toContact.addEventListener("click", () => {
       gsap.to(window, {
@@ -450,8 +453,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Group 12: turn scrollers to white
 
-    let linkers = document.querySelectorAll(".portfolio-map a");
-    let body = document.querySelector("body");
+    let linkers = selectAll(".portfolio-map a");
+    let body = select("body");
     let colordefault = getComputedStyle(body).backgroundColor;
     let colorbackup = getComputedStyle(body).color;
 
@@ -517,7 +520,7 @@ function copyToClipboard(text) {
   if (innerWidth > 767 && document.hasFocus()) {
     navigator.clipboard.writeText(text);
 
-    let copies = document.querySelectorAll(".copy");
+    let copies = selectAll(".copy");
 
     copies.forEach((copy) => {
       copy.innerHTML = "Copied";
@@ -533,7 +536,7 @@ function copyToClipboard(text) {
 const text3d = () => {
   if (innerWidth > 767) {
     gsap.registerPlugin(ScrollTrigger);
-    const fx19Titles = [...document.querySelectorAll("[data-splitting][data-effect19]")];
+    const fx19Titles = [...selectAll("[data-splitting][data-effect19]")];
 
     fx19Titles.forEach((title) => {
       const chars = title.querySelectorAll(".char");
@@ -607,7 +610,7 @@ if (innerWidth > 767) {
 
 //Group 15: lets rotate some i's in the footer
 
-let chars = [...document.querySelectorAll(".rotate-i .char")];
+let chars = [...selectAll(".rotate-i .char")];
 
 // Here we're creating a timeline that we can use
 const lettertl = gsap.timeline({
@@ -622,7 +625,7 @@ lettertl.to(chars[11], { rotation: 360 });
 
 //use the defaults
 
-let emailbox = document.querySelector(".email-box");
+let emailbox = select(".email-box");
 
 //  Group 13: darkmode if user browser prefers