[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

View File

@ -1,15 +1,6 @@
import {
AfterContentInit,
AfterViewInit,
Component,
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
ViewChild
} from '@angular/core';
import {Component, EventEmitter, Inject, OnInit, Output, RendererFactory2, ViewEncapsulation} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {DOCUMENT} from "@angular/common";
interface addthis {
layers: Refresh;
@ -26,25 +17,45 @@ declare var addthis: addthis;
@Component({
selector: 'addThis',
template: `
<p class="addthis_inline_share_toolbox"></p>
<div class="addthis_inline_share_toolbox_lcx9"></div>
`
})
export class AddThisComponent implements OnInit {
@Output() event: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor(private route: ActivatedRoute) {}
constructor(private route: ActivatedRoute, @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2) {}
ngOnInit() {
this.route.queryParams.subscribe(data => {
if (typeof document !== 'undefined' && typeof addthis !== 'undefined') {
if(addthis.layers && addthis.layers.refresh) {
addthis.layers.refresh();
} else {
this.event.emit(false);
try {
if (!this.document.getElementById('addThisScript') && typeof document !== 'undefined') {
console.log(" create script AddThis")
const renderer = this.rendererFactory.createRenderer(this.document, {
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 {
this.event.emit(false);
if (typeof document !== 'undefined') {
if(typeof addthis !== 'undefined' && addthis.layers && addthis.layers.refresh) {
// console.log("Add This: Call Refresh")
addthis.layers.refresh();
}
}
}catch (e) {
console.error(e)
}
});
}
}

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 {Citation, CitationData} from './citation.class';
import {ResultLandingInfo} from "../../../utils/entities/resultLandingInfo";
import {DOCUMENT} from "@angular/common";
declare var CSL: any;
declare var Sys: any;
declare var UIkit: any;
//<addThis ></addThis>
//<citeThis ></citeThis>
@Component({
selector: 'citeThis',
template: `
@ -23,7 +33,7 @@ declare var UIkit: any;
</mat-select>
</mat-form-field>
<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
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">
@ -49,16 +59,39 @@ export class CiteThisComponent implements OnInit, OnDestroy {
public citeproc;
public data;
public clipboard;
constructor( @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2){
}
ngOnInit() {
if (typeof window !== 'undefined') {
// this.citeproc = require('./citeproc.js');
// console.log(this.citeproc);
try{
if (!this.document.getElementById('citeThisScript')) {
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.selectedStyle = this.citation.templates[0];
this.updateCitation();
this.createClipboard();
}
}, 800);
}catch (e) {
console.error(e)
}
}
ngOnDestroy() {
@ -174,11 +207,14 @@ export class CiteThisComponent implements OnInit, OnDestroy {
return this.data;
}
};
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]);
this.citationText = citeproc.makeBibliography();
this.citationText = ((this.citationText != null) && (this.citationText.length > 1) && (this.citationText[1].length > 0)) ? this.citationText[1][0] : '';
try {
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]);
this.citationText = citeproc.makeBibliography();
this.citationText = ((this.citationText != null) && (this.citationText.length > 1) && (this.citationText[1].length > 0)) ? this.citationText[1][0] : '';
}catch (e) {
}
}

View File

@ -3,7 +3,7 @@
<!-- <div class="uk-container uk-container-expand uk-margin-small">-->
<div [class]="(centered?'':'uk-grid uk-grid-collapse ') " >
<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"
[class]="'uk-margin-top uk-text-left '+(centered?'uk-width-1-4':'')">
<img [src]="assetsPath + 'common/Logo_Horizontal_'+(darkBackground?'white':'dark')+'_small.png'"