Skip to content

Commit

Permalink
refactor(esl-media): remove legacy features of esl-media
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: `load-cls-target`, `load-cls-accepted` and `load-cls-declined` use `load-condition-class` and `load-condition-class-target` instead
BREAKING CHANGE: `disabled` no longer supported use `lazy="manual"` instead
  • Loading branch information
@ala-n
ala-n committed Dec 20, 2023
1 parent c278b80 commit c19561d
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 111 deletions.
4 changes: 1 addition & 3 deletions src/modules/esl-media/core/esl-media-registry.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@ export class ESLMediaProviderRegistry extends SyntheticEventTarget {

/** List of registered providers */
public get providers(): ProviderType[] {
const list: ProviderType[] = [];
this.providersMap.forEach((provider) => list.push(provider));
return list;
return Array.from(this.providersMap.values());
}

/** Register provider */
Expand Down
15 changes: 4 additions & 11 deletions src/modules/esl-media/core/esl-media.shape.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@ export type ESLMediaTagShape = ({
/** Define preferable aspect ratio */
'aspect-ratio'?: string;

/**
* Define prevent loading marker
* @deprecated Use {@link lazy} instead
*/
disabled?: boolean;
/** Define lazy loading mode */
lazy?: ESLMediaLazyMode;
/** Define autoplay marker */
Expand Down Expand Up @@ -57,12 +52,10 @@ export type ESLMediaTagShape = ({

/** Define condition {@link ESLMediaQuery} to allow load of media resource */
'load-condition'?: string;
/** Define ESL Traversing Query to find target for load-cls-accepted / load-cls-declined */
'load-cls-target'?: string;
/** Define class to mark player accepted state */
'load-cls-accepted'?: string;
/** Define class to mark player declined state */
'load-cls-declined'?: string;
/** Define class / classes to add when load media is accepted. Supports multiple and inverted classes */
'load-condition-class'?: string;
/** Defines target element {@link ESLTraversingQuery} selector to toggle `load-condition-class` classes */
'load-condition-class-target'?: string;

/** Children are not allowed for ESLMedia */
children?: never[];
Expand Down
40 changes: 4 additions & 36 deletions src/modules/esl-media/core/esl-media.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ const parseLazyAttr = (v: string): ESLMediaLazyMode => isLazyAttr(v) ? v : 'auto
export class ESLMedia extends ESLBaseElement {
public static override is = 'esl-media';
public static observedAttributes = [
'disabled',
'load-condition',
'media-type',
'media-id',
Expand Down Expand Up @@ -76,11 +75,6 @@ export class ESLMedia extends ESLBaseElement {
@attr() public fillMode: ESLMediaFillMode;
/** Strict aspect ratio definition */
@attr() public aspectRatio: string;
/**
* Disabled marker to prevent rendering
* @deprecated replaced with {@link lazy} = "manual" functionality
*/
@boolAttr() public disabled: boolean;
/** Allows lazy load resource */
@attr({parser: parseLazyAttr, defaultValue: 'none'}) public lazy: ESLMediaLazyMode;
/** Autoplay resource marker */
Expand All @@ -106,25 +100,9 @@ export class ESLMedia extends ESLBaseElement {
/** Ready state class/classes target */
@attr() public readyClassTarget: string;

/**
* Class / classes to add when media is accepted
* @deprecated use {@link loadConditionClass} instead (e.g. `load-condition-class="is-accepted"`)
*/
@attr() public loadClsAccepted: string;
/**
* Class / classes to add when media is declined
* @deprecated use {@link loadConditionClass} with negative class param instead (e.g. `load-condition-class="!is-declined"`)
*/
@attr() public loadClsDeclined: string;
/**
* Target element {@link ESLTraversingQuery} select to add accepted/declined classes
* @deprecated used with legacy load condition attributes, consider migration to {@link loadConditionClass}
*/
@attr({defaultValue: '::parent'}) public loadClsTarget: string;

/** Condition {@link ESLMediaQuery} to allow load of media resource. Default: `all` */
@attr({defaultValue: 'all'}) public loadCondition: string;
/** Class / classes to add when load media is accepted */
/** Class / classes to add when load media is accepted. Supports multiple and inverted classes */
@attr() public loadConditionClass: string;
/** Target element {@link ESLTraversingQuery} select to toggle {@link loadConditionClass} classes */
@attr({defaultValue: '::parent'}) public loadConditionClassTarget: string;
Expand Down Expand Up @@ -173,7 +151,6 @@ export class ESLMedia extends ESLBaseElement {
protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
if (!this.connected || oldVal === newVal) return;
switch (attrName) {
case 'disabled':
case 'media-id':
case 'media-src':
case 'media-type':
Expand Down Expand Up @@ -206,8 +183,7 @@ export class ESLMedia extends ESLBaseElement {
}

public canActivate(): boolean {
if (this.lazy !== 'none' || this.disabled) return false;
return this.conditionQuery.matches;
return this.lazy === 'none' && this.conditionQuery.matches;
}

private reinitInstance(): void {
Expand All @@ -229,15 +205,8 @@ export class ESLMedia extends ESLBaseElement {
}

public updateContainerMarkers(): void {
const active = this.conditionQuery.matches;

const $target = ESLTraversingQuery.first(this.loadConditionClassTarget, this) as HTMLElement;
$target && CSSClassUtils.toggle($target, this.loadConditionClass, active);

// Legacy attributes support
const targetEl = ESLTraversingQuery.first(this.loadClsTarget, this) as HTMLElement;
targetEl && CSSClassUtils.toggle(targetEl, this.loadClsAccepted, active);
targetEl && CSSClassUtils.toggle(targetEl, this.loadClsDeclined, !active);
$target && CSSClassUtils.toggle($target, this.loadConditionClass, this.conditionQuery.matches);
}

/** Seek to given position of media */
Expand All @@ -247,12 +216,11 @@ export class ESLMedia extends ESLBaseElement {

/**
* Start playing media
* @param allowActivate - allows to remove manual lazy or disabled marker
* @param allowActivate - allows to remove manual lazy loading restrictions
*/
public play(allowActivate: boolean = false): Promise<void> | null {
if (!this.ready && allowActivate) {
this.lazy = 'none';
this.disabled = false;
this.deferredReinitialize.cancel();
this.reinitInstance();
}
Expand Down
61 changes: 0 additions & 61 deletions src/modules/esl-media/test/esl-media.condition.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,67 +44,6 @@ describe('esl-media: lazy loading unit tests', () => {
expect($media.querySelectorAll('*')).not.toEqual(expect.objectContaining({length: 0}));
});

describe('ESLMedia legacy load condition classes', () => {
test('ESLMedia declining condition leads to "declined" class on the target', async () => {
const $media = createMedia({
loadCondition: 'not all',
loadClsTarget: 'body',
loadClsAccepted: 'accepted',
loadClsDeclined: 'declined'
});
document.body.appendChild($media);

await promisifyTimeout(100);
expect(document.body.classList.contains('accepted')).toBe(false);
expect(document.body.classList.contains('declined')).toBe(true);
});

test('ESLMedia accepting condition leads to "accepted" class on the target', async () => {
const $media = createMedia({
loadCondition: 'all',
loadClsTarget: 'body',
loadClsAccepted: 'accepted',
loadClsDeclined: 'declined'
});
document.body.appendChild($media);

await promisifyTimeout(100);
expect(document.body.classList.contains('accepted')).toBe(true);
expect(document.body.classList.contains('declined')).toBe(false);
});

test('ESLMedia load condition does not clock "declined" class on the target', async () => {
const $media = createMedia({
lazy: 'manual',
loadCondition: 'not all',
loadClsTarget: 'body',
loadClsAccepted: 'accepted',
loadClsDeclined: 'declined'
});
document.body.appendChild($media);

await promisifyTimeout(100);
expect(document.body.classList.contains('accepted')).toBe(false);
expect(document.body.classList.contains('declined')).toBe(true);
});

test('ESLMedia load condition does not clock "accepted" class on the target', async () => {
const $media = createMedia({
lazy: 'manual',
loadCondition: 'all',
loadClsTarget: 'body',
loadClsAccepted: 'accepted',
loadClsDeclined: 'declined'
});
document.body.appendChild($media);

await promisifyTimeout(100);
expect(document.body.classList.contains('accepted')).toBe(true);
expect(document.body.classList.contains('declined')).toBe(false);
});
});


describe('ESLMedia load condition classes', () => {
test('ESLMedia declining condition leads to "declined" class on the target', async () => {
const $media = createMedia({
Expand Down

0 comments on commit c19561d

Please sign in to comment.