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 }}();