Page MenuHomec4science
Files F65980724

README.md
No OneTemporary
Actions

File Metadata

Created
Fri, Jun 7, 12:07

README.md
View Options

# 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); }
);
}
```

Event Timeline

c4science · Help