TheaterEncyclopedie:Tijdlijnen/Test semantic timeline result format

Uit TheaterEncyclopedie
Ga naar: navigatie, zoeken

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