settings-panel/index.js

/**
 * @module settings-panel
 */
'use strict';

const Emitter = require('events').EventEmitter;
const inherits = require('inherits');
const extend = require('just-extend');
const css = require('dom-css');
const uid = require('get-uid');
const fs = require('fs');
const insertCss = require('insert-styles');
const isPlainObject = require('is-plain-obj');
const format = require('param-case');
const px = require('add-px-to-style');
const scopeCss = require('scope-css');

module.exports = Panel


insertCss(fs.readFileSync(__dirname + '/index.css', 'utf-8'));


/**
 * @constructor
 */
function Panel (items, opts) {
	if (!(this instanceof Panel)) return new Panel(items, opts)

	extend(this, opts);

	//ensure container
	if (this.container === undefined) this.container = document.body || document.documentElement;

	this.container.classList.add('settings-panel-container');

	//create element
	if (!this.id) this.id = uid();
	this.element = document.createElement('div')
	this.element.className = 'settings-panel settings-panel-' + this.id;
	if (this.className) this.element.className += ' ' + this.className;

	//create title
	if (this.title) {
		this.titleEl = this.element.appendChild(document.createElement('h2'));
		this.titleEl.className = 'settings-panel-title';
	}

	//create collapse button
	if (this.collapsible && this.title) {
		// this.collapseEl = this.element.appendChild(document.createElement('div'));
		// this.collapseEl.className = 'settings-panel-collapse';
		this.element.classList.add('settings-panel--collapsible');
		this.titleEl.addEventListener('click', () => {
			if (this.collapsed) {
				this.collapsed = false;
				this.element.classList.remove('settings-panel--collapsed');
			}
			else {
				this.collapsed = true;
				this.element.classList.add('settings-panel--collapsed');
			}
		});
	}

	//state is values of items
	this.state = {};

	//items is all items settings
	this.items = {};

	//create fields
	this.set(items);

	if (this.container) {
		this.container.appendChild(this.element)
	}

	//create theme style
	this.update();
}

inherits(Panel, Emitter);


/**
 * Set item value/options
 */
Panel.prototype.set = function (name, value) {
	//handle list of properties
	if (Array.isArray(name)) {
		let items = name;
		items.forEach((item) => {
			this.set(item.id || item.label, item);
		});

		return this;
	}

	//handle plain object
	if (isPlainObject(name)) {
		let items = name;
		let list = [];
		for (let key in items) {
			if (!isPlainObject(items[key])) {
				items[key] = {value: items[key]};
			}
			if (items[key].id == null) items[key].id = key;
			list.push(items[key]);
		}
		list = list.sort((a, b) => (a.order||0) - (b.order||0));

		return this.set(list);
	}

	//format name
	name = name || '';
	name = name.replace(/\-/g,'dash-');
	name = format(name);

	if (name) {
		var item = this.items[name];
		if (!item) item = this.items[name] = { id: name, panel: this };
	}
	//noname items should not be saved in state
	else {
		var item = {id: null, panel: this};
	}

	var initialValue = item.value;
	var isBefore = item.before;
	var isAfter = item.after;

	if (isPlainObject(value)) {
		item = extend(item, value);
	}
	else {
		//ignore nothing-changed set
		if (value === item.value && value !== undefined) return this;
		item.value = value;
	}

	if (item.value === undefined) item.value = item.default;

	if (name) this.state[name] = item.value;

	//define label via name
	if (item.label === undefined && item.id) {
		item.label = item.id;
	}

	//detect type
	if (!item.type) {
		if (item.value && Array.isArray(item.value)) {
			if (typeof item.value[0] === 'string') {
				item.type = 'checkbox';
			}
			else {
				item.type = 'interval'
			}
		} else if (item.scale || item.max || item.steps || item.step || typeof item.value === 'number') {
			item.type = 'range'
		} else if (item.options) {
			if (Array.isArray(item.options) && item.options.join('').length < 90 ) {
				item.type = 'switch'
			}
			else {
				item.type = 'select'
			}
		} else if (item.format) {
			item.type = 'color'
		} else if (typeof item.value === 'boolean') {
			item.type = 'checkbox'
		} else if (item.content != null) {
			item.type = 'raw'
		} else {
			if (item.value && (item.value.length > 140 || /\n/.test(item.value))) {
				item.type = 'textarea'
			}
			else {
				item.type = 'text'
			}
		}
	}

	var field, fieldId;

	if (item.id != null) {
		fieldId = 'settings-panel-field-' + item.id;
		field = this.element.querySelector('#' + fieldId);
	}

	//create field container
	if (!field) {
		field = document.createElement('div');
		if (fieldId != null) field.id = fieldId;
		this.element.appendChild(field);
		item.field = field;
	}
	else {
		//clean previous before/after
		if (isBefore) {
			this.element.removeChild(field.prevSibling);
		}
		if (isAfter) {
			this.element.removeChild(field.nextSibling);
		}
	}

	field.className = 'settings-panel-field settings-panel-field--' + item.type;

	if (item.orientation) field.className += ' settings-panel-orientation-' + item.orientation;

	if (item.className) field.className += ' ' + item.className;

	if (item.style) {
		if (isPlainObject(item.style)) {
			css(field, item.style);
		}
		else if (typeof item.style === 'string') {
			field.style.cssText = item.style;
		}
	}
	else if (item.style !== undefined) {
		field.style = null;
	}

	if (item.hidden) {
		field.setAttribute('hidden', true);
	}
	else {
		field.removeAttribute('hidden');
	}

	//createe container for the input
	let inputContainer = field.querySelector('.settings-panel-input');

	if (!inputContainer) {
		inputContainer = document.createElement('div');
		inputContainer.className = 'settings-panel-input';
		item.container = inputContainer;
		field.appendChild(inputContainer);
	}

	if (item.disabled) field.className += ' settings-panel-field--disabled';

	let components = this.components;
	let component = item.component;

	if (!component) {
		item.component = component = (components[item.type] || components.text)(item);

		if (component.on) {
			component.on('init', (data) => {
				item.value = data
				if (item.id) this.state[item.id] = item.value;
				let state = extend({}, this.state);

				item.init && item.init(data, state)
				this.emit('init', item.id, data, state)
				item.change && item.change(data, state)
				this.emit('change', item.id, data, state)
			});

			component.on('input', (data) => {
				item.value = data
				if (item.id) this.state[item.id] = item.value;
				let state = extend({}, this.state);

				item.input && item.input(data, state)
				this.emit('input', item.id, data, state)
				item.change && item.change(data, state)
				this.emit('change', item.id, data, state)
			});

			component.on('change', (data) => {
				item.value = data
				if (item.id) this.state[item.id] = item.value;
				let state = extend({}, this.state);

				item.change && item.change(data, state)
				this.emit('change', item.id, data, state)
			});
		}
	}
	else {
		component.update(item);
	}

	//create field label
	if (component.label !== false && (item.label || item.label === '')) {
		let label = field.querySelector('.settings-panel-label');
		if (!label) {
			label = document.createElement('label')
			label.className = 'settings-panel-label';
			field.insertBefore(label, inputContainer);
		}

		label.htmlFor = item.id;
		label.innerHTML = item.label;
		label.title = item.title || item.label;
	}

	//handle after and before
	// if (item.before) {
	// 	let before = item.before;
	// 	if (before instanceof Function) {
	// 		before = item.before.call(item, component);
	// 	}
	// 	if (before instanceof HTMLElement) {
	// 		this.element.insertBefore(before, field);
	// 	}
	// 	else {
	// 		field.insertAdjacentHTML('beforebegin', before);
	// 	}
	// }
	// if (item.after) {
	// 	let after = item.after;
	// 	if (after instanceof Function) {
	// 		after = item.after.call(item, component);
	// 	}
	// 	if (after instanceof HTMLElement) {
	// 		this.element.insertBefore(after, field.nextSibling);
	// 	}
	// 	else {
	// 		field.insertAdjacentHTML('afterend', after);
	// 	}
	// }

	//emit change
	if (initialValue !== item.value) {
		this.emit('change', item.id, item.value, this.state)
	}

	return this;
}


