ngx-i24-colored-lights
Version:
A lightweight plugin to render a simple, animated colored lighted cover.
156 lines (145 loc) • 10.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ngx-i24-colored-lights', ['exports', '@angular/core', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["ngx-i24-colored-lights"] = {}, global.ng.core, global.ng.common));
})(this, (function (exports, i0, i1) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var NgxI24ColoredLightsService = /** @class */ (function () {
function NgxI24ColoredLightsService() {
}
return NgxI24ColoredLightsService;
}());
NgxI24ColoredLightsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxI24ColoredLightsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
NgxI24ColoredLightsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxI24ColoredLightsService, providedIn: 'root' });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxI24ColoredLightsService, decorators: [{
type: i0.Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
var NgxI24ColoredLightsComponent = /** @class */ (function () {
function NgxI24ColoredLightsComponent() {
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 = [];
}
NgxI24ColoredLightsComponent.prototype.ngOnInit = function () {
this.initLights();
};
NgxI24ColoredLightsComponent.prototype.ngAfterViewInit = function () {
};
NgxI24ColoredLightsComponent.prototype.random = function (n) {
return Math.floor(Math.random() * n) + 1;
};
NgxI24ColoredLightsComponent.prototype.initLights = function () {
for (var 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 + ')';
}
};
return NgxI24ColoredLightsComponent;
}());
NgxI24ColoredLightsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxI24ColoredLightsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
NgxI24ColoredLightsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxI24ColoredLightsComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'i24-colored-lights',
templateUrl: './ngx-i24-colored-lights.component.html',
styleUrls: ['./ngx-i24-colored-lights.component.scss'],
encapsulation: i0.ViewEncapsulation.Emulated
}]
}], ctorParameters: function () { return []; }, propDecorators: { colorCollection: [{
type: i0.Input
}], lightsCount: [{
type: i0.Input
}], textColor: [{
type: i0.Input
}], lightSize: [{
type: i0.Input
}], blurLevel: [{
type: i0.Input
}], title: [{
type: i0.Input
}], imageUrl: [{
type: i0.Input
}] } });
var NgxI24ColoredLightsModule = /** @class */ (function () {
function NgxI24ColoredLightsModule() {
}
return NgxI24ColoredLightsModule;
}());
NgxI24ColoredLightsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxI24ColoredLightsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NgxI24ColoredLightsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxI24ColoredLightsModule, declarations: [NgxI24ColoredLightsComponent], imports: [i1.CommonModule], exports: [NgxI24ColoredLightsComponent] });
NgxI24ColoredLightsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxI24ColoredLightsModule, imports: [[
i1.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxI24ColoredLightsModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
NgxI24ColoredLightsComponent
],
imports: [
i1.CommonModule
],
exports: [
NgxI24ColoredLightsComponent
]
}]
}] });
/*
* Public API Surface of ngx-i24-colored-lights
*/
/**
* Generated bundle index. Do not edit.
*/
exports.NgxI24ColoredLightsComponent = NgxI24ColoredLightsComponent;
exports.NgxI24ColoredLightsModule = NgxI24ColoredLightsModule;
exports.NgxI24ColoredLightsService = NgxI24ColoredLightsService;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ngx-i24-colored-lights.umd.js.map