svelte-cloudinary/src/index.ts

110 lines
3.6 KiB
TypeScript
Raw Normal View History

2020-11-08 10:22:02 +00:00
import { Cloudinary, Configuration, Transformation } from 'cloudinary-core'
2020-11-11 20:26:59 +00:00
export type ElementOrString = Element | string
export type Size = { width: number; height: number }
export type BindType = ElementOrString | true
export type BindObject = BindType | { width?: BindType; height?: BindType }
export type InitParameters = { debug?: boolean }
export type ImageParameters = {
src: string
options?: Transformation | Transformation.Options
bind?: BindObject
lazy?: boolean | IntersectionObserverInit
step?: number
}
2020-11-08 10:22:02 +00:00
let cl: Cloudinary | null = null
let DEBUG: boolean = false
2020-11-08 10:22:02 +00:00
function log(...msg: any[]) {
if (DEBUG) console.debug(...msg)
2020-11-08 10:22:02 +00:00
}
2020-11-11 20:26:59 +00:00
export function initialize(cloudinary: Configuration.Options, options: InitParameters = {}) {
DEBUG = options.debug || false
cl = Cloudinary.new(cloudinary)
}
2020-11-08 10:22:02 +00:00
const defaults: Transformation | Transformation.Options = {
fetchFormat: 'auto',
2020-12-20 09:11:22 +00:00
quality: 'auto',
2020-11-08 10:22:02 +00:00
}
function calculateApproxRealSize(size: string, step: number): number {
2020-11-08 10:22:02 +00:00
const withRatio = (parseInt(size) * window.devicePixelRatio) | 0
const approx = withRatio - (withRatio % step) + step
log('Size', withRatio, approx, step)
return approx
2020-11-08 10:22:02 +00:00
}
function getSizeOfElement(el: Element, step: number): Size {
2020-11-08 10:22:02 +00:00
const styles = window.getComputedStyle(el)
log('GetSizeOfElement', el, styles)
2020-11-08 10:22:02 +00:00
return {
width: calculateApproxRealSize(styles.width, step),
height: calculateApproxRealSize(styles.height, step),
2020-11-08 10:22:02 +00:00
}
}
function getSizeOfElementOrSelector(node: ElementOrString, elOrString: ElementOrString, step: number): Size {
2020-11-08 10:22:02 +00:00
if (typeof elOrString === 'string') {
const search = typeof node === 'string' ? window.document.querySelector(node) : node
if (!search) throw new Error('Could not find element: ' + node)
const closest = search.closest(elOrString)
if (closest) return getSizeOfElement(closest, step)
2020-11-08 10:22:02 +00:00
else throw new Error('Could not find element: ' + elOrString)
} else {
return getSizeOfElement(elOrString, step)
2020-11-08 10:22:02 +00:00
}
}
export function image(node: HTMLImageElement, parameters: ImageParameters) {
if (!parameters || !parameters.src) throw new Error('No url provided for cloudinary')
2020-11-08 10:45:55 +00:00
let { src, options, bind, lazy, step } = parameters
log('Image Declared', parameters)
2020-12-20 09:11:22 +00:00
options = options ?? {}
step = step ?? 200
2020-12-20 09:11:22 +00:00
lazy = lazy ?? true
2020-11-08 10:22:02 +00:00
if (!cl) throw new Error('Cloudinary not initialized')
if (!src) throw new Error('Src must be set in use:image')
if (bind) {
if (bind === true) {
bind = node
}
2020-11-08 10:59:06 +00:00
if (!options.crop) options.crop = 'fill'
2020-11-08 10:22:02 +00:00
if (bind instanceof Element) Object.assign(options, getSizeOfElement(bind, step))
2020-11-08 10:22:02 +00:00
else if (typeof bind === 'string') {
Object.assign(options, getSizeOfElementOrSelector(node, bind, step))
2020-11-08 10:22:02 +00:00
} else if (typeof bind === 'object') {
if (bind.width) {
options.width = getSizeOfElementOrSelector(node, bind.width === true ? node : bind.width, step).width
2020-11-08 10:22:02 +00:00
}
if (bind.height) {
options.height = getSizeOfElementOrSelector(node, bind.height === true ? node : bind.height, step).height
2020-11-08 10:22:02 +00:00
}
}
}
const all: Transformation | Transformation.Options = { ...defaults, ...options }
const attrs: any = cl.imageTag(parameters.src, all).attributes()
2020-12-20 09:11:22 +00:00
log('Attributes', attrs)
const replace = () => (node.src = attrs.src)
if (lazy && typeof IntersectionObserver !== 'undefined') {
const options: IntersectionObserverInit = lazy === true ? { rootMargin: '25%', threshold: 0 } : lazy
new IntersectionObserver((entries, observer) => {
if (entries[0].isIntersecting) {
observer.disconnect()
replace()
}
}, options).observe(node)
} else {
replace()
}
2020-11-08 10:22:02 +00:00
}