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