Category filter

API

CategoryFilter

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.itemSelector String Selector for the tree parent items (optional, default '.ecl-category-filter__item--has-children')
  • options.attachClickListener Boolean Whether or not to bind click events (optional, default true)

init

Initialise component.

destroy

Destroy component.

handleClickExpand

Expand tree list item.

Parameters

• e Event

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope

• $1 Object (optional, default {})

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

Returns CategoryFilter An instance of CategoryFilter.

Setup

There are 2 ways to initialise the component.

Automatic

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

<div
  class="ecl-category-filter"
  data-ecl-category-filter
  data-ecl-auto-init="CategoryFilter"
>
  ...
</div>

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-category-filter on the page:

var elt = document.querySelector('[data-ecl-category-filter]');
var categoryFilter = new ECL.CategoryFilter(elt);
categoryFilter.init();