Documentation for this module may be created at Module:GetRootVerses/Display/doc
-- Module:GetRootVerses/Display
-- Handles all HTML rendering and display logic
local p = {}
-- Create a visibility toggle widget
function p.createToggle(frame, id, label, options)
options = options or {}
return frame:callParserFunction{
name = '#widget',
args = {
'SingleVisibilityToggle',
classes = options.classes or 'text-90',
toggleClasses = options.toggleClasses or 'd-inline-block text-50 mt-0 line10 py-1',
id = id,
checked = options.checked or 'checked',
active = options.active or 'active',
label = label
}
}
end
-- Render source text and transliteration
function p.renderVerseContent(data)
local parts = {}
-- Source text
if data.SegmentSource then
parts[#parts + 1] = '<div class="ToggleThese cursor-pointer p-bl-fix"><p>'
parts[#parts + 1] = data.SegmentSource
parts[#parts + 1] = '</p></div>'
end
-- Transliteration
if data.SourceTranslit then
parts[#parts + 1] = '<div class="ToggleThese cursor-pointer text-80" style="display: none;"><p>'
parts[#parts + 1] = data.SourceTranslit
parts[#parts + 1] = '</p></div>'
end
return table.concat(parts)
end
-- Render verse metadata info (TM button, alt verse number)
function p.renderVerseInfo(data, options)
options = options or {}
local parts = {'<div style="font-size: 1.2rem; margin-bottom: .25rem !important;">'}
-- Alternative verse number (for Dunhuang)
if options.showAltVerse and data.RootTextChapVerseNum then
parts[#parts + 1] = '<span class="text-70 text-muted pr-3">'
parts[#parts + 1] = '<i class="fa-sharp-duotone fa-solid fa-list-tree"></i> alt verse '
parts[#parts + 1] = data.RootTextChapVerseNum
parts[#parts + 1] = '</span>'
end
-- TM data button
if data.Page then
parts[#parts + 1] = '<span class="text-80">[['
parts[#parts + 1] = data.Page
parts[#parts + 1] = '|<i class="fa-sharp-duotone fa-solid fa-gear-complex-code text-60 link-no-border"></i> tm data]]</span>'
end
parts[#parts + 1] = '</div>'
return table.concat(parts)
end
-- Render source header with toggles
function p.renderSourceHeader(frame, label, transMemNum, showToggles)
local parts = {
'<div class="h4 mt-3 mb-2 mb-sm-3 line10 pb-2 pb-sm-1"><span class="mr-3">',
label,
'</span>'
}
if showToggles and transMemNum ~= '017' then
parts[#parts + 1] = '<div class="d-inline-block visibility-controls mb-0">'
parts[#parts + 1] = p.createToggle(frame, 'sourceLang-' .. transMemNum, 'source')
parts[#parts + 1] = p.createToggle(frame, 'transLang-' .. transMemNum, 'translation')
parts[#parts + 1] = '</div>'
end
parts[#parts + 1] = '</div>'
return table.concat(parts)
end
-- Render audio verse player
function p.renderAudioVerse(frame, file, transMemNum, verse, segmentOrder)
if not file then
return ''
end
return frame:expandTemplate{
title = 'AudioVerse',
args = {
file = file,
tm = transMemNum,
verse = verse,
id = transMemNum .. 'seg' .. segmentOrder
}
}
end
-- Render translation paragraphs
function p.renderTranslation(content)
if not content or #content == 0 then
return ''
end
local parts = {}
for _, text in ipairs(content) do
parts[#parts + 1] = '<p>'
parts[#parts + 1] = text
parts[#parts + 1] = '</p>'
end
return table.concat(parts)
end
-- Render version content column (source or translation)
function p.renderVersionColumn(frame, args)
return frame:expandTemplate{
title = 'VersionContent',
args = args
}
end
-- Render other translations toggle control
function p.renderTranslationsToggle(frame, transMemNum, isChecked)
local options = {}
if not isChecked then
options.checked = 'nope'
options.active = 'inactive'
options.toggle = 'off'
options.color = 'carnelian'
end
options.toggleClasses = 'd-block text-110 mr-0'
return table.concat({
'<div class="col-12 visibility-controls text-center d-block mb-2">',
p.createToggle(frame, 'translations-' .. transMemNum, 'Browse other translations', options),
'</div>'
})
end
-- Render translations box with all other translations
function p.renderTranslationsBox(frame, translations, sourceLabel, transMemNum)
if not translations or #translations == 0 then
return ''
end
local parts = {
'<div class="col-12"><div class="row mx-n4">',
'<div id="translations-', transMemNum, '" class="translations-box toggleable px-0 px-md-3 col-md mb-3">',
'<div class="offwhite-bg h-100 shadow rounded p-3 pb-5 mb-4 position-relative">',
'<div class="h5 red-header pb-0 mb-3">', sourceLabel, ' - Other translations</div>',
'<div class="d-flex flex-row overflow-auto pb-0 pr-5" style="scrollbar-width: none;">'
}
-- Add translation cards
for _, trans in ipairs(translations) do
-- Build TM buttons
local tmButtons = {}
if trans.page then
tmButtons[#tmButtons + 1] = frame:expandTemplate{
title = 'InternalLink',
args = {
wikipage = trans.page,
label = 'TM <i class="fa-duotone fa-angle-right fa-sm"></i>'
}
}
end
local tmButton = ''
if #tmButtons > 0 then
tmButton = '<span class="tsdwiki-top-actions text-70 pl-4 font-style-normal">' ..
table.concat(tmButtons) ..
'</span>'
end
parts[#parts + 1] = frame:expandTemplate{
title = 'VersionContent',
args = {
class = 'mr-5',
styles = 'min-width: 400px; max-width: 400px;',
content = p.renderTranslation(trans.content),
source = trans.source,
tmButton = tmButton,
shorttitle = trans.shortTitle
}
}
end
-- Scroll indicator and gradient
parts[#parts + 1] = table.concat({
'</div>',
'<div class="position-absolute" style="right: 0; top: 0; width: 15%; height: 100%; background: linear-gradient(to right, transparent, rgb(255 252 245)); max-width: 100px; margin-right: 1em;"></div>',
'<div class="position-absolute w-100 text-center opac-80" style="bottom: 10px; left: 0;">',
'<i class="fa-sharp-duotone fa-solid fa-angle-left"></i>',
'<span class="opac-50"> shift + scroll / swipe </span>',
'<i class="fa-sharp-duotone fa-solid fa-angle-right"></i>',
'</div>',
'</div></div></div></div>'
})
return table.concat(parts)
end
-- Render simple translations box (for SimpleVerse function)
function p.renderSimpleTranslationsBox(frame, translations, sourceLabel)
if not translations or #translations == 0 then
return ''
end
local parts = {
'<div class="row mx-n4">',
'<div class="translations-box px-0 px-md-3 col-md mb-3">',
'<div class="h-100 border rounded p-3 pb-5 mb-4 position-relative" style="background: #fdf5e4;">',
'<div class="h5 red-header pb-0 mb-3">', sourceLabel, ' - Other translations</div>',
'<div class="d-flex flex-row overflow-auto pb-0 pr-5" style="scrollbar-width: none;">'
}
-- Add translation cards
for _, trans in ipairs(translations) do
parts[#parts + 1] = frame:expandTemplate{
title = 'VersionContent',
args = {
class = 'mr-5',
styles = 'min-width: 400px; max-width: 400px;',
content = p.renderTranslation(trans.content),
source = trans.source,
shorttitle = trans.shortTitle
}
}
end
-- Scroll indicator with different background for simple version
parts[#parts + 1] = table.concat({
'</div>',
'<div class="position-absolute" style="right: 0; top: 0; width: 15%; height: 100%; background: linear-gradient(to right, transparent, #fdf5e4); max-width: 100px; margin-right: .7em;"></div>',
'<div class="position-absolute w-100 text-center opac-80" style="bottom: 10px; left: 0;">',
'<i class="fa-sharp-duotone fa-solid fa-angle-left"></i>',
'<span class="opac-50"> shift + scroll / swipe </span>',
'<i class="fa-sharp-duotone fa-solid fa-angle-right"></i>',
'</div>',
'</div></div></div>'
})
return table.concat(parts)
end
return p
