javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(scroll): fix JS error when scrolling text input

Browse Source
This commit is contained in:
Adam Bradley
2015-11-16 16:35:59 -06:00
parent df3a59dc81
commit 3ec39c51b5
4 changed files with 110 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ionic/components/content/content.ts
View File

@ -6,7 +6,6 @@ import {Keyboard} from '../../util/keyboard';
import {ViewController} from '../nav/view-controller'; import {ViewController} from '../nav/view-controller';
import {Animation} from '../../animations/animation'; import {Animation} from '../../animations/animation';
import {ScrollTo} from '../../animations/scroll-to'; import {ScrollTo} from '../../animations/scroll-to';
import {FeatureDetect} from '../../util/feature-detect';
/** /**
* The Content component provides an easy to use content area that can be configured to use Ionic's custom Scroll View, or the built in overflow scrolling of the browser. * The Content component provides an easy to use content area that can be configured to use Ionic's custom Scroll View, or the built in overflow scrolling of the browser.
@ -72,14 +71,16 @@ export class Content extends Ion {
} }
} }
onScrollEnd(callback) { onScrollEnd(callback, debounceWait=400) {
let timerId, deregister; let timerId, deregister;
function debounce() { function debounce() {
console.debug('onScroll')
clearTimeout(timerId);
timerId = setTimeout(() => { timerId = setTimeout(() => {
deregister(); deregister();
callback(); callback();
}, 250); }, debounceWait);
} }
deregister = this.addScrollEventListener(debounce); deregister = this.addScrollEventListener(debounce);

8
ionic/components/text-input/test/inline-labels/index.ts
View File

@ -4,4 +4,10 @@ import {App} from 'ionic/ionic';
@App({ @App({
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class E2EApp {} class E2EApp {
submit(ev) {
debugger
}
}

120
ionic/components/text-input/test/inline-labels/main.html
View File

@ -4,76 +4,80 @@
<ion-content> <ion-content>
<ion-list> <form (ng-submit)="submit($event)">
<ion-input> <ion-list>
<ion-label>To:</ion-label>
<input value="Text 1" type="text">
</ion-input>
<ion-input> <ion-input>
<ion-label>CC:</ion-label> <ion-label>To:</ion-label>
<input value="Text 2" type="text"> <input value="Text 1" type="text">
</ion-input> </ion-input>
<ion-input> <ion-input>
<ion-label>From:</ion-label> <ion-label>CC:</ion-label>
<input value="Text 3" type="text"> <input value="Text 2" type="text">
<button clear item-right> </ion-input>
<icon power></icon>
</button>
</ion-input>
<ion-input> <ion-input>
<ion-label>Comments:</ion-label> <ion-label>From:</ion-label>
<textarea>Comment value</textarea> <input value="Text 3" type="text">
</ion-input> <button clear item-right>
<icon power></icon>
</button>
</ion-input>
<ion-input> <ion-input>
<icon globe item-left></icon> <ion-label>Comments:</ion-label>
<ion-label>Website:</ion-label> <textarea>Comment value</textarea>
<input value="http://ionic.io/" type="url"> </ion-input>
</ion-input>
<ion-input> <ion-input>
<icon mail item-left></icon> <icon globe item-left></icon>
<ion-label>Email:</ion-label> <ion-label>Website:</ion-label>
<input value="email6@email.com" type="email"> <input value="http://ionic.io/" type="url">
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon create item-left></icon> <icon mail item-left></icon>
<ion-label>Feedback:</ion-label> <ion-label>Email:</ion-label>
<textarea placeholder="Placeholder Text"></textarea> <input value="email6@email.com" type="email">
</ion-input> </ion-input>
<ion-input> <ion-input>
<ion-label>More Info:</ion-label> <icon create item-left></icon>
<input placeholder="Placeholder Text" type="text"> <ion-label>Feedback:</ion-label>
<icon flag item-right></icon> <textarea placeholder="Placeholder Text"></textarea>
</ion-input> </ion-input>
<ion-input> <ion-input>
<ion-label>Score:</ion-label> <ion-label>More Info:</ion-label>
<input value="10" type="number"> <input placeholder="Placeholder Text" type="text">
<button outline item-right>Update</button> <icon flag item-right></icon>
</ion-input> </ion-input>
<ion-input> <ion-input>
<ion-label>First Name:</ion-label> <ion-label>Score:</ion-label>
<input value="Lightning" type="text"> <input value="10" type="number">
</ion-input> <button outline item-right>Update</button>
</ion-input>
<ion-input> <ion-input>
<ion-label>Last Name:</ion-label> <ion-label>First Name:</ion-label>
<input value="McQueen" type="text"> <input value="Lightning" type="text">
</ion-input> </ion-input>
<ion-input> <ion-input>
<ion-label>Message:</ion-label> <ion-label>Last Name:</ion-label>
<textarea>KA-CHOW!</textarea> <input value="McQueen" type="text">
</ion-input> </ion-input>
</ion-list> <ion-input>
<ion-label>Message:</ion-label>
<textarea>KA-CHOW!</textarea>
</ion-input>
</ion-list>
</form>
</ion-content> </ion-content>

59
ionic/components/text-input/text-input.ts
View File

@ -87,7 +87,7 @@ export class TextInput {
self.deregListeners(); self.deregListeners();
if (self.hasFocus) { if (self.hasFocus) {
//self.input.hideFocus();
} }
}; };
} }
@ -315,6 +315,9 @@ export class TextInput {
*/ */
focusChange(hasFocus) { focusChange(hasFocus) {
this.renderer.setElementClass(this.elementRef, 'has-focus', hasFocus); this.renderer.setElementClass(this.elementRef, 'has-focus', hasFocus);
if (!hasFocus) {
this.deregListeners();
}
} }
/** /**
@ -419,34 +422,46 @@ export class TextInputElement {
} }
relocate(shouldRelocate, inputRelativeY) { relocate(shouldRelocate, inputRelativeY) {
this.clone(shouldRelocate, inputRelativeY); if (this._relocated !== shouldRelocate) {
if (shouldRelocate) { let focusedInputEle = this.getNativeElement();
this.wrapper.setFocus(); if (shouldRelocate) {
let clonedInputEle = focusedInputEle.cloneNode(true);
clonedInputEle.classList.add('cloned-input');
clonedInputEle.setAttribute('aria-hidden', true);
clonedInputEle.tabIndex = -1;
focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
focusedInputEle.classList.add('hide-focused-input');
focusedInputEle.style[dom.CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
this.wrapper.setFocus();
} else {
focusedInputEle.classList.remove('hide-focused-input');
focusedInputEle.style[dom.CSS.transform] = '';
let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-input');
if (clonedInputEle) {
clonedInputEle.parentNode.removeChild(clonedInputEle);
}
}
this._relocated = shouldRelocate;
} }
} }
clone(shouldClone, inputRelativeY) { hideFocus() {
console.debug('hideFocus');
let focusedInputEle = this.getNativeElement(); let focusedInputEle = this.getNativeElement();
if (shouldRelocate) { let hiddenInputEle = focusedInputEle.parentNode.querySelector('.cloned-hidden');
let clonedInputEle = focusedInputEle.cloneNode(true); if (!hiddenInputEle) {
clonedInputEle.classList.add('cloned-input'); hiddenInputEle = focusedInputEle.cloneNode(true);
clonedInputEle.setAttribute('aria-hidden', true); hiddenInputEle.classList.add('cloned-hidden');
clonedInputEle.tabIndex = -1; hiddenInputEle.setAttribute('aria-hidden', true);
hiddenInputEle.tabIndex = -1;
focusedInputEle.classList.add('hide-focused-input'); focusedInputEle.parentNode.appendChild(hiddenInputEle);
focusedInputEle.style[dom.CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
} else {
focusedInputEle.classList.remove('hide-focused-input');
focusedInputEle.style[dom.CSS.transform] = '';
let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-input');
if (clonedInputEle) {
clonedInputEle.parentNode.removeChild(clonedInputEle);
}
} }
hiddenInputEle.focus();
} }
get hasFocus() { get hasFocus() {