first commit

src/widgets/select-box/SelectBox.js

@@ -0,0 +1,94 @@
+import './select-box.css';
+
+import { El } from '../../utils/dom';
+import { Stack } from '../../core/Stack';
+
+export class SelectBox {
+
+	/**
+	* Select Box, Constructor
+	*/
+	constructor(target) {
+
+		if (!target.length) {
+			return;
+		}
+
+		this.target = target;
+
+		this.labels = El('div', { class: 'labels hide' });
+		this.choices = El('div', { class: 'choices' });
+
+		this.ui = El('div', { class: 'sp-form-control sp-select-box' },
+			this.choices,
+			this.labels
+		);
+
+		let parent = this.target[0].dxParents('.form-field');
+
+		this.target.forEach(function(el) {
+			this.labels.append(el.parentElement);
+		}, this);
+
+		parent.append(this.ui);
+
+		Stack.add(this);
+		
+		this.setEvents();
+	}
+
+	/**
+	* Select Box, Set Events
+	*/
+	setEvents() {
+
+		let that = this;
+
+		this.ui.dxOn('click', function(e) {
+			e.stopPropagation();
+			that.labels.classList.toggle('hide');
+		});
+
+		window.dxOn('resize.selectbox' + this.ekey + ' orientationchange.selectbox' + this.ekey, function() {
+			that.labels.classList.add('hide');
+		});
+
+		document.dxOn('click.selectbox' + this.ekey, function() {
+			that.labels.classList.add('hide');
+		});
+
+		this.labels.dxOn('click', function(e) {
+			e.stopPropagation();
+		});
+
+		this.labels.dxOn('change', 'input', this.update.bind(this) );
+	}
+
+	/**
+	* Select Box, Update
+	*/
+	update() {
+
+		let checked = [];
+
+		this.labels.dxFind('input', input => {
+
+			if (input.checked) {
+				checked.push(input.parentElement.textContent);
+			}
+		});
+
+		this.choices.dxText(checked.join(', '));
+	}
+
+	/**
+	* Select Box, Destroy
+	*/
+	destroy() {
+		
+		window.dxOff('resize.selectbox' + this.ekey + ' orientationchange.selectbox' + this.ekey);
+		document.dxOff('click.selectbox' + this.ekey);
+		
+		Stack.delete(this);
+	}
+}