taleem-engine 1.0.0

package/src/compiler/animation-primtives/runPrimitive.js

@@ -0,0 +1,71 @@
+// /src/compiler/animation-primtives/runPrimitive.js
+
+import { progressiveReveal } from "./progressiveReveal.js";
+
+import { showAllHighlightOne } from "./showAllHighlightOne.js";
+
+import { showOneAtATime } from "./showOneAtATime.js";
+
+import { eqHighlightOne } from "./eqHighlightOne.js";
+
+export function runPrimitive({
+  type,
+  items
+}) {
+  switch (type) {
+    case "progressiveReveal":
+      return {
+        actions:
+          progressiveReveal(items),
+
+        groups: {
+          hidden: ["hidden"]
+        }
+      };
+
+    case "highlightOne":
+      return {
+        actions:
+          showAllHighlightOne(items),
+
+        groups: {
+          focus: [],
+
+          dim: ["dim"]
+        }
+      };
+
+    case "eqHighlightOne":
+      return {
+        actions:
+          eqHighlightOne(items),
+
+        groups: {
+          focus: [],
+
+          dim: ["dim"],
+
+          visible: [],
+
+          hidden: ["hidden"]
+        }
+      };
+
+    case "oneAtATime":
+      return {
+        actions:
+          showOneAtATime(items),
+
+        groups: {
+          visible: [],
+
+          hidden: ["hidden"]
+        }
+      };
+
+    default:
+      throw new Error(
+        `Unknown primitive: ${type}`
+      );
+  }
+}

package/src/compiler/animation-primtives/showAllHighlightOne.js

@@ -0,0 +1,34 @@
+
+// /src/compiler/animation-primitives/showAllHighlightOne.js
+
+export function showAllHighlightOne(items, extraStateFn) {
+  const ids = items.map(item => item.id);
+
+  const actions = [];
+
+  for (const item of items) {
+    const focusId = item.id;
+
+    const dimIds = ids.filter(id => id !== focusId);
+
+    const baseState = {
+      focus: [focusId],
+      dim: dimIds
+    };
+
+    const extraState = extraStateFn
+      ? extraStateFn(focusId, items)
+      : {};
+
+    actions.push({
+      time: item.showAt,
+
+      state: {
+        ...baseState,
+        ...extraState
+      }
+    });
+  }
+
+  return actions;
+}

package/src/compiler/animation-primtives/showOneAtATime.js

@@ -0,0 +1,24 @@
+// /src/compiler/animation-primitives/showOneAtATime.js
+
+export function showOneAtATime(items) {
+  const ids = items.map(item => item.id);
+
+  const actions = [];
+
+  for (const item of items) {
+    const activeId = item.id;
+
+    const hiddenIds = ids.filter(id => id !== activeId);
+
+    actions.push({
+      time: item.showAt,
+
+      state: {
+        visible: [activeId],
+        hidden: hiddenIds
+      }
+    });
+  }
+
+  return actions;
+}

package/src/compiler/templates/compileBarChart.js

