presi-slides 1.0.0

package/slide-decks/Sample Presi.textbundle/info.json

@@ -0,0 +1,10 @@
+{
+  "creatorIdentifier" : "net.shinyfrog.bear",
+  "net.shinyfrog.bear" : {
+    "bear-note-unique-identifier" : "F0C44A09-49A8-4C1D-8255-7B75118A4153",
+    "version" : "2.0"
+  },
+  "transient" : false,
+  "type" : "net.daringfireball.markdown",
+  "version" : 2
+}

package/slide-decks/Sample Presi.textbundle/text.md

@@ -0,0 +1,45 @@
+---
+title: Sample Presi
+---
+
+# Sample Presi
+
+---
+
+# Slide One
+
+- This is a simple slide
+- It just has bullets
+- It's boring, but it works.
+- Time for more fun
+
+---
+
+# Slide Two
+
+
+
+![](assets/image%206.png)
+
+- This slide has a picture
+- There are also bullets
+- They should be side by side
+
+---
+
+# Slide 3
+
+### Some Bullets
+
+- Thing 1
+- Thing 2
+- Thing 3
+
+### A Table
+
+| Row Number | Thing    |
+|------------|----------|
+| 1          | Parsley  |
+| 2          | Sage     |
+| 3          | Rosemary |
+| 4          | Thyme    |

package/slide-decks/slide-decks.11tydata.json

@@ -0,0 +1,3 @@
+{
+  "layout": "presentation.njk"
+}

package/src/index.js

@@ -0,0 +1,10 @@
+import { define } from "@unbndl/html";
+import { PresiElement, SlideElement, FooterElement, scaleSlides } from "./slides.js";
+
+define({
+  "slide-presi": PresiElement,
+  "slide-view": SlideElement,
+  "slide-footer": FooterElement
+});
+
+scaleSlides();

package/src/slide-footer.js

@@ -0,0 +1,109 @@
+import { css, html, shadow } from "@unbndl/html";
+
+export class FooterElement extends HTMLElement {
+  static template = html`
+    <template>
+      <footer>
+        <fieldset name="overlay">
+            <label>
+                <input type="radio" name="overlay" value="pointer" checked>
+                <span>Select</span>
+            </label>
+            <label>
+                <input type="radio" name="overlay" value="brush">
+                <span>Brush</span>
+            </label>
+            <label>
+                <input type="radio" name="overlay" value="eraser">
+                <span>Eraser</span>
+            </label>
+            <label>
+                <input type="radio" name="overlay" value="hidden">
+                <span>Hide</span>
+            </label>
+        </fieldset>
+        <span>
+          <input name="slide" type="number" min="1" value="1">
+          /
+          <slot name="count">N</span>
+        </span>
+      </footer>
+    </template>
+    `;
+
+  static styles = css`
+    footer {
+      display: flex;
+      justify-content: space-between;
+      color: var(--color-text-inverted);
+    }
+    span {
+      background: rgb(0 0 0 / 0.8);
+      border-radius: var(--size-spacing-small);
+      padding: var(--size-spacing-small);
+    }
+    input,
+    select {
+      font: inherit;
+      color: inherit;
+      line-height: inherit;
+      border: none;
+      border-radius: 1px;
+      background: transparent;
+    }
+    input[type="number"] {
+      width: 3em;
+    }
+  `;
+
+  slideControl = null;
+  overlayControl = null;
+
+  constructor() {
+    super();
+
+    shadow(this)
+      .template(FooterElement.template)
+      .styles(FooterElement.styles)
+      .delegate('input[name="slide"]', {
+        input: (ev) =>
+          this.relay("slide:input", { slide: ev.target.value })
+      })
+      .delegate('input[name="overlay"]', {
+        change: (ev) =>
+          this.relay("slide:overlay", { overlay: ev.target.value })
+      });
+
+    this.slideControl = this.shadowRoot.querySelector(
+      'input[name="slide"]'
+    );
+    this.overlayControl = this.shadowRoot.querySelector(
+      'fieldset[name="overlay"]'
+    );
+
+  }
+
+  static observedAttributes = ["slide", "overlay", "color"];
+
+  attributeChangedCallback(name, _, newValue) {
+    switch (name) {
+      case "slide":
+        this.slideControl.value = newValue;
+        break;
+      case "overlay": {
+        const input = this.overlayControl.querySelector(`input[value="${newValue}"]`);
+        if (input) input.checked = true;
+        break;
+      }
+    }
+  }
+
+  relay(type, detail) {
+    const event = new CustomEvent(type, {
+      bubbles: true,
+      composed: true,
+      detail
+    });
+    this.dispatchEvent(event);
+  }
+}

package/src/slide-presi.js

