function insertCodePen(container, js_code) {
var code = "async function run() {\n" + js_code + "\n}\nrun();"
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"https://codepen.io/pen/define")
f.setAttribute('target', "_blank")
var i = document.createElement("input");
i.setAttribute('type',"hidden");
i.setAttribute('name',"data");
i.setAttribute('value',JSON.stringify({
"title": "Tinybird Pen!",
"html": "Open the console below!",
"js": code,
"js_external": "https://cdn.tinybird.co/static/js/tinybird.js"
}))
var b = document.createElement('button');
var ba = document.createElement('span')
b.setAttribute('type','submit');
b.innerHTML = ''
b.className = 'codepen-button tooltip'
ba.className = 'tooltiptext'
ba.innerText = 'Open in Codepen'
b.appendChild(ba)
f.appendChild(i);
f.appendChild(b);
container.appendChild(f)
}
function insertCopyButton(container, code) {
var b = document.createElement('button')
var ba = document.createElement('span')
b.innerHTML = ''
b.className = 'copy-button tooltip'
ba.className = 'tooltiptext'
ba.innerText = 'Copy'
b.appendChild(ba)
code = code
b.onclick = function() {
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.innerHTML = code;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
container.appendChild(b)
}
function escapeSpecialChars(s) {
return s.replace(/[\\]/g, '\\\\')
.replace(/[\"]/g, '\\\"')
.replace(/[\/]/g, '\\/')
.replace(/[\b]/g, '\\b')
.replace(/[\f]/g, '\\f')
.replace(/[\n]/g, '\\n')
.replace(/[\r]/g, '\\r')
.replace(/[\t]/g, '\\t');
};
async function run_{{ id }}(){
var error = false;
var el_code = document.getElementById('{{ id }}_code')
// replace and
el_code.innerHTML = el_code.innerHTML
.replace(new RegExp('<pipe>', 'g'), '{{pipe}}')
.replace('<token>', '{{jwt_read}}')
.replace('<import_token>', '{{jwt_import}}')
.replace('<column>', '{{column}}')
// Caption text div
var caption = el_code.parentElement.getElementsByTagName('div')[0].getElementsByClassName('caption-text')[0]
var headerlink = el_code.parentElement.getElementsByTagName('div')[0].getElementsByClassName('headerlink')[0]
var captionDiv = document.createElement('div')
el_code.parentElement.getElementsByTagName('div')[0].classList.add('flex-between-center')
el_code.parentElement.getElementsByTagName('div')[0].appendChild(captionDiv)
captionDiv.appendChild(caption)
captionDiv.appendChild(headerlink)
// Add actions wrapper div
var codeActionsDiv = document.createElement('div')
codeActionsDiv.className = 'code-actions'
var parentElement = el_code.parentElement.getElementsByTagName('div')[0]
parentElement.appendChild(codeActionsDiv)
insertCopyButton(codeActionsDiv, {% raw js_json_escaped %})
}
run_{{ id }}();