openaire-library/utils/tabs/tabs.component.ts

155 lines
6.2 KiB
TypeScript
Raw Normal View History

/**
* The main component that renders single TabComponent
* instances.
*/
import {
AfterContentInit,
Component,
ContentChildren,
EventEmitter,
HostListener, Input,
Output,
QueryList,
} from '@angular/core';
import {TabComponent} from './tab.component';
@Component({
selector: 'my-tabs',
template: `
<div id="mytabs" class="uk-grid uk-margin-top landing-tab uk-margin-remove-left">
<div class="uk-margin-medium-right uk uk-padding-remove uk-width-expand" >
<div class=" uk-width-1-1" uk-slider="finite: true">
<div class="uk-position-relative " >
<div class="uk-slider-container ">
<ul class=" uk-slider-items " style="flex-wrap: nowrap !important;" >
<ng-container *ngFor="let tab of tabs.toArray(); let i=index">
<ng-container *ngIf="!tab.customClass">
<li [ngClass]="tab.customClass" (click)="selectTab(tab)" >
<ul class="uk-tab">
<li [class.uk-active]="tab.active" [class.uk-disabled]="tab.disabled">
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
[ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>
<div>{{tab.title}}</div>
<div *ngIf="tab.num && !tab.disabled" class="">({{tab.num | number}})</div>
<div *ngIf="tab.disabled" class="">(-)</div>
</a>
</li>
</ul>
</li>
</ng-container>
</ng-container>
</ul>
</div>
<div class="">
<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>
<ng-container *ngFor="let tab of tabs.toArray(); let i=index">
<ng-container *ngIf="tab.customClass">
<div class="uk-width-small">
<ul class="uk-tab uk-height-1-1" [class.uk-flex-right]="tab.tabId == 'statistics'">
<li [ngClass]="tab.customClass" (click)="selectTab(tab)" [class.uk-active]="tab.active" >
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center featuredTab" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
<!--<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
[ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>-->
<span *ngIf="tab.tabId=='statistics'" class="material-icons">bar_chart</span>
<div>{{tab.title}}</div>
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
</a>
</li>
</ul>
</div>
</ng-container>
</ng-container>
</div>
`
})
export class TabsComponent implements AfterContentInit {
public customClass: string;
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
@Input() offsetForSticky:number=0;
@Input() isSticky:boolean;
@Output() isStickyChange :EventEmitter<boolean> = new EventEmitter();
public selected: string;
disableScroll = false;
@HostListener("window:scroll", [])
onWindowScroll() {
this.scroll();
}
ngAfterContentInit() {
if(this.tabs.length > 0) {
this.selected = this.tabs.get(0).tabId;
}
}
selectTab(tab: TabComponent, scroll=true){
this.unSelectTab(this.selected, tab.tabId);
tab.active = true;
this.selected = tab.tabId;
this.selectedActiveTab.emit(tab.tabId);
if(scroll) {
this.disableScroll = true;
setTimeout(() => {
window.scrollTo({
top: document.getElementById(tab.tabId) ? document.getElementById(tab.tabId).offsetTop - (this.isSticky?250:180) : 250,
behavior: 'smooth'
});
setTimeout(() => {
this.disableScroll = false;
}, 600);
}, 200);
}
}
scroll(){
let tabDistanceFromCurrentViewTop = document.getElementById("main-tabs-div") ? document.getElementById("main-tabs-div").getBoundingClientRect().top : null;
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
if((tabDistanceFromCurrentViewTop <= this.offsetForSticky)){
this.isStickyChange.emit(true);
this.isSticky =true;
[Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in <modal-alert>. 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for <addThis> (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in <modal-alert> and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component <results-and-pages> for results and pages number and set uk-flex-right in <paging-no-load> (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in <modal-alert>. 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb);
2022-04-20 16:40:18 +02:00
}else if(!(tabDistanceFromCurrentViewTop <= this.offsetForSticky)){
this.isStickyChange.emit(false);
this.isSticky =false;
}
if(this.disableScroll){
return;
}
// console.log(window.scrollY)
let currentTabView = null;
let windowInnerHeight = window && window.innerHeight ? window.innerHeight : 300;
// console.log("find CT", windowInnerHeight)
for (let tab of this.tabs) {
let distanceFromCurrentViewTop = document.getElementById(tab.tabId) ? document.getElementById(tab.tabId).getBoundingClientRect().top : null;
// console.log(pos, distanceFromCurrentViewTop, windowInnerHeight/2);
if (distanceFromCurrentViewTop != null && distanceFromCurrentViewTop <= windowInnerHeight / 2) {
currentTabView = tab;
} else if (distanceFromCurrentViewTop != null && distanceFromCurrentViewTop > windowInnerHeight) {
break;
}
}
// console.log("current currentTabView", currentTabView.tabId)
if (currentTabView && this.selected != currentTabView.tabId) {
this.selectTab(currentTabView, false);
this.disableScroll =true;
setTimeout(() => {
this.disableScroll = false;
}, 600);
}
}
unSelectTab(oldTabId, newTabId){
for (let tab of this.tabs) {
if(tab.tabId == oldTabId){
tab.active = false;
break;
}
}
this.selected = newTabId;
}
}