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

refactor(searchbar): hack mchacking searchbar to center the placeholder better

Browse Source 
Problem is you can see it adjust after the view loads. References #247
This commit is contained in:
Brandy Carney
2015-12-29 18:24:13 -05:00
parent bcaaa6f45b
commit 10816c2e21
2 changed files with 46 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components/searchbar/searchbar.ios.scss
View File

@ -70,7 +70,6 @@ ion-searchbar {
border-radius: 5px;
color: $searchbar-ios-input-text-color;
background-color: $searchbar-ios-input-background-color;
background-position: 8px center;
@include placeholder($searchbar-ios-input-placeholder-color);

47
ionic/components/searchbar/searchbar.ts
View File

@ -55,7 +55,7 @@ export class SearchbarInput {
* @property {Any} [cancel] - Expression to evaluate when the cancel button is clicked
* @property {Any} [clear] - Expression to evaluate when the clear input button is clicked
*
* @see {@link /docs/v2/components#search Search Component Docs}
* @see {@link /docs/v2/components#searchbar Searchbar Component Docs}
*/
@Component({
selector: 'ion-searchbar',
@ -148,6 +148,11 @@ export class Searchbar extends Ion {
this.onChange(this.value);
this.shouldLeftAlign = this.value && this.value.trim() != '';
// Using querySelector instead of searchbarInput because at this point it doesn't exist
this.inputElement = this.elementRef.nativeElement.querySelector('.searchbar-input');
this.searchIconElement = this.elementRef.nativeElement.querySelector('.searchbar-search-icon');
this.setElementLeft();
}
/**
@ -164,6 +169,44 @@ export class Searchbar extends Ion {
}
}
/**
* @private
* Determines whether or not to add style to the element
* to center it properly
*/
setElementLeft() {
if (this.shouldLeftAlign) {
this.inputElement.removeAttribute("style");
this.searchIconElement.removeAttribute("style");
} else {
this.addElementLeft();
}
}
/**
* @private
* Calculates the amount of padding/margin left for the elements
* in order to center them based on the placeholder width
*/
addElementLeft() {
// 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
let textWidth = tempSpan.offsetWidth;
tempSpan.remove();
// Set the input padding left
let inputLeft = "calc(50% - " + (textWidth / 2) + "px)";
this.inputElement.style.paddingLeft = inputLeft;
// Set the icon margin left
let iconLeft = "calc(50% - " + ((textWidth / 2) + this.searchIconElement.offsetWidth + 15) + "px)";
this.searchIconElement.style.marginLeft = iconLeft;
}
/**
* @private
* Update the Searchbar input value when the input changes
@ -183,6 +226,7 @@ export class Searchbar extends Ion {
this.isFocused = true;
this.shouldLeftAlign = true;
this.setElementLeft();
}
/**
@ -202,6 +246,7 @@ export class Searchbar extends Ion {
this.isFocused = false;
this.shouldLeftAlign = this.value && this.value.trim() != '';
this.setElementLeft();
}
/**