mirror of https://github.com/koreader/koreader
refactor: use new KeyValuePage widget for displaying statistics
Qingping Hou
8 years ago
parent
65455cee23
commit
11ee8d6fcc
@ -0,0 +1,273 @@
|
|||||||
|
--[[--
|
||||||
|
Widget that presents a multi-page to show key value pairs.
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
local Foo = KeyValuePage:new{
|
||||||
|
title = "Statistics",
|
||||||
|
kv_pairs = {
|
||||||
|
{"Current period", "00:00:00"},
|
||||||
|
-- single or more "-" will generate a solid line
|
||||||
|
"----------------------------",
|
||||||
|
{"Page to read", "5"},
|
||||||
|
{"Time to read", "00:01:00"},
|
||||||
|
{"Press me", "will invoke the callback",
|
||||||
|
callback = function() print("hello") end },
|
||||||
|
},
|
||||||
|
}
|
||||||
|
UIManager:show(Foo)
|
||||||
|
|
||||||
|
]]
|
||||||
|
|
||||||
|
local InputContainer = require("ui/widget/container/inputcontainer")
|
||||||
|
local FrameContainer = require("ui/widget/container/framecontainer")
|
||||||
|
local VerticalGroup = require("ui/widget/verticalgroup")
|
||||||
|
local VerticalSpan = require("ui/widget/verticalspan")
|
||||||
|
local OverlapGroup = require("ui/widget/overlapgroup")
|
||||||
|
local LeftContainer = require("ui/widget/container/leftcontainer")
|
||||||
|
local RightContainer = require("ui/widget/container/rightcontainer")
|
||||||
|
local LineWidget = require("ui/widget/linewidget")
|
||||||
|
local Blitbuffer = require("ffi/blitbuffer")
|
||||||
|
local CloseButton = require("ui/widget/closebutton")
|
||||||
|
local UIManager = require("ui/uimanager")
|
||||||
|
local TextWidget = require("ui/widget/textwidget")
|
||||||
|
local GestureRange = require("ui/gesturerange")
|
||||||
|
local Geom = require("ui/geometry")
|
||||||
|
local Font = require("ui/font")
|
||||||
|
local Device = require("device")
|
||||||
|
local Screen = Device.screen
|
||||||
|
|
||||||
|
|
||||||
|
local KeyValueTitle = VerticalGroup:new{
|
||||||
|
kv_page = nil,
|
||||||
|
title = "",
|
||||||
|
align = "left",
|
||||||
|
}
|
||||||
|
|
||||||
|
function KeyValueTitle:init()
|
||||||
|
self.close_button = CloseButton:new{ window = self }
|
||||||
|
table.insert(self, OverlapGroup:new{
|
||||||
|
dimen = { w = self.width },
|
||||||
|
TextWidget:new{
|
||||||
|
text = self.title,
|
||||||
|
face = Font:getFace("tfont", 26),
|
||||||
|
},
|
||||||
|
self.close_button,
|
||||||
|
})
|
||||||
|
self.page_cnt = FrameContainer:new{
|
||||||
|
padding = 4,
|
||||||
|
margin = 0,
|
||||||
|
bordersize = 0,
|
||||||
|
background = Blitbuffer.COLOR_WHITE,
|
||||||
|
overlap_offset = {0, -18},
|
||||||
|
TextWidget:new{
|
||||||
|
text = "", -- page count
|
||||||
|
fgcolor = Blitbuffer.COLOR_GREY,
|
||||||
|
face = Font:getFace("ffont", 16),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
self.title_bottom = OverlapGroup:new{
|
||||||
|
dimen = { w = self.width, h = Screen:scaleBySize(2) },
|
||||||
|
LineWidget:new{
|
||||||
|
dimen = Geom:new{ w = self.width, h = Screen:scaleBySize(2) },
|
||||||
|
background = Blitbuffer.COLOR_GREY,
|
||||||
|
style = "solid",
|
||||||
|
},
|
||||||
|
self.page_cnt,
|
||||||
|
}
|
||||||
|
table.insert(self, self.title_bottom)
|
||||||
|
table.insert(self, VerticalSpan:new{ width = Screen:scaleBySize(5) })
|
||||||
|
end
|
||||||
|
|
||||||
|
function KeyValueTitle:setPageCount(curr, total)
|
||||||
|
if total == 1 then
|
||||||
|
-- remove page count if there is only one page
|
||||||
|
table.remove(self.title_bottom, 2)
|
||||||
|
return
|
||||||
|
end
|
||||||
|
self.page_cnt[1]:setText(curr .. "/" .. total)
|
||||||
|
self.page_cnt.overlap_offset[1] = (self.width - self.page_cnt:getSize().w
|
||||||
|
- self.close_button:getSize().w)
|
||||||
|
self.title_bottom[2] = self.page_cnt
|
||||||
|
end
|
||||||
|
|
||||||
|
function KeyValueTitle:onClose()
|
||||||
|
self.kv_page:onClose()
|
||||||
|
return true
|
||||||
|
end
|
||||||
|
|
||||||
|
|
||||||
|
local KeyValueItem = InputContainer:new{
|
||||||
|
key = nil,
|
||||||
|
value = nil,
|
||||||
|
cface = Font:getFace("cfont", 24),
|
||||||
|
width = nil,
|
||||||
|
height = nil,
|
||||||
|
}
|
||||||
|
|
||||||
|
function KeyValueItem:init()
|
||||||
|
self.dimen = Geom:new{w = self.width, h = self.height}
|
||||||
|
|
||||||
|
if self.callback and Device:isTouchDevice() then
|
||||||
|
self.ges_events.Tap = {
|
||||||
|
GestureRange:new{
|
||||||
|
ges = "tap",
|
||||||
|
range = self.dimen,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
end
|
||||||
|
|
||||||
|
self[1] = OverlapGroup:new{
|
||||||
|
dimen = self.dimen:copy(),
|
||||||
|
LeftContainer:new{
|
||||||
|
dimen = self.dimen:copy(),
|
||||||
|
TextWidget:new{
|
||||||
|
text = self.key,
|
||||||
|
face = self.cface,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
RightContainer:new{
|
||||||
|
dimen = self.dimen:copy(),
|
||||||
|
TextWidget:new{
|
||||||
|
text = self.value,
|
||||||
|
face = self.cface,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
end
|
||||||
|
|
||||||
|
function KeyValueItem:onTap()
|
||||||
|
self.callback()
|
||||||
|
return true
|
||||||
|
end
|
||||||
|
|
||||||
|
|
||||||
|
local KeyValuePage = InputContainer:new{
|
||||||
|
title = "",
|
||||||
|
width = nil,
|
||||||
|
height = nil,
|
||||||
|
-- index for the first item to show
|
||||||
|
show_page = 1,
|
||||||
|
}
|
||||||
|
|
||||||
|
function KeyValuePage:init()
|
||||||
|
self.dimen = Geom:new{
|
||||||
|
w = self.width or Screen:getWidth(),
|
||||||
|
h = self.height or Screen:getHeight(),
|
||||||
|
}
|
||||||
|
|
||||||
|
if Device:isTouchDevice() then
|
||||||
|
self.ges_events.Swipe = {
|
||||||
|
GestureRange:new{
|
||||||
|
ges = "swipe",
|
||||||
|
range = self.dimen,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
end
|
||||||
|
|
||||||
|
local padding = Screen:scaleBySize(10)
|
||||||
|
self.item_width = self.dimen.w - 2 * padding
|
||||||
|
self.item_height = Screen:scaleBySize(30)
|
||||||
|
-- setup title bar
|
||||||
|
self.title_bar = KeyValueTitle:new{
|
||||||
|
title = self.title,
|
||||||
|
width = self.item_width,
|
||||||
|
height = self.item_height,
|
||||||
|
kv_page = self,
|
||||||
|
}
|
||||||
|
-- setup main content
|
||||||
|
self.item_padding = self.item_height / 4
|
||||||
|
local line_height = self.item_height + 2 * self.item_padding
|
||||||
|
local content_height = self.dimen.h - self.title_bar:getSize().h
|
||||||
|
self.items_per_page = math.floor(content_height / line_height)
|
||||||
|
self.pages = math.ceil(#self.kv_pairs / self.items_per_page)
|
||||||
|
self.main_content = VerticalGroup:new{}
|
||||||
|
self:_populateItems()
|
||||||
|
-- assemble page
|
||||||
|
self[1] = FrameContainer:new{
|
||||||
|
height = self.dimen.h,
|
||||||
|
padding = padding,
|
||||||
|
bordersize = 0,
|
||||||
|
background = Blitbuffer.COLOR_WHITE,
|
||||||
|
VerticalGroup:new{
|
||||||
|
self.title_bar,
|
||||||
|
self.main_content,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
end
|
||||||
|
|
||||||
|
function KeyValuePage:nextPage()
|
||||||
|
local new_page = math.min(self.show_page+1, self.pages)
|
||||||
|
if new_page > self.show_page then
|
||||||
|
self.show_page = new_page
|
||||||
|
self:_populateItems()
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
function KeyValuePage:prevPage()
|
||||||
|
local new_page = math.max(self.show_page-1, 1)
|
||||||
|
if new_page < self.show_page then
|
||||||
|
self.show_page = new_page
|
||||||
|
self:_populateItems()
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
-- make sure self.item_padding and self.item_height are set before calling this
|
||||||
|
function KeyValuePage:_populateItems()
|
||||||
|
self.main_content:clear()
|
||||||
|
local idx_offset = (self.show_page - 1) * self.items_per_page
|
||||||
|
for idx = 1, self.items_per_page do
|
||||||
|
local entry = self.kv_pairs[idx_offset + idx]
|
||||||
|
if entry == nil then break end
|
||||||
|
|
||||||
|
table.insert(self.main_content,
|
||||||
|
VerticalSpan:new{ width = self.item_padding })
|
||||||
|
if type(entry) == "table" then
|
||||||
|
table.insert(
|
||||||
|
self.main_content,
|
||||||
|
KeyValueItem:new{
|
||||||
|
height = self.item_height,
|
||||||
|
width = self.item_width,
|
||||||
|
key = entry[1],
|
||||||
|
value = entry[2],
|
||||||
|
callback = entry.callback,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
elseif type(entry) == "string" then
|
||||||
|
local c = string.sub(entry, 1, 1)
|
||||||
|
if c == "-" then
|
||||||
|
table.insert(self.main_content, LineWidget:new{
|
||||||
|
background = Blitbuffer.COLOR_LIGHT_GREY,
|
||||||
|
dimen = Geom:new{
|
||||||
|
w = self.item_width,
|
||||||
|
h = Screen:scaleBySize(2)
|
||||||
|
},
|
||||||
|
style = "solid",
|
||||||
|
})
|
||||||
|
end
|
||||||
|
end
|
||||||
|
table.insert(self.main_content,
|
||||||
|
VerticalSpan:new{ width = self.item_padding })
|
||||||
|
end
|
||||||
|
self.title_bar:setPageCount(self.show_page, self.pages)
|
||||||
|
UIManager:setDirty(self, function()
|
||||||
|
return "ui", self.dimen
|
||||||
|
end)
|
||||||
|
end
|
||||||
|
|
||||||
|
function KeyValuePage:onSwipe(arg, ges_ev)
|
||||||
|
if ges_ev.direction == "west" then
|
||||||
|
self:nextPage()
|
||||||
|
return true
|
||||||
|
elseif ges_ev.direction == "east" then
|
||||||
|
self:prevPage()
|
||||||
|
return true
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
function KeyValuePage:onClose()
|
||||||
|
UIManager:close(self)
|
||||||
|
return true
|
||||||
|
end
|
||||||
|
|
||||||
|
return KeyValuePage
|
||||||
Loading…
Reference in New Issue