Module:StyleUtils: Difference between revisions

From Against the Storm Official Wiki
(Added service link template and perk icon classes)
(changed the resource link call parameters)
 
(2 intermediate revisions by the same user not shown)
Line 62: Line 62:
     return mw.getCurrentFrame():expandTemplate{
     return mw.getCurrentFrame():expandTemplate{
         title = "rl",
         title = "rl",
         args = { resource = name, iconsize = size }
         args = { name = name, size = size }
     }
     }
end
end
Line 76: Line 76:
     return mw.getCurrentFrame():expandTemplate{
     return mw.getCurrentFrame():expandTemplate{
         title = "bl",
         title = "bl",
         args = { building = name, iconsize = size }
         args = { name = name, size = size }
     }
     }
end
end
Line 223: Line 223:
     end
     end


        htmlNode:addClass(StyleUtils.CLASS_INFOBOX_INNER)
    htmlNode:addClass(StyleUtils.CLASS_INFOBOX_INNER)
     htmlNode:addClass(StyleUtils.CLASS_INFOBOX_INNER_BORDER)
     htmlNode:addClass(StyleUtils.CLASS_INFOBOX_INNER_BORDER)


Line 304: Line 304:
     return htmlNode
     return htmlNode
end
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 = "&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