Feature/crit app frame

src/app/app.config.ts

@@ -4,8 +4,9 @@ import { TranslateService } from '@ngx-translate/core';
 import { forkJoin } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { EntitiesSelectItemGroup } from './components/entities-select/entities-select.component';
-import { ViewMode, ViewModeId } from './models/evt-models';
+import { AnalogueClass, SourceClass, ViewMode, ViewModeId } from './models/evt-models';
 import { Attributes, EditorialConventionLayout } from './models/evt-models';
+import { updateCSS } from './utils/dom-utils';
 
 @Injectable()
 export class AppConfig {
@@ -31,6 +32,7 @@ export class AppConfig {
                 ]).pipe(
                     map(([ui, edition, editorialConventions]) => {
                         console.log(ui, edition, files);
+                        this.updateStyleFromConfig(edition);
                         // Handle default values => TODO: Decide how to handle defaults!!
                         if (ui.defaultLocalization) {
                             if (ui.availableLanguages.find((l) => l.code === ui.defaultLocalization && l.enable)) {
@@ -53,7 +55,24 @@ export class AppConfig {
             });
         });
     }
+
+    /**
+     * Update once general css with values from config,
+     * this way we don't need to inject a style property in each element
+     * @param edition EditionConfig
+     */
+    updateStyleFromConfig(edition: EditionConfig) {
+        const rules = [];
+        rules['.'+AnalogueClass+' .opened'] = `background-color: ${edition.readingColorDark}`;
+        rules['.'+SourceClass+' .opened'] = `background-color: ${edition.readingColorDark}`;
+        rules['.'+AnalogueClass+':hover'] = `background-color: ${edition.readingColorLight}; cursor:pointer`;
+        rules['.'+SourceClass+':hover'] = `background-color: ${edition.readingColorLight}; cursor:pointer`;
+        Object.entries(rules).forEach(([selector,style]) => { updateCSS([[selector,style]]) });
+        console.log('style from config',rules);
+    }
+
 }
