Display Altmetric badges on simple item view

config/config.example.yml

@@ -284,6 +284,8 @@ item:
     # Rounded to the nearest size in the list of selectable sizes on the
     # settings menu.  See pageSizeOptions in 'pagination-component-options.model.ts'.
     pageSize: 5
+  # Show the Altmetric badge in the simple item page.
+  showAltmetricBadge: true
 
 # Collection Page Config
 collection:

config/config.yml

@@ -3,3 +3,5 @@ rest:
   host: sandbox.dspace.org
   port: 443
   nameSpace: /server
+item:
+  showAltmetricBadge: true

src/app/item-page/item-page.module.ts

@@ -60,6 +60,9 @@ import { ThemedItemAlertsComponent } from './alerts/themed-item-alerts.component
 import {
   ThemedFullFileSectionComponent
 } from './full/field-components/file-section/themed-full-file-section.component';
+import { ItemPageAltmetricFieldComponent } from './simple/field-components/specific-field/metrics/altmetric/item-page-altmetric-field.component';
+import { AltmetricDirective } from './simple/field-components/specific-field/metrics/altmetric/item-page-altmetric-field.directive';
+import { ItemPageMetricsFieldComponent } from './simple/field-components/specific-field/metrics/item-page-metrics-field.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -103,6 +106,12 @@ const DECLARATIONS = [
   ItemAlertsComponent,
   ThemedItemAlertsComponent,
   BitstreamRequestACopyPageComponent,
