import {Component, ElementRef, HostListener, Input, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Title, Meta} from '@angular/platform-browser'; import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service'; import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties'; declare var UIkit: any; @Component({ selector: 'community-creation-instructions', template: `

Discover the power of OpenAIRE Connect community page builder

Gather all your research in one place
Contact OpenAIRE team, in order to create your community page

OpenAIRE Connect community page builder at a glance

OpenAIRE

Community page

Contact OpenAIRE team, in order to create your community page

OpenAIRE

Why trust OpenAIRE?

It is the Open Access Infrastructure for Europe.

It is community based and independent.

Provides organizational and technical framework to support OpenScience.

Provides access to over 25 million research outputs and services that enable their access, link and reuse.

Provides organizational and technical framework to support OpenScience.

Ensures that all data come from trusted sources.

` }) export class CommunityCreationInstructionsComponent { public piwiksub: any; public pageTitle = "OpenAIRE" public admin_portal_image_hidden: boolean = true; @ViewChild('adminPortalImage') admin_portal_image: ElementRef; public community_image_hidden: boolean = true; @ViewChild('communityImage') community_image: ElementRef; properties:EnvProperties; constructor ( private route: ActivatedRoute, private _router: Router, private _title: Title, private _piwikService:PiwikService) { var description = "OpenAIRE - Connect, Community Dashboard, research community"; var title = "OpenAIRE - Connect | Create and manage your community page"; this._title.setTitle(title); } public ngOnInit() { this.route.data .subscribe((data: { envSpecific: EnvProperties }) => { this.properties = data.envSpecific; var url = data.envSpecific.baseLink+this._router.url; if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){ this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect | Create and manage your community page", this.properties.piwikSiteId).subscribe(); } //UIkit.tooltip('.configure-profile').show(); }); } /* public openTooltips() { console.debug("open these tooltips!"); UIkit.tooltip('.configure-profile').show(); UIkit.tooltip('.connect-with').show(); UIkit.tooltip('.choose-statistics').show(); } */ public ngAfterViewInit() { /* if (typeof document !== 'undefined') { if (document.getElementById('enableFadeOutScrollScript')) { document.getElementById('enableFadeOutScrollScript').remove(); } const enableFadeOutScrollScript = document.createElement('script'); enableFadeOutScrollScript.setAttribute('id', 'enableFadeOutScrollScript'); enableFadeOutScrollScript.innerHTML = '\n' + '$(document).ready(function() {\n' + '\n' + ' $(window).scroll( function(){\n' + '\n' + ' $(\'.my-tooltip\').each( function(i){\n' + '\n' + ' var bottom_of_object = $(this).position().top + $(this).outerHeight();\n' + ' var bottom_of_window = $(window).scrollTop() + $(window).height();\n' + '\n' + ' if( bottom_of_window > bottom_of_object ){\n' + '\n' + ' $(this).animate({\'opacity\':\'1\'},1500);\n' + //'\n' + 'this.hidden = true;' + '\n' + ' }\n' + '\n' + ' });\n' + '\n' + ' });\n' + '\n' + ' });'; document.body.appendChild(enableFadeOutScrollScript); */ /*UIkit.util.on('#logo', 'beforehide', function () { // do something if(this.hide =http://www.equp4.wf/= false) { return false; } }); }*/ } @HostListener('window:scroll', ['$event']) scrollHandler(event) { let offsetHeight = document.getElementById('stickyNavbar').offsetHeight; let scrollPosition = window.pageYOffset; let admin_portal_image_idsToToggle: string[] = ['#logo', '#configure-profile', '#choose-statistics', '#connect-with', '#curate', '#help-texts', '#invite']; let adminPortalImageHeight = this.admin_portal_image.nativeElement.offsetHeight; let adminPortalImagePosition = this.admin_portal_image.nativeElement.offsetTop - offsetHeight; if(!this.admin_portal_image_hidden && ((scrollPosition >= 0.7*adminPortalImagePosition+adminPortalImageHeight) || scrollPosition < 0.7*adminPortalImagePosition)) { this.admin_portal_image_hidden = true; admin_portal_image_idsToToggle.forEach((id: string) => { UIkit.toggle(id, { animation: 'uk-animation-fade uk-animation-reverse', duration: 1500 }).toggle(); }); } else if (this.admin_portal_image_hidden && (scrollPosition >= 0.7*adminPortalImagePosition)) { this.admin_portal_image_hidden = false; admin_portal_image_idsToToggle.forEach((id: string) => { UIkit.toggle(id, { animation: 'uk-animation-fade', duration: 1500 }).toggle(); }); } let community_image_idsToToggle: string[] = ['#community-content', '#locate-research-results', '#recent-research-results']; let communityImageHeight = this.community_image.nativeElement.offsetHeight; let communityImagePosition = this.community_image.nativeElement.offsetTop - offsetHeight; if(!this.community_image_hidden && ((scrollPosition >= 0.9*communityImagePosition+communityImageHeight) || scrollPosition < 0.9*communityImagePosition)) { this.community_image_hidden = true; community_image_idsToToggle.forEach((id: string) => { UIkit.toggle(id, { animation: 'uk-animation-fade uk-animation-reverse', duration: 1500 }).toggle(); }); } else if (this.community_image_hidden && (scrollPosition >= 0.9*communityImagePosition)) { this.community_image_hidden = false; community_image_idsToToggle.forEach((id: string) => { UIkit.toggle(id, { animation: 'uk-animation-fade', duration: 1500 }).toggle(); }); } } public ngOnDestroy() { if(this.piwiksub){ this.piwiksub.unsubscribe(); } } public createTooltip(content: string) : string { return "
"+content+"
"; } }