Sjabloon:Extension:Modern Timeline
Beschrijving
Onderdeel van Extension:Semantic Mediawiki
Home
Voor het weergeven van tijdlijnen
Let op!
De titels van pagina's mogen geen " bevatten en moeten vervangen worden door “”
Aanpassingen
Wijzigen van de kleurstelling in blauwBestand : /Resources/modernTimeline.css
/* Modern timeline Aanpassingen */
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline, .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p{color:#000;}
.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container{background-color:#fff!important;}
/* Basis kleur */
.tl-timemarker, .tl-timemarker-content-container{background-color:#f6faff!important;}
.tl-timemarker-content-container:hover, .tl-timemarker-content-container-long:hover, .tl-timemarker-content-container-small:hover{background-color:#448fe4!important;}
.tl-timemarker:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout:after{background: -moz-linear-gradient(top, rgba(68, 143, 228, 0)0, #5da8ff 80%)!important;background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(68, 143, 228, 0)), color-stop(80%, #5da8ff))!important;background: -webkit-linear-gradient(top, rgba(68, 143, 228, 0)0, #5da8ff 80%)!important;background: -o-linear-gradient(top, rgba(68, 143, 228, 0)0, #5da8ff 80%)!important; background: -ms-linear-gradient(top, rgba(68, 143, 228, 0)0, #5da8ff 80%)!important; background: linear-gradient(to bottom, rgba(68, 143, 228, 0)0, #5da8ff 80%)!important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@thecolor', endColorstr='@thecolor', GradientType=0)}
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout:after,.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p.tl-headline-fadeout:after{content: "";text-align: right;position: absolute;bottom: 0;right: 0;width: 100%;height: 50%;background: -moz-linear-gradient(top, rgba(68,143,228, 0)0, #ebf4ff 50%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(68,143,228, 0)), color-stop(50%, #ebf4ff));background: -webkit-linear-gradient(top, rgba(68,143,228, 0)0, #ebf4ff 50%);background: -o-linear-gradient(top, rgba(68,143,228, 0)0, #ebf4ff 50%);background: -ms-linear-gradient(top, rgba(68,143,228, 0)0, #ebf4ff 50%);background: linear-gradient(to bottom, rgba(68,143,228, 0)0, #ebf4ff 50%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@thecolor', endColorstr='@thecolor', GradientType=0)}
.tl-timemarker:hover.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout::after{background: -moz-linear-gradient(top,rgba(255,255,255,0)0,#f9f9f9 80%)!important;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,0)),color-stop(80%,#f9f9f9))!important;background: -webkit-linear-gradient(top,rgba(255,255,255,0)0,#f9f9f9 80%)!important;background: -o-linear-gradient(top,rgba(255,255,255,0)0,#f9f9f9 80%)!important;background: -ms-linear-gradient(top,rgba(255,255,255,0)0,#f9f9f9 80%)!important;background: linear-gradient(to bottom,rgba(255,255,255,0)0,#f9f9f9 80%)!important;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@thecolor',endColorstr='@thecolor',GradientType=0);}
.tl-timenav{background-color:#fbfcff;}
.tl-timemarker-content:hover, .tl-timemarker-text:hover{color:#f6f6ff!important;}
.tl-timemarker .tl-timemarker-timespan{background-color:#f6f6ff;}
.tl-timemarker-timespan:hover{background-color:#f6f6ff;}
.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-major .tl-timeaxis-tick{color:#615dce;}
.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-minor .tl-timeaxis-tick{color:#a09fc5;}
.tl-timeaxis-tick-text{font-size:16px}
.tl-menubar-button{background-color:#e3f0ff}
.tl-menubar-button:hover{background:#d3e8ff;color:#888;}
.tl-icon-zoom-in,.tl-icon-zoom-out,.tl-icon-goback{color:#999;}
.tl-icon-zoom-in:hover,.tl-icon-zoom-out:hover,.tl-icon-goback:hover{color:#888;}
.tijdslijn{display:inline-block;position:relative;}
.tijdslijnImpressum{display:inline-block;position:relative;width:100%;font-style:italic;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:15px;font-weight:400;margin: 0 0 5px 5px;color:#555;}
.tijdslijnKaart{display:inline-block;position:relative;width:100%;}
.tijdslijnKaartShadow{display:inline-block;-webkit-box-shadow:4px 4px 4px #d6d6d6;-moz-box-shadow:4px 4px 4px #d6d6d6;box-shadow:4px 4px 4px #d6d6d6;}
.tijdslijnCaption{display:inline-block;position:relative;width:100%;font-style:italic;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:18px;font-weight:400;margin: 0 0 5px 5px;color:#555;margin-top:5px;}
.tijdslijnCartograaf{font-size:18px;line-height:23px;}
Aanpassingen 1.2.2: Opnemen extra veld event
- event=coming : tonen van de eerste aankomende gebeurtenis zijn er geen aankomende gebeurtenissen dan wordt de laatste getoond
- event=middle : centreert op het middlste event
Bestand : /src/Timelineoption.php
Invoegen : Achter regel 24 de volgende regel toevoegen
private const PARAM_EVENT = 'event';
Invoegen : Achter regel 97 de volgende regel toevoegen
$definitions[self::PARAM_EVENT]=['type'=>ParameterTypes::STRING,'default'=>''];
Invoegen : Achter regel 136 de volgende regel toevoegen
,'event' => $parameters[self::PARAM_EVENT]
Bestand : /Resources/modernTimeline.js
Vervang mw.loader.using(...) door onderstaande
mw.loader.using( [ 'ext.modern.timeline' ] ).done( function () {
modernTimelineLog( 'Loaded timeline JS' );
for( var timelineId in window.modernTimeline ) {
if( window.modernTimeline.hasOwnProperty( timelineId ) ) {
var timelineJson = window.modernTimeline[timelineId];
if(typeof timelineJson!='undefined'){
switch(true){
case typeof timelineJson.options.start_at_end!='undefined' && timelineJson.options.start_at_end:
timelineJson.options.start_at_slide=parseInt(Object.keys(timelineJson.events).length)-1;
break;
case typeof timelineJson.options.event!='undefined' && timelineJson.options.event=="coming":
var currentDate=parseInt(modernTimelineyyyymmdd());
var id=0;
timelineJson.events.forEach(function(entry){
entry.text.text=entry.text.text.replace("margin: 0 0 5px 5px;","margin: 0 0 5px 0;");
entry.text.text=entry.text.text.replace("font-size:36px;line-height:36px;margin-left:5px;","font-size:"+tmSize+"px;line-height:"+tmSize+"px;");
if(parseInt(entry.start_date.year+modernTimelineZeroPad(entry.start_date.month,2)+modernTimelineZeroPad(entry.start_date.day,2))<currentDate){id++;}
});
timelineJson.options.start_at_slide=id;
break;
case typeof timelineJson.options.event!='undefined' && timelineJson.options.event=="middle":
timelineJson.options.start_at_slide=parseInt(Object.keys(timelineJson.events).length/2);
break;
default:
var timelineJson = window.modernTimeline[timelineId];
}
new TL.Timeline( timelineId, timelineJson, timelineJson.options );
}
}
}
});
function modernTimelineZeroPad(num, places) {
var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num;
}
function modernTimelineyyyymmdd() {
function twoDigit(n) { return (n < 10 ? '0' : '') + n; }
var now = new Date();
return '' + now.getFullYear() + twoDigit(now.getMonth() + 1) + twoDigit(now.getDate());
}