Modifier SpirHAL

Le projet SpirHAL étant du logiciel libre il est tout à fait possible de modifier tous les éléments de ce projet. Nous allons ici présenter comment modifier ou ajoute une nouvelle norme dans SpirHAL.

Le code source de SpirHAL est développé en utilisant la technologie Angular il est donc fortement recommandé de maitriser cette technologie avant d’essayer de modifier SpirHAL.

Le projet SpirHAL contenant une page administrateur avec d’autres fonctionnalités, est divisé en deux modules Angular distinct : “spirhal” et “admin”. Nous n’allons ici aborder que des détails conernant le module “spirhal” qui concerne l’affichage des notices sur une page web. Ce module est dans le dossier “/src/spirhal/”.

Modifier une norme bibliographique

Chaque norme bibliographique est disponible comme un “Component” Angular. Toutes les normes sont présentes dans le dossier “/src/spirhal/components/norms”. Vous pouvez dores et déjà observer au moins la norme “default” qui correpond au rendu proposé par HAL. Dans notre exemple nous allons étudier comment modifier la norme “EHESS”.

Cette norme est présente dans le dossier “/src/spirhal/components/norms/EHESS”. Ce dossier contient trois fichiers : + “ehess.norms.component.ts” contenant les paramètres du composant + “ehess.norms.component.html” contenant le rendu HTML du composant + “ehess.norms.component.css” contenant le CSS de mise en forme du componsant

Le fichier “ehess.component.ts” est le fichier permettant la déclaration du composant. Ce fichier est le suivant :

