MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Search Input: Add icon position and focus state

This commit is contained in:
Konstantinos Triantafyllou 2022-10-12 12:23:24 +03:00
parent d6c54949df
commit 09706515ba
2 changed files with 42 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sharedComponents/search-input/search-input.component.ts
View File

@ -18,7 +18,8 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
selector: '[search-input]', selector: '[search-input]',
template: ` template: `
<div *ngIf="initialized" class="uk-flex uk-flex-right uk-width-1-1"> <div *ngIf="initialized" class="uk-flex uk-flex-right uk-width-1-1">
<div #searchInput click-outside-or-esc (clickOutside)="click($event)" class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass"> <div #searchInput click-outside-or-esc (clickOutside)="click($event)" class="search-input" [class.focused]="input.focused"
[class.collapsed]="hidden" [ngClass]="searchInputClass">
<div class="uk-flex uk-flex-middle"> <div class="uk-flex uk-flex-middle">
<div class="uk-width-expand"> <div class="uk-width-expand">
<div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search" [disabledIcon]="null" <div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search" [disabledIcon]="null"
@ -30,7 +31,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
<icon name="close" [flex]="true"></icon> <icon name="close" [flex]="true"></icon>
</button> </button>
</div> </div>
<div class="uk-width-auto"> <div class="uk-width-auto" [class.uk-flex-first]="iconPosition === 'left'">
<div class="search-icon" [class.disabled]="disabled" (click)="search($event)"> <div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
<icon name="search" [flex]="true" ratio="1.3"></icon> <icon name="search" [flex]="true" ratio="1.3"></icon>
</div> </div>
@ -43,6 +44,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
export class SearchInputComponent implements OnInit { export class SearchInputComponent implements OnInit {
@Input() disabled: boolean = false; @Input() disabled: boolean = false;
@Input() searchInputClass: string = 'inner'; @Input() searchInputClass: string = 'inner';
@Input() iconPosition: 'left' | 'right' = 'right';
@Input() searchControl: AbstractControl; @Input() searchControl: AbstractControl;
@Input() value: string; @Input() value: string;
@Output() valueChange = new EventEmitter<string>(); @Output() valueChange = new EventEmitter<string>();

6
utils/smooth-scroll.ts
View File

@ -10,15 +10,18 @@ export class SmoothScroll {
private readonly sub; private readonly sub;
private lastComponent; private lastComponent;
private currentComponent: string; private currentComponent: string;
private extraOffset: number = 0;
constructor(private router: Router) { constructor(private router: Router) {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
this.sub = router.events.subscribe(event => { this.sub = router.events.subscribe(event => {
if (event instanceof ActivationStart) { if (event instanceof ActivationStart) {
this.extraOffset = event.snapshot.data.extraOffset?event.snapshot.data.extraOffset:0;
if(event.snapshot.component instanceof Type) { if(event.snapshot.component instanceof Type) {
this.currentComponent = event.snapshot.component.name; this.currentComponent = event.snapshot.component.name;
} }
} else if (event instanceof NavigationEnd) { } else if (event instanceof NavigationEnd) {
if(!this.router.getCurrentNavigation().extras?.state?.disableScroll) {
if (this.interval) { if (this.interval) {
clearInterval(this.interval); clearInterval(this.interval);
} }
@ -35,7 +38,7 @@ export class SmoothScroll {
if (this.interval) { if (this.interval) {
clearInterval(this.interval); clearInterval(this.interval);
} }
const yOffset = -100; const yOffset = -100 - this.extraOffset;
let position = 0; let position = 0;
let interval = setInterval(() => { let interval = setInterval(() => {
if (position !== element.getBoundingClientRect().top) { if (position !== element.getBoundingClientRect().top) {
@ -56,6 +59,7 @@ export class SmoothScroll {
window.scrollTo({top: 0, behavior: 'smooth'}); window.scrollTo({top: 0, behavior: 'smooth'});
}, 0); }, 0);
} }
}
this.lastComponent = this.currentComponent; this.lastComponent = this.currentComponent;
} }
}); });