diff --git a/ui (gen4)/lib/widget/browse2.html b/ui (gen4)/lib/widget/browse2.html index 1c95d5a5..18fc5e31 100755 --- a/ui (gen4)/lib/widget/browse2.html +++ b/ui (gen4)/lib/widget/browse2.html @@ -195,7 +195,7 @@ requirejs([ }, { itemButtons: [ ['–'], - ['□'], + ['□', function(){ console.log('BUTTON:', ...arguments) }], ], }) diff --git a/ui (gen4)/lib/widget/browse2.js b/ui (gen4)/lib/widget/browse2.js index 96ef7a1d..e59367cc 100755 --- a/ui (gen4)/lib/widget/browse2.js +++ b/ui (gen4)/lib/widget/browse2.js @@ -2565,9 +2565,12 @@ var BaseBrowserPrototype = { getMode: 'get', skipDisabled: true, }), - blur: makeItemEventMethod('blur', function(evt, items){ - items.forEach(function(item){ - delete item.focused }) }), + blur: makeItemEventMethod('blur', + function(evt, items){ + items.forEach(function(item){ + delete item.focused }) }, + null, + function(){ return this.focused }), // NOTE: .next() / .prev() will wrap around the first/last elements... next: function(){ this.focus('next').focused || this.focus('first') @@ -2625,6 +2628,34 @@ var BaseBrowserPrototype = { function(elem){ return elem.value && elem.children }, {iterateCollapsed: true}), + // XXX not sure about these... + disable: makeItemEventMethod('disable', + function(evt, items){ + var that = this + var change = false + items.forEach(function(item){ + change = item.disabled = true + item.focused + && that.blur(item) + }) + // need to update for changes to show up... + change + && this.update() }, + null, + // XXX is this a good default??? + function(){ return this.focused }), + enable: makeItemEventMethod('enable', + function(evt, items){ + var change = false + items.forEach(function(item){ + change = change || item.disabled + delete item.disabled }) + // need to update for changes to show up... + change + && this.update() }, + null, + { skipDisabled: false }), + // primary/secondary/ternary? item actions... // XXX revise default actions... open: makeItemEventMethod('open', @@ -3108,11 +3139,8 @@ var BrowserPrototype = { // ... // // - // XXX add custom events: - // - open - // - select - // - update // XXX should we trigger the DOM event or the browser event??? + // XXX should buttoms be active in disabled state??? renderItem: function(item, i, context){ var that = this var options = context.options || this.options @@ -3210,13 +3238,30 @@ var BrowserPrototype = { var button = document.createElement('div') button.classList.add('button') button.innerHTML = html + // XXX should buttons be active in disabled state??? if(!item.disabled){ button.setAttribute('tabindex', '0') + // events to keep in buttons... ;(options.buttonLocalEvents || options.localEvents || []) .forEach(function(evt){ button.addEventListener(evt, stopPropagation) }) - handler - && button.addEventListener('click', handler) + // keep focus on the item containing the button -- i.e. if + // we tab out of the item focus the item we get to... + button.addEventListener('focus', function(){ + item.focused + || that.focus(item) + && button.focus() }) + // main button action (click/enter)... + // XXX should there be a secondary action (i.e. shift-enter)??? + if(handler){ + button.addEventListener('click', handler) + button.addEventListener('keydown', + function(evt){ + var k = keyboard.event2key(evt) + if(k.includes('Enter')){ + event.stopPropagation() + handler.call(this, evt) + } }) } } elem.appendChild(button) }) @@ -3256,7 +3301,17 @@ var BrowserPrototype = { this.classList.add('focused') }) // set focus... .focus() }, - // NOTE: this simply update the state... + __blur__: function(evt, elem){ + var that = this + elem + && getElem(elem) + .run(function(){ + this.classList.remove('focused') + //this.blur() + that.dom + && that.dom.focus() }) }, + + // NOTE: these simply update the state... __select__: function(){ var selected = new Set(this.selected.map(getElem)) this.dom