taleem-player 1.0.15 → 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/css/taleem.css +1 -1
  2. package/dist/taleem-player.esm.js +16 -9
  3. package/dist/taleem-player.umd.js +16 -9
  4. package/package.json +1 -1
package/dist/css/taleem.css CHANGED
@@ -1 +1 @@
1
- .slide{width:100%;height:100vh;box-sizing:border-box;padding:4rem 6rem;display:flex;flex-direction:column;justify-content:center;font-family:system-ui,-apple-system,sans-serif;align-items:center;background:var(--backgroundColor, #ffffff);color:var(--primaryColor, #111111)}.slide img{max-width:100%;max-height:100%;height:auto;width:auto;display:block}.slide h1,.slide h2,.slide h3,.slide p{margin:0}.slide ul{margin:0;padding-left:1.2em}.slide li{margin:0}.katex{font-size:1.4em}body{margin:0;font-family:system-ui,sans-serif}#app{height:100vh;box-sizing:border-box}.nav-test{position:fixed;left:0;right:0;bottom:0;height:90px;transition:opacity .5s ease;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);background:#bbbbbcd9;border-top:1px solid rgba(0,0,0,.1);display:flex;align-items:center;gap:1rem;padding:0 1rem;z-index:999999}.nav-test span{font-weight:700;min-width:80px}input[type=range]{flex:1}.slide.titleAndSubtitle{align-items:center;text-align:center;gap:32px}.slide.titleAndSubtitle h1{font-size:5.8rem;font-weight:700;line-height:1.2;letter-spacing:-.015em;margin:0}.slide.titleAndSubtitle h2{font-size:3.8rem;font-weight:400;opacity:.8;margin:0}.slide.titleAndPara{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:3rem;gap:1rem;text-align:center}.slide.titleAndPara h1{font-size:3rem;font-weight:700;line-height:1.2;max-width:1100px;margin:0 auto}.slide.titleAndPara p{font-size:2rem;line-height:1.7;max-width:1000px;margin:0 auto}.slide.bulletList{align-items:center;text-align:left}.slide.bulletList ul{list-style:disc;padding-left:2rem;margin:0;max-width:900px}.slide.bulletList li{font-size:2.2rem;font-weight:500;line-height:2;margin-bottom:1rem}@media(orientation:portrait){.slide.bulletList li{line-height:3}}.slide.twoColumnText{font-size:1.8em;line-height:1.7em;flex-direction:row;justify-content:center;align-items:stretch;gap:4rem;text-align:center}.slide.twoColumnText>div{flex:1;max-width:600px;padding:2.5rem;border:1px solid white;border-radius:12px;box-shadow:0 12px 30px #00000014}@media(orientation:portrait){.slide.twoColumnText{flex-direction:column;font-size:3rem;line-height:2}.slide.twoColumnText>div{max-width:100%}}.slide.imageSlide{padding:0;align-items:center;justify-content:center}.slide.imageSlide img{max-width:90%;max-height:90%;object-fit:contain}.slide.imageWithTitle{align-items:center;text-align:center;gap:2.5rem}.slide.imageWithTitle h1{font-size:2.5rem;font-weight:600;line-height:1.2;margin:0}.slide.imageWithTitle img{max-width:85%;max-height:70%;object-fit:contain}@media(orientation:portrait){.slide.imageWithTitle h1{font-size:3.2rem}.slide.imageWithTitle img{max-width:95%;max-height:65%}}.slide.imageWithCaption{margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2.5rem}.slide.imageWithCaption img{max-width:85%;max-height:65%;object-fit:contain;display:block}.slide.imageWithCaption figcaption{font-size:2.4rem;line-height:1.6;max-width:800px;margin:0;opacity:.85}@media(orientation:portrait){.slide.imageWithCaption img{max-width:95%;max-height:60%}.slide.imageWithCaption figcaption{font-size:2.8rem}}.slide.imageLeftBulletsRight{flex-direction:row;align-items:center;justify-content:center;gap:4rem;text-align:left}.slide.imageLeftBulletsRight img{max-width:45%;max-height:75%;object-fit:contain}.slide.imageLeftBulletsRight ul{max-width:45%;margin:0;padding-left:2rem}.slide.imageLeftBulletsRight li{font-size:2rem;line-height:1.5;margin-bottom:1rem}@media(orientation:portrait){.slide.imageLeftBulletsRight{flex-direction:column;text-align:left}.slide.imageLeftBulletsRight img{max-width:85%}.slide.imageLeftBulletsRight ul{max-width:100%;padding-left:0;list-style-position:inside}}.slide.imageRightBulletsLeft{flex-direction:row;align-items:center;justify-content:center;gap:4rem;text-align:left}.slide.imageRightBulletsLeft img{order:2;max-width:45%;max-height:75%;object-fit:contain}.slide.imageRightBulletsLeft ul{order:1;max-width:45%;margin:0;padding-left:2rem}.slide.imageRightBulletsLeft li{font-size:2rem;line-height:1.5;margin-bottom:1rem}@media(orientation:portrait){.slide.imageRightBulletsLeft{flex-direction:column;text-align:left}.slide.imageRightBulletsLeft ul{order:1;max-width:100%;padding-left:0;list-style-position:inside}.slide.imageRightBulletsLeft img{order:2;max-width:85%}}.slide.table{justify-content:flex-start;align-items:center;padding-top:6rem}.slide.table table{border-collapse:collapse;width:100%;max-width:1100px;table-layout:fixed}.slide.table td{padding:1rem;font-size:1.4rem;border:2px solid var(--primaryColor);word-break:break-word;text-align:center}@media(orientation:portrait){.slide.table td{font-size:1.8rem;padding:1rem 1.2rem}}.slide.barChart{align-items:center;justify-content:center;text-align:left}.slide.barChart .bar-chart{width:100%;max-width:900px;display:flex;flex-direction:column;gap:2.4rem}.slide.barChart .bar-row{display:flex;align-items:center;gap:2rem}.slide.barChart .bar-label{width:220px;flex-shrink:0;font-size:2.4rem;opacity:.9}.slide.barChart .bar-track{flex:1;height:28px;background:#00000014;border-radius:14px;overflow:hidden}.slide.barChart .bar-fill{height:100%;width:0;background:#f5c542;border-radius:14px;transition:width .6s ease}.slide.barChart .bar-value{width:60px;text-align:right;font-size:2.2rem;opacity:.85}@media(orientation:portrait){.slide.barChart .bar-label{width:140px;font-size:2rem}.slide.barChart .bar-value{width:48px;font-size:1.8rem}.slide.barChart .bar-track{height:22px}}.slide.progressbar{align-items:center;justify-content:center;text-align:center;gap:3rem}.slide.progressbar .progressbar-item{width:90%;max-width:900px}.slide.progressbar .progressbar-label{font-size:2.6rem;font-weight:500;margin-bottom:1.4rem}.slide.progressbar .progressbar-track{position:relative;height:46px;border-radius:999px;background:#00000040;box-shadow:inset 0 4px 8px #00000026}.slide.progressbar .progressbar-fill{height:100%;width:0;border-radius:999px;background:#f5c542;transition:width .6s ease;display:flex;align-items:center;padding-left:1.8rem;font-size:2.2rem;font-weight:600;color:#222}.slide.progressbar .progressbar-fill:before{content:attr(data-value) "%"}.slide.progressbar .progressbar-track:after{content:"100%";position:absolute;right:-75px;top:50%;transform:translateY(-50%);font-size:2.2rem;font-weight:500;opacity:.75}.slide.quoteSlide{margin:0;width:100%;align-items:center;justify-content:center;text-align:center;padding:6rem 10rem}.slide.quoteSlide p{font-size:4.2rem;line-height:1.4;font-weight:400;max-width:1100px;margin:0 auto;position:relative}.slide.quoteSlide p:before,.slide.quoteSlide p:after{font-size:6rem;opacity:.15;position:absolute}.slide.quoteSlide p:before{content:"\201c";left:-4rem;top:-2rem}.slide.quoteSlide p:after{content:"\201d";right:-4rem;bottom:-2rem}.slide.quoteSlide footer{margin-top:3rem;font-size:2.4rem;font-weight:500;opacity:.75}.slide.keyIdeasSlide{padding:2rem 6rem;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;justify-items:center;gap:4rem;text-align:center}.slide.keyIdeasSlide .key-idea{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem}.slide.keyIdeasSlide .icon{font-size:8rem;line-height:1}.slide.keyIdeasSlide .label{font-size:3.6rem;font-weight:700;letter-spacing:.05em}@media(orientation:landscape)and (max-height:500px){.slide.keyIdeasSlide{padding:1.5rem 4rem;gap:3rem}.slide.keyIdeasSlide .icon{font-size:5rem}.slide.keyIdeasSlide .label{font-size:2.2rem}.slide.keyIdeasSlide .key-idea{gap:1.5rem}}.slide.fillImage{padding:0;display:flex}.slide.fillImage img{width:100%;height:100%;object-fit:cover}.slide.eq{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;padding-left:3rem;padding-right:3rem}.slide.eq .eq-lines{flex:0 0 45%;list-style:none;padding:0;margin:0;display:flex;flex-direction:column}.slide.eq .eq-lines li{padding:2px 4px;font-size:1.25rem;line-height:1.25;border-bottom:1px solid rgba(255,255,255,.18);background:#ffffff08}.slide.eq .eq-lines li:last-child{background:#f5c5422e;font-weight:600;border:1px solid gold;border-radius:10px}.slide.eq .eq-side-panel{flex:0 0 55%;padding:2px 4px;background:#00000059;border:1px solid rgba(255,255,255,.18);border-radius:16px;display:flex;flex-direction:column;gap:4px}.slide.eq .eq-explain-item{font-size:1.2rem;line-height:1.5;text-align:justify;background:#ffffff0f;padding:14px 18px;border-radius:12px}.slide.eq .eq-explain-image img{width:70%;margin:0 auto;display:block;border-radius:12px}
1
+ .slide{width:100%;height:100vh;box-sizing:border-box;padding:4rem 6rem;display:flex;flex-direction:column;justify-content:center;font-family:system-ui,-apple-system,sans-serif;align-items:center;background:var(--backgroundColor, #ffffff);color:var(--primaryColor, #111111)}.slide img{max-width:100%;max-height:100%;height:auto;width:auto;display:block}.slide h1,.slide h2,.slide h3,.slide p{margin:0}.slide ul{margin:0;padding-left:1.2em}.slide li{margin:0}.katex{font-size:1.4em}body{margin:0;font-family:system-ui,sans-serif}#app{height:100vh;box-sizing:border-box}.nav-test{position:fixed;left:0;right:0;bottom:0;height:90px;transition:opacity .5s ease;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);background:#bbbbbcd9;border-top:1px solid rgba(0,0,0,.1);display:flex;align-items:center;gap:1rem;padding:0 1rem;z-index:999999}.nav-test span{font-weight:700;min-width:80px}input[type=range]{flex:1}.slide.titleAndSubtitle{align-items:center;text-align:center;gap:32px}.slide.titleAndSubtitle h1{font-size:5.8rem;font-weight:700;line-height:1.2;letter-spacing:-.015em;margin:0}.slide.titleAndSubtitle h2{font-size:2.3rem;font-weight:400;opacity:.8;margin:0}.slide.titleAndPara{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:3rem;gap:1rem;text-align:center}.slide.titleAndPara h1{font-size:3rem;font-weight:700;line-height:1.2;max-width:1100px;margin:0 auto}.slide.titleAndPara p{font-size:2.2rem;line-height:1.7;max-width:1000px;margin:0 auto}@media(min-width:1024px){.slide.titleAndPara{padding-top:5rem;gap:2rem}.slide.titleAndPara h1{font-size:2.8rem;max-width:900px}.slide.titleAndPara p{font-size:1.6rem;max-width:750px;line-height:1.6}}@media(orientation:landscape){.slide.titleAndPara p{font-size:1.5rem;max-width:1100px;line-height:1.5}}@media(orientation:portrait){.slide.titleAndPara p{font-size:2.75rem;max-width:1100px;line-height:2.2;text-align:justify}}@media(min-width:1600px){.slide.titleAndPara{padding-top:6rem;gap:3rem}.slide.titleAndPara h1{font-size:4rem;max-width:1200px}.slide.titleAndPara p{font-size:2.4rem;max-width:1100px;line-height:1.8}}.slide.bulletList{align-items:center;text-align:left}.slide.bulletList ul{list-style:disc;padding-left:2rem;margin:0;max-width:900px}.slide.bulletList li{font-size:2.2rem;font-weight:500;line-height:2;margin-bottom:1rem}@media(orientation:portrait){.slide.bulletList li{line-height:3}}@media(min-width:1024px)and (max-width:1440px){.slide.bulletList ul{max-width:750px}.slide.bulletList li{font-size:3rem;line-height:1.8;margin-bottom:.8rem}}@media(min-width:1600px){.slide.bulletList ul{max-width:1100px}.slide.bulletList li{font-size:3rem;line-height:2.2}}.slide.twoColumnText{display:flex;flex-direction:row;font-size:2rem;line-height:1.7;justify-content:center;align-items:stretch;gap:4rem;text-align:center}.slide.twoColumnText>div{flex:1;max-width:600px;padding:2.5rem;border:1px solid white;border-radius:12px;box-shadow:0 12px 30px #00000014}@media(orientation:portrait){.slide.twoColumnText{flex-direction:column;font-size:3rem;line-height:2;gap:2rem}.slide.twoColumnText>div{max-width:100%}}@media(orientation:landscape){.slide.twoColumnText{font-size:1.5rem}.slide.twoColumnText>div{max-width:100%}}@media(min-width:1600px){.slide.twoColumnText{font-size:3rem;line-height:1.9;gap:3rem}.slide.twoColumnText>div{max-width:800px;padding:3rem}}.slide.imageSlide{padding:0;align-items:center;justify-content:center}.slide.imageSlide img{max-width:90%;max-height:90%;object-fit:contain}.slide.imageWithTitle{align-items:center;text-align:center;gap:2.5rem}.slide.imageWithTitle h1{font-size:2.5rem;font-weight:600;line-height:1.2;margin:0}.slide.imageWithTitle img{max-width:85%;max-height:70%;object-fit:contain}@media(orientation:portrait){.slide.imageWithTitle h1{font-size:3.2rem}.slide.imageWithTitle img{max-width:95%;max-height:65%}}.slide.imageWithCaption{margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2.5rem}.slide.imageWithCaption img{max-width:85%;max-height:65%;object-fit:contain;display:block}.slide.imageWithCaption figcaption{font-size:2.4rem;line-height:1.6;max-width:800px;margin:0;opacity:.85}@media(orientation:portrait){.slide.imageWithCaption img{max-width:95%;max-height:60%}.slide.imageWithCaption figcaption{font-size:2.8rem}}.slide.imageLeftBulletsRight{flex-direction:row;align-items:center;justify-content:center;gap:4rem;text-align:left}.slide.imageLeftBulletsRight img{max-width:45%;max-height:75%;object-fit:contain}.slide.imageLeftBulletsRight ul{max-width:45%;margin:0;padding-left:2rem}.slide.imageLeftBulletsRight li{font-size:2rem;line-height:1.5;margin-bottom:1rem}@media(orientation:portrait){.slide.imageLeftBulletsRight{flex-direction:column;text-align:left}.slide.imageLeftBulletsRight img{max-width:85%}.slide.imageLeftBulletsRight ul{max-width:100%;padding-left:0;list-style-position:inside}}.slide.imageRightBulletsLeft{flex-direction:row;align-items:center;justify-content:center;gap:4rem;text-align:left}.slide.imageRightBulletsLeft img{order:2;max-width:45%;max-height:75%;object-fit:contain}.slide.imageRightBulletsLeft ul{order:1;max-width:45%;margin:0;padding-left:2rem}.slide.imageRightBulletsLeft li{font-size:2rem;line-height:1.5;margin-bottom:1rem}@media(orientation:portrait){.slide.imageRightBulletsLeft{flex-direction:column;text-align:left}.slide.imageRightBulletsLeft ul{order:1;max-width:100%;padding-left:0;list-style-position:inside}.slide.imageRightBulletsLeft img{order:2;max-width:85%}}.slide.table{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4rem 2rem}.slide.table table{border-collapse:collapse;width:100%;max-width:1100px;table-layout:fixed}.slide.table td{padding:1rem;font-size:2.4rem;border:2px solid var(--primaryColor);word-break:break-word;text-align:center}@media(orientation:portrait){.slide.table td{font-size:1.8rem;padding:1rem 1.2rem}}.slide.barChart{align-items:center;justify-content:center;text-align:left}.slide.barChart .bar-chart{width:100%;max-width:900px;display:flex;flex-direction:column;gap:2.4rem}.slide.barChart .bar-row{display:flex;align-items:center;gap:2rem}.slide.barChart .bar-label{width:220px;flex-shrink:0;font-size:2.4rem;opacity:.9}.slide.barChart .bar-track{flex:1;height:28px;background:#00000014;border-radius:14px;overflow:hidden}.slide.barChart .bar-fill{height:100%;width:0;background:#f5c542;border-radius:14px;transition:width .6s ease}.slide.barChart .bar-value{width:60px;text-align:right;font-size:2.2rem;opacity:.85}@media(orientation:portrait){.slide.barChart .bar-label{width:140px;font-size:2rem}.slide.barChart .bar-value{width:48px;font-size:1.8rem}.slide.barChart .bar-track{height:22px}}.slide.progressbar{align-items:center;justify-content:center;text-align:center;gap:3rem}.slide.progressbar .progressbar-item{width:90%;max-width:900px}.slide.progressbar .progressbar-label{font-size:2.6rem;font-weight:500;margin-bottom:1.4rem}.slide.progressbar .progressbar-track{position:relative;height:46px;border-radius:999px;background:#00000040;box-shadow:inset 0 4px 8px #00000026}.slide.progressbar .progressbar-fill{height:100%;width:0;border-radius:999px;background:#f5c542;transition:width .6s ease;display:flex;align-items:center;padding-left:1.8rem;font-size:2.2rem;font-weight:600;color:#222}.slide.progressbar .progressbar-fill:before{content:attr(data-value) "%"}.slide.progressbar .progressbar-track:after{content:"100%";position:absolute;right:-75px;top:50%;transform:translateY(-50%);font-size:2.2rem;font-weight:500;opacity:.75}.slide.quoteSlide{margin:0;width:100%;align-items:center;justify-content:center;text-align:center;padding:6rem 10rem}.slide.quoteSlide p{font-size:4.2rem;line-height:1.4;font-weight:400;max-width:1100px;margin:0 auto;position:relative}.slide.quoteSlide p:before,.slide.quoteSlide p:after{font-size:6rem;opacity:.15;position:absolute}.slide.quoteSlide p:before{content:"\201c";left:-4rem;top:-2rem}.slide.quoteSlide p:after{content:"\201d";right:-4rem;bottom:-2rem}.slide.quoteSlide footer{margin-top:3rem;font-size:2.4rem;font-weight:500;opacity:.75}.slide.keyIdeasSlide{padding:2rem 6rem;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;justify-items:center;gap:4rem;text-align:center}.slide.keyIdeasSlide .key-idea{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem}.slide.keyIdeasSlide .icon{font-size:8rem;line-height:1}.slide.keyIdeasSlide .label{font-size:3.6rem;font-weight:700;letter-spacing:.05em}@media(orientation:landscape)and (max-height:500px){.slide.keyIdeasSlide{padding:1.5rem 4rem;gap:3rem}.slide.keyIdeasSlide .icon{font-size:5rem}.slide.keyIdeasSlide .label{font-size:2.2rem}.slide.keyIdeasSlide .key-idea{gap:1.5rem}}.slide.fillImage{padding:0;display:flex}.slide.fillImage img{width:100%;height:100%;object-fit:cover}.slide.eq{display:flex;color:gray;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;padding-left:3rem;padding-right:3rem;overflow:hidden}.slide.eq .eq-lines{flex:0 0 45%;min-width:0;overflow:hidden;list-style:none;padding:0;margin:0;display:flex;flex-direction:column}.slide.eq .eq-lines li{padding:4px 6px;font-size:1.25rem;line-height:1.3;border-bottom:1px solid rgba(255,255,255,.18);background:#ffffff08;overflow-x:auto;overflow-y:hidden;max-width:100%}.highlighted{background:#967c342e;color:#fff;font-weight:600;border:2px solid gold;border-radius:10px}.slide.eq .eq-side-panel{flex:0 0 55%;min-width:0;overflow:hidden;padding:6px;background:#00000059;border:1px solid rgba(255,255,255,.18);border-radius:16px;display:flex;flex-direction:column;gap:4px}.slide.eq .eq-explain-item{font-size:1.25rem;line-height:1.5;text-align:justify;background:#ffffff0f;padding:14px 18px;border-radius:12px;overflow-wrap:break-word}.slide.eq .eq-explain-image img{width:70%;margin:0 auto;display:block;border-radius:12px}@media(min-width:1024px){.slide.eq{gap:1.5rem}.slide.eq .eq-lines li{font-size:1.5rem}.slide.eq .eq-explain-item{font-size:1.2rem}}@media(min-width:1600px){.slide.eq{gap:2rem;padding-left:4rem;padding-right:4rem}.slide.eq .eq-lines,.slide.eq .eq-side-panel{flex:0 0 50%}.slide.eq .eq-lines li{font-size:2.25rem}.slide.eq .eq-explain-item{font-size:2.25rem;line-height:1.5em}}
package/dist/taleem-player.esm.js CHANGED
@@ -418,25 +418,32 @@ var EqSlide = {
418
418
  type: "eq",
419
419
  fromJSON(raw) {
420
420
  const lines = raw.data ?? [];
421
+ const maxVisible = 3;
421
422
  return Object.freeze({
422
423
  type: "eq",
423
424
  lines,
424
- render({ visibleCount = lines.length } = {}) {
425
- const end = Math.min(visibleCount, lines.length);
426
- const visibleLines = lines.slice(0, end);
427
- const activeLine = end > 0 ? lines[end - 1] : null;
425
+ render({ activeIndex = -1 } = {}) {
426
+ let start = 0;
427
+ if (activeIndex >= maxVisible) {
428
+ start = activeIndex - (maxVisible - 1);
429
+ }
430
+ const visibleLines = lines.slice(start);
431
+ const activeLine = activeIndex >= 0 && activeIndex < lines.length ? lines[activeIndex] : null;
428
432
  const spItems = activeLine?.spItems ?? [];
429
433
  return `
430
434
  <section class="slide eq">
431
435
 
432
- <!-- LEFT: lines (pure bullet behavior) -->
433
436
  <ul class="eq-lines">
434
- ${visibleLines.map(
435
- (line) => `<li class="eq-line">${line.content}</li>`
436
- ).join("")}
437
+ ${visibleLines.map((line, index) => {
438
+ const realIndex = start + index;
439
+ return `
440
+ <li class="eq-line ${realIndex === activeIndex ? "highlighted" : ""}">
441
+ ${line.content}
442
+ </li>
443
+ `;
444
+ }).join("")}
437
445
  </ul>
438
446
 
439
- <!-- RIGHT: explanation panel -->
440
447
  <div class="eq-side-panel">
441
448
  ${spItems.map((item) => {
442
449
  if (item.type === "spImage") {
package/dist/taleem-player.umd.js CHANGED
@@ -449,25 +449,32 @@ var TaleemPlayer = (() => {
449
449
  type: "eq",
450
450
  fromJSON(raw) {
451
451
  const lines = raw.data ?? [];
452
+ const maxVisible = 3;
452
453
  return Object.freeze({
453
454
  type: "eq",
454
455
  lines,
455
- render({ visibleCount = lines.length } = {}) {
456
- const end = Math.min(visibleCount, lines.length);
457
- const visibleLines = lines.slice(0, end);
458
- const activeLine = end > 0 ? lines[end - 1] : null;
456
+ render({ activeIndex = -1 } = {}) {
457
+ let start = 0;
458
+ if (activeIndex >= maxVisible) {
459
+ start = activeIndex - (maxVisible - 1);
460
+ }
461
+ const visibleLines = lines.slice(start);
462
+ const activeLine = activeIndex >= 0 && activeIndex < lines.length ? lines[activeIndex] : null;
459
463
  const spItems = activeLine?.spItems ?? [];
460
464
  return `
461
465
  <section class="slide eq">
462
466
 
463
- <!-- LEFT: lines (pure bullet behavior) -->
464
467
  <ul class="eq-lines">
465
- ${visibleLines.map(
466
- (line) => `<li class="eq-line">${line.content}</li>`
467
- ).join("")}
468
+ ${visibleLines.map((line, index) => {
469
+ const realIndex = start + index;
470
+ return `
471
+ <li class="eq-line ${realIndex === activeIndex ? "highlighted" : ""}">
472
+ ${line.content}
473
+ </li>
474
+ `;
475
+ }).join("")}
468
476
  </ul>
469
477
 
470
- <!-- RIGHT: explanation panel -->
471
478
  <div class="eq-side-panel">
472
479
  ${spItems.map((item) => {
473
480
  if (item.type === "spImage") {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "taleem-player",
3
- "version": "1.0.15",
3
+ "version": "1.0.16",
4
4
  "type": "module",
5
5
  "main": "./dist/taleem-player.umd.js",
6
6
  "module": "./dist/taleem-player.esm.js",