ractive-ez-accordion/lib/EzAccordion.js

Ractive Ez UI Accordion

import Ractive 			from 'ractive';
import 					     'ractive-ez-core';
import EzAccordionItem 	from './EzAccordionItem.js';
import					     './EzAccordion.less';

const EzAccordion = Ractive.components.EzAccordion = Ractive.extend({
	template: require("./EzAccordion.html"),
	isolated: false,
	
	onrender() {
		const items = this.getAccordionItems();
		
		items.forEach((item, index) => {
			this.setIndex(index, item.get("active"));
		});
	},
	
	getAccordionItems() {
		return this
			.findAllComponents("EzAccordionItem")
			.filter(item => item.findContainer("EzAccordion") == this);
	},
	
	_setItemActive(item, active) {
		active = !!active;
		item.set("active", active);
		item.findComponent("EzAccordionLink").set("active", active);
		item.findComponent("EzAccordionPane").set("active", active);
	},
	
	setIndex(index, active) {
		const items = this.getAccordionItems();
		const allowMultiple = this.get("multiple");
		
		if (index < 0 || index >= items.length) return;
		
		if (!active || allowMultiple) {
			this._setItemActive(items[index], active);
		} else {
			items.forEach((item, i) => this._setItemActive(item, i == index));
		}
	},
	
	toggleItem(item) {
		const items = this.getAccordionItems();
		const index = items.indexOf(item);
		
		this.setIndex(index, !item.get("active"));
		this.fire("itemtoggled", index, item.get("active"));
	},
	
	toggleIndex(index) {
		this.toggleItem(this.getAccordionItems()[index]);
	},
	
	toggleLink(link) {
		const items = this.getAccordionItems();
		const item  = items.filter(it => it.findComponent("EzAccordionLink") == link);
		this.toggleItem(item[0]);
	}
	
});

export default EzAccordion;