Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F88811650
README.md
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Sun, Oct 20, 19:34
Size
4 KB
Mime Type
text/x-java
Expires
Tue, Oct 22, 19:34 (1 d, 21 h)
Engine
blob
Format
Raw Data
Handle
21780572
Attached To
rNIETZSCHEBETAAPP Nietzsche-Beta-App
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
Log In to Comment