ماڊيول:HtmlBuilder

HtmlBuilder اهڙو اوزار فراهم ڪري ٿو جنهن سان پيچيده HTML ۽ CSS مارڪ اپ تيار ڪري سگهجي ٿو، جتي نوڊن جو هڪ وڻ (tree) ٺاهيو ويندو آهي، بلڪل دستاويزي چيز واري نموني وانگر۔ نتيجي ۾ ڪوڊن جي اهڙي فهرست ملي ٿي جيڪا صرف سٽرنگن کي گڏ ڪرڻ جي ڀيٽ ۾ وڌيڪ سمجهڻ لائق ۽ سنڀالڻ ۾ آسان هوندي۔ هي هڪ روان انٽرفيس مهيا ڪري ٿو جيڪو جي ڪئيري (jQuery) استعمال ڪندڙن لاءِ واقف لڳندو۔

نوٽ: هي ماڊيول هاڻي پراڻو ٿي چڪو آهي ۽ ان جي بدران mw.html استعمال ڪرڻ جي سفارش ڪئي وڃي ٿي۔

استعمال

پهريون، توهان کي ماڊيول لوڊ ڪرڻو پوندو:

local HtmlBuilder = require('Module:HtmlBuilder')

ان کان پوءِ، بنيادي (root) HtmlBuilder انسٽينس ٺاهيو:

local builder = HtmlBuilder.create()

پوءِ، توهان HtmlBuilder انسٽينس جا هيٺ ڏنل طريقا (methods) استعمال ڪري HTML ٺاهي سگهو ٿا۔

آخر ۾، تيار ٿيل HTML مارڪ اپ کي سٽرنگ جي صورت ۾ حاصل ڪريو:

local s = tostring(builder)

طريقا

چيننگ جي سهولت لاءِ، سڀ طريقا ٺاھيندڙ ڏانهن حوالو واپس ڪن ٿا، جيستائين ٻي صورت بيان نه ڪئي وئي هجي۔

tag

local div = builder.tag('div') هي ٺاھيندڙ ۾ هڪ نئون child node شامل ڪري ٿو ۽ انهي نئين node جي نمائندگي ڪندڙ HtmlBuilder انسٽينس واپس ڪري ٿو۔

ٿي چڪل

builder = div.done() اهو parent node واپس ڪري ٿو جنهن هيٺ موجوده node ٺاهيو ويو هو۔ jQuery.end وانگر، هي هڪ سهولتي فنڪشن آهي جيڪو ڪيترن child node کي هڪ ئي بيان (statement) ۾ چين ڪرڻ لاءِ استعمال ڪيو ويندو آهي۔

سڀ ٿي چڪو

builder = div.allDone() هي .done() وانگر آهي، پر اهو سڄي وڻ (tree) ۾ مٿي وڃي آخرڪار root node تائين پهچي ان کي واپس ڪري ٿو۔

وڪي عبارت

div.wikitext('This is some [[example]] text.') هي node ۾ ڪجهه مارڪ اپ شامل ڪري ٿو۔ ان ۾ سادو متن، وڪي مارڪ اپ، ۽ HTML مارڪ اپ به شامل ٿي سگهي ٿو۔

نئين سٽ

div.newline() هي node ۾ نئين لائين جو ڪردار شامل ڪري ٿو۔ اهو .wikitext('\n') جي برابر آهي۔

attr

div.attr('title', 'Attr value') هي node تي هڪ HTML attribute مقرر ڪري ٿو۔

css

div.css('color', '#f00') هي node جي style attribute ۾ شامل ڪرڻ لاءِ هڪ CSS خاصيت مقرر ڪري ٿو۔

css عبارت

div.cssText('color:#f00; font-size:1.5em') هي node جي style attribute ۾ سڌو CSS متن شامل ڪري ٿو۔ عام طور تي اهو تڏهن استعمال ڪيو ويندو آهي جڏهن ڪو سانچو (سانچا) CSS کي پيرا ميٽر طور قبول ڪري، جهڙوڪ {{Navbox}} جو liststyle پيرا ميٽر۔

addClass

div.addClass('even') هي node جي class attribute ۾ هڪ ڪلاس نالو شامل ڪري ٿو۔ هر نئين ڪلاس نالي کي ڌار ڪرڻ لاءِ خالي جاءِ پاڻمرادو شامل ڪئي ويندي۔

مثال

local HtmlBuilder = require('Module:HtmlBuilder')

local root = HtmlBuilder.create()

