From 9630d27fe8d906ed7532e86c3d238751340d57f2 Mon Sep 17 00:00:00 2001 From: argirok Date: Wed, 6 Apr 2022 17:01:25 +0300 Subject: [PATCH 1/2] Tabs as slider, scroll effect apply changes for content providers --- .../dataProvider/dataProvider.component.html | 588 ++++++++---------- .../dataProvider/dataProvider.component.ts | 3 +- utils/tabs/tab.component.ts | 2 + utils/tabs/tabs.component.ts | 139 ++++- 4 files changed, 386 insertions(+), 346 deletions(-) diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html index e41c4993..24ae400b 100644 --- a/landingPages/dataProvider/dataProvider.component.html +++ b/landingPages/dataProvider/dataProvider.component.html @@ -89,125 +89,172 @@
-
- -
-
- -
-
Description
-
- {{dataProviderInfo.description.substring(0, showNumDescription)}} - + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+ +
+
Description
+
+ {{dataProviderInfo.description.substring(0, showNumDescription)}} + ... -
-
- - Read more - -
-
- - Read less - -
+
+ + Read more + +
+
+ + Read less + +
+
-
    - -
+
    + +
-
+
Collected full-texts: {{dataProviderInfo.aggregationStatus.fulltexts | number}} - + Results with funding information: - {{dataProviderInfo.fundedContent | number}} + {{dataProviderInfo.fundedContent | number}} - - - - - -
- + + + + + +
+ -
- Countries: - {{dataProviderInfo.countries.join(", ")}} -
+
+ Countries: + {{dataProviderInfo.countries.join(", ")}} +
- -
-
-
Subjects
- + +
+
+
Subjects
+ {{subject}} , - ... -
-
- - View all {{dataProviderInfo.subjects.length | number}} subjects - -
-
- View less subjects -
+ ... +
+
+ + View all {{dataProviderInfo.subjects.length | number}} subjects + +
+
+ View less subjects
+
-
-
- -
- Detailed information @ - - OpenDOAR - - -
- +
+
+ +
+ Detailed information @ + + OpenDOAR + + +
+ Detailed information @ re3data.org -
- - - -
-
- Organizations: - +
+ + + +
+
+ Organizations: + @@ -221,255 +268,142 @@ , - ... -
-
- - View all {{dataProviderInfo.organizations.length | number}} organizations - -
-
- View less organizations -
+ ...
-
-
-
- - -
-
- - -
- -
- - -
-
- - -
- -
- - -
-
- - +
+
- - -
-
- - -
- +
+
+ + +
+
+ +
- - -
-
- - -
- + +
+ + + +
+
+ +
- - -
-
- - -
- + +
+ + + +
+
+ +
- - -
-
- - -
- +
+ + + +
+
+ +
- - -
-
-
--> +
+ + + +
+
+ + +
+ +
+ + + +
+
+ + +
+ +
+ + + +
+
+ + +
+ +
+ + + + +
+ + [type]="'statistics'" tab_error_class=true> -
- - -
+ +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + diff --git a/landingPages/dataProvider/dataProvider.component.ts b/landingPages/dataProvider/dataProvider.component.ts index 4a7c9112..0c24acf1 100644 --- a/landingPages/dataProvider/dataProvider.component.ts +++ b/landingPages/dataProvider/dataProvider.component.ts @@ -26,6 +26,7 @@ import {ResultPreview} from "../../utils/result-preview/result-preview"; import {IndexInfoService} from "../../utils/indexInfo.service"; import {properties} from "../../../../environments/environment"; import {Subscriber} from "rxjs"; +import {TabComponent} from "../../utils/tabs/tab.component"; @Component({ @@ -596,7 +597,7 @@ export class DataProviderComponent { } public onSelectActiveTab(activeTabId) { - if (this.activeTab != "activaTabId") { // tab really changed + if (this.activeTab != activeTabId) { // tab really changed if (activeTabId == 'summary') { this.activeTab = 'summary'; } else if (activeTabId == 'publications') { diff --git a/utils/tabs/tab.component.ts b/utils/tabs/tab.component.ts index 36920025..aa2f6981 100644 --- a/utils/tabs/tab.component.ts +++ b/utils/tabs/tab.component.ts @@ -27,4 +27,6 @@ export class TabComponent { @Input('customClass') customClass:string = ""; @Input('tabId') tabId: string; @Input('tabIcon') tabIcon: TabIcon; + @Input ('active') active: boolean = false; + // @Input ('loaded') loaded: boolean = false; } diff --git a/utils/tabs/tabs.component.ts b/utils/tabs/tabs.component.ts index e0512329..9e735926 100644 --- a/utils/tabs/tabs.component.ts +++ b/utils/tabs/tabs.component.ts @@ -2,43 +2,146 @@ * The main component that renders single TabComponent * instances. */ -import {AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core'; +import { + AfterContentInit, + Component, + ContentChildren, + EventEmitter, + HostListener, + Output, + QueryList, +} from '@angular/core'; import {TabComponent} from './tab.component'; @Component({ selector: 'my-tabs', - template: ` - -
- + template: ` +
+ +
+
+
+
+ +
+ +
+ + +
+
+
+
+
+ +
+ ` }) export class TabsComponent implements AfterContentInit { - @Input() + public customClass: string; @ContentChildren(TabComponent) tabs: QueryList; @Output() public selectedActiveTab: EventEmitter = 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){ + selectTab(tab: TabComponent, scroll=true){ + console.log("Select tab ",tab.tabId); + 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 - 180 : 250, + behavior: 'smooth' + }); + setTimeout(() => { + this.disableScroll = false; + }, 600); + console.log(window.scrollY, tab.tabId, document.getElementById(tab.tabId)) + }, 200); + } + } + scroll(){ + 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; } } From 44bb9772a9c2947f6c62e70b197c0f22f7edbba7 Mon Sep 17 00:00:00 2001 From: argirok Date: Wed, 6 Apr 2022 18:02:15 +0300 Subject: [PATCH 2/2] tabs: add disabled tab, Content providers add check for other > 0 --- .../dataProvider/dataProvider.component.html | 2 +- utils/tabs/tab.component.ts | 2 +- utils/tabs/tabs.component.ts | 23 ++++++++++--------- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html index 24ae400b..c45c31a5 100644 --- a/landingPages/dataProvider/dataProvider.component.html +++ b/landingPages/dataProvider/dataProvider.component.html @@ -122,7 +122,7 @@ [tabTitle]="'Software'" [tabNumber]="fetchSoftware.searchUtils.totalResults" [tabId]="'software'"> - diff --git a/utils/tabs/tab.component.ts b/utils/tabs/tab.component.ts index aa2f6981..453a795e 100644 --- a/utils/tabs/tab.component.ts +++ b/utils/tabs/tab.component.ts @@ -28,5 +28,5 @@ export class TabComponent { @Input('tabId') tabId: string; @Input('tabIcon') tabIcon: TabIcon; @Input ('active') active: boolean = false; - // @Input ('loaded') loaded: boolean = false; + @Input ('disabled') disabled: boolean = false; } diff --git a/utils/tabs/tabs.component.ts b/utils/tabs/tabs.component.ts index 9e735926..489648b2 100644 --- a/utils/tabs/tabs.component.ts +++ b/utils/tabs/tabs.component.ts @@ -27,12 +27,13 @@ import {TabComponent} from './tab.component';
  • @@ -50,22 +51,22 @@ import {TabComponent} from './tab.component';
    • -
    - +
    +     +
    `