From e155663565b3a09b0602a3164b6b7cd010b920e1 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 16 Jul 2015 16:44:02 -0500 Subject: [PATCH] input updates --- ionic/components/form/input.scss | 6 ---- ionic/components/form/input.ts | 33 +++++++++++--------- ionic/components/form/test/input/main.html | 8 ++--- ionic/components/toolbar/extensions/ios.scss | 2 +- ionic/components/toolbar/toolbar.scss | 4 +++ 5 files changed, 28 insertions(+), 25 deletions(-) diff --git a/ionic/components/form/input.scss b/ionic/components/form/input.scss index e93e4c50f4..be478065bf 100644 --- a/ionic/components/form/input.scss +++ b/ionic/components/form/input.scss @@ -4,12 +4,6 @@ ion-input { display: block; } -input.disable-focus, -textarea.disable-focus, -select.disable-focus { - //pointer-events: none; -} - focus-holder input { position: fixed; top: 1px; diff --git a/ionic/components/form/input.ts b/ionic/components/form/input.ts index 8ce028e227..3ce0ce3962 100644 --- a/ionic/components/form/input.ts +++ b/ionic/components/form/input.ts @@ -59,8 +59,7 @@ export class Input extends Ion { '(mousedown)': 'pointerStart($event)', '(mouseup)': 'pointerEnd($event)', '[attr.id]': 'id', - '[attr.aria-labelledby]': 'labelledBy', - '[class.disable-focus]': 'disableFocus' + '[attr.aria-labelledby]': 'labelledBy' } }) export class TextInput extends IonInput { @@ -88,26 +87,28 @@ export class TextInput extends IonInput { pointerStart(ev) { if (this.scrollAssist) { + // remember where the touchstart/mousedown started this.startCoord = dom.pointerCoord(ev); - this.disableFocus = true; + this.pressStart = Date.now(); } } pointerEnd(ev) { if (this.scrollAssist) { + + // get where the touchend/mouseup ended let endCoord = dom.pointerCoord(ev); + // focus this input if the pointer hasn't moved XX pixels + // and the input doesn't already have focus if (this.startCoord && !dom.hasPointerMoved(20, this.startCoord, endCoord) && !this.hasFocus()) { ev.preventDefault(); ev.stopPropagation(); this.focus(); - - } else { - this.disableFocus = false; } - this.startCoord = null; + this.startCoord = this.pressStart = null; } } @@ -115,8 +116,6 @@ export class TextInput extends IonInput { let scrollView = this.scrollView; if (scrollView && this.scrollAssist) { - this.disableFocus = true; - // this input is inside of a scroll view // scroll the input to the top let inputY = this.elementRef.nativeElement.offsetTop - 8; @@ -139,27 +138,28 @@ export class TextInput extends IonInput { // all good, allow clicks again ClickBlock(false); - - this.disableFocus = false; }); } else { // not inside of a scroll view, just focus it this.setFocus(); - this.disableFocus = false; } } receivedFocus(receivedFocus) { + console.log('receivedFocus: ', receivedFocus) let self = this; let scrollView = self.scrollView; self.isActiveInput(receivedFocus); function touchMove(ev) { - self.setFocusHolder(self.type); - self.deregTouchMove(); + console.log('touchMove') + if (!self.isPressHold()) { + self.setFocusHolder(self.type); + self.deregTouchMove(); + } } if (scrollView && this.scrollAssist) { @@ -176,6 +176,11 @@ export class TextInput extends IonInput { } + isPressHold() { + console.log('pressStart:', this.pressStart, ' pressStart + 500 < now:', this.pressStart + 500 < Date.now()) + return this.pressStart && (this.pressStart + 500 < Date.now()); + } + } diff --git a/ionic/components/form/test/input/main.html b/ionic/components/form/test/input/main.html index 2c17613ef6..e446c2b010 100644 --- a/ionic/components/form/test/input/main.html +++ b/ionic/components/form/test/input/main.html @@ -63,15 +63,16 @@ -Footer +Footer diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss index d61ca1f106..412daf1d7e 100644 --- a/ionic/components/toolbar/extensions/ios.scss +++ b/ionic/components/toolbar/extensions/ios.scss @@ -30,7 +30,7 @@ $toolbar-ios-padding: 0px 15px; @include hairline(bottom, $toolbar-ios-border-color); // toolbar on bottom, border on top - &.toolbar-bottom:after { + &[position="bottom"]:after { top: 0; bottom: auto; } diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index 6ba261e304..ce4188f710 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -25,6 +25,10 @@ ion-toolbar { order: $flex-order-toolbar-top; } +ion-toolbar[position="bottom"] { + order: $flex-order-toolbar-bottom; +} + .toolbar-inner { display: flex; width: 100%;