-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Verify image size compatibility for the CDN. Exclude "auto" and "smart" values from the format/quality settings. Eliminate breakpoints for the background image. Establish ImgConfig.
- Loading branch information
egordidenko
committed
Dec 27, 2023
1 parent
bac70e5
commit ea3fec9
Showing
5 changed files
with
169 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { BaseComponent, Data } from '@symbiotejs/symbiote'; | ||
| import { PROPS_MAP } from './props-map.js'; | ||
| import { CSS_PREF } from './configurations.js'; | ||
|
|
||
| const CSS_PROPS = Object.create(null); | ||
| for (let prop in PROPS_MAP) { | ||
| CSS_PROPS[CSS_PREF + prop] = PROPS_MAP[prop]?.default || ''; | ||
| } | ||
|
|
||
| export class ImgConfig extends BaseComponent { | ||
| cssInit$ = CSS_PROPS; | ||
|
|
||
| /** | ||
| * @param {String} key | ||
| * @returns {any} | ||
| */ | ||
| $$(key) { | ||
| return this.$[CSS_PREF + key]; | ||
| } | ||
|
|
||
| /** @param {Object<String, String | Number>} kvObj */ | ||
| set$$(kvObj) { | ||
| for (let key in kvObj) { | ||
| this.$[CSS_PREF + key] = kvObj[key]; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @param {String} key | ||
| * @param {(val: any) => void} kbFn | ||
| */ | ||
| sub$$(key, kbFn) { | ||
| this.sub(CSS_PREF + key, (val) => { | ||
| // null comes from CSS context property | ||
| // empty string comes from attribute value | ||
| if (val === null || val === '') { | ||
| return; | ||
| } | ||
| kbFn(val); | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * @param {HTMLElement} el | ||
| * @param {() => void} cbkFn | ||
| */ | ||
| initIntersection(el, cbkFn) { | ||
| let opts = { | ||
| root: null, | ||
| rootMargin: '0px', | ||
| }; | ||
| /** @private */ | ||
| this._isnObserver = new IntersectionObserver((entries) => { | ||
| entries.forEach((ent) => { | ||
| if (ent.isIntersecting) { | ||
| cbkFn(); | ||
| this._isnObserver.unobserve(el); | ||
| } | ||
| }); | ||
| }, opts); | ||
| this._isnObserver.observe(el); | ||
| if (!this._observed) { | ||
| /** @private */ | ||
| this._observed = new Set(); | ||
| } | ||
| this._observed.add(el); | ||
| } | ||
|
|
||
| destroyCallback() { | ||
| super.destroyCallback(); | ||
| if (this._isnObserver) { | ||
| this._observed.forEach((el) => { | ||
| this._isnObserver.unobserve(el); | ||
| }); | ||
| this._isnObserver = null; | ||
| } | ||
| Data.deleteCtx(this); | ||
| } | ||
|
|
||
| static get observedAttributes() { | ||
| return Object.keys(PROPS_MAP); | ||
| } | ||
|
|
||
| attributeChangedCallback(name, oldVal, newVal) { | ||
| window.setTimeout(() => { | ||
| this.$[CSS_PREF + name] = newVal; | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export const CSS_PREF = '--lr-img-'; | ||
| export const UNRESOLVED_ATTR = 'unresolved'; | ||
| export const HI_RES_K = 2; | ||
| export const ULTRA_RES_K = 3; | ||
| export const DEV_MODE = | ||
| !window.location.host.trim() || window.location.host.includes(':') || window.location.hostname.includes('localhost'); | ||
|
|
||
| export const MAX_WIDTH = 3000; | ||
| export const MAX_WIDTH_JPG = 5000; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| export const parseObjectToString = (params) => | ||
| Object.entries(params) | ||
| .filter(([key, value]) => value !== undefined && value !== '') | ||
| .map(([key, value]) => { | ||
| if (key === 'cdn-operations') { | ||
| return value; | ||
| } | ||
|
|
||
| return `${key}/${value}`; | ||
| }); |