dropdown fix

TODO.txt

@@ -28,12 +28,12 @@ THINK
 
 GOALS
 
-- drag & drop UI designer
+* drag & drop UI designer
 	- templates with conditionals, repeats and sub-templates
 		- template-based widgets
 * IMGUI with popups and layouting
-- remote screen sharing
-	- with input routing
+* remote screen sharing
+	* with input routing
 	- with client-side themes
 
 IMGUI
@@ -68,23 +68,23 @@ IMGUI
 	* hit parents
 	* capturing
 	* capture state
-	- drag & drop
+	* drag & drop
 - keyboard
 	* focused state
 	- tab focusing
 	- event bubbling
 - text selection
 	- drag-select with mouse
 - text(area) input
-	- put it behind the canvas with correct width & height
+	* put it behind the canvas with correct width & height
 		- route keyboard events to it
-		- redraw it on canvas with offset and selection
+		* redraw it on canvas with offset and selection
 
 CHALLENGES
 
 * input on a canvas
 - textarea on a canvas
-- webgl2 canvas on a 2d canvas
+* webgl2 canvas on a 2d canvas
 * word wrapping (our layout algo supports word-wrapping for horizontal text)
 - rich text on a canvas (inline box model)
 

demo.html

@@ -210,6 +210,8 @@
 		ui.label('dd1', 'Label of this thing')
 		ui.state_init('dd1', 'i', 1)
 		ui.dropdown('dd1', items)
+		ui.text('', 'or')
+		ui.dropdown('dd2', items)
 		ui.text('', 'and something after')
 	ui.end_h()
 ui.end_v()
@@ -722,6 +724,7 @@
 
 			ui.stack('', 0, 's', 's', ui.em(10))
 				ui.bb('', null, null, 'r', 'light')
+				ui.state_init('demos_list', 'focused_item_i', 4)
 				let i = ui.state('demos_list', 'focused_item_i')
 				ui.sb('demos_list_sb')
 					let demo = ui.list('demos_list', demos_array)
@@ -786,6 +789,8 @@
 								ui.color('link')
 								ui.text('', id, 0, 'l')
 								for (let [k, v] of m) {
+									if (v === undefined)
+										continue
 									ui.ml(ui.sp2())
 									ui.h(0, ui.sp())
 										let s = isobject(v) || isfunc(v) ? typeof v : str(v)

www/glue.js

@@ -2391,6 +2391,28 @@ function post(url, upload, success, fail, opt) {
 	}, opt))
 }
 
+// multi-language stubs replaced in webb_spa.js ------------------------------
+
+// stub for getting message strings that can be translated multiple languages.
+function S(name, en_s, ...args) {
+	return subst(en_s, ...args)
+}
+
+// stub for getting current language.
+let nav_lang = navigator.language.substring(0, 2)
+function lang() {
+	return document.documentElement.lang || nav_lang
+}
+
+// stub for getting current country.
+let nav_country = navigator.language.substring(3, 5)
+function country() {
+	return document.documentElement.attr('country') || nav_country
+}
+
+// stub for rewriting links to current language.
+let href = return_arg
+
 // publishing ----------------------------------------------------------------
 
 let glue = {
@@ -2446,6 +2468,7 @@ custom_event, custom_event_up, listen,
 announce, broadcast, setglobal,
 compress, decompress,
 ajax, get, post,
+S, lang, country, href,
 }
 
 G.glue = glue
@@ -2530,40 +2553,14 @@ Set.prototype.equals  = m(set_equals)
 DOMMatrix.prototype.x = transform_point_x
 DOMMatrix.prototype.y = transform_point_y
 
-// multi-language stubs replaced in webb_spa.js ------------------------------
-
-// stub for getting message strings that can be translated multiple languages.
-let S = glue.S || function(name, en_s, ...args) {
-	return subst(en_s, ...args)
-}
-glue.S = S
-
-function Sf(...args) {
-	return () => S(...args)
-}
-glue.Sf = Sf
+} // if (extend)
 
