Jason Jordan
35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
// app/javascript/controllers/font_validator_controller.js
|
|
import { Controller } from "@hotwired/stimulus"
|
|
|
|
export default class extends Controller {
|
|
static targets = ["textField", "hiddenField", "countDisplayField"]
|
|
|
|
connect() {
|
|
this.measure()
|
|
}
|
|
|
|
measure() {
|
|
const text = this.textFieldTarget.value
|
|
const pixelWidth = this.getTextWidth(text, "bold 6px sans-serif")
|
|
|
|
// Do something with the pixel width (e.g., store in a hidden field for Rails to read)
|
|
if (this.hasHiddenFieldTarget) {
|
|
this.hiddenFieldTarget.value = pixelWidth
|
|
this.countDisplayFieldTarget.textContent = `${pixelWidth}`
|
|
if (pixelWidth > 100) {
|
|
this.countDisplayFieldTarget.classList.add("text-brightlava")
|
|
} else {
|
|
this.countDisplayFieldTarget.classList.remove("text-brightlava")
|
|
}
|
|
}
|
|
}
|
|
|
|
// Canvas measurement trick
|
|
getTextWidth(text, font) {
|
|
const canvas = document.createElement("canvas")
|
|
const context = canvas.getContext("2d")
|
|
context.font = font
|
|
const metrics = context.measureText(text)
|
|
return Math.ceil(metrics.width)
|
|
}
|
|
} |