Module:User:Lady G2016/NavboxMobile
Revision as of 16:53, 1 April 2018 by module>Lady G2016 (Created. A MobileFrontend alternative for Wikipedia's Template:Navbox.)
This module implements the {{Navbox}} template for mobile devices when Extension:MobileFrontend is installed. This mobile version differs from the desktop version as follows:
- The table does not collapse.
- The list cells, e.g. group1, list1, each display across the width of the screen
- Images are not displayed, as it increases the complexity of the layout while reducing the area needed for content.
Overview
This approach works by utilizing CSS class rules. See: Hiding content on desktop devices
An onlymobile class in MediaWiki:Common.css will not display classes intended for mobile devices.
A nomobile class in MediaWiki:Mobile.css will not display classes intended for desktop devices.
Use these classes together inside the same template. The template will be rendered twice, but only display once depending on the view (desktop or mobile).
Module description
The module was copied from Module:Navbox and modified as follows:
- All instances of
navbox-were replaced withnavboxMobile-to provide unique CSS identifiers that are independent ofnavbox. - All statements which processed images were removed. The statements remain as comments to show what was changed.
In function renderListRow(), the cell pair of (groupCell, listCell) appearing as a single row is broken into separate rows by adding local row = addTableRow(tbl) just before listCell.
Adding this row and removing the images are the only functional changes made to the existing navbox template. Except for removal of the images, the parameters used in the current navbox are supported.
Implementation
MediaWiki:Common.css
In MediaWiki:Common.css, add:
/* Only for mobile devices */
.onlymobile {
display:none;
}
MediaWiki:Mobile.css
In MediaWiki:Mobile.css, add:
/* Only for desktop devices */
.nomobile {
display:none;
}
MobileFrontend processes MediaWiki:Mobile.css. To provide an independent class that is not affected by the navbox rules, copy all of the navbox and hlist CSS styles from MediaWiki:Common.css to MediaWiki:Mobile.css.
Replace all navbox- with navboxMobile-. For example, navbox-title becomes navboxMobile-title. This will match the CSS properties in Module:NavboxMobile.
An example page can be found at User:Lady G2016/MediaWiki:Mobile.css.
Modify Template:Navbox to call both the desktop and mobile Lua modules as follows:
<div class="nomobile">{{#invoke:Navbox|navbox}}</div><div class="onlymobile">{{#invoke:NavboxMobile|navboxMobile}}</div><noinclude>
{{Documentation}}
</noinclude>
This will render both the desktop (navbox) and mobile (navboxMobile) versions. When displaying from a desktop view, MediaWiki:Common.css will not display the mobile template. When displaying from a mobile, only the mobile template will be displayed.
Constraints and limitations
This template was developed with MediaWiki 1.27.4 (Long Term Support) and MobileFrontEnd 1.0.0 (29 June 2016). No testing was performed with other versions.
The navbox class is explicitly disabled in /extensions/MobileFrontend/resources/skins.minerva.content.styles/hacks.less. Attempts to override navbox using $wgMFRemovableClasses do not display as intended when the navbox class is enabled.
--
-- This module implements {{navbox}} for MobileFrontend
--
local p = {}
local navbar = require('Module:Navbar')._navbar
local getArgs -- lazily initialized
local args
local tableRowAdded = false
local border
local listnums = {}
local function trim(s)
return (mw.ustring.gsub(s, "^%s*(.-)%s*$", "%1"))
end
local function addNewline(s)
if s:match('^[*:;#]') or s:match('^{|') then
return '\n' .. s ..'\n'
else
return s
end
end
local function addTableRow(tbl)
-- If any other rows have already been added, then we add a 2px gutter row.
if tableRowAdded then
tbl
:tag('tr')
:css('height', '2px')
:tag('td')
:attr('colspan',2)
end
tableRowAdded = true
return tbl:tag('tr')
end
local function renderNavBar(titleCell)
-- Depending on the presence of the navbar and/or show/hide link, we may need to add a spacer div on the left
-- or right to keep the title centered.
local spacerSide = nil
if args.navbar == 'off' then
-- No navbar, and client wants no spacer, i.e. wants the title to be shifted to the left. If there's
-- also no show/hide link, then we need a spacer on the right to achieve the left shift.
if args.state == 'plain' then spacerSide = 'right' end
elseif args.navbar == 'plain' or (not args.name and mw.getCurrentFrame():getParent():getTitle():gsub('/sandbox$', '') == 'Template:navbox') then
-- No navbar. Need a spacer on the left to balance out the width of the show/hide link.
if args.state ~= 'plain' then spacerSide = 'left' end
else
-- Will render navbar (or error message). If there's no show/hide link, need a spacer on the right
-- to balance out the width of the navbar.
if args.state == 'plain' then spacerSide = 'right' end
titleCell:wikitext(navbar{
args.name,
mini = 1,
fontstyle = (args.basestyle or '') .. ';' .. (args.titlestyle or '') .. ';background:none transparent;border:none;'
})
end
-- Render the spacer div.
if spacerSide then
titleCell
:tag('span')
:css('float', spacerSide)
:css('width', '6em')
:wikitext(' ')
end
end
--
-- Title row
--
local function renderTitleRow(tbl)
if not args.title then return end
local titleRow = addTableRow(tbl)
if args.titlegroup then
titleRow
:tag('th')
:attr('scope', 'row')
:addClass('navboxMobile-group')
:addClass(args.titlegroupclass)
:cssText(args.basestyle)
:cssText(args.groupstyle)
:cssText(args.titlegroupstyle)
:wikitext(args.titlegroup)
end
local titleCell = titleRow:tag('th'):attr('scope', 'col')
if args.titlegroup then
titleCell
:css('border-left', '2px solid #fdfdfd')
:css('width', '100%')
end
local titleColspan = 2
--[[if args.imageleft then titleColspan = titleColspan + 1 end
if args.image then titleColspan = titleColspan + 1 end]]
if args.titlegroup then titleColspan = titleColspan - 1 end
titleCell
:cssText(args.basestyle)
:cssText(args.titlestyle)
:addClass('navboxMobile-title')
:attr('colspan', titleColspan)
renderNavBar(titleCell)
titleCell
:tag('div')
:addClass(args.titleclass)
:css('font-size', '114%')
:wikitext(addNewline(args.title))
end
--
-- Above/Below rows
--
local function getAboveBelowColspan()
local ret = 2
--[[if args.imageleft then ret = ret + 1 end
if args.image then ret = ret + 1 end]]
return ret
end
local function renderAboveRow(tbl)
if not args.above then return end
addTableRow(tbl)
:tag('td')
:addClass('navboxMobile-abovebelow')
:addClass(args.aboveclass)
:cssText(args.basestyle)
:cssText(args.abovestyle)
:attr('colspan', getAboveBelowColspan())
:tag('div')
:wikitext(addNewline(args.above))
end
local function renderBelowRow(tbl)
if not args.below then return end
addTableRow(tbl)
:tag('td')
:addClass('navboxMobile-abovebelow')
:addClass(args.belowclass)
:cssText(args.basestyle)
:cssText(args.belowstyle)
:attr('colspan', getAboveBelowColspan())
:tag('div')
:wikitext(addNewline(args.below))
end
--
-- List rows
--
local function renderListRow(tbl, listnum)
local row = addTableRow(tbl)
--[[if listnum == 1 and args.imageleft then
row
:tag('td')
:addClass('navboxMobile-image')
:addClass(args.imageclass)
:css('width', '0%')
:css('padding', '0px 2px 0px 0px')
:cssText(args.imageleftstyle)
:attr('rowspan', 2 * #listnums - 1)
:tag('div')
:wikitext(addNewline(args.imageleft))
end]]
if args['group' .. listnum] then
local groupCell = row:tag('th')
groupCell
:attr('scope', 'row')
:addClass('navboxMobile-group')
:addClass(args.groupclass)
:cssText(args.basestyle)
if args.groupwidth then
groupCell:css('width', args.groupwidth)
end
groupCell
:cssText(args.groupstyle)
:cssText(args['group' .. listnum .. 'style'])
:wikitext(args['group' .. listnum])
end
local row = addTableRow(tbl) -- added
local listCell = row:tag('td')
if args['group' .. listnum] then
listCell
:css('text-align', 'left')
:css('border-left-width', '2px')
:css('border-left-style', 'solid')
else
listCell:attr('colspan', 2)
end
if not args.groupwidth then
listCell:css('width', '100%')
end
local isOdd = (listnum % 2) == 1
local rowstyle = args.evenstyle
if isOdd then rowstyle = args.oddstyle end
local evenOdd
if args.evenodd == 'swap' then
if isOdd then evenOdd = 'even' else evenOdd = 'odd' end
else
if isOdd then evenOdd = args.evenodd or 'odd' else evenOdd = args.evenodd or 'even' end
end
listCell
:css('padding', '0px')
:cssText(args.liststyle)
:cssText(rowstyle)
:cssText(args['list' .. listnum .. 'style'])
:addClass('navboxMobile-list')
:addClass('navboxMobile-' .. evenOdd)
:addClass(args.listclass)
:tag('div')
:css('padding', (listnum == 1 and args.list1padding) or args.listpadding or '0em 0.25em')
:wikitext(addNewline(args['list' .. listnum]))
--[[if listnum == 1 and args.image then
row
:tag('td')
:addClass('navboxMobile-image')
:addClass(args.imageclass)
:css('width', '0%')
:css('padding', '0px 0px 0px 2px')
:cssText(args.imagestyle)
:attr('rowspan', 2 * #listnums - 1)
:tag('div')
:wikitext(addNewline(args.image))
end ]]
end
--
-- Tracking categories
--
local function needsHorizontalLists()
if border == 'child' or border == 'subgroup' or args.tracking == 'no' then return false end
local listClasses = {'plainlist', 'hlist', 'hlist hnum', 'hlist hwrap', 'hlist vcard', 'vcard hlist', 'hlist vevent'}
for i, cls in ipairs(listClasses) do
if args.listclass == cls or args.bodyclass == cls then
return false
end
end
return true
end
local function hasBackgroundColors()
return mw.ustring.match(args.titlestyle or '','background') or mw.ustring.match(args.groupstyle or '','background') or mw.ustring.match(args.basestyle or '','background')
end
local function isIllegible()
local styleratio = require('Module:Color contrast')._styleratio
for key, style in pairs(args) do
if tostring(key):match("style$") then
if styleratio{mw.text.unstripNoWiki(style)} < 4.5 then
return true
end
end
end
return false
end
local function getTrackingCategories()
local cats = {}
if needsHorizontalLists() then table.insert(cats, 'Navigational boxes without horizontal lists') end
if hasBackgroundColors() then table.insert(cats, 'navboxMobiles using background colours') end
if isIllegible() then table.insert(cats, 'Potentially illegible navboxMobiles') end
return cats
end
local function renderTrackingCategories(builder)
local title = mw.title.getCurrentTitle()
if title.namespace ~= 10 then return end -- not in template space
local subpage = title.subpageText
if subpage == 'doc' or subpage == 'sandbox' or subpage == 'testcases' then return end
for i, cat in ipairs(getTrackingCategories()) do
builder:wikitext('[[Category:' .. cat .. ']]')
end
end
--
-- Main navboxMobile tables
--
local function renderMainTable()
local tbl = mw.html.create('table')
:addClass('nowraplinks')
:addClass(args.bodyclass)
--[[if args.title and (args.state ~= 'plain' and args.state ~= 'off') then
tbl
:addClass('collapsible')
:addClass(args.state or 'autocollapse')
end]]
tbl:css('border-spacing', 0)
if border == 'subgroup' or border == 'child' or border == 'none' then
tbl
:addClass('navboxMobile-subgroup')
:cssText(args.bodystyle)
:cssText(args.style)
else -- regular navobx - bodystyle and style will be applied to the wrapper table
tbl
:addClass('navboxMobile-inner')
:css('background', 'transparent')
:css('color', 'inherit')
end
tbl:cssText(args.innerstyle)
renderTitleRow(tbl)
renderAboveRow(tbl)
for i, listnum in ipairs(listnums) do
renderListRow(tbl, listnum)
end
renderBelowRow(tbl)
return tbl
end
function p._navboxMobile(navboxMobileArgs)
args = navboxMobileArgs
for k, v in pairs(args) do
local listnum = ('' .. k):match('^list(%d+)$')
if listnum then table.insert(listnums, tonumber(listnum)) end
end
table.sort(listnums)
border = trim(args.border or args[1] or '')
-- render the main body of the navboxMobile
local tbl = renderMainTable()
-- render the appropriate wrapper around the navboxMobile, depending on the border param
local res = mw.html.create()
if border == 'none' then
res:node(tbl)
elseif border == 'subgroup' or border == 'child' then
-- We assume that this navboxMobile is being rendered in a list cell of a parent navboxMobile, and is
-- therefore inside a div with padding:0em 0.25em. We start with a </div> to avoid the
-- padding being applied, and at the end add a <div> to balance out the parent's </div>
res
:wikitext('</div>') -- XXX: hack due to lack of unclosed support in mw.html.
:node(tbl)
:wikitext('<div>') -- XXX: hack due to lack of unclosed support in mw.html.
else
res
:tag('table')
:addClass('navboxMobile')
:css('border-spacing', 0)
:cssText(args.bodystyle)
:cssText(args.style)
:tag('tr')
:tag('td')
:css('padding', '2px')
:node(tbl)
end
renderTrackingCategories(res)
return tostring(res)
end
function p.navboxMobile(frame)
if not getArgs then
getArgs = require('Module:Arguments').getArgs
end
args = getArgs(frame, {wrappers = 'Template:Navbox'})
-- Read the arguments in the order they'll be output in, to make references number in the right order.
local _
_ = args.title
_ = args.above
for i = 1, 20 do
_ = args["group" .. tostring(i)]
_ = args["list" .. tostring(i)]
end
_ = args.below
return p._navboxMobile(args)
end
return p