JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script type="text/template" name="image">
    <section class="selection">
        <header>{answer}</header>
        Ciao
        <section><img src="{image}" /></section>
    </section>
</script>
<section id="output"></section>

CSS

.selection header {
    background-color: gray;
    width: 140px;
}

body{
    
    background-color: gray;
}

JavaScript

var mock = {
    "id": "dsfadsf",
        "text": "sfdf",
        "values": null,
        "mandatory": false,
        "additionalParameters": {
        "images": [{
            "answer": "image_a",
                "image": "http://placekitten.com/g/200/300"
        }, {
            "answer": "image_b",
                "image": "http://placekitten.com/g/300/300"
        }]
    },
        "helpText": null,
        "collectionGroup": null,
        "summaryTemplate": null,
        "type": "imageselect",
        "groups": []
},
_ = {
    each: function (a, fn) {
        if (a.length) {
            for (var i = 0, max = a.length; i < max; i++) {
                fn(a[i])
            }
        } else {
            for (var prop in a) {
                fn(a[prop])
            }
        }
    },
    substitute: function(string, obj) {
        return string.replace(/\{(.+?)\}/gm, function (a, b) {
            console.log(a, b, obj, obj[b])
            return obj[b] || ''
        })
    }
}
 
var imageselect = function (anchor, data) {

    var output = [], template = xtag.query(document, '[type="text/template"][name=image]')[0].innerHTML;

    output.push("<div data-id='", data.id, "'>{content}</div>")

    var content = []


    _.each(data.additionalParameters.images, function (selection) {
       //content.push(_.substitute(template, selection));                
        content.push('<single-image data-answer="', selection.answer, '" data-image="', selection.image, '">', template, '</single-image>')
    })


    document.getElementById(anchor).innerHTML = _.substitute(output.join(''), {
        content: content.join('')
    })
    
    _.each( document.querySelectorAll('single-image'), function(image){
        image.onclick = function(){
            alert(image.value())
        }
    })
}

imageselect('output', mock)

xtag.register('single-image', {
  lifecycle: {
    created: function() {
      var answer = this.getAttribute('data-answer'),
          image =...