Module:StyleUtils: Difference between revisions
From Against the Storm Official Wiki
m (changing class for version message box) |
(changed the resource link call parameters) |
||
(12 intermediate revisions by 2 users not shown) | |||
Line 8: | Line 8: | ||
local DEBUG_INLINE_STYLE_BEFORE_CSS = | local DEBUG_INLINE_STYLE_BEFORE_CSS = false | ||
Line 62: | Line 62: | ||
return mw.getCurrentFrame():expandTemplate{ | return mw.getCurrentFrame():expandTemplate{ | ||
title = "rl", | title = "rl", | ||
args= { | args = { name = name, size = size } | ||
} | |||
end | |||
StyleUtils.SERVICE_LINK = function(name, size) | |||
return mw.getCurrentFrame():expandTemplate{ | |||
title = "Service link", | |||
args = { service = name, iconsize = size } | |||
} | |||
end | |||
StyleUtils.BUILDING_LINK = function(name, size) | |||
return mw.getCurrentFrame():expandTemplate{ | |||
title = "bl", | |||
args = { name = name, size = size } | |||
} | } | ||
end | end | ||
Line 75: | Line 89: | ||
StyleUtils.NBSP = " " | StyleUtils.NBSP = " " | ||
StyleUtils.BOLD = "'''" | StyleUtils.BOLD = "'''" | ||
StyleUtils.ITALIC = "'" | StyleUtils.ITALIC = "''" | ||
StyleUtils.CLASS_VERSION_MESSAGE_BOX = "ats-messagebox-version" | |||
StyleUtils.CLASS_INFOBOX = "ats-infobox" | StyleUtils.CLASS_INFOBOX = "ats-infobox" | ||
StyleUtils.CLASS_INFOBOX_BORDER = "ats-infobox-border" | StyleUtils.CLASS_INFOBOX_BORDER = "ats-infobox-border" | ||
StyleUtils.CLASS_INFOBOX_HEADER = "ats-infobox-header" | StyleUtils.CLASS_INFOBOX_HEADER = "ats-infobox-header" | ||
StyleUtils.CLASS_INFOBOX_HEADER_BORDER = "ats-infobox-header-border" | StyleUtils.CLASS_INFOBOX_HEADER_BORDER = "ats-infobox-header-border" | ||
StyleUtils.CLASS_INFOBOX_HEADER_TITLE = "ats-infobox-header-title" | StyleUtils.CLASS_INFOBOX_HEADER_TITLE = "ats-infobox-header-title" | ||
StyleUtils.CLASS_INFOBOX_HEADER_ICON_BORDER = "ats-infobox-header-icon-border" | StyleUtils.CLASS_INFOBOX_HEADER_ICON_BORDER = "ats-infobox-header-icon-border" | ||
StyleUtils.CLASS_INFOBOX_INNER = "ats-infobox-innerinfo" | StyleUtils.CLASS_INFOBOX_INNER = "ats-infobox-innerinfo" | ||
StyleUtils.CLASS_INFOBOX_INNER_BORDER = "ats-infobox-innerinfo-border" | StyleUtils.CLASS_INFOBOX_INNER_BORDER = "ats-infobox-innerinfo-border" | ||
StyleUtils.CLASS_INFOBOX_INNER_NEXT_SECTION = "ats-infobox-separator" | StyleUtils.CLASS_INFOBOX_INNER_NEXT_SECTION = "ats-infobox-separator" | ||
StyleUtils.CLASS_RECIPE_CONTAINER = "ats-container-recipe" | |||
StyleUtils.CLASS_RECIPE_TABLE = "ats-table-recipe sortable mw-collapsible" | |||
StyleUtils.CLASS_RECIPE_HEADER = "ats-table-recipe-header" | |||
StyleUtils.CLASS_RECIPE_INGREDIENTS_LIST = "ats-table-recipe-ingredients-table" | |||
StyleUtils.CLASS_CATEGORY_ICON = "ats-category-icon" | StyleUtils.CLASS_CATEGORY_ICON = "ats-category-icon" | ||
StyleUtils.CLASS_GOODS_CATEGORY_ICON = "ats-goods-category-icon" | |||
StyleUtils.CLASS_BUILDING_ICON = "ats-building-icon" | |||
StyleUtils.CLASS_SINGLE_INGREDIENT_ICON = "ats-single-ingredient-icon" | |||
StyleUtils.CLASS_OPTIONAL_INGREDIENT_ICON = "ats-optional-ingredient-icon" | |||
StyleUtils.CLASS_PRODUCT_ICON = "ats-product-icon" | |||
StyleUtils. | StyleUtils.CLASS_PERK_ICONS = { | ||
["orange"] = "ats-perk-icon ats-perk-icon-orange", | |||
["purple"] = "ats-perk-icon ats-perk-icon-purple", | |||
["blue"] = "ats-perk-icon ats-perk-icon-blue", | |||
["green"] = "ats-perk-icon ats-perk-icon-green", | |||
["none"] = "ats-perk-icon", | |||
} | |||
StyleUtils.CLASS_FLAVORTEXT = "ats-flavor-text" | StyleUtils.CLASS_FLAVORTEXT = "ats-flavor-text" | ||
Line 188: | Line 223: | ||
end | end | ||
htmlNode:addClass(StyleUtils.CLASS_INFOBOX_INNER) | |||
htmlNode:addClass(StyleUtils.CLASS_INFOBOX_INNER_BORDER) | htmlNode:addClass(StyleUtils.CLASS_INFOBOX_INNER_BORDER) | ||
Line 208: | Line 243: | ||
return htmlNode | return htmlNode | ||
end | end | ||
--- | |||
--- Adds css-related classes to the provided html node. | |||
---@param htmlNode table mw.html object that we're styling | |||
---@return table the same htmlNode | |||
function StyleUtils.styleRecipeContainer(htmlNode) | |||
if DEBUG_INLINE_STYLE_BEFORE_CSS then | |||
-- no op | |||
end | |||
htmlNode:addClass(StyleUtils.CLASS_RECIPE_CONTAINER) | |||
return htmlNode | |||
end | |||
--- | |||
--- Adds css-related classes to the provided html node. | |||
---@param htmlNode table mw.html object that we're styling | |||
---@return table the same htmlNode | |||
function StyleUtils.styleRecipeTable(htmlNode) | |||
if DEBUG_INLINE_STYLE_BEFORE_CSS then | |||
htmlNode:addClass("wikitable") | |||
end | |||
htmlNode:addClass(StyleUtils.CLASS_RECIPE_TABLE) | |||
return htmlNode | |||
end | |||
--- | |||
--- Adds css-related classes to the provided html node. | |||
---@param htmlNode table mw.html object that we're styling | |||
---@return table the same htmlNode | |||
function StyleUtils.styleIngredientsSubtable(htmlNode) | |||
if DEBUG_INLINE_STYLE_BEFORE_CSS then | |||
-- no op | |||
end | |||
htmlNode:addClass(StyleUtils.CLASS_RECIPE_INGREDIENTS_LIST) | |||
return htmlNode | |||
end | |||
--- | |||
--- Adds css-related classes to the provided html node. | |||
---@param htmlNode table mw.html object that we're styling | |||
---@return table the same htmlNode | |||
function StyleUtils.styleVersionMessageBox(htmlNode) | |||
if DEBUG_INLINE_STYLE_BEFORE_CSS then | |||
htmlNode:cssText("max-width: 500px; margin-left: auto; padding: 15px; border: 1px solid #8ab3ff; border-radius: 12px; background: #dbe8ff; font-size: 10px") | |||
end | |||
htmlNode:addClass(StyleUtils.CLASS_VERSION_MESSAGE_BOX) | |||
return htmlNode | |||
end | |||
--- | |||
--- Adds css-related classes to the provided html | |||
--endregion | --endregion | ||
return StyleUtils | return StyleUtils |
Latest revision as of 04:04, 19 October 2024
Documentation for this module may be created at Module:StyleUtils/doc
--- --- Provides common shortcuts to css classes, markup, and other needed --- MediaWiki things. --- ---@module StyleUtils local StyleUtils = {} local DEBUG_INLINE_STYLE_BEFORE_CSS = false --region Public constants -- Lazy load template calls so we aren't expanding templates until they're needed StyleUtils.IMG_S = function() return mw.getCurrentFrame():expandTemplate{ title = "ImgS" } end StyleUtils.IMG_M = function() return mw.getCurrentFrame():expandTemplate{ title = "ImgM" } end StyleUtils.IMG_L = function() return mw.getCurrentFrame():expandTemplate{ title = "ImgL" } end StyleUtils.IMG_H = function() return mw.getCurrentFrame():expandTemplate{ title = "ImgH" } end StyleUtils.STARS = { [0] = function() return mw.getCurrentFrame():expandTemplate{ title = "0Star" } end, [1] = function() return mw.getCurrentFrame():expandTemplate{ title = "1Star" } end, [2] = function() return mw.getCurrentFrame():expandTemplate{ title = "2Star" } end, [3] = function() return mw.getCurrentFrame():expandTemplate{ title = "3Star" } end } StyleUtils.PAREN_STARS = { [0] = function() return mw.getCurrentFrame():expandTemplate{ title = "P0Star" } end, [1] = function() return mw.getCurrentFrame():expandTemplate{ title = "P1Star" } end, [2] = function() return mw.getCurrentFrame():expandTemplate{ title = "P2Star" } end, [3] = function() return mw.getCurrentFrame():expandTemplate{ title = "P3Star" } end } StyleUtils.RESOURCE_LINK = function(name, size) return mw.getCurrentFrame():expandTemplate{ title = "rl", args = { name = name, size = size } } end StyleUtils.SERVICE_LINK = function(name, size) return mw.getCurrentFrame():expandTemplate{ title = "Service link", args = { service = name, iconsize = size } } end StyleUtils.BUILDING_LINK = function(name, size) return mw.getCurrentFrame():expandTemplate{ title = "bl", args = { name = name, size = size } } end StyleUtils.AMBER = function() return mw.getCurrentFrame():expandTemplate{ title = "Amber" } end StyleUtils.CLASS_WIKITABLE_SORTABLE_COLLAPSIBLE = "wikitable sortable mw-collapsible ats-wikitable" StyleUtils.BR = "<br />" StyleUtils.NBSP = " " StyleUtils.BOLD = "'''" StyleUtils.ITALIC = "''" StyleUtils.CLASS_VERSION_MESSAGE_BOX = "ats-messagebox-version" StyleUtils.CLASS_INFOBOX = "ats-infobox" StyleUtils.CLASS_INFOBOX_BORDER = "ats-infobox-border" StyleUtils.CLASS_INFOBOX_HEADER = "ats-infobox-header" StyleUtils.CLASS_INFOBOX_HEADER_BORDER = "ats-infobox-header-border" StyleUtils.CLASS_INFOBOX_HEADER_TITLE = "ats-infobox-header-title" StyleUtils.CLASS_INFOBOX_HEADER_ICON_BORDER = "ats-infobox-header-icon-border" StyleUtils.CLASS_INFOBOX_INNER = "ats-infobox-innerinfo" StyleUtils.CLASS_INFOBOX_INNER_BORDER = "ats-infobox-innerinfo-border" StyleUtils.CLASS_INFOBOX_INNER_NEXT_SECTION = "ats-infobox-separator" StyleUtils.CLASS_RECIPE_CONTAINER = "ats-container-recipe" StyleUtils.CLASS_RECIPE_TABLE = "ats-table-recipe sortable mw-collapsible" StyleUtils.CLASS_RECIPE_HEADER = "ats-table-recipe-header" StyleUtils.CLASS_RECIPE_INGREDIENTS_LIST = "ats-table-recipe-ingredients-table" StyleUtils.CLASS_CATEGORY_ICON = "ats-category-icon" StyleUtils.CLASS_GOODS_CATEGORY_ICON = "ats-goods-category-icon" StyleUtils.CLASS_BUILDING_ICON = "ats-building-icon" StyleUtils.CLASS_SINGLE_INGREDIENT_ICON = "ats-single-ingredient-icon" StyleUtils.CLASS_OPTIONAL_INGREDIENT_ICON = "ats-optional-ingredient-icon" StyleUtils.CLASS_PRODUCT_ICON = "ats-product-icon" StyleUtils.CLASS_PERK_ICONS = { ["orange"] = "ats-perk-icon ats-perk-icon-orange", ["purple"] = "ats-perk-icon ats-perk-icon-purple", ["blue"] = "ats-perk-icon ats-perk-icon-blue", ["green"] = "ats-perk-icon ats-perk-icon-green", ["none"] = "ats-perk-icon", } StyleUtils.CLASS_FLAVORTEXT = "ats-flavor-text" --endregion --region Public methods --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleInfobox(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then htmlNode:cssText("clear:right;border-collapse:collapse;margin:0.5em 0 0.5em 1em;float:right;border-spacing:3px;border:1px solid #a2a9b1;width:256px;") end htmlNode:addClass(StyleUtils.CLASS_INFOBOX) htmlNode:addClass(StyleUtils.CLASS_INFOBOX_BORDER) return htmlNode end --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleInfoboxHeader(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then -- no op end htmlNode:addClass(StyleUtils.CLASS_INFOBOX_HEADER) htmlNode:addClass(StyleUtils.CLASS_INFOBOX_HEADER_BORDER) return htmlNode end --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleInfoboxTitle(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then -- no op end htmlNode:addClass(StyleUtils.CLASS_INFOBOX_HEADER_TITLE) return htmlNode end --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleInfoboxFlavorText(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then -- no op end htmlNode:addClass(StyleUtils.CLASS_FLAVORTEXT) return htmlNode end --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleInfoboxTitleIcon(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then -- no op end htmlNode:addClass(StyleUtils.CLASS_INFOBOX_HEADER_ICON_BORDER) return htmlNode end --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleInfoboxInnerTable(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then -- no op end htmlNode:addClass(StyleUtils.CLASS_INFOBOX_INNER) htmlNode:addClass(StyleUtils.CLASS_INFOBOX_INNER_BORDER) return htmlNode end --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleInfoboxSeparator(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then -- no op end htmlNode:addClass(StyleUtils.CLASS_INFOBOX_INNER_NEXT_SECTION) return htmlNode end --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleRecipeContainer(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then -- no op end htmlNode:addClass(StyleUtils.CLASS_RECIPE_CONTAINER) return htmlNode end --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleRecipeTable(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then htmlNode:addClass("wikitable") end htmlNode:addClass(StyleUtils.CLASS_RECIPE_TABLE) return htmlNode end --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleIngredientsSubtable(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then -- no op end htmlNode:addClass(StyleUtils.CLASS_RECIPE_INGREDIENTS_LIST) return htmlNode end --- --- Adds css-related classes to the provided html node. ---@param htmlNode table mw.html object that we're styling ---@return table the same htmlNode function StyleUtils.styleVersionMessageBox(htmlNode) if DEBUG_INLINE_STYLE_BEFORE_CSS then htmlNode:cssText("max-width: 500px; margin-left: auto; padding: 15px; border: 1px solid #8ab3ff; border-radius: 12px; background: #dbe8ff; font-size: 10px") end htmlNode:addClass(StyleUtils.CLASS_VERSION_MESSAGE_BOX) return htmlNode end --- --- Adds css-related classes to the provided html --endregion return StyleUtils