ngx-i24-colored-lights
Version:
A lightweight plugin to render a simple, animated colored lighted cover.
75 lines • 11.9 kB
JavaScript
import { Component, Input, ViewEncapsulation } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class NgxI24ColoredLightsComponent {
constructor() {
this._BG = 'linear-gradient(#0A0707 0%, #110C0D 50%, #0C090A 100%)';
this.colorCollection = ['#D00010', '#FEC641', '#63C13B', '#FE0016', '#5C6C94', '#6B0D05', '#7D0006', '#DB1913', '#FEE34A', '#2F8A2'];
this.lightsCount = 100;
this.textColor = '#FFFFFF';
this.lightSize = 75;
this.blurLevel = 3;
this.title = "Happy Birthday";
this.imageUrl = '';
this.totalAnimation = 10;
this.maxDelay = 5;
this.minDuration = 5;
this.maxDuration = 25;
this.sizeVariety = 0.25;
this.list = [];
}
ngOnInit() {
this.initLights();
}
ngAfterViewInit() {
}
random(n) {
return Math.floor(Math.random() * n) + 1;
}
initLights() {
for (let index = 1; index < this.lightsCount; index++) {
this.list.push({
width: this.lightSize + this.random(this.sizeVariety * this.lightSize),
vertical: this.random(100),
horizontal: this.random(100),
blur: this.blurLevel + this.random(this.blurLevel),
delay: this.random(this.maxDelay),
animation: this.random(this.totalAnimation),
duration: this.minDuration + this.random(this.maxDuration),
color: this.colorCollection[this.random(this.colorCollection.length) - 1],
});
}
if (this.imageUrl === '') {
this.imageUrl = this._BG;
}
else {
this.imageUrl = 'url(' + this.imageUrl + ')';
}
}
}
NgxI24ColoredLightsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxI24ColoredLightsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxI24ColoredLightsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxI24ColoredLightsComponent, selector: "i24-colored-lights", inputs: { colorCollection: "colorCollection", lightsCount: "lightsCount", textColor: "textColor", lightSize: "lightSize", blurLevel: "blurLevel", title: "title", imageUrl: "imageUrl" }, ngImport: i0, template: "<div class=\"container\" [style.background-image]=\"imageUrl\">\n <h1>{{title}}</h1>\n <div class=\"bokeh\">\n <div *ngFor=\"let item of list\" class=\"light\"\n [style.width]=\"item.width + 'px'\"\n [style.height]=\"item.width + 'px'\"\n [style.top]=\"item.vertical + '%'\"\n [style.left]=\"item.horizontal + '%'\"\n [style.background]=\"item.color\"\n [style.filter]=\"'blur('+item.blur + 'px)'\"\n [style.animation-duration]=\"item.duration + 's'\"\n [style.animation-delay]=\"item.delay + 's'\"\n [style.animation-name]=\"'light'+item.animation\"\n ></div>\n </div>\n</div>", styles: [".container{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:\"Montserrat\",sans-serif;background-size:cover}.bokeh{position:relative;width:100%;height:100%;pointer-events:none;top:-50px;left:-25px}.light{position:absolute;border-radius:50%;opacity:0;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes light1{25%{opacity:.75}50%{opacity:0}75%{opacity:.57}to{opacity:0}}@keyframes light2{25%{opacity:.54}50%{opacity:0}75%{opacity:.47}to{opacity:0}}@keyframes light3{25%{opacity:.39}50%{opacity:0}75%{opacity:.34}to{opacity:0}}@keyframes light4{25%{opacity:.62}50%{opacity:0}75%{opacity:.62}to{opacity:0}}@keyframes light5{25%{opacity:.26}50%{opacity:0}75%{opacity:.43}to{opacity:0}}@keyframes light6{25%{opacity:.51}50%{opacity:0}75%{opacity:.5}to{opacity:0}}@keyframes light7{25%{opacity:.44}50%{opacity:0}75%{opacity:.57}to{opacity:0}}@keyframes light8{25%{opacity:.62}50%{opacity:0}75%{opacity:.46}to{opacity:0}}@keyframes light9{25%{opacity:.69}50%{opacity:0}75%{opacity:.54}to{opacity:0}}@keyframes light10{25%{opacity:.44}50%{opacity:0}75%{opacity:.72}to{opacity:0}}h1{text-align:center;color:#fff;position:absolute;top:25%;z-index:10;opacity:.9;left:0%;right:0%}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxI24ColoredLightsComponent, decorators: [{
type: Component,
args: [{
selector: 'i24-colored-lights',
templateUrl: './ngx-i24-colored-lights.component.html',
styleUrls: ['./ngx-i24-colored-lights.component.scss'],
encapsulation: ViewEncapsulation.Emulated
}]
}], ctorParameters: function () { return []; }, propDecorators: { colorCollection: [{
type: Input
}], lightsCount: [{
type: Input
}], textColor: [{
type: Input
}], lightSize: [{
type: Input
}], blurLevel: [{
type: Input
}], title: [{
type: Input
}], imageUrl: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWkyNC1jb2xvcmVkLWxpZ2h0cy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtaTI0LWNvbG9yZWQtbGlnaHRzL3NyYy9saWIvbmd4LWkyNC1jb2xvcmVkLWxpZ2h0cy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtaTI0LWNvbG9yZWQtbGlnaHRzL3NyYy9saWIvbmd4LWkyNC1jb2xvcmVkLWxpZ2h0cy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxLQUFLLEVBQVUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVMzRixNQUFNLE9BQU8sNEJBQTRCO0lBZXZDO1FBZFEsUUFBRyxHQUFFLHdEQUF3RCxDQUFDO1FBQzdELG9CQUFlLEdBQUcsQ0FBQyxTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUMsQ0FBQztRQUNqSSxnQkFBVyxHQUFFLEdBQUcsQ0FBQztRQUNqQixjQUFTLEdBQUUsU0FBUyxDQUFDO1FBQ3JCLGNBQVMsR0FBQyxFQUFFLENBQUM7UUFDYixjQUFTLEdBQUMsQ0FBQyxDQUFDO1FBQ1gsVUFBSyxHQUFHLGdCQUFnQixDQUFBO1FBQ3pCLGFBQVEsR0FBQyxFQUFFLENBQUM7UUFDWixtQkFBYyxHQUFFLEVBQUUsQ0FBQztRQUNuQixhQUFRLEdBQUUsQ0FBQyxDQUFDO1FBQ1osZ0JBQVcsR0FBRyxDQUFDLENBQUM7UUFDaEIsZ0JBQVcsR0FBRyxFQUFFLENBQUM7UUFDakIsZ0JBQVcsR0FBRyxJQUFJLENBQUM7UUFDM0IsU0FBSSxHQUFRLEVBQUUsQ0FBQztJQUVmLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxlQUFlO0lBRWYsQ0FBQztJQUVPLE1BQU0sQ0FBQyxDQUFRO1FBQ3JCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFTyxVQUFVO1FBQ2hCLEtBQUssSUFBSSxLQUFLLEdBQUcsQ0FBQyxFQUFFLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLEtBQUssRUFBRSxFQUFFO1lBQ3JELElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO2dCQUNiLEtBQUssRUFBQyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFdBQVcsR0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO2dCQUNuRSxRQUFRLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUM7Z0JBQzFCLFVBQVUsRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQztnQkFDNUIsSUFBSSxFQUFFLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO2dCQUNsRCxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDO2dCQUNqQyxTQUFTLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDO2dCQUMzQyxRQUFRLEVBQUUsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7Z0JBQzFELEtBQUssRUFBRSxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxNQUFNLENBQUMsR0FBQyxDQUFDLENBQUM7YUFDeEUsQ0FBQyxDQUFBO1NBQ0g7UUFDRCxJQUFHLElBQUksQ0FBQyxRQUFRLEtBQUcsRUFBRSxFQUFDO1lBQ3BCLElBQUksQ0FBQyxRQUFRLEdBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQztTQUN4QjthQUNHO1lBQ0YsSUFBSSxDQUFDLFFBQVEsR0FBQyxNQUFNLEdBQUMsSUFBSSxDQUFDLFFBQVEsR0FBQyxHQUFHLENBQUM7U0FDeEM7SUFDSCxDQUFDOzt5SEFqRFUsNEJBQTRCOzZHQUE1Qiw0QkFBNEIsb1BDVHpDLHlwQkFlTTsyRkROTyw0QkFBNEI7a0JBUHhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsV0FBVyxFQUFFLHlDQUF5QztvQkFDdEQsU0FBUyxFQUFFLENBQUMseUNBQXlDLENBQUM7b0JBQ3RELGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxRQUFRO2lCQUMxQzswRUFJVSxlQUFlO3NCQUF2QixLQUFLO2dCQUNFLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0ksS0FBSztzQkFBYixLQUFLO2dCQUNFLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIElucHV0LCBPbkluaXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2kyNC1jb2xvcmVkLWxpZ2h0cycsXG4gIHRlbXBsYXRlVXJsOiAnLi9uZ3gtaTI0LWNvbG9yZWQtbGlnaHRzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmd4LWkyNC1jb2xvcmVkLWxpZ2h0cy5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5FbXVsYXRlZFxufSlcblxuZXhwb3J0IGNsYXNzIE5neEkyNENvbG9yZWRMaWdodHNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsQWZ0ZXJWaWV3SW5pdCB7XG4gIHByaXZhdGUgX0JHID0nbGluZWFyLWdyYWRpZW50KCMwQTA3MDcgMCUsICMxMTBDMEQgNTAlLCAjMEMwOTBBIDEwMCUpJztcbiAgQElucHV0KCkgY29sb3JDb2xsZWN0aW9uID0gWycjRDAwMDEwJywgJyNGRUM2NDEnLCAnIzYzQzEzQicsICcjRkUwMDE2JywgJyM1QzZDOTQnLCAnIzZCMEQwNScsICcjN0QwMDA2JywgJyNEQjE5MTMnLCAnI0ZFRTM0QScsICcjMkY4QTInXTtcblx0QElucHV0KCkgbGlnaHRzQ291bnQ9IDEwMDtcblx0QElucHV0KCkgdGV4dENvbG9yPSAnI0ZGRkZGRic7XG5cdEBJbnB1dCgpIGxpZ2h0U2l6ZT03NTtcblx0QElucHV0KCkgYmx1ckxldmVsPTM7XG4gIEBJbnB1dCgpIHRpdGxlID0gXCJIYXBweSBCaXJ0aGRheVwiXG5cdEBJbnB1dCgpIGltYWdlVXJsPScnO1xuICBwcml2YXRlIHRvdGFsQW5pbWF0aW9uPSAxMDtcbiAgcHJpdmF0ZSBtYXhEZWxheT0gNTtcbiAgcHJpdmF0ZSBtaW5EdXJhdGlvbiA9IDU7XG4gIHByaXZhdGUgbWF4RHVyYXRpb24gPSAyNTtcbiAgcHJpdmF0ZSBzaXplVmFyaWV0eSA9IDAuMjU7XG4gIGxpc3Q6IGFueSA9IFtdO1xuICBjb25zdHJ1Y3RvcigpIHtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuaW5pdExpZ2h0cygpO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCl7XG4gICBcbiAgfVxuXG4gIHByaXZhdGUgcmFuZG9tKG46bnVtYmVyKXtcbiAgICByZXR1cm4gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogbikgKyAxO1xuICB9XG5cbiAgcHJpdmF0ZSBpbml0TGlnaHRzKCl7XG4gICAgZm9yIChsZXQgaW5kZXggPSAxOyBpbmRleCA8IHRoaXMubGlnaHRzQ291bnQ7IGluZGV4KyspIHtcbiAgICAgIHRoaXMubGlzdC5wdXNoKHtcbiAgICAgICAgd2lkdGg6dGhpcy5saWdodFNpemUgKyB0aGlzLnJhbmRvbSh0aGlzLnNpemVWYXJpZXR5KnRoaXMubGlnaHRTaXplKSxcbiAgICAgICAgdmVydGljYWw6IHRoaXMucmFuZG9tKDEwMCksXG4gICAgICAgIGhvcml6b250YWw6IHRoaXMucmFuZG9tKDEwMCksXG4gICAgICAgIGJsdXI6IHRoaXMuYmx1ckxldmVsICsgdGhpcy5yYW5kb20odGhpcy5ibHVyTGV2ZWwpLFxuICAgICAgICBkZWxheTogdGhpcy5yYW5kb20odGhpcy5tYXhEZWxheSksXG4gICAgICAgIGFuaW1hdGlvbjogdGhpcy5yYW5kb20odGhpcy50b3RhbEFuaW1hdGlvbiksICBcbiAgICAgICAgZHVyYXRpb246IHRoaXMubWluRHVyYXRpb24gKyB0aGlzLnJhbmRvbSh0aGlzLm1heER1cmF0aW9uKSwgXG4gICAgICAgIGNvbG9yIDp0aGlzLmNvbG9yQ29sbGVjdGlvblt0aGlzLnJhbmRvbSh0aGlzLmNvbG9yQ29sbGVjdGlvbi5sZW5ndGgpLTFdLFxuICAgICAgfSlcbiAgICB9XG4gICAgaWYodGhpcy5pbWFnZVVybD09PScnKXtcbiAgICAgIHRoaXMuaW1hZ2VVcmw9dGhpcy5fQkc7XG4gICAgfVxuICAgIGVsc2V7XG4gICAgICB0aGlzLmltYWdlVXJsPSd1cmwoJyt0aGlzLmltYWdlVXJsKycpJztcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjb250YWluZXJcIiBbc3R5bGUuYmFja2dyb3VuZC1pbWFnZV09XCJpbWFnZVVybFwiPlxuICAgIDxoMT57e3RpdGxlfX08L2gxPlxuICAgIDxkaXYgY2xhc3M9XCJib2tlaFwiPlxuICAgICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBpdGVtIG9mIGxpc3RcIiBjbGFzcz1cImxpZ2h0XCJcbiAgICAgICAgW3N0eWxlLndpZHRoXT1cIml0ZW0ud2lkdGggKyAncHgnXCJcbiAgICAgICAgW3N0eWxlLmhlaWdodF09XCJpdGVtLndpZHRoICsgJ3B4J1wiXG4gICAgICAgIFtzdHlsZS50b3BdPVwiaXRlbS52ZXJ0aWNhbCArICclJ1wiXG4gICAgICAgIFtzdHlsZS5sZWZ0XT1cIml0ZW0uaG9yaXpvbnRhbCArICclJ1wiXG4gICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kXT1cIml0ZW0uY29sb3JcIlxuICAgICAgICBbc3R5bGUuZmlsdGVyXT1cIidibHVyKCcraXRlbS5ibHVyICsgJ3B4KSdcIlxuICAgICAgICBbc3R5bGUuYW5pbWF0aW9uLWR1cmF0aW9uXT1cIml0ZW0uZHVyYXRpb24gKyAncydcIlxuICAgICAgICBbc3R5bGUuYW5pbWF0aW9uLWRlbGF5XT1cIml0ZW0uZGVsYXkgKyAncydcIlxuICAgICAgICBbc3R5bGUuYW5pbWF0aW9uLW5hbWVdPVwiJ2xpZ2h0JytpdGVtLmFuaW1hdGlvblwiXG4gICAgICAgID48L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==