@@ -0,0 +1,120 @@
+import { html } from "@unbndl/html";
+
+const MIN_INTERSECTION = 0.4;
+const MAX_INTERSECTION = 0.8;
+
+export class PresiElement extends HTMLElement {
+  VIEW_ELEMENT = "slide-view";
+  FOOTER_ELEMENT = "slide-footer";
+
+  controls = null;
+  active = null;
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      let maxIntersection = 0;
+      let maxElement = null;
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const element = entry.target;
+          //console.log("Intersection:", element, entry.intersectionRatio);
+          if (entry.intersectionRatio < MIN_INTERSECTION) {
+            element.removeAttribute("active");
+          } else {
+            if (entry.intersectionRatio > maxIntersection) {
+              maxIntersection = entry.intersectionRatio;
+              maxElement = element;
+            }
+          }
+        }
+      });
+
+      if (maxElement && maxElement !== this.active) {
+        this.setActiveSlide(maxElement);
+        // this.gotoSlide(maxElement);
+      }
+    },
+    {
+      threshold: [0, MIN_INTERSECTION, MAX_INTERSECTION, 1],
+      delay: 300
+    }
+  );
+
+  constructor() {
+    super();
+    this.addEventListener("slide:input", (ev) => {
+      const { slide } = ev.detail;
+      const element = this.slide(slide);
+      // console.log("Change Slide:", slide, element);
+      this.setActiveSlide(element);
+      this.jumpToSlide(element);
+    });
+    this.addEventListener("slide:overlay", (ev) => {
+      this.manageOverlay(ev.detail);
+    });
+  }
+
+  slide(n) {
+    const slides = Array.from(
+      this.querySelectorAll(this.VIEW_ELEMENT)
+    );
+    return slides[n - 1];
+  }
+
+  connectedCallback() {
+    const slides = Array.from(
+      this.querySelectorAll(this.VIEW_ELEMENT)
+    );
+    this.controls = this.querySelector(this.FOOTER_ELEMENT);
+    slides.forEach((target) => this.observer.observe(target));
+  }
+
+  gotoSlide(element) {
+    console.log("Going to slide", element);
+    if (element) {
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest"
+      });
+    }
+  }
+
+  jumpToSlide(element) {
+    if (element) {
+      element.scrollIntoView({
+        block: "center",
+        inline: "nearest"
+      });
+    }
+  }
+
+  setActiveSlide(element) {
+    //console.log("Activating slide", element);
+    this.active = element;
+    if (this.active) {
+      this.active.setAttribute("active", "active");
+      const slides = Array.from(
+        this.querySelectorAll(this.VIEW_ELEMENT)
+      );
+      const index = slides.findIndex(
+        (slide) => slide === element
+      );
+      if (this.controls) {
+        this.controls.setAttribute("slide", index + 1);
+        this.controls.setAttribute(
+          "overlay",
+          element.getAttribute("overlay") || "pointer"
+        );
+      }
+    }
+  }
+
+  manageOverlay(options) {
+    const { overlay } = options || {};
+    console.log("Overlay options", options);
+    if (this.active && overlay) {
+      this.active.setAttribute("overlay", overlay);
+    }
+  }
+}

package/src/slide-view.js

@@ -0,0 +1,142 @@
+import { html, css, shadow } from "@unbndl/html";
+import Konva from 'konva';
+
+
+export class SlideElement extends HTMLElement {
+  static template = html`
+    <template>
+      <slot></slot>
+      <div id="overlay"></div>
+    </template>
+  `;
+
+  static styles = css`
+    :host {
+      --slide-pointer-events: none;
+      --slide-opacity: 1;
+      --slide-overlay-visibility: hidden;
+      /*position: relative;*/
+    }
+    @media screen {
+      :host {
+        --slide-opacity: 1; // make it 0.2 for fading effect on scroll;
+        --slide-overlay-visibility: visible;
+      }
+      :host([active]) {
+        --slide-opacity: 1;
+      }
+      :host([overlay]) {
+          cursor: pointer;
+      }
+      :host([overlay="hidden"]) {
+        --slide-overlay-visibility: hidden;
+      }
+      :host([overlay="brush"]) {
+          cursor: url("/includes/pencil.png") 0 100, crosshair;
+        --slide-pointer-events: auto;
+      }
+      :host([overlay="eraser"]) {
+          cursor: not-allowed;
+        --slide-pointer-events: auto;
+      }
+      #overlay {
+        position: absolute;
+        inset: 0;
+        pointer-events: var(--slide-pointer-events);
+        visibility: var(--slide-overlay-visibility);
+      }
+      ::slotted(*) {
+        opacity: var(--slide-opacity);
+        transition: opacity 1s;
+      }
+    }
+  `;
+
+  // initialize the Konva overlay
+  isPaint = false;
+  overlayMode = "pointer";
+  overlayColor = "red";
+  stage = null;
+
+  constructor() {
+    super();
+
+    shadow(this)
+      .template(SlideElement.template)
+      .styles(SlideElement.styles);
+  }
+
+  static observedAttributes = ["active", "overlay"];
+
+  attributeChangedCallback(name, _, newValue) {
+    switch (name) {
+      case "overlay":
+        this.overlayMode = newValue;
+        this.createOverlay();
+        break;
+      case "color":
+        this.overlayColor = newValue;
+        break;
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.stage) delete this.stage;
+  }
+
+  createOverlay() {
+    if (this.stage) return;
+
+    const container = this.shadowRoot.getElementById("overlay");
+
+    console.log("Creating overlay if needed", this.stage);
+
+    this.stage = new Konva.Stage({
+      container,
+      width: container?.clientWidth,
+      height: container?.clientHeight
+    });
+
+    this.layer = new Konva.Layer();
+    this.stage.add(this.layer);
+
+    this.stage.on("mousedown touchstart", (e) => {
+      this.isPaint = true;
+      const pos = this.stage.getPointerPosition();
+      console.log("touchstart", pos);
+      this.lastLine = new Konva.Line({
+        stroke: this.overlayColor,
+        strokeWidth: this.overlayMode === "eraser" ? 10 : 4,
+        globalCompositeOperation:
+          this.overlayMode === "brush"
+            ? "source-over"
+            : "destination-out",
+        // round cap for smoother lines
+        lineCap: "round",
+        lineJoin: "round",
+        // add point twice, so we have some drawings even on a simple click
+        points: [pos.x, pos.y, pos.x, pos.y]
+      });
+      this.layer.add(this.lastLine);
+    });
+
+    this.stage.on("mouseup touchend", () => {
+      this.isPaint = false;
+      console.log("touchend");
+    });
+
+    // and core function - drawing
+    this.stage.on("mousemove touchmove", (e) => {
+      if (!this.isPaint) return;
+
+      // prevent scrolling on touch devices
+      e.evt.preventDefault();
+
+      const pos = this.stage.getPointerPosition();
+      const newPoints = this.lastLine
+        .points()
+        .concat([pos.x, pos.y]);
+      this.lastLine.points(newPoints);
+    });
+  }
+}

