components_ui_button_JROverhangIcon.bs
import "pkg:/source/roku_modules/log/LogMixin.brs"
import "pkg:/source/utils/misc.bs"
const OVERHANG_ICON_SIZE = 66 ' Button size: matches dropdown trigger height
const OVERHANG_ICON_PADDING = 12 ' Padding between icon and button edge
const OVERHANG_ICON_POSTER_SIZE = 42 ' Icon display size (66 - 12*2 = 42); source PNGs scaled down via limitSize
sub init()
m.log = new log.Logger("JROverhangIcon")
m.buttonBackground = m.top.findNode("buttonBackground")
m.buttonBorder = m.top.findNode("buttonBorder")
m.buttonIcon = m.top.findNode("buttonIcon")
' Size button background and border to 66x66
m.buttonBackground.width = OVERHANG_ICON_SIZE
m.buttonBackground.height = OVERHANG_ICON_SIZE
m.buttonBorder.width = OVERHANG_ICON_SIZE
m.buttonBorder.height = OVERHANG_ICON_SIZE
' Size icon poster and center within the button
m.buttonIcon.width = OVERHANG_ICON_POSTER_SIZE
m.buttonIcon.height = OVERHANG_ICON_POSTER_SIZE
m.buttonIcon.loadWidth = OVERHANG_ICON_POSTER_SIZE
m.buttonIcon.loadHeight = OVERHANG_ICON_POSTER_SIZE
m.buttonIcon.translation = [OVERHANG_ICON_PADDING, OVERHANG_ICON_PADDING]
' Unfocused state: transparent (matches JRDropdown trigger / JRTab pattern)
m.buttonBackground.visible = false
m.buttonBorder.visible = false
m.buttonIcon.blendColor = m.global.constants.colorTextSecondary
m.top.observeField("focusedChild", "onFocusChanged")
end sub
sub onIconChanged()
m.buttonIcon.uri = m.top.icon
end sub
' Toggle visual state between unfocused (transparent) and focused (backdrop + border)
sub onFocusChanged()
constants = m.global.constants
if m.top.hasFocus()
m.buttonBackground.blendColor = constants.colorBackgroundSecondary
m.buttonBorder.blendColor = constants.colorPrimary
m.buttonBackground.visible = true
m.buttonBorder.visible = true
m.buttonIcon.blendColor = constants.colorTextPrimary
else
m.buttonBackground.visible = false
m.buttonBorder.visible = false
m.buttonIcon.blendColor = constants.colorTextSecondary
end if
end sub
function onKeyEvent(key as string, press as boolean) as boolean
if not press then return false
if key = "OK"
m.top.selectedAction = m.top.actionId
return true
else if key = "left"
m.top.requestFocusExit = "left"
return true
else if key = "right"
m.top.requestFocusExit = "right"
return true
else if key = "down"
m.top.requestFocusReturn = true
return true
end if
' UP: don't consume — nothing above the overhang icons
return false
end function