@lookwe/lui
Version:
Lookwe UI web components
133 lines (130 loc) • 9.33 kB
JavaScript
import { __classPrivateFieldGet, __classPrivateFieldSet, __runInitializers, __esDecorate } from 'tslib';
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { IntersectionController } from '@lit-labs/observers/intersection-controller.js';
import { EffectGroupController, effect } from '@lookwe/lit-controllers/effect-group';
import { mixinElementInternals, internals } from '@lookwe/lit-mixins/element-internals';
import { omitUndefined } from '@lookwe/omit-undefined';
import { LuiElement } from '../../../internal/lui-element.js';
import { IntersectionIntersectingChangeEvent } from '../event/intersection-intersecting-change-event.js';
const BaseClass = mixinElementInternals(LuiElement);
/**
* An element that observes the intersection of itself with another element or the top-level document's viewport.
*/
let Intersection = (() => {
var _Intersection_instances, _a, _Intersection_root, _Intersection_isIntersecting, _Intersection_getRoot, _Intersection_observer, _Intersection_getNewController, _Intersection__effects, _Intersection_handleIntersectionCallback, _Intersection_rootId_accessor_storage, _Intersection_rootMargin_accessor_storage, _Intersection_threshold_accessor_storage;
let _classSuper = BaseClass;
let _instanceExtraInitializers = [];
let _rootId_decorators;
let _rootId_initializers = [];
let _rootId_extraInitializers = [];
let _set_root_decorators;
let _rootMargin_decorators;
let _rootMargin_initializers = [];
let _rootMargin_extraInitializers = [];
let _threshold_decorators;
let _threshold_initializers = [];
let _threshold_extraInitializers = [];
return _a = class Intersection extends _classSuper {
/**
* The ID of the element to use as the intersection root.
*/
get rootId() { return __classPrivateFieldGet(this, _Intersection_rootId_accessor_storage, "f"); }
set rootId(value) { __classPrivateFieldSet(this, _Intersection_rootId_accessor_storage, value, "f"); }
/**
* The element to use as the intersection root. Can be an Element or null.
*/
set root(root) {
__classPrivateFieldSet(this, _Intersection_root, root, "f");
}
get root() {
if (__classPrivateFieldGet(this, _Intersection_root, "f") && __classPrivateFieldGet(this, _Intersection_root, "f").isConnected)
return __classPrivateFieldGet(this, _Intersection_root, "f");
return (__classPrivateFieldSet(this, _Intersection_root, __classPrivateFieldGet(this, _Intersection_instances, "m", _Intersection_getRoot).call(this), "f"));
}
/**
* The margins (in pixels or as percentages) around the root within which to consider the target as intersecting.
*/
get rootMargin() { return __classPrivateFieldGet(this, _Intersection_rootMargin_accessor_storage, "f"); }
set rootMargin(value) { __classPrivateFieldSet(this, _Intersection_rootMargin_accessor_storage, value, "f"); }
/**
* A single number or an array of numbers between 0.0 and 1.0 representing the intersection ratio that the target must
* have with the root before the observer will report that the target is intersecting.
*/
get threshold() { return __classPrivateFieldGet(this, _Intersection_threshold_accessor_storage, "f"); }
set threshold(value) { __classPrivateFieldSet(this, _Intersection_threshold_accessor_storage, value, "f"); }
/**
* Indicates whether the element is currently intersecting with the root.
*/
get isIntersecting() {
return __classPrivateFieldGet(this, _Intersection_isIntersecting, "f");
}
constructor() {
super();
_Intersection_instances.add(this);
_Intersection_rootId_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _rootId_initializers, '')));
_Intersection_root.set(this, __runInitializers(this, _rootId_extraInitializers));
_Intersection_rootMargin_accessor_storage.set(this, __runInitializers(this, _rootMargin_initializers, void 0));
_Intersection_threshold_accessor_storage.set(this, (__runInitializers(this, _rootMargin_extraInitializers), __runInitializers(this, _threshold_initializers, void 0)));
_Intersection_isIntersecting.set(this, __runInitializers(this, _threshold_extraInitializers));
_Intersection_observer.set(this, void 0);
_Intersection__effects.set(this, new EffectGroupController(this, effect(() => {
if (__classPrivateFieldGet(this, _Intersection_observer, "f")) {
__classPrivateFieldGet(this, _Intersection_observer, "f").unobserve(this);
this.removeController(__classPrivateFieldGet(this, _Intersection_observer, "f"));
}
__classPrivateFieldSet(this, _Intersection_observer, __classPrivateFieldGet(this, _Intersection_instances, "m", _Intersection_getNewController).call(this), "f");
}, () => [this.root, this.rootMargin, this.threshold])));
this[internals].role = 'none';
}
render() {
return html `<slot></slot>`;
}
},
_Intersection_root = new WeakMap(),
_Intersection_isIntersecting = new WeakMap(),
_Intersection_observer = new WeakMap(),
_Intersection__effects = new WeakMap(),
_Intersection_instances = new WeakSet(),
_Intersection_rootId_accessor_storage = new WeakMap(),
_Intersection_rootMargin_accessor_storage = new WeakMap(),
_Intersection_threshold_accessor_storage = new WeakMap(),
_Intersection_getRoot = function _Intersection_getRoot() {
if (!this.rootId)
return undefined;
const root = this.getRootNode();
return root.querySelector(`#${CSS.escape(this.rootId)}`);
},
_Intersection_getNewController = function _Intersection_getNewController() {
return new IntersectionController(this, {
config: omitUndefined({ root: this.root, rootMargin: this.rootMargin, threshold: this.threshold }),
callback: __classPrivateFieldGet(this, _Intersection_instances, "m", _Intersection_handleIntersectionCallback).bind(this),
});
},
_Intersection_handleIntersectionCallback = function _Intersection_handleIntersectionCallback(entries) {
const oldValue = __classPrivateFieldGet(this, _Intersection_isIntersecting, "f");
for (const entry of entries) {
__classPrivateFieldSet(this, _Intersection_isIntersecting, entry.isIntersecting, "f");
}
if (oldValue !== __classPrivateFieldGet(this, _Intersection_isIntersecting, "f")) {
this.dispatchEvent(new IntersectionIntersectingChangeEvent('intersection:intersecting-change', {
oldSate: oldValue,
newState: __classPrivateFieldGet(this, _Intersection_isIntersecting, "f"),
}));
}
},
(() => {
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
_rootId_decorators = [property({ reflect: true, attribute: 'root-id', useDefault: true })];
_set_root_decorators = [property({ attribute: false })];
_rootMargin_decorators = [property({ attribute: 'root-margin' })];
_threshold_decorators = [property({ type: Number })];
__esDecorate(_a, null, _rootId_decorators, { kind: "accessor", name: "rootId", static: false, private: false, access: { has: obj => "rootId" in obj, get: obj => obj.rootId, set: (obj, value) => { obj.rootId = value; } }, metadata: _metadata }, _rootId_initializers, _rootId_extraInitializers);
__esDecorate(_a, null, _set_root_decorators, { kind: "setter", name: "root", static: false, private: false, access: { has: obj => "root" in obj, set: (obj, value) => { obj.root = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(_a, null, _rootMargin_decorators, { kind: "accessor", name: "rootMargin", static: false, private: false, access: { has: obj => "rootMargin" in obj, get: obj => obj.rootMargin, set: (obj, value) => { obj.rootMargin = value; } }, metadata: _metadata }, _rootMargin_initializers, _rootMargin_extraInitializers);
__esDecorate(_a, null, _threshold_decorators, { kind: "accessor", name: "threshold", static: false, private: false, access: { has: obj => "threshold" in obj, get: obj => obj.threshold, set: (obj, value) => { obj.threshold = value; } }, metadata: _metadata }, _threshold_initializers, _threshold_extraInitializers);
if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
})(),
_a;
})();
export { Intersection };