@devgateway/dvz-ui-react/dist/cjs/embeddable/time-line/mobile.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 a=require("react/jsx-runtime"),st=require("@devgateway/wp-react-lib"),mt=require("../connected-templates/PostIntro.js"),f=require("react"),z=require("semantic-ui-react"),bt=require("d3"),yt=require("../../lib/hooks/window-dimensions.js"),xt=require("../../lib/hooks/screen-orientation.js");function Ct(r){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const d in r)if(d!=="default"){const g=Object.getOwnPropertyDescriptor(r,d);Object.defineProperty(n,d,g.get?g:{enumerable:!0,get:()=>r[d]})}}return n.default=r,Object.freeze(n)}const h=Ct(bt),wt={visibility:"visible",position:"relative",height:"auto",width:"auto"},vt=0,Tt=r=>{let{posts:n,lineWidth:d,lineColor:g,config:p,marginLeft:L,marginTop:E,marginRight:G,marginBottom:N,fontSize:w,subtitleWidth:q,subtitleHeight:v,enableTitlePopup:O,enableCirclePopup:j,enableDefaultPopup:J,closePopupOnMouseOut:V,unique:m}=r;q=250;const T=f.useRef(),S=f.useRef(),[D,y]=f.useState(!1),[M,k]=f.useState(0),[W,B]=f.useState(null),{orientation:x}=xt.useScreenOrientation(),{width:X,deviceType:b,height:H}=yt.useWindowDimensionsAndDevice({getDeviceType:!0,getHeight:!0}),F=f.useCallback(t=>`circle${m}${t}`,[m]),at=f.useCallback(t=>`title${m}${t}`,[m]),rt=t=>{var i;return((i=p[t])==null?void 0:i.size)||10},ct=({content:t,isOpen:i,style:l})=>{const C=s=>(s=s.replace(/<ul(.*?)>/g,'<ul class="has-white-color has-text-color has-standard-14-font-size" style="list-style-type:disc !important; list-style: initial !important; padding-left:20px; color:#fefefe;">'),s=s.replace(/<a(.*?)>/g,'<a$1 style="color:#fefefe;">'),s);return a.jsxs(z.Modal,{open:i,onClose:()=>y(!1),size:"fullscreen",closeIcon:!0,centered:!0,style:{maxHeight:"80vh",overflowY:"auto",padding:"0.5rem",...l},children:[a.jsx(z.Modal.Header,{style:{...l,borderBottom:"none"}}),a.jsx(z.Modal.Content,{className:"styled-list-content",style:{...l},dangerouslySetInnerHTML:{__html:C(t.props.children.props.post.content.rendered)}})]},`${t.props.children.key}modal`)},Y=t=>{var i;return(i=p[t])==null?void 0:i.circleColor},K=t=>p[t].titleColor,Q=t=>p[t].lineColor,Z=t=>p[t].tooltipFontColor||"#fff",dt=t=>p[t].readMoreLabel,tt=f.useCallback((t,i)=>{t.preventDefault();const l=260,C=50;let s=[0,0];if(t){const P=t.target.getBoundingClientRect(),I=t.target.closest(".time").getBoundingClientRect(),c=P.left-I.left,$=P.top+I.top;s=[c+l,$+C];const R=400;P.left+c+R+l>window.innerWidth&&(s[0]=c-R*.6)}y(!0),B({data:i,id:i.id,position:s}),ft(i.id)},[]),pt=()=>{y(!1)},ut=t=>{h.selectAll(`#${F(t)}`).style("stroke","none").style("fill",Y(t)),h.selectAll(`#label${t}`).style("font-weight","normal")},ft=t=>{ut(vt),h.selectAll(`#${F(t)}`).style("stroke",Y(t)).style("fill","#fff"),h.selectAll(`#label${t}`).style("font-weight","bold")};return f.useLayoutEffect(()=>{var lt;const t={top:E,bottom:N},i=T.current.clientWidth,l=S.current.clientWidth;l>0&&k(l);const C=H,s={mobile:"75",tablet:"150",midTablet:"150",laptop:"150"},P={mobile:"250",tablet:"350",midTablet:"350",laptop:"400"},I={mobile:20,tablet:30,midTablet:30,laptop:40},c=h.scaleLinear().domain([0,n.length-1]).range([t.top,C-t.bottom]),$=h.select(T.current);$.selectAll("*").remove(),$.attr("width",i).attr("height",C);const R=h.line(),ht=[[0,c(0)],[0,c(n.length-1)]],gt=R(ht);let et=`translate(${s[b]},0)`;((lt=process.env.REACT_APP_THEME)==null?void 0:lt.startsWith("cd"))&&(et=`translate(${s[b]},20)`);const _=$.append("g").attr("transform",et);g="#E4E5EA",d=6,_.append("path").attr("d",gt).attr("stroke-width",d).attr("stroke",g).attr("class","timeline-path"),_.selectAll(".circle").data(n).enter().append("circle").attr("id",(o,e)=>F(e)).attr("cx",0).attr("class","timeline-circle").attr("cy",(o,e)=>c(e)).attr("r",(o,e)=>rt(e)).style("fill",(o,e)=>{var u;return((u=p[e])==null?void 0:u.circleColor)||"#000"}).style("cursor",j?"pointer":"default").on("click",(o,e)=>{o.preventDefault(),j&&tt(o,e)}),_.selectAll(".title").data(n).enter().append("foreignObject").attr("x",I[b]).attr("y",(o,e)=>c(e)-Number.parseInt(v)/2).attr("width",Number.parseInt(P[b])).attr("height",Number.parseInt(v)).attr("class","timeline-title").append("xhtml:div").attr("id",(o,e)=>at(e)).style("font-size",`${Number.parseInt(w)+1}px`).style("color",(o,e)=>K(e)).style("font-weight","bold").style("line-height","1.2rem").style("text-align","left").style("cursor",O?"pointer":"default").style("overflow","hidden").style("display","-webkit-box").style("-webkit-line-clamp","2").style("-webkit-box-orient","vertical").style("text-overflow","ellipsis").style("overflow-wrap","break-word").html((o,e)=>{const u=dt(e);let A=o.title.rendered;return u&&(A+=`<br><span style="font-size:${Number.parseInt(w)-3}px;color:${K(e)};text-decoration:underline;text-underline-offset:3px">${u}</span>`),A}).each(function(o,e){const u=h.select(this.parentNode);setTimeout(()=>{const A=this.getBoundingClientRect(),nt=Math.min(A.height,Number.parseInt(v)*2);u.attr("height",nt),u.attr("y",c(e)-nt/2)},0)}).on("click",(o,e,u)=>{o.preventDefault(),O&&tt(o,e)});const ot=+w+1,it=60,U=ot*.9;_.selectAll(".year-fo").data(n).enter().append("foreignObject").attr("class","year-fo").attr("x",-70).attr("y",(o,e)=>c(e)-U/2).attr("width",it).attr("height",U).append("xhtml:div").style("display","flex").style("align-items","center").style("justify-content","flex-end").style("width",`${it}px`).style("height",`${U}px`).style("font-size",`${ot}px`).style("line-height","1em").style("font-weight","400").style("color","#4C4D50").html(o=>o.meta_fields.subtitle)},[b,x]),a.jsxs("div",{className:"time line",style:{position:"relative"},ref:S,children:[n.filter(t=>W&&W.id===t.id).map(t=>{const i=t.slug||"unknown-slug",l=n.indexOf(t);return a.jsx(ct,{isOpen:D,content:a.jsx("div",{style:{backgroundColor:Q(l),color:Z(l)},children:a.jsx(mt.default,{post:t,style:wt},i)}),closeTooltip:pt,style:{backgroundColor:Q(l),color:Z(l)}},`${i}_modal`)}),a.jsx("svg",{height:H,width:M,ref:T})]},m+b+x)},Pt=r=>{const{"data-type":n,"data-taxonomy":d,"data-categories":g,"data-items":p,"data-height":L,"data-line-color":E="#000","data-config":G="{}","data-position":N="middle","data-line-width":w="1","data-margin-left":q=50,"data-margin-top":v=25,"data-margin-right":O=50,"data-margin-bottom":j=25,"data-font-size":J=14,"data-title-width":V=100,"data-title-height":m=50,"data-subtitle-width":T=250,"data-subtitle-height":S=60,"data-enable-title-popup":D="false","data-enable-circle-popup":y="true","data-enable-default-popup":M="false","data-close-popup-on-mouse-out":k="false",editing:W,parent:B,unique:x}=r,X=r.intl.locale,H={unique:x||Math.random().toString(36).substring(2,9),marginLeft:q,marginTop:v,marginRight:O,marginBottom:j,lineWidth:w,height:L,position:N,lineColor:decodeURIComponent(E),config:JSON.parse(decodeURIComponent(G)),fontSize:J,titleWidth:V,titleHeight:m,subtitleWidth:T,subtitleHeight:S,enableTitlePopup:D==!0||D=="true",enableCirclePopup:y==!0||y=="true",enableDefaultPopup:M==!0||M=="true",closePopupOnMouseOut:k==!0||k=="true"};return a.jsx(z.Container,{style:{height:`${L}px`},className:`viz time line ${W?"editing":""}`,fluid:!0,children:a.jsx(st.PostProvider,{locale:X,type:n,taxonomy:d,categories:g,store:`carousel_${B}_${x}`,page:1,perPage:p,children:a.jsx(st.PostConsumer,{children:a.jsx(Tt,{...H})})})})};exports.default=Pt;