motimeline 2.3.0 → 2.4.0

package/README.md

@@ -111,9 +111,28 @@ import 'motimeline/dist/moTimeline.css';
 ```js
 const tl = new MoTimeline(elementOrSelector, options);
 
-tl.refresh();        // re-layout all items (called automatically on resize)
-tl.initNewItems();   // pick up newly appended <li> elements
-tl.destroy();        // remove listeners and reset DOM classes
+tl.refresh();          // re-layout all items (called automatically on resize)
+tl.initNewItems();     // pick up manually appended <li> elements
+tl.addItems(items);    // create and append <li> from an array of item objects (or JSON string)
+tl.destroy();          // remove listeners and reset DOM classes
+```
+
+### addItems — item schema
+
+```js
+tl.addItems([
+  {
+    title:  "Project kickoff",         // <h3> heading
+    meta:   "January 2024",            // date / subtitle line
+    text:   "Kicked off the roadmap.", // body paragraph
+    banner: "images/banner.jpg",       // img.mo-banner (optional)
+    avatar: "images/avatar.jpg",       // img.mo-avatar (optional)
+    icon:   "images/icon.svg"          // data-mo-icon on <li>, used by showCounterStyle:'image'
+  },
+]);
+
+// A JSON string is also accepted:
+tl.addItems('[{"title":"From JSON","meta":"Today","text":"Parsed automatically."}]');
 ```
 
 ---
@@ -157,6 +176,10 @@ No framework option needed. Wrap the `<ul>` inside a Bootstrap `.container`:
 
 ## Changelog
 
+### v2.4.0
+- Added `addItems(items)` — creates and appends `<li>` elements from an array of item objects or a JSON string, then initializes them in one batch
+- Badges and arrows now hidden in single-column mode (center-line elements have no meaning without a center line)
+
 ### v2.3.0
 - Added `showCounter` (opacity toggle) and `showCounterStyle` (`'counter'` | `'image'`) badge options
 - `data-mo-icon` attribute on `<li>` sets a custom icon in image mode; built-in flat SVG used as fallback

package/dist/moTimeline.cjs

