Module:ImageStackPopup

Module documentation

This module is rated as beta, and is ready for widespread use. It is still new and should be used with some caution to ensure the results are as expected.

Module Quality

Usage

{{#invoke:ImageStackPopup|image}}
{{#invoke:ImageStackPopup|gallery}}

Create an image that has a play button which popups a viewer showing a slideshow of some other images. Intended for use in viewing a series of medical images. See {{ImageStackPopup }} and {{ImageStackPopupGallery }} for more details.

This Module is a template gadget that requires the ImageStackPopup gadget to work. Follow the installation instructions to get it working in your wiki.

Installation

To install this template in your wiki:

Copy the pages Module:ImageStackPopup, Template:ImageStackPopup and Template:ImageStackPopupGallery to your wiki.

Create MediaWiki:Gadget-ImageStackPopup.js with the following code:

/**
 * ImageStackPopup: Creates a popup gallery viewer suitable for medical images
 * Documentation: https://www.mediawiki.org/wiki/ImageStackPopup
 * Source code: https://www.mediawiki.org/wiki/MediaWiki:Gadget-Global-ImageStackPopup.js
 */
mw.loader.load( '//www.mediawiki.org/w/load.php?modules=ext.gadget.Global-ImageStackPopup' );

Add the following gadget to MediaWiki:Gadgets-definition:

ImageStackPopup[ResourceLoader|hidden|default|categories=Gadget:ImageStackPopup]|ImageStackPopup.js

Done! Add your template to any page to verify that the installation was successful.

-- Requires ImageStackPopup gadget
local p = {}

function p.image( frame )
	math.randomseed(tonumber(mw.getContentLanguage():formatDate( "U" ))*10000 + os.clock()*10000)
	local args = frame:getParent().args
	local popupConfig = {}
	local caption = ''
	popupConfig.loop = args.loop == "yes"
	if tonumber( args.start ) then
		popupConfig.start = tonumber( args.start )
	else
		popupConfig.start = 1
	end
	if tonumber( args.width ) then
		popupConfig.width = tonumber( args.width )
	end
	if tonumber( args.height ) then
		popupConfig.height = tonumber( args.height )
	end
	popupConfig.list = args.list
	if args['noregisterimages'] == nil then
		-- Register this as a dependency so that this page shows up as using all the images on the list page
		frame:expandTemplate{ title = ':' .. args.list }
	end
	-- If we don't want to transclude for performance, maybe we could at least link
	-- however links need to actually be output on the page to register them.
	
	if args.caption then
		popupConfig.caption = "imagestackpopup-caption-" .. math.random()
		caption = tostring( mw.html.create( 'div' )
			:attr( 'id', popupConfig.caption )
			:attr( 'style', 'display: none' )
			:wikitext( args.caption )
			:done() )
	end
	if args.title then
		popupConfig.title = args.title
	end

	return tostring( mw.html.create( 'div' )
		:attr( 'class', 'ImageStackPopup' )
		:attr( 'data-imagestackpopup-config', mw.text.jsonEncode( { popupConfig } ) )
		:wikitext( args.file ) )
		.. caption .. '[[Category:Gadget:ImageStackPopup]]'

end


function p.gallery( frame )
	-- Seems like math.random is always seeded with 0 :(
	math.randomseed(tonumber(mw.getContentLanguage():formatDate( "U" ))*10000 + os.clock()*10000)
	local args = frame:getParent().args
	local reuseImageCaption = args.reuse_image_caption ~= nil
	local title = args["popup-title"]
	local captionId = nil
	local captionText = ''
	local galleryContents = ''
	local optionsArray = {}
	local galleryArgs = {}

	local galleryAttr = { "mode", "widths", "heights", "perrow", "caption", "showfilename", "showthumbnail", "id", "title", "class", "lang", "dir" }
	for i, j in ipairs( galleryAttr ) do
		galleryArgs[j] = args[j]
	end

	if args['popup-caption'] then
		captionId = 'imagestackpopup-caption-' .. math.random()
		captionText = tostring(
			mw.html.create( 'div' )
				:attr( 'style', 'display:none' )
				:attr( 'id', captionId )
				:wikitext( args['popup-caption'] )
		)
	end

	for row in mw.text.gsplit( args.gallery, "\n", true ) do
		local galleryRow = ''
		local popupOptions = { title = title, caption = captionId }
		for part in mw.text.gsplit( row, "!", true ) do
			equalSplit = mw.text.split( part, '=', true )
			if #equalSplit <= 1 then
				-- be sure this really is a caption.
				if galleryRow ~= '' and
					reuseImageCaption and
					#part > 8 and
					string.find( part, " ", 1, true )
				then
					local captionId = 'imagestackpopup-caption-' .. math.random()
					local wrappedPart = tostring( mw.html.create( 'span' )
						:attr( 'id', captionId )
						:wikitext( part )
					)
					popupOptions.caption = captionId
					galleryRow = galleryRow .. wrappedPart .. '|'
				else
					galleryRow = galleryRow .. part .. '|'
				end
			else
				if equalSplit[1] == 'popup-width' then
					popupOptions.width = tonumber(equalSplit[2])
				elseif equalSplit[1] == 'popup-height' then
					popupOptions.height = tonumber(equalSplit[2])
				elseif equalSplit[1] == 'popup-loop' then
					popupOptions.loop = equalSplit[2] ~= ''
				elseif equalSplit[1] == 'popup-start' then
					popupOptions.start = tonumber(equalSplit[2])
				elseif equalSplit[1] == 'popup-caption' then
					local captionIdForImg = 'imagestackpopup-caption-' .. math.random()
					captionText = captionText .. tostring( mw.html.create( 'div' )
						:attr( 'id', captionIdForImg )
						:css( 'display', 'none' )
						:wikitext( table.concat( equalSplit, '=', 2 ) )
					)
					popupOptions.caption = captionIdForImg
				elseif equalSplit[1] == 'popup-title' then
					popupOptions.title = table.concat( equalSplit, '=', 2 )
				elseif equalSplit[1] == 'popup-list' then
					popupOptions.list = table.concat( equalSplit, '=', 2 )
					if args['noregisterimages'] == nil then
						-- Register this as a dependency so that this page shows up as using all the images on the list page
						frame:expandTemplate{ title = ':' .. table.concat( equalSplit, '=', 2 ) }
					end
				else
					galleryRow = galleryRow .. part .. '|'
				end

			end
		end
		if string.sub( galleryRow, -1 ) == '|' then
			galleryRow = string.sub( galleryRow, 1, -2 )
		end
		galleryContents = galleryContents .. galleryRow .. "\n"
		optionsArray[#optionsArray+1] = popupOptions
	end
	return tostring( mw.html.create( 'div' )
		:attr( 'class', 'ImageStackPopup' )
		:attr( 'data-imagestackpopup-config', mw.text.jsonEncode( optionsArray ) )
		:wikitext( frame:extensionTag( 'gallery', galleryContents, galleryArgs ) )
		) .. captionText .. '[[Category:Gadget:ImageStackPopup]]'
end


return p