JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<script type="text/javascript">!function(){function d(a){var c={val:a},d=a.split(/\s+in\s+/);return d[1]&&(c.val=b(0)+d[1],d=d[0].slice(b(0).length).trim().split(/,\s*/),c.key=d[0],c.pos=d[1]),c}function e(a,b,c){var d={};return d[a.key]=b,a.pos&&(d[a.pos]=c),d}function f(a,b,f){function p(a,b,c){k.splice(a,0,b),l.splice(a,0,c)}n(a,"each");var o,g=a.outerHTML,h=a.previousSibling,j=a.parentNode,k=[],l=[];f=d(f),b.one("update",function(){j.removeChild(a)}).one("premount",function(){j.stub&&(j=b.root)}).on("update",function(){var a=c(f.val,b);if(a){if(!Array.isArray(a)){var d=JSON.stringify(a);if(d==o)return;o=d,m(l,function(a){a.unmount()}),k=[],l=[],a=Object.keys(a).map(function(b){return e(f,b,a[b])})}m(k,function(b){if(b instanceof Object){if(a.indexOf(b)>-1)return}else{var c=s(a,b),d=s(k,b);if(c.length>=d.length)return}var e=k.indexOf(b),f=l[e];f&&(f.unmount(),k.splice(e,1),l.splice(e,1))});var n=j.childNodes,q=[].indexOf.call(n,h);m(a,function(c,d){var h=a.indexOf(c,d),m=k.indexOf(c,d);if(0>h&&(h=a.lastIndexOf(c,d)),0>m&&(m=k.lastIndexOf(c,d)),!(c instanceof Object)){var r=s(a,c),t=s(k,c);r.length>t.length&&(m=-1)}if(0>m){k.push(c),!o&&f.key&&(c=e(f,c,h));var u=new i({tmpl:g},{before:n[q+1+h],parent:b,root:j,item:c});return u.mount(),p(h,c,u)}return f.pos&&l[m][f.pos]!=h&&(l[m].one("update",function(a){a[f.pos]=h}),l[m].update()),h!=m?(console.log(n),j.insertBefore(n[q+m+1],n[q+h+1]),p(h,k.splice(m,1)[0],l.splice(m,1)[0])):void 0}),k=a.slice()}})}function g(a,b,c){q(a,function(a){if(1==a.nodeType){var d=w(a);if(d&&!a.getAttribute("each")){var e=new i(d,{root:a,parent:b});b.tags[a.getAttribute("name")||d.name]=e,a.innerHTML="",c.push(e)}m(a.attributes,function(c){/^(name|id)$/.test(c.name)&&(b[c.value]=a)})}})}function h(a,c,d){function e(a,c,e){if(c.indexOf(b(0))>=0){var f={dom:a,expr:c};d.push(o(f,e))}}q(a,function(a){var b=a.nodeType;if(3==b&&"STYLE"!=a.parentNode.tagName&&e(a,a.nodeValue),1==b){var d=a.getAttribute("each");return...

CSS

.qcm-box{
    border: 1px solid #333;
}

JavaScript

riot.tag('poll-module', '<div each="{question in opts.questions}"><poll-mcq question="{question}" if="{question.full_type === \'Sondage\'}"></poll-mcq><poll-vs question="{question}" if="{question.full_type === \'Versus\'}"></poll-vs></div>', function(opts) {

});
    
riot.tag('poll-mcq', '<section class="qcm-box"><header><p>Header</p><h1 class="fs-m">{opts.question.label}</h1><p class="mt-1 entrant fs-xxs"><span class="clr-warn" if="{opts.question.participants === 0}"> Soyez le 1er à voter </span><span if="{opts.question.participants > 0}"> {opts.question.participants} participants </span><span if="{\'q-\'+opts.question.id in parent.votes}">,vous avez voté !</span></p></header></section>', function(opts) {

});
    
riot.tag('poll-vs', '<section class="vs-box"><header><h1 class="fs-m">{opts.question.label}</h1><p class="mt-1 entrant fs-xxs"><span class="clr-warn" if="{opts.question.participants === 0}"> Soyez le 1er à voter </span><span if="{opts.question.participants > 0}"> {opts.question.participants} participants </span><span if="{\'q-\'+opts.question.id in parent.votes}">,vous avez voté !</span></p></header></section>', function(opts) {

});
var data2 = {
            "id":2,
            "questions":[{
                "full_type":"Sondage",
                "participants":7,
                "image_path":null,
                "id":2,
                "label":"Quel temps fera-t-il demain matin ?",
                "answers":[{
                    "id":3,
                    "label":"Pluie",
                    "score":7
                },{
                    "id":4,
                    "label":"Soleil",
                    "score":0
                },{
                    "id":5,
                    "label":"Neige",
                    "score":0
                }]
            }]
         };
        var data1 = {
            "id":1,
            "questions":[{
                "full_type":"Versus",
                "participants":3,
               ...