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 {Animation} from '../../animations/animation';
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.
@ -72,14 +71,16 @@ export class Content extends Ion {
}
}
onScrollEnd(callback) {
onScrollEnd(callback, debounceWait=400) {
let timerId, deregister;
function debounce() {
console.debug('onScroll')
clearTimeout(timerId);
timerId = setTimeout(() => {
deregister();
callback();
}, 250);
}, debounceWait);
}
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({
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-list>
<form (ng-submit)="submit($event)">
<ion-input>
<ion-label>To:</ion-label>
<input value="Text 1" type="text">
</ion-input>
<ion-list>
<ion-input>
<ion-label>CC:</ion-label>
<input value="Text 2" type="text">
</ion-input>
<ion-input>
<ion-label>To:</ion-label>
<input value="Text 1" type="text">
</ion-input>
<ion-input>
<ion-label>From:</ion-label>
<input value="Text 3" type="text">
<button clear item-right>
<icon power></icon>
</button>
</ion-input>
<ion-input>
<ion-label>CC:</ion-label>
<input value="Text 2" type="text">
</ion-input>
<ion-input>
<ion-label>Comments:</ion-label>
<textarea>Comment value</textarea>
</ion-input>
<ion-input>
<ion-label>From:</ion-label>
<input value="Text 3" type="text">
<button clear item-right>
<icon power></icon>
</button>
</ion-input>
<ion-input>
<icon globe item-left></icon>
<ion-label>Website:</ion-label>
<input value="http://ionic.io/" type="url">
</ion-input>
<ion-input>
<ion-label>Comments:</ion-label>
<textarea>Comment value</textarea>
</ion-input>
<ion-input>
<icon mail item-left></icon>
<ion-label>Email:</ion-label>
<input value="email6@email.com" type="email">
</ion-input>
<ion-input>
<icon globe item-left></icon>
<ion-label>Website:</ion-label>
<input value="http://ionic.io/" type="url">
</ion-input>
<ion-input>
<icon create item-left></icon>
<ion-label>Feedback:</ion-label>
<textarea placeholder="Placeholder Text"></textarea>
</ion-input>
<ion-input>
<icon mail item-left></icon>
<ion-label>Email:</ion-label>
<input value="email6@email.com" type="email">
</ion-input>
<ion-input>
<ion-label>More Info:</ion-label>
<input placeholder="Placeholder Text" type="text">
<icon flag item-right></icon>
</ion-input>
<ion-input>
<icon create item-left></icon>
<ion-label>Feedback:</ion-label>
<textarea placeholder="Placeholder Text"></textarea>
</ion-input>
<ion-input>
<ion-label>Score:</ion-label>
<input value="10" type="number">
<button outline item-right>Update</button>
</ion-input>
<ion-input>
<ion-label>More Info:</ion-label>
<input placeholder="Placeholder Text" type="text">
<icon flag item-right></icon>
</ion-input>
<ion-input>
<ion-label>First Name:</ion-label>
<input value="Lightning" type="text">
</ion-input>
<ion-input>
<ion-label>Score:</ion-label>
<input value="10" type="number">
<button outline item-right>Update</button>
</ion-input>
<ion-input>
<ion-label>Last Name:</ion-label>
<input value="McQueen" type="text">
</ion-input>
<ion-input>
<ion-label>First Name:</ion-label>
<input value="Lightning" type="text">
</ion-input>
<ion-input>
<ion-label>Message:</ion-label>
<textarea>KA-CHOW!</textarea>
</ion-input>
<ion-input>
<ion-label>Last Name:</ion-label>
<input value="McQueen" type="text">
</ion-input>
</ion-list>
<ion-input>
<ion-label>Message:</ion-label>
<textarea>KA-CHOW!</textarea>
</ion-input>
</ion-list>
</form>
</ion-content>

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

@ -87,7 +87,7 @@ export class TextInput {
self.deregListeners();
if (self.hasFocus) {
//self.input.hideFocus();
}
};
}
@ -315,6 +315,9 @@ export class TextInput {
*/
focusChange(hasFocus) {
this.renderer.setElementClass(this.elementRef, 'has-focus', hasFocus);
if (!hasFocus) {
this.deregListeners();
}
}
/**
@ -419,34 +422,46 @@ export class TextInputElement {
}
relocate(shouldRelocate, inputRelativeY) {
this.clone(shouldRelocate, inputRelativeY);
if (this._relocated !== shouldRelocate) {
if (shouldRelocate) {
this.wrapper.setFocus();
let focusedInputEle = this.getNativeElement();
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();
if (shouldRelocate) {
let clonedInputEle = focusedInputEle.cloneNode(true);
clonedInputEle.classList.add('cloned-input');
clonedInputEle.setAttribute('aria-hidden', true);
clonedInputEle.tabIndex = -1;
focusedInputEle.classList.add('hide-focused-input');
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);
}
let hiddenInputEle = focusedInputEle.parentNode.querySelector('.cloned-hidden');
if (!hiddenInputEle) {
hiddenInputEle = focusedInputEle.cloneNode(true);
hiddenInputEle.classList.add('cloned-hidden');
hiddenInputEle.setAttribute('aria-hidden', true);
hiddenInputEle.tabIndex = -1;
focusedInputEle.parentNode.appendChild(hiddenInputEle);
}
hiddenInputEle.focus();
}
get hasFocus() {