import { Component, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';

@Component({
  selector: 'ehess',
  templateUrl: './ehess.norms.component.html',
  styleUrls: ['./ehess.norms.component.css'],
  providers: []
})
export class EHESSComponent {

  @Input() publi: any;
  @Input() type: string;
  tempType: string;
  @Output() computeDetails = new EventEmitter();

  constructor() {}

  checkValue(key, text, avoidTag = false){
    if(!this.publi[key]){
      if(!avoidTag)
        this.publi.tags.push(text);
    }
    else{
      if(this.publi[key] instanceof Array){
        this.publi[key] = this.publi[key][0];
      }
    }
  }

  ngAfterViewInit(){
    setTimeout(() => {
      let types = ["OUV", "COUV", "ART", "COMM"];
      this.tempType = this.type;
      if(types.indexOf(this.type) == -1){
        this.type = "DEFAULT";
      }
      if(!this.publi.tags){
         this.publi.tags = [];
      }
      if(this.type == 'OUV'){
        this.checkValue("title_s", "Titre");
        this.checkValue("producedDateY_i", "Date");
        this.checkValue("publicationLocation_s", "Lieu de publication");
        this.checkValue("publisher_s", "Editeur");
      }
      if(this.type == "DEFAULT"){
        this.checkValue("title_s", "Titre", true);
        this.checkValue("producedDateY_i", "Date", true);
        this.checkValue("publicationLocation_s", "Lieu de publication", true);
        this.checkValue("publisher_s", "Editeur", true);
      }
      else if(this.type=="COUV"){
        this.checkValue("title_s", "Titre");
        this.checkValue("producedDateY_i", "Date");
        this.checkValue("scientificEditor_s", "Editeur scientifique");
        this.checkValue("bookTitle_s", "Titre de l'ouvrage");
        this.checkValue("publisher_s", "Editeur commercial");
        this.checkValue("page_s", "Pages");
        this.checkValue("publicationLocation_s", "Lieu de publication");
      }
      else if(this.type=="ART"){
        this.checkValue("title_s", "Titre");
        this.checkValue("producedDateY_i", "Date");
        this.checkValue("journalTitle_s", "Titre du journal");
        this.checkValue("volume_s", "Volume");
        this.checkValue("issue_s", "Numéro");
        this.checkValue("page_s", "Pages");
      }
      else if(this.type=="COMM"){
        this.checkValue("title_s", "Titre");
        this.checkValue("producedDateY_i", "Date");
        this.checkValue("conferenceTitle_s", "Nom de la conférence");
        this.checkValue("city_s", "Ville");
        this.checkValue("publisher_s", "Editeur");
        this.checkValue("page_s", "Pages");
      }
      this.computeDetails.emit();
    });
  }
}

Ce fichier contient plusieurs sections. Tout d’abord la déclaration du composant “@Component(…)” qui permet de définir le nom du composant et les fichiers associés (notamment le fichier de template qui est le rendu HTML du composant).

Le contenu de la fonction “ngAfterViewInit()” permet l’analyse des manquants pour cette norme en fonction du type de document (la fonction “checkValue” est utilisée pour tester si le paramètre existe sinon il est ajouté à la listes des “tags”).

Le contenu du fichier “ehess.norms.component.html” (le template HTML du componsant) est le suivant :

<div class="citation EHESS">
  <a href="{{publi.uri_s}}">
    <span class="author" *ngIf="publi.authFullName_s">{{publi.authFullName_s[0]}}<span *ngIf="publi.authFullName_s.length > 1"> et al.</span>,</span>
    <span class="title" *ngIf="publi.title_s && type != 'OUV'">&laquo;{{publi.title_s}}&raquo;,</span>
    <span class="title" *ngIf=" publi.title_s && type == 'OUV'"><i>{{publi.title_s}}</i>,</span>

    <span *ngIf="type=='COUV'">
      <span class="editor" *ngIf="publi.scientificEditor_s"><i>in</i> {{publi.scientificEditor_s}} (dir.),</span>
      <span class="book" *ngIf="publi.bookTitle_s"><i>{{publi.bookTitle_s}}</i>,</span>
    </span>

    <span *ngIf="type=='ART'">
      <span class="journalTitle" *ngIf="publi.journalTitle_s"><i>{{publi.journalTitle_s}}</i>,</span>
      <span class="volume" *ngIf="publi.volume_s">{{publi.volume_s}},</span>
      <span class="issue" *ngIf="publi.issue_s">{{publi.issue_s}},</span>
    </span>

    <span *ngIf="type=='COMM'">
      <span class="conference" *ngIf="publi.conferenceTitle_s"><i>in {{publi.conferenceTitle_s}}</i>,</span>
      <span class="city" *ngIf="publi.city_s">{{publi.city_s}},</span>
    </span>

    <span *ngIf="type!='ART' && type != 'COMM'">
      <span class="location" *ngIf="publi.publicationLocation_s">{{publi.publicationLocation_s}},</span>
    </span>
    <span class="publisher" *ngIf="publi.publisher_s">{{publi.publisher_s}},</span>
    <span class="year" *ngIf="publi.producedDateY_i">{{publi.producedDateY_i}}<span *ngIf="publi.page_s && type != 'OUV' && type != 'DEFAULT'">,</span></span>

    <span *ngIf="type != 'OUV' && type != 'DEFAULT'">
      <span class="pages" *ngIf="publi.page_s">{{publi.page_s}}</span>
    </span>
  </a>
</div>

C’est dans ce fichier que les détails des éléments à afficher et surtout du rendu de chaque élément est spécifié. Par exemple on peut observer que pour une notice de type “COUV” (Chapitre d’ouvrage) le titrel de l’ouvrage (“bookTitle_s”) est en italique (puisque la balise “” est utilisée).

Il est donc possible ici de modifier le rendu de la norme en modifiant ce fichier template. Si certains rendus nécessitent une personnalisation plus approfondie alors il est possible d’utiliser le fichier “ehess.component.css” qui permet de styliser la norm.

Ajouter une norme bibliographique

Si vous souhaitez ajouter une nouvelle norme bibliographique dans SpirHAL il est nécessaire de créer un nouveau composant dans le dossier “/src/spirhal/components/norms” en suivant le modèle des autres normes déjà présentes. Par exemple si nous souhaitons ajouter une nouvelle norme qui s’appelle “maNorme” alors nous créons le dossier “/src/spirhal/components/norms/maNorme/” dans lequel nous créons les trois fichiers : + maNorme.norms.component.ts + maNorme.norms.component.html + maNorme.norms.component.css

Le contenu du fichier maNorme.norms.component.ts peut être :

import { Component, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';

@Component({
  selector: 'maNorme',
  templateUrl: './maNorme.norms.component.html',
  styleUrls: ['./maNorme.norms.component.css'],
  providers: []
})
export class MaNormeComponent {

  @Input() publi: any;
  @Input() type: string;
  tempType: string;
  @Output() computeDetails = new EventEmitter();

  constructor() {}

  checkValue(key, text, avoidTag = false){
    if(!this.publi[key]){
      if(!avoidTag)
        this.publi.tags.push(text);
    }
    else{
      if(this.publi[key] instanceof Array){
        this.publi[key] = this.publi[key][0];
      }
    }
  }

  ngAfterViewInit(){
    setTimeout(() => {
      let types = ["OUV", "COUV", "ART", "COMM"];
      this.tempType = this.type;
      if(types.indexOf(this.type) == -1){
        this.type = "DEFAULT";
      }
      if(!this.publi.tags){
         this.publi.tags = [];
      }
      [...]
      this.computeDetails.emit();
    });
  }
}

L’analyse des manquants a été masqué ici. Remarquez le nom du componsant export class MaNormeComponent. Ensuite nous pouvons éditer le fichier “maNorme.norm.component.html” afin de spéficier le rendu de ma nouvelle norme.

l faut ensuite déclarer cette nouvelle norme dans le module “spirhal”. Pour cela il faut éditer le fichier “/src/spirhal/spirhal.module.ts”. Le contenu du fichier modifié est le suivant :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import {HttpClientModule} from '@angular/common/http';

import {PubliListCmp } from './components/PubliList/PubliList.component';
import { EHESSComponent } from './components/norms/ehess/ehess.norms.component';
import { APAComponent } from './components/norms/apa/apa.norms.component';
import { DefaultNormComponent } from './components/norms/default/default.norms.component';

import { MaNormeComponent } from './components/norms/maNorme/maNorme.norms.component';

import {NgbdModalContent} from './components/customModal.component';

@NgModule({
  declarations: [
    PubliListCmp,
    EHESSComponent,
    APAComponent,
    DefaultNormComponent,
    MaNormeComponent,
    NgbdModalContent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [PubliListCmp],
  entryComponents: [NgbdModalContent],
  exports: [PubliListCmp]
})
export class SpirHALModule { }

Remarquez l’ajoute de l’import du composant et ensuite l’ajout de la déclaration du composant dans “declarations” de “@NgModule”.

Il faut enfin modifier le fichier “/src/spirhal/components/PubliList/PubliList.component.html” afin d’en ajouter l’utilisation de la nouvelle norme lorsque le paramètre est spécifié. Pour cela il vous faut chercher les lignes :

<default *ngIf="norm == 'default'" [publi]="publi" [type]="groupPubli.groupValue" (computeDetails)="computeDetails($event)"  [ngClass]="{'col-md-8': adminDisplay, 'col-md-10': !adminDisplay}"></default>
<ehess *ngIf="this.norm == 'EHESS'" [publi]="publi" [type]="groupPubli.groupValue" (computeDetails)="computeDetails($event)"  [ngClass]="{'col-md-8': adminDisplay, 'col-md-10': !adminDisplay}"></ehess>
<apa *ngIf="this.norm == 'APA'" [publi]="publi" [type]="groupPubli.groupValue" (computeDetails)="computeDetails($event)"  [ngClass]="{'col-md-8': adminDisplay, 'col-md-10': !adminDisplay}"></apa>

Et ajouter de suite après la ligne :

<manorme *ngIf="this.norm == 'maNorme'" [publi]="publi" [type]="groupPubli.groupValue" (computeDetails)="computeDetails($event)"  [ngClass]="{'col-md-8': adminDisplay, 'col-md-10': !adminDisplay}"></manorme>

Il faudra enfin modifier l’utilisation de SpirHAL pour utiliser cette nouvelle norme dans votre page de votre site web avec :

<spirhal researcherName="Hélène Débax" norm="maNorme" structId="620"></spirhal>