javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8162 from manucorporat/searchbar-no-animation

Browse Source
This commit is contained in:
Adam Bradley
2016-10-10 08:51:54 -05:00
committed by GitHub
parent fcc515f5d7 1a6c511ff7
commit 6544b09e6d
7 changed files with 174 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/searchbar/searchbar.ios.scss
View File

@ -66,8 +66,6 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
background-repeat: no-repeat;
background-size: $searchbar-ios-input-search-icon-size;
transition: $searchbar-ios-input-transition;
}
@ -87,8 +85,6 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
color: $searchbar-ios-input-text-color;
background-color: $searchbar-ios-input-background-color;
transition: $searchbar-ios-input-transition;
}
@ -119,7 +115,6 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
flex-shrink: 0;
margin-right: -100%;
margin-left: 0;
padding: 0;
padding-left: 8px;
@ -127,20 +122,8 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
height: 30px;
cursor: pointer;
opacity: 0;
transform: translate3d(0, 0, 0);
transition: $searchbar-ios-cancel-transition;
pointer-events: none;
}
.searchbar-ios.searchbar-show-cancel .searchbar-ios-cancel {
display: block;
}
// Searchbar Left Aligned (iOS only)
// -----------------------------------------
@ -156,10 +139,8 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
// Searchbar Has Focus
// -----------------------------------------
.searchbar-ios.searchbar-has-focus .searchbar-ios-cancel {
opacity: 1;
pointer-events: auto;
.searchbar-ios.searchbar-show-cancel.searchbar-has-focus .searchbar-ios-cancel {
display: block;
}
@ -225,3 +206,29 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
}
}
// Searchbar animation
// -----------------------------------------
.searchbar-ios.searchbar-animated .searchbar-search-icon,
.searchbar-ios.searchbar-animated .searchbar-input {
transition: $searchbar-ios-input-transition;
}
.searchbar-animated.searchbar-has-focus .searchbar-ios-cancel {
opacity: 1;
pointer-events: auto;
}
.searchbar-animated .searchbar-ios-cancel {
display: block;
margin-right: -100%;
opacity: 0;
transform: translate3d(0, 0, 0);
transition: $searchbar-ios-cancel-transition;
pointer-events: none;
}

1
src/components/searchbar/searchbar.scss
View File

