@rxdi/ui-kit
Version:
UI Components for building graphql-server website
180 lines • 6.83 kB
JavaScript
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnimationComponent = void 0;
const lit_html_1 = require("@rxdi/lit-html");
const animejs_1 = __importDefault(require("animejs"));
/**
* @customElement rx-animation
*/
let AnimationComponent = class AnimationComponent extends lit_html_1.LitElement {
constructor() {
super(...arguments);
this.loopBeginCount = 0;
this.loopCompletedCount = 0;
this.overflow = 'visible';
this.options = () => ({
autoplay: false
});
}
get duration() {
return this.instance.duration;
}
OnUpdate() {
return __awaiter(this, void 0, void 0, function* () {
const slot = this.shadowRoot.querySelector('slot');
const nodes = slot.assignedNodes();
let targets = nodes.filter((el) => el.nodeType === 1 && !(el.getAttribute('animate') === 'false'));
const forNode = this.findNode(nodes, 'rx-for');
if (forNode) {
const forNodeNodes = forNode.querySelector('rx-let');
yield forNodeNodes.requestUpdate();
targets = Array.from(forNodeNodes.shadowRoot.children);
}
const { bezier, stagger, set, timeline, random } = animejs_1.default;
const options = this.options({
bezier,
stagger,
set,
timeline,
random
});
const autoplay = (options.trigger && options.trigger === 'load') || !options.trigger;
this.instance = (0, animejs_1.default)(Object.assign(Object.assign({ targets,
autoplay }, options), { update: this.OnAnimeUpdate.bind(this), begin: this.onAnimeBegin.bind(this), complete: this.onAnimeCompleted.bind(this), loopBegin: this.onAnimeLoopBegin.bind(this), loopComplete: this.onAnimeLoopCompleted.bind(this) }));
if (options.trigger && options.trigger !== 'load') {
this.trigger = options.trigger;
this.removeListeners();
this.listeners = targets.map(target => {
target.addEventListener(options.trigger, this.handleEvent.bind(this));
return () => target.removeEventListener(options.trigger, this.handleEvent.bind(this));
});
}
});
}
findNode(nodes, localName) {
const node = nodes.find(n => n &&
n.nextSibling &&
n.nextSibling.localName === localName);
return node ? node.nextSibling : null;
}
play() {
this.instance.play();
}
pause() {
this.instance.pause();
}
restart() {
this.loopCompletedCount = 0;
this.loopBeginCount = 0;
this.instance.restart();
}
reverse() {
this.instance.reverse();
}
seek(time) {
this.instance.seek(time);
}
disconnectedCallback() {
this.instance = null;
this.removeListeners();
}
onAnimeBegin() {
this.dispatchEvent(new CustomEvent('begin', {
bubbles: true,
composed: true,
cancelable: false
}));
}
onAnimeCompleted() {
this.dispatchEvent(new CustomEvent('completed', {
bubbles: true,
composed: true,
cancelable: false
}));
}
onAnimeLoopBegin() {
this.dispatchEvent(new CustomEvent('loop-begin', {
detail: { count: this.loopBeginCount++ },
bubbles: true,
composed: true,
cancelable: false
}));
}
onAnimeLoopCompleted() {
this.dispatchEvent(new CustomEvent('loop-completed', {
detail: { count: this.loopCompletedCount++ },
bubbles: true,
composed: true,
cancelable: false
}));
}
OnAnimeUpdate({ currentTime, progress }) {
this.dispatchEvent(new CustomEvent('progress', {
detail: { currentTime, progress: Math.round(progress) },
bubbles: true,
composed: true,
cancelable: false
}));
}
handleEvent() {
if (this.instance.completed) {
this.play();
}
else {
this.restart();
}
}
removeListeners() {
if (this.listeners) {
this.listeners.forEach(l => l());
}
}
};
__decorate([
(0, lit_html_1.property)(),
__metadata("design:type", String)
], AnimationComponent.prototype, "overflow", void 0);
__decorate([
(0, lit_html_1.property)({ type: Object }),
__metadata("design:type", Function)
], AnimationComponent.prototype, "options", void 0);
AnimationComponent = __decorate([
(0, lit_html_1.Component)({
selector: 'rx-animation',
style: (0, lit_html_1.css) ``,
template() {
return (0, lit_html_1.html) `
<style>
:host {
display: block;
overflow: ${(0, lit_html_1.unsafeCSS)(this.overflow)};
}
</style>
<slot></slot>
`;
}
})
], AnimationComponent);
exports.AnimationComponent = AnimationComponent;
//# sourceMappingURL=animation.component.js.map