From 3ad1abc4358210034ea399f111609ea3297542cc Mon Sep 17 00:00:00 2001 From: uzi <43224578+vickkie@users.noreply.github.com> Date: Sun, 24 Mar 2024 01:33:25 +0300 Subject: [PATCH] Selector Co-Authored-By: Quinzel <159898936+uzitrake@users.noreply.github.com> --- js/main.js | 59 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 31 insertions(+), 28 deletions(-) diff --git a/js/main.js b/js/main.js index ddaa6e9..b03b0ad 100755 --- 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