/**
 * Return property value or a list
 */
Panel.prototype.get = function (name) {
	if (name == null) return this.state;
	return this.state[name];
}


/**
 * Update theme
 */
Panel.prototype.update = function (opts) {
	extend(this, opts);

	//FIXME: decide whether we have to reset these params
	// if (opts && opts.theme) {
	// 	if (opts.theme.fontSize) this.fontSize = opts.theme.fontSize;
	// 	if (opts.theme.inputHeight) this.inputHeight = opts.theme.inputHeight;
	// 	if (opts.theme.fontFamily) this.fontFamily = opts.theme.fontFamily;
	// 	if (opts.theme.labelWidth) this.labelWidth = opts.theme.labelWidth;
	// 	if (opts.theme.palette) this.palette = opts.theme.palette;
	// }

	//update title, if any
	if (this.titleEl) this.titleEl.innerHTML = this.title;

	//update orientation
	this.element.classList.remove('settings-panel-orientation-top');
	this.element.classList.remove('settings-panel-orientation-bottom');
	this.element.classList.remove('settings-panel-orientation-left');
	this.element.classList.remove('settings-panel-orientation-right');
	this.element.classList.add('settings-panel-orientation-' + this.orientation);

	//apply style
	let cssStr = '';
	if (this.theme instanceof Function) {
		cssStr = this.theme.call(this, this);
	}
	else if (typeof this.theme === 'string') {
		cssStr = this.theme;
	}

	//append extra css
	if (this.css) {
		if (this.css instanceof Function) {
			cssStr += this.css.call(this, this);
		}
		else if (typeof this.css === 'string') {
			cssStr += this.css;
		}
	}

	//scope each rule
	cssStr = scopeCss(cssStr || '', '.settings-panel-' + this.id) || '';

	insertCss(cssStr.trim(), {
		id: this.id
	});

	if (this.style) {
		if (isPlainObject(this.style)) {
			css(this.element, this.style);
		}
		else if (typeof this.style === 'string') {
			this.element.style.cssText = this.style;
		}
	}
	else if (this.style !== undefined) {
		this.element.style = null;
	}

	return this;
}

//instance theme
Panel.prototype.theme = require('./theme/none');

/**
 * Registered components
 */
Panel.prototype.components = {
	range: require('./src/range'),

	button: require('./src/button'),
	text: require('./src/text'),
	textarea: require('./src/textarea'),

	checkbox: require('./src/checkbox'),
	toggle: require('./src/checkbox'),

	switch: require('./src/switch'),

	color: require('./src/color'),

	interval: require('./src/interval'),
	multirange: require('./src/interval'),

	custom: require('./src/custom'),
	raw: require('./src/custom'),

	select: require('./src/select')
};


/**
 * Additional class name
 */
Panel.prototype.className;


/**
 * Additional visual setup
 */
Panel.prototype.orientation = 'left';


/** Display collapse button */
Panel.prototype.collapsible = false;