@@ -0,0 +1,91 @@
+
+// /src/compiler/templates/compileBarChart.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileBarChart(slide) {
+  const rawItems = slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const bars =
+    items.filter(
+      d => d.name === "bar"
+    );
+
+  const ids =
+    items.map(i => i.id);
+
+  const barsData =
+    bars.map(d => ({
+      id: d.id,
+
+      label: d.label,
+
+      value:
+        Number(d.value),
+
+      classes:
+        d.classes || ""
+    }));
+
+  const maxValue =
+    Math.max(
+      ...barsData.map(
+        b => b.value
+      ),
+      1
+    );
+
+  const html = `
+    <section class="slide barChart">
+
+      <div class="bar-chart">
+
+        ${barsData.map(bar => {
+          const width =
+            (bar.value / maxValue)
+            * 100;
+
+          return `
+            <div
+              id="${bar.id}"
+
+              class="bar-row hidden ${bar.classes}"
+            >
+
+              <div class="bar-label">
+                ${bar.label}
+              </div>
+
+              <div class="bar-track">
+                <div
+                  class="bar-fill"
+
+                  style="width:${width}%"
+                ></div>
+              </div>
+
+              <div class="bar-value">
+                ${bar.value}
+              </div>
+
+            </div>
+          `;
+        }).join("")}
+
+      </div>
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileBulletList.js

@@ -0,0 +1,37 @@
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileBulletList(slide) {
+  const rawItems = slide.data ?? [];
+
+  const items = addIdToItems(rawItems);
+
+  const bullets = items.filter(d => d.name === "bullet");
+
+  const ids = items.map(i => i.id);
+
+  const html = `
+    <section class="slide bulletList">
+      <ul>
+        ${bullets
+          .map(
+            b => `
+              <li
+                id="${b.id}"
+                class="hidden"
+              >
+                ${b.content}
+              </li>
+            `
+          )
+          .join("")}
+      </ul>
+    </section>
+  `;
+
+  return {
+    html,
+    animation: "progressiveReveal",
+    ids
+  };
+}

package/src/compiler/templates/compileEq.js

@@ -0,0 +1,135 @@
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileEq(slide) {
+	const rawItems = slide.data ?? [];
+
+	if (!rawItems.length) {
+		throw new Error(
+			"eq: requires lines"
+		);
+	}
+
+	const items =
+		addIdToItems(rawItems);
+
+	// --------------------------------------------------
+	// build lines + spItems
+	// --------------------------------------------------
+
+	const lines =
+		items.map(line => {
+			const spItems =
+				(line.spItems || []).map(
+					(sp, i) => ({
+						...sp,
+
+						id:
+							`${line.id}-sp-${i + 1}`
+					})
+				);
+
+			return {
+				...line,
+
+				spItems
+			};
+		});
+
+	// --------------------------------------------------
+	// primitive items
+	// --------------------------------------------------
+
+	const primitiveItems =
+		lines.map(line => ({
+			id: line.id,
+
+			showAt: line.showAt,
+
+			spIds:
+				line.spItems.map(
+					sp => sp.id
+				)
+		}));
+
+	// --------------------------------------------------
+	// html
+	// --------------------------------------------------
+
+	const html = `
+		<section class="slide eq">
+
+			<ul class="eq-lines">
+
+				${lines.map(line => {
+
+					let content =
+						line.content;
+
+					if (
+						line.name === "math"
+					) {
+						content =
+							"$$ " +
+							line.content +
+							" $$";
+					}
+
+					return `
+						<li
+							id="${line.id}"
+
+							class="
+								eq-item
+								eq-${line.name}
+							"
+						>
+							${content}
+						</li>
+					`;
+				}).join("")}
+
+			</ul>
+
+			<div class="eq-side-panel">
+
+				${lines.map(line =>
+					line.spItems.map(sp => {
+
+						if (sp.name === "image") {
+							return `
+								<div
+									id="${sp.id}"
+
+									class="eq-explain-item hidden"
+								>
+									<img src="${sp.content}" />
+								</div>
+							`;
+						}
+
+						return `
+							<div
+								id="${sp.id}"
+
+								class="eq-explain-item hidden"
+							>
+								${sp.content}
+							</div>
+						`;
+					}).join("")
+				).join("")}
+
+			</div>
+
+		</section>
+	`;
+
+	return {
+		html,
+
+		animation:
+			"eqHighlightOne",
+
+		primitiveItems
+	};
+}

package/src/compiler/templates/compileFillImage.js

@@ -0,0 +1,50 @@
+// /src/compiler/templates/compileFillImage.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileFillImage(slide) {
+  const rawItems = slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const imageItem =
+    items.find(
+      d => d.name === "image"
+    );
+
+  if (!imageItem?.content) {
+    throw new Error(
+      "fillImage: image required"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide fillImage">
+
+      <img
+        id="${imageItem.id}"
+
+        class="
+          hidden
+          ${imageItem.classes || ""}
+        "
+
+        src="${imageItem.content}"
+      />
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileFocusList.js

@@ -0,0 +1,75 @@
+// /src/compiler/templates/compileFocusList.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileFocusList(slide) {
+  const rawItems = slide.data ?? [];
+
+  const items = addIdToItems(rawItems);
+
+  const bullets =
+    items.filter(
+      d => d.name === "bullet"
+    );
+
+  const headingItem =
+    items.find(
+      d => d.name === "heading"
+    );
+
+  if (!bullets.length) {
+    throw new Error(
+      "focusList: requires bullets"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide focusList">
+
+      ${
+        headingItem
+          ? `
+            <h1
+              id="${headingItem.id}"
+              class="${
+                headingItem.classes || ""
+              }"
+            >
+              ${headingItem.content}
+            </h1>
+          `
+          : ``
+      }
+
+      <ul>
+        ${bullets
+          .map(
+            b => `
+              <li
+                id="${b.id}"
+                class="${
+                  b.classes || ""
+                }"
+              >
+                ${b.content}
+              </li>
+            `
+          )
+          .join("")}
+      </ul>
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "highlightOne",
+
+    ids
+  };
+}

package/src/compiler/templates/compileImageGrid.js

@@ -0,0 +1,60 @@
+// /src/compiler/templates/compileImageGrid.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileImageGrid(slide) {
+  const rawItems = slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const images =
+    items.filter(
+      d => d.name === "image"
+    );
+
+  if (!images.length) {
+    throw new Error(
+      "imageGrid: requires images"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide imageGrid">
+
+      <div class="image-grid">
+
+        ${images.map(img => `
+          <div class="image-grid-item">
+
+            <img
+              id="${img.id}"
+
+              class="
+                hidden
+                ${img.classes || ""}
+              "
+
+              src="${img.content}"
+            />
+
+          </div>
+        `).join("")}
+
+      </div>
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}

package/src/compiler/templates/compileImageLeftBulletsRight.js

@@ -0,0 +1,78 @@
+// /src/compiler/templates/compileImageLeftBulletsRight.js
+
+import { addIdToItems } from "./helpers/addIdToItems.js";
+
+export function compileImageLeftBulletsRight(
+  slide
+) {
+  const rawItems =
+    slide.data ?? [];
+
+  const items =
+    addIdToItems(rawItems);
+
+  const imageItem =
+    items.find(
+      d => d.name === "image"
+    );
+
+  const bullets =
+    items.filter(
+      d => d.name === "bullet"
+    );
+
+  if (
+    !imageItem ||
+    !bullets.length
+  ) {
+    throw new Error(
+      "imageLeftBulletsRight: requires image and bullets"
+    );
+  }
+
+  const ids =
+    items.map(i => i.id);
+
+  const html = `
+    <section class="slide imageLeftBulletsRight">
+
+      <img
+        id="${imageItem.id}"
+
+        class="
+          hidden
+          ${imageItem.classes || ""}
+        "
+
+        src="${imageItem.content}"
+      />
+
+      <ul>
+
+        ${bullets.map(b => `
+          <li
+            id="${b.id}"
+
+            class="
+              hidden
+              ${b.classes || ""}
+            "
+          >
+            ${b.content}
+          </li>
+        `).join("")}
+
+      </ul>
+
+    </section>
+  `;
+
+  return {
+    html,
+
+    animation:
+      "progressiveReveal",
+
+    ids
+  };
+}