Love2D Paged List

examplePagerList.lua

local settingsPager = PagerList:new({
	title='STTNGS',
	spaceBetweenRow = 65,
	rowsPerPage = 3
})

-- load the rows for the settings page
function settingsLoad()
	local rows = {}
	rows[1] = {
		title = 'GAME MUSIC',
		useImages = false,
		tooltip = 'SWITCH MUSIC IN GAME'
	}
	rows[2] = {
		title = 'SOUNDS FX',
		useImages = false,
		tooltip = 'SWITCH SOUND EFFECTS'
	}
	rows[3] = {
		title = 'RESET LVLS',
		useImages = false,
		tooltip = 'START FROM THE TOP'
	}
	rows[4] = {
		title = 'ABOUT',
		useImages = false,
		tooltip = 'WHY ME'
	}
	
	return rows
end

-- called when an row is clicked on settings
function settingsClick(key, row)
	if key == SELECT then
		if row.title=='ABOUT' then
			-- do something here
		end
	elseif key == B then
		-- go back to previous state here
	end
end

-- init and setup
settingsPager:initAndLoad(settingsLoad, settingsClick)

PagerList.lua

local g = love.graphics

PagerList = {
	rowsPerPage = 4,
	spaceBetweenRow = 44,
	initSpace = 24,
	noPages = 0,
	currentPage = 0,
	noRows = 0,
	rowsToDisplay = 0,
	rowOffset = 1,
	prevStr = 'BACK',
	nextStr = 'NEXT',
	x = 70,
	imageX = 260,
	cursorX = 50,
	cWidth = 10,
	cHeight = 10,
	option = 1,
	transition = true,
	tooltipOffset = 30,
	transitionImage = {},
	rows = {}
}

function PagerList:new(o)
	o = o or {}
	setmetatable(o, self)
	self.__index = self
	return o
end

function PagerList:initAndLoad(initLevel, clickCB)
	self.rows = initLevel()
	self.clickCB = clickCB
	
	self.noPages = math.ceil(#self.rows/self.rowsPerPage)
	
	-- initial number of rows to display on the first page
	if self.noPages > 1 then
		self.rowsToDisplay = self.rowsPerPage
	else
		self.rowsToDisplay = #self.rows
	end
end

function PagerList:draw()
	g.clear()
	g.setColor(255, 255, 255)
	
	local row = 1
	local i= self.rowOffset
	for i=i, i+self.rowsToDisplay-1 do
		local r = self.rows[i]
		local y = ((row-1)*self.spaceBetweenRow)+self.initSpace
		whiteFont:print(r.title, self.x, y)
		
		if r.useImages then
			-- display side image next to row item
			if r.useAltImage then
				g.draw(r.altImage, self.imageX, y)
			else
				g.draw(r.image, self.imageX, y)
			end
		end
		
		-- draw cursor if this row is selected
		if self.option == row then
			g.rectangle('fill', self.cursorX, y+7, self.cWidth, self.cHeight)
			if r.tooltip then
				-- display a tool tip for the selected row
				smallWhiteFont:print(r.tooltip, self.x, y+30)
			end
		end
		
		row = row+1
	end
	
	-- determine whether to display BACK/NEXT buttons
	if self.currentPage > 0 then	-- don't display on first page
		whiteFont:print(self.prevStr, 20, 200)
		g.rectangle('line', 18, 198, 65, 29)
	end
	
	if self.currentPage < self.noPages-1 then	-- don't display on last page
		whiteFont:print(self.nextStr, 240, 200)
		g.rectangle('line', 238, 198, 65, 29)
	end
	
	-- draw the page title if given
	if self.title then
		whiteFont:printVertical(self.title, 10, 0, 0, 1.5)
	end
end

function PagerList:keypressed(key)
	local selectedRow = (self.rowOffset + self.option)-1
	local r = self.rows[selectedRow]
	self.clickCB(key, r)
end

function PagerList:keyreleased(key)
	if key == L and self.currentPage > 0 then
		self.currentPage = self.currentPage - 1
		self.rowsToDisplay = self.rowsPerPage
		self.option = 1
		self.rowOffset = (self.currentPage * self.rowsPerPage)+1
	elseif key == R and self.currentPage < self.noPages-1 then
		self.currentPage = self.currentPage + 1
		-- get the remaining number of rows for the last page
		if self.currentPage == self.noPages-1 then
			self.rowsToDisplay = #self.rows - ((self.noPages-1)*self.rowsPerPage)
		end
		self.option = 1
		self.rowOffset = (self.currentPage * self.rowsPerPage)+1
	elseif key == UP and self.option~=1 then
		self.option = self.option-1
	elseif key == DOWN and self.option~=self.rowsToDisplay then
		self.option = self.option+1
	end
end

return PagerList