Master HistropediaJS

const timeline = new Histropedia.Timeline(container);

// Load articles on to the timeline
timeline.load([
  {
    id: 1,
    title: 'Moon Landing',
    subtitle: 'Apollo 11',
    from: { year: 1969, month: 7, day: 16 },
    to: { year: 1969, month: 7, day: 24 }
  },
  {
    id: 2,
    title: 'World Wide Web',
    subtitle: 'Tim Berners-Lee proposal',
    from: { year: 1989, month: 3, day: 12 }
  }
]);

timeline.loadLanes([
  {
    id: 'people',
    title: 'People',
    layout: { heightWeight: 2 },
    article: {
      defaultCardLayout: 'landscape',
      defaultStyle: { width: 220 }
    }
  },
  {
    id: 'projects',
    title: 'Projects'
  }
]);

timeline.loadLaneArticles('projects', [
  {
    id: 'analytical-engine',
    title: 'Analytical Engine',
    from: { year: 1837 }
  },
  {
    id: 'difference-engine',
    title: 'Difference Engine',
    from: { year: 1822 }
  }
]);

const timeline = new Histropedia.Timeline(container);

// Load bands on to the timeline
timeline.loadTimeBands([
  {
    id: 1,
    title: "18th Century",
    from: { year: 1800, precision: Histropedia.PRECISION_CENTURY }
  },
  {
    id: 2,
    title: "Presidency of John F. Kennedy",
    from: { year: 1961, month: 1, day: 20 },
    to: { year: 1963, month: 1, day: 22 }
  },
  {
    id: 3,
    title: "Digital Age (1970s - present)",
    from: { year: 1970, precision: Histropedia.PRECISION_DECADE },
    isToPresent: true
  }
]);

// set new width and height
timeline.setOption({ width: 700, height: 400 });

// set mainLine size
timeline.setOption('style.mainLine.size', 10);

// set default article subheader height and color
timeline.setOption('article.defaultStyle.subheader', { height: 20, color: '#EEE' });

// get current animation settings
const animSettings = timeline.setOption('article.animation');

const container = document.getElementById('timeline');
const timeline = new Histropedia.Timeline(container);

// Keep the timeline sized with the container
const resize = () => {
  timeline.setSize(container.clientWidth, container.clientHeight);
};

window.addEventListener('resize', resize);
resize();

const onArticleSelect = (article) => {
  console.log('Selected article:', article.title);
};

timeline.on('article-select', onArticleSelect);

timeline.on('viewport-drag-start', (dragPayload, pointerEvent) => {
  console.log('Viewport drag started', dragPayload, pointerEvent);
  console.log(this); // Always the timeline instance for all handlers
});

const onZoom = ({ zoom }) => {
  console.log('Zoom level:', zoom);
};

timeline.on('zoom', onZoom);

// stop listening when the UI panel closes
timeline.off('zoom', onZoom);

// get the article with id = 1
const article = timeline.getArticleById(1);

// check article data (see article options for structure)
console.log(article.data);

// call article methods
article.setOption('hidePeriodLine', true);

// get the currently active article
const article = timeline.getActiveArticle();

// check article data
console.log(article?.data);

// call article methods when available
article?.setOption('hidePeriodLine', true);

const peopleLane = timeline.getLaneById('people');

peopleLane?.setStyle('title.color', '#1e3a8a');
peopleLane?.hide();

timeline.moveLaneToIndex('people', 0);
timeline.moveLaneAfter('projects', 'people');
timeline.moveLaneUp('reference');
timeline.moveLaneDown('people');

// create Dmy for 5th Jan 1970
const date = new Histropedia.Dmy(1970, 1, 5);

// pan to date, with date located on left edge of canvas
timeline.goToDateAnim(date);

// ... with date located in centre of the canvas
timeline.goToDateAnim(date, { offsetX: timeline.width / 2 });

// ... with all options set
const options = {
    duration: 400,
    offsetX: 50,
    complete: () => console.log('done!')
};
timeline.goToDateAnim(date, options);

timeline.fitDateRange(
  { year: 1961, month: 1, day: 20 },
  { year: 1963, month: 11, day: 22 },
  {
    padding: { left: 80, right: 80 },
    animation: { active: true, duration: 500 }
  }
);

const article = timeline.getArticleById('apollo-11');

if (article) {
  timeline.fitArticleRange(article, {
    padding: 80,
    animation: { active: true, duration: 500 }
  });
}

// Fit all currently unfiltered articles
timeline.fitArticles();

// Fit only articles in a specific lane
timeline.fitArticles({
  padding: { left: 60, right: 60 },
  articleFilter: article => article.data.lane === 'projects',
  animation: { active: true, duration: 500 }
});

// 50 pixels backward in time (viewport moves left)
timeline.goToPixelAnim(-50);

// 1 million pixels forward in time (viewport moves right)
timeline.goToPixelAnim(1e6);

// whole canvas width, useful for next/previous navigation arrows
timeline.goToPixelAnim(timeline.width);

// ... with all available options set
const options = {
    duration: 400,
    easing: 'linear',
    complete: () => console.log('done!')
};
timeline.goToPixelAnim(timeline.width, options);

// create Dmy for 5th Jan 1970
const date = new Histropedia.Dmy(1970, 1, 5);

// jump to date, with date located on left edge of canvas
timeline.setStartDate(date);

// ... with date located in centre of the canvas
timeline.setStartDate(date, timeline.width / 2);

// set date using string notation
timeline.setStartDate('1970-6'); // 1st June 1970

// set BC date using string notation
timeline.setStartDate('-500-3-25'); // 25th March 500 BC

// read the current zoom
const currentZoom = timeline.getZoom();

