TlnEditionModule

How to use TlnPageViewComponent

Given a page IRI, this component will request all relevant information and display the data with PageViewComponent.

On more information about this module see the documentation.

Import Module

In your Angular module file, e.g. app.module.ts:

import { TlnEditionModule} from './tln-edition/tln-edition.module';

@NgModule({
  declarations: [ AppComponent ],
  imports: [ TlnEditionModule ],
  .
  .
  .

In your template:

<tln-page-view [configuration]="configuration"
               [page]="page_iri" [selectedViewOption]="selectedViewOption"
               [selectedWords]="selectedWords" [selectedLines]="selectedLines"
               [assignClass]="assignClass" [assignStyle]="assignStyle" [findText]="findText"
               [preferPrimaryUrl]="true" [queryService]="queryService" [zoomFactor]="zoomFactor"></tln-page-view>

List of inputs:

• assignClass:
  
  An OPTIONAL function that will be passed to TextFieldComponent in order to return a further highlight class to the word rects when the internal function would return 'textfield unhighlighted'

• assignStyle:
  
  An OPTIONAL function that will be passed to TextFieldComponent and MarginFieldComponent in order to return a (svg-)style object to the word and line rects. This function allows the user to extend the style of this component. E.g. by returning { fill: blue } the function overwrites the default behaviour and sets the default highlight color to blue.

• configuration: OPTIONAL configuration in the form {'ComponentName|*': { 'PropertyName': value }}

• findText: OPTIONAL the search text of words that should be highlighted.

• page: the IRI of the page that should be displayed

• preferPrimaryUrl: OPTIONAL should primary Url be used for image. Use secondary Url if false. Default: true.

• queryService: OPTIONAL pass a queryService that implements TlnQueryServiceInterface (see tln-edition/models.ts)

• selectedWords: OPTIONAL identifiers of selected words that should be highlighted (i.e. list of IRIs or Ids).

• selectedLines: OPTIONAL identifiers of selected words that should be highlighted (i.e. list of IRIs or Ids).

• selectedViewOption: OPTIONAL selected view option (Transkription, Faksimile or Synopse), use VIEW_OPTIONS from tln-edition/constants.ts.

• zoomFactor: OPTIONAL global zoom factor

For your Data

Use the interfaces from tln-edition/models.ts for your data:

import { externalAssignClass, externalAssignStyle, Identifier, Image, Line, PositionalObject, TextByForeignHand, Word } from './tln-edition/models';

For Data retrieval

Use the service TlnQueryService for your data revtrieval.

Import:

import { TlnQueryService } from './tln-edition/services';

Inject service:

constructor(private queryService: TlnQueryService) { }

Query and subscribe to results:

ngOnInit() {
   this.queryService.getData(query).subscribe(results => { this.doSomething(results) });
}

Alternatively, pass your own query service that implements TlnQueryServiceInterface via input [queryService] to <tln-page-view>.

For mouse event interaction

Use the PageViewService in order to react on mouse events.

Import:

import { PageViewService, TlnQueryService } from './tln-edition/services';

Inject service:

constructor(private pageViewService: PageViewService) {}

Subscribe to mouse events on words and lines:

ngOnInit() {
   this.pageViewService.onClickedWord.subscribe(
      (clickedWord: Word) => { this.doSomething(clickedWord); }
   );
   this.pageViewService.onClickedLine.subscribe(
      (clickedLine: Line) => { this.doSomething(clickedLine); }
   );
   this.pageViewService.onHoveredWord.subscribe(
      (hoveredWord: Word) => { this.doSomething(hoveredWord); }
   );
   this.pageViewService.onHoveredLine.subscribe(
      (hoveredLine: Line) => { this.doSomething(hoveredLine); }
   );
   this.pageViewService.offHoveredWord.subscribe(
      (unhoveredWord: Word) => { this.doSomething(unhoveredWord); }
   );
   this.pageViewService.offHoveredLine.subscribe(
      (unhoveredLine: Line) => { this.doSomething(unhoveredLine); }
   );
}