[Library & common-assets | explore-redesign]: addThis.component.ts: Replaced addthis external library with addtoany - addthis is no longer supported | general.less: css for addtoany social icons (classes .fully_rounded .a2a_svg).

This commit is contained in:
Konstantina Galouni 2023-07-04 19:12:34 +03:00
parent 2fa4c9e810
commit 8029aafb36
1 changed files with 47 additions and 28 deletions

View File

@ -1,34 +1,28 @@
import { import {
ChangeDetectorRef,
Component, Component,
EventEmitter,
Inject, Input, Inject, Input,
OnInit, OnInit,
Output,
RendererFactory2, RendererFactory2,
ViewChild,
ViewEncapsulation ViewEncapsulation
} from '@angular/core'; } from '@angular/core';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {DOCUMENT} from "@angular/common"; import {DOCUMENT} from "@angular/common";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
interface addthis { declare var a2a;
layers: Refresh;
init: Function;
toolbox: Function;
}
interface Refresh {
refresh: Function;
}
declare var addthis: addthis;
@Component({ @Component({
selector: 'addThis', selector: 'addThis',
template: ` template: `
<div id="addThis" class="addthis_inline_share_toolbox_lcx9_8cfy" [attr.data-url]="url"></div> <div [id]="'addToAny'+(url ? ('_'+url) : '')" #addToAny class="a2a_kit a2a_kit_size_42 a2a_default_style fully_rounded" [attr.data-a2a-url]="url">
<a class="a2a_button_twitter"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_linkedin"></a>
<a class="a2a_button_mendeley"></a>
<a class="a2a_button_reddit"></a>
<a class="a2a_button_email"></a>
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>
<div *ngIf="showWarning" class="uk-alert uk-alert-warning uk-animation-fade"> <div *ngIf="showWarning" class="uk-alert uk-alert-warning uk-animation-fade">
Do the share buttons not appear? Please make sure, any blocking addon is disabled, and then reload the page. Do the share buttons not appear? Please make sure, any blocking addon is disabled, and then reload the page.
</div> </div>
@ -50,6 +44,33 @@ export class AddThisComponent implements OnInit {
value(); value();
} }
} }
//
// if(typeof document !== 'undefined') {
// 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.');
// }
//
//
// let script = null;
// head.childNodes.forEach(node => {
// if(node.id === "addToAnyScript") {
// // script = node;
// node.remove();
// }
// })
// // let script = head.nativeElement.getElementById("script");
// // if(script) {
// // renderer.removeChild(head, script);
// // script.remove();
// // }
// }
} }
ngOnInit() { ngOnInit() {
@ -57,8 +78,7 @@ export class AddThisComponent implements OnInit {
this.subs.push(this.route.queryParams.subscribe(data => { this.subs.push(this.route.queryParams.subscribe(data => {
this.showWarning = false; this.showWarning = false;
try { try {
if (!this.document.getElementById('addThisScript') && typeof document !== 'undefined') { if (!this.document.getElementById('addToAnyScript') && typeof document !== 'undefined') {
// console.log(" create script AddThis");
const renderer = this.rendererFactory.createRenderer(this.document, { const renderer = this.rendererFactory.createRenderer(this.document, {
id: '-1', id: '-1',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
@ -70,19 +90,18 @@ export class AddThisComponent implements OnInit {
throw new Error('<head> not found within DOCUMENT.'); throw new Error('<head> not found within DOCUMENT.');
} }
const script = renderer.createElement('script'); const script = renderer.createElement('script');
renderer.setAttribute(script, "id", "addThisScript"); renderer.setAttribute(script, "id", "addToAnyScript");
renderer.setAttribute(script, "src", "https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-559d24521cd8c080"); renderer.setAttribute(script, "src", "https://static.addtoany.com/menu/page.js");
renderer.setAttribute(script, "type", "text/javascript"); renderer.setAttribute(script, "type", "text/javascript");
renderer.appendChild(head, script); renderer.appendChild(head, script);
} }
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
if (typeof addthis !== 'undefined' && addthis.layers && addthis.layers.refresh) { if(typeof a2a !== 'undefined' && this.document.getElementById('addToAny'+(this.url ? ('_'+this.url) : '')) && !this.document.getElementById('addToAny'+(this.url ? ('_'+this.url) : '')).innerText) {
// console.log("Add This: Call Refresh") a2a.init_all();
addthis.layers.refresh();
} }
} }
this.subs.push(setTimeout(() => { this.subs.push(setTimeout(() => {
if (this.document.getElementById('addThis') && !this.document.getElementById('addThis').innerText) { if (this.document.getElementById('addToAny'+(this.url ? ('_'+this.url) : '')) && !this.document.getElementById('addToAny'+(this.url ? ('_'+this.url) : '')).innerText) {
this.showWarning = true; this.showWarning = true;
} }
}, 4000)); }, 4000));