Timeline

API

Timeline2

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.buttonSelector String (optional, default '[data-ecl-timeline-button]')
  • options.labelSelector String (optional, default '[data-ecl-label]')
  • options.labelExpanded String (optional, default 'data-ecl-label-expanded')
  • options.labelCollapsed String (optional, default 'data-ecl-label-collapsed')
  • options.attachClickListener Boolean Whether or not to bind click events (optional, default true)

init

Initialise component.

destroy

Destroy component.

handleClickOnButton

Expand timeline if not such already.

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope

• $1 Object (optional, default {})

  • $1.TIMELINE2 (optional, default {})

Returns Timeline2 An instance of Timeline2.

Setup

There are 2 ways to initialise the component.

Automatic

Add data-ecl-auto-init="Timeline2" attribute to component's markup:

<ol
  class="ecl-timeline2"
  data-ecl-timeline="true"
  data-ecl-auto-init="Timeline2"
>
  ...
</ol>

Use the ECL library's autoInit() (ECL.autoInit()) when your page is ready or other custom event you want to hook onto.

Manual

Get target element, create an instance and invoke init().

Given you have 1 element with an attribute data-ecl-timeline2 on the page:

var elt = document.querySelector('[data-ecl-timeline2]');
var timeline2 = new ECL.Timeline2(elt);
timeline2.init();