+  ItemPageMetricsFieldComponent,
+  ItemPageAltmetricFieldComponent,
+];
+
+const DIRECTIVES = [
+  AltmetricDirective
 ];
 
 @NgModule({
@@ -124,10 +133,11 @@ const DECLARATIONS = [
   ],
   declarations: [
     ...DECLARATIONS,
-
+    ...DIRECTIVES,
   ],
   exports: [
     ...DECLARATIONS,
+    ...DIRECTIVES,
   ]
 })
 export class ItemPageModule {

src/app/item-page/simple/field-components/specific-field/metrics/altmetric/item-page-altmetric-field.component.html

@@ -0,0 +1,9 @@
+<span
+  dsAltmetricData
+  [item]="item"
+  class="altmetric-embed"
+  data-hide-no-mentions="true"
+  data-badge-type="donut"
+  data-badge-popover="right"
+  data-link-target="_blank"
+></span>

src/app/item-page/simple/field-components/specific-field/metrics/altmetric/item-page-altmetric-field.component.ts

@@ -0,0 +1,62 @@
+import { AfterViewInit, Component, EventEmitter, HostListener, Inject, Input, Output } from '@angular/core';
+import { ExternalScriptLoaderService } from 'src/app/shared/utils/scripts-loader/external-script-loader.service';
+import {
+  ExternalScriptsNames,
+  ExternalScriptsStatus,
+} from 'src/app/shared/utils/scripts-loader/external-script.model';
+import { Item } from '../../../../../../core/shared/item.model';
+import { APP_CONFIG, AppConfig } from 'src/config/app-config.interface';
+
+@Component({
+  selector: 'ds-item-page-altmetric-field',
+  templateUrl: './item-page-altmetric-field.component.html',
+})
+export class ItemPageAltmetricFieldComponent implements AfterViewInit {
+  @Input() item: Item;
+
+  @Output() widgetLoaded = new EventEmitter<boolean>();
+
+  constructor(
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
+    private scriptLoader: ExternalScriptLoaderService
+  ) {}
+
+  ngAfterViewInit() {
+    if (!this.appConfig.item.showAltmetricBadge) {
+      return;
+    }
+
+    this.scriptLoader
+      .load(ExternalScriptsNames.ALTMETRIC)
+      .then((data) => this.reloadBadge(data))
+      .catch((error) => console.error(error));
+  }
+
+  /**
+   * We ensure that the badge is visible after the script is loaded
+   * @param data The data returned from the promise
+   */
+  private reloadBadge(data: any[]) {
+    if (data.find((element) => this.isLoaded(element))) {
+      const initMethod = '_altmetric_embed_init';
+      window[initMethod]();
+    }
+  }
+
+  /**
+   * Check if the script has been previously loaded in the DOM
+   * @param element The resolve element from the promise
+   * @returns true if the script has been already loaded, false if not
+   */
+  private isLoaded(element: any): unknown {
+    return (
+      element.script === ExternalScriptsNames.ALTMETRIC &&
+      element.status === ExternalScriptsStatus.ALREADY_LOADED
+    );
+  }
+
+  @HostListener('window:altmetric:show', ['$event'])
+  private onWidgetShow(event: Event) {
+    this.widgetLoaded.emit(true);
+  }
+}

src/app/item-page/simple/field-components/specific-field/metrics/altmetric/item-page-altmetric-field.directive.ts

@@ -0,0 +1,83 @@
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+import { Item } from 'src/app/core/shared/item.model';
+
+/**
+ * This directive adds the data-* attribute for the Altmetric badge dependening on the first identifier found in the item
+ */
+@Directive({
+  selector: '[dsAltmetricData]',
+})
+export class AltmetricDirective implements OnInit {
+  @Input() item: Item;
+
+  constructor(private renderer: Renderer2, private elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    const identifier = this.obtainFirstValidID(this.initItemIdentifiers());
+    if (identifier !== undefined) {
+      this.renderer.setAttribute(
+        this.elementRef.nativeElement,
+        identifier.name,
+        this.applyRegex(identifier.value, identifier.regex)
+      );
+    }
+  }
+
+  /**
+   * This initialize an array of identifiers founded in the item.
+   * It search for DOI, Handle, PMID, ISBN, ARXIV and URI.
+   * Some identifiers may be stored with more text than the ID so this objects has a regex property to clean it
+   */
+  private initItemIdentifiers(): any[] {
+    return [
+      {
+        name: 'data-doi',
+        value: this.item.firstMetadataValue('dc.identifier.doi'),
+        regex: /https?:\/\/(dx\.)?doi\.org\//gi,
+      },
+      {
+        name: 'data-handle',
+        value: this.item.firstMetadataValue('dc.identifier.uri'),
+        regex: /http?:\/\/hdl\.handle\.net\//gi,
+      },
+      {
+        name: 'data-pmid',
+        value: this.item.firstMetadataValue('dc.identifier.pmid'),
+        regex: '',
+      },
+      {
+        name: 'data-isbn',
+        value: this.item.firstMetadataValue('dc.identifier.isbn'),
+        regex: '',
+      },
+      {
+        name: 'data-arxiv-id',
+        value: this.item.firstMetadataValue('dc.identifier.arxiv'),
+        regex: '',
+      },
+      {
+        name: 'data-uri',
+        value: this.item.firstMetadataValue('dc.identifier.uri'),
+        regex: '',
+      },
+    ];
+  }
+
+  /**
+   * This function obtains the first valid ID from the item
+   * @returns Returns first valid identifier (not undefined), undefined otherwise
+   */
+  private obtainFirstValidID(itemIdentifiers: any[]): any {
+    return itemIdentifiers.find((element) => element.value !== undefined);
+  }
+
+  /**
+   * Apply the specified regex to clean the metadata and obtain only the ID
+   * @param value The metadata value
+   * @param regex The regex to apply
+   * @returns The result is the ID clean
+   */
+  private applyRegex(value: string, regex: string): string {
+    return value.replace(regex, '');
+  }
+}

src/app/item-page/simple/field-components/specific-field/metrics/item-page-metrics-field.component.html

@@ -0,0 +1,12 @@
+<div class="item-page-field">
+  <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
+    <div class="simple-view-element">
+      <h2 *ngIf="showTitle" class="simple-view-element-header">
+        {{ "item.page.metrics" | translate }}
+      </h2>
+      <div class="simple-view-element-body">
+        <ds-item-page-altmetric-field (widgetLoaded)="someWidgetHasLoaded($event)" [item]="item"></ds-item-page-altmetric-field>
+      </div>
+    </div>
+  </ds-metadata-field-wrapper>
+</div>

src/app/item-page/simple/field-components/specific-field/metrics/item-page-metrics-field.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { ItemPageFieldComponent } from '../item-page-field.component';
+import { Item } from 'src/app/core/shared/item.model';
+
+@Component({
+  selector: 'ds-item-page-metrics-field',
+  templateUrl: './item-page-metrics-field.component.html',
+  styleUrls: [
+    '../../../../../shared/metadata-field-wrapper/metadata-field-wrapper.component.scss',
+  ],
+})
+export class ItemPageMetricsFieldComponent extends ItemPageFieldComponent {
+
+  @Input() item: Item;
+
+  public showTitle = false;
+
+  public someWidgetHasLoaded(widgetLoaded: boolean) {
+    if (widgetLoaded) {
+      this.showTitle = true;
+    }
+  }
+
+}

src/app/item-page/simple/item-types/publication/publication.component.html

@@ -47,6 +47,7 @@
       [fields]="['dc.publisher']"
       [label]="'publication.page.publisher'">
     </ds-generic-item-page-field>
+    <ds-item-page-metrics-field [item]="object"></ds-item-page-metrics-field>
   </div>
   <div class="col-xs-12 col-md-7">
     <ds-related-items

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -48,6 +48,7 @@
       [fields]="['dc.publisher']"
       [label]="'item.page.publisher'">
     </ds-generic-item-page-field>
+    <ds-item-page-metrics-field [item]="object"></ds-item-page-metrics-field>
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-item-page-abstract-field [item]="object"></ds-item-page-abstract-field>

src/app/shared/shared.module.ts

@@ -279,6 +279,7 @@ import {
 } from '../item-page/simple/field-components/specific-field/title/themed-item-page-field.component';
 import { BitstreamListItemComponent } from './object-list/bitstream-list-item/bitstream-list-item.component';
 import { NgxPaginationModule } from 'ngx-pagination';
+import { ExternalScriptLoaderService } from './utils/scripts-loader/external-script-loader.service';
 import { ThemedUserMenuComponent } from './auth-nav-menu/user-menu/themed-user-menu.component';
 import { ThemedLangSwitchComponent } from './lang-switch/themed-lang-switch.component';
 import { DynamicComponentLoaderDirective } from './abstract-component-loader/dynamic-component-loader.directive';
@@ -472,7 +473,8 @@ const ENTRY_COMPONENTS = [
 const PROVIDERS = [
   TruncatableService,
   MockAdminGuard,
-  AbstractTrackableComponent
+  AbstractTrackableComponent,
+  ExternalScriptLoaderService,
 ];
 
 const DIRECTIVES = [

src/app/shared/utils/scripts-loader/external-script-loader.service.ts

@@ -0,0 +1,103 @@
+import { Injectable } from '@angular/core';
+import {
+  ExternalScriptsList,
+  ExternalScriptsStatus,
+} from './external-script.model';
+
+declare const document: any;
+
+/**
+ * Service used to load external scripts in the DOM when it cannot be loaded from the standard angular methods
+ */
+@Injectable()
+export class ExternalScriptLoaderService {
+  private scriptsStored: any = {};
+
+  constructor() {
+    ExternalScriptsList.forEach(
+      ({ name, src }) => (this.scriptsStored[name] = { loaded: false, src })
+    );
+  }
+
+  /**
+   * Load the scripts in the DOM and return every {@link Promise}
+   * @param scriptsToLoad Scripts to load, see {@link scriptsToLoad}
+   * @returns An array of the scripts promises
+   */
+  load(...scriptsToLoad: string[]): Promise<any[]> {
+    let promises: any[] = [];
+    scriptsToLoad.forEach((script) => promises.push(this.loadScript(script)));
+    return Promise.all(promises);
+  }
+
+  private loadScript(name: string) {
+    return new Promise((resolve) => {
+      if (this.isAlreadyLoaded(name)) {
+        resolve(
+          this.createResolveResult(
+            name,
+            true,
+            ExternalScriptsStatus.ALREADY_LOADED
+          )
+        );
+      } else {
+        let script = this.createScriptHTMLElement(name);
+        if (this.areWeInIE(script)) {
+          this.configureOnReadyState(name, script, resolve);
+        } else {
+          this.configureOnLoad(name, script, resolve);
+        }
+        this.configureOnError(name, script, resolve);
+        document.getElementsByTagName('head')[0].appendChild(script);
+      }
+    });
+  }
+
+  private isAlreadyLoaded(name: string): boolean {
+    return this.scriptsStored[name].loaded;
+  }
+
+  private areWeInIE(script: any): boolean {
+    return script.readyState;
+  }
+
+  private createResolveResult(script: string, loaded: boolean, status: string) {
+    return { script, loaded, status };
+  }
+
+  private createScriptHTMLElement(name: string): any {
+    let script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = this.scriptsStored[name].src;
+
+    return script;
+  }
+
+  private configureOnReadyState(name: string, script: any, resolve: any) {
+    script.onreadystatechange = () => {
+      if (script.readyState === 'loaded' || script.readyState === 'complete') {
+        script.onreadystatechange = null;
+        this.scriptsStored[name].loaded = true;
+        resolve(
+          this.createResolveResult(name, true, ExternalScriptsStatus.LOADED)
+        );
+      }
+    };
+  }
+
+  private configureOnLoad(name: string, script: any, resolve: any) {
+    script.onload = () => {
+      this.scriptsStored[name].loaded = true;
+      resolve(
+        this.createResolveResult(name, true, ExternalScriptsStatus.LOADED)
+      );
+    };
+  }
+
+  private configureOnError(name: string, script: any, resolve: any) {
+    script.onerror = (error: any) =>
+      resolve(
+        this.createResolveResult(name, false, ExternalScriptsStatus.NOT_LOADED)
+      );
+  }
+}