package/src/slides.js

@@ -0,0 +1,18 @@
+export * from "./slide-footer.js";
+export * from "./slide-view.js";
+export * from "./slide-presi.js";
+
+export function scaleSlides() {
+  window.addEventListener("resize", computeSlideScaling);
+  computeSlideScaling();
+}
+
+function computeSlideScaling() {
+  const body = document.body;
+  const vw = document.documentElement.clientWidth;
+  const vh = document.documentElement.clientHeight;
+  body.classList.add("presentation-scaled");
+  body.style.setProperty("--viewport-width", vw.toString());
+  body.style.setProperty("--viewport-height", vh.toString());
+  console.log("Rescaled", vw, vh);
+}

package/transforms/slides.js

@@ -0,0 +1,75 @@
+import path from "node:path";
+import { JSDOM } from "jsdom";
+
+const PRESI_COMPONENT = "slide-presi";
+const FOOTER_COMPONENT = "slide-footer";
+const SLIDE_COMPONENT = "slide-view";
+
+// JSDOM cannot parse modern CSS stylesheets.
+// Workaround from: https://github.com/jsdom/jsdom/issues/3236#issuecomment-1699777509
+
+const originalConsoleError = console.error;
+console.error = (message, ...optionalParams) => {
+  if (message.includes("Could not parse CSS stylesheet")) {
+    return;
+  }
+  originalConsoleError(message, ...optionalParams);
+};
+
+export default function (content) {
+  const { inputPath, outputPath } = this.page;
+  const inputDir = path.dirname(inputPath);
+  const inputFile = path.basename(inputPath);
+  const outputDir = path.dirname(outputPath);
+  const outputBase = path.dirname(outputDir);
+  const outputFile = path.basename(outputPath);
+
+  if (
+    inputPath &&
+    inputDir.endsWith(".textbundle") &&
+    inputFile === "text.md"
+  ) {
+    console.log("Processing slides in...", inputDir);
+
+    const DOM = new JSDOM(content);
+    const { document } = DOM.window;
+    const body = document.querySelector("body");
+    const children = Array.from(body.children);
+    const parts = children.reduce(
+      (acc, val) => {
+        let current = acc.length ? acc[acc.length - 1] : [];
+        let previous = acc;
+        if (val.tagName === "HR") {
+          current = [];
+        } else {
+          current = current.concat([val]);
+          previous = previous.slice(0, -1);
+        }
+        return previous.concat([current]);
+      },
+      [[]]
+    );
+    const count = parts.length;
+    const slides = parts.map((children, i) => {
+      const section = document.createElement(SLIDE_COMPONENT);
+      section.replaceChildren(...children);
+      return section;
+    });
+
+    const footer = document.createElement(FOOTER_COMPONENT);
+    const countSpan = document.createElement('span');
+    countSpan.textContent = count.toString();
+    countSpan.setAttribute("slot", "count");
+    footer.replaceChildren(countSpan);
+
+
+    const presi = document.createElement(PRESI_COMPONENT);
+    presi.replaceChildren(...slides, footer);
+
+    body.replaceChildren(presi);
+
+    return `<!doctype html>${document.documentElement.outerHTML}`;
+  }
+
+  return content;
+}

package/vite.config.js

@@ -0,0 +1,9 @@
+export default {
+  build: {
+    lib: {
+      entry: ['src/index.js'],
+      fileName: "presi-slides",
+      formats: ['es', 'cjs']
+    }
+  }
+}