Jump to content

Module:Spatial image viewer

Edit links
From Wikipedia, the free encyclopedia
This is an old revision of this page, as edited by Bawolff (talk | contribs) at 14:16, 16 January 2025 (Small fix for wikipedia app. It seems like it modifies html in some weird way to do dynamic image loading, which messes with instrinsic height calculation.). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

-- Generate a pseudo-3D image viewer
-- If you have a picture of an object from multiple angles this
-- lets users click through them.

-- Similar to User:Bawolff/earth_rotation except using separate images instead of a sprite sheet.
local p = {}
local heightCache

local function getStart( axis, frame )
	return tonumber(frame.args['start'..axis] or 0)
end

local function getButton( frame, imageList, dir )
	local buttonText, formula, forId, disableFormula, startHidden
	startDisabled = false
	if dir == 'up' then
		buttonText = frame.args['uptext'] or '↑'
		if #imageList < 2 then
			return ''
		end
		forId = 'y'
		formula = '(y+1)%' .. (#imageList)
		if frame.args['wrapVertical'] == 'false' then
			disableFormula = 'ifgreaterorequal(y,' .. (#imageList-1) .. ')'
		end
		if getStart('Y',frame) == #imageList-1 then
			startDisabled = true
		end
	elseif dir == 'down' then
		buttonText = frame.args['downtext'] or '&darr;'
		if #imageList < 2 then
			return ''
		end
		forId = 'y'
		formula = '(y-1+'.. #imageList .. ')%' .. (#imageList)
		if frame.args['wrapVertical'] == 'false' then
			disableFormula = 'ifzero(y)'
		end
		if getStart('Y',frame) == 0 then
			startDisabled = true
		end
	elseif dir == 'right' then
		buttonText = frame.args['lefttext'] or '&rarr;'
		if #imageList[1] < 2 then
			return ''
		end
		forId = 'x'
		formula = '(x+1)%' .. (#imageList[1])
		if frame.args['wrapHorizontal'] == 'false' then
			disableFormula = 'ifgreaterorequal(x,' .. (#imageList[1]-1) .. ')'
		end
		if getStart('X',frame) == #imageList[1]-1 then
			startDisabled = true
		end
	elseif dir == 'left' then
		buttonText = frame.args['righttext'] or '&larr;'
		if #imageList[1] < 2 then
			return ''
		end
		forId = 'x'
		formula = '(x-1+'.. #imageList[1] .. ')%' .. (#imageList[1])
		if frame.args['wrapHorizontal'] == 'false' then
			disableFormula = 'ifzero(x)'
		end
		if getStart('X',frame) == '0' then
			startDisabled = true
		end
	else
		error( "Unrecognized direction" )
	end

	local button = frame:expandTemplate{
		title = 'Calculator button',
		args = {
			type = 'default',
			["for"] = forId,
			contents = buttonText,
			formula = formula
		}
	}
	if disableFormula ~= nil then
		button = frame:expandTemplate{
			title = 'calculator-hideifzero',
			args = {
				text = button,
				formula = 'not(' .. disableFormula .. ')',
				starthidden = startDisabled
			}
		} .. frame:expandTemplate{
			title = 'calculator-hideifzero',
			args = {
				text = frame:expandTemplate{
					title = 'Calculator button',
					args = {
						type = 'default',
						contents = buttonText,
						disabled = '1'
					}
				},
				formula = disableFormula,
				starthidden = not startDisabled
			}
		}
	end
	return button
end

-- We assume all images have roughly the same aspect ratio
local function getHeight(frame, imageList)
	if frame.args['height'] then
		return frame.args['height']
	end

	if heightCache == nil then
		local title = mw.title.new( imageList[1][1], 'File' )
		assert( title and title.file, "Invalid file")
		heightCache = math.ceil((tonumber(frame.args['width']) or 250) * (title.file.height/title.file.width))
	end
	return heightCache
end

local function parseImageList( images )
	local imageList = {}
	local rows = mw.text.split( mw.text.trim( images ), "\n%-+\n" )
	local width, height
	for i, v in ipairs( rows ) do
		row = mw.text.split( mw.text.trim( v ), "\n+" )
		imageList[#imageList+1] = row
		if width == nil then
			width = #row
			assert( width >= 1, "Must have at least one column of images" )
		else
			assert( width == #row, "Must have a square matrix of images" )
		end
	end
	assert( #imageList >= 1, "Must have at least one row of images" )
	return imageList
end

local function getImages(frame, imageList)
	local html = mw.html.create( 'div' )
	html
		:css( 'width', (frame.args['width'] or 250) .. 'px' )
		:css( 'height', getHeight(frame, imageList) .. 'px' )
		:css( 'position', 'relative' )

	for imgRowNumb, imgRow in ipairs( imageList ) do
		for imgColNumb, img in ipairs( imgRow ) do
			local zDefault = 0
			if (imgColNumb-1 == getStart('X',frame)) and (imgRowNumb-1 == getStart('Y',frame)) then
				zDefault = 1
			end
			local formula = 'ifequal(x,' .. (imgColNumb-1) .. ','
				.. 'ifequal(y,' .. (imgRowNumb-1) .. '))'
			html:tag( 'div' )
				:css( 'position', 'absolute' )
				:css( 'background', frame.args['background'] or '#fff' )
				:css( 'width', (frame.args['width'] or 250) .. 'px' )
				:css( 'height', getHeight(frame, imageList) .. 'px' )
				:css( 'z-index', 'var( --calculator-x' .. (imgColNumb-1) .. 'y' .. (imgRowNumb-1) .. ',' .. zDefault .. ')')
				:wikitext( frame:preprocess(
					'[[File:' .. img .. '|' .. (frame.args['width'] or 250) .. 'x' .. getHeight(frame,imageList) .. 'px]]' ..
					'{{calculator|type=hidden|id=x' .. (imgColNumb-1) .. 'y' .. (imgRowNumb-1) .. '|formula=' .. formula .. '|default=' .. zDefault .. '}}'
				) )
		end
	end
	if frame.args.fallbackImage then
		html:tag( 'div' )
			:css( 'position', 'absolute' )
			:css( 'background', frame.args['background'] or '#fff' )
			:css( 'width', (frame.args['width'] or 250) .. 'px' )
			:css( 'height', getHeight(frame, imageList) .. 'px' )
			:css( 'z-index', '3')
			:addClass( 'calculatorgadget-fallback' ) -- if calc enabled with will be display:none
			:wikitext( frame:preprocess(
				'[[File:' .. frame.args.fallbackImage .. '|' .. (frame.args['width'] or 250) .. 'x' .. getHeight(frame,imageList) .. 'px]]'
			) )
	end
	return tostring(html)
end

function p.makeViewer(frame)
	local pFrame = frame:getParent()
	local args = pFrame.args
	local width = args['width'] or 250
	assert( args['images'], "Images argument required")
	local imageList = parseImageList( args['images'] )

	local descId = mw.uri.anchorEncode( 'spatialviewer-desc-' .. imageList[1][1] )
	local html = mw.html.create( 'div' )
	html:addClass( 'spatialviewer calculator-container' )
	-- TODO dark mode support. We set an explicit background to make sure that if some of the images
	-- are different dimensions or transparent they don't show through each other. This messes up some
	-- dark mode related styles
	html:addClass( 'notheme' )
	html:attr( 'aria-describedby', descId )
	html:cssText( args['style'] )
	html:css( 'float', args['float'] )
		:css( 'display', 'grid' )
		:css( 'width', 'max-content' )
		:css( 'grid-template-columns', '1fr ' .. width .. 'px 1fr' )
		:css( 'border', '1px var(--border-color-base,#a2a9b1) solid' )
		:css( 'padding', '0.5em' )
		:css( 'gap', '3px' )
		:css( 'background', args['background'] or '#fff' ) -- Should this be var(--background-color-base, '#fff') ?

	html:tag( 'div' )
		:css( 'display', 'none' ) -- Only display if calculator gadget enabled
		:addClass( 'calculatorgadget-enabled' )
		:css( 'grid-column', '1/4' )
		:css( 'margin', 'auto' )
		:wikitext(
			getButton( pFrame, imageList, 'up' )
		)

	html:tag( 'div' )
		:css( 'display', 'none' ) -- Only display if calculator gadget enabled
		:addClass( 'calculatorgadget-enabled' )
		:css( 'margin-top', 'auto' )
		:css( 'margin-bottom', 'auto' )
		:wikitext(
			getButton( pFrame, imageList, 'left' )
		)

	html:tag( 'div' )
		:css( 'grid-column', 2 ) -- Important for the no-js case where other items hidden.
		-- Wikipedia App modifies HTML in some unclear way which causes the intrinsic height to be incorrect
		-- so explicitly set a height here.
		:css( 'min-height', getHeight(pFrame, imageList) .. 'px' )
		:wikitext(
			getImages( pFrame, imageList )
		)

	html:tag( 'div' )
		:css( 'display', 'none' ) -- Only display if calculator gadget enabled
		:addClass( 'calculatorgadget-enabled' )
		:css( 'margin-top', 'auto' )
		:css( 'margin-bottom', 'auto' )
		:wikitext(
			getButton( pFrame, imageList, 'right' )
		)

	html:tag( 'div' )
		:css( 'display', 'none' ) -- Only display if calculator gadget enabled
		:addClass( 'calculatorgadget-enabled' )
		:css( 'grid-column', '1/4' )
		:css( 'margin', 'auto' )
		:wikitext(
			getButton( pFrame, imageList, 'down' )
		)
	if args.caption then 
		html:tag( 'div' )
			:css( 'grid-column', '1/4' )
			:css( 'border-top', '1px solid #eaecf0' ) -- caption styles could probably be improved
			:css( 'margin-top', '0.5em' )
			:css( 'padding-top', '0.5em' )
			:attr( 'id', descId )
			:wikitext( frame:preprocess( args.caption ) )
	end
	html:wikitext(
		frame:preprocess(
			'{{calculator|id=x|type=hidden|default=' .. getStart('X',pFrame) .. '}}' ..
			'{{calculator|id=y|type=hidden|default=' .. getStart('Y',pFrame) .. '}}'
		)
	)

	return tostring(html)
end
return p
Retrieved from "https://en.wikipedia.org/w/index.php?title=Module:Spatial_image_viewer&oldid=1269807132"