diff --git a/be-lazy.js b/be-lazy.js index 0608980..f494a65 100644 --- a/be-lazy.js +++ b/be-lazy.js @@ -1,77 +1,55 @@ -import { define } from 'be-decorated/DE.js'; -import { BeIntersectional } from 'be-intersectional/be-intersectional.js'; +import { propDefaults, propInfo } from 'be-enhanced/BE.js'; +import { XE } from 'xtal-element/XE.js'; import { register } from 'be-hive/register.js'; +import { BeIntersectional, actions, propDefaults as BeIntersectionalPropDefaults } from 'be-intersectional/be-intersectional.js'; export class BeLazy extends BeIntersectional { - onNotIntersecting(pp) { + onNotIntersecting(self) { } - async onIntersecting({ exitDelay, transform, host, self, proxy, ctx }) { - if (transform !== undefined && host === undefined) { - //wait for host to be passed in - return; - } - if (self.nextElementSibling === null) { - const clone = self.content.cloneNode(true); - if (ctx !== undefined) { - const { self } = ctx; - self.flushCache(); - await self.transform(clone); - self.flushCache(); - } - else if (transform !== undefined) { - const { DTR } = await import('trans-render/lib/DTR.js'); - const ctx = { - host, - match: transform - }; - const dtr = new DTR(ctx); - await dtr.transform(clone); - } - self.parentElement.appendChild(clone); + async onIntersecting(self) { + const { enhancedElement, exitDelay } = self; + if (enhancedElement.nextElementSibling === null) { + const clone = enhancedElement.content.cloneNode(true); + // if(ctx !== undefined){ + // const {self} = ctx; + // self!.flushCache(); + // await self!.transform(clone as DocumentFragment); + // self!.flushCache(); + // }else if(transform !== undefined){ + // const {DTR} = await import('trans-render/lib/DTR.js'); + // const ctx: RenderContext = { + // host, + // match: transform + // }; + // const dtr = new DTR(ctx); + // await dtr.transform(clone as DocumentFragment); + // } + enhancedElement.parentElement.appendChild(clone); } else { const { insertAdjacentTemplate } = await import('trans-render/lib/insertAdjacentTemplate.js'); - insertAdjacentTemplate(self, self, 'afterend'); + insertAdjacentTemplate(enhancedElement, enhancedElement, 'afterend'); } this.disconnect(); setTimeout(() => { - self.remove(); + enhancedElement.remove(); }, exitDelay); } } const tagName = 'be-lazy'; const ifWantsToBe = 'lazy'; -const upgrade = 'template'; -define({ +const upgrade = '*'; +const xe = new XE({ config: { tagName, propDefaults: { - upgrade, - ifWantsToBe, - forceVisible: [upgrade], - virtualProps: [ - 'options', 'isIntersecting', 'isIntersectingEcho', - 'enterDelay', 'rootClosest', 'transform', 'host', 'ctx' - ], - finale: 'finale', - proxyPropDefaults: { - options: { - threshold: 0, - rootMargin: '0px', - }, - enterDelay: 16, - exitDelay: 16 - } + ...propDefaults, + ...BeIntersectionalPropDefaults }, - actions: { - onOptions: 'options', - onIntersecting: { - ifAllOf: ['isIntersecting', 'isIntersectingEcho'], - ifKeyIn: ['host', 'transform', 'ctx'], - } + propInfo: { + ...propInfo }, + actions }, - complexPropDefaults: { - controller: BeLazy, - } + superclass: BeLazy }); register(ifWantsToBe, upgrade, tagName); diff --git a/be-lazy.ts b/be-lazy.ts index e48de8d..0116381 100644 --- a/be-lazy.ts +++ b/be-lazy.ts @@ -1,90 +1,68 @@ -import {define, BeDecoratedProps} from 'be-decorated/DE.js'; -import {VirtualProps, Actions, PP} from './types.js'; -import {BeIntersectional} from 'be-intersectional/be-intersectional.js'; +import {BE, propDefaults, propInfo} from 'be-enhanced/BE.js'; +import {BEConfig} from 'be-enhanced/types'; +import {XE} from 'xtal-element/XE.js'; +import {Actions, AllProps, AP, PAP, ProPAP} from './types'; import {register} from 'be-hive/register.js'; -import {RenderContext} from 'trans-render/lib/types'; -import { ProxyProps } from '../be-intersectional/types.js'; -export class BeLazy extends BeIntersectional implements Actions{ +import {BeIntersectional, actions, propDefaults as BeIntersectionalPropDefaults} from 'be-intersectional/be-intersectional.js'; - onNotIntersecting(pp: ProxyProps): void { +export class BeLazy extends BeIntersectional{ + onNotIntersecting(self: this): void { } - async onIntersecting({exitDelay, transform, host, self, proxy, ctx}: PP){ - if(transform !== undefined && host === undefined){ - //wait for host to be passed in - return; - } - if(self.nextElementSibling === null){ - const clone = (self as HTMLTemplateElement).content.cloneNode(true); - if(ctx !== undefined){ - const {self} = ctx; - self!.flushCache(); - await self!.transform(clone as DocumentFragment); - self!.flushCache(); + async onIntersecting(self: this){ + const {enhancedElement, exitDelay} = self; + if(enhancedElement.nextElementSibling === null){ + const clone = (enhancedElement as HTMLTemplateElement).content.cloneNode(true); + // if(ctx !== undefined){ + // const {self} = ctx; + // self!.flushCache(); + // await self!.transform(clone as DocumentFragment); + // self!.flushCache(); - }else if(transform !== undefined){ - const {DTR} = await import('trans-render/lib/DTR.js'); - const ctx: RenderContext = { - host, - match: transform - }; - const dtr = new DTR(ctx); - await dtr.transform(clone as DocumentFragment); - } + // }else if(transform !== undefined){ + // const {DTR} = await import('trans-render/lib/DTR.js'); + // const ctx: RenderContext = { + // host, + // match: transform + // }; + // const dtr = new DTR(ctx); + // await dtr.transform(clone as DocumentFragment); + // } - self.parentElement!.appendChild(clone); + enhancedElement.parentElement!.appendChild(clone); }else{ const {insertAdjacentTemplate} = await import('trans-render/lib/insertAdjacentTemplate.js'); - insertAdjacentTemplate(self as HTMLTemplateElement, self, 'afterend'); + insertAdjacentTemplate(enhancedElement as HTMLTemplateElement, enhancedElement, 'afterend'); } this.disconnect(); setTimeout(() => { - self!.remove(); + enhancedElement!.remove(); }, exitDelay); } } +export interface BeLazy extends AllProps{} const tagName = 'be-lazy'; - const ifWantsToBe = 'lazy'; +const upgrade = '*'; -const upgrade = 'template'; - -define, Actions>({ - config:{ +const xe = new XE({ + config: { tagName, - propDefaults:{ - upgrade, - ifWantsToBe, - forceVisible: [upgrade], - virtualProps: [ - 'options', 'isIntersecting', 'isIntersectingEcho', - 'enterDelay', 'rootClosest', 'transform', 'host', 'ctx' - ], - finale: 'finale', - - proxyPropDefaults:{ - options: { - threshold: 0, - rootMargin: '0px', - }, - enterDelay: 16, - exitDelay: 16 - } + propDefaults: { + ...propDefaults, + ...BeIntersectionalPropDefaults }, - actions:{ - onOptions: 'options', - onIntersecting: { - ifAllOf: ['isIntersecting', 'isIntersectingEcho'], - ifKeyIn: ['host', 'transform', 'ctx'], - } + propInfo: { + ...propInfo }, + actions }, - complexPropDefaults:{ - controller: BeLazy, - } + superclass: BeLazy }); -register(ifWantsToBe, upgrade, tagName); \ No newline at end of file + +register(ifWantsToBe, upgrade, tagName); + diff --git a/be-lazy.void b/be-lazy.void new file mode 100644 index 0000000..e48de8d --- /dev/null +++ b/be-lazy.void @@ -0,0 +1,90 @@ +import {define, BeDecoratedProps} from 'be-decorated/DE.js'; +import {VirtualProps, Actions, PP} from './types.js'; +import {BeIntersectional} from 'be-intersectional/be-intersectional.js'; +import {register} from 'be-hive/register.js'; +import {RenderContext} from 'trans-render/lib/types'; +import { ProxyProps } from '../be-intersectional/types.js'; + +export class BeLazy extends BeIntersectional implements Actions{ + + onNotIntersecting(pp: ProxyProps): void { + + } + + async onIntersecting({exitDelay, transform, host, self, proxy, ctx}: PP){ + if(transform !== undefined && host === undefined){ + //wait for host to be passed in + return; + } + if(self.nextElementSibling === null){ + const clone = (self as HTMLTemplateElement).content.cloneNode(true); + if(ctx !== undefined){ + const {self} = ctx; + self!.flushCache(); + await self!.transform(clone as DocumentFragment); + self!.flushCache(); + + }else if(transform !== undefined){ + const {DTR} = await import('trans-render/lib/DTR.js'); + const ctx: RenderContext = { + host, + match: transform + }; + const dtr = new DTR(ctx); + await dtr.transform(clone as DocumentFragment); + } + + self.parentElement!.appendChild(clone); + }else{ + const {insertAdjacentTemplate} = await import('trans-render/lib/insertAdjacentTemplate.js'); + insertAdjacentTemplate(self as HTMLTemplateElement, self, 'afterend'); + } + this.disconnect(); + setTimeout(() => { + self!.remove(); + }, exitDelay); + } +} + + +const tagName = 'be-lazy'; + +const ifWantsToBe = 'lazy'; + +const upgrade = 'template'; + +define, Actions>({ + config:{ + tagName, + propDefaults:{ + upgrade, + ifWantsToBe, + forceVisible: [upgrade], + virtualProps: [ + 'options', 'isIntersecting', 'isIntersectingEcho', + 'enterDelay', 'rootClosest', 'transform', 'host', 'ctx' + ], + finale: 'finale', + + proxyPropDefaults:{ + options: { + threshold: 0, + rootMargin: '0px', + }, + enterDelay: 16, + exitDelay: 16 + } + }, + actions:{ + onOptions: 'options', + onIntersecting: { + ifAllOf: ['isIntersecting', 'isIntersectingEcho'], + ifKeyIn: ['host', 'transform', 'ctx'], + } + }, + }, + complexPropDefaults:{ + controller: BeLazy, + } +}); +register(ifWantsToBe, upgrade, tagName); \ No newline at end of file diff --git a/be-lazy2.js b/be-lazy2.js deleted file mode 100644 index f494a65..0000000 --- a/be-lazy2.js +++ /dev/null @@ -1,55 +0,0 @@ -import { propDefaults, propInfo } from 'be-enhanced/BE.js'; -import { XE } from 'xtal-element/XE.js'; -import { register } from 'be-hive/register.js'; -import { BeIntersectional, actions, propDefaults as BeIntersectionalPropDefaults } from 'be-intersectional/be-intersectional.js'; -export class BeLazy extends BeIntersectional { - onNotIntersecting(self) { - } - async onIntersecting(self) { - const { enhancedElement, exitDelay } = self; - if (enhancedElement.nextElementSibling === null) { - const clone = enhancedElement.content.cloneNode(true); - // if(ctx !== undefined){ - // const {self} = ctx; - // self!.flushCache(); - // await self!.transform(clone as DocumentFragment); - // self!.flushCache(); - // }else if(transform !== undefined){ - // const {DTR} = await import('trans-render/lib/DTR.js'); - // const ctx: RenderContext = { - // host, - // match: transform - // }; - // const dtr = new DTR(ctx); - // await dtr.transform(clone as DocumentFragment); - // } - enhancedElement.parentElement.appendChild(clone); - } - else { - const { insertAdjacentTemplate } = await import('trans-render/lib/insertAdjacentTemplate.js'); - insertAdjacentTemplate(enhancedElement, enhancedElement, 'afterend'); - } - this.disconnect(); - setTimeout(() => { - enhancedElement.remove(); - }, exitDelay); - } -} -const tagName = 'be-lazy'; -const ifWantsToBe = 'lazy'; -const upgrade = '*'; -const xe = new XE({ - config: { - tagName, - propDefaults: { - ...propDefaults, - ...BeIntersectionalPropDefaults - }, - propInfo: { - ...propInfo - }, - actions - }, - superclass: BeLazy -}); -register(ifWantsToBe, upgrade, tagName); diff --git a/be-lazy2.ts b/be-lazy2.ts deleted file mode 100644 index 0116381..0000000 --- a/be-lazy2.ts +++ /dev/null @@ -1,68 +0,0 @@ -import {BE, propDefaults, propInfo} from 'be-enhanced/BE.js'; -import {BEConfig} from 'be-enhanced/types'; -import {XE} from 'xtal-element/XE.js'; -import {Actions, AllProps, AP, PAP, ProPAP} from './types'; -import {register} from 'be-hive/register.js'; - -import {BeIntersectional, actions, propDefaults as BeIntersectionalPropDefaults} from 'be-intersectional/be-intersectional.js'; - -export class BeLazy extends BeIntersectional{ - onNotIntersecting(self: this): void { - - } - - async onIntersecting(self: this){ - const {enhancedElement, exitDelay} = self; - if(enhancedElement.nextElementSibling === null){ - const clone = (enhancedElement as HTMLTemplateElement).content.cloneNode(true); - // if(ctx !== undefined){ - // const {self} = ctx; - // self!.flushCache(); - // await self!.transform(clone as DocumentFragment); - // self!.flushCache(); - - // }else if(transform !== undefined){ - // const {DTR} = await import('trans-render/lib/DTR.js'); - // const ctx: RenderContext = { - // host, - // match: transform - // }; - // const dtr = new DTR(ctx); - // await dtr.transform(clone as DocumentFragment); - // } - - enhancedElement.parentElement!.appendChild(clone); - }else{ - const {insertAdjacentTemplate} = await import('trans-render/lib/insertAdjacentTemplate.js'); - insertAdjacentTemplate(enhancedElement as HTMLTemplateElement, enhancedElement, 'afterend'); - } - this.disconnect(); - setTimeout(() => { - enhancedElement!.remove(); - }, exitDelay); - } -} - -export interface BeLazy extends AllProps{} - -const tagName = 'be-lazy'; -const ifWantsToBe = 'lazy'; -const upgrade = '*'; - -const xe = new XE({ - config: { - tagName, - propDefaults: { - ...propDefaults, - ...BeIntersectionalPropDefaults - }, - propInfo: { - ...propInfo - }, - actions - }, - superclass: BeLazy -}); - -register(ifWantsToBe, upgrade, tagName); - diff --git a/demo/dev.html b/demo/dev.html index 182b74f..5c6d834 100644 --- a/demo/dev.html +++ b/demo/dev.html @@ -29,7 +29,7 @@ } \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 0a109c3..e743ba2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,7 @@ "watch": true }, "files": [ - "be-lazy2.ts" + "be-lazy.ts" ], "exclude":[ "node_modules"