ui fixes

sys/modules/opus/ui/components/Chooser.lua

@@ -14,6 +14,11 @@ UI.Chooser.defaults = {
 	leftIndicator = UI.extChars and '\17' or '<',
 	rightIndicator = UI.extChars and '\16' or '>',
 	height = 1,
+	accelerators = {
+		space = 'choice_next',
+		right = 'choice_next',
+		left  = 'choice_prev',
+	}
 }
 function UI.Chooser:setParent()
 	if not self.width and not self.ex then
@@ -29,16 +34,11 @@ function UI.Chooser:setParent()
 end
 
 function UI.Chooser:draw()
-	local bg = self.backgroundColor
-	if self.focused then
-		bg = self.backgroundFocusColor
-	end
+	local bg = self.focused and self.backgroundFocusColor or self.backgroundColor
 	local fg = self.inactive and self.textInactiveColor or self.textColor
 	local choice = Util.find(self.choices, 'value', self.value)
-	local value = self.nochoice
-	if choice then
-		value = choice.name
-	end
+	local value = choice and choice.name or self.nochoice
+
 	self:write(1, 1, self.leftIndicator, self.backgroundColor, colors.black)
 	self:write(2, 1, ' ' .. Util.widthify(tostring(value), self.width-4) .. ' ', bg, fg)
 	self:write(self.width, 1, self.rightIndicator, self.backgroundColor, colors.black)
@@ -49,39 +49,37 @@ function UI.Chooser:focus()
 end
 
 function UI.Chooser:eventHandler(event)