root
    .wikitext('Lorem ')
    .tag('span')
        .css('color', 'red')
        .attr('title', 'ipsum dolor')
        .wikitext('sit amet')
        .done()
    .tag('div')
        .wikitext('consectetur adipisicing')

local s = tostring(root)
-- s = 'Lorem <span style="color:red;" title="ipsum dolor">sit amet</span><div>consectetur adipisicing</div>'

وڌيڪ مثالن لاءِ مهرباني ڪري ٽيسٽ ڪيس صفحو ۽ ٽيسٽ ڪيس نتيجا ڏسو۔

---

-- Module for building complex HTML (e.g. infoboxes, navboxes) using a fluent interface.

local HtmlBuilder = {}

local metatable = {}

metatable.__index = function(t, key)
    local ret = rawget(t, key)
    if ret then
        return ret
    end
    
    ret = metatable[key]
    if type(ret) == 'function' then
        return function(...) 
            return ret(t, ...) 
        end 
    else
        return ret
    end
end

metatable.__tostring = function(t)
    local ret = {}
    t._build(ret)
    return table.concat(ret)
end

metatable._build = function(t, ret)
    if t.tagName then 
        table.insert(ret, '<' .. t.tagName)
        for i, attr in ipairs(t.attributes) do
            table.insert(ret, ' ' .. attr.name .. '="' .. attr.val .. '"') 
        end
        if #t.styles > 0 then
            table.insert(ret, ' style="')
            for i, prop in ipairs(t.styles) do
                if type(prop) == 'string' then -- added with cssText()
                    table.insert(ret, prop .. ';')
                else -- added with css()
                    table.insert(ret, prop.name .. ':' .. prop.val .. ';')
                end
            end
            table.insert(ret, '"')
        end
        if t.selfClosing then
            table.insert(ret, ' /')
        end
        table.insert(ret, '>') 
    end
    for i, node in ipairs(t.nodes) do
        if node then
            if type(node) == 'table' then
                node._build(ret)
            else
                table.insert(ret, tostring(node))
            end
        end
    end
    if t.tagName and not t.unclosed and not t.selfClosing then
        table.insert(ret, '</' .. t.tagName .. '>')
    end
end

metatable.node = function(t, builder)
    if builder then
        table.insert(t.nodes, builder)
    end
    return t
end

metatable.wikitext = function(t, ...) 
    local vals = {...}
    for i = 1, #vals do
        if vals[i] then
            table.insert(t.nodes, vals[i])
        end
    end
    return t
end

metatable.newline = function(t)
    table.insert(t.nodes, '\n')
    return t
end

metatable.tag = function(t, tagName, args)
    args = args or {}
    args.parent = t
    local builder = HtmlBuilder.create(tagName, args)
    table.insert(t.nodes, builder)
    return builder
end

local function getAttr(t, name)
    for i, attr in ipairs(t.attributes) do
        if attr.name == name then
            return attr
        end
    end
end

metatable.attr = function(t, name, val)
    if type(val) == 'string' or type(val) == 'number' then
        -- if caller sets the style attribute explicitly, then replace all styles previously added with css() and cssText()
        if name == 'style' then
            t.styles = {val}
            return t
        end
        
        local attr = getAttr(t, name)
        if attr then
            attr.val = val
        else
            table.insert(t.attributes, {name = name, val = val})
        end
    end
    
    return t
end

metatable.addClass = function(t, class)
    if class then
        local attr = getAttr(t, 'class')
        if attr then
            attr.val = attr.val .. ' ' .. class
        else
            t.attr('class', class)
        end
    end
    
    return t
end

metatable.css = function(t, name, val)
    if type(val) == 'string' or type(val) == 'number' then
        for i, prop in ipairs(t.styles) do
            if prop.name == name then
                prop.val = val
                return t
            end
        end
        
        table.insert(t.styles, {name = name, val = val})
    end
    
    return t
end

metatable.cssText = function(t, css)
    if css then
        table.insert(t.styles, css)
    end
    return t
end

metatable.done = function(t)
    return t.parent or t
end

metatable.allDone = function(t)
    while t.parent do
        t = t.parent
    end
    return t
end

function HtmlBuilder.create(tagName, args)
    args = args or {}
    local builder = {}
    setmetatable(builder, metatable)
    builder.nodes = {}
    builder.attributes = {}
    builder.styles = {}
    builder.tagName = tagName
    builder.parent = args.parent
    builder.unclosed = args.unclosed or false
    builder.selfClosing = args.selfClosing or false
    return builder
end

return HtmlBuilder