@@ -1,6 +1,6 @@
-"use strict";var b=Object.defineProperty;var E=(i,e,t)=>e in i?b(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var p=(i,e,t)=>E(i,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});/*!
- * moTimeline v2.3.0
+"use strict";var _=Object.defineProperty;var b=(o,e,t)=>e in o?_(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var p=(o,e,t)=>b(o,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});/*!
+ * moTimeline v2.4.0
  * Responsive two-column timeline layout library
  * https://github.com/MattOpen/moTimeline
  * MIT License
- */const a=new WeakMap,w={columnCount:{xs:1,sm:2,md:2,lg:2},badgeShow:!1,arrowShow:!1,theme:!1,showCounter:!0,showCounterStyle:"counter"},I="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%234f46e5'/><circle cx='12' cy='12' r='4.5' fill='white'/></svg>";function v(){const i=window.innerWidth;return i<600?"xs":i<992?"sm":i<1200?"md":"lg"}function y(i,e=100){let t;return(...s)=>{clearTimeout(t),t=setTimeout(()=>i(...s),e)}}function m(i){return i?{o:i.offsetTop,h:i.offsetHeight,gppu:i.offsetTop+i.offsetHeight}:{o:0,h:0,gppu:0}}function _(i,e){const t=[];let s=i.previousElementSibling;for(;s;)(!e||s.matches(e))&&t.push(s),s=s.previousElementSibling;return t}const l=class l{constructor(e,t={}){if(typeof e=="string"&&(e=document.querySelector(e)),!e)throw new Error("moTimeline: element not found");this.element=e,this.settings=Object.assign({},w,t),this.settings.columnCount=Object.assign({},w.columnCount,t.columnCount),this._resizeHandler=y(()=>this.refresh(),100),this._initialized=!1,this.init()}init(){const e=this.element;if(a.has(e)){this.refresh();return}const t=Object.assign({},this.settings,{lastItemIdx:0});a.set(e,t),l.instances.add(this),e.classList.add("mo-timeline"),t.theme&&e.classList.add("mo-theme"),Array.from(e.children).length!==0&&(this._initItems(),this._initialized=!0,window.addEventListener("resize",this._resizeHandler))}refresh(){l.instances.forEach(e=>{const t=e.element,s=a.get(t);s&&(s.col=s.columnCount[v()],e._setDivider(),Array.from(t.children).forEach(o=>{e._setPostPosition(o)}))})}initNewItems(){this._initItems()}destroy(){window.removeEventListener("resize",this._resizeHandler),a.delete(this.element),l.instances.delete(this),this.element.classList.remove("mo-timeline","mo-theme","mo-twocol"),Array.from(this.element.children).forEach(e=>{e.classList.remove("mo-item","js-mo-item","mo-inverted","js-mo-inverted","mo-offset"),e.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach(t=>t.remove())})}_getData(){return a.get(this.element)}_setDivider(){const e=this._getData();e&&(e.col=e.columnCount[v()],this.element.classList.toggle("mo-twocol",e.col>1))}_initItems(){const e=this.element,t=this._getData();if(!t)return;const s=t.lastItemIdx,o=Array.from(e.children),n=o.slice(s);n.length!==0&&(n.forEach((r,c)=>{r.id||(r.id="moT"+crypto.randomUUID()+"_"+(c+s)),r.classList.add("mo-item","js-mo-item")}),this._setDivider(),n.forEach((r,c)=>{t.badgeShow&&this._createBadge(r,c+s+1),t.arrowShow&&this._createArrow(r)}),t.lastItemIdx=o.length,a.set(e,t),this.refresh())}_setPostPosition(e){const t=this._getLeftOrRight(e);t&&(e.classList.toggle("mo-inverted",t.lr>0),e.classList.toggle("js-mo-inverted",t.lr>0),e.classList.toggle("mo-offset",t.badge_offset>0))}_getLeftOrRight(e){if(!e)return null;const t=this._getData();if(!t)return null;const s=t.col,o=_(e,".js-mo-inverted")[0]||null,n=_(e,".js-mo-item:not(.js-mo-inverted)")[0]||null,r=m(n),c=m(o),u=m(e);let h=0,f=0;if(s>1){r.gppu>u.o&&(h=1),c.gppu>r.gppu&&(h=0);const g=e.previousElementSibling;g&&Math.abs(u.o-m(g).o)<40&&(f=1)}return{lr:h,badge_offset:f}}_createBadge(e,t){const s=this._getData(),o=document.createElement("span");if(o.className="mo-badge js-mo-badge",s.showCounter||(o.style.opacity="0"),s.showCounterStyle==="image"){const n=document.createElement("img");n.className="mo-badge-icon",n.alt="",n.src=e.dataset.moIcon||I,o.appendChild(n)}else o.textContent=t;e.prepend(o)}_createArrow(e){const t=document.createElement("span");t.className="mo-arrow js-mo-arrow",e.prepend(t)}};p(l,"instances",new Set);let d=l;exports.MoTimeline=d;exports.default=d;
+ */const c=new WeakMap,w={columnCount:{xs:1,sm:2,md:2,lg:2},badgeShow:!1,arrowShow:!1,theme:!1,showCounter:!0,showCounterStyle:"counter"},C="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%234f46e5'/><circle cx='12' cy='12' r='4.5' fill='white'/></svg>";function v(){const o=window.innerWidth;return o<600?"xs":o<992?"sm":o<1200?"md":"lg"}function I(o,e=100){let t;return(...s)=>{clearTimeout(t),t=setTimeout(()=>o(...s),e)}}function m(o){return o?{o:o.offsetTop,h:o.offsetHeight,gppu:o.offsetTop+o.offsetHeight}:{o:0,h:0,gppu:0}}function E(o,e){const t=[];let s=o.previousElementSibling;for(;s;)(!e||s.matches(e))&&t.push(s),s=s.previousElementSibling;return t}const l=class l{constructor(e,t={}){if(typeof e=="string"&&(e=document.querySelector(e)),!e)throw new Error("moTimeline: element not found");this.element=e,this.settings=Object.assign({},w,t),this.settings.columnCount=Object.assign({},w.columnCount,t.columnCount),this._resizeHandler=I(()=>this.refresh(),100),this._initialized=!1,this.init()}init(){const e=this.element;if(c.has(e)){this.refresh();return}const t=Object.assign({},this.settings,{lastItemIdx:0});c.set(e,t),l.instances.add(this),e.classList.add("mo-timeline"),t.theme&&e.classList.add("mo-theme"),Array.from(e.children).length!==0&&(this._initItems(),this._initialized=!0,window.addEventListener("resize",this._resizeHandler))}refresh(){l.instances.forEach(e=>{const t=e.element,s=c.get(t);s&&(s.col=s.columnCount[v()],e._setDivider(),Array.from(t.children).forEach(i=>{e._setPostPosition(i)}))})}initNewItems(){this._initItems()}addItems(e){typeof e=="string"&&(e=JSON.parse(e)),e.forEach(t=>this.element.appendChild(this._createItemElement(t))),this._initItems()}destroy(){window.removeEventListener("resize",this._resizeHandler),c.delete(this.element),l.instances.delete(this),this.element.classList.remove("mo-timeline","mo-theme","mo-twocol"),Array.from(this.element.children).forEach(e=>{e.classList.remove("mo-item","js-mo-item","mo-inverted","js-mo-inverted","mo-offset"),e.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach(t=>t.remove())})}_getData(){return c.get(this.element)}_setDivider(){const e=this._getData();e&&(e.col=e.columnCount[v()],this.element.classList.toggle("mo-twocol",e.col>1))}_initItems(){const e=this.element,t=this._getData();if(!t)return;const s=t.lastItemIdx,i=Array.from(e.children),n=i.slice(s);n.length!==0&&(n.forEach((r,a)=>{r.id||(r.id="moT"+crypto.randomUUID()+"_"+(a+s)),r.classList.add("mo-item","js-mo-item")}),this._setDivider(),n.forEach((r,a)=>{t.badgeShow&&this._createBadge(r,a+s+1),t.arrowShow&&this._createArrow(r)}),t.lastItemIdx=i.length,c.set(e,t),this.refresh())}_setPostPosition(e){const t=this._getLeftOrRight(e);t&&(e.classList.toggle("mo-inverted",t.lr>0),e.classList.toggle("js-mo-inverted",t.lr>0),e.classList.toggle("mo-offset",t.badge_offset>0))}_getLeftOrRight(e){if(!e)return null;const t=this._getData();if(!t)return null;const s=t.col,i=E(e,".js-mo-inverted")[0]||null,n=E(e,".js-mo-item:not(.js-mo-inverted)")[0]||null,r=m(n),a=m(i),u=m(e);let h=0,f=0;if(s>1){r.gppu>u.o&&(h=1),a.gppu>r.gppu&&(h=0);const g=e.previousElementSibling;g&&Math.abs(u.o-m(g).o)<40&&(f=1)}return{lr:h,badge_offset:f}}_createBadge(e,t){const s=this._getData(),i=document.createElement("span");if(i.className="mo-badge js-mo-badge",s.showCounter||(i.style.opacity="0"),s.showCounterStyle==="image"){const n=document.createElement("img");n.className="mo-badge-icon",n.alt="",n.src=e.dataset.moIcon||C,i.appendChild(n)}else i.textContent=t;e.prepend(i)}_createItemElement(e){const t=document.createElement("li");e.icon&&(t.dataset.moIcon=e.icon);const s=document.createElement("div");if(s.className="mo-card",e.banner){const n=document.createElement("div");n.className="mo-card-image";const r=document.createElement("img");if(r.className="mo-banner",r.src=e.banner,r.alt="",n.appendChild(r),e.avatar){const a=document.createElement("img");a.className="mo-avatar",a.src=e.avatar,a.alt="",n.appendChild(a)}s.appendChild(n)}const i=document.createElement("div");if(i.className="mo-card-body",e.title){const n=document.createElement("h3");n.textContent=e.title,i.appendChild(n)}if(e.meta){const n=document.createElement("p");n.className="mo-meta",n.textContent=e.meta,i.appendChild(n)}if(e.text){const n=document.createElement("p");n.textContent=e.text,i.appendChild(n)}return s.appendChild(i),t.appendChild(s),t}_createArrow(e){const t=document.createElement("span");t.className="mo-arrow js-mo-arrow",e.prepend(t)}};p(l,"instances",new Set);let d=l;exports.MoTimeline=d;exports.default=d;

