diff --git a/blocks/Img/Img.js b/blocks/Img/Img.js index 52c57e705..564f6b37a 100644 --- a/blocks/Img/Img.js +++ b/blocks/Img/Img.js @@ -17,5 +17,3 @@ export class Img extends ImgBase { }); } } - -Img.reg('uc-img'); diff --git a/blocks/Img/attr-map.js b/blocks/Img/attr-map.js deleted file mode 100644 index 502fe87d9..000000000 --- a/blocks/Img/attr-map.js +++ /dev/null @@ -1,17 +0,0 @@ -export const ATTR_MAP = { - src: {}, - srcset: {}, - sizes: {}, - // alt: { - - // }, - loading: {}, - // height: { - - // }, - // width: { - - // }, - uuid: {}, - style: {}, -}; diff --git a/blocks/Img/index.css b/blocks/Img/index.css deleted file mode 100644 index 84201e6db..000000000 --- a/blocks/Img/index.css +++ /dev/null @@ -1,22 +0,0 @@ -uc-img { - --uc-img-dev-mode: 0; - --uc-img-pubkey: '364c0864158c27472ffe'; - --uc-img-uuid: ''; - --uc-img-src: ''; - --uc-img-fallback-src: ''; - --uc-img-use-srcset: 1; - --uc-img-alt-text: ''; - --uc-img-banner-text: ''; - --uc-img-placeholder-url: ''; - --uc-img-lazy: 1; - --uc-img-step-px: 300; - --uc-img-cdn-base: ''; - --uc-img-host: ''; - --uc-img-fade-in: 1; - --uc-img-hi-resolution: 1; - --uc-img-use-webp: 1; - --uc-img-filters: ''; - --uc-img-class: ''; - --uc-img-progressive: 0; - --uc-img-use-bg: 0; -} \ No newline at end of file diff --git a/blocks/Img/index.js b/blocks/Img/index.js deleted file mode 100644 index 8555d4e22..000000000 --- a/blocks/Img/index.js +++ /dev/null @@ -1,206 +0,0 @@ -import { BaseComponent } from '../../submodules/symbiote/core/symbiote.js'; -import { CSS_PROPS_MAP } from './css-props-map.js'; -import { ATTR_MAP } from './attr-map.js'; - -export class UCImg extends BaseComponent { - /** - * @private - * @returns {String} - */ - __getHost() { - let host; - /** @type {String} */ - let cname = this.$['--uc-img-cdn-base']; - if (cname) { - if (!cname.endsWith('/')) { - cname += '/'; - } - host = cname; - } else if (this.$['--uc-img-uuid']) { - host = `https://ucarecdn.com/${this.$['--uc-img-uuid']}/`; - } else { - host = `https://${this.$['--uc-img-pubkey']}.ucr.io/`; - } - return host; - } - - /** @private */ - __getTransforms() { - let transforms = ''; - if (this.$['--uc-img-use-webp']) { - transforms += '-/format/webp/'; - } else { - transforms += '-/format/auto/'; - } - if (this.$['--uc-img-cdn-transform']) { - let fStr = this.$['--uc-img-cdn-transform']; - if (!fStr.endsWith('/')) { - fStr += '/'; - } - if (!fStr.startsWith('-/')) { - if (fStr.startsWith('/')) { - fStr = '-' + fStr; - } else { - fStr = '-/' + fStr; - } - } - transforms += fStr; - } - return transforms; - } - - /** - * @private - * @param {String} imgInitUrl - */ - __getSrcBase(imgInitUrl) { - let srcBase; - if (this.$['--uc-img-uuid']) { - srcBase = `https://ucarecdn.com/${this.$['--uc-img-uuid']}/${this.__getTransforms()}`; - } else { - if (!imgInitUrl.includes('//')) { - imgInitUrl = new URL(imgInitUrl, document.baseURI).href; - } - srcBase = this.__getHost() + this.__getTransforms() + imgInitUrl; - } - return srcBase; - } - - /** - * @private - * @param {String} imgBaseSrc - */ - __getSrcset(imgBaseSrc) { - return imgBaseSrc; - } - - /** - * @private - * @param {String} initImgSrc - */ - __checkDevMode(initImgSrc) { - let isDM = false; - let isRelative = initImgSrc && !initImgSrc.includes('//'); - if (isRelative && this.$['--uc-img-dev-mode']) { - isDM = true; - } - if (isRelative && !window.location.host.trim()) { - isDM = true; - } - if (isRelative && (window.location.host.includes(':') || window.location.hostname.includes('localhost'))) { - isDM = true; - } - return isDM; - } - - /** - * @private - * @param {String} propName - * @param {(val: any) => void} cbFn - */ - __subCssProp(propName, cbFn) { - this.sub(propName, (val) => { - if (!val) { - return; - } - cbFn(); - }); - } - - /** @private */ - __onImgLoad() { - this.ref.img.removeAttribute('unresolved'); - } - - /** @private */ - __handleImgSrc() { - this.ref.img.setAttribute('unresolved', ''); - let init = () => { - let src = this.$['--uc-img-src']?.trim(); - - this.ref.img.addEventListener('load', (e) => { - this.__onImgLoad(); - }); - if (this.__checkDevMode(src)) { - this.ref.img.src = src; - } else { - this.ref.img.srcset = this.__getSrcBase(src); - } - }; - - this.__subCssProp('--uc-img-uuid', init); - if (this.hasAttribute('uuid')) { - this.$['--uc-img-uuid'] = this.getAttribute('uuid'); - } - - this.__subCssProp('--uc-img-src', init); - if (this.hasAttribute('src')) { - this.$['--uc-img-src'] = this.getAttribute('src'); - } - } - - /** @private */ - __handleImgProps() { - this.__subCssProp('--uc-img-alt-text', (altTxt) => { - this.ref.img.alt = altTxt; - }); - this.__subCssProp('--uc-img-class', (cls) => { - this.ref.img.class = cls; - }); - } - - /** - * @private - * @param {HTMLElement} el - */ - __getSize(el) { - let rect = el.getBoundingClientRect(); - return { - h: rect.height, - w: rect.width, - }; - } - - /** - * @private - * @param {HTMLElement} el - */ - __getCssBg(el) { - let cssBgStart = 'url("' + this.__getSrcset(this.getAttribute('src')) + '")'; - return cssBgStart; - } - - /** @private */ - __handleBg() { - if (this.hasAttribute('is-background-for')) { - this.$['--uc-img-is-background-for'] = this.getAttribute('is-background-for'); - } - let elements = [...document.querySelectorAll(this.$['--uc-img-is-background-for'])]; - elements.forEach((/** @type {HTMLElement} */ el) => { - console.log(this.__getCssBg(el)); - el.style.backgroundImage = this.__getCssBg(el); - }); - } - - initCallback() { - for (let propKey in CSS_PROPS_MAP) { - this.bindCssData(propKey, false); - } - if (this.$['--uc-img-is-background-for'] || this.hasAttribute('is-background-for')) { - this.style.display = 'none'; - this.__handleBg(); - } else { - this.render(/*html*/ ``); - [...this.attributes].forEach((attr) => { - if (!ATTR_MAP[attr.name]) { - this.ref.img.setAttribute(attr.name, attr.value); - } - }); - this.__handleImgSrc(); - this.__handleImgProps(); - } - } -} - -// TODO: get rid of side effects -UCImg.reg('uc-img'); diff --git a/blocks/Img/tmp.html b/blocks/Img/tmp.html deleted file mode 100644 index 908554e3f..000000000 --- a/blocks/Img/tmp.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - uc-img - - - - - - - - - - \ No newline at end of file diff --git a/solutions/adaptive-image/index.html b/solutions/adaptive-image/index.html new file mode 100644 index 000000000..ceb221604 --- /dev/null +++ b/solutions/adaptive-image/index.html @@ -0,0 +1,153 @@ + + + + + + + uc-img + + + + + + + +

Absolute path src

+ + + + + + + + + + +

Absolute src + noscript + image transformation

+ + + + + + + + + + + +

Background mode

+ + + + + +
Some text...
+ + + + +

Relative path src (dev mode)

+ + + + + + + + +

UUID source

+ + + + + + + + + + + + + + + + + +

Lazy disabled (attribute)

+ + + + + + + + + + + +

Lazy (observer)

+ + + + + + + + + + + + \ No newline at end of file diff --git a/solutions/adaptive-image/index.js b/solutions/adaptive-image/index.js index e69de29bb..8027f19f1 100644 --- a/solutions/adaptive-image/index.js +++ b/solutions/adaptive-image/index.js @@ -0,0 +1,5 @@ +import { Img } from '../../blocks/Img/Img.js'; + +Img.reg('uc-img'); + +export { Img }; diff --git a/blocks/Img/test.css b/solutions/adaptive-image/test.css similarity index 100% rename from blocks/Img/test.css rename to solutions/adaptive-image/test.css