-// stub for getting current language.
-let nav_lang = navigator.language.substring(0, 2)
-let lang = glue.lang || function() {
-	return document.documentElement.lang || nav_lang
-}
-glue.lang = lang
+// wrappers that use overridable glue functions ------------------------------
 
-// stub for getting current country.
-let nav_country = navigator.language.substring(3, 5)
-let country = glue.country || function() {
-	return document.documentElement.attr('country') || nav_country
+glue.Sf = function(...args) {
+	return () => glue.S(...args)
 }
-glue.country = country
 
-let locale = memoize(function() { return lang() + '-' + country() })
-glue.locale = locale
-
-// stub for rewriting links to current language.
-let href = glue.href || return_arg
-glue.href = href
-
-} // if (extend)
+glue.locale = memoize(function() { return glue.lang() + '-' + country() })
 
 }()) // module function

www/ui.js

@@ -1104,16 +1104,22 @@ canvas.addEventListener('keyup', function(ev) {
 	animate()
 })
 
-ui.keydown = function(key) {
-	return key_state_now.get(key) == 'down'
+function capture_key(ret, key, capture) {
+	// if (ret && capture !== false)
+	// 	key_state_now.set(key, null)
+	return ret
+}
+
+ui.keydown = function(key, capture) {
+	return capture_key(key_state_now.get(key) == 'down', key, capture)
 }
 
-ui.keyup = function(key) {
-	return key_state_now.get(key) == 'up'
+ui.keyup = function(key, capture) {
+	return capture_key(key_state_now.get(key) == 'up', key, capture)
 }
 
-ui.key = function(key) {
-	return key_state.has(key)
+ui.key = function(key, capture) {
+	return capture_key(key_state.has(key), key, capture)
 }
 
 // custom events -------------------------------------------------------------
@@ -1286,7 +1292,6 @@ function keepalive(id, update_f) {
 	if (update_f) {
 		let m = ui.state(id)
 		m.set('update', update_f)
-		state_update(id, m)
 	}
 }
 ui.keepalive = keepalive
@@ -5076,7 +5081,7 @@ function list_update(id, m) {
 	}
 	m.set('focused_item_i', fi)
 	m.set('focused_item_changed', before_fi != fi ? fi_changed : false)
-	m.set('item_picked', fi_changed == 'click' || (fi != null && ui.key('enter')))
+	m.set('item_picked', fi_changed == 'click' || (fi != null && ui.focused(id) && ui.key('enter')))
 }
 function hvlist(hv, id, items, fr, align, valign, item_align, item_valign, item_fr, max_min_w, min_w) {
 	let s = ui.state(id)
@@ -5239,14 +5244,14 @@ ui.dropdown = function(id, items, fr, max_min_w, min_w, min_h) {
 	ui.state(id).set('i', sel_i)
 
 	let click = hit(id) && ui.click
+	let picked = ui.state(id+'.list', 'item_picked')
 	let toggle = click
 		|| (ui.focused(id) && ui.keydown('enter'))
-		|| (ui.focused(id+'.list') && ui.keydown('enter'))
-		|| ui.state(id+'.list', 'item_picked')
+		|| picked
 
 	if (toggle) {
 		open = !open
-	} else if (open && ui.click && !hit(id) && !(hit(id+'.list') || captured(id+'.list'))) {
+	} else if (open && ui.click && !hit(id) && !picked && !captured(id+'.list')) {
 		open = false
 	}
 
@@ -5333,7 +5338,7 @@ ui.toolbox = function(id, title, align, x0, y0, target_i) {
 		s.set('my2', my2)
 	}
 
-	keepalive('toolbox')
+	keepalive(id)
 	let ts = ui.state('toolboxes')
 	let layers = ts.get('layers')
 	if (!layers) {