package/dist/moTimeline.css

@@ -1,3 +1,3 @@
 /*!
  * moTimeline v2.3.0 — CSS
- */:root{--mo-line-color: #dde1e7;--mo-badge-bg: #4f46e5;--mo-badge-color: #fff;--mo-badge-size: 26px;--mo-badge-font-size: 12px;--mo-arrow-color: #dde1e7}.mo-timeline{display:block;list-style:none;margin:0;padding:0;position:relative;width:100%}.mo-timeline:after{content:"";display:table;clear:both}.mo-timeline.mo-twocol:before{background-color:var(--mo-line-color);bottom:0;content:"";left:50%;margin-left:-1.5px;position:absolute;top:0;width:3px;z-index:0}.mo-timeline>.mo-item{box-sizing:border-box;display:block;float:left;position:relative;width:50%}.mo-timeline:not(.mo-twocol)>.mo-item{float:none;width:100%}.mo-timeline>.mo-item.mo-inverted{float:right}.mo-badge{align-items:center;background:var(--mo-badge-bg);border-radius:50%;color:var(--mo-badge-color);display:flex;font-size:var(--mo-badge-font-size);font-weight:700;height:var(--mo-badge-size);justify-content:center;min-width:var(--mo-badge-size);overflow:hidden;position:absolute;top:18px;z-index:2}.mo-badge .mo-badge-icon{border-radius:50%;height:100%;object-fit:cover;width:100%}.mo-timeline.mo-twocol>.mo-item:not(.mo-inverted) .mo-badge{left:auto;right:calc(var(--mo-badge-size) / -2)}.mo-timeline.mo-twocol>.mo-item.mo-inverted .mo-badge{left:calc(var(--mo-badge-size) / -2);right:auto}.mo-timeline.mo-twocol>.mo-item.mo-offset .mo-badge{top:calc(18px + var(--mo-badge-size) + 10px)}.mo-timeline.mo-twocol>.mo-item.mo-offset .mo-arrow{top:calc(26px + var(--mo-badge-size) + 10px)}.mo-timeline:not(.mo-twocol)>.mo-item .mo-badge{right:12px;left:auto;top:12px}.mo-arrow{border:8px solid transparent;display:block;height:0;position:absolute;top:26px;width:0;z-index:1}.mo-timeline.mo-twocol>.mo-item:not(.mo-inverted) .mo-arrow{border-left:8px solid var(--mo-arrow-color);border-right:none;left:auto;right:0}.mo-timeline.mo-twocol>.mo-item.mo-inverted .mo-arrow{border-right:8px solid var(--mo-arrow-color);border-left:none;left:0;right:auto}.mo-timeline:not(.mo-twocol)>.mo-item .mo-arrow{display:none}.mo-theme>.mo-item .mo-card{background:#fff;border-radius:8px;box-shadow:0 2px 14px #0000001a;margin:.5rem 1.25rem .5rem .5rem;overflow:hidden;position:relative}.mo-theme>.mo-item.mo-inverted .mo-card{margin:.5rem .5rem .5rem 1.25rem}.mo-theme>.mo-item .mo-banner{display:block;height:160px;object-fit:cover;width:100%}.mo-theme>.mo-item .mo-card-image{overflow:visible;position:relative}.mo-theme>.mo-item .mo-avatar{border:3px solid #fff;border-radius:50%;bottom:-22px;box-shadow:0 2px 8px #0000002e;height:50px;object-fit:cover;position:absolute;right:14px;width:50px;z-index:1}.mo-theme>.mo-item.mo-inverted .mo-avatar{left:14px;right:auto}.mo-theme>.mo-item .mo-card-body{padding:1.75rem 1rem 1rem}.mo-theme>.mo-item .mo-card-body h3{font-size:1rem;font-weight:700;margin:0 0 .3rem}.mo-theme>.mo-item .mo-card-body .mo-meta{color:#9ca3af;font-size:.75rem;margin-bottom:.5rem}.mo-theme>.mo-item .mo-card-body p{color:#6b7280;font-size:.875rem;line-height:1.55;margin:0}.mo-theme.mo-twocol>.mo-item:not(.mo-inverted) .mo-arrow{border-left-color:#e5e7eb;right:10px}.mo-theme.mo-twocol>.mo-item.mo-inverted .mo-arrow{border-right-color:#e5e7eb;left:10px}.mo-theme .mo-badge{background:#fff;border:2px solid var(--mo-line-color);box-shadow:0 2px 6px #0000001a;color:#374151}
+ */:root{--mo-line-color: #dde1e7;--mo-badge-bg: #4f46e5;--mo-badge-color: #fff;--mo-badge-size: 26px;--mo-badge-font-size: 12px;--mo-arrow-color: #dde1e7}.mo-timeline{display:block;list-style:none;margin:0;padding:0;position:relative;width:100%}.mo-timeline:after{content:"";display:table;clear:both}.mo-timeline.mo-twocol:before{background-color:var(--mo-line-color);bottom:0;content:"";left:50%;margin-left:-1.5px;position:absolute;top:0;width:3px;z-index:0}.mo-timeline>.mo-item{box-sizing:border-box;display:block;float:left;position:relative;width:50%}.mo-timeline:not(.mo-twocol)>.mo-item{float:none;width:100%}.mo-timeline>.mo-item.mo-inverted{float:right}.mo-badge{align-items:center;background:var(--mo-badge-bg);border-radius:50%;color:var(--mo-badge-color);display:flex;font-size:var(--mo-badge-font-size);font-weight:700;height:var(--mo-badge-size);justify-content:center;min-width:var(--mo-badge-size);overflow:hidden;position:absolute;top:18px;z-index:2}.mo-badge .mo-badge-icon{border-radius:50%;height:100%;object-fit:cover;width:100%}.mo-timeline.mo-twocol>.mo-item:not(.mo-inverted) .mo-badge{left:auto;right:calc(var(--mo-badge-size) / -2)}.mo-timeline.mo-twocol>.mo-item.mo-inverted .mo-badge{left:calc(var(--mo-badge-size) / -2);right:auto}.mo-timeline.mo-twocol>.mo-item.mo-offset .mo-badge{top:calc(18px + var(--mo-badge-size) + 10px)}.mo-timeline.mo-twocol>.mo-item.mo-offset .mo-arrow{top:calc(26px + var(--mo-badge-size) + 10px)}.mo-timeline:not(.mo-twocol)>.mo-item .mo-badge{display:none}.mo-arrow{border:8px solid transparent;display:block;height:0;position:absolute;top:26px;width:0;z-index:1}.mo-timeline.mo-twocol>.mo-item:not(.mo-inverted) .mo-arrow{border-left:8px solid var(--mo-arrow-color);border-right:none;left:auto;right:0}.mo-timeline.mo-twocol>.mo-item.mo-inverted .mo-arrow{border-right:8px solid var(--mo-arrow-color);border-left:none;left:0;right:auto}.mo-timeline:not(.mo-twocol)>.mo-item .mo-arrow{display:none}.mo-theme>.mo-item .mo-card{background:#fff;border-radius:8px;box-shadow:0 2px 14px #0000001a;margin:.5rem 1.25rem .5rem .5rem;overflow:hidden;position:relative}.mo-theme>.mo-item.mo-inverted .mo-card{margin:.5rem .5rem .5rem 1.25rem}.mo-theme>.mo-item .mo-banner{display:block;height:160px;object-fit:cover;width:100%}.mo-theme>.mo-item .mo-card-image{overflow:visible;position:relative}.mo-theme>.mo-item .mo-avatar{border:3px solid #fff;border-radius:50%;bottom:-22px;box-shadow:0 2px 8px #0000002e;height:50px;object-fit:cover;position:absolute;right:14px;width:50px;z-index:1}.mo-theme>.mo-item.mo-inverted .mo-avatar{left:14px;right:auto}.mo-theme>.mo-item .mo-card-body{padding:1.75rem 1rem 1rem}.mo-theme>.mo-item .mo-card-body h3{font-size:1rem;font-weight:700;margin:0 0 .3rem}.mo-theme>.mo-item .mo-card-body .mo-meta{color:#9ca3af;font-size:.75rem;margin-bottom:.5rem}.mo-theme>.mo-item .mo-card-body p{color:#6b7280;font-size:.875rem;line-height:1.55;margin:0}.mo-theme.mo-twocol>.mo-item:not(.mo-inverted) .mo-arrow{border-left-color:#e5e7eb;right:10px}.mo-theme.mo-twocol>.mo-item.mo-inverted .mo-arrow{border-right-color:#e5e7eb;left:10px}.mo-theme .mo-badge{background:#fff;border:2px solid var(--mo-line-color);box-shadow:0 2px 6px #0000001a;color:#374151}

package/dist/moTimeline.js

@@ -1,13 +1,13 @@
-var b = Object.defineProperty;
-var E = (i, t, e) => t in i ? b(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var g = (i, t, e) => E(i, typeof t != "symbol" ? t + "" : t, e);
+var _ = Object.defineProperty;
+var C = (o, e, t) => e in o ? _(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var g = (o, e, t) => C(o, typeof e != "symbol" ? e + "" : e, t);
 /*!
- * moTimeline v2.3.0
+ * moTimeline v2.4.0
  * Responsive two-column timeline layout library
  * https://github.com/MattOpen/moTimeline
  * MIT License
  */
-const a = /* @__PURE__ */ new WeakMap(), p = {
+const c = /* @__PURE__ */ new WeakMap(), p = {
   columnCount: { xs: 1, sm: 2, md: 2, lg: 2 },
   badgeShow: !1,
   arrowShow: !1,
@@ -15,113 +15,154 @@ const a = /* @__PURE__ */ new WeakMap(), p = {
   showCounter: !0,
   showCounterStyle: "counter"
   // 'counter' | 'image'
-}, I = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%234f46e5'/><circle cx='12' cy='12' r='4.5' fill='white'/></svg>";
+}, b = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%234f46e5'/><circle cx='12' cy='12' r='4.5' fill='white'/></svg>";
 function w() {
-  const i = window.innerWidth;
-  return i < 600 ? "xs" : i < 992 ? "sm" : i < 1200 ? "md" : "lg";
+  const o = window.innerWidth;
+  return o < 600 ? "xs" : o < 992 ? "sm" : o < 1200 ? "md" : "lg";
 }
-function L(i, t = 100) {
-  let e;
+function I(o, e = 100) {
+  let t;
   return (...s) => {
-    clearTimeout(e), e = setTimeout(() => i(...s), t);
+    clearTimeout(t), t = setTimeout(() => o(...s), e);
   };
 }
-function m(i) {
-  return i ? {
-    o: i.offsetTop,
-    h: i.offsetHeight,
-    gppu: i.offsetTop + i.offsetHeight
+function m(o) {
+  return o ? {
+    o: o.offsetTop,
+    h: o.offsetHeight,
+    gppu: o.offsetTop + o.offsetHeight
   } : { o: 0, h: 0, gppu: 0 };
 }
-function v(i, t) {
-  const e = [];
-  let s = i.previousElementSibling;
+function v(o, e) {
+  const t = [];
+  let s = o.previousElementSibling;
   for (; s; )
-    (!t || s.matches(t)) && e.push(s), s = s.previousElementSibling;
-  return e;
+    (!e || s.matches(e)) && t.push(s), s = s.previousElementSibling;
+  return t;
 }
-const c = class c {
-  constructor(t, e = {}) {
-    if (typeof t == "string" && (t = document.querySelector(t)), !t) throw new Error("moTimeline: element not found");
-    this.element = t, this.settings = Object.assign({}, p, e), this.settings.columnCount = Object.assign({}, p.columnCount, e.columnCount), this._resizeHandler = L(() => this.refresh(), 100), this._initialized = !1, this.init();
+const l = class l {
+  constructor(e, t = {}) {
+    if (typeof e == "string" && (e = document.querySelector(e)), !e) throw new Error("moTimeline: element not found");
+    this.element = e, this.settings = Object.assign({}, p, t), this.settings.columnCount = Object.assign({}, p.columnCount, t.columnCount), this._resizeHandler = I(() => this.refresh(), 100), this._initialized = !1, this.init();
   }
   init() {
-    const t = this.element;
-    if (a.has(t)) {
+    const e = this.element;
+    if (c.has(e)) {
       this.refresh();
       return;
     }
-    const e = Object.assign({}, this.settings, { lastItemIdx: 0 });
-    a.set(t, e), c.instances.add(this), t.classList.add("mo-timeline"), e.theme && t.classList.add("mo-theme"), Array.from(t.children).length !== 0 && (this._initItems(), this._initialized = !0, window.addEventListener("resize", this._resizeHandler));
+    const t = Object.assign({}, this.settings, { lastItemIdx: 0 });
+    c.set(e, t), l.instances.add(this), e.classList.add("mo-timeline"), t.theme && e.classList.add("mo-theme"), Array.from(e.children).length !== 0 && (this._initItems(), this._initialized = !0, window.addEventListener("resize", this._resizeHandler));
   }
   refresh() {
-    c.instances.forEach((t) => {
-      const e = t.element, s = a.get(e);
-      s && (s.col = s.columnCount[w()], t._setDivider(), Array.from(e.children).forEach((o) => {
-        t._setPostPosition(o);
+    l.instances.forEach((e) => {
+      const t = e.element, s = c.get(t);
+      s && (s.col = s.columnCount[w()], e._setDivider(), Array.from(t.children).forEach((i) => {
+        e._setPostPosition(i);
       }));
     });
   }
   initNewItems() {
     this._initItems();
   }
+  /**
+   * Create <li> elements from an array of item objects (or a JSON string) and
+   * append them to the timeline, then initialize them in one batch.
+   *
+   * Item shape:
+   *   { title, meta, text, banner, avatar, icon }
+   *   — banner / avatar / icon are all optional
+   *   — icon sets data-mo-icon on the <li> for showCounterStyle:'image'
+   */
+  addItems(e) {
+    typeof e == "string" && (e = JSON.parse(e)), e.forEach((t) => this.element.appendChild(this._createItemElement(t))), this._initItems();
+  }
   destroy() {
-    window.removeEventListener("resize", this._resizeHandler), a.delete(this.element), c.instances.delete(this), this.element.classList.remove("mo-timeline", "mo-theme", "mo-twocol"), Array.from(this.element.children).forEach((t) => {
-      t.classList.remove("mo-item", "js-mo-item", "mo-inverted", "js-mo-inverted", "mo-offset"), t.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach((e) => e.remove());
+    window.removeEventListener("resize", this._resizeHandler), c.delete(this.element), l.instances.delete(this), this.element.classList.remove("mo-timeline", "mo-theme", "mo-twocol"), Array.from(this.element.children).forEach((e) => {
+      e.classList.remove("mo-item", "js-mo-item", "mo-inverted", "js-mo-inverted", "mo-offset"), e.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach((t) => t.remove());
     });
   }
   // ─── Private ────────────────────────────────────────────────────────────────
   _getData() {
-    return a.get(this.element);
+    return c.get(this.element);
   }
   _setDivider() {
-    const t = this._getData();
-    t && (t.col = t.columnCount[w()], this.element.classList.toggle("mo-twocol", t.col > 1));
+    const e = this._getData();
+    e && (e.col = e.columnCount[w()], this.element.classList.toggle("mo-twocol", e.col > 1));
   }
   _initItems() {
-    const t = this.element, e = this._getData();
-    if (!e) return;
-    const s = e.lastItemIdx, o = Array.from(t.children), n = o.slice(s);
-    n.length !== 0 && (n.forEach((r, l) => {
-      r.id || (r.id = "moT" + crypto.randomUUID() + "_" + (l + s)), r.classList.add("mo-item", "js-mo-item");
-    }), this._setDivider(), n.forEach((r, l) => {
-      e.badgeShow && this._createBadge(r, l + s + 1), e.arrowShow && this._createArrow(r);
-    }), e.lastItemIdx = o.length, a.set(t, e), this.refresh());
+    const e = this.element, t = this._getData();
+    if (!t) return;
+    const s = t.lastItemIdx, i = Array.from(e.children), n = i.slice(s);
+    n.length !== 0 && (n.forEach((r, a) => {
+      r.id || (r.id = "moT" + crypto.randomUUID() + "_" + (a + s)), r.classList.add("mo-item", "js-mo-item");
+    }), this._setDivider(), n.forEach((r, a) => {
+      t.badgeShow && this._createBadge(r, a + s + 1), t.arrowShow && this._createArrow(r);
+    }), t.lastItemIdx = i.length, c.set(e, t), this.refresh());
   }
-  _setPostPosition(t) {
-    const e = this._getLeftOrRight(t);
-    e && (t.classList.toggle("mo-inverted", e.lr > 0), t.classList.toggle("js-mo-inverted", e.lr > 0), t.classList.toggle("mo-offset", e.badge_offset > 0));
+  _setPostPosition(e) {
+    const t = this._getLeftOrRight(e);
+    t && (e.classList.toggle("mo-inverted", t.lr > 0), e.classList.toggle("js-mo-inverted", t.lr > 0), e.classList.toggle("mo-offset", t.badge_offset > 0));
   }
-  _getLeftOrRight(t) {
-    if (!t) return null;
-    const e = this._getData();
+  _getLeftOrRight(e) {
     if (!e) return null;
-    const s = e.col, o = v(t, ".js-mo-inverted")[0] || null, n = v(t, ".js-mo-item:not(.js-mo-inverted)")[0] || null, r = m(n), l = m(o), d = m(t);
-    let h = 0, f = 0;
+    const t = this._getData();
+    if (!t) return null;
+    const s = t.col, i = v(e, ".js-mo-inverted")[0] || null, n = v(e, ".js-mo-item:not(.js-mo-inverted)")[0] || null, r = m(n), a = m(i), h = m(e);
+    let d = 0, f = 0;
     if (s > 1) {
-      r.gppu > d.o && (h = 1), l.gppu > r.gppu && (h = 0);
-      const u = t.previousElementSibling;
-      u && Math.abs(d.o - m(u).o) < 40 && (f = 1);
+      r.gppu > h.o && (d = 1), a.gppu > r.gppu && (d = 0);
+      const u = e.previousElementSibling;
+      u && Math.abs(h.o - m(u).o) < 40 && (f = 1);
     }
-    return { lr: h, badge_offset: f };
+    return { lr: d, badge_offset: f };
   }
-  _createBadge(t, e) {
-    const s = this._getData(), o = document.createElement("span");
-    if (o.className = "mo-badge js-mo-badge", s.showCounter || (o.style.opacity = "0"), s.showCounterStyle === "image") {
+  _createBadge(e, t) {
+    const s = this._getData(), i = document.createElement("span");
+    if (i.className = "mo-badge js-mo-badge", s.showCounter || (i.style.opacity = "0"), s.showCounterStyle === "image") {
       const n = document.createElement("img");
-      n.className = "mo-badge-icon", n.alt = "", n.src = t.dataset.moIcon || I, o.appendChild(n);
+      n.className = "mo-badge-icon", n.alt = "", n.src = e.dataset.moIcon || b, i.appendChild(n);
     } else
-      o.textContent = e;
-    t.prepend(o);
+      i.textContent = t;
+    e.prepend(i);
+  }
+  _createItemElement(e) {
+    const t = document.createElement("li");
+    e.icon && (t.dataset.moIcon = e.icon);
+    const s = document.createElement("div");
+    if (s.className = "mo-card", e.banner) {
+      const n = document.createElement("div");
+      n.className = "mo-card-image";
+      const r = document.createElement("img");
+      if (r.className = "mo-banner", r.src = e.banner, r.alt = "", n.appendChild(r), e.avatar) {
+        const a = document.createElement("img");
+        a.className = "mo-avatar", a.src = e.avatar, a.alt = "", n.appendChild(a);
+      }
+      s.appendChild(n);
+    }
+    const i = document.createElement("div");
+    if (i.className = "mo-card-body", e.title) {
+      const n = document.createElement("h3");
+      n.textContent = e.title, i.appendChild(n);
+    }
+    if (e.meta) {
+      const n = document.createElement("p");
+      n.className = "mo-meta", n.textContent = e.meta, i.appendChild(n);
+    }
+    if (e.text) {
+      const n = document.createElement("p");
+      n.textContent = e.text, i.appendChild(n);
+    }
+    return s.appendChild(i), t.appendChild(s), t;
   }
-  _createArrow(t) {
-    const e = document.createElement("span");
-    e.className = "mo-arrow js-mo-arrow", t.prepend(e);
+  _createArrow(e) {
+    const t = document.createElement("span");
+    t.className = "mo-arrow js-mo-arrow", e.prepend(t);
   }
 };
-g(c, "instances", /* @__PURE__ */ new Set());
-let _ = c;
+g(l, "instances", /* @__PURE__ */ new Set());
+let E = l;
 export {
-  _ as MoTimeline,
-  _ as default
+  E as MoTimeline,
+  E as default
 };

package/dist/moTimeline.umd.js

@@ -1,6 +1,6 @@
-(function(n,i){typeof exports=="object"&&typeof module<"u"?i(exports):typeof define=="function"&&define.amd?define(["exports"],i):(n=typeof globalThis<"u"?globalThis:n||self,i(n.MoTimeline={}))})(this,function(n){"use strict";var I=Object.defineProperty;var j=(n,i,c)=>i in n?I(n,i,{enumerable:!0,configurable:!0,writable:!0,value:c}):n[i]=c;var b=(n,i,c)=>j(n,typeof i!="symbol"?i+"":i,c);/*!
- * moTimeline v2.3.0
+(function(a,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(a=typeof globalThis<"u"?globalThis:a||self,o(a.MoTimeline={}))})(this,function(a){"use strict";var I=Object.defineProperty;var y=(a,o,m)=>o in a?I(a,o,{enumerable:!0,configurable:!0,writable:!0,value:m}):a[o]=m;var _=(a,o,m)=>y(a,typeof o!="symbol"?o+"":o,m);/*!
+ * moTimeline v2.4.0
  * Responsive two-column timeline layout library
  * https://github.com/MattOpen/moTimeline
  * MIT License
- */const i=new WeakMap,c={columnCount:{xs:1,sm:2,md:2,lg:2},badgeShow:!1,arrowShow:!1,theme:!1,showCounter:!0,showCounterStyle:"counter"},y="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%234f46e5'/><circle cx='12' cy='12' r='4.5' fill='white'/></svg>";function g(){const o=window.innerWidth;return o<600?"xs":o<992?"sm":o<1200?"md":"lg"}function E(o,e=100){let t;return(...s)=>{clearTimeout(t),t=setTimeout(()=>o(...s),e)}}function f(o){return o?{o:o.offsetTop,h:o.offsetHeight,gppu:o.offsetTop+o.offsetHeight}:{o:0,h:0,gppu:0}}function p(o,e){const t=[];let s=o.previousElementSibling;for(;s;)(!e||s.matches(e))&&t.push(s),s=s.previousElementSibling;return t}const m=class m{constructor(e,t={}){if(typeof e=="string"&&(e=document.querySelector(e)),!e)throw new Error("moTimeline: element not found");this.element=e,this.settings=Object.assign({},c,t),this.settings.columnCount=Object.assign({},c.columnCount,t.columnCount),this._resizeHandler=E(()=>this.refresh(),100),this._initialized=!1,this.init()}init(){const e=this.element;if(i.has(e)){this.refresh();return}const t=Object.assign({},this.settings,{lastItemIdx:0});i.set(e,t),m.instances.add(this),e.classList.add("mo-timeline"),t.theme&&e.classList.add("mo-theme"),Array.from(e.children).length!==0&&(this._initItems(),this._initialized=!0,window.addEventListener("resize",this._resizeHandler))}refresh(){m.instances.forEach(e=>{const t=e.element,s=i.get(t);s&&(s.col=s.columnCount[g()],e._setDivider(),Array.from(t.children).forEach(r=>{e._setPostPosition(r)}))})}initNewItems(){this._initItems()}destroy(){window.removeEventListener("resize",this._resizeHandler),i.delete(this.element),m.instances.delete(this),this.element.classList.remove("mo-timeline","mo-theme","mo-twocol"),Array.from(this.element.children).forEach(e=>{e.classList.remove("mo-item","js-mo-item","mo-inverted","js-mo-inverted","mo-offset"),e.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach(t=>t.remove())})}_getData(){return i.get(this.element)}_setDivider(){const e=this._getData();e&&(e.col=e.columnCount[g()],this.element.classList.toggle("mo-twocol",e.col>1))}_initItems(){const e=this.element,t=this._getData();if(!t)return;const s=t.lastItemIdx,r=Array.from(e.children),a=r.slice(s);a.length!==0&&(a.forEach((l,d)=>{l.id||(l.id="moT"+crypto.randomUUID()+"_"+(d+s)),l.classList.add("mo-item","js-mo-item")}),this._setDivider(),a.forEach((l,d)=>{t.badgeShow&&this._createBadge(l,d+s+1),t.arrowShow&&this._createArrow(l)}),t.lastItemIdx=r.length,i.set(e,t),this.refresh())}_setPostPosition(e){const t=this._getLeftOrRight(e);t&&(e.classList.toggle("mo-inverted",t.lr>0),e.classList.toggle("js-mo-inverted",t.lr>0),e.classList.toggle("mo-offset",t.badge_offset>0))}_getLeftOrRight(e){if(!e)return null;const t=this._getData();if(!t)return null;const s=t.col,r=p(e,".js-mo-inverted")[0]||null,a=p(e,".js-mo-item:not(.js-mo-inverted)")[0]||null,l=f(a),d=f(r),w=f(e);let u=0,v=0;if(s>1){l.gppu>w.o&&(u=1),d.gppu>l.gppu&&(u=0);const _=e.previousElementSibling;_&&Math.abs(w.o-f(_).o)<40&&(v=1)}return{lr:u,badge_offset:v}}_createBadge(e,t){const s=this._getData(),r=document.createElement("span");if(r.className="mo-badge js-mo-badge",s.showCounter||(r.style.opacity="0"),s.showCounterStyle==="image"){const a=document.createElement("img");a.className="mo-badge-icon",a.alt="",a.src=e.dataset.moIcon||y,r.appendChild(a)}else r.textContent=t;e.prepend(r)}_createArrow(e){const t=document.createElement("span");t.className="mo-arrow js-mo-arrow",e.prepend(t)}};b(m,"instances",new Set);let h=m;n.MoTimeline=h,n.default=h,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+ */const o=new WeakMap,m={columnCount:{xs:1,sm:2,md:2,lg:2},badgeShow:!1,arrowShow:!1,theme:!1,showCounter:!0,showCounterStyle:"counter"},b="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%234f46e5'/><circle cx='12' cy='12' r='4.5' fill='white'/></svg>";function g(){const c=window.innerWidth;return c<600?"xs":c<992?"sm":c<1200?"md":"lg"}function C(c,e=100){let t;return(...n)=>{clearTimeout(t),t=setTimeout(()=>c(...n),e)}}function h(c){return c?{o:c.offsetTop,h:c.offsetHeight,gppu:c.offsetTop+c.offsetHeight}:{o:0,h:0,gppu:0}}function p(c,e){const t=[];let n=c.previousElementSibling;for(;n;)(!e||n.matches(e))&&t.push(n),n=n.previousElementSibling;return t}const d=class d{constructor(e,t={}){if(typeof e=="string"&&(e=document.querySelector(e)),!e)throw new Error("moTimeline: element not found");this.element=e,this.settings=Object.assign({},m,t),this.settings.columnCount=Object.assign({},m.columnCount,t.columnCount),this._resizeHandler=C(()=>this.refresh(),100),this._initialized=!1,this.init()}init(){const e=this.element;if(o.has(e)){this.refresh();return}const t=Object.assign({},this.settings,{lastItemIdx:0});o.set(e,t),d.instances.add(this),e.classList.add("mo-timeline"),t.theme&&e.classList.add("mo-theme"),Array.from(e.children).length!==0&&(this._initItems(),this._initialized=!0,window.addEventListener("resize",this._resizeHandler))}refresh(){d.instances.forEach(e=>{const t=e.element,n=o.get(t);n&&(n.col=n.columnCount[g()],e._setDivider(),Array.from(t.children).forEach(i=>{e._setPostPosition(i)}))})}initNewItems(){this._initItems()}addItems(e){typeof e=="string"&&(e=JSON.parse(e)),e.forEach(t=>this.element.appendChild(this._createItemElement(t))),this._initItems()}destroy(){window.removeEventListener("resize",this._resizeHandler),o.delete(this.element),d.instances.delete(this),this.element.classList.remove("mo-timeline","mo-theme","mo-twocol"),Array.from(this.element.children).forEach(e=>{e.classList.remove("mo-item","js-mo-item","mo-inverted","js-mo-inverted","mo-offset"),e.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach(t=>t.remove())})}_getData(){return o.get(this.element)}_setDivider(){const e=this._getData();e&&(e.col=e.columnCount[g()],this.element.classList.toggle("mo-twocol",e.col>1))}_initItems(){const e=this.element,t=this._getData();if(!t)return;const n=t.lastItemIdx,i=Array.from(e.children),s=i.slice(n);s.length!==0&&(s.forEach((r,l)=>{r.id||(r.id="moT"+crypto.randomUUID()+"_"+(l+n)),r.classList.add("mo-item","js-mo-item")}),this._setDivider(),s.forEach((r,l)=>{t.badgeShow&&this._createBadge(r,l+n+1),t.arrowShow&&this._createArrow(r)}),t.lastItemIdx=i.length,o.set(e,t),this.refresh())}_setPostPosition(e){const t=this._getLeftOrRight(e);t&&(e.classList.toggle("mo-inverted",t.lr>0),e.classList.toggle("js-mo-inverted",t.lr>0),e.classList.toggle("mo-offset",t.badge_offset>0))}_getLeftOrRight(e){if(!e)return null;const t=this._getData();if(!t)return null;const n=t.col,i=p(e,".js-mo-inverted")[0]||null,s=p(e,".js-mo-item:not(.js-mo-inverted)")[0]||null,r=h(s),l=h(i),w=h(e);let u=0,v=0;if(n>1){r.gppu>w.o&&(u=1),l.gppu>r.gppu&&(u=0);const E=e.previousElementSibling;E&&Math.abs(w.o-h(E).o)<40&&(v=1)}return{lr:u,badge_offset:v}}_createBadge(e,t){const n=this._getData(),i=document.createElement("span");if(i.className="mo-badge js-mo-badge",n.showCounter||(i.style.opacity="0"),n.showCounterStyle==="image"){const s=document.createElement("img");s.className="mo-badge-icon",s.alt="",s.src=e.dataset.moIcon||b,i.appendChild(s)}else i.textContent=t;e.prepend(i)}_createItemElement(e){const t=document.createElement("li");e.icon&&(t.dataset.moIcon=e.icon);const n=document.createElement("div");if(n.className="mo-card",e.banner){const s=document.createElement("div");s.className="mo-card-image";const r=document.createElement("img");if(r.className="mo-banner",r.src=e.banner,r.alt="",s.appendChild(r),e.avatar){const l=document.createElement("img");l.className="mo-avatar",l.src=e.avatar,l.alt="",s.appendChild(l)}n.appendChild(s)}const i=document.createElement("div");if(i.className="mo-card-body",e.title){const s=document.createElement("h3");s.textContent=e.title,i.appendChild(s)}if(e.meta){const s=document.createElement("p");s.className="mo-meta",s.textContent=e.meta,i.appendChild(s)}if(e.text){const s=document.createElement("p");s.textContent=e.text,i.appendChild(s)}return n.appendChild(i),t.appendChild(n),t}_createArrow(e){const t=document.createElement("span");t.className="mo-arrow js-mo-arrow",e.prepend(t)}};_(d,"instances",new Set);let f=d;a.MoTimeline=f,a.default=f,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motimeline",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Responsive two-column timeline layout library. Plain JavaScript, no dependencies.",
   "main": "./dist/moTimeline.cjs",
   "module": "./dist/moTimeline.js",

package/src/moTimeline.css

@@ -113,11 +113,9 @@
   top: calc(26px + var(--mo-badge-size) + 10px);
 }
 
-/* Single column: badge in top-right of item */
+/* Single column: hide badge (center-line elements have no meaning without a center line) */
 .mo-timeline:not(.mo-twocol) > .mo-item .mo-badge {
-  right: 12px;
-  left: auto;
-  top: 12px;
+  display: none;
 }
 
 /* ── Arrow — triangle pointing FROM card TOWARD center line ─── */

package/src/moTimeline.js

@@ -1,5 +1,5 @@
 /*!
- * moTimeline v2.3.0
+ * moTimeline v2.4.0
  * Responsive two-column timeline layout library
  * https://github.com/MattOpen/moTimeline
  * MIT License
@@ -124,6 +124,21 @@ export class MoTimeline {
     this._initItems();
   }
 
+  /**
+   * Create <li> elements from an array of item objects (or a JSON string) and
+   * append them to the timeline, then initialize them in one batch.
+   *
+   * Item shape:
+   *   { title, meta, text, banner, avatar, icon }
+   *   — banner / avatar / icon are all optional
+   *   — icon sets data-mo-icon on the <li> for showCounterStyle:'image'
+   */
+  addItems(items) {
+    if (typeof items === 'string') items = JSON.parse(items);
+    items.forEach((item) => this.element.appendChild(this._createItemElement(item)));
+    this._initItems();
+  }
+
   destroy() {
     window.removeEventListener('resize', this._resizeHandler);
     instanceData.delete(this.element);
@@ -248,6 +263,54 @@ export class MoTimeline {
     el.prepend(span);
   }
 
+  _createItemElement(item) {
+    const li = document.createElement('li');
+    if (item.icon) li.dataset.moIcon = item.icon;
+
+    const card = document.createElement('div');
+    card.className = 'mo-card';
+
+    if (item.banner) {
+      const wrap = document.createElement('div');
+      wrap.className = 'mo-card-image';
+      const banner = document.createElement('img');
+      banner.className = 'mo-banner';
+      banner.src = item.banner;
+      banner.alt = '';
+      wrap.appendChild(banner);
+      if (item.avatar) {
+        const avatar = document.createElement('img');
+        avatar.className = 'mo-avatar';
+        avatar.src = item.avatar;
+        avatar.alt = '';
+        wrap.appendChild(avatar);
+      }
+      card.appendChild(wrap);
+    }
+
+    const body = document.createElement('div');
+    body.className = 'mo-card-body';
+    if (item.title) {
+      const h = document.createElement('h3');
+      h.textContent = item.title;
+      body.appendChild(h);
+    }
+    if (item.meta) {
+      const m = document.createElement('p');
+      m.className = 'mo-meta';
+      m.textContent = item.meta;
+      body.appendChild(m);
+    }
+    if (item.text) {
+      const p = document.createElement('p');
+      p.textContent = item.text;
+      body.appendChild(p);
+    }
+    card.appendChild(body);
+    li.appendChild(card);
+    return li;
+  }
+
   _createArrow(el) {
     const span = document.createElement('span');
     span.className = 'mo-arrow js-mo-arrow';