@ -48,3 +48,4 @@ ion-searchbar {
.searchbar-has-value.searchbar-has-focus .searchbar-clear-icon {
display: block;
}

162
src/components/searchbar/searchbar.ts
View File

@ -3,7 +3,7 @@ import { NgControl } from '@angular/forms';
import { Config } from '../../config/config';
import { Ion } from '../ion';
import { isPresent } from '../../util/util';
import { isPresent, isTrueProperty } from '../../util/util';
import { Debouncer } from '../../util/debouncer';
@ -30,27 +30,37 @@ import { Debouncer } from '../../util/debouncer';
selector: 'ion-searchbar',
template:
'<div class="searchbar-input-container">' +
'<button ion-button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear color="dark" class="searchbar-md-cancel">' +
'<button ion-button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear color="dark" class="searchbar-md-cancel" type="button">' +
'<ion-icon name="arrow-back"></ion-icon>' +
'</button>' +
'<div #searchbarIcon class="searchbar-search-icon"></div>' +
'<input #searchbarInput [(ngModel)]="_value" [attr.placeholder]="placeholder" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" class="searchbar-input">' +
'<button ion-button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' +
'<input #searchbarInput class="searchbar-input" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" ' +
'[attr.placeholder]="placeholder" ' +
'[attr.type]="type" ' +
'[attr.autocomplete]="_autocomplete" ' +
'[attr.autocorrect]="_autocorrect" ' +
'[attr.spellcheck]="_spellcheck">' +
'<button ion-button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)" type="button"></button>' +
'</div>' +
'<button ion-button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
'<button ion-button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel" type="button">{{cancelButtonText}}</button>',
host: {
'[class.searchbar-animated]': 'animated',
'[class.searchbar-has-value]': '_value',
'[class.searchbar-active]': '_isActive',
'[class.searchbar-show-cancel]': 'showCancelButton',
'[class.searchbar-left-aligned]': 'shouldAlignLeft()'
'[class.searchbar-left-aligned]': '_shouldAlignLeft'
},
encapsulation: ViewEncapsulation.None
})
export class Searchbar extends Ion {
_value: string|number = '';
_shouldBlur: boolean = true;
_shouldAlignLeft: boolean = true;
_isCancelVisible: boolean = false;
_spellcheck: boolean = false;
_autocomplete: string = 'off';
_autocorrect: string = 'off';
_isActive: boolean = false;
_searchbarInput: ElementRef;
_debouncer: Debouncer = new Debouncer(250);
/**
@ -98,23 +108,37 @@ export class Searchbar extends Ion {
/**
* @input {string} Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
*/
@Input() autocomplete: string;
@Input()
set autocomplete(val: string) {
this._autocomplete = (val === '' || val === 'on') ? 'on' : this._config.get('autocomplete', 'off');
}
/**
* @input {string} Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
*/
@Input() autocorrect: string;
@Input()
set autocorrect(val: string) {
this._autocorrect = (val === '' || val === 'on') ? 'on' : this._config.get('autocorrect', 'off');
}
/**
* @input {string|boolean} Set the input's spellcheck property. Values: `true`, `false`. Default `false`.
*/
@Input() spellcheck: string|boolean;
@Input()
set spellcheck(val: string | boolean) {
this._spellcheck = (val === '' || val === 'true' || val === true) ? true : this._config.getBoolean('spellcheck', false);
}
/**
* @input {string} Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`.
*/
@Input() type: string = 'search';
/**
* @input {string|boolean} Configures if the searchbar is animated or no. By default, animation is disabled.
*/
@Input() animated: string | boolean = false;
/**
* @output {event} When the Searchbar input has changed including cleared.
*/
@ -161,30 +185,7 @@ export class Searchbar extends Ion {
}
}
/**
* @private
*/
@ViewChild('searchbarInput')
set searchbarInput(searchbarInput: ElementRef) {
this._searchbarInput = searchbarInput;
let inputEle = searchbarInput.nativeElement;
// By defalt set autocomplete="off" unless specified by the input
let autoComplete = (this.autocomplete === '' || this.autocomplete === 'on') ? 'on' : this._config.get('autocomplete', 'off');
inputEle.setAttribute('autocomplete', autoComplete);
// by default set autocorrect="off" unless specified by the input
let autoCorrect = (this.autocorrect === '' || this.autocorrect === 'on') ? 'on' : this._config.get('autocorrect', 'off');
inputEle.setAttribute('autocorrect', autoCorrect);
// by default set spellcheck="false" unless specified by the input
let spellCheck = (this.spellcheck === '' || this.spellcheck === 'true' || this.spellcheck === true) ? true : this._config.getBoolean('spellcheck', false);
inputEle.setAttribute('spellcheck', spellCheck);
// by default set type="search" unless specified by the input
inputEle.setAttribute('type', this.type);
}
@ViewChild('searchbarInput') _searchbarInput: ElementRef;
@ViewChild('searchbarIcon') _searchbarIcon: ElementRef;
@ -200,6 +201,12 @@ export class Searchbar extends Ion {
set value(val) {
this._value = val;
if (this._searchbarInput) {
let ele = this._searchbarInput.nativeElement;
if (ele) {
ele.value = val;
}
}
}
/**
@ -217,7 +224,7 @@ export class Searchbar extends Ion {
* @private
* After View Checked position the elements
*/
ngAfterViewChecked() {
ngAfterContentInit() {
this.positionElements();
}
@ -227,26 +234,31 @@ export class Searchbar extends Ion {
* based on the input value and if it is focused. (ios only)
*/
positionElements() {
if (this._config.get('mode') !== 'ios') return;
let isAnimated = isTrueProperty(this.animated);
let prevAlignLeft = this._shouldAlignLeft;
let shouldAlignLeft = (!isAnimated || (this._value && this._value.toString().trim() !== '') || this._sbHasFocus === true);
this._shouldAlignLeft = shouldAlignLeft;
// Position the input placeholder & search icon
if (this._searchbarInput && this._searchbarIcon) {
this.positionInputPlaceholder(this._searchbarInput.nativeElement, this._searchbarIcon.nativeElement);
if (this._config.get('mode') !== 'ios') {
return;
}
// Position the cancel button
if (this._cancelButton && this._cancelButton.nativeElement) {
this.positionCancelButton(this._cancelButton.nativeElement);
if (prevAlignLeft !== shouldAlignLeft) {
this.positionPlaceholder();
}
if (isAnimated) {
this.positionCancelButton();
}
}
/**
* @private
* Calculates the amount of padding/margin left for the elements
* in order to center them based on the placeholder width
*/
positionInputPlaceholder(inputEle: HTMLElement, iconEle: HTMLElement) {
if (this.shouldAlignLeft()) {
positionPlaceholder() {
if (!this._searchbarInput || !this._searchbarIcon) {
return;
}
let inputEle = this._searchbarInput.nativeElement;
let iconEle = this._searchbarIcon.nativeElement;
if (this._shouldAlignLeft) {
inputEle.removeAttribute('style');
iconEle.removeAttribute('style');
} else {
@ -273,32 +285,34 @@ export class Searchbar extends Ion {
* @private
* Show the iOS Cancel button on focus, hide it offscreen otherwise
*/
positionCancelButton(cancelButtonEle: HTMLElement) {
if (cancelButtonEle.offsetWidth > 0) {
if (this._sbHasFocus) {
cancelButtonEle.style.marginRight = '0';
positionCancelButton() {
if (!this._cancelButton || !this._cancelButton.nativeElement) {
return;
}
let showShowCancel = this._sbHasFocus;
if (showShowCancel !== this._isCancelVisible) {
let cancelStyleEle = this._cancelButton.nativeElement;
let cancelStyle = cancelStyleEle.style;
this._isCancelVisible = showShowCancel;
if (showShowCancel) {
cancelStyle.marginRight = '0';
} else {
cancelButtonEle.style.marginRight = -cancelButtonEle.offsetWidth + 'px';
let offset = cancelStyleEle.offsetWidth;
if (offset > 0) {
cancelStyle.marginRight = -offset + 'px';
}
}
}
}
/**
* @private
* Align the input placeholder left on focus or if a value exists
*/
shouldAlignLeft() {
return ( (this._value && this._value.toString().trim() !== '') || this._sbHasFocus === true );
}
/**
* @private
* Update the Searchbar input value when the input changes
*/
inputChanged(ev: any) {
let value = ev.target.value;
this._value = ev.target.value;
this._debouncer.debounce(() => {
this._value = value;
this.onChange(this._value);
this.ionInput.emit(ev);
});
@ -342,12 +356,16 @@ export class Searchbar extends Ion {
clearInput(ev: UIEvent) {
this.ionClear.emit(ev);
if (isPresent(this._value) && this._value !== '') {
this._value = '';
this.onChange(this._value);
this.ionInput.emit(ev);
}
// setTimeout() fixes https://github.com/driftyco/ionic/issues/7527
// wait for 4 frames
setTimeout(() => {
let value = this._value;
if (isPresent(value) && value !== '') {
this.value = ''; // DOM WRITE
this.onChange(this._value);
this.ionInput.emit(ev);
}
}, 16 * 4);
this._shouldBlur = false;
}
@ -370,7 +388,7 @@ export class Searchbar extends Ion {
* Write a new value to the element.
*/
writeValue(val: any) {
this._value = val;
this.value = val;
this.positionElements();
}
@ -399,4 +417,8 @@ export class Searchbar extends Ion {
registerOnTouched(fn: () => {}): void {
this.onTouched = fn;
}
setFocus() {
this._renderer.invokeElementMethod(this._searchbarInput.nativeElement, 'focus');
}
}

5
src/components/searchbar/test/basic/main.html
View File

@ -1,6 +1,9 @@
<ion-content>
<h5 padding-left> Search - Default </h5>
<ion-searchbar [(ngModel)]="defaultSearch" showCancelButton debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<ion-searchbar [(ngModel)]="defaultSearch" type="tel" showCancelButton debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<h5 padding-left> Search - Animated </h5>
<ion-searchbar animated="true" showCancelButton debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>
<p padding-left>
defaultSearch: <b>{{ defaultSearch }}</b>

21
src/components/searchbar/test/nav/app-module.ts
View File

@ -1,5 +1,5 @@
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule, NavController, NavParams } from '../../../..';
import { IonicApp, IonicModule, ModalController, NavController, NavParams, ViewController } from '../../../..';
@Component({
@ -13,13 +13,23 @@ export class MainPage {
}
}
@Component({
templateUrl: 'modal.html'
})
export class ModalPage {
constructor(public viewCtrl: ViewController) {}
close() {
this.viewCtrl.dismiss();
}
}
@Component({
templateUrl: 'search.html'
})
export class SearchPage {
items: string[];
constructor(public navCtrl: NavController) {
constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
this.initializeItems();
}
@ -88,6 +98,11 @@ export class SearchPage {
return false;
});
}
openModal() {
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
}
@Component({
@ -121,6 +136,7 @@ export class E2EApp {
E2EApp,
MainPage,
SearchPage,
ModalPage,
DetailPage,
TabsPage
],
@ -132,6 +148,7 @@ export class E2EApp {
E2EApp,
MainPage,
SearchPage,
ModalPage,
DetailPage,
TabsPage
]

21
src/components/searchbar/test/nav/modal.html Normal file
View File

@ -0,0 +1,21 @@
<ion-header>
<ion-toolbar>
<ion-buttons start>
<button ion-button >
Does nothing
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button (click)="close()">
Close
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
Close the modal with the button and the searchbar SHOULD NOT become focused.
<button ion-button (click)="close()">
Close
</button>
</ion-content>

15
src/components/searchbar/test/nav/search.html
View File

@ -1,21 +1,24 @@
<ion-header>
<ion-navbar no-border-bottom>
<ion-title>Searchbar</ion-title>
<ion-searchbar color="primary" autofocus (ionInput)="getItems($event)" placeholder="Filter Schedules">
</ion-searchbar>
</ion-navbar>
<ion-toolbar no-border-top>
<ion-searchbar color="primary" (ionInput)="getItems($event)" placeholder="Filter Schedules">
</ion-searchbar>
<ion-title>Searchbar</ion-title>
<ion-buttons end>
<button ion-button (click)="openModal()">Open modal</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<form>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</form>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="showDetail(item)" class="e2eSearchbarNavItem">
{{ item }}