smart-webcomponents-react/source/smart.timeline.js

[](https://jqwidgets.com/license/)

/* Smart UI v23.0.8 (2025-05-13) 
Copyright (c) 2011-2024 jQWidgets. 
License: https://htmlelements.com/license/ */ //

Smart("smart-timeline",class extends Smart.BaseElement{static get properties(){return{position:{value:"both",allowedValues:["near","far","both"],defaultReflectToAttribute:!0,type:"string"},collapsible:{value:!0,defaultReflectToAttribute:!0,type:"boolean"},autoWidth:{value:!1,type:"boolean"},horizontal:{value:!1,defaultReflectToAttribute:!0,type:"boolean"},dataSource:{value:null,type:"any",reflectToAttribute:!1}}}static get listeners(){return{resize:"_resizeHandler"}}template(){return'<div id="container" role="presentation">\n                    <div class="smart-timeline-near-items" id="nearItems"></div>\n                    <div class="smart-timeline-track" id="track"></div>\n                    <div class="smart-timeline-far-items" id="farItems"></div>\n                </div>'}render(){this.setAttribute("role","navigation"),this.refresh(),super.render()}refresh(){this._render()}propertyChangedHandler(e,t,i){super.propertyChangedHandler(e,t,i);const s=this;switch(e){case"dataSource":s._render()}s._render()}_render(){const e=this;if(!e.dataSource)return e.$.nearItems.innerHTML="",void(e.$.farItems.innerHTML="");e.$.nearItems.innerHTML="",e.$.farItems.innerHTML="",e.$.track.innerHTML="",e.$.nearItems.style.height="",e.$.nearItems.style.width="",e.$.farItems.style.height="",e.$.farItems.style.width="";const t=[],i=[];for(let s=0;s<e.dataSource.length;s++){const n=e.dataSource[s],a=document.createElement("div");a.classList.add("smart-timeline-item"),n.css&&a.classList.add(n.css),e.collapsible&&a.setAttribute("collapsible",""),a.innerHTML=`<div class="smart-timeline-item-pointer"></div>\n                                    <div class="smart-timeline-item-content">\n                                        <div class="smart-flex smart-timeline-item-header">\n                                            <div class="smart-timeline-item-icon">\n                                                <span class="${n.icon}"></span>\n                                            </div>\n                                            <div>\n                                            <div class="smart-timeline-item-title">${n.title}</div>\n                                            <div class="smart-timeline-item-subtitle">${n.subtitle}</div>\n                                            </div>\n                                        </div>\n                                        <div class="smart-timeline-item-description">${n.description}</div>\n                                    </div>\n                                    `,a.onclick=()=>{e.collapsible&&(a.classList.toggle("expanded"),a.cloneNode&&a.cloneNode.classList.toggle("expanded"),e._repositionDots())},e.collapsible||a.classList.add("expanded"),t.push(a);const l=document.createElement("div");l.classList.add("smart-timeline-item-date"),l.innerHTML=n.date,i.push(l);const r=document.createElement("div");if(r.timelineItem=a,"near"===e.position)e.$.nearItems.appendChild(a),e.$.farItems.appendChild(l);else if("far"===e.position)e.$.farItems.appendChild(a),e.$.nearItems.appendChild(l);else{e.$.nearItems.appendChild(a);const t=a.cloneNode(!0);t.onclick=()=>{e.collapsible&&(t.classList.toggle("expanded"),a.classList.toggle("expanded"),e._repositionDots())},e.$.farItems.appendChild(t),a.cloneNode=t,s%2==0?(a.classList.add("smart-visibility-hidden"),e.$.nearItems.appendChild(l),r.timelineItem=t):(t.classList.add("smart-visibility-hidden"),e.$.farItems.appendChild(l))}r.classList.add("smart-timeline-dot"),n.dotCSS&&r.classList.add(n.dotCSS),e.$.track.appendChild(r),r.date=i[s]}e._timelineItems=t,e._layout()}_layout(){this._arrange(),this._repositionDots()}_arrange(){const e=this,t=e._timelineItems;if(!1===e.horizontal){const t=e=>{let t=0;for(let i=0;i<e.children.length;i++)t=Math.max(t,e.children[i].offsetWidth);return t+20};e.$.nearItems.style.width=t(e.$.nearItems)+"px",e.$.farItems.style.width=t(e.$.farItems)+"px"}else{const i=(()=>{let e=0;for(let i=0;i<t.length;i++)e+=t[i].offsetWidth;return e})();if(e.autoWidth)e.style.width=i+"px";else{e.style.minWidth=i+"px";let s=(e.offsetWidth-i)/t.length;s>0&&([...e.$.farItems.children].forEach((e=>{e.style.marginLeft=e.style.marginRight=s/2+"px"})),[...e.$.nearItems.children].forEach((e=>{e.style.marginLeft=e.style.marginRight=s/2+"px"})))}}}_repositionDots(){const e=this;for(let t=0;t<this.$.track.children.length;t++){const i=this.$.track.children[t],s=e.offset(i.timelineItem);e.horizontal?(i.style.left=s.left+i.timelineItem.offsetWidth/2-16-10+"px",i.date.style.marginLeft=i.date.style.marginRight="0px",i.date.style.left=s.left+i.timelineItem.offsetWidth/2-i.date.offsetWidth/2-26+"px"):(i.style.top=s.top+i.timelineItem.offsetHeight/2-30+"px",i.date.style.top=s.top+i.timelineItem.offsetHeight/2-30+"px")}}_offsetTop(e){return e?e.offsetTop+this._offsetTop(e.offsetParent):0}_offsetLeft(e){return e?e.offsetLeft+this._offsetLeft(e.offsetParent):0}offset(e){return{left:this._offsetLeft(e),top:this._offsetTop(e)}}_resizeHandler(){this._layout()}});