123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747
  1. import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Optional, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
  2. import { NgControl } from '@angular/forms';
  3. import { Subject } from 'rxjs/Subject';
  4. import 'rxjs/add/operator/takeUntil';
  5. import { App } from '../app/app';
  6. import { Config } from '../../config/config';
  7. import { Content } from '../content/content';
  8. import { copyInputAttributes, hasPointerMoved, pointerCoord } from '../../util/dom';
  9. import { DomController } from '../../platform/dom-controller';
  10. import { Form } from '../../util/form';
  11. import { BaseInput } from '../../util/base-input';
  12. import { isTrueProperty } from '../../util/util';
  13. import { Item } from '../item/item';
  14. import { Platform } from '../../platform/platform';
  15. /**
  16. * @name Input
  17. * @description
  18. *
  19. * `ion-input` is meant for text type inputs only, such as `text`,
  20. * `password`, `email`, `number`, `search`, `tel`, and `url`. Ionic
  21. * still uses an actual `<input type="text">` HTML element within the
  22. * component, however, with Ionic wrapping the native HTML input
  23. * element it's better able to handle the user experience and
  24. * interactivity.
  25. *
  26. * Similarly, `<ion-textarea>` should be used in place of `<textarea>`.
  27. *
  28. * An `ion-input` is **not** used for non-text type inputs, such as a
  29. * `checkbox`, `radio`, `toggle`, `range`, `select`, etc.
  30. *
  31. * Along with the blur/focus events, `input` support all standard text input
  32. * events like `keyup`, `keydown`, `keypress`, `input`,etc. Any standard event
  33. * can be attached and will function as expected.
  34. *
  35. * @usage
  36. * ```html
  37. * <ion-list>
  38. * <ion-item>
  39. * <ion-label color="primary">Inline Label</ion-label>
  40. * <ion-input placeholder="Text Input"></ion-input>
  41. * </ion-item>
  42. *
  43. * <ion-item>
  44. * <ion-label color="primary" fixed>Fixed Label</ion-label>
  45. * <ion-input type="tel" placeholder="Tel Input"></ion-input>
  46. * </ion-item>
  47. *
  48. * <ion-item>
  49. * <ion-input type="number" placeholder="Number Input with no label"></ion-input>
  50. * </ion-item>
  51. *
  52. * <ion-item>
  53. * <ion-label color="primary" stacked>Stacked Label</ion-label>
  54. * <ion-input type="email" placeholder="Email Input"></ion-input>
  55. * </ion-item>
  56. *
  57. * <ion-item>
  58. * <ion-label color="primary" stacked>Stacked Label</ion-label>
  59. * <ion-input type="password" placeholder="Password Input"></ion-input>
  60. * </ion-item>
  61. *
  62. * <ion-item>
  63. * <ion-label color="primary" floating>Floating Label</ion-label>
  64. * <ion-input></ion-input>
  65. * </ion-item>
  66. *
  67. * <ion-item>
  68. * <ion-input placeholder="Clear Input" clearInput></ion-input>
  69. * </ion-item>
  70. *
  71. * <ion-item>
  72. * <ion-textarea placeholder="Enter a description"></ion-textarea>
  73. * </ion-item>
  74. * </ion-list>
  75. * ```
  76. *
  77. * @demo /docs/demos/src/input/
  78. */
  79. export class TextInput extends BaseInput {
  80. constructor(config, _plt, _form, _app, elementRef, renderer, _content, _item, ngControl, _dom) {
  81. super(config, elementRef, renderer, 'input', '', _form, _item, ngControl);
  82. this._plt = _plt;
  83. this._app = _app;
  84. this._content = _content;
  85. this.ngControl = ngControl;
  86. this._dom = _dom;
  87. this._clearInput = false;
  88. this._readonly = false;
  89. this._type = 'text';
  90. this._isTextarea = false;
  91. this._onDestroy = new Subject();
  92. this._useAssist = false;
  93. this._relocated = false;
  94. /**
  95. * @input {string} Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
  96. */
  97. this.autocomplete = '';
  98. /**
  99. * @input {string} Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
  100. */
  101. this.autocorrect = '';
  102. /**
  103. * @input {string} Instructional text that shows before the input has a value.
  104. */
  105. this.placeholder = '';
  106. /**
  107. * @input {any} The minimum value, which must not be greater than its maximum (max attribute) value.
  108. */
  109. this.min = null;
  110. /**
  111. * @input {any} The maximum value, which must not be less than its minimum (min attribute) value.
  112. */
  113. this.max = null;
  114. /**
  115. * @input {any} Works with the min and max attributes to limit the increments at which a value can be set.
  116. */
  117. this.step = null;
  118. /**
  119. * @hidden
  120. */
  121. this.input = new EventEmitter();
  122. /**
  123. * @hidden
  124. */
  125. this.blur = new EventEmitter();
  126. /**
  127. * @hidden
  128. */
  129. this.focus = new EventEmitter();
  130. this.autocomplete = config.get('autocomplete', 'off');
  131. this.autocorrect = config.get('autocorrect', 'off');
  132. this._autoFocusAssist = config.get('autoFocusAssist', 'delay');
  133. this._keyboardHeight = config.getNumber('keyboardHeight');
  134. this._isTextarea = !!(elementRef.nativeElement.tagName === 'ION-TEXTAREA');
  135. if (this._isTextarea && _item) {
  136. _item.setElementClass('item-textarea', true);
  137. }
  138. // If not inside content, let's disable all the hacks
  139. if (!_content) {
  140. return;
  141. }
  142. const hideCaretOnScroll = config.getBoolean('hideCaretOnScroll', false);
  143. if (hideCaretOnScroll) {
  144. this._enableHideCaretOnScroll();
  145. }
  146. const win = _plt.win();
  147. const keyboardPlugin = win.Ionic && win.Ionic.keyboardPlugin;
  148. if (keyboardPlugin) {
  149. const keyboardResizes = config.getBoolean('keyboardResizes', false);
  150. if (keyboardResizes) {
  151. this._keyboardHeight = config.getNumber('keyboardSafeArea', 60);
  152. this._enableScrollMove();
  153. }
  154. else {
  155. this._enableScrollPadding();
  156. this._enableScrollMove();
  157. }
  158. }
  159. else {
  160. this._useAssist = config.getBoolean('scrollAssist', false);
  161. const usePadding = config.getBoolean('scrollPadding', this._useAssist);
  162. if (usePadding) {
  163. this._enableScrollPadding();
  164. }
  165. }
  166. }
  167. /**
  168. * @input {boolean} If true, a clear icon will appear in the input when there is a value. Clicking it clears the input.
  169. */
  170. get clearInput() {
  171. return this._clearInput;
  172. }
  173. set clearInput(val) {
  174. this._clearInput = (!this._isTextarea && isTrueProperty(val));
  175. }
  176. /**
  177. * @input {string} The type of control to display. The default type is text.
  178. * Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
  179. */
  180. get type() {
  181. return (this._isTextarea)
  182. ? 'text'
  183. : this._type;
  184. }
  185. set type(val) {
  186. this._type = val;
  187. }
  188. /**
  189. * @input {boolean} If true, the user cannot modify the value.
  190. */
  191. get readonly() {
  192. return this._readonly;
  193. }
  194. set readonly(val) {
  195. this._readonly = isTrueProperty(val);
  196. }
  197. /**
  198. * @input {boolean} If true, the value will be cleared after focus upon edit.
  199. * Defaults to `true` when `type` is `"password"`, `false` for all other types.
  200. */
  201. get clearOnEdit() {
  202. return this._clearOnEdit;
  203. }
  204. set clearOnEdit(val) {
  205. this._clearOnEdit = isTrueProperty(val);
  206. }
  207. ngAfterContentInit() { }
  208. /**
  209. * @hidden
  210. */
  211. ngAfterViewInit() {
  212. (void 0) /* assert */;
  213. // By default, password inputs clear after focus when they have content
  214. if (this.clearOnEdit !== false && this.type === 'password') {
  215. this.clearOnEdit = true;
  216. }
  217. const ionInputEle = this._elementRef.nativeElement;
  218. const nativeInputEle = this._native.nativeElement;
  219. // Copy remaining attributes, not handled by ionic/angular
  220. copyInputAttributes(ionInputEle, nativeInputEle);
  221. // prevent having tabIndex duplicated
  222. if (ionInputEle.hasAttribute('tabIndex')) {
  223. ionInputEle.removeAttribute('tabIndex');
  224. }
  225. // handle the autofocus attribute
  226. if (ionInputEle.hasAttribute('autofocus')) {
  227. ionInputEle.removeAttribute('autofocus');
  228. switch (this._autoFocusAssist) {
  229. case 'immediate':
  230. // config says to immediate focus on the input
  231. // works best on android devices
  232. nativeInputEle.focus();
  233. break;
  234. case 'delay':
  235. // config says to chill out a bit and focus on the input after transitions
  236. // works best on desktop
  237. this._plt.timeout(() => nativeInputEle.focus(), 800);
  238. break;
  239. }
  240. // traditionally iOS has big issues with autofocus on actual devices
  241. // autoFocus is disabled by default with the iOS mode config
  242. }
  243. // Initialize the input (can start emitting events)
  244. this._initialize();
  245. if (this.focus.observers.length > 0) {
  246. console.warn('(focus) is deprecated in ion-input, use (ionFocus) instead');
  247. }
  248. if (this.blur.observers.length > 0) {
  249. console.warn('(blur) is deprecated in ion-input, use (ionBlur) instead');
  250. }
  251. }
  252. /**
  253. * @hidden
  254. */
  255. ngOnDestroy() {
  256. super.ngOnDestroy();
  257. this._onDestroy.next();
  258. this._onDestroy = null;
  259. }
  260. /**
  261. * @hidden
  262. */
  263. initFocus() {
  264. this.setFocus();
  265. }
  266. /**
  267. * @hidden
  268. */
  269. setFocus() {
  270. // let's set focus to the element
  271. // but only if it does not already have focus
  272. if (!this.isFocus()) {
  273. this._native.nativeElement.focus();
  274. }
  275. }
  276. /**
  277. * @hidden
  278. */
  279. setBlur() {
  280. if (this.isFocus()) {
  281. this._native.nativeElement.blur();
  282. }
  283. }
  284. /**
  285. * @hidden
  286. */
  287. onInput(ev) {
  288. this.value = ev.target.value;
  289. // TODO: deprecate this
  290. this.input.emit(ev);
  291. }
  292. /**
  293. * @hidden
  294. */
  295. onBlur(ev) {
  296. this._fireBlur();
  297. // TODO: deprecate this (06/07/2017)
  298. this.blur.emit(ev);
  299. this._scrollData = null;
  300. if (this._clearOnEdit && this.hasValue()) {
  301. this._didBlurAfterEdit = true;
  302. }
  303. }
  304. /**
  305. * @hidden
  306. */
  307. onFocus(ev) {
  308. this._fireFocus();
  309. // TODO: deprecate this (06/07/2017)
  310. this.focus.emit(ev);
  311. }
  312. /**
  313. * @hidden
  314. */
  315. onKeydown(ev) {
  316. if (ev && this._clearOnEdit) {
  317. this.checkClearOnEdit(ev.target.value);
  318. }
  319. }
  320. /**
  321. * @hidden
  322. */
  323. _inputUpdated() {
  324. super._inputUpdated();
  325. const inputEle = this._native.nativeElement;
  326. const value = this._value;
  327. if (inputEle.value !== value) {
  328. inputEle.value = value;
  329. }
  330. }
  331. /**
  332. * @hidden
  333. */
  334. clearTextInput() {
  335. this.value = '';
  336. }
  337. /**
  338. * Check if we need to clear the text input if clearOnEdit is enabled
  339. * @hidden
  340. */
  341. checkClearOnEdit(_) {
  342. if (!this._clearOnEdit) {
  343. return;
  344. }
  345. // Did the input value change after it was blurred and edited?
  346. if (this._didBlurAfterEdit && this.hasValue()) {
  347. // Clear the input
  348. this.clearTextInput();
  349. }
  350. // Reset the flag
  351. this._didBlurAfterEdit = false;
  352. }
  353. _getScrollData() {
  354. if (!this._content) {
  355. return newScrollData();
  356. }
  357. // get container of this input, probably an ion-item a few nodes up
  358. if (this._scrollData) {
  359. return this._scrollData;
  360. }
  361. let ele = this._elementRef.nativeElement;
  362. ele = ele.closest('ion-item,[ion-item]') || ele;
  363. return this._scrollData = getScrollData(ele.offsetTop, ele.offsetHeight, this._content.getContentDimensions(), this._keyboardHeight, this._plt.height());
  364. }
  365. _relocateInput(shouldRelocate) {
  366. if (this._relocated === shouldRelocate) {
  367. return;
  368. }
  369. const platform = this._plt;
  370. const componentEle = this.getNativeElement();
  371. const focusedInputEle = this._native.nativeElement;
  372. (void 0) /* console.debug */;
  373. if (shouldRelocate) {
  374. // this allows for the actual input to receive the focus from
  375. // the user's touch event, but before it receives focus, it
  376. // moves the actual input to a location that will not screw
  377. // up the app's layout, and does not allow the native browser
  378. // to attempt to scroll the input into place (messing up headers/footers)
  379. // the cloned input fills the area of where native input should be
  380. // while the native input fakes out the browser by relocating itself
  381. // before it receives the actual focus event
  382. // We hide the focused input (with the visible caret) invisiable by making it scale(0),
  383. cloneInputComponent(platform, componentEle, focusedInputEle);
  384. const inputRelativeY = this._getScrollData().inputSafeY;
  385. // fix for #11817
  386. const tx = this._plt.isRTL ? 9999 : -9999;
  387. focusedInputEle.style[platform.Css.transform] = `translate3d(${tx}px,${inputRelativeY}px,0)`;
  388. focusedInputEle.style.opacity = '0';
  389. }
  390. else {
  391. removeClone(platform, componentEle, focusedInputEle);
  392. }
  393. this._relocated = shouldRelocate;
  394. }
  395. _enableScrollPadding() {
  396. (void 0) /* assert */;
  397. (void 0) /* console.debug */;
  398. this.ionFocus.subscribe(() => {
  399. const content = this._content;
  400. const scrollPadding = this._getScrollData().scrollPadding;
  401. content.addScrollPadding(scrollPadding);
  402. content.clearScrollPaddingFocusOut();
  403. });
  404. }
  405. _enableHideCaretOnScroll() {
  406. (void 0) /* assert */;
  407. const content = this._content;
  408. (void 0) /* console.debug */;
  409. content.ionScrollStart
  410. .takeUntil(this._onDestroy)
  411. .subscribe(() => scrollHideCaret(true));
  412. content.ionScrollEnd
  413. .takeUntil(this._onDestroy)
  414. .subscribe(() => scrollHideCaret(false));
  415. this.ionBlur.subscribe(() => this._relocateInput(false));
  416. const self = this;
  417. function scrollHideCaret(shouldHideCaret) {
  418. // if it does have focus, then do the dom write
  419. if (self.isFocus()) {
  420. self._dom.write(() => self._relocateInput(shouldHideCaret));
  421. }
  422. }
  423. }
  424. _enableScrollMove() {
  425. (void 0) /* assert */;
  426. (void 0) /* console.debug */;
  427. this.ionFocus.subscribe(() => {
  428. const scrollData = this._getScrollData();
  429. if (Math.abs(scrollData.scrollAmount) > 4) {
  430. this._content.scrollTo(0, scrollData.scrollTo, scrollData.scrollDuration);
  431. }
  432. });
  433. }
  434. _pointerStart(ev) {
  435. (void 0) /* assert */;
  436. // input cover touchstart
  437. if (ev.type === 'touchstart') {
  438. this._isTouch = true;
  439. }
  440. if ((this._isTouch || (!this._isTouch && ev.type === 'mousedown')) && this._app.isEnabled()) {
  441. // remember where the touchstart/mousedown started
  442. this._coord = pointerCoord(ev);
  443. }
  444. (void 0) /* console.debug */;
  445. }
  446. _pointerEnd(ev) {
  447. (void 0) /* assert */;
  448. // input cover touchend/mouseup
  449. (void 0) /* console.debug */;
  450. if ((this._isTouch && ev.type === 'mouseup') || !this._app.isEnabled()) {
  451. // the app is actively doing something right now
  452. // don't try to scroll in the input
  453. ev.preventDefault();
  454. ev.stopPropagation();
  455. }
  456. else if (this._coord) {
  457. // get where the touchend/mouseup ended
  458. var endCoord = pointerCoord(ev);
  459. // focus this input if the pointer hasn't moved XX pixels
  460. // and the input doesn't already have focus
  461. if (!hasPointerMoved(8, this._coord, endCoord) && !this.isFocus()) {
  462. ev.preventDefault();
  463. ev.stopPropagation();
  464. // begin the input focus process
  465. this._jsSetFocus();
  466. }
  467. }
  468. this._coord = null;
  469. }
  470. _jsSetFocus() {
  471. (void 0) /* assert */;
  472. // begin the process of setting focus to the inner input element
  473. const content = this._content;
  474. (void 0) /* console.debug */;
  475. if (!content) {
  476. // not inside of a scroll view, just focus it
  477. this.setFocus();
  478. }
  479. var scrollData = this._getScrollData();
  480. if (Math.abs(scrollData.scrollAmount) < 4) {
  481. // the text input is in a safe position that doesn't
  482. // require it to be scrolled into view, just set focus now
  483. this.setFocus();
  484. return;
  485. }
  486. // temporarily move the focus to the focus holder so the browser
  487. // doesn't freak out while it's trying to get the input in place
  488. // at this point the native text input still does not have focus
  489. this._relocateInput(true);
  490. this.setFocus();
  491. // scroll the input into place
  492. content.scrollTo(0, scrollData.scrollTo, scrollData.scrollDuration, () => {
  493. // the scroll view is in the correct position now
  494. // give the native text input focus
  495. this._relocateInput(false);
  496. // ensure this is the focused input
  497. this.setFocus();
  498. });
  499. }
  500. }
  501. TextInput.decorators = [
  502. { type: Component, args: [{
  503. selector: 'ion-input,ion-textarea',
  504. template: '<input #textInput *ngIf="!_isTextarea" class="text-input" ' +
  505. '[ngClass]="\'text-input-\' + _mode"' +
  506. '(input)="onInput($event)" ' +
  507. '(blur)="onBlur($event)" ' +
  508. '(focus)="onFocus($event)" ' +
  509. '(keydown)="onKeydown($event)" ' +
  510. '[type]="_type" ' +
  511. 'dir="auto" ' +
  512. '[attr.aria-labelledby]="_labelId" ' +
  513. '[attr.min]="min" ' +
  514. '[attr.max]="max" ' +
  515. '[attr.step]="step" ' +
  516. '[attr.autocomplete]="autocomplete" ' +
  517. '[attr.autocorrect]="autocorrect" ' +
  518. '[placeholder]="placeholder" ' +
  519. '[disabled]="_disabled" ' +
  520. '[readonly]="_readonly">' +
  521. '<textarea #textInput *ngIf="_isTextarea" class="text-input" ' +
  522. '[ngClass]="\'text-input-\' + _mode"' +
  523. '(input)="onInput($event)" ' +
  524. '(blur)="onBlur($event)" ' +
  525. '(focus)="onFocus($event)" ' +
  526. '(keydown)="onKeydown($event)" ' +
  527. '[attr.aria-labelledby]="_labelId" ' +
  528. '[attr.autocomplete]="autocomplete" ' +
  529. '[attr.autocorrect]="autocorrect" ' +
  530. '[placeholder]="placeholder" ' +
  531. '[disabled]="_disabled" ' +
  532. '[readonly]="_readonly"></textarea>' +
  533. '<button ion-button *ngIf="_clearInput" clear class="text-input-clear-icon" ' +
  534. 'type="button" ' +
  535. '(click)="clearTextInput($event)" ' +
  536. '(mousedown)="clearTextInput($event)" ' +
  537. 'tabindex="-1"></button>' +
  538. '<div class="input-cover" *ngIf="_useAssist" ' +
  539. '(touchstart)="_pointerStart($event)" ' +
  540. '(touchend)="_pointerEnd($event)" ' +
  541. '(mousedown)="_pointerStart($event)" ' +
  542. '(mouseup)="_pointerEnd($event)"></div>',
  543. encapsulation: ViewEncapsulation.None,
  544. changeDetection: ChangeDetectionStrategy.OnPush,
  545. inputs: ['value']
  546. },] },
  547. ];
  548. /** @nocollapse */
  549. TextInput.ctorParameters = () => [
  550. { type: Config, },
  551. { type: Platform, },
  552. { type: Form, },
  553. { type: App, },
  554. { type: ElementRef, },
  555. { type: Renderer, },
  556. { type: Content, decorators: [{ type: Optional },] },
  557. { type: Item, decorators: [{ type: Optional },] },
  558. { type: NgControl, decorators: [{ type: Optional },] },
  559. { type: DomController, },
  560. ];
  561. TextInput.propDecorators = {
  562. 'clearInput': [{ type: Input },],
  563. 'type': [{ type: Input },],
  564. 'readonly': [{ type: Input },],
  565. 'clearOnEdit': [{ type: Input },],
  566. '_native': [{ type: ViewChild, args: ['textInput', { read: ElementRef },] },],
  567. 'autocomplete': [{ type: Input },],
  568. 'autocorrect': [{ type: Input },],
  569. 'placeholder': [{ type: Input },],
  570. 'min': [{ type: Input },],
  571. 'max': [{ type: Input },],
  572. 'step': [{ type: Input },],
  573. 'input': [{ type: Output },],
  574. 'blur': [{ type: Output },],
  575. 'focus': [{ type: Output },],
  576. };
  577. /**
  578. * @name TextArea
  579. * @description
  580. *
  581. * `ion-textarea` is used for multi-line text inputs. Ionic still
  582. * uses an actual `<textarea>` HTML element within the component;
  583. * however, with Ionic wrapping the native HTML text area element, Ionic
  584. * is able to better handle the user experience and interactivity.
  585. *
  586. * Note that `<ion-textarea>` must load its value from the `value` or
  587. * `[(ngModel)]` attribute. Unlike the native `<textarea>` element,
  588. * `<ion-textarea>` does not support loading its value from the
  589. * textarea's inner content.
  590. *
  591. * When requiring only a single-line text input, we recommend using
  592. * `<ion-input>` instead.
  593. *
  594. * @usage
  595. * ```html
  596. * <ion-item>
  597. * <ion-label>Comments</ion-label>
  598. * <ion-textarea></ion-textarea>
  599. * </ion-item>
  600. *
  601. * <ion-item>
  602. * <ion-label stacked>Message</ion-label>
  603. * <ion-textarea [(ngModel)]="msg"></ion-textarea>
  604. * </ion-item>
  605. *
  606. * <ion-item>
  607. * <ion-label floating>Description</ion-label>
  608. * <ion-textarea></ion-textarea>
  609. * </ion-item>
  610. *
  611. * <ion-item>
  612. * <ion-label>Long Description</ion-label>
  613. * <ion-textarea rows="6" placeholder="enter long description here..."></ion-textarea>
  614. * </ion-item>
  615. * ```
  616. *
  617. * @demo /docs/demos/src/textarea/
  618. */
  619. const SCROLL_ASSIST_SPEED = 0.3;
  620. function newScrollData() {
  621. return {
  622. scrollAmount: 0,
  623. scrollTo: 0,
  624. scrollPadding: 0,
  625. scrollDuration: 0,
  626. inputSafeY: 0
  627. };
  628. }
  629. /**
  630. * @hidden
  631. */
  632. export function getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, plaformHeight) {
  633. // compute input's Y values relative to the body
  634. const inputTop = (inputOffsetTop + scrollViewDimensions.contentTop - scrollViewDimensions.scrollTop);
  635. const inputBottom = (inputTop + inputOffsetHeight);
  636. // compute the safe area which is the viewable content area when the soft keyboard is up
  637. const safeAreaTop = scrollViewDimensions.contentTop;
  638. const safeAreaHeight = (plaformHeight - keyboardHeight - safeAreaTop) / 2;
  639. const safeAreaBottom = safeAreaTop + safeAreaHeight;
  640. // figure out if each edge of teh input is within the safe area
  641. const inputTopWithinSafeArea = (inputTop >= safeAreaTop && inputTop <= safeAreaBottom);
  642. const inputTopAboveSafeArea = (inputTop < safeAreaTop);
  643. const inputTopBelowSafeArea = (inputTop > safeAreaBottom);
  644. const inputBottomWithinSafeArea = (inputBottom >= safeAreaTop && inputBottom <= safeAreaBottom);
  645. const inputBottomBelowSafeArea = (inputBottom > safeAreaBottom);
  646. /*
  647. Text Input Scroll To Scenarios
  648. ---------------------------------------
  649. 1) Input top within safe area, bottom within safe area
  650. 2) Input top within safe area, bottom below safe area, room to scroll
  651. 3) Input top above safe area, bottom within safe area, room to scroll
  652. 4) Input top below safe area, no room to scroll, input smaller than safe area
  653. 5) Input top within safe area, bottom below safe area, no room to scroll, input smaller than safe area
  654. 6) Input top within safe area, bottom below safe area, no room to scroll, input larger than safe area
  655. 7) Input top below safe area, no room to scroll, input larger than safe area
  656. */
  657. const scrollData = newScrollData();
  658. // when auto-scrolling, there also needs to be enough
  659. // content padding at the bottom of the scroll view
  660. // always add scroll padding when a text input has focus
  661. // this allows for the content to scroll above of the keyboard
  662. // content behind the keyboard would be blank
  663. // some cases may not need it, but when jumping around it's best
  664. // to have the padding already rendered so there's no jank
  665. scrollData.scrollPadding = keyboardHeight;
  666. if (inputTopWithinSafeArea && inputBottomWithinSafeArea) {
  667. // Input top within safe area, bottom within safe area
  668. // no need to scroll to a position, it's good as-is
  669. return scrollData;
  670. }
  671. // looks like we'll have to do some auto-scrolling
  672. if (inputTopBelowSafeArea || inputBottomBelowSafeArea || inputTopAboveSafeArea) {
  673. // Input top or bottom below safe area
  674. // auto scroll the input up so at least the top of it shows
  675. if (safeAreaHeight > inputOffsetHeight) {
  676. // safe area height is taller than the input height, so we
  677. // can bring up the input just enough to show the input bottom
  678. scrollData.scrollAmount = Math.round(safeAreaBottom - inputBottom);
  679. }
  680. else {
  681. // safe area height is smaller than the input height, so we can
  682. // only scroll it up so the input top is at the top of the safe area
  683. // however the input bottom will be below the safe area
  684. scrollData.scrollAmount = Math.round(safeAreaTop - inputTop);
  685. }
  686. scrollData.inputSafeY = -(inputTop - safeAreaTop) + 4;
  687. if (inputTopAboveSafeArea && scrollData.scrollAmount > inputOffsetHeight) {
  688. // the input top is above the safe area and we're already scrolling it into place
  689. // don't let it scroll more than the height of the input
  690. scrollData.scrollAmount = inputOffsetHeight;
  691. }
  692. }
  693. // figure out where it should scroll to for the best position to the input
  694. scrollData.scrollTo = (scrollViewDimensions.scrollTop - scrollData.scrollAmount);
  695. // calculate animation duration
  696. const distance = Math.abs(scrollData.scrollAmount);
  697. const duration = distance / SCROLL_ASSIST_SPEED;
  698. scrollData.scrollDuration = Math.min(400, Math.max(150, duration));
  699. return scrollData;
  700. }
  701. function cloneInputComponent(plt, srcComponentEle, srcNativeInputEle) {
  702. // Make sure we kill all the clones before creating new ones
  703. // It is a defensive, removeClone() should do nothing
  704. // removeClone(plt, srcComponentEle, srcNativeInputEle);
  705. (void 0) /* assert */;
  706. // given a native <input> or <textarea> element
  707. // find its parent wrapping component like <ion-input> or <ion-textarea>
  708. // then clone the entire component
  709. if (srcComponentEle) {
  710. // DOM READ
  711. var srcTop = srcComponentEle.offsetTop;
  712. var srcLeft = srcComponentEle.offsetLeft;
  713. var srcWidth = srcComponentEle.offsetWidth;
  714. var srcHeight = srcComponentEle.offsetHeight;
  715. // DOM WRITE
  716. // not using deep clone so we don't pull in unnecessary nodes
  717. var clonedComponentEle = srcComponentEle.cloneNode(false);
  718. var clonedStyle = clonedComponentEle.style;
  719. clonedComponentEle.classList.add('cloned-input');
  720. clonedComponentEle.setAttribute('aria-hidden', 'true');
  721. clonedStyle.pointerEvents = 'none';
  722. clonedStyle.position = 'absolute';
  723. clonedStyle.top = srcTop + 'px';
  724. clonedStyle.left = srcLeft + 'px';
  725. clonedStyle.width = srcWidth + 'px';
  726. clonedStyle.height = srcHeight + 'px';
  727. var clonedNativeInputEle = srcNativeInputEle.cloneNode(false);
  728. clonedNativeInputEle.value = srcNativeInputEle.value;
  729. clonedNativeInputEle.tabIndex = -1;
  730. clonedComponentEle.appendChild(clonedNativeInputEle);
  731. srcComponentEle.parentNode.appendChild(clonedComponentEle);
  732. srcComponentEle.style.pointerEvents = 'none';
  733. }
  734. srcNativeInputEle.style[plt.Css.transform] = 'scale(0)';
  735. }
  736. function removeClone(plt, srcComponentEle, srcNativeInputEle) {
  737. if (srcComponentEle && srcComponentEle.parentElement) {
  738. var clonedInputEles = srcComponentEle.parentElement.querySelectorAll('.cloned-input');
  739. for (var i = 0; i < clonedInputEles.length; i++) {
  740. clonedInputEles[i].parentNode.removeChild(clonedInputEles[i]);
  741. }
  742. srcComponentEle.style.pointerEvents = '';
  743. }
  744. srcNativeInputEle.style[plt.Css.transform] = '';
  745. srcNativeInputEle.style.opacity = '';
  746. }
  747. //# sourceMappingURL=input.js.map