@ngfx/ui
Version:
Angular UI library for gaming and creative applications
84 lines (83 loc) • 5.05 kB
JavaScript
import { Component, Input, HostBinding, HostListener } from '@angular/core';
import { NgFxController } from './../../services/controller/controller.service';
import { DomSanitizer } from '@angular/platform-browser';
export class NgFxButtonComponent {
constructor(_controller, _sanitizer) {
this._controller = _controller;
this._sanitizer = _sanitizer;
}
get transform() {
return this.sanitize(this.control.transform) || this.sanitize('');
}
get gridArea() {
return this.sanitize(this.control.gridArea) || this.sanitize('');
}
get placeSelf() {
return this.sanitize(this.control.placeSelf) || this.sanitize('');
}
onMouseup(event) {
this.onHold = false;
this.control.currentValue = false;
this.control.hasUserInput = false;
window.clearInterval(this._holdInterval);
this._controller.onEvent.emit({
type: 'change',
control: this.control
});
}
onMousedown(event) {
this.onHold = true;
this._holdInterval = window.setInterval(() => {
this.setActive();
}, 200);
this.setActive();
}
onTouchStart(e) {
this.onMousedown(e);
}
onTouchEnd(e) {
this.onMouseup(e);
}
setActive() {
this.control.currentValue = true;
this.control.hasUserInput = true;
this._controller.onEvent.emit({
type: 'change',
control: this.control
});
}
hasName() {
return this.control.name !== undefined && this.control.name.length > 0;
}
sanitize(style) {
return this._sanitizer.bypassSecurityTrustStyle(style);
}
}
NgFxButtonComponent.decorators = [
{ type: Component, args: [{
selector: 'ngfx-button, [ngfx-button]',
template: "<div class=\"ngfx__title\" [hidden]=\"!hasName()\"><span class=\"control__name\">{{control.name.charAt(0).toUpperCase()}}</span> <span class=\"slave__indicator\" [ngClass]=\"{\'is--visible\': control.hasRemoteInput === true }\"></span></div><div class=\"ngfx__button\" [ngClass]=\"{\'is--active\' : control.currentValue === true }\"></div>",
styles: [":host {\n display: flex;\n flex-direction: column;\n justify-content: left;\n}\n\n:host .ngfx__title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n -webkit-transform: translateY(-4px);\n transform: translateY(-4px);\n}\n\n:host .ngfx__title .control__name {\n color: rgba(255, 255, 255, 0.3);\n font-size: 12px;\n font-weight: 700;\n}\n\n:host .ngfx__title .slave__indicator {\n width: 8px;\n height: 8px;\n border-radius: 50% 50%;\n background: rgba(255, 255, 255, 0.5);\n -webkit-transform: translateX(4px) translateY(3px);\n transform: translateX(4px) translateY(3px);\n display: none;\n}\n\n:host .ngfx__title .slave__indicator.is--visible {\n display: block;\n}\n\n:host .ngfx__button {\n width: 100%;\n min-height: 32px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 14px;\n cursor: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAACEUlEQVRYhe2Z646CMBBGTwusl/d/VnUV6P6Yjq0V5KJISfZLSCMBPYxfp2XGOOd4QwYo/GH9YZJrHND6o/HH7B8t37iv8qNCKkQKY6JR4Wvg5sdJMhMjXAI7Pxr/41OjZQgPUQO/TAAfC2yAAxJVENBPyPrxBlzGfO8Y4AqBtYj/llCBwJ4R+F4NAf8gsPC5qPZJo31BbPLyoi7tgCNhoiwtnQ8HYN93UR+wRnbOpHpHDrHdHgnYk7qASySy34aN1SIBe0q7KbAh2GAtWAg2PJIsRCnw3p/7hmeH5BCWQ3wyBi4R7y6VuuaoIayowCNwp8kz0Z1NgQvkKXKwQqoWYSshAP+shjNeFQTgknWzwpAcfsNlCVvE3IEtUFjEv1tRoW8JW9HmgE36epOzHB54U/oHXlqaf9NaQo4ygMtlKzlWmwNulnx1X0KNRaouLXn7WKtMjWaJmvyBa7yHAa4rwozVDUIebpAnyDEvq21r/aDqLQ+tLEPEFgPXiDVy2h8XCNO9HJtaQEueOUxA3UVe4pMpsANOdJf+vynjGU4kC1vXJKuROu2aE9DSUyvu63GoydeoYBa8qBG/asroDXvCSrOk1AZnXmSsXFoGus29MLCIjW3KWCTSm2jKxKqQspZaaU4dOW17XRloxDzcPLMTmjYWY3V9YZwitbGozcVJmgscgyh0wWP0VPovNIT27WxL/QG7cp5Q+WnBUwAAAABJRU5ErkJggg==\") 0 0, pointer;\n}\n\n:host .ngfx__button.is--active {\n background: rgba(255, 255, 255, 0.1);\n border: 2px solid rgba(255, 255, 255, 0.5);\n}\n"]
},] },
];
NgFxButtonComponent.ctorParameters = () => [
{ type: NgFxController },
{ type: DomSanitizer }
];
NgFxButtonComponent.propDecorators = {
control: [{ type: Input, args: ['control',] }],
transform: [{ type: HostBinding, args: ['style.transform',] }],
gridArea: [{ type: HostBinding, args: ['style.grid-area',] }],
placeSelf: [{ type: HostBinding, args: ['style.place-self',] }],
onMouseup: [{ type: HostListener, args: ['mouseup', ['$event'],] }],
onMousedown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
onTouchStart: [{ type: HostListener, args: ['touchstart', ['$event'],] }],
onTouchEnd: [{ type: HostListener, args: ['touchend', ['$event'],] }]
};
if (false) {
NgFxButtonComponent.prototype.onHold;
NgFxButtonComponent.prototype._holdInterval;
NgFxButtonComponent.prototype.control;
NgFxButtonComponent.prototype._controller;
NgFxButtonComponent.prototype._sanitizer;
}