refactor(searchbar): improve searchbar animation on ios, remove unused code

references #6023

src/components/searchbar/searchbar.ios.scss

@@ -15,12 +15,11 @@ $searchbar-ios-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/sv
 $searchbar-ios-input-search-icon-size:    13px !default;
 
 $searchbar-ios-input-height:              3rem !default;
-$searchbar-ios-input-line-height:         $searchbar-ios-input-height !default;
 $searchbar-ios-input-placeholder-color:   rgba(0, 0, 0, .5) !default;
 $searchbar-ios-input-text-color:          #000 !default;
 $searchbar-ios-input-background-color:    #fff !default;
-$searchbar-ios-input-transition:          all 400ms cubic-bezier(.25, .45, .05, 1) !default;
+$searchbar-ios-input-transition:          all 300ms ease !default;
-$searchbar-ios-cancel-transition:         all 400ms cubic-bezier(.25, .45, .05, 1) !default;
+$searchbar-ios-cancel-transition:         all 300ms ease !default;
 
 $searchbar-ios-input-clear-icon-color:    rgba(0, 0, 0, .5) !default;
 $searchbar-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-color' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
@@ -86,7 +85,6 @@ ion-searchbar {
   border-radius: 5px;
   font-size: 1.4rem;
   font-weight: 400;
-  line-height: $searchbar-ios-input-line-height;
 
   color: $searchbar-ios-input-text-color;
   background-color: $searchbar-ios-input-background-color;
@@ -118,17 +116,18 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-ios-cancel {
-  flex: 0 0 0%;
+  flex-shrink: 0;
 
-  margin-right: 0;
+  margin-right: -100%;
   margin-left: 0;
   padding: 0;
+  padding-left: 8px;
 
   height: 30px;
-
+  transform: translate3d(0, 0, 0);
-  visibility: hidden;
-  transform: translateX(calc(100% + #{$searchbar-ios-padding-left-right}));
   transition: $searchbar-ios-cancel-transition;
+  cursor: pointer;
+  pointer-events: none;
 }
 
 
@@ -145,20 +144,17 @@ ion-searchbar {
   }
 }
 
-// Searchbar Focused
+
+// Searchbar Has Focus
 // -----------------------------------------
 
 .searchbar-has-focus {
   .searchbar-ios-cancel {
-    flex: 0 0 auto;
+    pointer-events: auto;
-
-    padding-left: 8px;
-
-    visibility: visible;
-    transform: translateX(0);
   }
 }
 
+
 // Searchbar in Toolbar
 // -----------------------------------------
 

src/components/searchbar/searchbar.ts

@@ -5,17 +5,6 @@ import {Config} from '../../config/config';
 import {isPresent} from '../../util/util';
 
 
-/**
-* @private
-*/
-@Directive({
-  selector: '.searchbar-input',
-})
-export class SearchbarInput {
-  constructor(public elementRef: ElementRef) {}
-}
-
-
 /**
  * @name Searchbar
  * @module ionic
@@ -39,7 +28,9 @@ export class SearchbarInput {
   selector: 'ion-searchbar',
   host: {
     '[class.searchbar-has-value]': '_value',
-    '[class.searchbar-hide-cancel]': 'hideCancelButton'
+    '[class.searchbar-active]': '_isActive',
+    '[class.searchbar-hide-cancel]': 'hideCancelButton',
+    '[class.searchbar-left-aligned]': 'shouldAlignLeft()'
   },
   template:
     '<div class="searchbar-input-container">' +
@@ -47,21 +38,18 @@ export class SearchbarInput {
         '<ion-icon name="arrow-back"></ion-icon>' +
       '</button>' +
       '<div #searchbarIcon class="searchbar-search-icon"></div>' +
-      '<input [(ngModel)]="_value" [attr.placeholder]="placeholder" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" class="searchbar-input">' +
+      '<input #searchbarInput [(ngModel)]="_value" [attr.placeholder]="placeholder" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" class="searchbar-input">' +
       '<button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' +
     '</div>' +
-    '<button clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
+    '<button #cancelButton clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
-  directives: [SearchbarInput],
   encapsulation: ViewEncapsulation.None
 })
 export class Searchbar {
   private _value: string|number = '';
   private _tmr: any;
   private _shouldBlur: boolean = true;
-
+  private _isActive: boolean = false;
-  private inputEle: any;
+  private _searchbarInput: ElementRef;
-  private iconEle: any;
-  private mode: string;
 
   /**
    * @input {string} Set the the cancel button text. Default: `"Cancel"`.
@@ -131,12 +119,7 @@ export class Searchbar {
   /**
    * @private
    */
-  @HostBinding('class.searchbar-has-focus') isFocused: boolean;
+  @HostBinding('class.searchbar-has-focus') _sbHasFocus: boolean;
-
-  /**
-   * @private
-   */
-  @HostBinding('class.searchbar-left-aligned') shouldLeftAlign: boolean;
 
   constructor(
     private _elementRef: ElementRef,
@@ -152,28 +135,32 @@ export class Searchbar {
   /**
    * @private
    */
-  @ViewChild(SearchbarInput)
+  @ViewChild('searchbarInput')
-  private set _searchbarInput(searchbarInput: SearchbarInput) {
+  private set searchbarInput(searchbarInput: ElementRef) {
-    this.inputEle = searchbarInput.elementRef.nativeElement;
+    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');
-    this.inputEle.setAttribute('autocomplete', autoComplete);
+    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');
-    this.inputEle.setAttribute('autocorrect', autoCorrect);
+    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);
-    this.inputEle.setAttribute('spellcheck', spellCheck);
+    inputEle.setAttribute('spellcheck', spellCheck);
 
     // by default set type="search" unless specified by the input
-    this.inputEle.setAttribute('type', this.type);
+    inputEle.setAttribute('type', this.type);
   }
 
   @ViewChild('searchbarIcon') _searchbarIcon: ElementRef;
 
+  @ViewChild('cancelButton', {read: ElementRef}) _cancelButton: ElementRef;
+
   /**
    * @input {string} Set the input value.
    */
@@ -191,38 +178,44 @@ export class Searchbar {
    * On Initialization check for attributes
    */
   ngOnInit() {
-    this.mode = this._config.get('mode');
-
     let hideCancelButton = this.hideCancelButton;
     if (typeof hideCancelButton === 'string') {
       this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true');
     }
-
-    this.shouldLeftAlign = this._value && this._value.toString().trim() !== '';
   }
 
   /**
    * @private
-   * After View Initialization check the value
+   * After View Initialization position the elements
    */
   ngAfterViewInit() {
-    this.iconEle = this._searchbarIcon.nativeElement;
+    this.positionElements();
-    this.setElementLeft();
   }
 
   /**
    * @private
-   * Determines whether or not to add style to the element
+   * After Content is checked position the elements
-   * to center it properly (ios only)
    */
-  setElementLeft() {
+  ngAfterContentChecked() {
-    if (this.mode !== 'ios') return;
+    this.positionElements();
+  }
 
-    if (this.shouldLeftAlign) {
+  /**
-      this.inputEle.removeAttribute('style');
+   * @private
-      this.iconEle.removeAttribute('style');
+   * Positions the input search icon, placeholder, and the cancel button
-    } else {
+   * based on the input value and if it is focused. (ios only)
-      this.addElementLeft();
+   */
+  positionElements() {
+    if (this._config.get('mode') !== 'ios') return;
+
+    // Position the input placeholder & search icon
+    if (this._searchbarInput && this._searchbarIcon) {
+      this.positionInputPlaceholder(this._searchbarInput.nativeElement, this._searchbarIcon.nativeElement);
+    }
+
+    // Position the cancel button
+    if (this._cancelButton && this._cancelButton.nativeElement) {
+      this.positionCancelButton(this._cancelButton.nativeElement);
     }
   }
 
@@ -231,23 +224,50 @@ export class Searchbar {
    * Calculates the amount of padding/margin left for the elements
    * in order to center them based on the placeholder width
    */
-  addElementLeft() {
+  positionInputPlaceholder(inputEle: HTMLElement, iconEle: HTMLElement) {
-    // Create a dummy span to get the placeholder width
+    if (this.shouldAlignLeft()) {
-    let tempSpan = document.createElement('span');
+      inputEle.removeAttribute('style');
-    tempSpan.innerHTML = this.placeholder;
+      iconEle.removeAttribute('style');
-    document.body.appendChild(tempSpan);
+    } else {
+      // Create a dummy span to get the placeholder width
+      let tempSpan = document.createElement('span');
+      tempSpan.innerHTML = this.placeholder;
+      document.body.appendChild(tempSpan);
 
-    // Get the width of the span then remove it
+      // Get the width of the span then remove it
-    let textWidth = tempSpan.offsetWidth;
+      let textWidth = tempSpan.offsetWidth;
-    tempSpan.remove();
+      tempSpan.remove();
 
-    // Set the input padding left
+      // Set the input padding left
-    let inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
+      let inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
-    this.inputEle.style.paddingLeft = inputLeft;
+      inputEle.style.paddingLeft = inputLeft;
 
-    // Set the icon margin left
+      // Set the icon margin left
-    let iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
+      let iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
-    this.iconEle.style.marginLeft = iconLeft;
+      iconEle.style.marginLeft = iconLeft;
+    }
+  }
+
+  /**
+   * @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';
+      } else {
+        cancelButtonEle.style.marginRight = -cancelButtonEle.offsetWidth + '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 );
   }
 
   /**
@@ -267,14 +287,14 @@ export class Searchbar {
 
   /**
    * @private
-   * Sets the Searchbar to focused and aligned left on input focus.
+   * Sets the Searchbar to focused and active on input focus.
    */
   inputFocused(ev: UIEvent) {
     this.ionFocus.emit(ev);
 
-    this.isFocused = true;
+    this._sbHasFocus = true;
-    this.shouldLeftAlign = true;
+    this._isActive = true;
-    this.setElementLeft();
+    this.positionElements();
   }
 
   /**
@@ -286,15 +306,14 @@ export class Searchbar {
     // _shouldBlur determines if it should blur
     // if we are clearing the input we still want to stay focused in the input
     if (this._shouldBlur === false) {
-      this.inputEle.focus();
+      this._searchbarInput.nativeElement.focus();
       this._shouldBlur = true;
       return;
     }
     this.ionBlur.emit(ev);
 
-    this.isFocused = false;
+    this._sbHasFocus = false;
-    this.shouldLeftAlign = this._value && this._value.toString().trim() !== '';
+    this.positionElements();
-    this.setElementLeft();
   }
 
   /**
@@ -324,6 +343,7 @@ export class Searchbar {
 
     this.clearInput(ev);
     this._shouldBlur = true;
+    this._isActive = false;
   }
 
   /**

src/components/searchbar/test/floating/index.ts

@@ -41,6 +41,7 @@ class E2EApp {
 
   ngAfterViewInit() {
     this.customPlaceholder = 33;
+    this.defaultCancel = "after view";
     this.changeDetectorRef.detectChanges();
   }
 

src/components/searchbar/test/floating/main.html

@@ -23,6 +23,9 @@
   <h5 padding-left> Search - Custom Cancel Button Danger </h5>
   <ion-searchbar (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
 
+  <h5 padding-left> Search - Value passed </h5>
+  <ion-searchbar value="mysearch" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
+
   <p padding>
     <button block (click)="changeValue()">Change Value</button>
   </p>

src/config/directives.ts

@@ -36,7 +36,7 @@ import {Segment, SegmentButton} from '../components/segment/segment';
 import {RadioButton} from '../components/radio/radio-button';
 import {RadioGroup} from '../components/radio/radio-group';
 import {Range} from '../components/range/range';
-import {Searchbar, SearchbarInput} from '../components/searchbar/searchbar';
+import {Searchbar} from '../components/searchbar/searchbar';
 import {Nav} from '../components/nav/nav';
 import {NavPush, NavPop} from '../components/nav/nav-push';
 import {NavRouter} from '../components/nav/nav-router';
@@ -89,7 +89,6 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
  * - Icon
  * - Spinner
  * - Searchbar
- * - SearchbarInput
  * - Segment
  * - SegmentButton
  * - Checkbox
@@ -164,7 +163,6 @@ export const IONIC_DIRECTIVES: any[] = [
 
   // Forms
   Searchbar,
-  SearchbarInput,
   Segment,
   SegmentButton,
   Checkbox,