Move theme from subrepo into the main repo
the theme is customized for this site so having it as a sub repo dosent make sense
This commit is contained in:
310
themes/hugo-theme-minos/static/js/as-dithered-image.js
Normal file
310
themes/hugo-theme-minos/static/js/as-dithered-image.js
Normal file
@@ -0,0 +1,310 @@
|
||||
const DITHERED_IMAGE_STYLE = `
|
||||
.ditheredImageStyle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
`
|
||||
|
||||
const workerPath = document.currentScript.src.replace("as-dithered-image.js", "ditherworker.js")
|
||||
|
||||
class ASDitheredImage extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
|
||||
this.original_image_ = undefined
|
||||
this.force_refresh_ = false
|
||||
this.crunchFactor_ = this.getAutoCrunchFactor()
|
||||
this.canvas_ = undefined
|
||||
this.context_ = undefined
|
||||
this.image_loading_ = false
|
||||
this.ignore_next_resize_ = false
|
||||
this.worker_ = new Worker(workerPath)
|
||||
this.cutoff_ = 0.5
|
||||
this.darkrgba_ = [0, 0, 0, 255]
|
||||
this.lightrgba_ = [255, 255, 255, 255]
|
||||
|
||||
this.worker_.onmessage = ((e) => {
|
||||
const imageData = e.data.imageData
|
||||
this.context_.putImageData(imageData, 0, 0)
|
||||
}).bind(this)
|
||||
|
||||
this.resizing_timeout_ = undefined
|
||||
|
||||
this.last_draw_state_ = { width: 0, height: 0, crunchFactor: 0, imageSrc: "" }
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (!this.isConnected) {
|
||||
return
|
||||
}
|
||||
|
||||
const shadowDOM = this.attachShadow({ mode: "open" })
|
||||
|
||||
const style = document.createElement("style")
|
||||
style.innerHTML = DITHERED_IMAGE_STYLE
|
||||
shadowDOM.appendChild(style)
|
||||
|
||||
this.canvas_ = document.createElement("canvas")
|
||||
this.canvas_.setAttribute("role", "image")
|
||||
this.canvas_.setAttribute("aria-label", this.getAttribute("alt"))
|
||||
this.canvas_.classList.add("ditheredImageStyle")
|
||||
shadowDOM.appendChild(this.canvas_)
|
||||
|
||||
this.context_ = this.canvas_.getContext("2d", { willReadFrequently: true })
|
||||
|
||||
const resizeObserver = new ResizeObserver(((entries) => {
|
||||
// browsers generated lots of resize events but we don't want to start refreshing until
|
||||
// the user has stopped resizing the page
|
||||
|
||||
if (entries.length > 0) {
|
||||
if (entries[0].contentBoxSize) {
|
||||
|
||||
if (this.ignore_next_resize_ == true) {
|
||||
this.ignore_next_resize_ = false
|
||||
return
|
||||
}
|
||||
if (this.resizing_timeout_ != undefined) {
|
||||
clearTimeout(this.resizing_timeout_)
|
||||
}
|
||||
this.resizing_timeout_ = setTimeout((() => {
|
||||
this.resizing_timeout_ = undefined
|
||||
this.force_refresh_ = true
|
||||
this.requestUpdate()
|
||||
}).bind(this), 200)
|
||||
}
|
||||
|
||||
}
|
||||
}).bind(this))
|
||||
|
||||
resizeObserver.observe(this.canvas_)
|
||||
|
||||
// since we avoid drawing the image if the element of far offscreen we need to use
|
||||
// an IntersectionObserver to notify use when the element is likely to be displayed
|
||||
const intersectionObserver = new IntersectionObserver(((intersections) => {
|
||||
if (intersections.length > 0) {
|
||||
if (intersections[0].isIntersecting) {
|
||||
this.force_refresh_ = true
|
||||
this.requestUpdate()
|
||||
}
|
||||
}
|
||||
}).bind(this), { root: null, rootMargin: "1000px", threshold: [0] })
|
||||
intersectionObserver.observe(this)
|
||||
|
||||
this.force_refresh_ = true
|
||||
this.requestUpdate()
|
||||
}
|
||||
|
||||
static get observedAttributes() { return ["src", "crunch", "alt", "cutoff", "darkrgba", "lightrgba"] }
|
||||
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return
|
||||
|
||||
if ((name === "src")) {
|
||||
this.force_refresh_ = true
|
||||
this.original_image_ = undefined
|
||||
this.requestUpdate()
|
||||
} else if (name === "crunch") {
|
||||
if (newValue === "auto") {
|
||||
this.crunchFactor_ = this.getAutoCrunchFactor()
|
||||
} else if (newValue === "pixel") {
|
||||
this.crunchFactor_ = 1.0 / this.getDevicePixelRatio()
|
||||
} else {
|
||||
this.crunchFactor_ = parseInt(newValue, 10)
|
||||
if (isNaN(this.crunchFactor_)) {
|
||||
this.crunchFactor_ = this.getAutoCrunchFactor()
|
||||
}
|
||||
}
|
||||
this.force_refresh_ = true
|
||||
this.requestUpdate()
|
||||
} else if (name === "alt") {
|
||||
this.altText = newValue;
|
||||
if (this.canvas != undefined) {
|
||||
let currentAltText = this.canvas.getAttribute("aria-label")
|
||||
if (currentAltText != newValue) {
|
||||
this.canvas.setAttribute("aria-label", newValue)
|
||||
}
|
||||
}
|
||||
} else if (name === "cutoff") {
|
||||
this.cutoff_ = parseFloat(newValue)
|
||||
if (isNaN(this.cutoff_)) {
|
||||
this.cutoff_ = 0.5
|
||||
}
|
||||
this.cutoff_ = Math.min(1.0, Math.max(0.0, this.cutoff_))
|
||||
this.force_refresh_ = true
|
||||
this.requestUpdate()
|
||||
} else if (name === "darkrgba") {
|
||||
// must be in the form "rgba(10, 10, 10, 255)"
|
||||
this.darkrgba_ = this.parseRGBA(newValue)
|
||||
this.force_refresh_ = true
|
||||
this.requestUpdate()
|
||||
}
|
||||
else if (name === "lightrgba") {
|
||||
this.lightrgba_ = this.parseRGBA(newValue)
|
||||
this.force_refresh_ = true
|
||||
this.requestUpdate()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// The crunch factor defaults 1 css pixel to 1 dither pixel which I think looks best when the device pixel ratio is 1 or 2
|
||||
// If the pixel ratio is 3 or above (like on my iPhone) then even css pixels are too small to make dithering
|
||||
// look effective, so I double the pixels again
|
||||
getAutoCrunchFactor() {
|
||||
if (this.getDevicePixelRatio() < 3) {
|
||||
return 1
|
||||
} else {
|
||||
return 2
|
||||
}
|
||||
}
|
||||
|
||||
getDevicePixelRatio() {
|
||||
// this should always be an integer for the dithering code to work
|
||||
return window.devicePixelRatio
|
||||
}
|
||||
|
||||
isInOrNearViewport() {
|
||||
// this only handles vertical scrolling, could be extended later to handle horizontal
|
||||
// but it probably doesn't matter
|
||||
const margin = 1500
|
||||
const r = this.getBoundingClientRect()
|
||||
|
||||
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight)
|
||||
const above = r.bottom + margin < 0
|
||||
const below = r.top - margin > viewHeight
|
||||
|
||||
return (!above && !below)
|
||||
}
|
||||
|
||||
// all drawing is funneled through requestUpdate so that multiple calls are coalesced to prevent
|
||||
// processing the image multiple times for no good reason
|
||||
requestUpdate() {
|
||||
|
||||
if (this.original_image_ != undefined) {
|
||||
if (this.isInOrNearViewport() == false) {
|
||||
return // suppress update, the intersection observer will call us back as the element scrolls into view
|
||||
}
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(((timestamp) => {
|
||||
if ((this.force_refresh_ == false)) {
|
||||
return
|
||||
}
|
||||
if (this.original_image_ == undefined) {
|
||||
this.loadImage()
|
||||
return
|
||||
}
|
||||
if (this.force_refresh_) {
|
||||
this.repaintImage()
|
||||
}
|
||||
|
||||
}).bind(this))
|
||||
}
|
||||
|
||||
loadImage() {
|
||||
if (this.image_loading_ == true) {
|
||||
return
|
||||
}
|
||||
this.image_loading_ = true
|
||||
const image = new Image()
|
||||
image.src = this.getAttribute("src")
|
||||
|
||||
// image.onerror is old and (literally) busted - it does not file on decode errors (ie if the src does not point to a valid image)
|
||||
// The new way is promise based - possibly better
|
||||
image.decode().then((() => {
|
||||
this.original_image_ = image
|
||||
this.ignore_next_resize_ = true
|
||||
this.canvas_.style.aspectRatio = this.original_image_.width + "/" + this.original_image_.height
|
||||
this.force_refresh_ = true
|
||||
this.requestUpdate()
|
||||
}).bind(this))
|
||||
.catch(((decodeError) => {
|
||||
console.log("Error decoding image: ", decodeError)
|
||||
this.original_image_ = undefined
|
||||
}).bind(this))
|
||||
.finally((() => {
|
||||
this.image_loading_ = false
|
||||
}).bind(this))
|
||||
}
|
||||
|
||||
parseRGBA(s) {
|
||||
var matches = s.match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*(\d+)\s*\)$/i);
|
||||
if (matches) {
|
||||
return [matches[1], matches[2], matches[3], matches[4]]
|
||||
}
|
||||
else {
|
||||
return [255, 255, 255, 255]
|
||||
}
|
||||
}
|
||||
|
||||
repaintImage() {
|
||||
const rect = this.canvas_.getBoundingClientRect()
|
||||
let screenPixelsToBackingStorePixels = this.getDevicePixelRatio()
|
||||
let fractionalPart = screenPixelsToBackingStorePixels - Math.floor(screenPixelsToBackingStorePixels)
|
||||
|
||||
// that's it! I am officially giving up on trying to account for all the weird pixelDeviceRatios that Chrome likes
|
||||
// to serve up at different zoom levels. I can understand nice fractions like 2.5 but 1.110004 and 0.89233 are just stupid
|
||||
// If the fractional part doesn't make sense then just ignore it. This will give incorrect results but they still look
|
||||
// pretty good if you don't look too closely.
|
||||
if (this.getAttribute("crunch") == "pixel") {
|
||||
this.crunchFactor_ = 1.0 / this.getDevicePixelRatio()
|
||||
}
|
||||
|
||||
if ((1.0 / fractionalPart) > 3) {
|
||||
fractionalPart = 0
|
||||
screenPixelsToBackingStorePixels = Math.round(screenPixelsToBackingStorePixels)
|
||||
}
|
||||
if (fractionalPart != 0) {
|
||||
screenPixelsToBackingStorePixels = Math.round(screenPixelsToBackingStorePixels * Math.round(1.0 / fractionalPart))
|
||||
}
|
||||
|
||||
const calculatedWidth = Math.round(rect.width * screenPixelsToBackingStorePixels)
|
||||
const calculatedHeight = Math.round(rect.height * screenPixelsToBackingStorePixels)
|
||||
let adjustedPixelSize = Math.round(screenPixelsToBackingStorePixels * this.crunchFactor_)
|
||||
|
||||
// double check - we may have already painted this image
|
||||
if ((this.last_draw_state_.width == calculatedWidth) &&
|
||||
(this.last_draw_state_.height == calculatedHeight) &&
|
||||
(this.last_draw_state_.adjustedPixelSize == adjustedPixelSize) &&
|
||||
(this.last_draw_state_.imageSrc == this.original_image_.currentSrc) &&
|
||||
(this.last_draw_state_.cutoff == this.cutoff_) &&
|
||||
(this.last_draw_state_.darkrgba == this.darkrgba_) &&
|
||||
(this.last_draw_state_.lightrgba == this.lightrgba_)
|
||||
) {
|
||||
return; // nothing to do
|
||||
}
|
||||
|
||||
this.canvas_.width = calculatedWidth
|
||||
this.canvas_.height = calculatedHeight
|
||||
|
||||
this.last_draw_state_.width = this.canvas_.width
|
||||
this.last_draw_state_.height = this.canvas_.height
|
||||
this.last_draw_state_.adjustedPixelSize = adjustedPixelSize
|
||||
this.last_draw_state_.imageSrc = this.original_image_.currentSrc
|
||||
this.last_draw_state_.cutoff = this.cutoff_
|
||||
this.last_draw_state_.darkrgba = this.darkrgba_
|
||||
this.last_draw_state_.lightrgba = this.lightrgba_
|
||||
|
||||
|
||||
this.context_.imageSmoothingEnabled = true
|
||||
this.context_.drawImage(this.original_image_, 0, 0, this.canvas_.width / adjustedPixelSize, this.canvas_.height / adjustedPixelSize)
|
||||
const originalData = this.context_.getImageData(0, 0, this.canvas_.width / adjustedPixelSize, this.canvas_.height / adjustedPixelSize)
|
||||
this.context_.clearRect(0, 0, this.canvas_.width, this.canvas_.height)
|
||||
// TODO: look at transferring the data in a different datastructure to prevent copying
|
||||
// unfortunately Safari has poor support for createImageBitmap - using it with ImageData doesn't work
|
||||
const msg = {}
|
||||
msg.imageData = originalData
|
||||
msg.pixelSize = adjustedPixelSize
|
||||
msg.cutoff = this.cutoff_
|
||||
msg.blackRGBA = this.darkrgba_
|
||||
msg.whiteRGBA = this.lightrgba_
|
||||
this.worker_.postMessage(msg)
|
||||
|
||||
this.force_refresh_ = false
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('as-dithered-image', ASDitheredImage);
|
||||
Reference in New Issue
Block a user