@ngfx/ui
Version:
Angular UI library for gaming and creative applications
51 lines (50 loc) • 2.67 kB
JavaScript
import { Component, Input } from '@angular/core';
import { NgFxController } from '../../services/controller/controller.service';
import { DomSanitizer } from '@angular/platform-browser';
export class NgFxSurfaceComponent {
constructor(_controller, _sanitizer) {
this._controller = _controller;
this._sanitizer = _sanitizer;
this.controlMap = new Array();
}
ngOnChanges(changes) {
if (changes["controller"]) {
this.controlMap = this.mapToControls(changes["controller"].currentValue);
}
}
mapToControls(key) {
return Object.keys(this._controller.surfaces[key].controls).map((prop) => {
return this._controller.surfaces[key].controls[prop];
});
}
sanitize(style) {
return this._sanitizer.bypassSecurityTrustStyle(style);
}
ngOnInit() { }
}
NgFxSurfaceComponent.decorators = [
{ type: Component, args: [{
selector: 'ngfx-surface, [ngfx-surface]',
template: "<div class=\"control__group\" [style.display]=\"sanitize(display)\" [style.grid]=\"sanitize(grid)\" [style.grid-gap]=\"sanitize(gridGap)\"><ng-container *ngFor=\"let control of controlMap\"><ngfx-slider *ngIf=\"control.type === \'slider\'\" [control]=\"control\" class=\"control__pane\"></ngfx-slider><ngfx-button *ngIf=\"control.type === \'button\'\" [control]=\"control\" class=\"control__pane\"></ngfx-button></ng-container></div>",
styles: ["/**\n * Convert font-size from px to rem with px fallback\n *\n * @param $size - the value in pixel you want to convert\n *\n * e.g. p {@include fontSize(12px);}\n *\n */\n:host {\n display: block;\n overflow: hidden;\n}\n\n:host:after {\n content: \'\';\n display: table;\n clear: both;\n}\n\n.control__group {\n width: 100%;\n height: 100vh;\n overflow: hidden;\n display: grid;\n}\n\n.control__group:after {\n content: \'\';\n display: table;\n clear: both;\n}\n"]
},] },
];
NgFxSurfaceComponent.ctorParameters = () => [
{ type: NgFxController },
{ type: DomSanitizer }
];
NgFxSurfaceComponent.propDecorators = {
controller: [{ type: Input, args: ['controller',] }],
grid: [{ type: Input, args: ['grid',] }],
gridGap: [{ type: Input, args: ['gridGap',] }],
display: [{ type: Input, args: ['display',] }]
};
if (false) {
NgFxSurfaceComponent.prototype.controller;
NgFxSurfaceComponent.prototype.grid;
NgFxSurfaceComponent.prototype.gridGap;
NgFxSurfaceComponent.prototype.display;
NgFxSurfaceComponent.prototype.controlMap;
NgFxSurfaceComponent.prototype._controller;
NgFxSurfaceComponent.prototype._sanitizer;
}