Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@MoyomonDQ

タグ付きテンプレートでコーディングしてみるテスト

簡単なページを作る時にwikiのように書けたらと思い

test.js

$(e=>{

    var vote = `
        Across the Universe
        Baby It's You
        Carol
        Dear Prudence
        Every Little Thing
    `.trim().split(/\s*\n+\s*/)

    var episode = Object.entries({
        EVENT_A:'All You Need Is Love',
        EVENT_B:'Bad Boy',
        EVENT_C:'Come Together',
        EVENT_D:'Dig a Pony',
    })

    $('body').append(_html`
        ul.Tab(
            li,data-index=0,tab
            li,data-index=1,tab
            li,data-index=2,tab
        ),${e=>console.log(e.target.dataset)}
        .Contents(
            .pane,data-tab=Content1(
                .cover,image=hero.png,text
                .header,Content1 | header-1
                .row(span,Ain't She Sweet)
                .row(b,Baby It's You)
                //.row(img,src=Telop.png)
            )
            .pane,data-tab=Content2(
                .header,Content2 | header-1
                ul.rows,${vote.map(s=>_html('li',s))}
                .header,Content2 | header-2
                ul.rows,${vote.map((s,i)=>
                    _html('li',s,{index:i,value:s})
                )},${e=>{
                    console.log(e.target.dataset)
                }}
            )
            .pane,data-tab=Content3(
                .header,Content3 | header-1
                ul.rows,${episode.map(a=>
                    _html('li,name:',a[1],{type:a[0],value:a[1]})
                )},${e=>{
                    console.log(e.target.dataset)
                }}
            )
        )
    `)
})

function _html(...a){
    if(typeof a[0]==='string')      return _html.static.create(a)
    if(a[0] instanceof jQuery)      return _html.static.append(a.shift(),a)
    if(_html.template.isTagged(a))  return _html.template.parse(a)
    return $('<div>')
}

_html.static = new class{

    video(){return $('<video loop autoplay muted>')}
    image(q,s){q.css('background-image',`url(${s})`)}
    data(q,data){$.each(data,(k,v)=>{q[0].dataset[k]=v})}

    create(a){
        var q,m
        var text = a.shift().trim().replace(/\s*(,|=)\s*/g,'$1')
        switch(m = text.match(/^\w+/)){
            case 'video':   q = this.video();   break;
            case null:      q = $('<div>');     break;
            default:        q = $('<'+m+'>')
        }
        text.replace(/,([\w-]+)=([^,]+)/g,(m,k,v)=>{
            switch(k.toLowerCase()){
                case 'image':       this.image(q,v);    break;
                case 'background':  this.image(q,v);    break;
                default:            q.attr(k,v)
            }
            return ''
        }).replace(/,([^,]+)/g,(m,s)=>{
            q.append(s)
            return ''
        }).replace(/([#\.])([\w-]+)/g,(m,s,t)=>{
            switch(s){
                case '#':   q.attr('id',t); break;
                case '.':   q.addClass(t);  break;
            }
            return ''
        })
        return this.append(q,a)
    }
    append(q,a){
        a.forEach(v=>{
            if(v instanceof jQuery){
                q.append(v)
            }else{
                switch(Object.prototype.toString.call(v)){
                    case '[object Function]':   q.click(v);     break;
                    case '[object Object]':     this.data(q,v); break;
                    default:q.append(v);
                }
            }
        })
        return q
    }
}

_html.template = new class{
    isTagged(a){
        if(Array.isArray(a[0])==false)          return false
        if(a[0].length!=a.length)               return false
        if(a[0].hasOwnProperty('raw')==false)   return false
        return true
    }
    parse(a){
        var text = a[0].map((s,i)=>{
            if(i==0) return s
            if(typeof a[i]==='string') return a[i]+s 
            return '<!--'+i+'-->'+s
        }).join('').trim()
        var _check = text
        while (/\(([^()]+)\)/.test(text)){
            text = text.replace(/\(([^()]*)\)/g,(m,s)=>{
                a.push(this.rows(s.trim(),a))
                return '<!--'+(a.length-1)+'-->'
            })
        }
        var v = this.rows(text,a)
        if(v.length==1) return v[0]
        return _html('',v)
    }
    rows(text,vars){
        var rows = text.trim().split(/\s*\n\s*/).map(row=>{
            if(/<!--\d+-->/.test(row)) return this.row(row,vars)
            return [row]
        }).filter(a=>/^\/\//.test(a[0])==false)
        return rows.map(args=>_html(...args))
    }
    row(row,vars){
        var args = []
        row.replace(/(<!--|-->)/g,m=>{
            if(m=='<!--')   return "\n"+m
            if(m=='-->')    return m+"\n"
            return r
        }).split("\n").forEach((s,i)=>{
            var m = s.match(/^<!--(\d+)-->$/)
            switch(true){
                case(m!=null):  args.push(vars[m[1]]);          break
                case(i==0):     args.push(s.replace(/,+$/,'')); break
                default:        args = args.concat(s.split(','));
            }
        })
        args = args.filter(s=>s!='')
        if(typeof args[0] ==='string') return args
        if(args[0] instanceof jQuery) return args
        args.unshift('div')
        return args
    }
}

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
MoyomonDQ
普通のゲーマー

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?