ractive-ez-tabs/lib/EzTabs.js

Ractive Ez UI Tabs

import Ractive 		from 'ractive';
import					 'ractive-ez-core';
import EzTabLinks	from './EzTabLinks.js';
import EzTabPanes	from './EzTabPanes.js';
import 					 './EzTabs.less';

const EzTabs = Ractive.components.EzTabs = Ractive.extend({
	template: require("./EzTabs.html"),
	
	components: {
		EzTabLinks,
		EzTabPanes
	},
	
	data() {
		return {
			align: "top"
		};
	},
	
	_getLinks() {
		return this
			.findComponent("EzTabLinks")
			.findAllComponents("EzTabLink");
	},
	
	_getPanes() {
		return this
			.findComponent("EzTabPanes")
			.findAllComponents("EzTabPane")
			.filter(pane => pane.findContainer("EzTabs") == this);
	},
	
	onrender() {
				
		const links = this._getLinks();
		
		const hasActiveLink = links.some(link => {
			const isActive = link.get("active");
			if (isActive) this.activate(link);
			return isActive;
		});
		
		const hasActivePane = hasActiveLink || this._getPanes().some((pane, i) => {
			const isActive = pane.get("active");
			if (isActive) this.activate(links[i]);
			return isActive;
		});
		
		if (!hasActiveLink && !hasActivePane && links.length) {
			this.activate(links[0]);
		}
	},
	
	activate(activeLink) {
		const links = this._getLinks();
		const panes = this._getPanes();
		links.forEach(function(link, i) {
			const isActive = link == activeLink;
			link.set("active", isActive);
			panes[i].set("active", isActive);
		});
		this.fire("tabchange", links.indexOf(activeLink));
	}
});

export default EzTabs;