From f6bb3afab23d180aac5132bda9f557c79c86a52d Mon Sep 17 00:00:00 2001 From: Matthias Leuffen Date: Tue, 3 Oct 2023 12:20:20 +0200 Subject: [PATCH] update --- debug.scss | 32 ------------ src/demo/style.scss | 51 ------------------ src/helper/MediaSupport.ts | 84 ----------------------------- src/processor/jodaimageproc.ts | 96 ---------------------------------- src/vendor/LeuCDNImageProc.ts | 57 -------------------- 5 files changed, 320 deletions(-) delete mode 100755 debug.scss delete mode 100755 src/demo/style.scss delete mode 100755 src/helper/MediaSupport.ts delete mode 100755 src/processor/jodaimageproc.ts delete mode 100755 src/vendor/LeuCDNImageProc.ts diff --git a/debug.scss b/debug.scss deleted file mode 100755 index d57e716..0000000 --- a/debug.scss +++ /dev/null @@ -1,32 +0,0 @@ - - -.debug { - --joda-init: true; - - * { - position: relative; - border: 2px solid red; - margin: 20px; - padding: 10px - } - .joda-visualize { - position: absolute; - top: 0; - left: 0; - background-color: red; - color: white; - font-family: monospace; - font-weight: bold; - font-size: 12px; - padding: 0; - margin: 0; - height: 12px; - line-height: 10px; - border: 0; - } - -} - - - - diff --git a/src/demo/style.scss b/src/demo/style.scss deleted file mode 100755 index b77dd90..0000000 --- a/src/demo/style.scss +++ /dev/null @@ -1,51 +0,0 @@ - -tt-content { - /* indicates the stylesheet is loaded */ - --joda-init: 1; - - &.debug { - * { - border: 1px solid red; - margin-left: 10px; - padding: 5px; - } - } -} - - -img { - --joda-wrap: "@image"; - - aspect-ratio: 1; - - max-width: 100px; -} - - - -.mask { - --mask-image: url(/assets/morphing.svg); - //mask-image: var(--mask-image); - mask-mode: alpha; - mask-size: contain; - mask-repeat: no-repeat; -} - - - - -.row > div { - --joda-class: ":: col-12 :xl: col"; -} - -.header1 { - --joda-tpl: wumme(asi: 1, muschi: "wurst"); -} - -.tt-card { - --tjs-param-def--title: "Hier können Sie einen Titel eingeben"; - --title: "Default Title"; - - --tjs-replace-by: "@card :: col-12 :xl: col-6 > @card-body >| Card Hello World" -} - diff --git a/src/helper/MediaSupport.ts b/src/helper/MediaSupport.ts deleted file mode 100755 index dd5f0b9..0000000 --- a/src/helper/MediaSupport.ts +++ /dev/null @@ -1,84 +0,0 @@ -const bestFormats = [ - "svg", "avif", "webp", "jpg", "jpeg", "png", "gif" -] -export class MediaSupport { - - - - public avif : boolean = null - public webp : boolean = null - public jpg : boolean = true - public jpeg : boolean = true - public gif : boolean = true - public png : boolean = true - - - public valid : boolean = false; - - async detect() { - this.webp = await testWebP() as any; - this.avif = await testAvif() as any; - console.log("Media supports", this); - this.valid = true; - } - - - isSupported(extension : string) : boolean { - extension = extension.trim().toLowerCase(); - if(typeof this[extension] === "undefined") - return false; - return this[extension]; - } - - getBestExtension (extensions : string[]) : string { - for(let curExt of bestFormats) { - if (typeof extensions.find(e => e === curExt) !== "undefined" && this.isSupported(curExt)) - return curExt; - } - return null; - } - -} - -function testWebP() { - return new Promise(res => { - const webP = new Image(); - webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'; - webP.onload = webP.onerror = () => { - res(webP.height === 2); - }; - }) -}; - - -function testAvif() { - return new Promise(res => { - const webP = new Image(); - webP.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A='; - webP.onload = webP.onerror = () => { - res(webP.height === 2); - }; - }) -}; - - -let promises : any[] = null; -let mediaSupport = new MediaSupport(); - -export async function getMediaSupport() : Promise { - - if (promises === null) { - promises = []; - await mediaSupport.detect(); - promises.forEach((exec) => exec(mediaSupport)); - } - - if (mediaSupport.valid === false) { - return new Promise((resolve) => { - promises.push(resolve); - }) - } - return mediaSupport; - - -} diff --git a/src/processor/jodaimageproc.ts b/src/processor/jodaimageproc.ts deleted file mode 100755 index 0409314..0000000 --- a/src/processor/jodaimageproc.ts +++ /dev/null @@ -1,96 +0,0 @@ -import {LeuCDNImageProc} from "../vendor/LeuCDNImageProc"; -import {getMediaSupport, MediaSupport} from "../helper/MediaSupport"; -import {Logger} from "../helper/logger"; - -type Resolution = { - width : number, - height: number -} - -export type JodaImageMetaData = { - formats: string[], - resolutions: Resolution[], - filename: string, - alt: string, - [key : string] : any - - getUrl(resolution : Resolution, format : string) : string -} - - -export interface JodaImageProcessorInterface { - isSuitable(url : string) : boolean; - parseUrl(url : string) : JodaImageMetaData; -} - - - -let imageIndex = 0; - -export class JodaImageProc { - - constructor(private logger : Logger) { - } - - private getBestResolution(data: Resolution[]): Resolution { - data.sort((a, b) => { - // sort by width ascending - if (a.width < b.width) - return -1; - if (a.width > b.width) - return 1; - return 0; - }); - - let fit = data.find((e) => e.width >= window.innerWidth); - if (typeof fit === "undefined") - fit = data[data.length - 1]; - return fit ?? {width: 0, height: 0} - } - - - private getBestFormat(formats : string[], mediaSupport: MediaSupport) : string { - return mediaSupport.getBestExtension(formats); - - } - - public async process(node : HTMLElement) { - let processor = new LeuCDNImageProc(); - let mediaSupport = await getMediaSupport(); - for (let imgNode of node.querySelectorAll("img[src]") as any) { - imageIndex++; - let src = imgNode.getAttribute("src"); - if ( ! processor.isSuitable(src)) - continue; - - imgNode.setAttribute("data-src-orig", src); - - let data = processor.parseUrl(src); - let bestFit = this.getBestResolution(data.resolutions); - imgNode.setAttribute("width", bestFit.width.toString()); - imgNode.setAttribute("height", bestFit.height.toString()); - if (imgNode.getAttribute("alt") === null) - imgNode.setAttribute("alt", data.alt); - imgNode.setAttribute("src", data.getUrl(bestFit, this.getBestFormat(data.formats, mediaSupport))); - - if (imageIndex < 3) { - imgNode.setAttribute("loading", "eager"); - } else { - imgNode.setAttribute("loading", "lazy"); - } - - - - - } - - - - - - - } - - - -} diff --git a/src/vendor/LeuCDNImageProc.ts b/src/vendor/LeuCDNImageProc.ts deleted file mode 100755 index 40aab47..0000000 --- a/src/vendor/LeuCDNImageProc.ts +++ /dev/null @@ -1,57 +0,0 @@ -import {JodaImageMetaData, JodaImageProcessorInterface} from "../processor/jodaimageproc"; - - -export class LeuCDNImageProc implements JodaImageProcessorInterface { - - isSuitable(url: string): boolean { - return url.startsWith("cdn") || url.startsWith("data:image,cdn"); - } - - parseUrl(url: string): JodaImageMetaData { - let ret = { - formats: [], - resolutions: [] - } as JodaImageMetaData; - url = url.replace("cdn+https://", "https://"); - url = url.replace("cdn://", "https://cdn.leuffen.de"); - url = url.replace(/\/(([0-9]+x[0-9]+|[,_])+)\//ig, (p0, sizes: string) => { - sizes.split(/[,_]/g).forEach((size) => { - ret.resolutions.push( - { - width: parseInt(size.split("x")[0]), - height: parseInt(size.split("x")[1]) - } - ) - }); - - return "/@size@/"; - }) - - ret.resolutions.sort((a, b) => { - if (a.width < b.width) - return -1; - if (a.width > b.width) - return 1; - return 0; - }); - - url = url.replace(/([a-z0-9_\-]+)\.([a-z0-9\,_]+)$/ig, (p0, name, formats) => { - //console.log("detect name", name, formats); - ret.formats = formats.replace(/,/gm, "_").split("_"); - ret.filename = name; - ret["__filename"] = name; - ret.alt = name.replace(/_+/, " "); - return "@file@"; - }) - - ret.getUrl = (resolution, format) => { - let loadUrl = url.replace(/@size@/g, resolution.width + "x" + resolution.height); - loadUrl = loadUrl.replace(/@file@/g, ret.filename + "." + format); - return loadUrl; - }; - - return ret; - - } - -}