motimeline 2.13.0 → 2.13.2

package/README.md

@@ -134,6 +134,8 @@ The library injects classes and elements into your markup. Here is what a fully
 
 ## Options
 
+<div style="overflow-x:auto">
+
 | Option | Type | Default | Description |
 |---|---|---|---|
 | `columnCount` | object | `{xs:1, sm:2, md:2, lg:2}` | Columns at each responsive breakpoint: `xs` < 600 px · `sm` < 992 px · `md` < 1 200 px · `lg` ≥ 1 200 px. Set any key to `1` to force single-column at that width. The center line, badges, and arrows are only visible in two-column mode. |
@@ -151,19 +153,27 @@ The library injects classes and elements into your markup. Here is what a fully
 | `renderCard` | function \| null | `null` | `(item, cardEl) => void`. When set, called for every item instead of the built-in HTML renderer. `cardEl` is the `.mo-card` div already placed inside the `<li>`. Populate it via `innerHTML` or DOM methods. The library still owns the `<li>`, column placement, spine, badge, arrow, `addItems()`, and scroll pagination. |
 | `adSlots` | object \| null | `null` | Inject ad slot placeholders into the timeline and observe them. See **Ad slots** below. |
 
+</div>
+
 ---
 
 ## Data attributes
 
+<div style="overflow-x:auto">
+
 | Attribute | Element | Description |
 |---|---|---|
 | `data-mo-icon` | `<li>` | URL of the image shown inside the badge when `showCounterStyle: 'image'`. Accepts any web-safe format including inline SVG data URIs. Falls back to a built-in SVG icon if absent. Also set automatically by `addItems()` when an `icon` field is provided. |
 | `data-categories` | `<li>` | Space-separated list of category tokens this item belongs to (e.g. `"development architecture"`). Used by `filterByCategory()`. Set automatically by `addItems()` / `insertItem()` when a `categories` field is provided. Can also be set manually in HTML. |
 
+</div>
+
 ---
 
 ## CSS classes reference
 
+<div style="overflow-x:auto">
+
 | Class | Applied to | Description |
 |---|---|---|
 | `mo-timeline` | container `<ul>` | Core layout class. Added automatically on init; safe to add in HTML before init. |
@@ -184,6 +194,8 @@ The library injects classes and elements into your markup. Here is what a fully
 | `js-mo-item` · `js-mo-inverted` | `<li>` | JS-only selector mirrors of `mo-item` / `mo-inverted`. Use in your own JS queries to avoid coupling to styling class names. |
 | `mo-filtered-out` | `<li>` | Added by `filterByCategory()` to items that do not match the active filter. Sets `display: none` and excludes the item from column-placement calculations. Removed when the filter is cleared or the item's category is selected. |
 
+</div>
+
 ---
 
 ## API
