Textbox reference

[TangentFoxy]

Reference old attempt when making textbox.

[TangentFoxy]

Here is the code, because I'm deleting the branch:

local lg = love.graphics

local path = string.sub(..., 1, string.len(...) - string.len("/elements/textbox"))
local class = require(path .. "/lib/middleclass")
local text = require(path .. "/elements/text")

local textbox = class("pop.textbox", text)

function textbox:initialize(pop, parent, color, background)
    text.initialize(self, pop, parent, "", color)

    if not color then
        self.color = {0, 0, 0, 255}
    end
    self.background = background or {255, 255, 255, 255}

    self.placeholderText = "enter text"
    self.placeholderColor = {100, 100, 100, 255}

    --self.focused = false
end

function textbox:draw()
    --print(self.focused)
    --self.focused = true

    lg.setColor(self.background)
    lg.rectangle("fill", self.x, self.y, self.w, self.h)

    lg.setFont(self.font)
    if self.focused then
        if self.text == "" then
            -- placholder and |
            lg.setColor(self.color)
            lg.print("|", self.x-1, self.y-1)
            lg.setColor(self.placeholderColor)
            lg.print(self.placeholderText, self.x+1, self.y-1)
        else
            -- current text and |
            --TODO print current text here
            lg.setColor(self.color)
            lg.print("|", self.x+1, self.y-1) --TODO fix x position
        end
    else
        -- unfocused, placeholder only
        lg.setColor(self.placeholderColor)
        lg.print(self.placeholderText, self.x+1, self.y-1)
    end
    --[[
    if not (self.text == "") then
        lg.setColor(self.color)
        lg.print(self.text, self.x+1, self.y-1)
    else
        lg.setColor(self.placeholderColor)
        lg.print(self.placeholderText, self.x+1, self.y-1)
    end
    --]]

    return self
end

function textbox:setWidth(w)
    --TODO re-align based on position!
    if w > self.w then
        self.w = w
    end

    return self
end

function textbox:setPlaceholderText(text)
    self.placeholderText = text

    return self
end

function textbox:getPlaceholderText()
    return self.placeholderText
end

function textbox:setPlaceholderColor(r, g, b, a)
    if type(r) == "table" then
        self.placeholderColor = r
    else
        self.placeholderColor = {r, g, b, a}
    end

    if not self.placeholderColor[4] then
        self.placeholderColor[4] = 255
    end

    return self
end

function textbox:getPlaceholderColor()
    return self.placeholderColor
end

--[[
function textbox:mousepressed()
    --TODO
    self.focused = true --how does it know when it is no longer focused? O.O
end
--]]

return textbox

[TangentFoxy]

• [ ] toggleable (whether or not can input) (no special greyed out state, add that yourself)
• [ ] arrow keys support, as well as enter (toggleable, by setting it to a function to execute), and backspace
• [ ] blinking cursor (toggeable, solid if not blinking)
• [ ] click and drag to select
• [ ] copy/paste/cut shortcut support
• [ ] limit text length to specified value (optional), which will also determine how text supplied past the size of the textinput is handled

[TangentFoxy]

Copied from #19

• [ ] has placeholder text of different color from normal text
  • this will be autosquashed the same way we do with window element (when that is done...)
• [ ] has text
• [ ] has ability to fire a changed event if you define that function, will be passed oldtext and newtext
• [ ] box background, which is the text area
• [ ] no outline, or extra outside styling, very minimal