-	if event.type == 'key' then
-		if event.key == 'right' or event.key == 'space' then
-			local _,k = Util.find(self.choices, 'value', self.value)
-			local choice
-			if not k then k = 0 end
-			if k and k < #self.choices then
-				choice = self.choices[k+1]
-			else
-				choice = self.choices[1]
-			end
-			self.value = choice.value
-			self:emit({ type = 'choice_change', value = self.value, element = self, choice = choice })
-			self:draw()
-			return true
-		elseif event.key == 'left' then
-			local _,k = Util.find(self.choices, 'value', self.value)
-			local choice
-			if k and k > 1 then
-				choice = self.choices[k-1]
-			else
-				choice = self.choices[#self.choices]
-			end
-			self.value = choice.value
-			self:emit({ type = 'choice_change', value = self.value, element = self, choice = choice })
-			self:draw()
-			return true
+	if event.type == 'choice_next' then
+		local _,k = Util.find(self.choices, 'value', self.value)
+		local choice
+		if not k then k = 0 end
+		if k and k < #self.choices then
+			choice = self.choices[k+1]
+		else
+			choice = self.choices[1]
 		end
+		self.value = choice.value
+		self:emit({ type = 'choice_change', value = self.value, element = self, choice = choice })
+		self:draw()
+		return true
+	elseif event.type == 'choice_prev' then
+		local _,k = Util.find(self.choices, 'value', self.value)
+		local choice
+		if k and k > 1 then
+			choice = self.choices[k-1]
+		else
+			choice = self.choices[#self.choices]
+		end
+		self.value = choice.value
+		self:emit({ type = 'choice_change', value = self.value, element = self, choice = choice })
+		self:draw()
+		return true
 	elseif event.type == 'mouse_click' or event.type == 'mouse_doubleclick' then
 		if event.x == 1 then
-			self:emit({ type = 'key', key = 'left' })
+			self:emit({ type = 'choice_prev' })
 			return true
 		elseif event.x == self.width then
-			self:emit({ type = 'key', key = 'right' })
+			self:emit({ type = 'choice_next' })
 			return true
 		end
 	end

sys/modules/opus/ui/components/Page.lua

@@ -0,0 +1,163 @@
+local Canvas = require('opus.ui.canvas')
+local class  = require('opus.class')
+local UI     = require('opus.ui')
+local Util   = require('opus.util')
+
+local colors = _G.colors
+
+-- need to add offsets to this test
+local function getPosition(element)
+	local x, y = 1, 1
+	repeat
+		x = element.x + x - 1
+		y = element.y + y - 1
+		element = element.parent
+	until not element
+	return x, y
+end
+
+UI.Page = class(UI.Window)
+UI.Page.defaults = {
+	UIElement = 'Page',
+	accelerators = {
+		down = 'focus_next',
+		enter = 'focus_next',
+		tab = 'focus_next',
+		['shift-tab' ] = 'focus_prev',
+		up = 'focus_prev',
+	},
+	backgroundColor = colors.cyan,
+	textColor = colors.white,
+}
+function UI.Page:postInit()
+	self.parent = self.parent or UI.defaultDevice
+	self.__target = self
+	self.canvas = Canvas({
+		x = 1, y = 1, width = self.parent.width, height = self.parent.height,
+		isColor = self.parent.isColor,
+	})
+	self.canvas:clear(self.backgroundColor, self.textColor)
+end
+
+function UI.Page:enable()
+	self.canvas.visible = true
+	UI.Window.enable(self)
+
+	if not self.focused or not self.focused.enabled then
+		self:focusFirst()
+	end
+end
+
+function UI.Page:disable()
+	self.canvas.visible = false
+	UI.Window.disable(self)
+end
+
+function UI.Page:sync()
+	if self.enabled then
+		self.parent:sync()
+	end
+end
+
+function UI.Page:capture(child)
+	self.__target = child
+end
+
+function UI.Page:release(child)
+	if self.__target == child then
+		self.__target = self
+	end
+end
+
+function UI.Page:pointToChild(x, y)
+	if self.__target == self then
+		return UI.Window.pointToChild(self, x, y)
+	end
+	local absX, absY = getPosition(self.__target)
+
+	-- this is sketchy
+	x = x + self.offx - self.x - (absX - self.__target.x) + 1
+	y = y + self.offy - self.y - (absY - self.__target.y) + 1
+
+	return self.__target:pointToChild(x, y)
+end
+
+function UI.Page:getFocusables()
+	if self.__target == self or self.__target.pageType ~= 'modal' then
+		return UI.Window.getFocusables(self)
+	end
+	return self.__target:getFocusables()
+end
+
+function UI.Page:getFocused()
+	return self.focused
+end
+
+function UI.Page:focusPrevious()
+	local function getPreviousFocus(focused)
+		local focusables = self:getFocusables()
+		local k = Util.contains(focusables, focused)
+		if k then
+			if k > 1 then
+				return focusables[k - 1]
+			end
+			return focusables[#focusables]
+		end
+	end
+
+	local focused = getPreviousFocus(self.focused)
+	if focused then
+		self:setFocus(focused)
+	end
+end
+
+function UI.Page:focusNext()
+	local function getNextFocus(focused)
+		local focusables = self:getFocusables()
+		local k = Util.contains(focusables, focused)
+		if k then
+			if k < #focusables then
+				return focusables[k + 1]
+			end
+			return focusables[1]
+		end
+	end
+
+	local focused = getNextFocus(self.focused)
+	if focused then
+		self:setFocus(focused)
+	end
+end
+
+function UI.Page:setFocus(child)
+	if not child or not child.focus then
+		return
+	end
+
+	if self.focused and self.focused ~= child then
+		self.focused.focused = false
+		self.focused:focus()
+		self.focused:emit({ type = 'focus_lost', focused = child, unfocused = self.focused })
+	end
+
+	self.focused = child
+	if not child.focused then
+		child.focused = true
+		child:emit({ type = 'focus_change', focused = child })
+		--self:emit({ type = 'focus_change', focused = child })
+	end
+
+	child:focus()
+end
+
+function UI.Page:eventHandler(event)
+	if self.focused then
+		if event.type == 'focus_next' then
+			self:focusNext()
+			return true
+		elseif event.type == 'focus_prev' then
+			self:focusPrevious()
+			return true
+		end
+	end
+end

sys/modules/opus/ui/components/SlideOut.lua

@@ -61,17 +61,14 @@ end
 function UI.SlideOut.example()
 	-- for the transistion to work properly, the parent must have a canvas
 	return UI.ActiveLayer {
-		y = 1,	-- TODO: if this is set to anything greater than 1, then
-				-- the layer is not rendered in the correct location
-				-- a general issue in canvas layers
-		backgroundColor = colors.cyan,
+		y = 2,
 		button = UI.Button {
 			x = 2, y = 5,
 			text = 'show',
 		},
 		slideOut = UI.SlideOut {
-			backgroundColor = colors.yellow,
-			y = -4, height = 4,
+			backgroundColor = _G.colors.yellow,
+			y = -4, height = 4, x = 3, ex = -3,
 			button = UI.Button {
 				x = 2, y = 2,
 				text = 'hide',