1 | var __extends = (this && this.__extends) || (function () {
|
2 | var extendStatics = Object.setPrototypeOf ||
|
3 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
4 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
5 | return function (d, b) {
|
6 | extendStatics(d, b);
|
7 | function __() { this.constructor = d; }
|
8 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
9 | };
|
10 | })();
|
11 | import { Component, ElementRef, HostListener, Input, NgZone, Optional, Renderer, ViewEncapsulation } from '@angular/core';
|
12 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
13 | import { Config } from '../../config/config';
|
14 | import { DomController } from '../../platform/dom-controller';
|
15 | import { Form } from '../../util/form';
|
16 | import { GestureController } from '../../gestures/gesture-controller';
|
17 | import { Haptic } from '../../tap-click/haptic';
|
18 | import { isTrueProperty } from '../../util/util';
|
19 | import { BaseInput } from '../../util/base-input';
|
20 | import { Item } from '../item/item';
|
21 | import { KEY_ENTER, KEY_SPACE } from '../../platform/key';
|
22 | import { Platform } from '../../platform/platform';
|
23 | import { ToggleGesture } from './toggle-gesture';
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 | var Toggle = (function (_super) {
|
62 | __extends(Toggle, _super);
|
63 | function Toggle(form, config, _plt, elementRef, renderer, _haptic, item, _gestureCtrl, _domCtrl, _zone) {
|
64 | var _this = _super.call(this, config, elementRef, renderer, 'toggle', false, form, item, null) || this;
|
65 | _this._plt = _plt;
|
66 | _this._haptic = _haptic;
|
67 | _this._gestureCtrl = _gestureCtrl;
|
68 | _this._domCtrl = _domCtrl;
|
69 | _this._zone = _zone;
|
70 | _this._activated = false;
|
71 | return _this;
|
72 | }
|
73 | Object.defineProperty(Toggle.prototype, "checked", {
|
74 | |
75 |
|
76 |
|
77 | get: function () {
|
78 | return this.value;
|
79 | },
|
80 | set: function (val) {
|
81 | this.value = val;
|
82 | },
|
83 | enumerable: true,
|
84 | configurable: true
|
85 | });
|
86 | |
87 |
|
88 |
|
89 | Toggle.prototype.ngAfterContentInit = function () {
|
90 | this._initialize();
|
91 | this._gesture = new ToggleGesture(this._plt, this, this._gestureCtrl, this._domCtrl);
|
92 | this._gesture.listen();
|
93 | };
|
94 | |
95 |
|
96 |
|
97 | Toggle.prototype._inputUpdated = function () { };
|
98 | |
99 |
|
100 |
|
101 | Toggle.prototype._inputNormalize = function (val) {
|
102 | return isTrueProperty(val);
|
103 | };
|
104 | |
105 |
|
106 |
|
107 | Toggle.prototype._onDragStart = function (startX) {
|
108 | var _this = this;
|
109 | (void 0) ;
|
110 | (void 0) ;
|
111 | this._zone.run(function () {
|
112 | _this._startX = startX;
|
113 | _this._fireFocus();
|
114 | _this._activated = true;
|
115 | });
|
116 | };
|
117 | |
118 |
|
119 |
|
120 | Toggle.prototype._onDragMove = function (currentX) {
|
121 | var _this = this;
|
122 | if (this._startX === undefined) {
|
123 | (void 0) ;
|
124 | return;
|
125 | }
|
126 | if (this._shouldToggle(currentX, -15)) {
|
127 | this._zone.run(function () {
|
128 | _this.value = !_this.value;
|
129 | _this._startX = currentX;
|
130 | _this._haptic.selection();
|
131 | });
|
132 | }
|
133 | };
|
134 | |
135 |
|
136 |
|
137 | Toggle.prototype._onDragEnd = function (endX) {
|
138 | var _this = this;
|
139 | if (this._startX === undefined) {
|
140 | (void 0) ;
|
141 | return;
|
142 | }
|
143 | (void 0) ;
|
144 | this._zone.run(function () {
|
145 | if (_this._shouldToggle(endX, 4)) {
|
146 | _this.value = !_this.value;
|
147 | _this._haptic.selection();
|
148 | }
|
149 | _this._activated = false;
|
150 | _this._fireBlur();
|
151 | _this._startX = null;
|
152 | });
|
153 | };
|
154 | |
155 |
|
156 |
|
157 | Toggle.prototype._shouldToggle = function (currentX, margin) {
|
158 | var isLTR = !this._plt.isRTL;
|
159 | var startX = this._startX;
|
160 | if (this._value) {
|
161 | return (isLTR && (startX + margin > currentX)) ||
|
162 | (!isLTR && (startX - margin < currentX));
|
163 | }
|
164 | else {
|
165 | return (isLTR && (startX - margin < currentX)) ||
|
166 | (!isLTR && (startX + margin > currentX));
|
167 | }
|
168 | };
|
169 | |
170 |
|
171 |
|
172 | Toggle.prototype._keyup = function (ev) {
|
173 | if (ev.keyCode === KEY_SPACE || ev.keyCode === KEY_ENTER) {
|
174 | (void 0) ;
|
175 | ev.preventDefault();
|
176 | ev.stopPropagation();
|
177 | this.value = !this.value;
|
178 | }
|
179 | };
|
180 | |
181 |
|
182 |
|
183 | Toggle.prototype.ngOnDestroy = function () {
|
184 | _super.prototype.ngOnDestroy.call(this);
|
185 | this._gesture && this._gesture.destroy();
|
186 | };
|
187 | Toggle.decorators = [
|
188 | { type: Component, args: [{
|
189 | selector: 'ion-toggle',
|
190 | template: '<div class="toggle-icon">' +
|
191 | '<div class="toggle-inner"></div>' +
|
192 | '</div>' +
|
193 | '<button role="checkbox" ' +
|
194 | 'type="button" ' +
|
195 | 'ion-button="item-cover" ' +
|
196 | '[id]="id" ' +
|
197 | '[attr.aria-checked]="_value" ' +
|
198 | '[attr.aria-labelledby]="_labelId" ' +
|
199 | '[attr.aria-disabled]="_disabled" ' +
|
200 | 'class="item-cover" disable-activated>' +
|
201 | '</button>',
|
202 | host: {
|
203 | '[class.toggle-disabled]': '_disabled',
|
204 | '[class.toggle-checked]': '_value',
|
205 | '[class.toggle-activated]': '_activated',
|
206 | },
|
207 | providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: Toggle, multi: true }],
|
208 | encapsulation: ViewEncapsulation.None,
|
209 | },] },
|
210 | ];
|
211 |
|
212 | Toggle.ctorParameters = function () { return [
|
213 | { type: Form, },
|
214 | { type: Config, },
|
215 | { type: Platform, },
|
216 | { type: ElementRef, },
|
217 | { type: Renderer, },
|
218 | { type: Haptic, },
|
219 | { type: Item, decorators: [{ type: Optional },] },
|
220 | { type: GestureController, },
|
221 | { type: DomController, },
|
222 | { type: NgZone, },
|
223 | ]; };
|
224 | Toggle.propDecorators = {
|
225 | 'checked': [{ type: Input },],
|
226 | '_keyup': [{ type: HostListener, args: ['keyup', ['$event'],] },],
|
227 | };
|
228 | return Toggle;
|
229 | }(BaseInput));
|
230 | export { Toggle };
|
231 |
|
\ | No newline at end of file |