popup & js

src/components/Footer.jsx

@@ -19,8 +19,8 @@ const Footer = ({}) => {
 					<div class="footer__col">
 						<nav class="footer__menu">
                             <ul class="footer__list">
-                                <li class="footer__item"><a href="" class="footer__link"><span>How it Works</span></a></li>
-                                <li class="footer__item"><a href="" class="footer__link"><span>About Us</span></a></li>
+                                <li class="footer__item"><a href="#process" class="footer__link" data-elts="scrollLink"><span>How it Works</span></a></li>
+                                <li class="footer__item"><a href="#about" class="footer__link" data-elts="scrollLink"><span>About Us</span></a></li>
                                 <li class="footer__item"><a href="" class="footer__link"><span>Terms of Use</span></a></li>
                                 <li class="footer__item"><a href="" class="footer__link"><span>Privacy Policy</span></a></li>
                             </ul>
@@ -29,7 +29,7 @@ const Footer = ({}) => {
 
 					<div class="footer__col">
 						<div class="footer__form">
-                            <form action="" class="form form--footer">
+                            <form action="" class="form form--footer" id="subscribe-footer">
                                 <div class="form__box">
                                     <div class="form__field">
                                         <div class="form__title">Don’t miss our news and announcements</div>

src/components/Header.jsx

@@ -1,5 +1,5 @@
 const Header = ({children, data}) => {
-	return <header class="header">
+	return <header class="header" data-elt="header">
 		<div class="header__container">
 			<div class="header__wrap">
 				<a href="" class="header__logo">
@@ -8,7 +8,7 @@ const Header = ({children, data}) => {
 
                 <div class="header__socials">
                     <div class="socials">
-                        <a href="" class="socials__link" target="_blank">
+                        <a href="https://doka.guide/css/grid-guide/" class="socials__link" target="_blank">
                             <svg class="svg-icon" viewBox="0 0 40 40" width="40" height="40"><use xlink:href="#svg-x"></use></svg>
                         </a>
 

src/js/app.js

@@ -1,3 +1,107 @@
+import createDOM from './app/utils/createDOM';
+import Popup from './app/Popup';
+/* import FormFactory, { formDataToObject } from './app/Form.js'; */
+
+class App {
+    constructor() {
+        this.DOM = createDOM();
+        this.body = this.DOM.body;
+        this.scroll = window.scrollY;
+        this.vh = 0;
+
+        this.popup = new Popup(this.DOM);
+
+        /* this.forms = FormFactory([{
+			form: '#subscribe-into',
+			constraints: {
+				email: {
+					presence: true,
+					email: true
+				}
+			}
+		}, {
+            form: '#subscribe-footer',
+			constraints: {
+				email: {
+					presence: true,
+					email: true
+				}
+			}
+		}]); */
+
+        this.init();
+		this.addEvents();
+    }
+
+    init = () => {
+        this.setVh();
+		this.setBaseFontSize();
+    }
+
+    addEvents = () => {
+		document.addEventListener('click', this.handleDocumentClick);
+		window.addEventListener('resize', this.handleResizeEvent);
+		window.addEventListener('load', this.handleLoadEvent);
+		window.addEventListener('scroll', this.handleScrollEvent, { passive: true });
+
+        this.DOM.scrollLink?.forEach((el, i) => {
+			el.addEventListener('click', (e) => {
+				let link = el.getAttribute('href');
+
+				if (link.includes('/') && link.includes('#')) {}
+
+				if (link.includes('#')) {
+					e.preventDefault();
+					this.smoothScroll(el);
+					return false;
+				}
+			});
+		});
+    }
+
+    handleScrollEvent = (e) => {
+        this.scroll = window.scrollY;
+
+        setTimeout(() => {
+            this.setHeaderScrollClass(this.scroll);
+        }, 100);
+    }
+
+    handleResizeEvent = (e) => {
+		this.setVh();
+		this.setBaseFontSize();
+    }
+
+    handleLoadEvent = (e) => {
+		this.body.classList.add('is-init');
+    }
+
+    setVh() {
+		let vh = window.innerHeight * 0.01;
+		document.documentElement.style.setProperty('--vh', `${vh}px`);
+	}
+
+	smoothScroll = (link) => {
+		let targetId = link.getAttribute('href');
+
+		const elt = document.querySelector(targetId.replace(/\//g, ''));
+
+		elt?.scrollIntoView({ block: "start", behavior: "smooth" });
+	}
+
+	setBaseFontSize = () => {
+		let baseFontSize = Math.max(window.innerWidth / 1920, 1);
+		document.documentElement.style.setProperty('--scale', `${baseFontSize}px`);
+	}
+
+    setHeaderScrollClass = (scroll) => {
+        let offset = 0;
+        this.DOM.header.classList.toggle('is-scroll', scroll > offset);
+    }
+}
+
 window.addEventListener('DOMContentLoaded', () => {
     console.log('app inited');
+
+    new App();
 })

src/js/app/Popup.js

@@ -0,0 +1,99 @@
+import getQuery from './utils/getQuery.js';
+import { overflow } from './utils/overflow.js';
+
+export default class Popup {
+	constructor(DOM, options = {}) {
+		this.DOM = DOM;
+		this.query = getQuery();
+		this.onClose = options.onClose || (() => {});
+
+		this.popupOpenControls  = [...document.querySelectorAll('[data-elts~="popupBtn"]')];
+		this.popupCloseControls = [...document.querySelectorAll('[data-elts~="closePopup"]')];
+		this.popups = [...document.querySelectorAll('[data-elts~="popup"][data-popup]')];
+
+		this.openedPopups = [];
+
+		document.body.addEventListener('click', (event) => {
+			const open = event.target.closest('[data-elts~="popupBtn"]');
+
+			if (open) {
+				event.preventDefault();
+			    this.open(open.dataset.popup);
+			}
+
+			const close = event.target.closest('[data-elts~="closePopup"]');
+
+			if (close) {
+				event.preventDefault();
+				this.closeAll();
+			}
+		})
+
+		if (this.query.popup) {
+			this.open(this.query.popup);
+		}
+	}
+
+	removeListener = (elt) => {
+		elt.removeAttribute('data-popup');
+		elt.removeAttribute('data-elts');
+		console.log('removeListener', elt);
+	}
+
+	open = (id) => {
+		const currentOpenedPopups = this.popups.filter(p => {
+			const opened = p.classList.contains('is-open');
+			opened && p.style.setProperty('z-index', 90);
+			return opened;
+		});
+
+		setTimeout(() => {
+			currentOpenedPopups.map(p => {
+				this.close(p.dataset.popup);
+			})
+		}, 300);
+
+		this.popups.forEach((popupElt) => {
+			const open = popupElt.dataset.popup === id;
+			if (open) {
+				popupElt.classList.add('is-open');
+				this.openedPopups.push(id);
+				overflow.on();
+
+				if(id === 'certificates') {
+					this.DOM.body.classList.add('is-certificates-open');
+					overflow.off();
+				}
+			}
+		});
+	}
+
+	close = (id) => {
+		this.popups.forEach((popupElt) => {
+			if (popupElt.dataset.popup === id) {
+				popupElt.classList.remove('is-open');
+				this.onClose(popupElt);
+				setTimeout(() => {
+					popupElt.style.removeProperty('z-index');
+				}, 200);
+				this.DOM.body?.classList.remove('is-settings-open');
+				this.DOM.body?.classList.remove('is-inventory-open');
+				this.DOM.body?.classList.remove('is-certificates-open');
+				overflow.off();
+			}
+		});
+	}
+
+	closeAll = () => {
+		this.popups.forEach((popupElt) => {
+			popupElt.classList.remove('is-open');
+			this.DOM.body?.classList.remove('is-settings-open');
+			this.DOM.body?.classList.remove('is-inventory-open');
+			this.DOM.body?.classList.remove('is-certificates-open');
+			popupElt.style.removeProperty('z-index');
+			overflow.off();
+		})
+
+		this.onClose();
+	}
+}

src/js/app/utils/createDOM.js

@@ -0,0 +1,33 @@
+export default function createDOM(selector = '[data-elt]', multiple = '[data-elts]') {
+	/*
+	// hash map version
+	const DOM = new Map();
+	[...document.querySelectorAll(selector)].forEach((elt, i) => {
+		DOM.set(elt.dataset.dom, elt);
+	});
+	*/
+
+	const DOM = {};
+
+	[...document.querySelectorAll(multiple)].forEach((elt, i) => {
+		let arr = elt.dataset.elts.split(' ');
+
+		arr.forEach(function(item, index, array) {
+			if (DOM[item]) {
+				DOM[item].push(elt);
+			} else {
+				DOM[item] = [elt];
+			}
+		});
+	});
+
+	[...document.querySelectorAll(selector)].forEach((elt, i) => {
+		let arr = elt.dataset.elt.split(' ');
+
+		arr.forEach(function(item, index, array) {
+			DOM[item] = elt;
+		});
+	});
+
+	return DOM;
+}

src/js/app/utils/declination.js

@@ -0,0 +1,12 @@
+export default function declination(number, words) {
+    // words: 0 фильмов, 1 фильма, 2 фильма
+    const w = words, //.split('|'),
+        n = Math.abs(number * 1);
+
+    return n % 10 === 1 && n % 100 !== 11
+        ? w[0]
+        : (n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)
+                ? w[1]
+                : w[2]
+        );
+};

src/js/app/utils/getQuery.js

@@ -0,0 +1,19 @@
+export default function getQuery() {
+	const 
+		params = window.location.search.slice(1);
+
+	if (!params) {
+		return {};
+	}
+
+	const 
+		result = params.split('&').map(function(i) { return i.split('=');}).reduce(function(m,o){ m[o[0]] = o[1]; return m;},{});
+
+	return result;
+}
+
+/*export default function getQuery(name) {
+	let params = new URLSearchParams(location.search.slice(1));
+	
+	return params.get(name);
+}*/

src/js/app/utils/interpolate.js

@@ -0,0 +1,30 @@
+export function interpolate(value, min, max, targetRangeMin, targetRangeMax) {
+	const 
+		result = targetRangeMin + (targetRangeMax - targetRangeMin) * (value - min) / (max - min);
+
+	return result;
+};
+
+export function interpolateClamp(value, min, max, targetRangeMin, targetRangeMax) {
+	const 
+		result = targetRangeMin + (targetRangeMax - targetRangeMin) * (value - min) / (max - min);
+
+	return Math.max(targetRangeMin, Math.min(result, targetRangeMax));
+};
+
+export function norm(value, min, max) {
+	return (value - min) / (max - min);
+}
+
+export function normClamp(val, min, max) {
+    const result = Math.max(0, Math.min((val - min) / (max - min), 1));
+    return result;
+}
+
+export function lerp(norm, min, max) {
+	return (max - min) * norm + min;
+}
+
+export function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}

src/js/app/utils/overflow.js

@@ -0,0 +1,29 @@
+export let overflow = {
+	elements : document.querySelectorAll('body'),
+
+	on: () => {
+		const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+
+		if(scrollWidth > 0){
+
+			document.querySelector('[data-elt ~= "body"]').classList.add('is-fake-scroll');
+			overflow.elements.forEach((el) => {
+				el.style.setProperty('padding-right', `${scrollWidth}px`);
+			});
+
+
+		}
+
+		document.querySelector('[data-elt ~= "body"]').classList.add('is-overflow');
+	},
+	off: () => {
+		if(document.querySelector('[data-elt ~= "body"]').classList.contains('is-fake-scroll')){
+			document.querySelector('[data-elt ~= "body"]').classList.remove('is-fake-scroll');
+
+			overflow.elements.forEach((el) => {
+				el.style.removeProperty('padding-right');
+			});
+		}
+		document.querySelector('[data-elt ~= "body"]').classList.remove('is-overflow');
+	}
+}

src/js/app/utils/wait.js

@@ -0,0 +1,3 @@
+export default async (ms) => {
+    return new Promise(resolve => setTimeout(resolve, ms))
+}

src/layouts/Layout.jsx

@@ -48,12 +48,13 @@ const Layout = ({ children, title, bodyClass }) => {
                     }
                 `}>
             </style> */}
+
         </head>
-        <body class={bodyClass}>
+        <body data-elt="body" class={bodyClass}>
             <SvgIcons />
             {children}
 
-            {/* <script src="/assets/js/app.js"></script> */}
+            <script src="/assets/js/app.js"></script>
         </body>
     </html>
 };