Display Altmetric badges on simple item view

config/config.example.yml

@@ -75,7 +75,7 @@ cache:
     anonymousCache:
       # Maximum number of pages to cache. Default is zero (0) which means anonymous user cache is disabled.
       # As all pages are cached in server memory, increasing this value will increase memory needs.
-      # Individual cached pages are usually small (<100KB), so a value of max=1000 would only require ~100MB of memory. 
+      # Individual cached pages are usually small (<100KB), so a value of max=1000 would only require ~100MB of memory.
       max: 0
       # Amount of time after which cached pages are considered stale (in ms). After becoming stale, the cached
       # copy is automatically refreshed on the next request.
@@ -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:
@@ -382,7 +384,7 @@ vocabularies:
     vocabulary: 'srsc'
     enabled: true
 
-# Default collection/community sorting order at Advanced search, Create/update community and collection when there are not a query. 
+# Default collection/community sorting order at Advanced search, Create/update community and collection when there are not a query.
 comcolSelectionSort:
   sortField: 'dc.title'
   sortDirection: 'ASC'

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

@@ -282,6 +282,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';
 
@@ -473,7 +474,8 @@ const ENTRY_COMPONENTS = [
 const PROVIDERS = [
   TruncatableService,
   MockAdminGuard,
-  AbstractTrackableComponent
+  AbstractTrackableComponent,
+  ExternalScriptLoaderService,
 ];
 
 const DIRECTIVES = [