| 1 |
|
import {Component, Input} from '@angular/core';
|
|
1 |
import {Component, ElementRef, HostListener, Input, ViewChild} from '@angular/core';
|
| 2 |
2 |
import {ActivatedRoute, Router} from '@angular/router';
|
| 3 |
3 |
import {Title, Meta} from '@angular/platform-browser';
|
| 4 |
4 |
|
| 5 |
5 |
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
|
| 6 |
6 |
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
|
|
7 |
import {AppElementService} from "../appElementService.service";
|
| 7 |
8 |
|
| 8 |
9 |
declare var UIkit: any;
|
| 9 |
10 |
|
| ... | ... | |
| 20 |
21 |
<h3 class="uk-margin-remove-bottom uk-margin-large-top">Discover the power of OpenAIRE Connect community page builder</h3>
|
| 21 |
22 |
<h5 class="uk-margin-remove-top">Gather all your research in one place</h5>
|
| 22 |
23 |
|
| 23 |
|
<div class="uk-width-medium uk-text-center uk-margin-large-top uk-margin-large-left">
|
| 24 |
|
<h5>Contact OpenAIRE team, in order to create your community page</h5>
|
| 25 |
|
<div>
|
| 26 |
|
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact"> CONTACT US</a>
|
| 27 |
|
</div>
|
|
24 |
<!-- <div class="uk-width-medium uk-text-center uk-margin-large-top uk-margin-large-left">-->
|
|
25 |
<!-- <h5>Contact OpenAIRE team, in order to create your community page</h5>-->
|
|
26 |
<!-- <div>-->
|
|
27 |
<!-- <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact"> CONTACT US</a>-->
|
|
28 |
<!-- </div>-->
|
|
29 |
<!-- </div>-->
|
|
30 |
|
|
31 |
<div class="uk-width-1-2 uk-inline uk-margin-large-top uk-margin-large-bottom">
|
|
32 |
<div class="uk-position-center ">
|
|
33 |
<div class="uk-width-medium uk-text-center">
|
|
34 |
<h5>Contact OpenAIRE team, in order to create your community page</h5>
|
|
35 |
<div>
|
|
36 |
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact"> CONTACT US</a>
|
|
37 |
</div>
|
|
38 |
</div>
|
|
39 |
</div>
|
|
40 |
<br>
|
| 28 |
41 |
</div>
|
| 29 |
42 |
</div>
|
| 30 |
43 |
</div>
|
| ... | ... | |
| 34 |
47 |
|
| 35 |
48 |
<div>
|
| 36 |
49 |
<div>
|
| 37 |
|
<div class="uk-margin-bottom uk-margin-top">
|
|
50 |
<div #adminPortalImage class="uk-margin-bottom uk-margin-top">
|
| 38 |
51 |
<!--div uk-scrollspy="cls: uk-animation-fade uk-animation-reverse; target: > div > div > .uk-card; delay: 1000; repeat: false"-->
|
| 39 |
52 |
<div class="uk-container uk-margin-large-top">
|
| 40 |
53 |
<h3>OpenAIRE Connect community page builder at a glance</h3>
|
| 41 |
|
<div class="uk-inline uk-dark">
|
|
54 |
<div class="uk-inline uk-dark" (scroll)="scrollHandler($event)">
|
| 42 |
55 |
<img src="assets/admin-portal.png" alt="OpenAIRE" >
|
| 43 |
56 |
|
| 44 |
57 |
<div id="logo" class="my-tooltip uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
| 45 |
|
style="left: 27%; top: 2%">
|
|
58 |
style="left: 27%; top: 2%" hidden>
|
| 46 |
59 |
<div class="uk-padding-small uk-text-small uk-text-bold">Your logo goes here</div>
|
| 47 |
60 |
</div>
|
| 48 |
61 |
|
| 49 |
|
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
| 50 |
|
style="left: 33%; top: 21%">
|
|
62 |
<div id="configure-profile" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
|
63 |
style="left: 33%; top: 21%" hidden>
|
| 51 |
64 |
<div class="uk-padding-small uk-text-small uk-text-bold">Configure your community profile</div>
|
| 52 |
65 |
</div>
|
| 53 |
|
<div class="my-tooltip uk-width-1-5 uk-card uk-text-center uk-card-secondary uk-position-absolute uk-transform-center"
|
| 54 |
|
style="left: 56%; top: 18%">
|
|
66 |
<div id="connect-with" class="my-tooltip uk-width-1-5 uk-card uk-text-center uk-card-secondary uk-position-absolute uk-transform-center"
|
|
67 |
style="left: 56%; top: 18%" hidden>
|
| 55 |
68 |
<div class="uk-padding-small uk-text-small uk-text-bold">Connect with subjects, projects, content providers & Zenodo communities</div>
|
| 56 |
69 |
</div>
|
| 57 |
|
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
| 58 |
|
style="left: 80%; top: 19%">
|
|
70 |
<div id="choose-statistics" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
|
71 |
style="left: 80%; top: 19%" hidden>
|
| 59 |
72 |
<div class="uk-padding-small uk-text-small uk-text-bold">Choose statistics and charts to be publicly available</div>
|
| 60 |
73 |
</div>
|
| 61 |
74 |
|
| 62 |
|
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
| 63 |
|
style="left: 32%; top: 60%">
|
|
75 |
<div id="curate" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
|
76 |
style="left: 32%; top: 60%" hidden>
|
| 64 |
77 |
<div class="uk-padding-small uk-text-small uk-text-bold">Curate links of research results</div>
|
| 65 |
78 |
</div>
|
| 66 |
|
<div class="my-tooltip uk-width-1-5 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
| 67 |
|
style="left: 56%; top: 59%">
|
|
79 |
<div id="help-texts" class="my-tooltip uk-width-1-5 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
|
80 |
style="left: 56%; top: 59%" hidden>
|
| 68 |
81 |
<div class="uk-padding-small uk-text-small uk-text-bold">Add help texts in your pages for extra information</div>
|
| 69 |
82 |
</div>
|
| 70 |
|
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
| 71 |
|
style="left: 80%; top: 60%">
|
|
83 |
<div id="invite" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
|
84 |
style="left: 80%; top: 60%" hidden>
|
| 72 |
85 |
<div class="uk-padding-small uk-text-small uk-text-bold">Invite collaborators and users</div>
|
| 73 |
86 |
</div>
|
| 74 |
87 |
|
| ... | ... | |
| 116 |
129 |
|
| 117 |
130 |
</div>
|
| 118 |
131 |
</div>
|
|
132 |
</div>
|
|
133 |
|
|
134 |
<div #communityImage class="uk-container uk-margin-large-top">
|
|
135 |
<h3>Community page</h3>
|
|
136 |
<div uk-grid uk-grid-match>
|
|
137 |
<div class="uk-width-1-3 uk-card">
|
|
138 |
<div class="uk-text-center uk-position-center ">
|
|
139 |
<p>Contact OpenAIRE team, in order to create your community page</p>
|
|
140 |
<div>
|
|
141 |
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact"> CONTACT US</a>
|
|
142 |
</div>
|
|
143 |
</div>
|
| 119 |
144 |
</div>
|
|
145 |
<div class="uk-width-2-3 uk-text-center">
|
|
146 |
<div class="uk-inline uk-dark">
|
|
147 |
<img src="assets/community-first-page.jpg" alt="OpenAIRE">
|
| 120 |
148 |
|
| 121 |
|
<div class="uk-container uk-margin-large-top">
|
| 122 |
|
<h3>Community page</h3>
|
| 123 |
|
<div uk-grid uk-grid-match>
|
| 124 |
|
<div class="uk-width-1-3 uk-card">
|
| 125 |
|
<div class="uk-text-center uk-position-center ">
|
| 126 |
|
<p>Contact OpenAIRE team, in order to create your community page</p>
|
| 127 |
|
<div>
|
| 128 |
|
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact"> CONTACT US</a>
|
| 129 |
|
</div>
|
| 130 |
|
</div>
|
|
149 |
<div id="community-content" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
|
150 |
style="left: 80%; top: 31%" hidden>
|
|
151 |
<div class="uk-padding-small uk-text-small uk-text-bold">Community content at a glance</div>
|
| 131 |
152 |
</div>
|
| 132 |
|
<div class="uk-width-2-3 uk-text-center">
|
| 133 |
|
<div class="uk-inline uk-dark">
|
| 134 |
|
<img src="assets/community-first-page.jpg" alt="OpenAIRE">
|
|
153 |
<div id="locate-research-results" class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
|
154 |
style="left: 57%; top: 38%" hidden>
|
|
155 |
<div class="uk-padding-small uk-text-small uk-text-bold">Locate Research Results</div>
|
|
156 |
</div>
|
|
157 |
<div id="recent-research-results" class="my-tooltip uk-width-1-4 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
|
158 |
style="left: 48%; top: 58%" hidden>
|
|
159 |
<div class="uk-padding-small uk-text-small uk-text-bold">Recent research results and related graphs</div>
|
|
160 |
</div>
|
| 135 |
161 |
|
| 136 |
|
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
| 137 |
|
style="left: 80%; top: 31%">
|
| 138 |
|
<div class="uk-padding-small uk-text-small uk-text-bold">Community content at a glance</div>
|
| 139 |
|
</div>
|
| 140 |
|
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
| 141 |
|
style="left: 57%; top: 38%">
|
| 142 |
|
<div class="uk-padding-small uk-text-small uk-text-bold">Locate Research Results</div>
|
| 143 |
|
</div>
|
| 144 |
|
<div class="my-tooltip uk-width-1-4 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
| 145 |
|
style="left: 48%; top: 58%">
|
| 146 |
|
<div class="uk-padding-small uk-text-small uk-text-bold">Recent research results and related graphs</div>
|
| 147 |
|
</div>
|
| 148 |
|
|
| 149 |
|
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Community content at a glance')"-->
|
| 150 |
|
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
| 151 |
|
style="right: 6%; top: 28%" uk-marker>
|
| 152 |
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
| 153 |
|
</a>
|
| 154 |
|
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Locate Research Results')"-->
|
| 155 |
|
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
| 156 |
|
style="left: 45%; top: 40%" uk-marker>
|
| 157 |
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
| 158 |
|
</a>
|
| 159 |
|
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Recent research results and related graphs')"-->
|
| 160 |
|
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
| 161 |
|
style="left: 35%; top: 55%" uk-marker>
|
| 162 |
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
| 163 |
|
</a>
|
| 164 |
|
</div>
|
| 165 |
|
</div>
|
|
162 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Community content at a glance')"-->
|
|
163 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
164 |
style="right: 6%; top: 28%" uk-marker>
|
|
165 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
|
166 |
</a>
|
|
167 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Locate Research Results')"-->
|
|
168 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
169 |
style="left: 45%; top: 40%" uk-marker>
|
|
170 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
|
171 |
</a>
|
|
172 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Recent research results and related graphs')"-->
|
|
173 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
174 |
style="left: 35%; top: 55%" uk-marker>
|
|
175 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
|
176 |
</a>
|
| 166 |
177 |
</div>
|
| 167 |
178 |
</div>
|
|
179 |
</div>
|
| 168 |
180 |
</div>
|
|
181 |
</div>
|
| 169 |
182 |
<!--/div-->
|
| 170 |
183 |
</div>
|
| 171 |
184 |
|
|
185 |
<!--<div class="uk-container">-->
|
|
186 |
<!-- <a class="configure-profile uk-icon uk-marker"-->
|
|
187 |
<!-- uk-marker-->
|
|
188 |
<!-- uk-tooltip="title: AAAAAAA 1">-->
|
|
189 |
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>-->
|
|
190 |
<!-- </a>-->
|
|
191 |
<!-- <a class="connect-with uk-icon uk-marker"-->
|
|
192 |
<!-- uk-marker-->
|
|
193 |
<!-- uk-tooltip="title: AAAAAAA 2">-->
|
|
194 |
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>-->
|
|
195 |
<!-- </a>-->
|
|
196 |
<!-- <a class="choose-statistics uk-icon uk-marker"-->
|
|
197 |
<!-- uk-marker-->
|
|
198 |
<!-- uk-tooltip="title: AAAAAAA 3">-->
|
|
199 |
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>-->
|
|
200 |
<!-- </a>-->
|
|
201 |
|
|
202 |
<!-- <button (click)="openTooltips()">OPEN TOOLTIPS</button>-->
|
|
203 |
|
|
204 |
|
|
205 |
<!-- <button type="button" uk-toggle="target: #my-id1; mode: hover; animation: uk-animation-fade">test tooltip</button>-->
|
|
206 |
<!-- <p id="my-id1" class="test-tooltip">TEST tooltip1</p>-->
|
|
207 |
|
|
208 |
<!-- <button (scroll)="scrollHandler($event)" type="button" uk-toggle="target: #my-id2; mode: hover; animation: uk-animation-fade">test tooltip</button>-->
|
|
209 |
<!-- <p id="my-id2" class="test-tooltip" [attr.hidden]="hidden ? 'hidden' : null">TEST tooltip2</p>-->
|
|
210 |
|
|
211 |
<!-- <button type="button" uk-toggle="target: #my-id3; mode: hover; animation: uk-animation-fade">test tooltip</button>-->
|
|
212 |
<!-- <p id="my-id3"class="test-tooltip">TEST tooltip3</p>-->
|
|
213 |
<!--</div>-->
|
|
214 |
|
| 172 |
215 |
<div class="uk-section-muted uk-margin-large-top">
|
| 173 |
216 |
<div class="uk-container uk-container-large">
|
| 174 |
217 |
<div class="uk-margin-large-top uk-margin-large-bottom">
|
| ... | ... | |
| 213 |
256 |
</div>
|
| 214 |
257 |
</div>
|
| 215 |
258 |
</div>
|
| 216 |
|
|
|
259 |
</div>
|
| 217 |
260 |
`
|
| 218 |
261 |
})
|
| 219 |
262 |
|
| ... | ... | |
| 222 |
265 |
|
| 223 |
266 |
public pageTitle = "OpenAIRE"
|
| 224 |
267 |
|
|
268 |
public admin_portal_image_hidden: boolean = true;
|
|
269 |
@ViewChild('adminPortalImage') admin_portal_image: ElementRef;
|
|
270 |
|
|
271 |
public community_image_hidden: boolean = true;
|
|
272 |
@ViewChild('communityImage') community_image: ElementRef;
|
|
273 |
|
| 225 |
274 |
properties:EnvProperties;
|
| 226 |
275 |
|
| 227 |
276 |
constructor (
|
| 228 |
277 |
private route: ActivatedRoute,
|
| 229 |
278 |
private _router: Router,
|
| 230 |
279 |
private _title: Title,
|
| 231 |
|
private _piwikService:PiwikService) {
|
|
280 |
private _piwikService:PiwikService,
|
|
281 |
private appElementsService: AppElementService) {
|
| 232 |
282 |
|
| 233 |
283 |
var description = "OpenAIRE - Connect, Community Dashboard, research community";
|
| 234 |
284 |
var title = "OpenAIRE - Connect | Create and manage your community page";
|
| ... | ... | |
| 249 |
299 |
});
|
| 250 |
300 |
}
|
| 251 |
301 |
|
|
302 |
/*
|
|
303 |
public openTooltips() {
|
|
304 |
console.debug("open these tooltips!");
|
|
305 |
UIkit.tooltip('.configure-profile').show();
|
|
306 |
UIkit.tooltip('.connect-with').show();
|
|
307 |
UIkit.tooltip('.choose-statistics').show();
|
|
308 |
}
|
|
309 |
*/
|
|
310 |
|
|
311 |
|
| 252 |
312 |
public ngAfterViewInit() {
|
| 253 |
|
if (document !== undefined) {
|
| 254 |
|
if (document.getElementById('enableFadeOutScrollScript')) {
|
| 255 |
|
document.getElementById('enableFadeOutScrollScript').remove();
|
| 256 |
|
}
|
|
313 |
if (document !== undefined) {
|
|
314 |
/*
|
|
315 |
if (document.getElementById('enableFadeOutScrollScript')) {
|
|
316 |
document.getElementById('enableFadeOutScrollScript').remove();
|
|
317 |
}
|
| 257 |
318 |
|
| 258 |
|
const enableFadeOutScrollScript = document.createElement('script');
|
| 259 |
|
enableFadeOutScrollScript.setAttribute('id', 'enableFadeOutScrollScript');
|
| 260 |
|
enableFadeOutScrollScript.innerHTML = '\n' +
|
| 261 |
|
'$(document).ready(function() {\n' +
|
| 262 |
|
'\n' +
|
| 263 |
|
' $(window).scroll( function(){\n' +
|
| 264 |
|
'\n' +
|
| 265 |
|
' $(\'.my-tooltip\').each( function(i){\n' +
|
| 266 |
|
'\n' +
|
| 267 |
|
' var bottom_of_object = $(this).position().top + $(this).outerHeight();\n' +
|
| 268 |
|
' var bottom_of_window = $(window).scrollTop() + $(window).height();\n' +
|
| 269 |
|
'\n' +
|
| 270 |
|
' if( bottom_of_window > bottom_of_object ){\n' +
|
| 271 |
|
'\n' +
|
| 272 |
|
' $(this).animate({\'opacity\':\'1\'},1500);\n' +
|
| 273 |
|
'\n' +
|
| 274 |
|
' }\n' +
|
| 275 |
|
'\n' +
|
| 276 |
|
' });\n' +
|
| 277 |
|
'\n' +
|
| 278 |
|
' });\n' +
|
| 279 |
|
'\n' +
|
| 280 |
|
' });';
|
|
319 |
const enableFadeOutScrollScript = document.createElement('script');
|
|
320 |
enableFadeOutScrollScript.setAttribute('id', 'enableFadeOutScrollScript');
|
|
321 |
enableFadeOutScrollScript.innerHTML = '\n' +
|
|
322 |
'$(document).ready(function() {\n' +
|
|
323 |
'\n' +
|
|
324 |
' $(window).scroll( function(){\n' +
|
|
325 |
'\n' +
|
|
326 |
' $(\'.my-tooltip\').each( function(i){\n' +
|
|
327 |
'\n' +
|
|
328 |
' var bottom_of_object = $(this).position().top + $(this).outerHeight();\n' +
|
|
329 |
' var bottom_of_window = $(window).scrollTop() + $(window).height();\n' +
|
|
330 |
'\n' +
|
|
331 |
' if( bottom_of_window > bottom_of_object ){\n' +
|
|
332 |
'\n' +
|
|
333 |
' $(this).animate({\'opacity\':\'1\'},1500);\n' +
|
|
334 |
//'\n' + 'this.hidden = true;' +
|
|
335 |
'\n' +
|
|
336 |
' }\n' +
|
|
337 |
'\n' +
|
|
338 |
' });\n' +
|
|
339 |
'\n' +
|
|
340 |
' });\n' +
|
|
341 |
'\n' +
|
|
342 |
' });';
|
| 281 |
343 |
|
| 282 |
|
document.body.appendChild(enableFadeOutScrollScript);
|
| 283 |
|
}
|
|
344 |
document.body.appendChild(enableFadeOutScrollScript);
|
|
345 |
*/
|
|
346 |
/*UIkit.util.on('#logo', 'beforehide', function () {
|
|
347 |
// do something
|
|
348 |
if(this.hide == false) {
|
|
349 |
return false;
|
|
350 |
}
|
|
351 |
});*/
|
|
352 |
}
|
| 284 |
353 |
}
|
| 285 |
354 |
|
|
355 |
|
|
356 |
|
|
357 |
@HostListener('window:scroll', ['$event'])
|
|
358 |
scrollHandler(event) {
|
|
359 |
let offsetHeight = document.getElementById('stickyNavbar').offsetHeight;
|
|
360 |
let scrollPosition = window.pageYOffset;
|
|
361 |
|
|
362 |
let admin_portal_image_idsToToggle: string[] = ['#logo', '#configure-profile', '#choose-statistics', '#connect-with', '#curate', '#help-texts', '#invite'];
|
|
363 |
let adminPortalImageHeight = this.admin_portal_image.nativeElement.offsetHeight;
|
|
364 |
let adminPortalImagePosition = this.admin_portal_image.nativeElement.offsetTop - offsetHeight;
|
|
365 |
|
|
366 |
if(!this.admin_portal_image_hidden
|
|
367 |
&& ((scrollPosition >= 0.7*adminPortalImagePosition+adminPortalImageHeight) || scrollPosition < 0.7*adminPortalImagePosition)) {
|
|
368 |
this.admin_portal_image_hidden = true;
|
|
369 |
admin_portal_image_idsToToggle.forEach((id: string) => {
|
|
370 |
UIkit.toggle(id, {
|
|
371 |
animation: 'uk-animation-fade uk-animation-reverse',
|
|
372 |
duration: 1500
|
|
373 |
}).toggle();
|
|
374 |
});
|
|
375 |
} else if (this.admin_portal_image_hidden && (scrollPosition >= 0.7*adminPortalImagePosition)) {
|
|
376 |
this.admin_portal_image_hidden = false;
|
|
377 |
admin_portal_image_idsToToggle.forEach((id: string) => {
|
|
378 |
UIkit.toggle(id, {
|
|
379 |
animation: 'uk-animation-fade',
|
|
380 |
duration: 1500
|
|
381 |
}).toggle();
|
|
382 |
});
|
|
383 |
}
|
|
384 |
|
|
385 |
let community_image_idsToToggle: string[] = ['#community-content', '#locate-research-results', '#recent-research-results'];
|
|
386 |
let communityImageHeight = this.community_image.nativeElement.offsetHeight;
|
|
387 |
let communityImagePosition = this.community_image.nativeElement.offsetTop - offsetHeight;
|
|
388 |
|
|
389 |
if(!this.community_image_hidden
|
|
390 |
&& ((scrollPosition >= 0.9*communityImagePosition+communityImageHeight) || scrollPosition < 0.9*communityImagePosition)) {
|
|
391 |
this.community_image_hidden = true;
|
|
392 |
community_image_idsToToggle.forEach((id: string) => {
|
|
393 |
UIkit.toggle(id, {
|
|
394 |
animation: 'uk-animation-fade uk-animation-reverse',
|
|
395 |
duration: 1500
|
|
396 |
}).toggle();
|
|
397 |
});
|
|
398 |
} else if (this.community_image_hidden && (scrollPosition >= 0.9*communityImagePosition)) {
|
|
399 |
this.community_image_hidden = false;
|
|
400 |
community_image_idsToToggle.forEach((id: string) => {
|
|
401 |
UIkit.toggle(id, {
|
|
402 |
animation: 'uk-animation-fade',
|
|
403 |
duration: 1500
|
|
404 |
}).toggle();
|
|
405 |
});
|
|
406 |
}
|
|
407 |
}
|
|
408 |
|
| 286 |
409 |
public ngOnDestroy() {
|
| 287 |
410 |
if(this.piwiksub){
|
| 288 |
411 |
this.piwiksub.unsubscribe();
|
Added by Konstantina Galouni about 5 years ago
[Trunk|Connect]:
1. community/community.component.html: rephrase in subjects 'show more' to 'show all'
2. community-creation-instructions.component: Open and close instructions in pages according to scrolling position.