EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2301 from crazyserver/MOBILE-3281 

MOBILE-3281 search: Use iOS touch events
main
Juan Leyva 2020-03-06 15:57:54 +01:00 committed by GitHub
parent b7ffc0042f d1a82966e2
commit 67f74191bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/core/search/components/search-box/core-search-box.html
View File

@ -1,7 +1,7 @@
<ion-card>
<form #f="ngForm" (ngSubmit)="submitForm($event)" role="search" #searchForm>
<ion-item>
<ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (focus)="showHistory()" (blur)="hideHistory()"></ion-input>
<ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox"></ion-input>
<button item-end ion-button clear icon-only type="submit" class="button-small" [attr.aria-label]="searchLabel" [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
<ion-icon name="search"></ion-icon>
</button>
@ -9,13 +9,11 @@
<ion-icon name="close"></ion-icon>
</button>
</ion-item>
<div class="core-search-history" *ngIf="historyShown && history.length">
<ion-list class="with-borders">
<ion-item text-wrap *ngFor="let item of history" (mousedown)="itemMouseDown($event, item.searchedtext)" (mouseup)="itemMouseUp($event, item.searchedtext)" class="core-clickable">
<ion-list class="core-search-history with-borders">
<a ion-item text-wrap *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" class="core-clickable" tabindex="1">
<core-icon name="fa-history" item-start></core-icon>
{{item.searchedtext}}
</ion-item>
</a>
</ion-list>
</div>
</form>
</ion-card>

12
src/core/search/components/search-box/search-box.scss
View File

@ -22,12 +22,8 @@ ion-app.app-root core-search-box {
padding-left: 0 !important;
}
.item-wp .text-input {
border: 0;
margin: 0;
}
.core-search-history {
display: none;
max-height: calc(-120px + 80vh);
overflow-y: auto;
@ -39,4 +35,10 @@ ion-app.app-root core-search-box {
border-bottom: 0;
}
}
form:focus-within {
.core-search-history {
display: block;
}
}
}

76
src/core/search/components/search-box/search-box.ts
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { Component, Input, Output, EventEmitter, OnInit, ViewChild, ElementRef } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { CoreEventsProvider } from '@providers/events';
import { CoreSitesProvider } from '@providers/sites';
@ -34,7 +34,7 @@ import { CoreSearchHistoryProvider, CoreSearchHistoryItem } from '../../provider
selector: 'core-search-box',
templateUrl: 'core-search-box.html'
})
export class CoreSearchBoxComponent implements OnInit, OnDestroy {
export class CoreSearchBoxComponent implements OnInit {
@Input() searchLabel?: string; // Label to be used on action button.
@Input() placeholder?: string; // Placeholder text for search text input.
@Input() autocorrect = 'on'; // Enables/disable Autocorrection on search text input.
@ -57,9 +57,6 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
history: CoreSearchHistoryItem[] = [];
historyShown = false;
protected elementClicked = '';
protected backdropMouseUpFunc;
constructor(protected translate: TranslateService,
protected utils: CoreUtilsProvider,
protected searchHistoryProvider: CoreSearchHistoryProvider,
@ -80,8 +77,6 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
if (this.searchArea) {
this.loadHistory();
this.backdropMouseUpFunc = this.backdropMouseUp.bind(this);
}
}
@ -132,73 +127,18 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
this.history = await this.searchHistoryProvider.getSearchHistory(this.searchArea);
}
/**
* Show search history.
*/
showHistory(): void {
if (this.searchArea) {
this.historyShown = true;
this.elementClicked = '';
document.body.addEventListener('mouseup', this.backdropMouseUpFunc);
}
}
/**
* Hide search history.
*
* @param force: If force hidding the history without checking the clicked element.
*/
hideHistory(force: boolean = false): void {
if (this.searchArea && (force || this.elementClicked == '')) {
this.historyShown = false;
this.elementClicked = '';
document.body.removeEventListener('mouseup', this.backdropMouseUpFunc);
}
}
/**
* Saves the item where you moused down.
* It uses mouseup/down because blur will block the click event.
*
* @param e Event.
* @param text Selected text.
*/
itemMouseDown(e: Event, text: string): void {
this.elementClicked = text;
}
/**
* Select an item and use it for search text.
* It uses mouseup/down because blur will block the click event.
*
* @param e Event.
* @param text Selected text.
*/
itemMouseUp(e: Event, text: string): void {
if (this.elementClicked == text) {
this.hideHistory(true);
historyClicked(e: Event, text: string): void {
if (this.searched != text) {
this.searchText = text;
this.submitForm(e);
}
}
this.elementClicked = '';
}
/**
* Manages mouseup out of the history.
*
* @param e Event.
*/
backdropMouseUp(e: Event): void {
// Do not hide if the search box is focused.
if (document.activeElement['type'] && document.activeElement['type'] == 'search') {
return;
}
this.hideHistory();
this.elementClicked = '';
}
/**
* Form submitted.
@ -206,16 +146,6 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
clearForm(): void {
this.searched = '';
this.searchText = '';
this.hideHistory(true);
this.onClear.emit();
}
/**
* On destroy of the component, clear up any listeners.
*/
ngOnDestroy(): void {
if (this.backdropMouseUpFunc) {
document.body.removeEventListener('mouseup', this.backdropMouseUpFunc);
}
}
}