@cloudfour/patterns/dist/cloudfour-patterns.mjs

Front-end patterns for cloudfour.com

const initCommentReplyForm=comment=>{const replyButton=comment.querySelector(".js-comment-reply-button");const replyForm=comment.querySelector(".js-comment-reply-form");const cancelButton=comment.querySelector(".js-cancel-reply");if(!replyButton||!replyForm||!cancelButton)return{destroy:()=>{}};const show=()=>{comment.classList.add("is-replying");replyButton.setAttribute("hidden","");const firstInput=replyForm.querySelector("textarea, input");firstInput?.focus();setTimeout((()=>firstInput?.focus()),0)};const hide=()=>{comment.classList.remove("is-replying");replyButton.removeAttribute("hidden");setTimeout((()=>replyButton.focus()),0)};replyButton.addEventListener("click",show);cancelButton.addEventListener("click",hide);return{destroy:()=>{replyButton.removeEventListener("click",show);cancelButton.removeEventListener("click",hide)}}};var social={items:[{link:"https://www.linkedin.com/company/cloud-four",title:"Follow us on LinkedIn",icon:"brands/linkedin"},{link:"https://www.youtube.com/channel/UC39ZT0CMds5z0K0Z7RWa98A",title:"Follow us on YouTube",icon:"brands/youtube"},{link:"https://www.instagram.com/cloudfourpdx/",title:"Follow us on Instagram",icon:"brands/instagram"},{link:"https://github.com/cloudfour",title:"Find us on GitHub",icon:"brands/github"},{link:"/feed/atom/",title:"Subscribe to our RSS Feed",icon:"feed"}]};var topics={items:[{link:"/topics/rwd",title:"Responsive Web Design"},{link:"/topics/ecommerce",title:"Ecommerce"},{link:"/topics/performance",title:"Performance"},{link:"/topics/images",title:"Images"},{link:"/topics/accessibility",title:"Accessibility"},{link:"/topics/spotlight",title:"Cloud Four Spotlight"},{link:"/topics/css",title:"CSS"},{link:"/topics/essentials",title:"Essentials"}]};const menu={items:[{link:"/does",title:"What We Do",current:!0},{link:"/believes",title:"Our Approach"},{link:"/made",title:"Our Work"},{link:"/thinks",title:"Articles"},{link:"/presents",title:"Speaking"},{link:"/is",title:"Team"},{link:"/and-you",title:"Hire Us"},{link:"https://cloudfour-patterns.netlify.app/",title:"Patterns"}]};const defaultArgs={alternate:!1,feature_count:2,feature_one_title:"Nice to meet you",feature_one_content:"Cloud Four helps organizations solve complex responsive web design and development challenges every day. Let’s connect so we can tailor a solution to fit your needs.",feature_two_title:"Cloud Four, in your inbox",feature_two_content:"Our latest articles, updates, quick tips and insights in one convenient, occassional newsletter.",organizationName:"Cloud Four, Inc.",organizationStreetAddress:"510 SW 3rd Ave, Suite 420",organizationAddressLocality:"Portland",organizationAddressRegion:"Oregon",organizationPostalCode:"97204",organizationAddressCountry:"USA",organizationEmail:"info@cloudfour.com",organizationTelephone:"+1 (503) 290-1090",organizationUrl:"https://cloudfour.com/",organizationFoundingDate:"2007-12-13"};const defaultArgTypes={alternate:{control:{type:"boolean"}},feature_count:{control:{type:"number",min:0,max:2}},feature_one_title:{type:{name:"string"}},feature_one_content:{type:{name:"string"}},feature_two_title:{type:{name:"string"}},feature_two_content:{type:{name:"string"}},organizationName:{type:{name:"string"}},organizationStreetAddress:{type:{name:"string"}},organizationAddressLocality:{type:{name:"string"}},organizationAddressRegion:{type:{name:"string"}},organizationPostalCode:{type:{name:"string"}},organizationAddressCountry:{type:{name:"string"}},organizationEmail:{type:{name:"string"}},organizationTelephone:{type:{name:"string"}},organizationUrl:{type:{name:"string"}},organizationFoundingDate:{type:{name:"string"}}};const generateGroundNavProps=args=>({menu:menu,social:social,topics:topics,alternate:args.alternate,feature_count:args.feature_count,feature_one_title:args.feature_one_title,feature_one_content:args.feature_one_content,feature_two_title:args.feature_two_title,feature_two_content:args.feature_two_content,organization:{name:args.organizationName,address:{street_address:args.organizationStreetAddress,address_locality:args.organizationAddressLocality,address_region:args.organizationAddressRegion,postal_code:args.organizationPostalCode,address_country:args.organizationAddressCountry},email:args.organizationEmail,telephone:args.organizationTelephone,url:args.organizationUrl,founding_date:args.organizationFoundingDate}});const createElasticTextArea=textarea=>{textarea.classList.add("is-elastic");const minRows=Number(textarea.getAttribute("rows"))||2;let rows=Number(textarea.getAttribute("rows"))||minRows;textarea.setAttribute("rows",String(rows));const isScrolling=()=>textarea.scrollHeight>textarea.clientHeight;const grow=()=>{let previousHeight=textarea.clientHeight;for(;isScrolling();){rows++;textarea.setAttribute("rows",String(rows));const newHeight=textarea.clientHeight;if(newHeight===previousHeight)break;previousHeight=newHeight}};const update=()=>{isScrolling()?grow():(()=>{for(;!isScrolling()&&rows>minRows;){rows--;textarea.setAttribute("rows",String(Math.max(rows,minRows)));if(isScrolling()){grow();break}}})()};textarea.addEventListener("input",update);const observer=new ResizeObserver(update);observer.observe(textarea);update();return{destroy:()=>{textarea.classList.remove("is-elastic");textarea.removeEventListener("input",update);observer.disconnect()}}};const initSkyNav=navButton=>{const menu=navButton.nextElementSibling;const navWrapper=navButton.closest(".js-sky-nav");const largeScreenMediaQuery=window.matchMedia("(min-width: 40em)");const reducedMotionMediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)");navWrapper.classList.remove("is-loading");const update=()=>{if(largeScreenMediaQuery.matches){navButton.removeAttribute("aria-expanded");menu.hidden=!1}else{navButton.setAttribute("aria-expanded","false");menu.hidden=!0}};let timeoutId=-1;const toggle=()=>{const isExpanded="true"===navButton.getAttribute("aria-expanded");navButton.setAttribute("aria-expanded",String(!isExpanded));if(reducedMotionMediaQuery.matches){menu.hidden=isExpanded;return}const duration=Number.parseFloat("0.4s");const transition=`transform ${duration}s cubic-bezier(0.455, 0.03, 0.515, 0.955)`;clearTimeout(timeoutId);menu.hidden=!1;const heightDiff=menu.getBoundingClientRect().height;if(isExpanded){document.body.style.setProperty("transition",transition);document.body.style.setProperty("transform",`translateY(${-heightDiff}px)`);timeoutId=setTimeout((()=>{menu.hidden=!0;document.body.style.removeProperty("transition");document.body.style.removeProperty("transform")}),1e3*duration)}else{document.body.style.setProperty("transform",`translateY(${-heightDiff}px)`);navWrapper.offsetWidth;document.body.style.setProperty("transition",transition);document.body.style.removeProperty("transform");timeoutId=setTimeout((()=>{document.body.style.removeProperty("transition")}),1e3*duration)}};navButton.addEventListener("click",toggle);largeScreenMediaQuery.addEventListener("change",update);update();return{destroy:()=>{navButton.removeEventListener("click",toggle);largeScreenMediaQuery.removeEventListener("change",update)}}};const createSubscribe=containerEl=>{let blurTimeoutId;let isFormOpen=!1;const getWeeklyDigestsBtn=containerEl.querySelector(".js-subscribe__get-weekly-digests-btn");const formEl=containerEl.querySelector("form");const formFocusableEls=containerEl.querySelectorAll("label, input, button");const controlEls=containerEl.querySelectorAll(".js-subscribe__control");const controlsUiWrapper=containerEl.querySelector(".js-subscribe__controls-ui");if(!getWeeklyDigestsBtn||!formEl||!controlsUiWrapper)return;const onControlFocus=()=>{clearTimeout(blurTimeoutId);containerEl.classList.remove("activate-form");isFormOpen=!1};const onFormFocus=()=>{clearTimeout(blurTimeoutId);containerEl.classList.add("activate-form");isFormOpen=!0};const onFormBlur=()=>{clearTimeout(blurTimeoutId);blurTimeoutId=window.setTimeout((()=>{containerEl.classList.remove("activate-form");isFormOpen=!1}),1e3)};const onGetWeeklyDigestsClick=event=>{event.preventDefault();containerEl.classList.add("activate-form");isFormOpen=!0;formEl.querySelector("input")?.focus()};const onKeydown=event=>{"Escape"===event.key&&isFormOpen&&getWeeklyDigestsBtn.focus()};const cleanupCallbacks=[];const destroy=()=>{clearTimeout(blurTimeoutId);for(const cleanup of cleanupCallbacks)cleanup();controlsUiWrapper.hidden=!0;containerEl.classList.add("activate-form")};return{init:()=>{destroy();controlsUiWrapper.hidden=!1;(()=>{getWeeklyDigestsBtn.addEventListener("click",onGetWeeklyDigestsClick);cleanupCallbacks.push((()=>getWeeklyDigestsBtn.removeEventListener("click",onGetWeeklyDigestsClick)));for(const formFocusableEl of formFocusableEls){formFocusableEl.addEventListener("blur",onFormBlur);formFocusableEl.addEventListener("focus",onFormFocus);cleanupCallbacks.push((()=>{formFocusableEl.removeEventListener("blur",onFormBlur);formFocusableEl.removeEventListener("focus",onFormFocus)}))}for(const controlEl of controlEls){controlEl.addEventListener("focus",onControlFocus);cleanupCallbacks.push((()=>controlEl.removeEventListener("focus",onControlFocus)))}document.addEventListener("keydown",onKeydown);cleanupCallbacks.push((()=>document.removeEventListener("keydown",onKeydown)))})();containerEl.classList.remove("activate-form")},destroy:destroy}};export{createElasticTextArea,createSubscribe,defaultArgTypes,defaultArgs,generateGroundNavProps,initCommentReplyForm,initSkyNav};