// zoom out by a small amount
timeline.setZoom(currentZoom + 0.5);

// or, zoom in by a small amount
timeline.setZoom(currentZoom - 0.5);

// set zoom level 13.5, zooming from the centre of the canvas
timeline.setZoom(13.5);

// ... zooming from the left edge of the canvas
timeline.setZoom(13.5, 0);

// ... zooming from the right edge of the canvas
timeline.setZoom(13.5, timeline.width);

// hide currently active article and set date labels to green
timeline.getActiveArticle().hiddenByFilter = true;
timeline.options.style.dateLabel.major.color = 'green';

// redraw the timeline using the default `repositionRedraw`
timeline.requestRedraw();

// specify the most basic redraw for extra performance
timeline.requestRedraw(timeline.redraw);

// or request a full restack of articles
timeline.requestRedraw(timeline.defaultRedraw);

// hide currently active article and set date labels to green
timeline.getActiveArticle().hiddenByFilter = true;
timeline.options.style.dateLabel.major.color = 'green';

// redraw to see the results
timeline.redraw();

// For best performance call via requestRedraw instead
timeline.requestRedraw(timeline.redraw);

// hide currently active article and set date labels to green
timeline.getActiveArticle().hiddenByFilter = true;
timeline.options.style.dateLabel.major.color = 'green';

// redraw to see the changes
timeline.repositionRedraw();

// For best performance call via requestRedraw instead
timeline.requestRedraw(); // defaults to repositionRedraw

// hide currently active article and set date labels to green
timeline.getActiveArticle().hiddenByFilter = true;
timeline.options.style.dateLabel.major.color = 'green';

// redraw to see the changes with restacked articles
timeline.defaultRedraw();

// For best performance call via requestRedraw instead
timeline.requestRedraw(timeline.defaultRedraw);

// 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();

const lane = timeline.getLaneById('people');

lane.setOption({
  title: 'People & biographies',
  article: {
    defaultCardLayout: 'landscape',
    defaultStyle: { width: 220 }
  }
});

const layout = lane.setOption('layout');

const lane = timeline.getLaneById('projects');

lane.setStyle('title.color', '#155e75');
lane.setStyle({
  body: {
    backgroundColor: 'rgba(207, 250, 254, 0.35)',
    borderColor: 'rgba(14, 116, 144, 0.35)'
  }
});

const lane = timeline.getLaneById('reference');

lane.hide();
lane.show();

const peopleLane = timeline.getLaneById('people');

peopleLane.moveToIndex(0);
peopleLane.moveUp();
peopleLane.moveDown();

const projectsLane = timeline.getLaneById('projects');

projectsLane.moveBefore('people');
projectsLane.moveAfter('reference');

const band = timeline.timeBands.find(b => b.id === 2);

// Batch update fields
band.setOption({
  title: 'Reagan Presidency',
  to: { year: 1989, month: 1, day: 20, precision: Histropedia.PRECISION_DAY }
});

// Read the current end date
const end = band.setOption('to');

const spotlight = timeline.timeBands.find(b => b.id === 3);

// Update a single field
spotlight.setStyle('backgroundColor', 'rgba(12, 74, 110, 0.35)');

// Apply multiple overrides
spotlight.setStyle({
  text: {
    color: '#0f172a',
    align: 'center'
  }
});

// Read the current override
const labelColor = spotlight.setStyle('text.color');

timeline.on('timeline-click', ({ viewport }, evt) => {
  console.log('timeline-click', viewport, evt);
});

timeline.on('timeline-dblclick', ({ viewport }, evt) => {
  console.log('timeline-dblclick', viewport, evt);
});

timeline.on('timeline-render-start', (redrawCtx) => {
  const { canvasContext, top } = redrawCtx;
  // canvasContext is the actual CanvasRenderingContext2D used to draw the timeline
  console.log('render-start', top, canvasContext);
});

timeline.on('timeline-render-end', ({ canvasContext, drawCycleContext }) => {
  console.log('render-end', drawCycleContext, canvasContext);
});

timeline.on('timeline-state-change', (stateJson) => {
  console.log('timeline-state-change', JSON.parse(stateJson));
});

timeline.on('article-pointerenter', (article, evt) => console.log('enter', article, evt));
timeline.on('article-pointerleave', (article) => console.log('leave', article));

timeline.on('article-click', (article, evt) => console.log('click', article, evt));

timeline.on('article-select', (article) => console.log('select', article));

timeline.on('article-drag', (article, { dx, dy, totalDx, totalDy }) => {
  console.log('drag', article, { dx, dy, totalDx, totalDy });
});

// Unified zoom stream
timeline.on('zoom', ({ zoom, zoomDelta }) => {
  console.log('zoom', zoom, zoomDelta);
});

// Pinch lifecycle
timeline.on('zoom-pinch-start', ({ centre, zoom }) => console.log('pinch start', centre, zoom));
timeline.on('zoom-pinch', ({ centre, zoomDelta, totalZoomDelta }) => console.log('pinch', centre, zoomDelta, totalZoomDelta));
timeline.on('zoom-pinch-end', () => console.log('pinch end'));

// Wheel steps
timeline.on('zoom-wheel', ({ centre, zoom, zoomDelta }, evt) => {
  console.log('wheel', centre, zoom, zoomDelta, evt);
});

timeline.on('viewport-drag-start', (payload) => console.log('drag-start', payload));
timeline.on('viewport-drag', ({ dx, totalDx }) => console.log('drag', dx, totalDx));
timeline.on('viewport-drag-end', (payload) => console.log('drag-end', payload));

// Legacy helper (prefer viewport-drag-end)
timeline.on('drag-end', (totalDx) => console.log('drag-end (legacy)', totalDx));