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