https://trmnl.com/assets/controllers/responsive_plate_controller-408f1118.js

1import { Controller } from "@hotwired/stimulus"
2
3const TRMNL21_CHAR_ADVANCE = 13
4const TRMNL21_LINE_HEIGHT = 21
5const ROW_GAP_CELLS = 4
6const LABEL_RESERVE_PX = 80
7const MAX_SCALE = 28
8const MIN_SCALE = 2
9
10export default class extends Controller {
11  connect() {
12    this.fit = this.fit.bind(this)
13    this.scheduleFit = this.scheduleFit.bind(this)
14    this.contentElement = this.element.querySelector("[data-responsive-plate-content]") || this.element
15
16    this.resizeObserver = new ResizeObserver(this.scheduleFit)
17    this.resizeObserver.observe(this.contentElement)
18    window.addEventListener("resize", this.scheduleFit)
19
20    if (document.fonts?.ready) {
21      document.fonts.ready.then(this.scheduleFit)
22    }
23
24    this.scheduleFit()
25  }
26
27  disconnect() {
28    this.resizeObserver?.disconnect()
29    window.removeEventListener("resize", this.scheduleFit)
30
31    if (this.animationFrame) {
32      cancelAnimationFrame(this.animationFrame)
33    }
34  }
35
36  scheduleFit() {
37    if (this.animationFrame) {
38      cancelAnimationFrame(this.animationFrame)
39    }
40
41    this.animationFrame = requestAnimationFrame(this.fit)
42  }
43
44  fit() {
45    this.animationFrame = null
46
47    const text = this.element.dataset.pixelText || ""
48    if (!text.length) return
49
50    const padCells = parseInt(this.element.dataset.padCells || "6", 10)
51    const rows = parseInt(this.element.dataset.pixelRows || "1", 10)
52    const usableWidth = this.contentElement.clientWidth
53    const textWidth = text.length * TRMNL21_CHAR_ADVANCE
54    const textHeight = rows * TRMNL21_LINE_HEIGHT + (rows - 1) * ROW_GAP_CELLS
55
56    const maxWidthScale = Math.floor(usableWidth / (textWidth + 2 * padCells))
57    const scale = Math.max(MIN_SCALE, Math.min(maxWidthScale, MAX_SCALE))
58    const contentHeight = scale * (textHeight + 2 * padCells) + LABEL_RESERVE_PX
59
60    this.element.style.setProperty("--scale", scale)
61    this.element.style.setProperty("--plate-content-height", `${contentHeight}px`)
62    this.element.style.setProperty("--trmnl-font-grid-origin-x", `${Math.round(this.contentElement.getBoundingClientRect().left)}px`)
63  }
64}