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 <https://angular.io/>`__ 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>