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