Article Documentation

// get an article to work with from your timeline
const article = myTimeline.getActiveArticle();

// set a group of options
article.setOption({
    title: 'New title',
    subtitle: '2005 - 2007',
    from: { year: 2005 },
    to: { month: 3, day: 16 }
});

// set a single field using a path string
article.setOption('from.year', 2005);

// move the article to another lane
article.setOption('lane', 'projects');

// read the current rank without changing it
const rank = article.setOption('rank');

const article = myTimeline.getArticleById(1);

// update a single style property
article.setStyle('border.width', 3);

// update several properties at once
article.setStyle({
    color: '#9b1000',
    header: { height: 60 },
    shadow: { x: 5, y: 10, color: 'blue' }
});

// read a specific override
const borderColor = article.setStyle('border.color');

// inspect the computed style including defaults
const computedStyle = article.style;

const article = myTimeline.getActiveArticle();

// change a single hover property
article.setHoverStyle('star.width', 25);

// apply multiple hover overrides
article.setHoverStyle({
    color: '#9b1000',
    subheader: { height: 60 },
    shadow: { x: 5, y: 10, color: 'green' }
});

// read a hover override
const hoverBorderColor = article.setHoverStyle('border.color');

// inspect the computed hover style
const computedHoverStyle = article.hoverStyle;

const article = myTimeline.getActiveArticle();

// tweak a single active-state property
article.setActiveStyle('border.width', 3);

// provide several active-state overrides
article.setActiveStyle({
    color: '#9b1000',
    header: { height: 60 },
    shadow: { x: 5, y: 10, color: 'blue' }
});

// read an active-state override
const activeBorderColor = article.setActiveStyle('border.color');

// inspect the computed active style
const computedActiveStyle = article.activeStyle;

const article = myTimeline.getActiveArticle();

// move the card to the top-left corner
article.moveTo({ left: 0, top: 0 });
myTimeline.redraw();

// move horizontally only
article.moveTo({ left: 60 });
myTimeline.redraw();

// move vertically only
article.moveTo({ top: 100 });
myTimeline.redraw();

const article = myTimeline.getActiveArticle();

// return to the origin position
article.moveToOffset({ left: 0, top: 0 });
myTimeline.redraw();

// keep the connector vertical but raise the card
article.moveToOffset({ left: 0, top: 60 });
myTimeline.redraw();

// apply both horizontal and vertical offsets
article.moveToOffset({ left: 100, top: -250 });
myTimeline.redraw();