+
 export interface EVTConfig {
     ui: UiConfig;
     edition: EditionConfig;
@@ -99,6 +118,20 @@ export interface EditionConfig {
     verseNumberPrinter: number;
     readingColorLight: string;
     readingColorDark: string;
+    externalBibliography: Partial<{
+        biblAttributeToMatch: string,
+        elementAttributesToMatch: string[]
+    }>;
+    biblView: Partial<{
+		propToShow: string[];
+		showAttrNames: boolean;
+		showEmptyValues: boolean;
+		inline: boolean;
+        comaSeparated: boolean;
+        showMainElemTextContent: boolean;
+	}>;
+    analogueMarkers: string[];
+    sourcesExcludedFromListByParent: string[];
 }
 
 export type EditionImagesSources = 'manifest' | 'graphics';

src/app/app.module.ts

@@ -120,6 +120,16 @@ import { TextSourcesComponent } from './view-modes/text-sources/text-sources.com
 import { TextTextComponent } from './view-modes/text-text/text-text.component';
 import { TextVersionsComponent } from './view-modes/text-versions/text-versions.component';
 import { HandleImgErrorDirective } from './directives/handle-img-error.directive';
+import { CriticalApparatusComponent } from './components/critical-apparatus/critical-apparatus.component';
+import { AnaloguesComponent } from './components/analogues/analogues.component';
+import { SourcesComponent } from './components/sources/sources.component';
+import { SourceDetailComponent } from './components/sources/source-detail/source-detail.component';
+import { SourceNoteComponent } from './components/sources/source-note/source-note.component';
+import { QuoteEntryComponent } from './components/quote-entry/quote-entry.component';
+import { AnalogueEntryComponent } from './components/analogues/analogue-entry/analogue-entry.component';
+import { AnalogueDetailComponent } from './components/analogues/analogue-detail/analogue-detail.component';
+import { BiblioEntryComponent } from './components/biblio/biblio.component';
+import { BiblioListComponent } from './components/biblioList/biblio-list.component';
 
 const routes: Routes = [
 ];
@@ -181,6 +191,8 @@ const DynamicComponents = [
   VerseComponent,
   VersesGroupComponent,
   WordComponent,
+  QuoteEntryComponent,
+  AnalogueEntryComponent,
 ];
 
 @NgModule({
@@ -227,6 +239,14 @@ const DynamicComponents = [
     VersionPanelComponent,
     WitnessPanelComponent,
     XmlBeautifyPipe,
+    CriticalApparatusComponent,
+    AnaloguesComponent,
+    AnalogueDetailComponent,
+    SourceDetailComponent,
+    SourceNoteComponent,
+    SourcesComponent,
+    BiblioEntryComponent,
+    BiblioListComponent,
     ...DynamicComponents,
   ],
   imports: [

src/app/components/analogues/analogue-detail/analogue-detail.component.html

@@ -0,0 +1,92 @@
+<div class="source-container" 
+    *ngIf="((analogue.sources.length > 0) || (analogue.extSources.length > 0) 
+    || (analogue.text.length > 0) || (analogue.extLinkedElements.length > 0))">
+
+    <div class="card-body app-detail-content source-detail-content" *ngIf="analogue.content.length > 0">
+        <span class="btn btn-sm transparent source-quote-button">☚</span>
+        <span class="source-quote-symbol">&#10077;</span>
+        <span title="analogue-text">
+            <ng-container *ngFor="let element of analogue.contentToShow">
+                <evt-content-viewer *ngIf="element.tagName !== 'ptr'" 
+                    [content]="element" 
+                    [editionLevel]="editionLevel"
+                    [evtHtmlAttributes]="element?.attributes" 
+                    [attr.data-edition]="editionLevel">
+                </evt-content-viewer>
+            </ng-container>
+        </span>
+    </div>
+
+    <div class="card-footer app-detail-tabs" *ngIf="analogue.sources.length > 0 
+        || analogue.extSources.length > 0 || analogue.quotedText.length > 0">
+        <ul ngbNav #analogueEntryTab="ngbNav" class="nav-pills">
+
+            <li ngbNavItem="quotedText" *ngIf="analogue.quotedText.length > 0">
+                <a class="source-detail-btn" ngbNavLink>{{'quotedText' | translate}}</a>
+                <ng-template ngbNavContent>
+                    <ng-container *ngFor="let quoteTxt of analogue.quotedText">
+                        <ng-container *ngIf="quoteTxt.quote.type">
+                            <evt-content-viewer [content]="quoteTxt.quote"></evt-content-viewer>
+                        </ng-container>
+                        <ng-container *ngIf="!(quoteTxt.quote.type)">{{quoteTxt.quote}}</ng-container>
+                    </ng-container>
+                </ng-template>
+            </li>
+
+            <li ngbNavItem="refBibl" *ngIf="analogue.sources.length > 0 || analogue.extSources.length > 0">
+                <a class="source-detail-btn" ngbNavLink>{{'refBibl' | translate}}</a>
+                <ng-template ngbNavContent>
+
+                    <ng-container *ngIf="analogue.sources.length > 0">
+                        <h3 class="sources-cat">{{'quotedSources' | translate}}</h3>
+                        <evt-biblio-list [data]="analogue.sources"></evt-biblio-list>
+                    </ng-container>
+
+                    <ng-container *ngIf="analogue.extSources.length > 0">
+                        <h3 class="sources-cat">{{'analogueIn' | translate}}</h3>
+                        <evt-biblio-list [data]="analogue.extSources"></evt-biblio-list>
+                    </ng-container>
+
+                </ng-template>
+            </li>
+
+            <li ngbNavItem="xml" *ngIf="analogue.originalEncoding">
+                <a class="source-detail-btn" ngbNavLink>{{'xml' | translate}}</a>
+                <ng-template ngbNavContent>
+                    <pre>{{ analogue.originalEncoding | xmlBeautify }}</pre>
+                    <!-- children bibl element -->
+                    <ng-container *ngIf="analogue.sources && analogue.insideCit">
+                        <ng-container *ngFor="let sourceXML of analogue.sources">
+                            <ng-container *ngIf="sourceXML.type.name === 'BibliographicList'">
+                                <ng-container *ngFor="let intBib of sourceXML.sources">
+                                    <pre>{{ intBib.originalEncoding | xmlBeautify }}</pre>
+                                </ng-container>
+                            </ng-container>
+                            <ng-container *ngIf="sourceXML.type.name !== 'BibliographicList'">
+                                <pre>{{ sourceXML.originalEncoding | xmlBeautify }}</pre>
+                            </ng-container>
+                        </ng-container>
+                    </ng-container>
+                    <!-- external bibl element -->
+                    <ng-container *ngIf="analogue.extSources">
+                        <ng-container *ngFor="let extBiblXML of analogue.extSources">
+                            <ng-container *ngIf="extBiblXML.type.name === 'BibliographicList'">
+                                <ng-container *ngFor="let bibl of extBiblXML.sources">
+                                    <pre>{{ bibl.originalEncoding | xmlBeautify }}</pre>
+                                </ng-container>
+                            </ng-container>
+                            <ng-container *ngIf="extBiblXML.type.name !== 'BibliographicList'">
+                                <ng-container *ngIf="extBiblXML.originalEncoding">
+                                    <pre>{{ extBiblXML.originalEncoding | xmlBeautify }}</pre>
+                                </ng-container>
+                            </ng-container>
+                        </ng-container>
+                    </ng-container>
+                </ng-template>
+            </li>
+        </ul>
+        <div [ngbNavOutlet]="analogueEntryTab" class="tab-content"></div>
+    </div>
+
+</div>
+

src/app/components/analogues/analogue-detail/analogue-detail.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnalogueDetailComponent } from './analogue-detail.component';
+
+describe('AnalogueDetailComponent', () => {
+  let component: AnalogueDetailComponent;
+  let fixture: ComponentFixture<AnalogueDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AnalogueDetailComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnalogueDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/analogues/analogue-detail/analogue-detail.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { EditionLevelType } from 'src/app/app.config';
+
+@Component({
+  selector: 'evt-analogue-detail',
+  templateUrl: './analogue-detail.component.html',
+  styleUrls: ['./analogue-detail.component.scss','../../sources/sources.component.scss'],
+})
+export class AnalogueDetailComponent {
+
+  private edLevel: EditionLevelType;
+
+  @Input() analogue;
+
+  @Input() set editionLevel(el: EditionLevelType) {
+    this.edLevel = el;
+    this.editionLevelChange.next(el);
+  }
+  get editionLevel() { return this.edLevel; }
+  editionLevelChange = new BehaviorSubject<EditionLevelType | ''>('');
+
+  stopPropagation(e: MouseEvent) {
+    e.stopPropagation();
+  }
+
+}
+

src/app/components/analogues/analogue-entry/analogue-entry.component.html

@@ -0,0 +1,21 @@
+<span class="{{ analogueClass }} {{ data.class }}" 
+    (click)="toggleOpened$.next()" 
+    [ngClass]="{opened: opened$ | async}" 
+    [evtHtmlAttributes]="data?.attributes" 
+    [attr.data-edition]="editionLevel" 
+    [evtEditorialConventionLayout]="editorialConventionData"
+    (click)="toggleAppEntryBox($event);"> 
+
+    <ng-container *ngIf="data?.contentToShow.length > 0"> 
+        <ng-container *ngFor="let element of data.contentToShow">
+            <evt-content-viewer [content]="element" [editionLevel]="editionLevel"></evt-content-viewer>
+        </ng-container> 
+    </ng-container>
+
+    <ng-container *ngIf="data?.contentToShow.length === 0"> <evt-note [data]="dataForNote"></evt-note> </ng-container>
+</span>
+<evt-analogue-detail 
+    [editionLevel]="editionLevel" 
+    [evtHtmlAttributes]="data?.attributes"
+    *ngIf="opened$ | async" [analogue]="data">
+</evt-analogue-detail>

src/app/components/analogues/analogue-entry/analogue-entry.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AnalogueEntryComponent } from './analogue-entry.component';
+
+describe('AnalogueEntryComponent', () => {
+  let component: AnalogueEntryComponent;
+  let fixture: ComponentFixture<AnalogueEntryComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AnalogueEntryComponent ],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnalogueEntryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/analogues/analogue-entry/analogue-entry.component.ts

@@ -0,0 +1,96 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { scan, startWith } from 'rxjs/operators';
+
+import { EditorialConventionLayoutData } from '../../../directives/editorial-convention-layout.directive';
+
+import { Analogue, AnalogueClass, Note } from '../../../models/evt-models';
+import { register } from '../../../services/component-register.service';
+import { EVTStatusService } from '../../../services/evt-status.service';
+import { EditionLevelType } from 'src/app/app.config';
+
+export interface AnalogueEntryComponent { }
+@register(Analogue)
+@Component({
+  selector: 'evt-analogue-entry',
+  templateUrl: './analogue-entry.component.html',
+  styleUrls: ['./analogue-entry.component.scss','../../sources/sources.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AnalogueEntryComponent implements OnInit {
+
+  public _data: Analogue;
+
+  private edLevel: EditionLevelType;
+
+  @Input() set data(dt: Analogue) {
+    this._data = dt;
+  }
+
+  @Input() set editionLevel(el: EditionLevelType) {
+    this.edLevel = el;
+    this.editionLevelChange.next(el);
+  }
+  get editionLevel() { return this.edLevel; }
+  editionLevelChange = new BehaviorSubject<EditionLevelType | ''>('');
+
+  get editorialConventionData(): EditorialConventionLayoutData {
+    return {
+      name: '.analogues',
+      attributes: this.data?.attributes || {},
+      editionLevel: this.editionLevel,
+      defaultsKey: '.analogues',
+    };
+  }
+
+  get data() { return this._data; }
+
+  public analogueClass = AnalogueClass;
+
+  public dataForNote = {};
+
+  public opened = false;
+
+  toggleOpened$ = new Subject<boolean | void>();
+  opened$ = this.toggleOpened$.pipe(
+    scan((currentState: boolean, val: boolean | undefined) => val === undefined ? !currentState : val, false),
+    startWith(false),
+  );
+
+  toggleAppEntryBox(e: MouseEvent) {
+    e.stopPropagation();
+    this.opened = !this.opened;
+  }
+
+  closeAppEntryBox() {
+    this.opened = false;
+  }
+
+  stopPropagation(e: MouseEvent) {
+    e.stopPropagation();
+  }
+
+  /** If the element has no text then it's displayed as a note.*/
+  createNote(v): Note|{} {
+
+    return {
+      type: Note,
+      noteType: 'analogue',
+      noteLayout: 'popover',
+      exponent: v.path || '',
+      content: v.extLinkedElements.concat(v.extSources, v.sources) || {},
+      attributes: v.attributes || [],
+    }
+  }
+
+  ngOnInit() {
+    if (this.data.text.length === 0) {
+      this.dataForNote = this.createNote(this.data);
+    }
+  }
+
+  constructor(
+    public evtStatusService: EVTStatusService,
+  ) {}
+
+}