(meta={}, site={}) => { class Ctxt { constructor(meta, site) { this.id = this.getRandom(); //console.log('constructor:', this.id) meta.ctxt = this; this.site = site; } id = 0; count = 0; title = 'Site Configuration'; url = 'https://www.wall.com'; siteName = 'Walls'; siteExcerpt = "Walls excerpt"; navigation = [ { value: "Availability", url: "/availability", }, { value: "Details", url: "/details", }, { value: "Neighborhood", url: "/neighborhood", }, { value: "Residents", url: "/residents", }, { value: "Contact", url: "/contact", }, ]; pagesSiteMap = [ '/', '/about', '/blog', '/contact', ]; documentClickHandler = (evt) => { //console.log('documentClickHandler') const target = evt.target; let isClickInside = true; const fullButton = document.getElementById('mega-menu-full-button') if (Boolean(fullButton?.contains(target))) { // Let the moblie menu do its thing. return; } const full = document.getElementById('mega-menu-full') isClickInside = Boolean(full?.contains(target)) if (!isClickInside) { this.hideMegaMenus(); this.hideMegaMenuFull(); } }; toggleMegaMenuFull = () => { const full = document.querySelector('#mega-menu-full') const blur = document.querySelector('#background-blur') if (!full?.classList.contains(this.gcn('hidden'))) { // Hide menu full?.classList.add(this.gcn('hidden')) full?.classList.remove(this.gcn('!top-20')) blur?.classList.add(this.gcn('hidden')) } else { // Show menu full?.classList.add(this.gcn('opacity-0')) full?.classList.remove(this.gcn('!top-20')) full?.classList.remove(this.gcn('hidden')) blur?.classList.remove(this.gcn('hidden')) setTimeout(() => { full?.classList.remove(this.gcn('opacity-0')) full?.classList.add(this.gcn('!top-20')) }, 50) } }; mobileMenuClickHandler = () => { //console.log('mobileMenuClickHandler') this.hideMegaMenus(); this.toggleMegaMenuFull(); }; hideMegaMenus = () => { const list = document.querySelectorAll('.mega-menu'); list.forEach((node) => { node.classList.add(this.gcn('hidden')) node.classList.add(this.gcn('opacity-0')) }) }; hideMegaMenuFull = () => { const full = document.querySelector('#mega-menu-full') const blur = document.querySelector('#background-blur') full?.classList.add(this.gcn('hidden')) blur?.classList.add(this.gcn('hidden')) }; megaMenuClickHandler = (evt) => { const currentTarget = evt.currentTarget; const idSelector = `${currentTarget?.getAttribute('id')}-menu`; const menu = document.getElementById(idSelector); if (!menu) { return; } if (!menu.classList.contains(this.gcn('hidden'))) { this.hideMegaMenus(); return; } // Hide any open menus this.hideMegaMenus(); // Show the associated menu. const mediaTest = document.getElementById('media-test'); menu.classList.remove(this.gcn('hidden')); setTimeout(() => { menu.classList.remove(this.gcn('opacity-0')) if (mediaTest.offsetParent !== null) { // https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom // Only perform scroll into view on mobile menu currentTarget.scrollIntoView({behavior: 'smooth'}); } }, 25) }; submitHandler = async (evt) => { //console.log('Submit', evt) evt.preventDefault(); const data = []; const fd = new FormData(event.target); const subj = document.getElementById('form-name')?.value || 'Form Submission'; const subject = `${subj} (${window.location}) (${Date.now()})`; const email = document.getElementById('email')?.value || '(none provided)'; const fields = document.querySelectorAll('.mcp-data-field'); if (fields) { fields.forEach((field) => { data.push(` ${field.getAttribute('name') || ''}: ${field?.value || ''} `) }) } fd.set('subject', subject) fd.set('email', email) fd.set('form-name', 'Form Submit') fd.set('data', '---------\n' + data.join('')) const resp = await fetch('/api/submit', { method: 'POST', headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: new URLSearchParams(fd).toString(), }); if (!resp.ok) { this.showToast('toast-failure') return; } this.showToast('toast-success') document.getElementById('reset')?.click(); }; showToast = (id='toast-success') => { const toast = document.getElementById(id); const bg = document.getElementById('toast-bg'); if (toast) { bg.classList.remove(this.gcn('hidden')); toast.classList.remove(this.gcn('hidden')); setTimeout(() => { bg.classList.add(this.gcn('hidden')); toast.classList.add(this.gcn('hidden')); }, 3000) } }; attachHandlers = () => { //console.log('attachHandlers', typeof this.attachSingleHandler, this.id, this) this.attachSingleHandler('.mega-menu-button', 'click', this.megaMenuClickHandler); this.attachSingleHandler('#mega-menu-full-button', 'click', this.mobileMenuClickHandler); this.attachSingleHandler([document.body], 'click', this.documentClickHandler); this.attachSingleHandler('#top-button', 'click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }) // Scroll up button let up = document.querySelector('#top-button'); this.attachSingleHandler([window], 'scroll', () => { let scrollTop = window.pageYOffset || 0; if (scrollTop > 100) { if (!up.classList.contains(this.gcn('hidden'))) { return; } up.classList.remove(this.gcn('hidden')); setTimeout(() => { up.classList.remove(this.gcn('opacity-0')); }, 250) } else { up.classList.add(this.gcn('hidden')); up.classList.add(this.gcn('opacity-0')); } }); }; colorOffWhite = () => { return '#f7f8f9'; }; colorGrey = () => { return '#483c38'; }; colorOrange = () => { return '#f36b24'; }; wrapStyles = () => { return [`text-[${this.colorGrey()}]`, 'prose', 'mx-auto', 'min-h-screen'].join(' '); }; imgStyles = () => { return ['rounded-lg', 'shadow-lg', 'shadow-zinc-800/5', 'ring-1', 'ring-zinc-900/5', 'backdrop-blur'].join(' '); }; headerBaseStyles = () => { return ['font-medium', `text-[${this.colorGrey()}]`].join(' '); }; h1Styles = () => { return this.headerBaseStyles() + ' ' + ['text-4xl', 'md:text-5xl', 'mb-4', 'mb:mb-8', 'uppercase'].join(' ') }; h2Styles = () => { return this.headerBaseStyles() + ' ' + ['text-3xl', 'md:text-4xl', 'mt-0'].join(' ') }; h3Styles = () => { return this.headerBaseStyles() + ' ' + ['text-2xl', 'md:text-3xl', 'mt-0'].join(' ') }; h4Styles = () => { return this.headerBaseStyles() + ' ' + ['text-xl', 'md:text-2xl', 'mt-0'].join(' ') }; button1Styles = () => { return `no-underline rounded cursor-pointer py-3 px-8 bg-white/50 font-medium text-[${this.colorGrey()}] shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur hover:text-teal-500`; }; button2Styles = () => { return `grid grid-rows-1 whitespace-nowrap no-underline rounded cursor-pointer py-3 px-8 font-medium text-white bg-[${this.colorOrange()}] hover:bg-[${this.colorGrey()}] shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition`; }; button1StylesDark = () => { return 'no-underline rounded cursor-pointer m-0 py-3 px-8 bg-zinc-600/90 font-medium text-white shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur hover:text-teal-500'; }; section1Styles = () => { return 'max-w-3xl mx-auto px-3 py-6 md:py-12'; }; formField1Styles = () => { return `bg-gray-50 border border-gray-300 text-[${this.colorGrey()}] text-sm rounded focus:ring-zinc-500 focus:border-zinc-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-zinc-500 dark:focus:border-zinc-500`; }; anchor2Styles = () => { return `text-[${this.colorGrey()}] underline underline-offset-4 decoration-1 hover:text-teal-500`; }; /** * BEGIN: Shared blog formatting */ catTagStyles = () => { return 'text-xs no-underline m-1 py-1 px-2 bg-white/50 font-medium shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur' }; catTagStylesMdRounded = () => { return this.catTagStyles() + ' rounded-md hover:text-teal-500' }; blogPostH1 = (title='') => { return `

${title}

` }; blogPostPublished = (date='') => { return ` Published: ${(new Intl.DateTimeFormat("en", {hour12: true, year: "numeric", month: "short", day: "numeric",})).format(new Date(date))} `; } blogPostUpdated = (date='') => { return ` Updated: ${(new Intl.DateTimeFormat("en", {hour12: true, year: "numeric", month: "short", day: "numeric",})).format(new Date(date))} `; } blogPostCategories = (categories='') => { return `

${categories}

`; } /** * END: Shared blog formatting */ /** * BEGIN: Templates */ headContent = () => { return ` .logo-link { font-family: 'Barlow Condensed', sans-serif; } html, body { min-height: 100%; min-width: 100% max-width: 100%; /*overflow-x: hidden;*/ font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: normal; line-height: 1.5rem; background-color: ` + this.colorOffWhite() + `; color: ` + this.colorGrey() + `; } html { /* overflow: scroll; */ overflow: overlay; } html #mode_moon { display: inline; } html #mode_sun { display: none; } html.dark #mode_moon { display: none; } html.dark #mode_sun { display: inline; } .transition-all-250ms { transition: all 250ms; } .transition-all-500ms { transition: all 500ms; } .transition-all-1s { transition: all 1s; } ::-webkit-scrollbar-thumb, .dark ::-webkit-scrollbar-thumb { background: rgba(90, 90, 90, 0) !important; } ::-webkit-scrollbar-track, .dark ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0) !important; } ::-webkit-scrollbar { width: 0; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ } ` }; mainTemplate = (content='') => { return `

${this.siteHeader()}

${content}

${this.siteFooter()} ` }; siteHeader = () => { return ` ` }; siteMenuItems = () => { const items = []; this.navigation.forEach((item) => { items.push(`

${item.navigation ? ` ` : ` ${item.value} ` }

`) }); return items.join('') }; siteMegaMenuItems = (items=[]) => { const html = []; items.forEach((itm) => { html.push(`

${itm.value}

${itm.text} `); }); return html.join('') }; siteFooter = () => { return ` ` }; backToBlog = () => { return `

Back to Blog

` } /** * END: Templates */ /** * BEGIN: Library */ getLocalStorage = () => { try { return window.localStorage; } catch(err) { return {}; } }; toggleDarkMode = () => { if (this.getLocalStorage().theme === 'dark') { this.setLightMode(true) } else { this.setDarkMode(true) } }; setLightMode = (persist) => { document.documentElement.classList.remove('dark'); if (persist) { this.getLocalStorage().theme = 'light'; } }; setDarkMode = (persist) => { document.documentElement.classList.add('dark'); if (persist) { this.getLocalStorage().theme = 'dark'; } }; checkMode = () => { const params = new URL(window.location.href); const mode = params.searchParams.get('mode'); if (mode === 'light') { this.setLightMode(true); } else if (mode === 'dark') { this.setDarkMode(true); } }; gcn = (nme='', prefix='mcp-') => { let dev = false; if (dev) { return nme } const elem = document.getElementById(`mcp-${nme}`); if (!elem) { console.warn('Unable to locate class value:', nme) return nme; } return elem.classList.value }; getRandom = () => { const min = Math.ceil(0); const max = Math.floor(9999); return `${Math.floor(Math.random() * (max - min + 1)) + min}${Date.now()}`; }; attachSingleHandler = (elms='', eventName='', handler=()=>{}) => { //console.log('attachSingleHandler elms:', elms, 'eventName', eventName, this.id) elms = this.clearHandlers(elms, eventName) if (elms && typeof elms === 'string') { // This may be a selector elms = Array.from(document.querySelectorAll(elms)) } if (Array.isArray(elms)) { //console.log(typeof elms, window.location.href) elms.forEach((elm) => { const refid = eventName + '-' + this.getRandom(); this.setHandlerReference(refid, handler) elm.addEventListener(eventName, handler) if (elm.setAttribute) { elm.setAttribute(`data-${eventName}-ref`, refid) } else { document.body.setAttribute(`data-${eventName}-ref`, refid) } }); } return elms; }; clearHandlers = (elms='', eventName='') => { //console.log('clearHandlers', elms, eventName, this.id) if (elms && typeof elms === 'string') { // This may be a selector elms = Array.from(document.querySelectorAll(elms)) } if (Array.isArray(elms)) { elms.forEach((elm) => { const dataAttr = `data-${eventName}-ref`; let refid; if (elm.getAttribute) { refid = elm.getAttribute(dataAttr) || '' } else { refid = document.body.getAttribute(dataAttr) || '' } let handler = this.getHandlerFromId(refid) elm.removeEventListener(eventName, handler) this.removeHandlerReference(refid); //console.log(refid, handler) }); } return elms; }; removeHandlerReference = (refid='') => { if (window.mcp_handlers && window.mcp_handlers[refid]) { window.mcp_handlers[refid] = null; delete window.mcp_handlers[refid]; return true; } return false; }; getHandlerFromId = (refid='', remove=false) => { let ret = null; if (window.mcp_handlers && window.mcp_handlers[refid]) { ret = window.mcp_handlers[refid]; if (remove) { this.removeHandlerReference(refid); } } return ret; }; setHandlerReference = (refid='', handler=()=>{}) => { window.mcp_handlers = window.mcp_handlers || {}; if (refid && handler) { window.mcp_handlers[refid] = handler } }; initParalax = (emblaApi) => { const TWEEN_FACTOR = 1.2 const calculateTweenValuesParallax = (emblaApi) => { const engine = emblaApi.internalEngine() const scrollProgress = emblaApi.scrollProgress() return emblaApi.scrollSnapList().map((scrollSnap, index) => { if (!emblaApi.slidesInView().includes(index)) return 0 let diffToTarget = scrollSnap - scrollProgress if (engine.options.loop) { engine.slideLooper.loopPoints.forEach((loopItem) => { const target = loopItem.target() if (index === loopItem.index && target !== 0) { const sign = Math.sign(target) if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress) if (sign === 1) diffToTarget = scrollSnap + (1 - scrollProgress) } }) } return diffToTarget * (-1 / TWEEN_FACTOR) * 100 }) } const setupTweenParallax = (emblaApi) => { const tweenNodes = emblaApi .slideNodes() .map((slideNode) => slideNode.querySelector('.embla__parallax__layer')) const applyTweenParallax = () => { const tweenValues = calculateTweenValuesParallax(emblaApi) tweenValues.forEach((tweenValue, index) => { tweenNodes[index].style.transform = `translateX(${tweenValue}%` }) } const removeTweenParallax = () => { tweenNodes.forEach((slide) => slide.removeAttribute('style')) } return { applyTweenParallax, removeTweenParallax } } return setupTweenParallax(emblaApi) }; loadScript = async (path = '', id = Date.now(), skipReload=true, cb = ()=>{}) => { return new Promise((resolve, reject) => { const oldScript = document.getElementById(id); if (skipReload && oldScript) { //console.log('Already loaded:', path) resolve(null) return; } if (oldScript) { console.log('removing') oldScript.parentNode.removeChild(oldScript); } const script = document.createElement(`scr`+`ipt`); script.onload = (...vargs) => { //console.log('onload', ...vargs) cb(...vargs) resolve(...vargs) }; script.id = id; script.src = `${path}?cb=${Date.now()}` document.getElementsByTagName('head')[0].appendChild(script) }); }; /** * END: Library */ } return new Ctxt(meta, site) }