@@ -364,6 +376,8 @@ const tl = new MoTimeline('#my-timeline', {
 
 ### `adSlots` option shape
 
+<div style="overflow-x:auto">
+
 | Property | Type | Description |
 |---|---|---|
 | `mode` | `'every_n' \| 'random'` | `'every_n'` — inject after every `interval` real items. `'random'` — inject one slot at a random position within each `interval`-item page. |
@@ -371,6 +385,8 @@ const tl = new MoTimeline('#my-timeline', {
 | `style` | `'card' \| 'fullwidth'` | `'card'` — slot sits in the normal left/right column flow. `'fullwidth'` — slot spans both columns (adds `mo-fullwidth`). |
 | `onEnterViewport` | `(slotEl: HTMLElement, position: number) => void` | Called once per slot when ≥ 50% of it enters the viewport. `position` is the 0-based child index of the slot in the container at injection time. |
 
+</div>
+
 **What the library provides:**
 - A `<li class="mo-ad-slot">` element with `min-height: 100px` (so the observer can detect it before content loads)
 - `fullwidth` layout via the existing `mo-fullwidth` mechanism when `style: 'fullwidth'`
@@ -498,12 +514,16 @@ No framework option needed. Wrap the `<ul>` inside a Bootstrap `.container`:
 
 ## Examples
 
+<div style="overflow-x:auto">
+
 | Folder | Description |
 |---|---|
 | [`example/`](example/) | Main example — run with `npm run dev` |
 | [`example/mattopen/`](example/mattopen/) | Bootstrap 5 integration |
 | [`example/livestamp/`](example/livestamp/) | Livestamp.js + Moment.js relative timestamps |
 
+</div>
+
 ---
 
 ## Changelog

package/dist/moTimeline.cjs

@@ -1,6 +1,6 @@
-"use strict";var A=Object.defineProperty;var S=(l,e,t)=>e in l?A(l,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[e]=t;var _=(l,e,t)=>S(l,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});/*!
- * moTimeline v2.13.0
+"use strict";var b=Object.defineProperty;var E=(l,e,t)=>e in l?b(l,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[e]=t;var _=(l,e,t)=>E(l,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});/*!
+ * moTimeline v2.13.2
  * Responsive two-column timeline layout library
  * https://github.com/MattOpen/moTimeline
  * MIT License
- */const h=new WeakMap,b={columnCount:{xs:1,sm:2,md:2,lg:2},showBadge:!1,showArrow:!1,theme:!1,showCounterStyle:"counter",cardBorderRadius:"8px",avatarSize:"50px",cardMargin:"0.5rem 1.25rem 0.5rem 0.5rem",cardMarginInverted:"0.5rem 0.5rem 0.5rem 1.25rem",cardMarginFullWidth:"0.5rem",randomFullWidth:0,animate:!1,renderCard:null,adSlots:null},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 y(){const l=window.innerWidth;return l<600?"xs":l<992?"sm":l<1200?"md":"lg"}function L(l,e=100){let t;return(...s)=>{clearTimeout(t),t=setTimeout(()=>l(...s),e)}}function v(l){return l?{o:l.offsetTop,h:l.offsetHeight,gppu:l.offsetTop+l.offsetHeight}:{o:0,h:0,gppu:0}}function w(l,e){const t=[];let s=l.previousElementSibling;for(;s;)(!e||s.matches(e))&&t.push(s),s=s.previousElementSibling;return t}const f=class f{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({},b,t),this.settings.columnCount=Object.assign({},b.columnCount,t.columnCount),this._resizeHandler=L(()=>this.refresh(),100),this._initialized=!1,this.init()}init(){const e=this.element;if(h.has(e)){this.refresh();return}const t=Object.assign({},this.settings,{lastItemIdx:0});if(h.set(e,t),f.instances.add(this),e.classList.add("mo-timeline"),t.theme&&e.classList.add("mo-theme"),e.style.setProperty("--mo-card-border-radius",t.cardBorderRadius),e.style.setProperty("--mo-avatar-size",t.avatarSize),e.style.setProperty("--mo-card-margin",t.cardMargin),e.style.setProperty("--mo-card-margin-inverted",t.cardMarginInverted),e.style.setProperty("--mo-card-margin-fullwidth",t.cardMarginFullWidth),t.animate){const s=t.animate===!0?"fade":t.animate;e.classList.add("mo-animate",`mo-animate-${s}`),this._observer=new IntersectionObserver(r=>{r.forEach(o=>{o.isIntersecting&&(o.target.classList.add("mo-visible"),this._observer.unobserve(o.target))})},{threshold:.1})}t.adSlots&&(t._adRealCount=0,typeof t.adSlots.onEnterViewport=="function"&&(this._adObserver=new IntersectionObserver(s=>{s.forEach(r=>{r.isIntersecting&&(this._adObserver.unobserve(r.target),t.adSlots.onEnterViewport(r.target,Number(r.target.dataset.moAdPosition)))})},{threshold:.5}))),this._initialized=!0,window.addEventListener("resize",this._resizeHandler),Array.from(e.children).length>0&&this._initItems()}refresh(){f.instances.forEach(e=>{const t=e.element,s=h.get(t);s&&(s.col=s.columnCount[y()],e._setDivider(),Array.from(t.children).forEach(r=>{e._setPostPosition(r)}))})}initNewItems(){this._initItems()}addItems(e){typeof e=="string"&&(e=JSON.parse(e)),e.forEach(t=>this.element.appendChild(this._createItemElement(t))),this._initItems()}insertItem(e,t){const s=this.element,r=this._getData();if(!r)return;const o=this._createItemElement(e),i=Array.from(s.children).filter(n=>n.classList.contains("js-mo-item")),a=t==null?Math.floor(Math.random()*(i.length+1)):Math.max(0,Math.min(t,i.length));if(a>=i.length?s.appendChild(o):s.insertBefore(o,i[a]),o.id||(o.id="moT"+crypto.randomUUID()+"_"+a),o.classList.add("mo-item","js-mo-item"),e.fullWidth)o.classList.add("mo-fullwidth","js-mo-fullwidth");else if(r.randomFullWidth){const n=r.randomFullWidth===!0?.33:r.randomFullWidth;Math.random()<n&&o.classList.add("mo-fullwidth","js-mo-fullwidth")}return r.showBadge&&this._createBadge(o,a+1),r.showArrow&&this._createArrow(o),r.showBadge&&r.showCounterStyle==="counter"&&Array.from(s.querySelectorAll(".js-mo-item")).forEach((n,c)=>{const d=n.querySelector(".js-mo-badge");d&&(d.textContent=c+1)}),r.lastItemIdx=Array.from(s.children).length,h.set(s,r),this.refresh(),this._observeItems([o]),o.querySelectorAll("img").forEach(n=>{n.complete||n.addEventListener("load",this._resizeHandler,{once:!0})}),o}clear(){const e=this._getData();e&&(this._observer&&this._observer.disconnect(),this._adObserver&&this._adObserver.disconnect(),Array.from(this.element.children).forEach(t=>{(t.classList.contains("js-mo-item")||t.classList.contains("mo-ad-slot"))&&t.remove()}),e.lastItemIdx=0,e.adSlots&&(e._adRealCount=0))}destroy(){window.removeEventListener("resize",this._resizeHandler),this._observer&&(this._observer.disconnect(),this._observer=null),this._adObserver&&(this._adObserver.disconnect(),this._adObserver=null),Array.from(this.element.querySelectorAll(".mo-ad-slot")).forEach(e=>e.remove()),h.delete(this.element),f.instances.delete(this),this.element.style.removeProperty("--mo-card-border-radius"),this.element.style.removeProperty("--mo-avatar-size"),this.element.style.removeProperty("--mo-card-margin"),this.element.style.removeProperty("--mo-card-margin-inverted"),this.element.style.removeProperty("--mo-card-margin-fullwidth"),this.element.classList.remove("mo-timeline","mo-theme","mo-twocol","mo-animate","mo-animate-fade","mo-animate-slide"),Array.from(this.element.children).forEach(e=>{e.classList.remove("mo-item","js-mo-item","mo-inverted","js-mo-inverted","mo-offset","mo-fullwidth","js-mo-fullwidth","mo-visible","mo-filtered-out"),e.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach(t=>t.remove())})}filterByCategory(e){const t=this._getData();t&&(t._activeFilter=e==null||e===""||e==="all"?null:String(e),h.set(this.element,t),this._applyFilter(Array.from(this.element.querySelectorAll(".js-mo-item"))),this.refresh())}_applyFilter(e){const t=this._getData();if(!t)return;const s=t._activeFilter||null;e.forEach(r=>{if(!s)r.classList.remove("mo-filtered-out");else{const o=(r.dataset.categories||"").split(/\s+/).filter(Boolean);r.classList.toggle("mo-filtered-out",!o.includes(s))}})}_getData(){return h.get(this.element)}_setDivider(){const e=this._getData();e&&(e.col=e.columnCount[y()],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),o=r.slice(s);if(o.length!==0){if(o.forEach((i,a)=>{i.id||(i.id="moT"+crypto.randomUUID()+"_"+(a+s)),i.classList.add("mo-item","js-mo-item")}),this._setDivider(),t.randomFullWidth){const i=t.randomFullWidth===!0?.33:t.randomFullWidth;o.forEach(a=>{!a.classList.contains("mo-fullwidth")&&Math.random()<i&&a.classList.add("mo-fullwidth","js-mo-fullwidth")})}o.forEach((i,a)=>{t.showBadge&&this._createBadge(i,a+s+1),t.showArrow&&this._createArrow(i)}),t.lastItemIdx=r.length,h.set(e,t),this._applyFilter(o),this.refresh(),this._observeItems(o),this._injectAdSlots(o),o.forEach(i=>{i.querySelectorAll("img").forEach(a=>{a.complete||a.addEventListener("load",this._resizeHandler,{once:!0})})})}}_setPostPosition(e){if(e.classList.contains("mo-filtered-out"))return;if(e.classList.contains("mo-fullwidth")){e.classList.remove("mo-inverted","js-mo-inverted","mo-offset");return}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=w(e,".js-mo-inverted:not(.mo-filtered-out)")[0]||null,o=w(e,".js-mo-item:not(.js-mo-inverted):not(.mo-filtered-out)")[0]||null,i=v(o),a=v(r),n=v(e);let c=0,d=0;if(s>1){i.gppu>n.o+1&&(c=1),a.gppu>i.gppu&&(c=0);const m=e.previousElementSibling;m&&Math.abs(n.o-v(m).o)<40&&(d=1)}return{lr:c,badge_offset:d}}_createBadge(e,t){const s=this._getData(),r=document.createElement("span");if(r.className="mo-badge js-mo-badge",s.showCounterStyle==="none")r.style.opacity="0";else if(s.showCounterStyle==="image"){const o=document.createElement("img");o.className="mo-badge-icon",o.alt="",o.src=e.dataset.moIcon||C,r.appendChild(o)}else r.textContent=t;e.prepend(r)}_createItemElement(e){const t=document.createElement("li");e.icon&&(t.dataset.moIcon=e.icon),e.categories&&(t.dataset.categories=Array.isArray(e.categories)?e.categories.join(" "):String(e.categories));const s=document.createElement("div");s.className="mo-card";const r=this._getData();if(r&&typeof r.renderCard=="function")r.renderCard(e,s);else{if(e.banner){const i=document.createElement("div");i.className="mo-card-image";const a=document.createElement("img");if(a.className="mo-banner",a.src=e.banner,a.alt="",i.appendChild(a),e.avatar){const n=document.createElement("img");n.className="mo-avatar",n.src=e.avatar,n.alt="",i.appendChild(n)}s.appendChild(i)}const o=document.createElement("div");if(o.className="mo-card-body",e.title){const i=document.createElement("h3");i.textContent=e.title,o.appendChild(i)}if(e.meta){const i=document.createElement("p");i.className="mo-meta",i.textContent=e.meta,o.appendChild(i)}if(e.text){const i=document.createElement("p");i.textContent=e.text,o.appendChild(i)}s.appendChild(o)}return t.appendChild(s),t}_createArrow(e){const t=document.createElement("span");t.className="mo-arrow js-mo-arrow",e.prepend(t)}_injectAdSlots(e){const t=this._getData();if(!t||!t.adSlots||!e.length)return;const{mode:s,interval:r,style:o}=t.adSlots,i=o==="fullwidth",a=this.element;let n=!1;if(s==="every_n")e.forEach((c,d)=>{if((t._adRealCount+d+1)%r===0){const m=this._createAdSlot(i);c.after(m),m.dataset.moAdPosition=String(Array.from(a.children).indexOf(m)),this._adObserver&&this._adObserver.observe(m),i&&(n=!0)}});else if(s==="random"){let c=t._adRealCount%r,d=0;for(;d<e.length;){const m=r-c,u=e.slice(d,d+m);if(u.length===m){const E=u[Math.floor(Math.random()*u.length)],g=this._createAdSlot(i);E.after(g),g.dataset.moAdPosition=String(Array.from(a.children).indexOf(g)),this._adObserver&&this._adObserver.observe(g),i&&(n=!0),c=0}else c+=u.length;d+=m}}t._adRealCount+=e.length,n&&this.refresh()}_createAdSlot(e){const t=document.createElement("li");return t.className="mo-ad-slot",e&&t.classList.add("mo-fullwidth"),t}_observeItems(e){this._observer&&e.forEach(t=>{t.classList.contains("mo-visible")||this._observer.observe(t)})}};_(f,"instances",new Set);let p=f;exports.MoTimeline=p;exports.default=p;
+ */const m=new WeakMap,p={columnCount:{xs:1,sm:2,md:2,lg:2},showBadge:!1,showArrow:!1,theme:!1,showCounterStyle:"counter",cardBorderRadius:"8px",avatarSize:"50px",cardMargin:"0.5rem 1.25rem 0.5rem 0.5rem",cardMarginInverted:"0.5rem 0.5rem 0.5rem 1.25rem",cardMarginFullWidth:"0.5rem",randomFullWidth:0,animate:!1,renderCard:null,adSlots:null},A="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 y(){const l=window.innerWidth;return l<600?"xs":l<992?"sm":l<1200?"md":"lg"}function C(l,e=100){let t;return(...o)=>{clearTimeout(t),t=setTimeout(()=>l(...o),e)}}const f=class f{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=C(()=>this.refresh(),100),this._initialized=!1,this.init()}init(){const e=this.element;if(m.has(e)){this.refresh();return}const t=Object.assign({},this.settings,{lastItemIdx:0});if(m.set(e,t),f.instances.add(this),e.classList.add("mo-timeline"),t.theme&&e.classList.add("mo-theme"),e.style.setProperty("--mo-card-border-radius",t.cardBorderRadius),e.style.setProperty("--mo-avatar-size",t.avatarSize),e.style.setProperty("--mo-card-margin",t.cardMargin),e.style.setProperty("--mo-card-margin-inverted",t.cardMarginInverted),e.style.setProperty("--mo-card-margin-fullwidth",t.cardMarginFullWidth),t.animate){const o=t.animate===!0?"fade":t.animate;e.classList.add("mo-animate",`mo-animate-${o}`),this._observer=new IntersectionObserver(r=>{r.forEach(a=>{a.isIntersecting&&(a.target.classList.add("mo-visible"),this._observer.unobserve(a.target))})},{threshold:.1})}t.adSlots&&(t._adRealCount=0,typeof t.adSlots.onEnterViewport=="function"&&(this._adObserver=new IntersectionObserver(o=>{o.forEach(r=>{r.isIntersecting&&(this._adObserver.unobserve(r.target),t.adSlots.onEnterViewport(r.target,Number(r.target.dataset.moAdPosition)))})},{threshold:.5}))),this._initialized=!0,window.addEventListener("resize",this._resizeHandler),Array.from(e.children).length>0&&this._initItems()}refresh(){f.instances.forEach(e=>{const t=e.element,o=m.get(t);o&&(o.col=o.columnCount[y()],e._setDivider(),e._layout())})}initNewItems(){this._initItems()}addItems(e){typeof e=="string"&&(e=JSON.parse(e)),e.forEach(t=>this.element.appendChild(this._createItemElement(t))),this._initItems()}insertItem(e,t){const o=this.element,r=this._getData();if(!r)return;const a=this._createItemElement(e),s=Array.from(o.children).filter(n=>n.classList.contains("js-mo-item")),i=t==null?Math.floor(Math.random()*(s.length+1)):Math.max(0,Math.min(t,s.length));if(i>=s.length?o.appendChild(a):o.insertBefore(a,s[i]),a.id||(a.id="moT"+crypto.randomUUID()+"_"+i),a.classList.add("mo-item","js-mo-item"),e.fullWidth)a.classList.add("mo-fullwidth","js-mo-fullwidth");else if(r.randomFullWidth){const n=r.randomFullWidth===!0?.33:r.randomFullWidth;Math.random()<n&&a.classList.add("mo-fullwidth","js-mo-fullwidth")}return r.showBadge&&this._createBadge(a,i+1),r.showArrow&&this._createArrow(a),r.showBadge&&r.showCounterStyle==="counter"&&Array.from(o.querySelectorAll(".js-mo-item")).forEach((n,h)=>{const d=n.querySelector(".js-mo-badge");d&&(d.textContent=h+1)}),r.lastItemIdx=Array.from(o.children).length,m.set(o,r),this.refresh(),this._observeItems([a]),a.querySelectorAll("img").forEach(n=>{n.complete||n.addEventListener("load",this._resizeHandler,{once:!0})}),a}clear(){const e=this._getData();e&&(this._observer&&this._observer.disconnect(),this._adObserver&&this._adObserver.disconnect(),Array.from(this.element.children).forEach(t=>{(t.classList.contains("js-mo-item")||t.classList.contains("mo-ad-slot"))&&t.remove()}),e.lastItemIdx=0,e.adSlots&&(e._adRealCount=0))}destroy(){window.removeEventListener("resize",this._resizeHandler),this._observer&&(this._observer.disconnect(),this._observer=null),this._adObserver&&(this._adObserver.disconnect(),this._adObserver=null),Array.from(this.element.querySelectorAll(".mo-ad-slot")).forEach(e=>e.remove()),m.delete(this.element),f.instances.delete(this),this.element.style.removeProperty("--mo-card-border-radius"),this.element.style.removeProperty("--mo-avatar-size"),this.element.style.removeProperty("--mo-card-margin"),this.element.style.removeProperty("--mo-card-margin-inverted"),this.element.style.removeProperty("--mo-card-margin-fullwidth"),this.element.classList.remove("mo-timeline","mo-theme","mo-twocol","mo-animate","mo-animate-fade","mo-animate-slide"),Array.from(this.element.children).forEach(e=>{e.classList.remove("mo-item","js-mo-item","mo-inverted","js-mo-inverted","mo-offset","mo-fullwidth","js-mo-fullwidth","mo-visible","mo-filtered-out"),e.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach(t=>t.remove())})}filterByCategory(e){const t=this._getData();t&&(t._activeFilter=e==null||e===""||e==="all"?null:String(e),m.set(this.element,t),this._applyFilter(Array.from(this.element.querySelectorAll(".js-mo-item"))),this.refresh())}_applyFilter(e){const t=this._getData();if(!t)return;const o=t._activeFilter||null;e.forEach(r=>{if(!o)r.classList.remove("mo-filtered-out");else{const a=(r.dataset.categories||"").split(/\s+/).filter(Boolean);r.classList.toggle("mo-filtered-out",!a.includes(o))}})}_getData(){return m.get(this.element)}_setDivider(){const e=this._getData();e&&(e.col=e.columnCount[y()],this.element.classList.toggle("mo-twocol",e.col>1))}_initItems(){const e=this.element,t=this._getData();if(!t)return;const o=t.lastItemIdx,r=Array.from(e.children),a=r.slice(o);if(a.length!==0){if(a.forEach((s,i)=>{s.id||(s.id="moT"+crypto.randomUUID()+"_"+(i+o)),s.classList.add("mo-item","js-mo-item")}),this._setDivider(),t.randomFullWidth){const s=t.randomFullWidth===!0?.33:t.randomFullWidth;a.forEach(i=>{!i.classList.contains("mo-fullwidth")&&Math.random()<s&&i.classList.add("mo-fullwidth","js-mo-fullwidth")})}a.forEach((s,i)=>{t.showBadge&&this._createBadge(s,i+o+1),t.showArrow&&this._createArrow(s)}),t.lastItemIdx=r.length,m.set(e,t),this._applyFilter(a),this.refresh(),this._observeItems(a),this._injectAdSlots(a),a.forEach(s=>{s.querySelectorAll("img").forEach(i=>{i.complete||i.addEventListener("load",this._resizeHandler,{once:!0})})})}}_layout(){const e=this.element,t=this._getData();if(!t)return;if(t.col<=1){Array.from(e.children).forEach(s=>{s.classList.remove("mo-inverted","js-mo-inverted","mo-offset")});return}let o=0,r=0,a=-1/0;Array.from(e.children).forEach(s=>{if(s.classList.contains("mo-filtered-out"))return;if(s.classList.contains("mo-fullwidth")){s.classList.remove("mo-inverted","js-mo-inverted","mo-offset"),o=r=Math.max(o,r)+s.offsetHeight,a=-1/0;return}const i=Math.min(o,r),n=o<=r;s.classList.toggle("mo-inverted",!n),s.classList.toggle("js-mo-inverted",!n),s.classList.toggle("mo-offset",Math.abs(i-a)<40),n?o+=s.offsetHeight:r+=s.offsetHeight,a=i})}_createBadge(e,t){const o=this._getData(),r=document.createElement("span");if(r.className="mo-badge js-mo-badge",o.showCounterStyle==="none")r.style.opacity="0";else if(o.showCounterStyle==="image"){const a=document.createElement("img");a.className="mo-badge-icon",a.alt="",a.src=e.dataset.moIcon||A,r.appendChild(a)}else r.textContent=t;e.prepend(r)}_createItemElement(e){const t=document.createElement("li");e.icon&&(t.dataset.moIcon=e.icon),e.categories&&(t.dataset.categories=Array.isArray(e.categories)?e.categories.join(" "):String(e.categories));const o=document.createElement("div");o.className="mo-card";const r=this._getData();if(r&&typeof r.renderCard=="function")r.renderCard(e,o);else{if(e.banner){const s=document.createElement("div");s.className="mo-card-image";const i=document.createElement("img");if(i.className="mo-banner",i.src=e.banner,i.alt="",s.appendChild(i),e.avatar){const n=document.createElement("img");n.className="mo-avatar",n.src=e.avatar,n.alt="",s.appendChild(n)}o.appendChild(s)}const a=document.createElement("div");if(a.className="mo-card-body",e.title){const s=document.createElement("h3");s.textContent=e.title,a.appendChild(s)}if(e.meta){const s=document.createElement("p");s.className="mo-meta",s.textContent=e.meta,a.appendChild(s)}if(e.text){const s=document.createElement("p");s.textContent=e.text,a.appendChild(s)}o.appendChild(a)}return t.appendChild(o),t}_createArrow(e){const t=document.createElement("span");t.className="mo-arrow js-mo-arrow",e.prepend(t)}_injectAdSlots(e){const t=this._getData();if(!t||!t.adSlots||!e.length)return;const{mode:o,interval:r,style:a}=t.adSlots,s=a==="fullwidth",i=this.element;let n=!1;if(o==="every_n")e.forEach((h,d)=>{if((t._adRealCount+d+1)%r===0){const c=this._createAdSlot(s);h.after(c),c.dataset.moAdPosition=String(Array.from(i.children).indexOf(c)),this._adObserver&&this._adObserver.observe(c),s&&(n=!0)}});else if(o==="random"){let h=t._adRealCount%r,d=0;for(;d<e.length;){const c=r-h,u=e.slice(d,d+c);if(u.length===c){const w=u[Math.floor(Math.random()*u.length)],g=this._createAdSlot(s);w.after(g),g.dataset.moAdPosition=String(Array.from(i.children).indexOf(g)),this._adObserver&&this._adObserver.observe(g),s&&(n=!0),h=0}else h+=u.length;d+=c}}t._adRealCount+=e.length,n&&this.refresh()}_createAdSlot(e){const t=document.createElement("li");return t.className="mo-ad-slot",e&&t.classList.add("mo-fullwidth"),t}_observeItems(e){this._observer&&e.forEach(t=>{t.classList.contains("mo-visible")||this._observer.observe(t)})}};_(f,"instances",new Set);let v=f;exports.MoTimeline=v;exports.default=v;

package/dist/moTimeline.css

@@ -1,3 +1,3 @@
 /*!
- * moTimeline v2.13.0 — CSS
+ * moTimeline v2.13.2 — 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-timeline.mo-twocol>.mo-item.mo-fullwidth{clear:both;float:none;width:100%}.mo-theme>.mo-item.mo-fullwidth .mo-card{margin:var(--mo-card-margin-fullwidth, .5rem)}.mo-timeline.mo-twocol>.mo-item.mo-fullwidth .mo-badge,.mo-timeline.mo-twocol>.mo-item.mo-fullwidth .mo-arrow{display:none}.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;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-arrow-color: #fff}.mo-theme>.mo-item .mo-card{background:#fff;border-radius:var(--mo-card-border-radius, 8px);box-shadow:0 2px 14px #0000001a;margin:var(--mo-card-margin, .5rem 1.25rem .5rem .5rem);position:relative}.mo-theme>.mo-item.mo-inverted .mo-card{margin:var(--mo-card-margin-inverted, .5rem .5rem .5rem 1.25rem)}.mo-theme>.mo-item .mo-banner{border-radius:var(--mo-card-border-radius, 8px) var(--mo-card-border-radius, 8px) 0 0;display:block;max-height:240px;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:calc(var(--mo-avatar-size, 50px) * -.44);box-shadow:0 2px 8px #0000002e;height:var(--mo-avatar-size, 50px);object-fit:cover;position:absolute;right:14px;width:var(--mo-avatar-size, 50px);z-index:1}.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:var(--mo-arrow-color);right:12px}.mo-theme.mo-twocol>.mo-item.mo-inverted .mo-arrow{border-right-color:var(--mo-arrow-color);left:12px}.mo-theme .mo-badge{background:#fff;border:2px solid var(--mo-line-color);box-shadow:0 2px 6px #0000001a;color:#374151}.mo-timeline.mo-animate>.mo-item{transition:opacity var(--mo-animate-duration, .5s) ease,transform var(--mo-animate-duration, .5s) ease}.mo-timeline.mo-animate-fade>.mo-item{opacity:0}.mo-timeline.mo-animate-slide>.mo-item:not(.mo-inverted){opacity:0;transform:translate(-40px)}.mo-timeline.mo-animate-slide>.mo-item.mo-inverted{opacity:0;transform:translate(40px)}.mo-timeline:not(.mo-twocol).mo-animate-slide>.mo-item{transform:translate(-40px)}.mo-timeline.mo-animate>.mo-item.mo-visible{opacity:1;transform:translate(0)}.mo-timeline>.mo-item.mo-ad-slot{min-height:100px}.mo-timeline>.mo-item.mo-filtered-out{display:none}

package/dist/moTimeline.js

@@ -1,13 +1,13 @@
-var A = Object.defineProperty;
-var C = (l, e, t) => e in l ? A(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
-var v = (l, e, t) => C(l, typeof e != "symbol" ? e + "" : e, t);
+var b = Object.defineProperty;
+var E = (l, e, t) => e in l ? b(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
+var v = (l, e, t) => E(l, typeof e != "symbol" ? e + "" : e, t);
 /*!
- * moTimeline v2.13.0
+ * moTimeline v2.13.2
  * Responsive two-column timeline layout library
  * https://github.com/MattOpen/moTimeline
  * MIT License
  */
-const h = /* @__PURE__ */ new WeakMap(), _ = {
+const m = /* @__PURE__ */ new WeakMap(), _ = {
   columnCount: { xs: 1, sm: 2, md: 2, lg: 2 },
   showBadge: !1,
   showArrow: !1,
@@ -27,63 +27,47 @@ const h = /* @__PURE__ */ new WeakMap(), _ = {
   // (item, cardEl) => void — custom card renderer; skips built-in HTML
   adSlots: null
   // { mode, interval, style, onEnterViewport } — see docs
-}, S = "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 b() {
+}, A = "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 p() {
   const l = window.innerWidth;
   return l < 600 ? "xs" : l < 992 ? "sm" : l < 1200 ? "md" : "lg";
 }
-function L(l, e = 100) {
+function C(l, e = 100) {
   let t;
-  return (...s) => {
-    clearTimeout(t), t = setTimeout(() => l(...s), e);
+  return (...o) => {
+    clearTimeout(t), t = setTimeout(() => l(...o), e);
   };
 }
-function p(l) {
-  return l ? {
-    o: l.offsetTop,
-    h: l.offsetHeight,
-    gppu: l.offsetTop + l.offsetHeight
-  } : { o: 0, h: 0, gppu: 0 };
-}
-function w(l, e) {
-  const t = [];
-  let s = l.previousElementSibling;
-  for (; s; )
-    (!e || s.matches(e)) && t.push(s), s = s.previousElementSibling;
-  return t;
-}
 const f = class f {
   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({}, _, t), this.settings.columnCount = Object.assign({}, _.columnCount, t.columnCount), this._resizeHandler = L(() => this.refresh(), 100), this._initialized = !1, this.init();
+    this.element = e, this.settings = Object.assign({}, _, t), this.settings.columnCount = Object.assign({}, _.columnCount, t.columnCount), this._resizeHandler = C(() => this.refresh(), 100), this._initialized = !1, this.init();
   }
   init() {
     const e = this.element;
-    if (h.has(e)) {
+    if (m.has(e)) {
       this.refresh();
       return;
     }
     const t = Object.assign({}, this.settings, { lastItemIdx: 0 });
-    if (h.set(e, t), f.instances.add(this), e.classList.add("mo-timeline"), t.theme && e.classList.add("mo-theme"), e.style.setProperty("--mo-card-border-radius", t.cardBorderRadius), e.style.setProperty("--mo-avatar-size", t.avatarSize), e.style.setProperty("--mo-card-margin", t.cardMargin), e.style.setProperty("--mo-card-margin-inverted", t.cardMarginInverted), e.style.setProperty("--mo-card-margin-fullwidth", t.cardMarginFullWidth), t.animate) {
-      const s = t.animate === !0 ? "fade" : t.animate;
-      e.classList.add("mo-animate", `mo-animate-${s}`), this._observer = new IntersectionObserver((r) => {
-        r.forEach((o) => {
-          o.isIntersecting && (o.target.classList.add("mo-visible"), this._observer.unobserve(o.target));
+    if (m.set(e, t), f.instances.add(this), e.classList.add("mo-timeline"), t.theme && e.classList.add("mo-theme"), e.style.setProperty("--mo-card-border-radius", t.cardBorderRadius), e.style.setProperty("--mo-avatar-size", t.avatarSize), e.style.setProperty("--mo-card-margin", t.cardMargin), e.style.setProperty("--mo-card-margin-inverted", t.cardMarginInverted), e.style.setProperty("--mo-card-margin-fullwidth", t.cardMarginFullWidth), t.animate) {
+      const o = t.animate === !0 ? "fade" : t.animate;
+      e.classList.add("mo-animate", `mo-animate-${o}`), this._observer = new IntersectionObserver((r) => {
+        r.forEach((a) => {
+          a.isIntersecting && (a.target.classList.add("mo-visible"), this._observer.unobserve(a.target));
         });
       }, { threshold: 0.1 });
     }
-    t.adSlots && (t._adRealCount = 0, typeof t.adSlots.onEnterViewport == "function" && (this._adObserver = new IntersectionObserver((s) => {
-      s.forEach((r) => {
+    t.adSlots && (t._adRealCount = 0, typeof t.adSlots.onEnterViewport == "function" && (this._adObserver = new IntersectionObserver((o) => {
+      o.forEach((r) => {
         r.isIntersecting && (this._adObserver.unobserve(r.target), t.adSlots.onEnterViewport(r.target, Number(r.target.dataset.moAdPosition)));
       });
     }, { threshold: 0.5 }))), this._initialized = !0, window.addEventListener("resize", this._resizeHandler), Array.from(e.children).length > 0 && this._initItems();
   }
   refresh() {
     f.instances.forEach((e) => {
-      const t = e.element, s = h.get(t);
-      s && (s.col = s.columnCount[b()], e._setDivider(), Array.from(t.children).forEach((r) => {
-        e._setPostPosition(r);
-      }));
+      const t = e.element, o = m.get(t);
+      o && (o.col = o.columnCount[p()], e._setDivider(), e._layout());
     });
   }
   initNewItems() {
@@ -109,21 +93,21 @@ const f = class f {
    * @returns {HTMLElement} the inserted <li> element
    */
   insertItem(e, t) {
-    const s = this.element, r = this._getData();
+    const o = this.element, r = this._getData();
     if (!r) return;
-    const o = this._createItemElement(e), i = Array.from(s.children).filter((n) => n.classList.contains("js-mo-item")), a = t == null ? Math.floor(Math.random() * (i.length + 1)) : Math.max(0, Math.min(t, i.length));
-    if (a >= i.length ? s.appendChild(o) : s.insertBefore(o, i[a]), o.id || (o.id = "moT" + crypto.randomUUID() + "_" + a), o.classList.add("mo-item", "js-mo-item"), e.fullWidth)
-      o.classList.add("mo-fullwidth", "js-mo-fullwidth");
+    const a = this._createItemElement(e), s = Array.from(o.children).filter((n) => n.classList.contains("js-mo-item")), i = t == null ? Math.floor(Math.random() * (s.length + 1)) : Math.max(0, Math.min(t, s.length));
+    if (i >= s.length ? o.appendChild(a) : o.insertBefore(a, s[i]), a.id || (a.id = "moT" + crypto.randomUUID() + "_" + i), a.classList.add("mo-item", "js-mo-item"), e.fullWidth)
+      a.classList.add("mo-fullwidth", "js-mo-fullwidth");
     else if (r.randomFullWidth) {
       const n = r.randomFullWidth === !0 ? 0.33 : r.randomFullWidth;
-      Math.random() < n && o.classList.add("mo-fullwidth", "js-mo-fullwidth");
+      Math.random() < n && a.classList.add("mo-fullwidth", "js-mo-fullwidth");
     }
-    return r.showBadge && this._createBadge(o, a + 1), r.showArrow && this._createArrow(o), r.showBadge && r.showCounterStyle === "counter" && Array.from(s.querySelectorAll(".js-mo-item")).forEach((n, c) => {
+    return r.showBadge && this._createBadge(a, i + 1), r.showArrow && this._createArrow(a), r.showBadge && r.showCounterStyle === "counter" && Array.from(o.querySelectorAll(".js-mo-item")).forEach((n, h) => {
       const d = n.querySelector(".js-mo-badge");
-      d && (d.textContent = c + 1);
-    }), r.lastItemIdx = Array.from(s.children).length, h.set(s, r), this.refresh(), this._observeItems([o]), o.querySelectorAll("img").forEach((n) => {
+      d && (d.textContent = h + 1);
+    }), r.lastItemIdx = Array.from(o.children).length, m.set(o, r), this.refresh(), this._observeItems([a]), a.querySelectorAll("img").forEach((n) => {
       n.complete || n.addEventListener("load", this._resizeHandler, { once: !0 });
-    }), o;
+    }), a;
   }
   clear() {
     const e = this._getData();
@@ -132,7 +116,7 @@ const f = class f {
     }), e.lastItemIdx = 0, e.adSlots && (e._adRealCount = 0));
   }
   destroy() {
-    window.removeEventListener("resize", this._resizeHandler), this._observer && (this._observer.disconnect(), this._observer = null), this._adObserver && (this._adObserver.disconnect(), this._adObserver = null), Array.from(this.element.querySelectorAll(".mo-ad-slot")).forEach((e) => e.remove()), h.delete(this.element), f.instances.delete(this), this.element.style.removeProperty("--mo-card-border-radius"), this.element.style.removeProperty("--mo-avatar-size"), this.element.style.removeProperty("--mo-card-margin"), this.element.style.removeProperty("--mo-card-margin-inverted"), this.element.style.removeProperty("--mo-card-margin-fullwidth"), this.element.classList.remove("mo-timeline", "mo-theme", "mo-twocol", "mo-animate", "mo-animate-fade", "mo-animate-slide"), Array.from(this.element.children).forEach((e) => {
+    window.removeEventListener("resize", this._resizeHandler), this._observer && (this._observer.disconnect(), this._observer = null), this._adObserver && (this._adObserver.disconnect(), this._adObserver = null), Array.from(this.element.querySelectorAll(".mo-ad-slot")).forEach((e) => e.remove()), m.delete(this.element), f.instances.delete(this), this.element.style.removeProperty("--mo-card-border-radius"), this.element.style.removeProperty("--mo-avatar-size"), this.element.style.removeProperty("--mo-card-margin"), this.element.style.removeProperty("--mo-card-margin-inverted"), this.element.style.removeProperty("--mo-card-margin-fullwidth"), this.element.classList.remove("mo-timeline", "mo-theme", "mo-twocol", "mo-animate", "mo-animate-fade", "mo-animate-slide"), Array.from(this.element.children).forEach((e) => {
       e.classList.remove("mo-item", "js-mo-item", "mo-inverted", "js-mo-inverted", "mo-offset", "mo-fullwidth", "js-mo-fullwidth", "mo-visible", "mo-filtered-out"), e.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach((t) => t.remove());
     });
   }
@@ -145,80 +129,78 @@ const f = class f {
    */
   filterByCategory(e) {
     const t = this._getData();
-    t && (t._activeFilter = e == null || e === "" || e === "all" ? null : String(e), h.set(this.element, t), this._applyFilter(Array.from(this.element.querySelectorAll(".js-mo-item"))), this.refresh());
+    t && (t._activeFilter = e == null || e === "" || e === "all" ? null : String(e), m.set(this.element, t), this._applyFilter(Array.from(this.element.querySelectorAll(".js-mo-item"))), this.refresh());
   }
   // ─── Private ────────────────────────────────────────────────────────────────
   _applyFilter(e) {
     const t = this._getData();
     if (!t) return;
-    const s = t._activeFilter || null;
+    const o = t._activeFilter || null;
     e.forEach((r) => {
-      if (!s)
+      if (!o)
         r.classList.remove("mo-filtered-out");
       else {
-        const o = (r.dataset.categories || "").split(/\s+/).filter(Boolean);
-        r.classList.toggle("mo-filtered-out", !o.includes(s));
+        const a = (r.dataset.categories || "").split(/\s+/).filter(Boolean);
+        r.classList.toggle("mo-filtered-out", !a.includes(o));
       }
     });
   }
   _getData() {
-    return h.get(this.element);
+    return m.get(this.element);
   }
   _setDivider() {
     const e = this._getData();
-    e && (e.col = e.columnCount[b()], this.element.classList.toggle("mo-twocol", e.col > 1));
+    e && (e.col = e.columnCount[p()], 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), o = r.slice(s);
-    if (o.length !== 0) {
-      if (o.forEach((i, a) => {
-        i.id || (i.id = "moT" + crypto.randomUUID() + "_" + (a + s)), i.classList.add("mo-item", "js-mo-item");
+    const o = t.lastItemIdx, r = Array.from(e.children), a = r.slice(o);
+    if (a.length !== 0) {
+      if (a.forEach((s, i) => {
+        s.id || (s.id = "moT" + crypto.randomUUID() + "_" + (i + o)), s.classList.add("mo-item", "js-mo-item");
       }), this._setDivider(), t.randomFullWidth) {
-        const i = t.randomFullWidth === !0 ? 0.33 : t.randomFullWidth;
-        o.forEach((a) => {
-          !a.classList.contains("mo-fullwidth") && Math.random() < i && a.classList.add("mo-fullwidth", "js-mo-fullwidth");
+        const s = t.randomFullWidth === !0 ? 0.33 : t.randomFullWidth;
+        a.forEach((i) => {
+          !i.classList.contains("mo-fullwidth") && Math.random() < s && i.classList.add("mo-fullwidth", "js-mo-fullwidth");
         });
       }
-      o.forEach((i, a) => {
-        t.showBadge && this._createBadge(i, a + s + 1), t.showArrow && this._createArrow(i);
-      }), t.lastItemIdx = r.length, h.set(e, t), this._applyFilter(o), this.refresh(), this._observeItems(o), this._injectAdSlots(o), o.forEach((i) => {
-        i.querySelectorAll("img").forEach((a) => {
-          a.complete || a.addEventListener("load", this._resizeHandler, { once: !0 });
+      a.forEach((s, i) => {
+        t.showBadge && this._createBadge(s, i + o + 1), t.showArrow && this._createArrow(s);
+      }), t.lastItemIdx = r.length, m.set(e, t), this._applyFilter(a), this.refresh(), this._observeItems(a), this._injectAdSlots(a), a.forEach((s) => {
+        s.querySelectorAll("img").forEach((i) => {
+          i.complete || i.addEventListener("load", this._resizeHandler, { once: !0 });
         });
       });
     }
   }
-  _setPostPosition(e) {
-    if (e.classList.contains("mo-filtered-out")) return;
-    if (e.classList.contains("mo-fullwidth")) {
-      e.classList.remove("mo-inverted", "js-mo-inverted", "mo-offset");
+  _layout() {
+    const e = this.element, t = this._getData();
+    if (!t) return;
+    if (t.col <= 1) {
+      Array.from(e.children).forEach((s) => {
+        s.classList.remove("mo-inverted", "js-mo-inverted", "mo-offset");
+      });
       return;
     }
-    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 = w(e, ".js-mo-inverted:not(.mo-filtered-out)")[0] || null, o = w(e, ".js-mo-item:not(.js-mo-inverted):not(.mo-filtered-out)")[0] || null, i = p(o), a = p(r), n = p(e);
-    let c = 0, d = 0;
-    if (s > 1) {
-      i.gppu > n.o + 1 && (c = 1), a.gppu > i.gppu && (c = 0);
-      const m = e.previousElementSibling;
-      m && Math.abs(n.o - p(m).o) < 40 && (d = 1);
-    }
-    return { lr: c, badge_offset: d };
+    let o = 0, r = 0, a = -1 / 0;
+    Array.from(e.children).forEach((s) => {
+      if (s.classList.contains("mo-filtered-out")) return;
+      if (s.classList.contains("mo-fullwidth")) {
+        s.classList.remove("mo-inverted", "js-mo-inverted", "mo-offset"), o = r = Math.max(o, r) + s.offsetHeight, a = -1 / 0;
+        return;
+      }
+      const i = Math.min(o, r), n = o <= r;
+      s.classList.toggle("mo-inverted", !n), s.classList.toggle("js-mo-inverted", !n), s.classList.toggle("mo-offset", Math.abs(i - a) < 40), n ? o += s.offsetHeight : r += s.offsetHeight, a = i;
+    });
   }
   _createBadge(e, t) {
-    const s = this._getData(), r = document.createElement("span");
-    if (r.className = "mo-badge js-mo-badge", s.showCounterStyle === "none")
+    const o = this._getData(), r = document.createElement("span");
+    if (r.className = "mo-badge js-mo-badge", o.showCounterStyle === "none")
       r.style.opacity = "0";
-    else if (s.showCounterStyle === "image") {
-      const o = document.createElement("img");
-      o.className = "mo-badge-icon", o.alt = "", o.src = e.dataset.moIcon || S, r.appendChild(o);
+    else if (o.showCounterStyle === "image") {
+      const a = document.createElement("img");
+      a.className = "mo-badge-icon", a.alt = "", a.src = e.dataset.moIcon || A, r.appendChild(a);
     } else
       r.textContent = t;
     e.prepend(r);
@@ -226,38 +208,38 @@ const f = class f {
   _createItemElement(e) {
     const t = document.createElement("li");
     e.icon && (t.dataset.moIcon = e.icon), e.categories && (t.dataset.categories = Array.isArray(e.categories) ? e.categories.join(" ") : String(e.categories));
-    const s = document.createElement("div");
-    s.className = "mo-card";
+    const o = document.createElement("div");
+    o.className = "mo-card";
     const r = this._getData();
     if (r && typeof r.renderCard == "function")
-      r.renderCard(e, s);
+      r.renderCard(e, o);
     else {
       if (e.banner) {
-        const i = document.createElement("div");
-        i.className = "mo-card-image";
-        const a = document.createElement("img");
-        if (a.className = "mo-banner", a.src = e.banner, a.alt = "", i.appendChild(a), e.avatar) {
+        const s = document.createElement("div");
+        s.className = "mo-card-image";
+        const i = document.createElement("img");
+        if (i.className = "mo-banner", i.src = e.banner, i.alt = "", s.appendChild(i), e.avatar) {
           const n = document.createElement("img");
-          n.className = "mo-avatar", n.src = e.avatar, n.alt = "", i.appendChild(n);
+          n.className = "mo-avatar", n.src = e.avatar, n.alt = "", s.appendChild(n);
         }
-        s.appendChild(i);
+        o.appendChild(s);
       }
-      const o = document.createElement("div");
-      if (o.className = "mo-card-body", e.title) {
-        const i = document.createElement("h3");
-        i.textContent = e.title, o.appendChild(i);
+      const a = document.createElement("div");
+      if (a.className = "mo-card-body", e.title) {
+        const s = document.createElement("h3");
+        s.textContent = e.title, a.appendChild(s);
       }
       if (e.meta) {
-        const i = document.createElement("p");
-        i.className = "mo-meta", i.textContent = e.meta, o.appendChild(i);
+        const s = document.createElement("p");
+        s.className = "mo-meta", s.textContent = e.meta, a.appendChild(s);
       }
       if (e.text) {
-        const i = document.createElement("p");
-        i.textContent = e.text, o.appendChild(i);
+        const s = document.createElement("p");
+        s.textContent = e.text, a.appendChild(s);
       }
-      s.appendChild(o);
+      o.appendChild(a);
     }
-    return t.appendChild(s), t;
+    return t.appendChild(o), t;
   }
   _createArrow(e) {
     const t = document.createElement("span");
@@ -266,25 +248,25 @@ const f = class f {
   _injectAdSlots(e) {
     const t = this._getData();
     if (!t || !t.adSlots || !e.length) return;
-    const { mode: s, interval: r, style: o } = t.adSlots, i = o === "fullwidth", a = this.element;
+    const { mode: o, interval: r, style: a } = t.adSlots, s = a === "fullwidth", i = this.element;
     let n = !1;
-    if (s === "every_n")
-      e.forEach((c, d) => {
+    if (o === "every_n")
+      e.forEach((h, d) => {
         if ((t._adRealCount + d + 1) % r === 0) {
-          const m = this._createAdSlot(i);
-          c.after(m), m.dataset.moAdPosition = String(Array.from(a.children).indexOf(m)), this._adObserver && this._adObserver.observe(m), i && (n = !0);
+          const c = this._createAdSlot(s);
+          h.after(c), c.dataset.moAdPosition = String(Array.from(i.children).indexOf(c)), this._adObserver && this._adObserver.observe(c), s && (n = !0);
         }
       });
-    else if (s === "random") {
-      let c = t._adRealCount % r, d = 0;
+    else if (o === "random") {
+      let h = t._adRealCount % r, d = 0;
       for (; d < e.length; ) {
-        const m = r - c, u = e.slice(d, d + m);
-        if (u.length === m) {
-          const E = u[Math.floor(Math.random() * u.length)], g = this._createAdSlot(i);
-          E.after(g), g.dataset.moAdPosition = String(Array.from(a.children).indexOf(g)), this._adObserver && this._adObserver.observe(g), i && (n = !0), c = 0;
+        const c = r - h, u = e.slice(d, d + c);
+        if (u.length === c) {
+          const w = u[Math.floor(Math.random() * u.length)], g = this._createAdSlot(s);
+          w.after(g), g.dataset.moAdPosition = String(Array.from(i.children).indexOf(g)), this._adObserver && this._adObserver.observe(g), s && (n = !0), h = 0;
         } else
-          c += u.length;
-        d += m;
+          h += u.length;
+        d += c;
       }
     }
     t._adRealCount += e.length, n && this.refresh();

package/dist/moTimeline.umd.js

@@ -1,6 +1,6 @@
-(function(d,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(d=typeof globalThis<"u"?globalThis:d||self,n(d.MoTimeline={}))})(this,function(d){"use strict";var L=Object.defineProperty;var I=(d,n,u)=>n in d?L(d,n,{enumerable:!0,configurable:!0,writable:!0,value:u}):d[n]=u;var E=(d,n,u)=>I(d,typeof n!="symbol"?n+"":n,u);/*!
- * moTimeline v2.13.0
+(function(d,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(d=typeof globalThis<"u"?globalThis:d||self,l(d.MoTimeline={}))})(this,function(d){"use strict";var C=Object.defineProperty;var S=(d,l,h)=>l in d?C(d,l,{enumerable:!0,configurable:!0,writable:!0,value:h}):d[l]=h;var w=(d,l,h)=>S(d,typeof l!="symbol"?l+"":l,h);/*!
+ * moTimeline v2.13.2
  * Responsive two-column timeline layout library
  * https://github.com/MattOpen/moTimeline
  * MIT License
- */const n=new WeakMap,u={columnCount:{xs:1,sm:2,md:2,lg:2},showBadge:!1,showArrow:!1,theme:!1,showCounterStyle:"counter",cardBorderRadius:"8px",avatarSize:"50px",cardMargin:"0.5rem 1.25rem 0.5rem 0.5rem",cardMarginInverted:"0.5rem 0.5rem 0.5rem 1.25rem",cardMarginFullWidth:"0.5rem",randomFullWidth:0,animate:!1,renderCard:null,adSlots:null},A="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 y(){const c=window.innerWidth;return c<600?"xs":c<992?"sm":c<1200?"md":"lg"}function S(c,e=100){let t;return(...s)=>{clearTimeout(t),t=setTimeout(()=>c(...s),e)}}function p(c){return c?{o:c.offsetTop,h:c.offsetHeight,gppu:c.offsetTop+c.offsetHeight}:{o:0,h:0,gppu:0}}function w(c,e){const t=[];let s=c.previousElementSibling;for(;s;)(!e||s.matches(e))&&t.push(s),s=s.previousElementSibling;return t}const g=class g{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({},u,t),this.settings.columnCount=Object.assign({},u.columnCount,t.columnCount),this._resizeHandler=S(()=>this.refresh(),100),this._initialized=!1,this.init()}init(){const e=this.element;if(n.has(e)){this.refresh();return}const t=Object.assign({},this.settings,{lastItemIdx:0});if(n.set(e,t),g.instances.add(this),e.classList.add("mo-timeline"),t.theme&&e.classList.add("mo-theme"),e.style.setProperty("--mo-card-border-radius",t.cardBorderRadius),e.style.setProperty("--mo-avatar-size",t.avatarSize),e.style.setProperty("--mo-card-margin",t.cardMargin),e.style.setProperty("--mo-card-margin-inverted",t.cardMarginInverted),e.style.setProperty("--mo-card-margin-fullwidth",t.cardMarginFullWidth),t.animate){const s=t.animate===!0?"fade":t.animate;e.classList.add("mo-animate",`mo-animate-${s}`),this._observer=new IntersectionObserver(r=>{r.forEach(o=>{o.isIntersecting&&(o.target.classList.add("mo-visible"),this._observer.unobserve(o.target))})},{threshold:.1})}t.adSlots&&(t._adRealCount=0,typeof t.adSlots.onEnterViewport=="function"&&(this._adObserver=new IntersectionObserver(s=>{s.forEach(r=>{r.isIntersecting&&(this._adObserver.unobserve(r.target),t.adSlots.onEnterViewport(r.target,Number(r.target.dataset.moAdPosition)))})},{threshold:.5}))),this._initialized=!0,window.addEventListener("resize",this._resizeHandler),Array.from(e.children).length>0&&this._initItems()}refresh(){g.instances.forEach(e=>{const t=e.element,s=n.get(t);s&&(s.col=s.columnCount[y()],e._setDivider(),Array.from(t.children).forEach(r=>{e._setPostPosition(r)}))})}initNewItems(){this._initItems()}addItems(e){typeof e=="string"&&(e=JSON.parse(e)),e.forEach(t=>this.element.appendChild(this._createItemElement(t))),this._initItems()}insertItem(e,t){const s=this.element,r=this._getData();if(!r)return;const o=this._createItemElement(e),i=Array.from(s.children).filter(l=>l.classList.contains("js-mo-item")),a=t==null?Math.floor(Math.random()*(i.length+1)):Math.max(0,Math.min(t,i.length));if(a>=i.length?s.appendChild(o):s.insertBefore(o,i[a]),o.id||(o.id="moT"+crypto.randomUUID()+"_"+a),o.classList.add("mo-item","js-mo-item"),e.fullWidth)o.classList.add("mo-fullwidth","js-mo-fullwidth");else if(r.randomFullWidth){const l=r.randomFullWidth===!0?.33:r.randomFullWidth;Math.random()<l&&o.classList.add("mo-fullwidth","js-mo-fullwidth")}return r.showBadge&&this._createBadge(o,a+1),r.showArrow&&this._createArrow(o),r.showBadge&&r.showCounterStyle==="counter"&&Array.from(s.querySelectorAll(".js-mo-item")).forEach((l,h)=>{const m=l.querySelector(".js-mo-badge");m&&(m.textContent=h+1)}),r.lastItemIdx=Array.from(s.children).length,n.set(s,r),this.refresh(),this._observeItems([o]),o.querySelectorAll("img").forEach(l=>{l.complete||l.addEventListener("load",this._resizeHandler,{once:!0})}),o}clear(){const e=this._getData();e&&(this._observer&&this._observer.disconnect(),this._adObserver&&this._adObserver.disconnect(),Array.from(this.element.children).forEach(t=>{(t.classList.contains("js-mo-item")||t.classList.contains("mo-ad-slot"))&&t.remove()}),e.lastItemIdx=0,e.adSlots&&(e._adRealCount=0))}destroy(){window.removeEventListener("resize",this._resizeHandler),this._observer&&(this._observer.disconnect(),this._observer=null),this._adObserver&&(this._adObserver.disconnect(),this._adObserver=null),Array.from(this.element.querySelectorAll(".mo-ad-slot")).forEach(e=>e.remove()),n.delete(this.element),g.instances.delete(this),this.element.style.removeProperty("--mo-card-border-radius"),this.element.style.removeProperty("--mo-avatar-size"),this.element.style.removeProperty("--mo-card-margin"),this.element.style.removeProperty("--mo-card-margin-inverted"),this.element.style.removeProperty("--mo-card-margin-fullwidth"),this.element.classList.remove("mo-timeline","mo-theme","mo-twocol","mo-animate","mo-animate-fade","mo-animate-slide"),Array.from(this.element.children).forEach(e=>{e.classList.remove("mo-item","js-mo-item","mo-inverted","js-mo-inverted","mo-offset","mo-fullwidth","js-mo-fullwidth","mo-visible","mo-filtered-out"),e.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach(t=>t.remove())})}filterByCategory(e){const t=this._getData();t&&(t._activeFilter=e==null||e===""||e==="all"?null:String(e),n.set(this.element,t),this._applyFilter(Array.from(this.element.querySelectorAll(".js-mo-item"))),this.refresh())}_applyFilter(e){const t=this._getData();if(!t)return;const s=t._activeFilter||null;e.forEach(r=>{if(!s)r.classList.remove("mo-filtered-out");else{const o=(r.dataset.categories||"").split(/\s+/).filter(Boolean);r.classList.toggle("mo-filtered-out",!o.includes(s))}})}_getData(){return n.get(this.element)}_setDivider(){const e=this._getData();e&&(e.col=e.columnCount[y()],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),o=r.slice(s);if(o.length!==0){if(o.forEach((i,a)=>{i.id||(i.id="moT"+crypto.randomUUID()+"_"+(a+s)),i.classList.add("mo-item","js-mo-item")}),this._setDivider(),t.randomFullWidth){const i=t.randomFullWidth===!0?.33:t.randomFullWidth;o.forEach(a=>{!a.classList.contains("mo-fullwidth")&&Math.random()<i&&a.classList.add("mo-fullwidth","js-mo-fullwidth")})}o.forEach((i,a)=>{t.showBadge&&this._createBadge(i,a+s+1),t.showArrow&&this._createArrow(i)}),t.lastItemIdx=r.length,n.set(e,t),this._applyFilter(o),this.refresh(),this._observeItems(o),this._injectAdSlots(o),o.forEach(i=>{i.querySelectorAll("img").forEach(a=>{a.complete||a.addEventListener("load",this._resizeHandler,{once:!0})})})}}_setPostPosition(e){if(e.classList.contains("mo-filtered-out"))return;if(e.classList.contains("mo-fullwidth")){e.classList.remove("mo-inverted","js-mo-inverted","mo-offset");return}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=w(e,".js-mo-inverted:not(.mo-filtered-out)")[0]||null,o=w(e,".js-mo-item:not(.js-mo-inverted):not(.mo-filtered-out)")[0]||null,i=p(o),a=p(r),l=p(e);let h=0,m=0;if(s>1){i.gppu>l.o+1&&(h=1),a.gppu>i.gppu&&(h=0);const f=e.previousElementSibling;f&&Math.abs(l.o-p(f).o)<40&&(m=1)}return{lr:h,badge_offset:m}}_createBadge(e,t){const s=this._getData(),r=document.createElement("span");if(r.className="mo-badge js-mo-badge",s.showCounterStyle==="none")r.style.opacity="0";else if(s.showCounterStyle==="image"){const o=document.createElement("img");o.className="mo-badge-icon",o.alt="",o.src=e.dataset.moIcon||A,r.appendChild(o)}else r.textContent=t;e.prepend(r)}_createItemElement(e){const t=document.createElement("li");e.icon&&(t.dataset.moIcon=e.icon),e.categories&&(t.dataset.categories=Array.isArray(e.categories)?e.categories.join(" "):String(e.categories));const s=document.createElement("div");s.className="mo-card";const r=this._getData();if(r&&typeof r.renderCard=="function")r.renderCard(e,s);else{if(e.banner){const i=document.createElement("div");i.className="mo-card-image";const a=document.createElement("img");if(a.className="mo-banner",a.src=e.banner,a.alt="",i.appendChild(a),e.avatar){const l=document.createElement("img");l.className="mo-avatar",l.src=e.avatar,l.alt="",i.appendChild(l)}s.appendChild(i)}const o=document.createElement("div");if(o.className="mo-card-body",e.title){const i=document.createElement("h3");i.textContent=e.title,o.appendChild(i)}if(e.meta){const i=document.createElement("p");i.className="mo-meta",i.textContent=e.meta,o.appendChild(i)}if(e.text){const i=document.createElement("p");i.textContent=e.text,o.appendChild(i)}s.appendChild(o)}return t.appendChild(s),t}_createArrow(e){const t=document.createElement("span");t.className="mo-arrow js-mo-arrow",e.prepend(t)}_injectAdSlots(e){const t=this._getData();if(!t||!t.adSlots||!e.length)return;const{mode:s,interval:r,style:o}=t.adSlots,i=o==="fullwidth",a=this.element;let l=!1;if(s==="every_n")e.forEach((h,m)=>{if((t._adRealCount+m+1)%r===0){const f=this._createAdSlot(i);h.after(f),f.dataset.moAdPosition=String(Array.from(a.children).indexOf(f)),this._adObserver&&this._adObserver.observe(f),i&&(l=!0)}});else if(s==="random"){let h=t._adRealCount%r,m=0;for(;m<e.length;){const f=r-h,_=e.slice(m,m+f);if(_.length===f){const C=_[Math.floor(Math.random()*_.length)],b=this._createAdSlot(i);C.after(b),b.dataset.moAdPosition=String(Array.from(a.children).indexOf(b)),this._adObserver&&this._adObserver.observe(b),i&&(l=!0),h=0}else h+=_.length;m+=f}}t._adRealCount+=e.length,l&&this.refresh()}_createAdSlot(e){const t=document.createElement("li");return t.className="mo-ad-slot",e&&t.classList.add("mo-fullwidth"),t}_observeItems(e){this._observer&&e.forEach(t=>{t.classList.contains("mo-visible")||this._observer.observe(t)})}};E(g,"instances",new Set);let v=g;d.MoTimeline=v,d.default=v,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+ */const l=new WeakMap,h={columnCount:{xs:1,sm:2,md:2,lg:2},showBadge:!1,showArrow:!1,theme:!1,showCounterStyle:"counter",cardBorderRadius:"8px",avatarSize:"50px",cardMargin:"0.5rem 1.25rem 0.5rem 0.5rem",cardMarginInverted:"0.5rem 0.5rem 0.5rem 1.25rem",cardMarginFullWidth:"0.5rem",randomFullWidth:0,animate:!1,renderCard:null,adSlots:null},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 y(){const g=window.innerWidth;return g<600?"xs":g<992?"sm":g<1200?"md":"lg"}function E(g,e=100){let t;return(...o)=>{clearTimeout(t),t=setTimeout(()=>g(...o),e)}}const u=class u{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({},h,t),this.settings.columnCount=Object.assign({},h.columnCount,t.columnCount),this._resizeHandler=E(()=>this.refresh(),100),this._initialized=!1,this.init()}init(){const e=this.element;if(l.has(e)){this.refresh();return}const t=Object.assign({},this.settings,{lastItemIdx:0});if(l.set(e,t),u.instances.add(this),e.classList.add("mo-timeline"),t.theme&&e.classList.add("mo-theme"),e.style.setProperty("--mo-card-border-radius",t.cardBorderRadius),e.style.setProperty("--mo-avatar-size",t.avatarSize),e.style.setProperty("--mo-card-margin",t.cardMargin),e.style.setProperty("--mo-card-margin-inverted",t.cardMarginInverted),e.style.setProperty("--mo-card-margin-fullwidth",t.cardMarginFullWidth),t.animate){const o=t.animate===!0?"fade":t.animate;e.classList.add("mo-animate",`mo-animate-${o}`),this._observer=new IntersectionObserver(r=>{r.forEach(a=>{a.isIntersecting&&(a.target.classList.add("mo-visible"),this._observer.unobserve(a.target))})},{threshold:.1})}t.adSlots&&(t._adRealCount=0,typeof t.adSlots.onEnterViewport=="function"&&(this._adObserver=new IntersectionObserver(o=>{o.forEach(r=>{r.isIntersecting&&(this._adObserver.unobserve(r.target),t.adSlots.onEnterViewport(r.target,Number(r.target.dataset.moAdPosition)))})},{threshold:.5}))),this._initialized=!0,window.addEventListener("resize",this._resizeHandler),Array.from(e.children).length>0&&this._initItems()}refresh(){u.instances.forEach(e=>{const t=e.element,o=l.get(t);o&&(o.col=o.columnCount[y()],e._setDivider(),e._layout())})}initNewItems(){this._initItems()}addItems(e){typeof e=="string"&&(e=JSON.parse(e)),e.forEach(t=>this.element.appendChild(this._createItemElement(t))),this._initItems()}insertItem(e,t){const o=this.element,r=this._getData();if(!r)return;const a=this._createItemElement(e),s=Array.from(o.children).filter(n=>n.classList.contains("js-mo-item")),i=t==null?Math.floor(Math.random()*(s.length+1)):Math.max(0,Math.min(t,s.length));if(i>=s.length?o.appendChild(a):o.insertBefore(a,s[i]),a.id||(a.id="moT"+crypto.randomUUID()+"_"+i),a.classList.add("mo-item","js-mo-item"),e.fullWidth)a.classList.add("mo-fullwidth","js-mo-fullwidth");else if(r.randomFullWidth){const n=r.randomFullWidth===!0?.33:r.randomFullWidth;Math.random()<n&&a.classList.add("mo-fullwidth","js-mo-fullwidth")}return r.showBadge&&this._createBadge(a,i+1),r.showArrow&&this._createArrow(a),r.showBadge&&r.showCounterStyle==="counter"&&Array.from(o.querySelectorAll(".js-mo-item")).forEach((n,f)=>{const c=n.querySelector(".js-mo-badge");c&&(c.textContent=f+1)}),r.lastItemIdx=Array.from(o.children).length,l.set(o,r),this.refresh(),this._observeItems([a]),a.querySelectorAll("img").forEach(n=>{n.complete||n.addEventListener("load",this._resizeHandler,{once:!0})}),a}clear(){const e=this._getData();e&&(this._observer&&this._observer.disconnect(),this._adObserver&&this._adObserver.disconnect(),Array.from(this.element.children).forEach(t=>{(t.classList.contains("js-mo-item")||t.classList.contains("mo-ad-slot"))&&t.remove()}),e.lastItemIdx=0,e.adSlots&&(e._adRealCount=0))}destroy(){window.removeEventListener("resize",this._resizeHandler),this._observer&&(this._observer.disconnect(),this._observer=null),this._adObserver&&(this._adObserver.disconnect(),this._adObserver=null),Array.from(this.element.querySelectorAll(".mo-ad-slot")).forEach(e=>e.remove()),l.delete(this.element),u.instances.delete(this),this.element.style.removeProperty("--mo-card-border-radius"),this.element.style.removeProperty("--mo-avatar-size"),this.element.style.removeProperty("--mo-card-margin"),this.element.style.removeProperty("--mo-card-margin-inverted"),this.element.style.removeProperty("--mo-card-margin-fullwidth"),this.element.classList.remove("mo-timeline","mo-theme","mo-twocol","mo-animate","mo-animate-fade","mo-animate-slide"),Array.from(this.element.children).forEach(e=>{e.classList.remove("mo-item","js-mo-item","mo-inverted","js-mo-inverted","mo-offset","mo-fullwidth","js-mo-fullwidth","mo-visible","mo-filtered-out"),e.querySelectorAll(".js-mo-badge, .js-mo-arrow").forEach(t=>t.remove())})}filterByCategory(e){const t=this._getData();t&&(t._activeFilter=e==null||e===""||e==="all"?null:String(e),l.set(this.element,t),this._applyFilter(Array.from(this.element.querySelectorAll(".js-mo-item"))),this.refresh())}_applyFilter(e){const t=this._getData();if(!t)return;const o=t._activeFilter||null;e.forEach(r=>{if(!o)r.classList.remove("mo-filtered-out");else{const a=(r.dataset.categories||"").split(/\s+/).filter(Boolean);r.classList.toggle("mo-filtered-out",!a.includes(o))}})}_getData(){return l.get(this.element)}_setDivider(){const e=this._getData();e&&(e.col=e.columnCount[y()],this.element.classList.toggle("mo-twocol",e.col>1))}_initItems(){const e=this.element,t=this._getData();if(!t)return;const o=t.lastItemIdx,r=Array.from(e.children),a=r.slice(o);if(a.length!==0){if(a.forEach((s,i)=>{s.id||(s.id="moT"+crypto.randomUUID()+"_"+(i+o)),s.classList.add("mo-item","js-mo-item")}),this._setDivider(),t.randomFullWidth){const s=t.randomFullWidth===!0?.33:t.randomFullWidth;a.forEach(i=>{!i.classList.contains("mo-fullwidth")&&Math.random()<s&&i.classList.add("mo-fullwidth","js-mo-fullwidth")})}a.forEach((s,i)=>{t.showBadge&&this._createBadge(s,i+o+1),t.showArrow&&this._createArrow(s)}),t.lastItemIdx=r.length,l.set(e,t),this._applyFilter(a),this.refresh(),this._observeItems(a),this._injectAdSlots(a),a.forEach(s=>{s.querySelectorAll("img").forEach(i=>{i.complete||i.addEventListener("load",this._resizeHandler,{once:!0})})})}}_layout(){const e=this.element,t=this._getData();if(!t)return;if(t.col<=1){Array.from(e.children).forEach(s=>{s.classList.remove("mo-inverted","js-mo-inverted","mo-offset")});return}let o=0,r=0,a=-1/0;Array.from(e.children).forEach(s=>{if(s.classList.contains("mo-filtered-out"))return;if(s.classList.contains("mo-fullwidth")){s.classList.remove("mo-inverted","js-mo-inverted","mo-offset"),o=r=Math.max(o,r)+s.offsetHeight,a=-1/0;return}const i=Math.min(o,r),n=o<=r;s.classList.toggle("mo-inverted",!n),s.classList.toggle("js-mo-inverted",!n),s.classList.toggle("mo-offset",Math.abs(i-a)<40),n?o+=s.offsetHeight:r+=s.offsetHeight,a=i})}_createBadge(e,t){const o=this._getData(),r=document.createElement("span");if(r.className="mo-badge js-mo-badge",o.showCounterStyle==="none")r.style.opacity="0";else if(o.showCounterStyle==="image"){const a=document.createElement("img");a.className="mo-badge-icon",a.alt="",a.src=e.dataset.moIcon||b,r.appendChild(a)}else r.textContent=t;e.prepend(r)}_createItemElement(e){const t=document.createElement("li");e.icon&&(t.dataset.moIcon=e.icon),e.categories&&(t.dataset.categories=Array.isArray(e.categories)?e.categories.join(" "):String(e.categories));const o=document.createElement("div");o.className="mo-card";const r=this._getData();if(r&&typeof r.renderCard=="function")r.renderCard(e,o);else{if(e.banner){const s=document.createElement("div");s.className="mo-card-image";const i=document.createElement("img");if(i.className="mo-banner",i.src=e.banner,i.alt="",s.appendChild(i),e.avatar){const n=document.createElement("img");n.className="mo-avatar",n.src=e.avatar,n.alt="",s.appendChild(n)}o.appendChild(s)}const a=document.createElement("div");if(a.className="mo-card-body",e.title){const s=document.createElement("h3");s.textContent=e.title,a.appendChild(s)}if(e.meta){const s=document.createElement("p");s.className="mo-meta",s.textContent=e.meta,a.appendChild(s)}if(e.text){const s=document.createElement("p");s.textContent=e.text,a.appendChild(s)}o.appendChild(a)}return t.appendChild(o),t}_createArrow(e){const t=document.createElement("span");t.className="mo-arrow js-mo-arrow",e.prepend(t)}_injectAdSlots(e){const t=this._getData();if(!t||!t.adSlots||!e.length)return;const{mode:o,interval:r,style:a}=t.adSlots,s=a==="fullwidth",i=this.element;let n=!1;if(o==="every_n")e.forEach((f,c)=>{if((t._adRealCount+c+1)%r===0){const m=this._createAdSlot(s);f.after(m),m.dataset.moAdPosition=String(Array.from(i.children).indexOf(m)),this._adObserver&&this._adObserver.observe(m),s&&(n=!0)}});else if(o==="random"){let f=t._adRealCount%r,c=0;for(;c<e.length;){const m=r-f,p=e.slice(c,c+m);if(p.length===m){const A=p[Math.floor(Math.random()*p.length)],_=this._createAdSlot(s);A.after(_),_.dataset.moAdPosition=String(Array.from(i.children).indexOf(_)),this._adObserver&&this._adObserver.observe(_),s&&(n=!0),f=0}else f+=p.length;c+=m}}t._adRealCount+=e.length,n&&this.refresh()}_createAdSlot(e){const t=document.createElement("li");return t.className="mo-ad-slot",e&&t.classList.add("mo-fullwidth"),t}_observeItems(e){this._observer&&e.forEach(t=>{t.classList.contains("mo-visible")||this._observer.observe(t)})}};w(u,"instances",new Set);let v=u;d.MoTimeline=v,d.default=v,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

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

package/src/moTimeline.css

@@ -1,5 +1,5 @@
 /*!
- * moTimeline v2.13.0 — CSS
+ * moTimeline v2.13.2 — CSS
  */
 
 /* ── CSS custom properties (easy override) ─────────────────── */

package/src/moTimeline.js

@@ -1,5 +1,5 @@
 /*!
- * moTimeline v2.13.0
+ * moTimeline v2.13.2
  * Responsive two-column timeline layout library
  * https://github.com/MattOpen/moTimeline
  * MIT License
@@ -45,24 +45,6 @@ function debounce(fn, delay = 100) {
   };
 }
 
-function getPosition(el) {
-  if (!el) return { o: 0, h: 0, gppu: 0 };
-  return {
-    o: el.offsetTop,
-    h: el.offsetHeight,
-    gppu: el.offsetTop + el.offsetHeight,
-  };
-}
-
-function prevAll(el, selector) {
-  const results = [];
-  let sibling = el.previousElementSibling;
-  while (sibling) {
-    if (!selector || sibling.matches(selector)) results.push(sibling);
-    sibling = sibling.previousElementSibling;
-  }
-  return results;
-}
 
 export class MoTimeline {
   static instances = new Set();
@@ -146,10 +128,7 @@ export class MoTimeline {
 
       data.col = data.columnCount[getBreakpoint()];
       instance._setDivider();
-
-      Array.from(el.children).forEach((child) => {
-        instance._setPostPosition(child);
-      });
+      instance._layout();
     });
   }
 
@@ -388,50 +367,38 @@ export class MoTimeline {
     });
   }
 
-  _setPostPosition(el) {
-    if (el.classList.contains('mo-filtered-out')) return;
+  _layout() {
+    const el = this.element;
+    const data = this._getData();
+    if (!data) return;
 
-    // Full-width items span both columns — skip column assignment
-    if (el.classList.contains('mo-fullwidth')) {
-      el.classList.remove('mo-inverted', 'js-mo-inverted', 'mo-offset');
+    if (data.col <= 1) {
+      Array.from(el.children).forEach((child) => {
+        child.classList.remove('mo-inverted', 'js-mo-inverted', 'mo-offset');
+      });
       return;
     }
 
-    const result = this._getLeftOrRight(el);
-    if (!result) return;
+    let leftH = 0, rightH = 0, prevStart = -Infinity;
+    Array.from(el.children).forEach((child) => {
+      if (child.classList.contains('mo-filtered-out')) return;
 
-    el.classList.toggle('mo-inverted', result.lr > 0);
-    el.classList.toggle('js-mo-inverted', result.lr > 0);
-    el.classList.toggle('mo-offset', result.badge_offset > 0);
-  }
-
-  _getLeftOrRight(el) {
-    if (!el) return null;
-
-    const data = this._getData();
-    if (!data) return null;
-
-    const col = data.col;
-
-    const prevInverted = prevAll(el, '.js-mo-inverted:not(.mo-filtered-out)')[0] || null;
-    const prevLeft = prevAll(el, '.js-mo-item:not(.js-mo-inverted):not(.mo-filtered-out)')[0] || null;
-
-    const l = getPosition(prevLeft);
-    const r = getPosition(prevInverted);
-    const e = getPosition(el);
-
-    let pos = 0;
-    let bo = 0;
-
-    if (col > 1) {
-      if (l.gppu > e.o + 1) pos = 1; // +1px tolerance for offsetHeight/offsetTop rounding mismatch
-      if (r.gppu > l.gppu) pos = 0;
-
-      const prev = el.previousElementSibling;
-      if (prev && Math.abs(e.o - getPosition(prev).o) < 40) bo = 1;
-    }
+      if (child.classList.contains('mo-fullwidth')) {
+        child.classList.remove('mo-inverted', 'js-mo-inverted', 'mo-offset');
+        leftH = rightH = Math.max(leftH, rightH) + child.offsetHeight;
+        prevStart = -Infinity;
+        return;
+      }
 
-    return { lr: pos, badge_offset: bo };
+      const rowStart = Math.min(leftH, rightH);
+      const goLeft = leftH <= rightH;
+      child.classList.toggle('mo-inverted', !goLeft);
+      child.classList.toggle('js-mo-inverted', !goLeft);
+      child.classList.toggle('mo-offset', Math.abs(rowStart - prevStart) < 40);
+      if (goLeft) leftH += child.offsetHeight;
+      else rightH += child.offsetHeight;
+      prevStart = rowStart;
+    });
   }
 
   _createBadge(el, idx) {