develop #1
|
|
@ -10,7 +10,7 @@ import {
|
|||
PLATFORM_ID,
|
||||
ViewChild
|
||||
} from "@angular/core";
|
||||
import {LayoutService} from "../sidebar/layout.service";
|
||||
import {LayoutService, SidebarItem} from "../sidebar/layout.service";
|
||||
|
||||
declare var UIkit;
|
||||
declare var ResizeObserver;
|
||||
|
|
@ -31,18 +31,14 @@ declare var ResizeObserver;
|
|||
[attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
|
||||
<div class="uk-container uk-container-large">
|
||||
<div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''">
|
||||
<div class="header">
|
||||
<ng-content select="[header]"></ng-content>
|
||||
</div>
|
||||
<ng-content select="[header]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page_content_actions" #actions class="uk-blur-background" [class.uk-border-bottom]="border && isStickyActive">
|
||||
<div class="uk-container uk-container-large">
|
||||
<div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''">
|
||||
<div class="actions">
|
||||
<ng-content select="[actions]"></ng-content>
|
||||
</div>
|
||||
<ng-content select="[actions]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,15 +65,15 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
public offset: number;
|
||||
public shouldSticky: boolean = true;
|
||||
public isMobile: boolean = false;
|
||||
public isStickyActive: boolean = false;
|
||||
public footer_height: number = 0;
|
||||
@ViewChild('header') header: ElementRef;
|
||||
@ViewChild('actions') actions: ElementRef;
|
||||
public footer_height: number = 0;
|
||||
@ViewChild("sticky_footer") sticky_footer: ElementRef;
|
||||
private sticky = {
|
||||
header: null,
|
||||
footer: null
|
||||
}
|
||||
public isStickyActive: boolean = false;
|
||||
subscriptions = [];
|
||||
|
||||
constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef,
|
||||
|
|
@ -85,12 +81,14 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (typeof document !== "undefined") {
|
||||
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
|
||||
if(this.isBrowser) {
|
||||
this.stickyBugWorkaround();
|
||||
}
|
||||
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
|
||||
this.isMobile = isMobile;
|
||||
if(this.isBrowser) {
|
||||
this.offset = this.isMobile?0:Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
|
||||
}
|
||||
this.cdr.detectChanges();
|
||||
}));
|
||||
}
|
||||
|
|
@ -104,7 +102,6 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
this.observeStickyFooter();
|
||||
if (this.shouldSticky && typeof document !== 'undefined') {
|
||||
this.sticky.header = UIkit.sticky((this.headerSticky ? this.header.nativeElement : this.actions.nativeElement), {
|
||||
media: '@m',
|
||||
offset: this.offset
|
||||
});
|
||||
this.subscriptions.push(UIkit.util.on(document, 'active', '#' + this.sticky.header.$el.id, () => {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,44 @@
|
|||
import {Injectable} from "@angular/core";
|
||||
import {BehaviorSubject, Observable, Subscriber} from "rxjs";
|
||||
import {ActivationStart, Router} from "@angular/router";
|
||||
import {Icon} from "../../../sharedComponents/menu";
|
||||
|
||||
declare var ResizeObserver;
|
||||
|
||||
export interface SidebarItem {
|
||||
icon?: Icon,
|
||||
name: string,
|
||||
subItem?: SidebarItem
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class LayoutService {
|
||||
|
||||
|
||||
public static HEADER_HEIGHT = '65px';
|
||||
private deviceBreakpoint: number;
|
||||
|
||||
|
||||
/**
|
||||
* Set this to true when sidebar items are ready.
|
||||
*/
|
||||
private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
|
||||
|
||||
/**
|
||||
* Set this to true when sidebar is hovered, otherwise false.
|
||||
*/
|
||||
private hoverSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
|
||||
|
||||
/**
|
||||
* Add hasSidebar: false on data of route config, if sidebar is not needed.
|
||||
*/
|
||||
private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
|
||||
|
||||
/**
|
||||
* Add hasHeader: false on data of route config, if header is not needed.
|
||||
*/
|
||||
private hasHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
|
||||
|
||||
/**
|
||||
* Add hasAdminMenu: true on data of route config, if global sidebar should be used.
|
||||
*/
|
||||
|
|
@ -52,13 +59,13 @@ export class LayoutService {
|
|||
/**
|
||||
* Add hasQuickContact: false on data of route config, if the quick-contact fixed button is not needed.
|
||||
*/
|
||||
private hasQuickContactSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
|
||||
private hasQuickContactSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
|
||||
/**
|
||||
* Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match.
|
||||
*/
|
||||
|
||||
private activeMenuItemSubject: BehaviorSubject<string> = new BehaviorSubject<string>("");
|
||||
|
||||
|
||||
/**
|
||||
* Change to true will replace your Nav Header with the replaceHeader of your object.
|
||||
* Be sure that replaceHeader exists.
|
||||
|
|
@ -66,37 +73,39 @@ export class LayoutService {
|
|||
private replaceHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
/** Check if the current device is mobile or tablet */
|
||||
private isMobileSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
/** Active sidebar Item*/
|
||||
private activeSidebarItemSubject: BehaviorSubject<SidebarItem> = new BehaviorSubject<SidebarItem>(null);
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
|
||||
ngOnDestroy() {
|
||||
this.clearSubscriptions();
|
||||
}
|
||||
|
||||
|
||||
clearSubscriptions() {
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if (subscription instanceof Subscriber) {
|
||||
subscription.unsubscribe();
|
||||
} else if(subscription instanceof ResizeObserver) {
|
||||
} else if (subscription instanceof ResizeObserver) {
|
||||
subscription.disconnect();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
setObserver() {
|
||||
if(typeof ResizeObserver !== "undefined" && typeof document !== "undefined") {
|
||||
if (typeof ResizeObserver !== "undefined" && typeof document !== "undefined") {
|
||||
this.deviceBreakpoint = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--uk-breakpoint-m').replace('px', '')) + 1;
|
||||
let resizeObs = new ResizeObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
this.isMobileSubject.next(entry.target.clientWidth < this.deviceBreakpoint);
|
||||
})
|
||||
});
|
||||
});
|
||||
this.subscriptions.push(resizeObs);
|
||||
resizeObs.observe(document.documentElement);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
constructor(private router: Router) {
|
||||
if(typeof window !== 'undefined') {
|
||||
if (typeof window !== 'undefined') {
|
||||
this.isMobileSubject.next(window.innerWidth < this.deviceBreakpoint);
|
||||
}
|
||||
this.subscriptions.push(this.router.events.subscribe(event => {
|
||||
|
|
@ -112,12 +121,12 @@ export class LayoutService {
|
|||
if (data['hasHeader'] !== undefined &&
|
||||
data['hasHeader'] === false) {
|
||||
this.setHasHeader(false);
|
||||
if(typeof document !== "undefined") {
|
||||
if (typeof document !== "undefined") {
|
||||
document.documentElement.style.setProperty('--header-height', '0');
|
||||
}
|
||||
} else {
|
||||
this.setHasHeader(true);
|
||||
if(typeof document !== "undefined") {
|
||||
if (typeof document !== "undefined") {
|
||||
document.documentElement.style.setProperty('--header-height', LayoutService.HEADER_HEIGHT);
|
||||
}
|
||||
}
|
||||
|
|
@ -145,7 +154,7 @@ export class LayoutService {
|
|||
} else {
|
||||
this.setSmallScreen(false);
|
||||
}
|
||||
if (data['hasQuickContact'] !== undefined &&
|
||||
if (data['hasQuickContact'] !== undefined &&
|
||||
data['hasQuickContact'] === false) {
|
||||
this.setHasQuickContact(false);
|
||||
} else {
|
||||
|
|
@ -169,78 +178,82 @@ export class LayoutService {
|
|||
get open(): boolean {
|
||||
return this.openSubject.getValue();
|
||||
}
|
||||
|
||||
|
||||
setOpen(value: boolean) {
|
||||
this.openSubject.next(value);
|
||||
}
|
||||
|
||||
|
||||
get hover(): boolean {
|
||||
return this.hoverSubject.getValue();
|
||||
}
|
||||
|
||||
|
||||
setHover(value: boolean) {
|
||||
this.hoverSubject.next(value);
|
||||
}
|
||||
|
||||
|
||||
get hasAnySidebar(): boolean {
|
||||
return this.hasSidebarSubject.getValue() || this.hasInternalSidebarSubject.getValue() || this.hasAdminMenuSubject.getValue();
|
||||
}
|
||||
|
||||
get hasSidebar(): Observable<boolean> {
|
||||
return this.hasSidebarSubject.asObservable();
|
||||
}
|
||||
|
||||
|
||||
setHasSidebar(value: boolean) {
|
||||
this.hasSidebarSubject.next(value);
|
||||
}
|
||||
|
||||
|
||||
get hasHeader(): Observable<boolean> {
|
||||
return this.hasHeaderSubject.asObservable();
|
||||
}
|
||||
|
||||
|
||||
setHasHeader(value: boolean) {
|
||||
this.hasHeaderSubject.next(value);
|
||||
}
|
||||
|
||||
|
||||
get hasAdminMenu(): Observable<boolean> {
|
||||
return this.hasAdminMenuSubject.asObservable();
|
||||
}
|
||||
|
||||
|
||||
setHasAdminMenu(value: boolean) {
|
||||
this.hasAdminMenuSubject.next(value);
|
||||
}
|
||||
|
||||
|
||||
get hasInternalSidebar(): Observable<boolean> {
|
||||
return this.hasInternalSidebarSubject.asObservable();
|
||||
}
|
||||
|
||||
|
||||
setHasInternalSidebar(value: boolean) {
|
||||
this.hasInternalSidebarSubject.next(value);
|
||||
}
|
||||
|
||||
|
||||
get isFrontPage(): Observable<boolean> {
|
||||
return this.isFrontPageSubject.asObservable();
|
||||
}
|
||||
|
||||
|
||||
setFrontPage(value: boolean) {
|
||||
this.isFrontPageSubject.next(value);
|
||||
}
|
||||
|
||||
|
||||
get replaceHeader(): Observable<boolean> {
|
||||
return this.replaceHeaderSubject.asObservable();
|
||||
}
|
||||
|
||||
|
||||
get replaceHeaderValue(): boolean {
|
||||
return this.replaceHeaderSubject.getValue();
|
||||
}
|
||||
|
||||
|
||||
setReplaceHeader(value: boolean) {
|
||||
this.replaceHeaderSubject.next(value);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
* */
|
||||
get isSmallScreen(): boolean {
|
||||
return this.isSmallScreenSubject.getValue();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
* */
|
||||
|
|
@ -248,13 +261,13 @@ export class LayoutService {
|
|||
this.isSmallScreenSubject.next(value);
|
||||
}
|
||||
|
||||
get hasQuickContact(): Observable<boolean> {
|
||||
return this.hasQuickContactSubject.asObservable();
|
||||
}
|
||||
get hasQuickContact(): Observable<boolean> {
|
||||
return this.hasQuickContactSubject.asObservable();
|
||||
}
|
||||
|
||||
setHasQuickContact(value: boolean) {
|
||||
this.hasQuickContactSubject.next(value);
|
||||
}
|
||||
setHasQuickContact(value: boolean) {
|
||||
this.hasQuickContactSubject.next(value);
|
||||
}
|
||||
|
||||
get activeMenuItem(): string {
|
||||
return this.activeMenuItemSubject.getValue();
|
||||
|
|
@ -263,12 +276,20 @@ export class LayoutService {
|
|||
setActiveMenuItem(value: string) {
|
||||
this.activeMenuItemSubject.next(value);
|
||||
}
|
||||
|
||||
|
||||
get isMobile(): Observable<boolean> {
|
||||
return this.isMobileSubject.asObservable();
|
||||
}
|
||||
|
||||
|
||||
get isMobileValue(): boolean {
|
||||
return this.isMobileSubject.getValue();
|
||||
}
|
||||
|
||||
get activeSidebarItem(): Observable<SidebarItem> {
|
||||
return this.activeSidebarItemSubject.asObservable();
|
||||
}
|
||||
|
||||
setActiveSidebarItem(value: SidebarItem) {
|
||||
this.activeSidebarItemSubject.next(value);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,52 @@
|
|||
<aside id="sidebar_main">
|
||||
<aside id="sidebar_main" class="uk-visible@m">
|
||||
<div sidebar-content>
|
||||
<div *ngIf="items.length > 0" class="menu_section mobile uk-margin-large-top" style="min-height: 30vh">
|
||||
<ul #nav class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" uk-nav="duration: 400">
|
||||
<ng-template ngFor [ngForOf]="items" let-item>
|
||||
<li [class.uk-active]="isTheActiveMenuItem(item)"
|
||||
[class.uk-parent]="item.items.length > 0">
|
||||
<a [routerLink]="getItemRoute(item)" [title]="item.title"
|
||||
[queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null" class="uk-flex uk-flex-middle">
|
||||
<div *ngIf="item.icon && (item.icon.svg || item.icon.name)" class="uk-width-auto">
|
||||
<icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" ratio="0.9" [svg]="item.icon.svg" [flex]="true"></icon>
|
||||
</div>
|
||||
<span [class.hide-on-close]="item.icon" class="uk-width-expand@l uk-text-truncate uk-margin-small-left">{{item.title}}</span>
|
||||
</a>
|
||||
<ul *ngIf="item.items?.length > 0 && (isBrowser || isTheActiveMenuItem(item))" class="uk-nav-sub">
|
||||
<li *ngFor="let subItem of item.items"
|
||||
[class.uk-active]="isTheActiveMenuItem(item, subItem)">
|
||||
<a [routerLink]="subItem.route?subItem.route:null" [queryParams]="subItem.route?subItem.params:null"
|
||||
[queryParamsHandling]="subItem.route?queryParamsHandling:null" [title]="subItem.title">
|
||||
<span class="uk-text-truncate">{{subItem.title}}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</div>
|
||||
<ng-template [ngIf]="specialMenuItem">
|
||||
<div class="menu_section uk-margin-xlarge-top">
|
||||
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
|
||||
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
|
||||
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
|
||||
[queryParamsHandling]="queryParamsHandling">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<div *ngIf="specialMenuItem.icon" class="uk-width-auto">
|
||||
<icon class="menu-icon" [customClass]="specialMenuItem.icon.class" [name]="specialMenuItem.icon.name" ratio="1.2" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
|
||||
</div>
|
||||
<span class="uk-width-expand uk-text-truncate uk-margin-small-left"
|
||||
[class.hide-on-close]="specialMenuItem.icon">{{specialMenuItem.title}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-container *ngTemplateOutlet="menu; context: {mobile: false}"></ng-container>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="uk-hidden@m">
|
||||
<div id="sidebar_offcanvas" #sidebar_offcanvas [attr.uk-offcanvas]="'overlay: true'">
|
||||
<div class="uk-offcanvas-bar uk-padding-remove-horizontal">
|
||||
<button class="uk-offcanvas-close uk-icon uk-close">
|
||||
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
|
||||
</button>
|
||||
<ng-container *ngTemplateOutlet="menu; context: {mobile: true}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #menu let-mobile=mobile>
|
||||
<div *ngIf="backItem" class="back" [class.mobile]="mobile">
|
||||
<a [routerLink]="backItem.route" [queryParams]="backItem.params" class="uk-flex uk-flex-middle uk-flex-center"
|
||||
(click)="closeOffcanvas()" [queryParamsHandling]="queryParamsHandling">
|
||||
<div *ngIf="backItem.icon" class="uk-width-auto">
|
||||
<icon [name]="backItem.icon.name" ratio="1.3" [svg]="backItem.icon.svg" [flex]="true"></icon>
|
||||
</div>
|
||||
<span class="uk-width-expand uk-text-truncate uk-margin-left"
|
||||
[class.hide-on-close]="backItem.icon">{{backItem.title}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="items.length > 0" class="menu_section uk-margin-large-top" [class.mobile]="mobile" style="min-height: 30vh">
|
||||
<ul #nav class="uk-list uk-nav uk-nav-parent-icon"
|
||||
[class.uk-nav-default]="!mobile" [class.uk-nav-primary]="mobile" uk-nav="duration: 400">
|
||||
<ng-template ngFor [ngForOf]="items" let-item>
|
||||
<li [class.uk-active]="item.isActive"
|
||||
[class.uk-parent]="item.items.length > 0">
|
||||
<a [routerLink]="getItemRoute(item)" [title]="item.title" (click)="item.items.length === 0?closeOffcanvas():null"
|
||||
[queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null" class="uk-flex uk-flex-middle">
|
||||
<div *ngIf="item.icon && (item.icon.svg || item.icon.name)" class="uk-width-auto">
|
||||
<icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" ratio="0.9" [svg]="item.icon.svg" [flex]="true"></icon>
|
||||
</div>
|
||||
<span [class.hide-on-close]="item.icon" class="uk-width-expand@l uk-text-truncate uk-margin-small-left">{{item.title}}</span>
|
||||
</a>
|
||||
<ul *ngIf="item.items?.length > 0 && (isBrowser || item.isActive)" class="uk-nav-sub">
|
||||
<li *ngFor="let subItem of item.items"
|
||||
[class.uk-active]="subItem.isActive">
|
||||
<a [routerLink]="subItem.route?subItem.route:null" [title]="subItem.title" (click)="closeOffcanvas()"
|
||||
[queryParams]="subItem.route?subItem.params:null" [queryParamsHandling]="subItem.route?queryParamsHandling:null">
|
||||
<span class="uk-text-truncate">{{subItem.title}}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
import {AfterViewInit, Component, ElementRef, Inject, Input, PLATFORM_ID, ViewChild} from '@angular/core';
|
||||
import {
|
||||
AfterViewInit, ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
Inject,
|
||||
Input, OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
PLATFORM_ID, SimpleChanges,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import {MenuItem} from "../../../sharedComponents/menu";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";
|
||||
import {DomSanitizer} from "@angular/platform-browser";
|
||||
import {properties} from "../../../../../environments/environment";
|
||||
import {LayoutService} from "./layout.service";
|
||||
import {Subscription} from "rxjs";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
|
|
@ -11,19 +22,31 @@ declare var UIkit;
|
|||
selector: 'dashboard-sidebar',
|
||||
templateUrl: 'sideBar.component.html'
|
||||
})
|
||||
export class SideBarComponent implements AfterViewInit {
|
||||
export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
|
||||
@Input() items: MenuItem[] = [];
|
||||
@Input() activeItem: string = '';
|
||||
@Input() activeSubItem: string = '';
|
||||
@Input() specialMenuItem: MenuItem = null;
|
||||
@Input() backItem: MenuItem = null;
|
||||
@Input() queryParamsHandling;
|
||||
@ViewChild("nav") nav: ElementRef
|
||||
@ViewChild("nav") nav: ElementRef;
|
||||
@ViewChild("sidebar_offcanvas") sidebar_offcanvas: ElementRef;
|
||||
public properties = properties;
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
constructor(private route: ActivatedRoute, private router: Router,
|
||||
private sanitizer: DomSanitizer, private layoutService: LayoutService,
|
||||
@Inject(PLATFORM_ID) private platformId) {}
|
||||
|
||||
private cdr: ChangeDetectorRef, @Inject(PLATFORM_ID) private platformId) {
|
||||
this.subscriptions.push(this.router.events.subscribe(event => {
|
||||
if(event instanceof NavigationEnd && (!this.activeItem && !this.activeSubItem)) {
|
||||
this.setActiveMenuItem();
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.setActiveMenuItem();
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if(this.nav && typeof UIkit !== "undefined") {
|
||||
setTimeout(() => {
|
||||
|
|
@ -33,6 +56,21 @@ export class SideBarComponent implements AfterViewInit {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if(changes.activeItem || changes.activeSubItem || changes.items) {
|
||||
this.setActiveMenuItem();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.layoutService.setActiveSidebarItem(null);
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if(subscription instanceof Subscription) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get isBrowser() {
|
||||
return this.platformId === 'browser';
|
||||
|
|
@ -46,7 +84,7 @@ export class SideBarComponent implements AfterViewInit {
|
|||
}
|
||||
|
||||
get activeIndex(): number {
|
||||
return this.items?this.items.findIndex(item => this.isTheActiveMenuItem(item)):0;
|
||||
return this.items?this.items.findIndex(item => item.isActive):0;
|
||||
}
|
||||
|
||||
getItemRoute(item: MenuItem) {
|
||||
|
|
@ -57,8 +95,43 @@ export class SideBarComponent implements AfterViewInit {
|
|||
return item.route?item.route:null;
|
||||
}
|
||||
}
|
||||
|
||||
setActiveMenuItem() {
|
||||
this.items.forEach(item => {
|
||||
item.isActive = this.isTheActiveMenuItem(item);
|
||||
if(item.isActive) {
|
||||
if(item.items.length > 0) {
|
||||
item.items.forEach(subItem => {
|
||||
subItem.isActive = this.isTheActiveMenuItem(item, subItem);
|
||||
if(subItem.isActive) {
|
||||
this.layoutService.setActiveSidebarItem({
|
||||
name: item.title,
|
||||
icon: item.icon,
|
||||
subItem: {
|
||||
name: subItem.title
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.layoutService.setActiveSidebarItem({
|
||||
name: item.title,
|
||||
icon: item.icon
|
||||
});
|
||||
}
|
||||
} else {
|
||||
item.items.forEach(subItem => {
|
||||
subItem.isActive = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
if(!this.items.find(item => item.isActive)) {
|
||||
this.layoutService.setActiveSidebarItem(null);
|
||||
}
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
|
||||
isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
|
||||
private isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
|
||||
if (this.activeItem || this.activeSubItem) {
|
||||
return (!subItem && this.activeItem === item._id) ||
|
||||
(subItem && this.activeItem === item._id && this.activeSubItem === subItem._id);
|
||||
|
|
@ -74,15 +147,13 @@ export class SideBarComponent implements AfterViewInit {
|
|||
return (menuItemURL == this.router.url.split('?')[0])
|
||||
}
|
||||
|
||||
satinizeHTML(html) {
|
||||
return this.sanitizer.bypassSecurityTrustHtml(html);
|
||||
}
|
||||
|
||||
public get isSmallScreen() {
|
||||
return this.layoutService.isSmallScreen;
|
||||
}
|
||||
|
||||
public get open() {
|
||||
return this.layoutService.open;
|
||||
}
|
||||
|
||||
public closeOffcanvas() {
|
||||
if(this.sidebar_offcanvas) {
|
||||
UIkit.offcanvas(this.sidebar_offcanvas.nativeElement).hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import {Component, OnDestroy, OnInit} from "@angular/core";
|
||||
import {LayoutService, SidebarItem} from "../layout.service";
|
||||
import {Subscription} from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: 'sidebar-mobile-toggle',
|
||||
template: `
|
||||
<a *ngIf="activeSidebarItem" href="#sidebar_offcanvas" class="sidebar_mobile_toggle uk-link-reset uk-width-2-3 uk-flex uk-flex-middle" uk-toggle>
|
||||
<div *ngIf="activeSidebarItem.icon && (activeSidebarItem.icon.svg || activeSidebarItem.icon.name)" class="uk-width-auto">
|
||||
<icon class="menu-icon" [customClass]="activeSidebarItem.icon.class" [name]="activeSidebarItem.icon.name" ratio="0.9" [svg]="activeSidebarItem.icon.svg" [flex]="true"></icon>
|
||||
</div>
|
||||
<span class="uk-width-expand uk-text-truncate uk-margin-small-left uk-text-bolder">
|
||||
{{activeSidebarItem.name}}
|
||||
<span *ngIf="activeSidebarItem.subItem">- {{activeSidebarItem.subItem.name}}</span>
|
||||
</span>
|
||||
<div class="uk-width-auto uk-margin-small-left">
|
||||
<icon name="arrow_drop_down" ratio="1.5" [flex]="true"></icon>
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
})
|
||||
export class SidebarMobileToggleComponent implements OnInit, OnDestroy {
|
||||
public activeSidebarItem: SidebarItem;
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
constructor(private layoutService: LayoutService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.subscriptions.push(this.layoutService.activeSidebarItem.subscribe(activeSidebarItem => {
|
||||
this.activeSidebarItem = activeSidebarItem;
|
||||
}));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if(subscription instanceof Subscription) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import {NgModule} from "@angular/core";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {SidebarMobileToggleComponent} from "./sidebar-mobile-toggle.component";
|
||||
import {IconsModule} from "../../../../utils/icons/icons.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, IconsModule],
|
||||
declarations: [SidebarMobileToggleComponent],
|
||||
exports: [SidebarMobileToggleComponent]
|
||||
})
|
||||
export class SidebarMobileToggleModule {}
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<div *ngIf="loading">
|
||||
<loading></loading>
|
||||
</div>
|
||||
<div *ngIf="!loading">
|
||||
<div class="uk-visible@m">
|
||||
<div #searchElement class="uk-flex uk-flex-right uk-margin-small-bottom">
|
||||
<div search-input [searchControl]="keywordControl" iconPosition="left" placeholder="Write a key word to filter the content"
|
||||
searchInputClass="border-bottom" class="uk-width-large"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container>
|
||||
<div class="uk-margin-top">
|
||||
<div id="parentContainer" class="uk-grid" uk-grid>
|
||||
<div class="uk-width-1-4@m uk-visible@m">
|
||||
<div>
|
||||
<ul *ngIf="!keyword" class="uk-tab uk-tab-left">
|
||||
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
|
||||
class="uk-margin-small-bottom uk-text-capitalize">
|
||||
<a (click)="scrollToId(item.id)">{{item.id}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
|
||||
<li *ngFor="let item of viewResults; index as i"
|
||||
class="uk-margin-small-bottom uk-text-capitalize" [class.uk-active]="activeSection === item.id">
|
||||
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-hidden@m">
|
||||
<div class="uk-sticky uk-blur-background" uk-sticky>
|
||||
<div class="uk-flex uk-flex-center uk-margin-small-bottom">
|
||||
<div search-input [searchControl]="keywordControl" iconPosition="left" placeholder="Write a key word to filter the content"
|
||||
searchInputClass="border-bottom" class="uk-width-large"></div>
|
||||
</div>
|
||||
<div #tabs class="uk-slider uk-position-relative" uk-slider="finite: true">
|
||||
<div class="uk-slider-container">
|
||||
<ul *ngIf="!keyword" class="uk-tab uk-flex-nowrap uk-slider-items">
|
||||
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id && sliderInit"
|
||||
class="uk-text-capitalize">
|
||||
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul *ngIf="keyword?.length" class="uk-tab uk-flex-nowrap uk-slider-items">
|
||||
<li *ngFor="let item of viewResults; index as i"
|
||||
class="uk-text-capitalize" [class.uk-active]="activeSection === item.id && sliderInit">
|
||||
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
|
||||
<a class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-expand@m uk-overflow-auto" [style]="'height: ' + calculatedHeight + 'px;'">
|
||||
<ng-container *ngIf="!keyword">
|
||||
<div [id]="item.id" *ngFor="let item of fos; index as i">
|
||||
<div [class.uk-padding-small]="i !== 0" class="uk-text-capitalize uk-padding-remove-horizontal uk-padding-remove-bottom">
|
||||
<h2 class="uk-h4 uk-margin-remove">
|
||||
{{item.id}}
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
||||
class="uk-link-text">
|
||||
{{item.id}}
|
||||
</a> -->
|
||||
</h2>
|
||||
</div>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-xlarge-bottom" uk-grid="masonry: false">
|
||||
<div *ngFor="let child of item.children">
|
||||
<div class="uk-text-capitalize">
|
||||
<h3 class="uk-h6 uk-margin-small-bottom">
|
||||
{{child.id}}
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(child.id)}"
|
||||
class="uk-link-text">
|
||||
{{child.id}}
|
||||
</a> -->
|
||||
</h3>
|
||||
<div *ngFor="let subChild of child.children" class="uk-margin-xsmall-bottom uk-text-truncate">
|
||||
<label [class.uk-text-bolder]="subjects?.includes(subChild.id)">
|
||||
<input [ngModel]="fosOptions.get(subChild.id)" (ngModelChange)="fosOptions.set(subChild.id, $event)"
|
||||
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||
<span [title]="subChild.id">{{subChild.id}}</span>
|
||||
</label>
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
|
||||
class="uk-link-text">
|
||||
{{subChild.id}}
|
||||
</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="keyword?.length">
|
||||
<div [id]="item.id" *ngFor="let item of viewResults; index as i">
|
||||
<div
|
||||
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize" [class.custom-bottom-border]="i < viewResults.length - 1">
|
||||
<h2 class="uk-h4 uk-margin-remove"
|
||||
[innerHTML]="highlightKeyword(item.id)">
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(item.id)">
|
||||
</a> -->
|
||||
</h2>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
|
||||
<div *ngFor="let subItem of item.children">
|
||||
<h3 class="uk-h6 uk-margin-small-bottom"
|
||||
[innerHTML]="highlightKeyword(subItem.id)">
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subItem.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
|
||||
</a> -->
|
||||
</h3>
|
||||
<div *ngFor="let subSubItem of subItem.children" class="uk-margin-xsmall-bottom uk-text-truncate">
|
||||
<label [class.uk-text-bolder]="subjects?.includes(subSubItem.id)">
|
||||
<input [ngModel]="fosOptions.get(subSubItem.id)" (ngModelChange)="fosOptions.set(subSubItem.id, $event)"
|
||||
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||
<span [innerHTML]="highlightKeyword(subSubItem.id)" [title]="subSubItem.id"></span>
|
||||
</label>
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">
|
||||
</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="keyword && viewResults?.length == 0">
|
||||
<div class="uk-padding-large uk-text-center">
|
||||
<h2 class="uk-h3">No results were found.</h2>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
import {HttpClient} from "@angular/common/http";
|
||||
import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core";
|
||||
import {FormBuilder, FormControl} from "@angular/forms";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {Subscription} from "rxjs";
|
||||
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {StringUtils} from "../../utils/string-utils.class";
|
||||
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
|
||||
import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
||||
import Timeout = NodeJS.Timeout;
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
@Component({
|
||||
selector: 'fos-selection',
|
||||
templateUrl: 'fos-selection.component.html',
|
||||
styleUrls: ['fos-selection.component.less']
|
||||
})
|
||||
export class FosSelectionComponent {
|
||||
public properties: EnvProperties = properties;
|
||||
@Input() subjects: string[];
|
||||
@Input() inModal: boolean = false;
|
||||
@Input() contentHeight: number = 0;
|
||||
@ViewChild("searchElement") searchElement: ElementRef;
|
||||
|
||||
public loading: boolean;
|
||||
public fos: any[] = [];
|
||||
public fosOptions: Map<string, boolean>;
|
||||
public activeSection: string;
|
||||
|
||||
public keywordControl: FormControl;
|
||||
public keyword: string;
|
||||
|
||||
public viewResults = [];
|
||||
|
||||
public result = [];
|
||||
|
||||
private subscriptions: Subscription[] = [];
|
||||
private observer: IntersectionObserver;
|
||||
private timeout: Timeout;
|
||||
@ViewChild('tabs') tabs: ElementRef;
|
||||
public sliderInit: boolean = false;
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
private fb: FormBuilder,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private route: ActivatedRoute,
|
||||
private _router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.loading = true;
|
||||
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/fos.json').subscribe(data => {
|
||||
this.fos = data['fos'];
|
||||
this.convertFosToOptions();
|
||||
this.convertFosToOptions();
|
||||
if (typeof document !== 'undefined') {
|
||||
setTimeout(()=> {
|
||||
let slider = UIkit.slider(this.tabs.nativeElement);
|
||||
slider.clsActive = 'uk-slider-active';
|
||||
slider.updateActiveClasses();
|
||||
this.sliderInit = true;
|
||||
slider.slides.forEach(item => {
|
||||
item.classList.remove('uk-active');
|
||||
});
|
||||
if (this.route.snapshot.fragment) {
|
||||
this.activeSection = this.route.snapshot.fragment;
|
||||
let i = this.fos.findIndex(item => item.id == this.route.snapshot.fragment);
|
||||
slider.show(i);
|
||||
} else {
|
||||
this.activeSection = this.fos[0].id;
|
||||
}
|
||||
|
||||
this.setObserver();
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
}
|
||||
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
|
||||
if(fragment) {
|
||||
this.activeSection = fragment;
|
||||
if(this.tabs) {
|
||||
let slider = UIkit.slider(this.tabs.nativeElement);
|
||||
let i = this.fos.findIndex(item => item.id == fragment);
|
||||
slider.show(i);
|
||||
}
|
||||
} else {
|
||||
this.activeSection = this.fos[0].id;
|
||||
}
|
||||
}));
|
||||
this.keywordControl = this.fb.control('');
|
||||
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
|
||||
this.keyword = value;
|
||||
this.findMatches(this.keyword);
|
||||
if (typeof document !== 'undefined') {
|
||||
setTimeout(() => {
|
||||
this.setObserver();
|
||||
});
|
||||
}
|
||||
}));
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
for (let sub of this.subscriptions) {
|
||||
sub.unsubscribe();
|
||||
}
|
||||
if(this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
private setObserver() {
|
||||
if(this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
if(this.timeout) {
|
||||
clearTimeout(this.timeout);
|
||||
}
|
||||
this.timeout = setTimeout(() => {
|
||||
if(!this.inModal) {
|
||||
this._router.navigate(['./'], {
|
||||
fragment: entry.target.id,
|
||||
relativeTo: this.route,
|
||||
state: {disableScroll: true}
|
||||
});
|
||||
} else {
|
||||
this.activeSection = entry.target.id;
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
}, {threshold: 0.1, rootMargin: '-100px'});
|
||||
this.fos.forEach(fos => {
|
||||
let element = document.getElementById(fos.id);
|
||||
if(element) {
|
||||
this.observer.observe(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
convertFosToOptions() {
|
||||
this.fosOptions = new Map<string, boolean>();
|
||||
this.fos.forEach(fos => {
|
||||
this.fosOptions.set(fos.id, false);
|
||||
if(fos.children) {
|
||||
fos.children.forEach(child => {
|
||||
this.fosOptions.set(child.id, false);
|
||||
if(child.children) {
|
||||
child.children.forEach(child2 => {
|
||||
this.fosOptions.set(child2.id, this.subjects?.includes(child2.id));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
findMatches(value: string) {
|
||||
this.viewResults = JSON.parse(JSON.stringify(this.fos));
|
||||
let matchLevel1: boolean = false;
|
||||
let matchLevel2: boolean = false;
|
||||
// 1st level search
|
||||
if(this.viewResults.length) {
|
||||
this.viewResults = this.viewResults.filter(item => {
|
||||
matchLevel1 = !!item.id.includes(value?.toLowerCase());
|
||||
// // 2nd level search
|
||||
if(item.children?.length && !matchLevel1) {
|
||||
item.children = item.children.filter(subItem => {
|
||||
matchLevel2 = !!subItem.id.includes(value?.toLowerCase());
|
||||
// 3rd level search
|
||||
if(subItem.children?.length && !matchLevel2) {
|
||||
subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.toLowerCase()));
|
||||
}
|
||||
return subItem.children?.length > 0 || matchLevel2;
|
||||
});
|
||||
}
|
||||
return item.children?.length > 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
highlightKeyword(name) {
|
||||
if(name.includes(this.keyword.toLowerCase())) {
|
||||
return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `<mark class="highlighted">${matchedValue}</mark>`);
|
||||
} else {
|
||||
return name;
|
||||
}
|
||||
}
|
||||
|
||||
public urlEncodeAndQuote(str: string): string {
|
||||
return StringUtils.quote(StringUtils.URIEncode(str));
|
||||
}
|
||||
|
||||
public scrollToId(value: string) {
|
||||
HelperFunctions.scrollToId(value);
|
||||
this.activeSection = value;
|
||||
}
|
||||
|
||||
public getSelectedSubjects() {
|
||||
let checked = Array.from(this.fosOptions, function (entry) {
|
||||
return {id: entry[0], checked: entry[1]};
|
||||
});
|
||||
return checked.filter(sub => sub.checked == true);
|
||||
}
|
||||
|
||||
get calculatedHeight(): number {
|
||||
if(this.contentHeight && this.searchElement) {
|
||||
return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import {CommonModule} from "@angular/common";
|
||||
import {NgModule} from "@angular/core";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
import {FosSelectionComponent} from './fos-selection.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, LoadingModule, InputModule, SearchInputModule
|
||||
],
|
||||
declarations: [
|
||||
FosSelectionComponent
|
||||
],
|
||||
providers: [
|
||||
|
||||
],
|
||||
exports: [
|
||||
FosSelectionComponent
|
||||
]
|
||||
})
|
||||
export class FosSelectionModule {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<div *ngIf="loading">
|
||||
<loading></loading>
|
||||
</div>
|
||||
<div *ngIf="!loading">
|
||||
<div class="uk-flex uk-flex-around">
|
||||
<div>
|
||||
<div *ngFor="let item of firstColumn; let i = index"
|
||||
class="uk-margin-bottom">
|
||||
<label [class.uk-text-bolder]="subjects?.includes(item.id)">
|
||||
<input [(ngModel)]="item.checked"
|
||||
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||
<span class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
|
||||
<span>{{item.id}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div *ngFor="let item of secondColumn; let i = index"
|
||||
class="uk-margin-bottom">
|
||||
<label [class.uk-text-bolder]="subjects?.includes(item.id)">
|
||||
<input [(ngModel)]="item.checked"
|
||||
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||
<span *ngIf="i !== secondColumn.length - 1"
|
||||
class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
|
||||
<span>{{item.id}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import {HttpClient} from "@angular/common/http";
|
||||
import {Component, Input} from "@angular/core";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||
import {StringUtils} from "../../utils/string-utils.class";
|
||||
|
||||
@Component({
|
||||
selector: 'sdg-selection',
|
||||
templateUrl: 'sdg-selection.component.html',
|
||||
styleUrls: ['sdg-selection.component.less']
|
||||
})
|
||||
export class SdgSelectionComponent {
|
||||
public properties: EnvProperties = properties;
|
||||
@Input() subjects: string[];
|
||||
@Input() entityType: string;
|
||||
|
||||
public loading: boolean;
|
||||
public sdgs: any = [];
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.loading = true;
|
||||
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/sdg.json').subscribe(data => {
|
||||
data['sdg'].forEach(element => {
|
||||
this.sdgs.push({code: element.code, id: element.id, label: element.label, html: element.html, checked: this.subjects?.includes(element.id)});
|
||||
});
|
||||
this.sdgs.push({code: '18', id: 'No SDGs are relevant for this ' + this.getEntityName(this.entityType), label: 'Not relevant', html: 'Not relevant', checked: false});
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
public get firstColumn() {
|
||||
return this.sdgs.slice(0, this.sdgs.length/2);
|
||||
}
|
||||
|
||||
public get secondColumn() {
|
||||
return this.sdgs.slice(this.sdgs.length/2, this.sdgs.length);
|
||||
}
|
||||
|
||||
public getSelectedSubjects() {
|
||||
return this.sdgs.filter(sub => sub.checked == true);
|
||||
}
|
||||
|
||||
private getEntityName (entityType:string) {
|
||||
return StringUtils.getEntityName(entityType, false);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import {CommonModule} from "@angular/common";
|
||||
import {NgModule} from "@angular/core";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
import {SdgSelectionComponent} from "./sdg-selection.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, LoadingModule, InputModule
|
||||
],
|
||||
declarations: [
|
||||
SdgSelectionComponent
|
||||
],
|
||||
providers: [
|
||||
|
||||
],
|
||||
exports: [
|
||||
SdgSelectionComponent
|
||||
]
|
||||
})
|
||||
export class SdgSelectionModule {
|
||||
|
||||
}
|
||||
|
|
@ -3,10 +3,11 @@ export interface Icon {
|
|||
svg?: string,
|
||||
class?: string
|
||||
}
|
||||
|
||||
export class MenuItem {
|
||||
_id: string = ""; // for root menu in order to close the dropdown when clicked
|
||||
title: string = "";
|
||||
type: string = "internal";
|
||||
type: string = "internal";
|
||||
url: string = ""; // external url
|
||||
route: string = ""; // internal url - using angular routing and components
|
||||
routeActive: string = ""; // route to check if it is active
|
||||
|
|
@ -19,7 +20,8 @@ export class MenuItem {
|
|||
icon: Icon;
|
||||
open: boolean;
|
||||
customClass: string = null;
|
||||
isFeatured: boolean;
|
||||
isFeatured: boolean;
|
||||
isActive: boolean;
|
||||
target: string = "_blank";
|
||||
|
||||
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[],
|
||||
|
|
@ -43,12 +45,12 @@ export class MenuItem {
|
|||
this.isFeatured = isFeatured;
|
||||
}
|
||||
|
||||
public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string=""): boolean {
|
||||
if(menu.route && menu.route.length > 0 && MenuItem.isTheActiveMenuItem(menu, currentRoute, activeMenuItem)) {
|
||||
public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string = ""): boolean {
|
||||
if (menu.route && menu.route.length > 0 && MenuItem.isTheActiveMenuItem(menu, currentRoute, activeMenuItem)) {
|
||||
return true;
|
||||
} else if(menu.items.length > 0) {
|
||||
for(let menuItem of menu.items) {
|
||||
if(MenuItem.isTheActiveMenuItem(menuItem, currentRoute, activeMenuItem)) {
|
||||
} else if (menu.items.length > 0) {
|
||||
for (let menuItem of menu.items) {
|
||||
if (MenuItem.isTheActiveMenuItem(menuItem, currentRoute, activeMenuItem)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -67,22 +69,23 @@ export class MenuItem {
|
|||
|
||||
|
||||
}
|
||||
|
||||
export class MenuItemExtended extends MenuItem {
|
||||
isOpen: boolean = false;
|
||||
parentItemId: string;
|
||||
isOpen: boolean = false;
|
||||
parentItemId: string;
|
||||
}
|
||||
|
||||
export class Menu {
|
||||
portalPid: string;
|
||||
isFeaturedMenuEnabled: boolean;
|
||||
isMenuEnabled: boolean;
|
||||
portalPid: string;
|
||||
isFeaturedMenuEnabled: boolean;
|
||||
isMenuEnabled: boolean;
|
||||
featuredAlignment: MenuAlignment;
|
||||
featuredMenuItems: MenuItemExtended[] = [];
|
||||
menuItems: MenuItemExtended[] = [];
|
||||
featuredMenuItems: MenuItemExtended[] = [];
|
||||
menuItems: MenuItemExtended[] = [];
|
||||
}
|
||||
|
||||
export class SideMenuItem extends MenuItem {
|
||||
ukIcon: string = '';
|
||||
}
|
||||
|
||||
export enum MenuAlignment {LEFT="LEFT", CENTER="CENTER", RIGHT="RIGHT"}
|
||||
export enum MenuAlignment {LEFT = "LEFT", CENTER = "CENTER", RIGHT = "RIGHT"}
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<button class="uk-offcanvas-close uk-icon uk-close">
|
||||
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
|
||||
</button>
|
||||
<ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-top uk-nav-parent-icon" uk-nav>
|
||||
<ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-large-top uk-nav-parent-icon" uk-nav>
|
||||
<ng-container *ngIf="!onlyTop">
|
||||
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
|
||||
<a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
|
||||
|
|
@ -314,7 +314,7 @@
|
|||
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
|
||||
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
|
||||
[alt]="activeHeader.title">
|
||||
<div *ngIf="activeHeader.logoInfo && !mobile" [innerHTML]="activeHeader.logoInfo"></div>
|
||||
<div *ngIf="activeHeader.logoInfo" class="uk-visible@l" [innerHTML]="activeHeader.logoInfo"></div>
|
||||
<ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
|
||||
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
|
||||
<p class="uk-margin-remove">{{activeHeader.title}}</p>
|
||||
|
|
@ -326,7 +326,7 @@
|
|||
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
|
||||
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
|
||||
[alt]="activeHeader.title">
|
||||
<div *ngIf="activeHeader.logoInfo && !mobile" [innerHTML]="activeHeader.logoInfo"></div>
|
||||
<div *ngIf="activeHeader.logoInfo" class="uk-visible@l" [innerHTML]="activeHeader.logoInfo"></div>
|
||||
<ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
|
||||
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
|
||||
<p class="uk-margin-remove">{{activeHeader.title}}</p>
|
||||
|
|
|
|||
|
|
@ -27,30 +27,32 @@ declare var UIkit;
|
|||
[attr.uk-switcher]="type === 'static'?('connect:' + connect):null"
|
||||
[ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
|
||||
<ng-container *ngIf="type === 'static'">
|
||||
<li *ngFor="let tab of leftTabs" class="uk-text-capitalize">
|
||||
<li *ngFor="let tab of leftTabs" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block">
|
||||
<a>{{tab.title}}</a>
|
||||
</li>
|
||||
<li *ngFor="let tab of rightTabs; let i=index;"
|
||||
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
|
||||
class="uk-text-capitalize">
|
||||
<li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
|
||||
class="uk-text-capitalize uk-text-truncate uk-display-block">
|
||||
<a [ngClass]="tab.customClass">{{tab.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="type === 'dynamic'">
|
||||
<li *ngFor="let tab of leftTabs" [class.uk-active]="tab.active" class="uk-text-capitalize">
|
||||
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass">{{tab.title}}</a>
|
||||
<li *ngFor="let tab of leftTabs; let i=index;" [class.uk-active]="tab.active" style="max-width: 50%">
|
||||
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
|
||||
(click)="showActive(i)"
|
||||
class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a>
|
||||
</li>
|
||||
<li *ngFor="let tab of rightTabs; let i=index;" [class.uk-active]="tab.active"
|
||||
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
|
||||
class="uk-text-capitalize">
|
||||
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass">{{tab.title}}</a>
|
||||
<li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" [class.uk-active]="tab.active"
|
||||
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''">
|
||||
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
|
||||
(click)="showActive(i)"
|
||||
class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="type === 'scrollable'">
|
||||
<li *ngFor="let tab of leftTabs" class="uk-text-capitalize" [class.uk-active]="tab.active">
|
||||
<li *ngFor="let tab of leftTabs" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block" [class.uk-active]="tab.active">
|
||||
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
|
||||
</li>
|
||||
<li *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize"
|
||||
<li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block"
|
||||
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
|
||||
[class.uk-active]="tab.active">
|
||||
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
|
||||
|
|
@ -109,6 +111,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
|
|||
@ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>;
|
||||
@ViewChild('sliderElement') sliderElement: ElementRef;
|
||||
@ViewChild('tabsElement') tabsElement: ElementRef;
|
||||
private slider;
|
||||
/**
|
||||
* Notify regarding new active element
|
||||
* */
|
||||
|
|
@ -127,23 +130,25 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
|
|||
if (typeof document !== 'undefined' && this.tabs.length > 0) {
|
||||
setTimeout(() => {
|
||||
if (this.position === 'horizontal') {
|
||||
let slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
|
||||
slider.clsActive = 'uk-slider-active';
|
||||
slider.updateActiveClasses();
|
||||
slider.slides.forEach((item, index) => {
|
||||
this.slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
|
||||
this.slider.clsActive = 'uk-slider-active';
|
||||
this.slider.updateActiveClasses();
|
||||
this.slider.slides.forEach((item, index) => {
|
||||
if(!this.tabs.get(index).active) {
|
||||
item.classList.remove('uk-active');
|
||||
}
|
||||
});
|
||||
console.log(slider);
|
||||
if (this.type === 'static') {
|
||||
let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
|
||||
tabs.show(this.activeIndex);
|
||||
if (this.connect.includes('#')) {
|
||||
this.scrollToStart();
|
||||
}
|
||||
} else if(this.type =='dynamic') {
|
||||
this.activeIndex = this.tabs.toArray().findIndex(tab => tab.active);
|
||||
this.slider.show(this.activeIndex);
|
||||
} else if (this.type === 'scrollable') {
|
||||
this.scrollable(slider);
|
||||
this.scrollable(this.slider);
|
||||
}
|
||||
} else {
|
||||
this.scrollable();
|
||||
|
|
@ -198,6 +203,13 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
public showActive(index) {
|
||||
this.activeIndex = index;
|
||||
if(this.slider) {
|
||||
this.slider.show(this.activeIndex);
|
||||
}
|
||||
}
|
||||
|
||||
private activeFragment(fragment, slider) {
|
||||
let index = 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue