Obsidian Portal - Campaign websites for Dungeons and Dragons and other tabletop RPGs

timeline

Author: nuadaria

Slug: timeline

Type: WikiPage

System: All Game Systems

DST Source Code

HTML Template

<div class="wrapper">
   <div class="uicontainer">
      <div class="entity_container">
         <span class="timeline_info">Follow steps one and two from <a href="https://timeline.knightlab.com/#make" target="_blank">here</a> and enter the URL for your Google Sheet below</span>
         </br>
         <span class="dsf dsf_sheet_url timeline_editFields" defaultString="Google Sheet URL" >Google Sheet URL</span><span class="icon-edit"></span>
         </br>
         </br>
         <span class="timeline_info">Enter Month Name values below as a comma separated string with 12 entries or it will default to the Gregorian Calendar</span>
         </br>
         <span class="dsf dsf_month_long timeline_editFields" defaultString="January,February,March,April,May,June,July,August,September,October,November,December" >January,February,March,April,May,June,July,August,September,October,November,December</span><span class="icon-edit"></span>
         </br>
         </br>
         <span class="timeline_info">Enter Month Abbreviation values below as a comma separated string with 12 entries or it will default as above</span>
         </br>
         <span class="dsf dsf_month_abbrv timeline_editFields" defaultString="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sept,Oct,Nov,Dec" >Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sept,Oct,Nov,Dec</span><span class="icon-edit"></span>
         </br>
      </div>
   </div>
</div>
<div id='timeline-embed' style="width: 100%; height: 600px"></div>

CSS

@import url(https://nuadaria.github.io/TimelineJS3_OP/dist/css/timeline.css);

.timeline_editFields {
    border: 1px solid #CCC;
    height: 20px;
    margin: 0px 5px 5px 0px;
    overflow: hidden;
    padding: 5px;
    white-space: nowrap;
}

.timeline_info{
    font-weight: bold;
}

JavaScript

function timeline_dataPostLoad(data) {
    if (!data.isEditable) {
        $(".entity_container").hide();
    }

    var includes = document.createElement('script');
    includes.type = 'text/javascript';
    includes.src = 'https://nuadaria.github.io/TimelineJS3_OP/dist/js/timeline.js';
    includes.onload = function() {
        timeline_makeTimeline();
    };
    document.body.appendChild(includes);
}

function timeline_dataChange(opts){
    timeline_makeTimeline();
}

var timeline_makeTimeline = function() {
    var options = {};
    let sheetURL = $(".dsf_sheet_url").text() != 'Google Sheet URL' || '' ? $(".dsf_sheet_url").text() : '';
    timeline = new TL.Timeline('timeline-embed',
    sheetURL,
    options);

    timeline_waitForElm('.tl-menubar').then((elm) => {
        $(".tl-menubar").remove();
    });
    
    let rawMonths = $(".dsf_month_long").text();
    let rawMonthsAbbrv = $(".dsf_month_abbrv").text();
    let monthsLong = '';
    let monthsAbbrv = '';

    if (rawMonths != '' && rawMonths.includes(',') && rawMonths.split(',').length == 12) {
        monthsLong = rawMonths.split(',');
    } else {
        monthsLong = 'January,February,March,April,May,June,July,August,September,October,November,December';
    }

    if (rawMonthsAbbrv != '' && rawMonthsAbbrv.includes(',') && rawMonthsAbbrv.split(',').length == 12) {
        monthsAbbrv = rawMonthsAbbrv.split(',');
    } else {
        monthsAbbrv = 'January,February,March,April,May,June,July,August,September,October,November,December';
    }

    timeline_waitForElm('.tl-timeaxis-tick-text').then((elm) => {
        $(".tl-timeaxis-tick-text").each(function () {
            $(this).text($(this).text().replace("Jan.", monthsAbbrv[0]));
            $(this).text($(this).text().replace("Feb.", monthsAbbrv[1]));
            $(this).text($(this).text().replace("Mar.", monthsAbbrv[2]));
            $(this).text($(this).text().replace("Apr.", monthsAbbrv[3]));
            $(this).text($(this).text().replace("May", monthsAbbrv[4]));
            $(this).text($(this).text().replace("Jun.", monthsAbbrv[5]));
            $(this).text($(this).text().replace("Jul.", monthsAbbrv[6]));
            $(this).text($(this).text().replace("Aug.", monthsAbbrv[7]));
            $(this).text($(this).text().replace("Sept.", monthsAbbrv[8]));
            $(this).text($(this).text().replace("Oct.", monthsAbbrv[9]));
            $(this).text($(this).text().replace("Nov.", monthsAbbrv[10]));
            $(this).text($(this).text().replace("Dec.", monthsAbbrv[11]));
        
            $(this).text($(this).text().replace("January", monthsLong[0]));
            $(this).text($(this).text().replace("February", monthsLong[1]));
            $(this).text($(this).text().replace("March", monthsLong[2]));
            $(this).text($(this).text().replace("April", monthsLong[3]));
            $(this).text($(this).text().replace("May", monthsLong[4]));
            $(this).text($(this).text().replace("June", monthsLong[5]));
            $(this).text($(this).text().replace("July", monthsLong[6]));
            $(this).text($(this).text().replace("August", monthsLong[7]));
            $(this).text($(this).text().replace("September", monthsLong[8]));
            $(this).text($(this).text().replace("October", monthsLong[9]));
            $(this).text($(this).text().replace("November", monthsLong[10]));
            $(this).text($(this).text().replace("December", monthsLong[11]));
        });
    });
};

function timeline_waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

Back

timeline

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account