From d9462023fd4847b89df4d69aac4805c070c5a382 Mon Sep 17 00:00:00 2001 From: Jeremy Quick Date: Sat, 17 Oct 2020 18:36:00 -0500 Subject: [PATCH] Try in toolbar --- demo/package-lock.json | 5 ++ demo/package.json | 1 + demo/src/app/pages/home/home.module.ts | 14 +++- demo/src/app/pages/home/home.page.html | 19 +++-- demo/src/app/pages/home/home.page.ts | 82 +++++++++++++------- demo/src/app/services/segment.service.ts | 53 +++++++++++++ src/auto-complete/auto-complete.component.ts | 4 +- 7 files changed, 138 insertions(+), 40 deletions(-) create mode 100644 demo/src/app/services/segment.service.ts diff --git a/demo/package-lock.json b/demo/package-lock.json index 6b129eb8..91be7319 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -12029,6 +12029,11 @@ "safe-buffer": "^5.0.1" } }, + "shadow-dom-inject-styles": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/shadow-dom-inject-styles/-/shadow-dom-inject-styles-1.0.3.tgz", + "integrity": "sha512-bz+PlPni6l9FtiCRemEKeaj+ekKDs9T+AG5t08M7Q1KtSFyv0ciRzkVisRJCGQy6zsf4sKVG3/29NRF/urmEPQ==" + }, "shallow-clone": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz", diff --git a/demo/package.json b/demo/package.json index 9626e871..a277171d 100644 --- a/demo/package.json +++ b/demo/package.json @@ -42,6 +42,7 @@ "path": "^0.12.7", "rxjs": "^6.6.3", "rxjs-compat": "^6.6.3", + "shadow-dom-inject-styles": "^1.0.3", "stream": "0.0.2", "timers": "^0.1.1", "zone.js": "^0.10.3" diff --git a/demo/src/app/pages/home/home.module.ts b/demo/src/app/pages/home/home.module.ts index 2d608389..ec5f7ea9 100644 --- a/demo/src/app/pages/home/home.module.ts +++ b/demo/src/app/pages/home/home.module.ts @@ -7,11 +7,15 @@ import {IonicModule} from '@ionic/angular'; import {HomePage} from './home.page'; +import {SegmentService} from '../../services/segment.service'; + import {CountryPickerModule} from '../../components/country-picker/country-picker.module'; import {TeamPickerModule} from '../../components/team-picker/team-picker.module'; import {IngredientPickerModule} from '../../components/ingredient-picker/ingredient-picker.module'; import {SimpleServiceModule} from '../../components/simple-service/simple-service.module'; +import {AutoCompleteModule} from 'ionic4-auto-complete'; + @NgModule({ declarations: [ HomePage @@ -24,12 +28,16 @@ import {SimpleServiceModule} from '../../components/simple-service/simple-servic TeamPickerModule, RouterModule.forChild([ { - path: '', - component: HomePage + path: '', + component: HomePage } ]), IngredientPickerModule, - SimpleServiceModule + SimpleServiceModule, + AutoCompleteModule + ], + providers: [ + SegmentService ] }) export class HomePageModule {} diff --git a/demo/src/app/pages/home/home.page.html b/demo/src/app/pages/home/home.page.html index 80ff83cb..bef03b75 100644 --- a/demo/src/app/pages/home/home.page.html +++ b/demo/src/app/pages/home/home.page.html @@ -1,7 +1,14 @@ - + Demo: ionic4-auto-complete + + @@ -11,7 +18,7 @@ + [value]="segment"> {{ segment.label }} @@ -20,7 +27,7 @@ - @@ -34,7 +41,7 @@ - @@ -48,7 +55,7 @@ - @@ -62,7 +69,7 @@ - diff --git a/demo/src/app/pages/home/home.page.ts b/demo/src/app/pages/home/home.page.ts index 346047a9..ac5de764 100644 --- a/demo/src/app/pages/home/home.page.ts +++ b/demo/src/app/pages/home/home.page.ts @@ -1,7 +1,10 @@ -import {Component, OnInit} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; +import {injectStyles} from 'shadow-dom-inject-styles'; + import {SegmentModel} from '../../models/segment.model'; +import {SegmentService} from '../../services/segment.service'; @Component({ selector: 'home-page', @@ -10,43 +13,66 @@ import {SegmentModel} from '../../models/segment.model'; 'home.page.scss' ], }) -export class HomePage implements OnInit { - public segments:SegmentModel[] = [ - { - key: 'simple-service', - label: 'Basic' - }, - { - key: 'ingredients', - label: 'Ingredients' - }, - { - key: 'team-picker', - label: 'Pick Teams' - }, - { - key: 'country-picker', - label: 'Pick Countries' - } - ]; +export class HomePage implements OnInit, AfterViewInit { + public selectedSegment:SegmentModel; + public segments:SegmentModel[]; - public selectedSegment:string = this.segments[0].key; + @ViewChild( + 'toolbar', + { + read: ElementRef + } + ) + private toolbar:ElementRef; constructor( + public segmentProvider:SegmentService, private route:ActivatedRoute, private router:Router ) { - + this.loadSegments(); } ngOnInit():void { this.route.fragment.subscribe( (fragment) => { - this.setSegment(fragment); + const segments = this.segmentProvider.getResults(fragment); + if (segments.length !== 0) { + this.setSegment(segments[0]); + } } ); } + ngAfterViewInit() { + if (this.toolbar && this.toolbar.nativeElement) { + const styles = ` + ion-toolbar { + contain: none !important; + overflow: visible !important; + } + + .toolbar-container { + contain: none !important; + overflow: visible !important; + } + + .toolbar-container .toolbar-content { + contain: none !important; + overflow: visible !important; + } + `; + + injectStyles(this.toolbar.nativeElement, '.toolbar-background', styles); + } + } + + loadSegments():void { + this.segments = this.segmentProvider.getAll(); + + this.selectedSegment = this.segments[0]; + } + onClickSegment(event:CustomEvent):void { if (event.detail && typeof event.detail.value === 'string') { const segment = event.detail.value; @@ -55,13 +81,11 @@ export class HomePage implements OnInit { } } - setSegment(segment:string):void { - if (typeof segment === 'string') { - segment = segment.toLowerCase(); - + setSegment(segment:SegmentModel):void { + if (typeof segment !== 'undefined') { const arrayHas = this.segments.some( (candidate) => { - return candidate.key === segment; + return candidate.key === segment.key; } ); @@ -71,7 +95,7 @@ export class HomePage implements OnInit { this.router.navigate( [], { - fragment: segment + fragment: segment.key } ).then(); } diff --git a/demo/src/app/services/segment.service.ts b/demo/src/app/services/segment.service.ts new file mode 100644 index 00000000..e1c81b61 --- /dev/null +++ b/demo/src/app/services/segment.service.ts @@ -0,0 +1,53 @@ +import {Injectable} from '@angular/core'; + +import {AutoCompleteService} from 'ionic4-auto-complete'; + +import {SegmentModel} from '../models/segment.model'; + +@Injectable() +export class SegmentService implements AutoCompleteService { + labelAttribute = 'label'; + + public segments:SegmentModel[] = [ + { + key: 'simple-service', + label: 'Basic' + }, + { + key: 'ingredients', + label: 'Ingredients' + }, + { + key: 'team-picker', + label: 'Pick Teams' + }, + { + key: 'country-picker', + label: 'Pick Countries' + } + ]; + + constructor() { + + } + + getAll():SegmentModel[] { + return this.segments; + } + + getResults(keyword?:string):SegmentModel[] { + if (typeof keyword !== 'undefined') { + keyword = ''; + } + + keyword = keyword.toLowerCase(); + + return this.segments.filter( + (object) => { + const value = object[this.labelAttribute].toLowerCase(); + + return value.includes(keyword); + } + ); + } +} diff --git a/src/auto-complete/auto-complete.component.ts b/src/auto-complete/auto-complete.component.ts index 7abea3c2..b473289a 100644 --- a/src/auto-complete/auto-complete.component.ts +++ b/src/auto-complete/auto-complete.component.ts @@ -97,8 +97,8 @@ export class AutoCompleteComponent implements AfterViewChecked, ControlValueAcce @ViewChild( 'searchbarElem', { - read: ElementRef -} + read: ElementRef + } ) private searchbarElem:ElementRef;