@ngfx/ui
Version:
Angular UI library for gaming and creative applications
46 lines (45 loc) • 10.5 kB
JavaScript
import { Component, Input, ViewChild, HostBinding } from '@angular/core';
import { NgFxDraggableDirective } from './draggable.directive';
import { DomSanitizer } from '@angular/platform-browser';
export class NgFxSliderComponent {
constructor(_sanitizer) {
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('');
}
hasName() {
return this.control.name !== undefined && this.control.name.length > 0;
}
sanitize(style) {
return this._sanitizer.bypassSecurityTrustStyle(style);
}
}
NgFxSliderComponent.decorators = [
{ type: Component, args: [{
selector: 'ngfx-slider, [ngfx-slider]',
template: "<div class=\"ngfx__slider\" [ngClass]=\"{\'is--hor\' : control.orient === \'is--hor\',\n \'is--vert\' : control.orient === \'is--vert\',\n \'is--joystick\' : control.orient === \'is--joystick\'}\"><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__draggable\" ngfxDraggable [control]=\"control\" [ngClass]=\"{\'is--active\': control.hasUserInput === true }\"><div class=\"ngfx__range\"><div class=\"ngfx__handle\"></div></div></div></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}\n\n:host:after {\n content: \'\';\n display: table;\n clear: both;\n}\n\n:host .ngfx__slider .ngfx__title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n}\n\n:host .ngfx__slider .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__slider .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__slider .ngfx__title .slave__indicator.is--visible {\n display: block;\n}\n\n:host .ngfx__slider .ngfx__draggable {\n display: block;\n z-index: 1000;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 12px;\n -webkit-transform: translateY(8px);\n transform: translateY(8px);\n}\n\n:host .ngfx__slider .ngfx__draggable.is--active {\n background: rgba(255, 255, 255, 0.1);\n border: 2px solid rgba(255, 255, 255, 0.5);\n}\n\n:host .ngfx__slider .ngfx__draggable .ngfx__range {\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n:host .ngfx__slider .ngfx__draggable .ngfx__handle {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version=\'1.0\' encoding=\'utf-8\'?%3e%3c!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 512 512\' style=\'enable-background:new 0 0 512 512;\' xml:space=\'preserve\'%3e%3cstyle type=\'text/css\'%3e .st0%7bfill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d .st1%7bdisplay:none;%7d .st2%7bdisplay:inline;fill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d %3c/style%3e%3cg id=\'Layer_1\'%3e%3ccircle class=\'st0\' cx=\'256\' cy=\'256\' r=\'245.2\'/%3e%3c/g%3e%3cg id=\'Layer_2\' class=\'st1\'%3e%3cline class=\'st2\' x1=\'256\' y1=\'3.7\' x2=\'256\' y2=\'508.3\'/%3e%3c/g%3e%3cg id=\'Layer_3\' class=\'st1\'%3e%3cline class=\'st2\' x1=\'508.3\' y1=\'256\' x2=\'3.7\' y2=\'256\'/%3e%3c/g%3e%3c/svg%3e\");\n background-repeat: no-repeat;\n transition: -webkit-transform 0.175;\n transition: transform 0.175;\n transition: transform 0.175, -webkit-transform 0.175;\n pointer-events: none;\n opacity: 0.3;\n}\n\n:host .ngfx__slider.is--hor {\n width: 200px;\n height: 32px;\n}\n\n:host .ngfx__slider.is--hor .ngfx__draggable {\n width: 200px;\n height: 32px;\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==\") 22 22, pointer;\n}\n\n:host .ngfx__slider.is--hor .ngfx__draggable .ngfx__handle {\n background: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version=\'1.0\' encoding=\'utf-8\'?%3e%3c!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 512 512\' style=\'enable-background:new 0 0 512 512;\' xml:space=\'preserve\'%3e%3cstyle type=\'text/css\'%3e .st0%7bdisplay:none;%7d .st1%7bdisplay:inline;fill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d .st2%7bfill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d %3c/style%3e%3cg id=\'Layer_1\' class=\'st0\'%3e%3ccircle class=\'st1\' cx=\'256\' cy=\'256\' r=\'245.2\'/%3e%3c/g%3e%3cg id=\'Layer_2\'%3e%3cline class=\'st2\' x1=\'256\' y1=\'3.7\' x2=\'256\' y2=\'508.3\'/%3e%3c/g%3e%3cg id=\'Layer_3\' class=\'st0\'%3e%3cline class=\'st1\' x1=\'508.3\' y1=\'256\' x2=\'3.7\' y2=\'256\'/%3e%3c/g%3e%3c/svg%3e\");\n background-size: 44px 32px;\n background-position: 50% 0px;\n}\n\n:host .ngfx__slider.is--vert {\n width: 32px;\n height: 200px;\n}\n\n:host .ngfx__slider.is--vert .ngfx__draggable {\n width: 32px;\n height: 200px;\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==\") 22 0, pointer;\n}\n\n:host .ngfx__slider.is--vert .ngfx__draggable .ngfx__handle {\n background: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version=\'1.0\' encoding=\'utf-8\'?%3e%3c!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 512 512\' style=\'enable-background:new 0 0 512 512;\' xml:space=\'preserve\'%3e%3cstyle type=\'text/css\'%3e .st0%7bdisplay:none;%7d .st1%7bdisplay:inline;fill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d .st2%7bfill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d %3c/style%3e%3cg id=\'Layer_1\' class=\'st0\'%3e%3ccircle class=\'st1\' cx=\'256\' cy=\'256\' r=\'245.2\'/%3e%3c/g%3e%3cg id=\'Layer_2\' class=\'st0\'%3e%3cline class=\'st1\' x1=\'256\' y1=\'3.7\' x2=\'256\' y2=\'508.3\'/%3e%3c/g%3e%3cg id=\'Layer_3\'%3e%3cline class=\'st2\' x1=\'508.3\' y1=\'256\' x2=\'3.7\' y2=\'256\'/%3e%3c/g%3e%3c/svg%3e\");\n background-size: 32px 44px;\n background-position: 0px 50%;\n}\n\n:host .ngfx__slider.is--joystick {\n width: 200px;\n height: auto;\n}\n\n:host .ngfx__slider.is--joystick .ngfx__draggable {\n width: 200px;\n height: 200px;\n border-radius: 50%;\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__slider.is--joystick .ngfx__draggable .ngfx__handle {\n position: absolute;\n background-size: 44px 44px;\n width: 44px;\n height: 44px;\n}\n"]
},] },
];
NgFxSliderComponent.ctorParameters = () => [
{ type: DomSanitizer }
];
NgFxSliderComponent.propDecorators = {
control: [{ type: Input, args: ['control',] }],
draggable: [{ type: ViewChild, args: [NgFxDraggableDirective,] }],
transform: [{ type: HostBinding, args: ['style.transform',] }],
gridArea: [{ type: HostBinding, args: ['style.grid-area',] }],
placeSelf: [{ type: HostBinding, args: ['style.place-self',] }]
};
if (false) {
NgFxSliderComponent.prototype.control;
NgFxSliderComponent.prototype.draggable;
NgFxSliderComponent.prototype._sanitizer;
}