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]',
template: `
<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-width-expand">
<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>
</button>
</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)">
<icon name="search" [flex]="true" ratio="1.3"></icon>
</div>
@ -43,6 +44,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
export class SearchInputComponent implements OnInit {
@Input() disabled: boolean = false;
@Input() searchInputClass: string = 'inner';
@Input() iconPosition: 'left' | 'right' = 'right';
@Input() searchControl: AbstractControl;
@Input() value: string;
@Output() valueChange = new EventEmitter<string>();

72
utils/smooth-scroll.ts
View File

@ -10,51 +10,55 @@ export class SmoothScroll {
private readonly sub;
private lastComponent;
private currentComponent: string;
private extraOffset: number = 0;
constructor(private router: Router) {
if (typeof window !== "undefined") {
this.sub = router.events.subscribe(event => {
if (event instanceof ActivationStart) {
this.extraOffset = event.snapshot.data.extraOffset?event.snapshot.data.extraOffset:0;
if(event.snapshot.component instanceof Type) {
this.currentComponent = event.snapshot.component.name;
}
} else if (event instanceof NavigationEnd) {
if (this.interval) {
clearInterval(this.interval);
}
const fragment = router.parseUrl(router.url).fragment;
if (this.lastComponent !== this.currentComponent) {
window.scrollTo({top: 0});
}
if (fragment) {
let i = 0;
this.interval = setInterval(() => {
i++;
const element = document.getElementById(fragment);
if (element) {
if (this.interval) {
if(!this.router.getCurrentNavigation().extras?.state?.disableScroll) {
if (this.interval) {
clearInterval(this.interval);
}
const fragment = router.parseUrl(router.url).fragment;
if (this.lastComponent !== this.currentComponent) {
window.scrollTo({top: 0});
}
if (fragment) {
let i = 0;
this.interval = setInterval(() => {
i++;
const element = document.getElementById(fragment);
if (element) {
if (this.interval) {
clearInterval(this.interval);
}
const yOffset = -100 - this.extraOffset;
let position = 0;
let interval = setInterval(() => {
if (position !== element.getBoundingClientRect().top) {
position = element.getBoundingClientRect().top;
} else {
clearInterval(interval);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({top: y, behavior: 'smooth'});
}
}, 50);
}
if (i > 4 && this.interval) {
clearInterval(this.interval);
}
const yOffset = -100;
let position = 0;
let interval = setInterval(() => {
if (position !== element.getBoundingClientRect().top) {
position = element.getBoundingClientRect().top;
} else {
clearInterval(interval);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({top: y, behavior: 'smooth'});
}
}, 50);
}
if (i > 4 && this.interval) {
clearInterval(this.interval);
}
}, 100);
} else {
setTimeout( () => {
window.scrollTo({top: 0, behavior: 'smooth'});
}, 0);
}, 100);
} else {
setTimeout( () => {
window.scrollTo({top: 0, behavior: 'smooth'});
}, 0);
}
}
this.lastComponent = this.currentComponent;
}