dropdown to accept linked value

pull/1/head
yann300 7 years ago
parent 75a4813978
commit 980274765f
  1. 23
      src/app/ui/dropdown.js

@ -65,7 +65,9 @@ class Dropdown {
self.event = new EventManager() self.event = new EventManager()
self.data = { self.data = {
_options: opts.options || [], _options: opts.options || [],
selected: opts.defaults || [] _dependencies: opts.dependencies || [],
selected: opts.defaults || [],
_elements: []
} }
self._view = {} self._view = {}
self._api = opts.api self._api = opts.api
@ -85,11 +87,12 @@ class Dropdown {
${self._view.selected} ${self._view.selected}
<div class=${css.options} style="display: none;"> <div class=${css.options} style="display: none;">
${self.data._options.map(label => { ${self.data._options.map(label => {
var input = yo`<input onchange=${emit} type="checkbox" />` var input = yo`<input data-idx=${self.data._elements.length} onchange=${emit} type="checkbox" />`
if (self.data.selected.indexOf(label) !== -1) { if (self.data.selected.indexOf(label) !== -1) {
input.checked = true input.checked = true
self.event.trigger('select', [label]) self.event.trigger('select', [label])
} }
self.data._elements.push(input)
return yo` return yo`
<div class=${css.option}> <div class=${css.option}>
${input} ${input}
@ -106,14 +109,30 @@ class Dropdown {
var label = input.nextSibling.innerText var label = input.nextSibling.innerText
if (input.checked) { if (input.checked) {
self.data.selected.push(label) self.data.selected.push(label)
if (event.type === 'change') {
self.event.trigger('select', [label]) self.event.trigger('select', [label])
updateDependencies(label)
}
} else { } else {
var idx = self.data.selected.indexOf(label) var idx = self.data.selected.indexOf(label)
self.data.selected.splice(idx, 1) self.data.selected.splice(idx, 1)
if (event.type === 'change') {
self.event.trigger('deselect', [label]) self.event.trigger('deselect', [label])
updateDependencies(label)
}
} }
self._view.selected.children[0].innerText = `[${self.data.selected.length}] ${self.data.selected.join(', ')}` self._view.selected.children[0].innerText = `[${self.data.selected.length}] ${self.data.selected.join(', ')}`
} }
function updateDependencies (changed) {
if (self.data._dependencies[changed]) {
for (var dep in self.data._dependencies[changed]) {
var label = self.data._dependencies[changed][dep]
var el = self.data._elements[self.data._options.indexOf(label)]
el.checked = !el.checked
emit({currentTarget: el, type: 'changeDependencies'})
}
}
}
function show (event) { function show (event) {
event.stopPropagation() event.stopPropagation()
var options = event.currentTarget.children[1] var options = event.currentTarget.children[1]

Loading…
Cancel
Save