MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library|Trunk] 

Add This: add js dynamically when the component is loaded for the first time

Cite This:  add js dynamically when the component is loaded for the first time
	    add padding

Bottom menu: Fix menu width when it is not centered



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58780 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2020-05-26 10:16:03 +00:00
parent 1fe05f52d6
commit 8e0a427b0b
3 changed files with 83 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
landingPages/landing-utils/addThis.component.ts
View File

@ -1,15 +1,6 @@
import { import {Component, EventEmitter, Inject, OnInit, Output, RendererFactory2, ViewEncapsulation} from '@angular/core';
AfterContentInit,
AfterViewInit,
Component,
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
ViewChild
} from '@angular/core';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {DOCUMENT} from "@angular/common";
interface addthis { interface addthis {
layers: Refresh; layers: Refresh;
@ -26,25 +17,45 @@ declare var addthis: addthis;
@Component({ @Component({
selector: 'addThis', selector: 'addThis',
template: ` template: `
<p class="addthis_inline_share_toolbox"></p> <div class="addthis_inline_share_toolbox_lcx9"></div>
` `
}) })
export class AddThisComponent implements OnInit { export class AddThisComponent implements OnInit {
@Output() event: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor(private route: ActivatedRoute, @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2) {}
constructor(private route: ActivatedRoute) {}
ngOnInit() { ngOnInit() {
this.route.queryParams.subscribe(data => { this.route.queryParams.subscribe(data => {
if (typeof document !== 'undefined' && typeof addthis !== 'undefined') { try {
if(addthis.layers && addthis.layers.refresh) { if (!this.document.getElementById('addThisScript') && typeof document !== 'undefined') {
addthis.layers.refresh(); console.log(" create script AddThis")
} else { const renderer = this.rendererFactory.createRenderer(this.document, {
this.event.emit(false); id: '-1',
encapsulation: ViewEncapsulation.None,
styles: [],
data: {}
});
const head = this.document.body;
if (head === null) {
throw new Error('<head> not found within DOCUMENT.');
}
const script = renderer.createElement('script');
renderer.setAttribute(script, "id", "addThisScript");
renderer.setAttribute(script, "src", "https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-559d24521cd8c080");
renderer.setAttribute(script, "type", "text/javascript");
renderer.appendChild(head, script);
} }
} else { if (typeof document !== 'undefined') {
this.event.emit(false); if(typeof addthis !== 'undefined' && addthis.layers && addthis.layers.refresh) {
// console.log("Add This: Call Refresh")
addthis.layers.refresh();
}
}
}catch (e) {
console.error(e)
} }
}); });
} }
} }

62
landingPages/landing-utils/citeThis/citeThis.component.ts
View File

@ -1,13 +1,23 @@
import {Component, ElementRef, Input, OnDestroy, OnInit} from '@angular/core'; import {
Component,
ElementRef,
Inject,
Input,
OnDestroy,
OnInit,
RendererFactory2,
ViewEncapsulation
} from '@angular/core';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {Citation, CitationData} from './citation.class'; import {Citation, CitationData} from './citation.class';
import {ResultLandingInfo} from "../../../utils/entities/resultLandingInfo"; import {ResultLandingInfo} from "../../../utils/entities/resultLandingInfo";
import {DOCUMENT} from "@angular/common";
declare var CSL: any; declare var CSL: any;
declare var Sys: any; declare var Sys: any;
declare var UIkit: any; declare var UIkit: any;
//<addThis ></addThis> //<citeThis ></citeThis>
@Component({ @Component({
selector: 'citeThis', selector: 'citeThis',
template: ` template: `
@ -23,7 +33,7 @@ declare var UIkit: any;
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div *ngIf="selectedStyle"> <div *ngIf="selectedStyle">
<div id="citation" class="box-content uk-margin-small-top uk-overflow-auto" [innerHTML]=citationText></div> <div id="citation" class="box-content uk-margin-small-top uk-overflow-auto uk-padding-small" [innerHTML]=citationText></div>
<button <button
class="clipboard_btn uk-button uk-button-small uk-button-secondary uk-margin-small-top uk-icon uk-float-right" class="clipboard_btn uk-button uk-button-small uk-button-secondary uk-margin-small-top uk-icon uk-float-right"
data-clipboard-target="#citation" title="Copy to clipboard"> data-clipboard-target="#citation" title="Copy to clipboard">
@ -49,16 +59,39 @@ export class CiteThisComponent implements OnInit, OnDestroy {
public citeproc; public citeproc;
public data; public data;
public clipboard; public clipboard;
constructor( @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2){
}
ngOnInit() { ngOnInit() {
if (typeof window !== 'undefined') { try{
// this.citeproc = require('./citeproc.js'); if (!this.document.getElementById('citeThisScript')) {
// console.log(this.citeproc); const renderer = this.rendererFactory.createRenderer(this.document, {
id: '-1',
encapsulation: ViewEncapsulation.None,
styles: [],
data: {}
});
const head = this.document.head;
if (head === null) {
throw new Error('<head> not found within DOCUMENT.');
}
const script = renderer.createElement('script');
renderer.setAttribute(script, "id", "citeThisScript");
renderer.setAttribute(script, "src", "assets/common-assets/citeproc.js");
renderer.setAttribute(script, "type", "text/javascript");
renderer.appendChild(head, script);
}
setTimeout(() => {
this.parseData(); this.parseData();
this.selectedStyle = this.citation.templates[0]; this.selectedStyle = this.citation.templates[0];
this.updateCitation(); this.updateCitation();
this.createClipboard(); this.createClipboard();
} }, 800);
}catch (e) {
console.error(e)
}
} }
ngOnDestroy() { ngOnDestroy() {
@ -174,11 +207,14 @@ export class CiteThisComponent implements OnInit, OnDestroy {
return this.data; return this.data;
} }
}; };
try {
var citeproc = new CSL.Engine(new Sys(this.citation.locale, this.data), this.citation[(this.selectedStyle == "0") ? this.citation.templates[0] : this.selectedStyle]); var citeproc = new CSL.Engine(new Sys(this.citation.locale, this.data), this.citation[(this.selectedStyle == "0") ? this.citation.templates[0] : this.selectedStyle]);
citeproc.updateItems([this.data.id]); citeproc.updateItems([this.data.id]);
this.citationText = citeproc.makeBibliography(); this.citationText = citeproc.makeBibliography();
this.citationText = ((this.citationText != null) && (this.citationText.length > 1) && (this.citationText[1].length > 0)) ? this.citationText[1][0] : ''; this.citationText = ((this.citationText != null) && (this.citationText.length > 1) && (this.citationText[1].length > 0)) ? this.citationText[1][0] : '';
}catch (e) {
}
} }

2
sharedComponents/bottom.component.html
View File

@ -3,7 +3,7 @@
<!-- <div class="uk-container uk-container-expand uk-margin-small">--> <!-- <div class="uk-container uk-container-expand uk-margin-small">-->
<div [class]="(centered?'':'uk-grid uk-grid-collapse ') " > <div [class]="(centered?'':'uk-grid uk-grid-collapse ') " >
<div id="footer#3" [class]="'uk-first-column uk-text-left ' + <div id="footer#3" [class]="'uk-first-column uk-text-left ' +
(centered?'uk-grid uk-margin-remove-right':'')"> (centered?'uk-grid uk-margin-remove-right':'uk-margin-large-right uk-width-1-3@m')">
<div *ngIf="showOpenaire" <div *ngIf="showOpenaire"
[class]="'uk-margin-top uk-text-left '+(centered?'uk-width-1-4':'')"> [class]="'uk-margin-top uk-text-left '+(centered?'uk-width-1-4':'')">
<img [src]="assetsPath + 'common/Logo_Horizontal_'+(darkBackground?'white':'dark')+'_small.png'" <img [src]="assetsPath + 'common/Logo_Horizontal_'+(darkBackground?'white':'dark')+'_small.png'"