JSFiddle - React, Tailwind, and code Playground

by hyperthalamus

HTML

<textarea id="embedcode">
<!-- Put both of these <script> tags in your <head>. Though it will still work in the <body> you may get flickering of alt content. -->
<!-- This first <script> only needs to be on the page once even if you have multiple widgets. -->
<script type="text/javascript" src="http://qa.a-widget.com/kickFlash/scripts/swfobject2.js?2"></script>
<script type="text/javascript">
(function(){
   var flashvars = {affiliateSiteId:"194571", widgetId:"509731", width:"768", height:"1000", revision:"65"},
   params = {menu:"false", allowfullscreen:"true", allowscriptaccess:"always", wmode:"transparent"},
   attributes = {id:"kickWidget_194571_509731", name:"kickWidget_194571_509731"},
   expressInstallURL = "http://cdftest.kicktest.com/kickFlash/scripts/expressInstall2.swf?2",
   swfURL = "http://cdftest.kicktest.com/service/getWidgetSwf.kickAction",
   callback = function(e){ if (e.success==false){ document.getElementById("altContentDiv_509731").innerHTML = '<iframe src="http://qa.a-widget.com/kickFlash/js/compiler/v2/iframe.html?amp%3BwidgetId=509731&affiliateSiteId=194571&amp%3BwidgetHost=qa%2Ea%2Dwidget%2Ecom&amp%3Brevision=65&amp%3BreferralUrl=%27%20escape%28window%2Elocation%2Ehref%29%20%27" height="1000" width="768" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:768px;height:1000px"></iframe>' } } 
   swfobject.embedSWF(swfURL, "altContentDiv_509731", "768", "1000", "10", expressInstallURL, flashvars, params, attributes, callback);
})();
</script>

<!-- Put this <div> anywhere in the <body> of your page where you want the widget to show up. -->
<div id="altContentDiv_509731"></div>
</textarea>
<button id="getData">get data</button>

<hr />
<label>Source</label><input type="text" id="src" /> <br />
<label>height</label><input type="text" id="height" /> <br />
<label>width</label><input type="text" id="width" /> <br />

<hr />
<textarea id="json"></textarea>

CSS

textarea{
    width: 100%;
    height: 80px;
}
label{
    display: block;
    float: left;
    margin: 20px;
    clear: both;
}
input{
   display: block;
   float: left;
   margin: 20px;   
}
hr{
   clear : both;   
}

JavaScript

function KickTestUtils(){}

KickTestUtils.stripQuotes = function(str){
    if(str.charAt(0) == '"')
        str = str.substr(1);
    if(str.charAt(str.length - 1) == '"')
        str = str.substr(0, str.length - 1);
    return str;
}

KickTestUtils.getSrc = function (src){
    src = KickTestUtils.urldecode(src)
    src = src.split("?");
    src.shift();
    src = src.join("");
    src = KickTestUtils.stripQuotes(src)
    src = src.split("&amp;referralUrl")[0];
    return (src.indexOf("amp;") == 0)
           ? src = src.substr(4)
           : src;
}

KickTestUtils.urldecode = function (str) {
   return decodeURIComponent((str+'').replace(/\+/g, '%20'));
}

KickTestUtils.jsonTemplate = '  "[id]" : {\r'
    +  '      "name"          : "[name]",\r'
    +  '      "affiliateId"   : [affiliateId],\r'
    +  '      "widgetId"      : [widgetId],\r'
    +  '      "width"         : [width],\r'
    +  '      "height"        : [height],\r'
    +  '      "widgetHost"    : "[widgetHost]",\r'
    +  '      "revision"      : [revision]\r'
    +  '  }'

KickTestUtils.getSourceElements = function (srcArray){
    var srcElements = {};
    for(var i=0, len = srcArray.length; i < len; i++){
        var elementString = String(srcArray[i]);
        element = (elementString.charAt(0) == ';')
                ? String(elementString.substr(1)).split("=")
                : String(elementString).split("=");
        srcElements[element[0]] = element[1];
    }
    return srcElements;
}
    
KickTestUtils.getJSONString = function (src, height, width){
    var srcElements = KickTestUtils.getSourceElements(src.replace(/&amp;/g,"&").split("&"));
        affiliateId = 0,
        widgetId    = 0,
        widgetHost  = 0,
        revision    = 0,
        jsonString  = KickTestUtils.jsonTemplate
        .replace("[affiliateId]", srcElements["affiliateSiteId"] )
        .replace("[widgetId]", srcElements["widgetId"] )
        .replace("[width]", width)
        .replace("[height]", height)
       ...