Packages

kino

0.16.0
0.19.0 0.18.0 0.17.0 0.16.1 0.16.0 0.15.3 0.15.2 0.15.1 0.15.0 0.14.2 0.14.1 0.14.0 0.13.2 0.13.1 0.13.0 0.12.3 0.12.2 0.12.1 0.12.0 0.11.3 0.11.2 0.11.1 0.11.0 0.10.0 0.9.4 0.9.3 0.9.2 0.9.1 0.9.0 0.8.1 0.8.0 0.7.0 0.6.2 0.6.1 0.6.0 retired 0.5.2 0.5.1 0.5.0 0.4.1 0.4.0 0.3.1 0.3.0 0.2.3 0.2.2 0.2.1 0.2.0 0.1.3 0.1.2 0.1.1 0.1.0

Interactive widgets for Livebook

HexDocs

Current section

Files

Jump to
Readme
50 Versions
4 Dependencies
Dependants
Files
Activity
kino lib assets html main.js
Raw

lib/assets/html/main.js 

export function init(ctx, html) {

  setInnerHTML(ctx.root, html);

}



function setInnerHTML(element, html) {

  // By default setting inner HTML doesn't execute scripts, as

  // noted in [1], however we can work around this by explicitly

  // building the script element.

  //

  // [1]: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations



  element.innerHTML = html;



  Array.from(element.querySelectorAll("script")).reduce((promise, scriptEl) => {

    return promise.then(() => {

      const safeScriptEl = document.createElement("script");



      // If a script is external, we wait for it to load before

      // continuing to insert subsequent scripts.

      const promise = scriptEl.hasAttribute("src")

        ? new Promise((resolve, reject) => {

            safeScriptEl.addEventListener("load", (event) => resolve(), {

              once: true,

            });

          })

        : Promise.resolve();



      Array.from(scriptEl.attributes).forEach((attr) => {

        safeScriptEl.setAttribute(attr.name, attr.value);

      });



      const scriptText = document.createTextNode(scriptEl.innerHTML);

      safeScriptEl.appendChild(scriptText);



      scriptEl.parentNode.replaceChild(safeScriptEl, scriptEl);



      return promise;

    });

  }, Promise.resolve());

}