@devgateway/dvz-ui-react/dist/cjs/embeddable/vertical-featuredtabs/index.js

A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("react"),M=require("semantic-ui-react"),S=require("@devgateway/wp-react-lib"),D=require("react-redux"),z=require("../connected-templates/PostIntro.js"),F=({posts:i,activeItem:d,setActive:p,colors:h})=>{const[f,g]=u.useState(i.findIndex(o=>o.slug===d)),[s,v]=u.useState(null),l=(o,r,c)=>{document.querySelectorAll(o).forEach(n=>{n.querySelector(r)&&n.classList.add(c)})};u.useEffect(()=>{if(s){const o=s.getBoundingClientRect().top+window.scrollY;window.scrollTo({top:o,behavior:"smooth"})}l(".ui.fluid.container.viz.featured.tabs",".accordion","has-accordion"),l(".ui.fluid.container.viz.featured.tabs","blockquote","has-blockquote"),l(".ui.fluid.container.viz.featured.tabs",".accordion .accordion-post-ft-title","has-accordion-title"),l(".ui.fluid.container.viz.featured.tabs",".accordion .accordion-post-vft-content","has-accordion-content"),l(".ui.fluid.container.viz.featured.tabs",".vt-accordion-post-intro figure","has-vt-accordion-figure"),l(".ui.fluid.container.viz.featured.tabs",".content.active.accordion-post-content .wp-block-columns","has-wp-block-columns")},[s]),u.useEffect(()=>{let o;const r=[],c=t=>{setTimeout(()=>{var w;const n=t.querySelectorAll(".accordion .legends.container.has-standard-12-font-size.bottom, .legends.container.items-section");if(n.length!==0)for(const m of n){const R=m.closest(".ui.fluid.container.content"),x=R?R.querySelector(".data-source"):null;if(!x||m.offsetParent===null||x.offsetParent===null||m.offsetHeight===0||x.offsetHeight===0)continue;const $=x.getBoundingClientRect(),k=m.getBoundingClientRect(),L=window.getComputedStyle(x),y=window.getComputedStyle(m),q=parseFloat(L.marginTop)||0,I=parseFloat(y.marginBottom)||0,T=k.bottom+I,P=$.top-q;if(T>P){const a=T-P;x.style.marginTop=`${a+20}px`}const j=(w=m.closest(".wp-block-column.is-layout-flow.wp-block-column-is-layout-flow"))==null?void 0:w.nextElementSibling;if(j){const a=j.getBoundingClientRect(),b=window.getComputedStyle(j),E=Number.parseFloat(b.marginTop)||0,N=a.top-E;if(T>N){const _=T-N;j.style.marginTop=`${_+20}px`}}const A=m.closest(".chart.container");if(A){const a=A.getBoundingClientRect(),b=window.getComputedStyle(A),E=Number.parseFloat(b.marginBottom)||0,N=a.bottom+E,_=Number.parseFloat(y.marginTop)||0,B=k.top-_;if(B<N){const O=N-B;m.style.marginTop=`${O+20}px`}}}},10)};return f!==-1&&(o=setTimeout(()=>{document.querySelectorAll(".accordion").forEach(n=>c(n))},0)),()=>{clearTimeout(o),r.forEach(t=>t.disconnect())}},[f]);const C=(o,r)=>{const{index:c}=r,t=f===c?-1:c;g(t),p(i[c].slug),t!==-1&&v(o.currentTarget)};return e.jsx(M.Accordion,{fluid:!0,styled:!0,children:i.map((o,r)=>{var t;const c=(t=o.meta_fields)!=null&&t.icon?o.meta_fields.icon[0]:null;return e.jsxs(u.Fragment,{children:[e.jsx(M.Accordion.Title,{active:f===r,index:r,onClick:n=>C(n,{index:r}),style:{backgroundColor:h[`color_${r}`]},children:e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[c&&e.jsx(S.MediaProvider,{id:c,children:e.jsx(S.MediaConsumer,{children:e.jsx(S.PostIcon,{className:"icon"})})}),e.jsx(z.default,{post:o,className:"vt-accordion-post-intro"})]}),e.jsx(M.Icon,{name:"chevron down"})]})}),e.jsx(M.Accordion.Content,{className:"accordion-post-content accordion-post-vft-content",active:f===r,children:e.jsx(S.PostContent,{post:o})})]},o.id)})})},H=({post:i,count:d,backgroundColor:p,active:h,dimensions:f,height:g,coverWidth:s,index:v,editing:l,clickToExpandLabel:C})=>{const o=i._embedded?i._embedded["wp:featuredmedia"]:null,[r,c]=u.useState(!1),t=l?d-v:1;return e.jsxs("div",{className:"content-area",children:[e.jsxs("div",{className:"cover",style:{width:`${s}px`,backgroundColor:p,backgroundImage:`url(${o?o[0].source_url:""})`},onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),children:[e.jsx("div",{className:"rotator",style:{width:`${g}px`,transform:`translate(${s/2}px, 0px) rotate(90deg)`},children:e.jsx(z.default,{post:i})}),e.jsxs("div",{className:"overlay-label-container",children:[e.jsx("div",{className:`overlay-label ${r&&!h?"visible":""}`,children:C||"CLICK TO EXPAND"}),e.jsx("div",{className:"arrow-svg"})]})]}),e.jsx("div",{className:`collapsable-content ${h?"expanded":"collapsed"}`,style:{backgroundColor:"#f9f9f9",width:`${f.width-s*d}px`,marginLeft:`${s*t}px`},children:e.jsx(S.PostContent,{post:i})})]})},W=({editing:i,posts:d,height:p,colors:h,coverWidth:f,clickToExpandLabel:g})=>{const[s,v]=u.useState(null),l=u.useRef(null),[C,o]=u.useState({width:0,height:0}),r=u.useRef(null),c=t=>{s!==t&&v(t)};return u.useEffect(()=>{d.length>0&&s===null&&i&&v(d[0].slug)},[d,s,i]),u.useLayoutEffect(()=>{var t,n,w,m;(t=l.current)!=null&&t.parentElement&&o({width:i?((w=(n=l.current.parentElement)==null?void 0:n.parentElement)==null?void 0:w.offsetWidth)??0:((m=l.current.parentElement)==null?void 0:m.offsetWidth)??0,height:l.current.offsetHeight}),r.current&&(r.current.style.overflow=i?"visible":"hidden")},[i]),e.jsx(M.Container,{fluid:!0,className:"vertical featured tabs",ref:r,children:d==null?void 0:d.map((t,n)=>{const w=s?t.slug===s:n===0;return e.jsxs("div",{ref:l,onClick:()=>c(t.slug),className:w?"item expanded":"item collapsed",style:{minHeight:`${p}px`,minWidth:`${f}px`},children:[e.jsx("a",{id:t.slug}),e.jsx(H,{editing:i,coverWidth:f,height:p,backgroundColor:h[`color_${n}`],count:d.length,dimensions:C,active:w,post:t,index:n,clickToExpandLabel:g})]},t.slug)})})},V=i=>{var j,A;let{"data-height":d,"data-type":p,"data-taxonomy":h,"data-categories":f,"data-count":g,"data-colors":s,"data-cover-width":v=50,"data-read-more-label":l="READ More","data-click-to-expand-label":C="CLICK TO EXPAND","data-preview-mode":o="Desktop",editing:r,parent:c,unique:t,pageModuleProps:n}=i;n!=null&&n.previewMode&&(n!=null&&n.editing)&&(o=n.previewMode,r=n.editing);const w=i.intl.locale,m=f||"[]",[R,x]=u.useState((((j=window==null?void 0:window.visualViewport)==null?void 0:j.width)||window.innerWidth)<=1365);console.log("isMobileOrTablet:",R);const $=()=>{var a,b,E;return((a=window.screen.orientation)==null?void 0:a.type)||((((b=window==null?void 0:window.visualViewport)==null?void 0:b.width)||window.innerWidth)>(((E=window==null?void 0:window.visualViewport)==null?void 0:E.height)||window.innerHeight)?"landscape-primary":"portrait-primary")},[k,L]=u.useState($()),y=()=>{setTimeout(()=>{var a;L($()),x((((a=window==null?void 0:window.visualViewport)==null?void 0:a.width)||window.innerWidth)<=1365)},100)};u.useEffect(()=>(window.screen.orientation&&window.screen.orientation.addEventListener("change",y),window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y),window.screen.orientation&&window.screen.orientation.removeEventListener("change",y)}),[]);const q=a=>r?a:decodeURIComponent(a),I=a=>{if(!a)return null;try{return JSON.parse(q(a))}catch(b){console.error(`error parsing value:${a}
 error:${b}`)}return null},T=o!=="Desktop"&&r,P=R&&!r;return e.jsx(M.Container,{style:{maxWidth:"100%"},className:`viz featured tabs ${r?"editing":""}`,fluid:!0,children:e.jsx(S.PostProvider,{type:p,locale:w,taxonomy:h,categories:I(m),store:`vertical_tabs${c}_${t}`,page:1,perPage:g,children:e.jsx(S.PostConsumer,{children:P||T?e.jsx(F,{posts:g,activeItem:(A=g==null?void 0:g[0])==null?void 0:A.slug,colors:I(s),setActive:()=>{}}):e.jsx(W,{editing:r,coverWidth:v,moreLabel:l,clickToExpandLabel:C,colors:I(s),height:d,posts:g})})})},k+Math.random())},U=(i,d)=>{const p=i.getIn(["data","pageModuleProps"]),h={};return p&&(h.pageModuleProps=p),h},K={},X=D.connect(U,K)(V);exports.default=X;