TheaterEncyclopedie:Tijdlijnen/Test semantic timeline result format
Uit TheaterEncyclopedie
Op deze pagina worden tests uitgevoerd om te beoordelen of het Result format "timeline" van de Extensie:Semantic Result Formats goed functioneert. Volgens de documentatie wordt dit format momenteel niet onderhouden.
Test 1
Tijdlijn van mensen met een geboortedatum in 1970.
Afbeelding wordt niet compleet in pop-up weergegeven, maar lijkt verder correct te werken.
Dezelfde query maar in het (vergelijkbare) "eventline" formaat (zoek de verschillen...!?!):
Test 2 - Modern Timeline
Documentatie:
- GitHub(beperkt)
- On-wiki (klik hieronder)
Klik voor Documentatie
⧼validator-describe-header-parameter⧽ | ⧼validator-describe-header-aliases⧽ | ⧼validator-describe-header-type⧽ | ⧼validator-describe-header-default⧽ | ⧼validator-describe-header-description⧽ |
---|---|---|---|---|
width | - | ⧼validator-type-dimension⧽ | 100% | Timeline width in %. Can also be specified in px, em and ex |
height | - | ⧼validator-type-dimension⧽ | 400px | Timeline height in pixels. Can also be specified in em and ex |
bookmark | - | ⧼validator-type-boolean⧽ | no | Make the timeline bookmarkable via the page URL |
background | - | ⧼validator-type-string⧽ | white | Background color for the timeline slides (CSS color values) |
scale factor | scalefactor | ⧼validator-type-integer⧽ | 2 | Timeline width in screen widths at first presentation |
position | - | ⧼validator-type-string⧽ | bottom | Display the timeline navigation at the top or at the bottom |
tick width | tickwidth | ⧼validator-type-integer⧽ | 100 | Optimal distance (in pixels) between ticks on the axis |
start slide | startslide | ⧼validator-type-integer⧽ | 1 | The first slide to display when the timeline is loaded |
start at end | startatend | ⧼validator-type-boolean⧽ | no | Start with the last timeline slide |
transition duration | duration, transitionduration | ⧼validator-type-integer⧽ | 1000 | Slide transition in milliseconds |
navigation height | navigationheight | ⧼validator-type-dimension⧽ | 200px | Height of the timeline navigation section in % or px |
template | - | ⧼validator-type-string⧽ | ⧼validator-describe-empty⧽ | Name of a template to show the slide area with |
image property | imageproperty, image, imageproperty | ⧼validator-type-string⧽ | ⧼validator-describe-empty⧽ | Semantic property of type Page. Needs to be queried as print request |
Opmerkingen:
- Gebruikt in combinatie met Sjabloon:MT_Test_tijdlijn
- Eigenschappen worden als parameter meegegeven aan sjabloon
- De resultaatpagina's worden m.b.v. de parameter "title" meegegeven aan het sjabloon (geen hoofdletter, dus niet "Title"!)
- Opgegeven hoogte is "totale hoogte" van de tijdsbalk' + slides ; circa 150px wordt ingenomen door de tijdbalk, de rest is voor de slides.
- Vormgeving tijdbalk eventueel aanpassen via CSS (niet gedocumenteerd; zie ook hieronder)
CSS / Vormgeving
NB: T.z.t. verplaatsen naar eigen pagina (?)
Enkele HTML-elementen / CSS-selectors
tl-timeline tl-layout-landscape /* CLASS timeline */ #modern_timeline_1 /* ID timeline nr 1 */ storyslider /* CLASS header */ #tl-capzhn /* ID header */ tl-timenav /* CLASS timeline navbar - gehele onderste deel */ tl-timenav-slider-background /* CLASS achtergrond slider */ /* marker */ <div class="tl-timemarker-content-container tl-timemarker-content-container-small" style="height: 23px;"> <div class="tl-timemarker-content tl-timemarker-content-small"> <div class="tl-timemarker-text"> <h2 class="tl-headline" style="-webkit-line-clamp: 1;">Eric Whitacre</h2> </div> </div> </div>
Voorbeelden
De extensie gebruikt de library TimelineJS, waarmee heel uiteenlopende tijdlijnen gemaakt kunnen woorden. Zie voorbeelden op de TimelineJS website