JSFiddle - React, Tailwind, and code Playground

by tlarson

HTML

<input data-bind="value: members.widgets.type"></input>
<textarea data-bind="value: code, click: function(vm, e)  { $(e.currentTarget).select(); } "></textarea>

JavaScript

var codeTemplate = 
'<div id="ebt-{0}" data-href="https://test.com/widgets/v1/{1}[email protected]" data-width="100%" data-height="500px"></div>\n' +
'<script type="text/javascript">\n' +
'    (function (d, s, id) {\n' +
'        var js, fjs = d.getElementsByTagName(s)[0];\n' +
'        if (!d.getElementById(id)) {\n' +
'          js = d.createElement(s);\n' +
'          js.id = id;\n' +
'          js.async = true;\n' +
'          js.src = "//test.com/scripts/exposure.widgets.min.js";\n' +
'          fjs.parentNode.insertBefore(js, fjs);\n' +
'        }\n' +
'    })(document, "script", "ebt.widgets");\n' +
'<\/script>';
            
var app = {};
app.viewModel = {};
app.viewModel.members = {};
app.viewModel.members.widgets = {
    type: ko.observable(),
    code: ko.observable(),
    list: [
        { id: 'registration', type: '1' },
        { id: 'payments', type: '2' }
    ]
};

app.viewModel.members.widgets.selectedWidget = ko.computed(function() {
    if (!app.viewModel.members.widgets.type())
        return null;
    return ko.utils.arrayFirst(app.viewModel.members.widgets.list, function(widget) {
        return widget.type == app.viewModel.members.widgets.type();
    });
});

app.viewModel.code = ko.computed(function() {
    var selected = app.viewModel.members.widgets.selectedWidget();
    if (selected) {
        var result = codeTemplate.replace('{0}',selected.id).replace('{1}',selected.id);
        return result;
    } else {
        return "";
    }
});

ko.applyBindings(app.viewModel);