corporate-frontend-mithril
Version:
Corporate frontend MithrilJS modules
97 lines (79 loc) • 2.43 kB
JavaScript
const observables = require('../observables/observables');
const strings = require('../../lib/helpers/strings');
const _ = require('lodash');
module.exports = function() {
let _id = `dropdown-${strings.random()}`;
let _title = '';
let _options = [];
let _placeholder = 'Select';
let _limitHeight = false;
let _isOptionsVisible = false;
let _selectedOpt = undefined;
let _clickingTarget = undefined;
let _nextFn = undefined;
//click others will close the dropdown options
//FIXME: I don't think this is a good idea to save the clickTarget
observables.documentClick$.subscribe(e => {
if(!Object.is(e.target, _clickingTarget)) {
_isOptionsVisible = false;
m.redraw();
}
_clickingTarget = undefined;
});
return {
get id() {
return _id;
},
get title() {
return _title;
},
set title(v) {
_title = v;
},
get selectedOpt() {
return _selectedOpt || {name: _placeholder, value: ''};
},
get options() {
return _isOptionsVisible ? _options : [] ;
},
/**
* Reset options if the options different with current options
*/
set options(v) {
if(_.isEqual(_options, v)) return;
//reset dropdown
_options = v;
_isOptionsVisible = false;
_selectedOpt = undefined;
},
get placeholder() {
return _placeholder;
},
set placeholder(v) {
if(Object.is(_placeholder, v)) return;
if(Object.is(v, undefined)) return;
_placeholder = v;
},
get limitHeight() {
return _limitHeight ? '.b-dropdown-simple__panel--limit-height' : '';
},
set limitHeight(v) {
_limitHeight = v ? true : false;
},
set nextFn(v) {
_nextFn = v;
},
//Handlers
toggleOptionsVisibility(e) {
_clickingTarget = e.target;
_isOptionsVisible = !_isOptionsVisible;
},
next({e,obj}) {
_clickingTarget = e.target;
_isOptionsVisible = false;
if(Object.is(_selectedOpt, obj)) return;
_selectedOpt = obj;
if(_nextFn) _nextFn({e,obj});
},
};
};