-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstory-map.js
1 lines (1 loc) · 6.19 KB
/
story-map.js
1
Drupal.behaviors.tuftsStoryMap={attach(e){e=once("tufts-story-map",e.querySelectorAll(".o-story-map"));0!==e.length&&e.forEach(u=>{{var d=u;const m="is-active",p=["load","resize"],y=window.matchMedia("(min-width: 1024px)");let e,t,n,o,l,r,c,i,s,a,g;const _=e=>{"world"===e&&(r.classList.add(m),c.classList.add(m),r.setAttribute("aria-expanded","true"),l.classList.remove(m),o.classList.remove(m),t.classList.remove(m),t.setAttribute("aria-expanded","false")),"list"===e&&(t.classList.add(m),t.setAttribute("aria-expanded","true"),o.classList.add(m),r.classList.remove(m),r.setAttribute("aria-expanded","false"),l.classList.remove(m),c.classList.remove(m)),"regions"===e&&(l.classList.add(m),r.classList.remove(m),r.setAttribute("aria-expanded","false"),c.classList.remove(m),o.classList.remove(m),t.classList.remove(m),t.setAttribute("aria-expanded","false"))},f=function(t){var e;1<arguments.length&&void 0!==arguments[1]&&arguments[1]?(e=t.getAttribute("data-prev-region"),d.querySelector("#content-"+e).classList.add(m)):t.getAttribute("aria-controls").split(", ").forEach(e=>{d.querySelector("#"+e).classList.add(m),t.classList.add(m),t.classList.contains("o-story-map__region-trigger--listing")||t.setAttribute("aria-expanded","true")})},b=()=>{i.forEach(e=>{e.classList.remove(m),e.classList.contains("o-story-map__region-trigger--listing")||e.setAttribute("aria-expanded","false"),e.classList.contains("o-story-map__region-trigger--mobile")||("mobile"===g&&(e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true")),"desktop"===g&&(e.removeAttribute("tabindex"),e.removeAttribute("aria-hidden")))}),a.forEach(e=>{e.classList.remove(m)})},v=()=>{s.forEach(e=>{e.classList.remove(m)})},w=e=>{e=e.getAttribute("data-next-focus");const t=d.querySelector("#"+e);setTimeout(()=>{t.focus()},500),t.scrollIntoView({behavior:"smooth",block:"center"})},h=e=>{e=Drupal.t(e);Drupal.announce(e)},L=(e,t)=>{let i=0,s=0;var r;if("world"===e&&(r=c.querySelector(".o-story-map__world-map-wrapper"),"mobile"===g&&(a=c.querySelector(".o-story-map__mobile-navigation"),i=40,s=Number(r.offsetHeight)+Number(a.offsetHeight),n.style.blockSize=s+i+"px"),"desktop"===g)&&(i=8,s=Number(r.offsetHeight),n.style.blockSize=s-i+"px"),"list"===e&&(s=Number(o.offsetHeight),n.style.blockSize=s+"px"),t&&"regions"===e){var a=t.getAttribute("aria-controls").split(", ");if("mobile"===g&&(i=240,a.forEach(e=>{var t,e=d.querySelector("#"+e);e.classList.contains("o-story-map__region")&&(t=e.querySelector(".o-story-map__region-map-wrapper"),s+=Number(t.offsetHeight)),e.classList.contains("o-story-map__region-content")&&(s+=Number(e.offsetHeight)),e.querySelector(".o-story-map__mobile-navigation")&&(t=e.querySelector(".o-story-map__mobile-navigation"),s+=Number(t.offsetHeight)),n.style.blockSize=s+i+"px"})),"desktop"===g){i=160;let r=0,o=0;a.forEach(e=>{var t,e=d.querySelector("#"+e);e.classList.contains("o-story-map__region")&&(t=e.querySelector(".o-story-map__region-map-wrapper"),r=Number(t.offsetHeight)),e.classList.contains("o-story-map__region-content")&&(o=Number(e.offsetHeight)),r>o&&(s=r),r<o&&(s=o),n.style.blockSize=s+i+"px"})}}t||"regions"!==e||("mobile"===g&&(i=240,r=l.querySelector(`.o-story-map__region.${m} .o-story-map__region-map-wrapper`),a=l.querySelector(`.o-story-map__region.${m} .o-story-map__region-content.`+m),t=l.querySelector(`.o-story-map__region.${m} .o-story-map__mobile-navigation`),s+=Number(r.offsetHeight)+Number(a.offsetHeight)+Number(t.offsetHeight),n.style.blockSize=s+i+"px"),"desktop"===g&&(i=150,e=l.querySelector(`.o-story-map__region.${m} .o-story-map__region-map-wrapper`),r=l.querySelector(`.o-story-map__region.${m} .o-story-map__region-content.`+m),Number(e.offsetHeight)>Number(r.offsetHeight)&&(s=Number(e.offsetHeight)),Number(e.offsetHeight)<Number(r.offsetHeight)&&(s=Number(r.offsetHeight)),n.style.blockSize=s+i+"px"))},S=e=>{b(),v(),_("list"),L("list",null),h("Now viewing list of regions")},k=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),b(),v(),_("list"),L("list",null),h("Now viewing list of regions"))},N=e=>{b(),v(),_("world"),L("world",null),h("Now viewing the world map")},q=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),b(),v(),_("world"),L("world",null),h("Now viewing the world map"))},A=e=>{_("regions"),b(),f(e.currentTarget),L("regions",e.currentTarget),w(e.currentTarget),h(`Now viewing the ${e.currentTarget.textContent} region`)},E=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),_("regions"),b(),f(e.currentTarget),L("regions",e.currentTarget),w(e.currentTarget),h(`Now viewing the ${e.currentTarget.textContent} region`))},x=e=>{e.currentTarget.getAttribute("data-prev-region")?(b(),f(e.currentTarget,!0),L("regions",e.currentTarget),w(e.currentTarget),h(`Now viewing the ${e.currentTarget.getAttribute("data-announce")} region`)):(b(),v(),_("world"),L("world",null),w(e.currentTarget),h("Now viewing the world map"))},T=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.currentTarget.getAttribute("data-prev-region")?(b(),f(e.currentTarget,!0),L("regions",e.currentTarget),w(e.currentTarget),h(`Now viewing the ${e.currentTarget.getAttribute("data-announce")} region`)):(b(),v(),_("world"),L("world",null),w(e.currentTarget),h("Now viewing the world map")))},H=()=>{g=y.matches?"desktop":"mobile",b(),v(),_("world"),L("world",null),h("Now viewing the world map")},$=()=>{c.classList.contains(m)&&L("world",null),l.classList.contains(m)&&L("regions",null),o.classList.contains(m)&&L("list",null)};u=d,e=u.querySelectorAll(".o-story-map__back-trigger"),t=u.querySelector(".o-story-map__list-view-trigger"),n=u.querySelector(".o-story-map__frame"),o=u.querySelector(".o-story-map__list"),l=u.querySelector(".o-story-map__regions"),r=u.querySelector(".o-story-map__map-view-trigger"),c=u.querySelector(".o-story-map__world"),i=u.querySelectorAll(".o-story-map__region-trigger"),s=u.querySelectorAll(".o-story-map__region"),a=u.querySelectorAll(".o-story-map__region-content"),t.addEventListener("click",S),t.addEventListener("keydown",k),r.addEventListener("click",N),r.addEventListener("keydown",q),i.forEach(e=>{e.addEventListener("click",A),e.addEventListener("keydown",E)}),e.forEach(e=>{e.addEventListener("click",x),e.addEventListener("keydown",T)}),y.addEventListener("change",H),H(),p.forEach(e=>{window.addEventListener(e,$)})}})}};