three.js/manual/examples/resources/editor.js

(function() {  // eslint-disable-line strict
'use strict';  // eslint-disable-line strict

/* global monaco, require, lessonEditorSettings */

const {
  fixSourceLinks,
  fixJSForCodeSite,
  extraHTMLParsing,
  runOnResize,
  lessonSettings,
} = lessonEditorSettings;

const lessonHelperScriptRE = /<script src="[^"]+lessons-helper\.js"><\/script>/;
const webglDebugHelperScriptRE = /<script src="[^"]+webgl-debug-helper\.js"><\/script>/;

function getQuery(s) {
  s = s === undefined ? window.location.search : s;
  if (s[0] === '?' ) {
    s = s.substring(1);
  }
  const query = {};
  s.split('&').forEach(function(pair) {
      const parts = pair.split('=').map(decodeURIComponent);
      query[parts[0]] = parts[1];
  });
  return query;
}

function getSearch(url) {
  // yea I know this is not perfect but whatever
  const s = url.indexOf('?');
  return s < 0 ? {} : getQuery(url.substring(s));
}

function getFQUrl(path, baseUrl) {
  const url = new URL(path, baseUrl || window.location.href);
  return url.href;
}

async function getHTML(url) {
  const req = await fetch(url);
  return await req.text();
}

function getPrefix(url) {
  const u = new URL(url, window.location.href);
  const prefix = u.origin + dirname(u.pathname);
  return prefix;
}

function fixCSSLinks(url, source) {
  const cssUrlRE1 = /(url\(')(.*?)('\))/g;
  const cssUrlRE2 = /(url\()(.*?)(\))/g;
  const prefix = getPrefix(url);

  function addPrefix(url) {
    return url.indexOf('://') < 0 && !url.startsWith('data:') ? `${prefix}/${url}` : url;
  }
  function makeFQ(match, prefix, url, suffix) {
    return `${prefix}${addPrefix(url)}${suffix}`;
  }

  source = source.replace(cssUrlRE1, makeFQ);
  source = source.replace(cssUrlRE2, makeFQ);
  return source;
}

/**
 * @typedef {Object} Globals
 * @property {SourceInfo} rootScriptInfo
 * @property {Object<string, SourceInfo} scriptInfos
 */

/** @type {Globals} */
const g = {
  html: '',
};

/**
 * This is what's in the sources array
 * @typedef {Object} SourceInfo
 * @property {string} source The source text (html, css, js)
 * @property {string} name The filename or "main page"
 * @property {ScriptInfo} scriptInfo The associated ScriptInfo
 * @property {string} fqURL ??
 * @property {Editor} editor in instance of Monaco editor
 *
 */

/**
 * @typedef {Object} EditorInfo
 * @property {HTMLElement} div The div holding the monaco editor
 * @property {Editor} editor an instance of a monaco editor
 */

/**
 * What's under each language
 * @typedef {Object} HTMLPart
 * @property {string} language Name of language
 * @property {SourceInfo} sources array of SourceInfos. Usually 1 for HTML, 1 for CSS, N for JS
 * @property {HTMLElement} pane the pane for these editors
 * @property {HTMLElement} code the div holding the files
 * @property {HTMLElement} files the div holding the divs holding the monaco editors
 * @property {HTMLElement} button the element to click to show this pane
 * @property {EditorInfo} editors
 */

/** @type {Object<string, HTMLPart>} */
const htmlParts = {
  js: {
    language: 'javascript',
    sources: [],
  },
  css: {
    language: 'css',
    sources: [],
  },
  html: {
    language: 'html',
    sources: [],
  },
};

function getRootPrefix(url) {
  const u = new URL(url, window.location.href);
  return u.origin;
}

function removeDotDotSlash(href) {
  // assumes a well formed URL. In other words: 'https://..//foo.html" is a bad URL and this code would fail.
  const url = new URL(href, window.location.href);
  const parts = url.pathname.split('/');
  for (;;) {
    const dotDotNdx = parts.indexOf('..');
    if (dotDotNdx < 0) {
      break;
    }
    parts.splice(dotDotNdx - 1, 2);
  }
  url.pathname = parts.join('/');
  return url.toString();
}

function forEachHTMLPart(fn) {
  Object.keys(htmlParts).forEach(function(name, ndx) {
    const info = htmlParts[name];
    fn(info, ndx, name);
  });
}

function getHTMLPart(re, obj, tag) {
  let part = '';
  obj.html = obj.html.replace(re, function(p0, p1) {
    part = p1;
    return tag;
  });
  return part.replace(/\s*/, '');
}

// doesn't handle multi-line comments or comments with { or } in them
function formatCSS(css) {
  let indent = '';
  return css.split('\n').map((line) => {
    let currIndent = indent;
    if (line.includes('{')) {
      indent = indent + '  ';
    } else if (line.includes('}')) {
      indent = indent.substring(0, indent.length - 2);
      currIndent = indent;
    }
    return `${currIndent}${line.trim()}`;
  }).join('\n');
}

async function getScript(url, scriptInfos) {
  // check it's an example script, not some other lib
  if (!scriptInfos[url].source) {
    const source = await getHTML(url);
    const fixedSource = fixSourceLinks(url, source);
    const {text} = await getWorkerScripts(fixedSource, url, scriptInfos);
    scriptInfos[url].source = text;
  }
}

/**
 * @typedef {Object} ScriptInfo
 * @property {string} fqURL The original fully qualified URL
 * @property {ScriptInfo[]} deps Array of other ScriptInfos this is script dependant on
 * @property {boolean} isWorker True if this script came from `new Worker('someurl')` vs `import` or `importScripts`
 * @property {string} blobUrl The blobUrl for this script if one has been made
 * @property {number} blobGenerationId Used to not visit things twice while recursing.
 * @property {string} source The source as extracted. Updated from editor by getSourcesFromEditor
 * @property {string} munged The source after urls have been replaced with blob urls etc... (the text send to new Blob)
 */

async function getWorkerScripts(text, baseUrl, scriptInfos = {}) {
  const parentScriptInfo = scriptInfos[baseUrl];
  const workerRE = /(new\s+Worker\s*\(\s*)('|")(.*?)('|")/g;
  const importScriptsRE = /(importScripts\s*\(\s*)('|")(.*?)('|")/g;
  const importRE = /(import.*?)(?!'three')('|")(.*?)('|")/g;

  const newScripts = [];
  const slashRE = /\/manual\/examples\/[^/]+$/;

  function replaceWithUUID(match, prefix, quote, url) {
    const fqURL = getFQUrl(url, baseUrl);
    if (!slashRE.test(fqURL)) {
      return match.toString();
    }

    if (!scriptInfos[url]) {
      scriptInfos[fqURL] = {
        fqURL,
        deps: [],
        isWorker: prefix.indexOf('Worker') >= 0,
      };
      newScripts.push(fqURL);
    }
    parentScriptInfo.deps.push(scriptInfos[fqURL]);

    return `${prefix}${quote}${fqURL}${quote}`;
  }
  function replaceWithUUIDModule(match, prefix, quote, url) {
    // modules are either relative, fully qualified, or a module name
    // Skip it if it's a module name
    return (url.startsWith('.') || url.includes('://'))
        ? replaceWithUUID(match, prefix, quote, url)
        : match.toString();
  }

  text = text.replace(workerRE, replaceWithUUID);
  text = text.replace(importScriptsRE, replaceWithUUID);
  text = text.replace(importRE, replaceWithUUIDModule);

  await Promise.all(newScripts.map((url) => {
    return getScript(url, scriptInfos);
  }));

  return {text, scriptInfos};
}

// hack: scriptInfo is undefined for html and css
// should try to include html and css in scriptInfos
function addSource(type, name, source, scriptInfo) {
  htmlParts[type].sources.push({source, name, scriptInfo});
}

function safeStr(s) {
  return s === undefined ? '' : s;
}

async function parseHTML(url, html) {
  html = fixSourceLinks(url, html);

  html = html.replace(/<div class="description">[^]*?<\/div>/, '');

  const styleRE = /<style>([^]*?)<\/style>/i;
  const titleRE = /<title>([^]*?)<\/title>/i;
  const bodyRE = /<body>([^]*?)<\/body>/i;
  const inlineScriptRE = /<script>([^]*?)<\/script>/i;
  const inlineModuleScriptRE = /<script type="module">([^]*?)<\/script>/i;
  const externalScriptRE = /(<!--(?:(?!-->)[\s\S])*?-->\n){0,1}<script\s+([^>]*?)(type="module"\s+)?src\s*=\s*"(.*?)"(.*?)>\s*<\/script>/ig;
  const dataScriptRE = /(<!--(?:(?!-->)[\s\S])*?-->\n){0,1}<script([^>]*?type="(?!module).*?".*?)>([^]*?)<\/script>/ig;
  const cssLinkRE = /<link ([^>]+?)>/g;
  const isCSSLinkRE = /type="text\/css"|rel="stylesheet"/;
  const hrefRE = /href="([^"]+)"/;

  const obj = { html: html };
  addSource('css', 'css', formatCSS(fixCSSLinks(url, getHTMLPart(styleRE, obj, '<style>\n${css}</style>'))));
  addSource('html', 'html', getHTMLPart(bodyRE, obj, '<body>${html}</body>'));
  const rootScript = getHTMLPart(inlineScriptRE, obj, '<script>${js}</script>') ||
                     getHTMLPart(inlineModuleScriptRE, obj, '<script type="module">${js}</script>');
  html = obj.html;

  const fqURL = getFQUrl(url);
  /** @type Object<string, SourceInfo> */
  const scriptInfos = {};
  g.rootScriptInfo = {
    fqURL,
    deps: [],
    source: rootScript,
  };
  scriptInfos[fqURL] = g.rootScriptInfo;

  const {text} = await getWorkerScripts(rootScript, fqURL, scriptInfos);
  g.rootScriptInfo.source = text;
  g.scriptInfos = scriptInfos;
  for (const [fqURL, scriptInfo] of Object.entries(scriptInfos)) {
    addSource('js', basename(fqURL), scriptInfo.source, scriptInfo);
  }

  const tm = titleRE.exec(html);
  if (tm) {
    g.title = tm[1];
  }

  const kScript = 'script';
  const scripts = [];
  html = html.replace(externalScriptRE, function(p0, p1, p2, type, p3, p4) {
    p1 = p1 || '';
    scripts.push(`${p1}<${kScript} ${p2}${safeStr(type)}src="${p3}"${p4}></${kScript}>`);
    return '';
  });

  const prefix = getPrefix(url);
  const rootPrefix = getRootPrefix(url);

  function addCorrectPrefix(href) {
    return (href.startsWith('/'))
       ? `${rootPrefix}${href}`
       : removeDotDotSlash((`${prefix}/${href}`).replace(/\/.\//g, '/'));
  }

  function addPrefix(url) {
    return url.indexOf('://') < 0 && !url.startsWith('data:') && url[0] !== '?'
        ? removeDotDotSlash(addCorrectPrefix(url))
        : url;
  }

  const importMapRE = /type\s*=["']importmap["']/;
  const dataScripts = [];
  html = html.replace(dataScriptRE, function(p0, blockComments, scriptTagAttrs, content) {
    blockComments = blockComments || '';
    if (importMapRE.test(scriptTagAttrs)) {
      const imap = JSON.parse(content);
      const imports = imap.imports;
      if (imports) {
        for (let [k, url] of Object.entries(imports)) {
          if (url.indexOf('://') < 0 && !url.startsWith('data:')) {
            imports[k] = addPrefix(url);
          }
        }
      }
      content = JSON.stringify(imap, null, '\t');
    }
    dataScripts.push(`${blockComments}<${kScript} ${scriptTagAttrs}>${content}</${kScript}>`);
    return '';
  });


  htmlParts.html.sources[0].source += dataScripts.join('\n');
  htmlParts.html.sources[0].source += scripts.join('\n');

  // add style section if there is non
  if (html.indexOf('${css}') < 0) {
    html = html.replace('</head>', '<style>\n${css}</style>\n</head>');
  }

  // add hackedparams section.
  // We need a way to pass parameters to a blob. Normally they'd be passed as
  // query params but that only works in Firefox >:(
  html = html.replace('</head>', '<script id="hackedparams">window.hackedParams = ${hackedParams}\n</script>\n</head>');

  html = extraHTMLParsing(html, htmlParts);

  let links = '';
  html = html.replace(cssLinkRE, function(p0, p1) {
    if (isCSSLinkRE.test(p1)) {
      const m = hrefRE.exec(p1);
      if (m) {
        links += `@import url("${m[1]}");\n`;
      }
      return '';
    } else {
      return p0;
    }
  });

  htmlParts.css.sources[0].source = links + htmlParts.css.sources[0].source;

  g.html = html;
}

async function main() {
  const query = getQuery();
  g.url = getFQUrl(query.url);
  g.query = getSearch(g.url);
  let html;
  try {
    html = await getHTML(query.url);
  } catch (err) {
    console.log(err);  // eslint-disable-line
    return;
  }
  await parseHTML(query.url, html);
  setupEditor();
  if (query.startPane) {
    const button = document.querySelector('.button-' + query.startPane);
    toggleSourcePane(button);
  }
}

function getJavaScriptBlob(source) {
  const blob = new Blob([source], {type: 'application/javascript'});
  return URL.createObjectURL(blob);
}

let blobGeneration = 0;
function makeBlobURLsForSources(scriptInfo) {
  ++blobGeneration;

  function makeBlobURLForSourcesImpl(scriptInfo) {
    if (scriptInfo.blobGenerationId !== blobGeneration) {
      scriptInfo.blobGenerationId = blobGeneration;
      if (scriptInfo.blobUrl) {
        URL.revokeObjectURL(scriptInfo.blobUrl);
      }
      scriptInfo.deps.forEach(makeBlobURLForSourcesImpl);
      let text = scriptInfo.source;
      scriptInfo.deps.forEach((depScriptInfo) => {
        text = text.split(depScriptInfo.fqURL).join(depScriptInfo.blobUrl);
      });
      scriptInfo.numLinesBeforeScript = 0;
      if (scriptInfo.isWorker) {
        const extra = `self.lessonSettings = ${JSON.stringify(lessonSettings)};
import '${dirname(scriptInfo.fqURL)}/resources/webgl-debug-helper.js';
import '${dirname(scriptInfo.fqURL)}/resources/lessons-worker-helper.js';`;
        scriptInfo.numLinesBeforeScript = extra.split('\n').length;
        text = `${extra}\n${text}`;
      }
      scriptInfo.blobUrl = getJavaScriptBlob(text);
      scriptInfo.munged = text;
    }
  }
  makeBlobURLForSourcesImpl(scriptInfo);
}

function getSourceBlob(htmlParts) {
  g.rootScriptInfo.source = htmlParts.js;
  makeBlobURLsForSources(g.rootScriptInfo);

  const dname = dirname(g.url);
  // HACK! for webgl-2d-vs... those examples are not in /webgl they're in /webgl/resources
  // We basically assume url is https://foo/base/example.html so there will be 4 slashes
  // If the path is longer than then we need '../' to back up so prefix works below
  const prefix = dname; //`${dname}${dname.split('/').slice(4).map(() => '/..').join('')}`;
  let source = g.html;
  source = source.replace('${hackedParams}', JSON.stringify(g.query));
  source = source.replace('${html}', htmlParts.html);
  source = source.replace('${css}', htmlParts.css);
  source = source.replace('${js}', g.rootScriptInfo.munged); //htmlParts.js);
  source = source.replace('<head>', `<head>
  <link rel="stylesheet" href="${prefix}/resources/lesson-helper.css" type="text/css">
  <script match="false">self.lessonSettings = ${JSON.stringify(lessonSettings)}</script>`);

  source = source.replace('</head>', `<script src="${prefix}/resources/webgl-debug-helper.js"></script>
<script src="${prefix}/resources/lessons-helper.js"></script>
  </head>`);
  const scriptNdx = source.search(/<script(\s+type="module"\s*)?>/);
  g.rootScriptInfo.numLinesBeforeScript = (source.substring(0, scriptNdx).match(/\n/g) || []).length;

  const blob = new Blob([source], {type: 'text/html'});
  // This seems hacky. We are combining html/css/js into one html blob but we already made
  // a blob for the JS so let's replace that blob. That means it will get auto-released when script blobs
  // are regenerated. It also means error reporting will work
  const blobUrl = URL.createObjectURL(blob);
  URL.revokeObjectURL(g.rootScriptInfo.blobUrl);
  g.rootScriptInfo.blobUrl = blobUrl;
  return blobUrl;
}

function getSourcesFromEditor() {
  for (const partTypeInfo of Object.values(htmlParts)) {
    for (const source of partTypeInfo.sources) {
      source.source = source.editor.getValue();
      // hack: shouldn't store this twice. Also see other comment,
      // should consolidate so scriptInfo is used for css and html
      if (source.scriptInfo) {
        source.scriptInfo.source = source.source;
      }
    }
  }
}
function getSourceBlobFromEditor() {
  getSourcesFromEditor();

  return getSourceBlob({
    html: htmlParts.html.sources[0].source,
    css: htmlParts.css.sources[0].source,
    js: htmlParts.js.sources[0].source,
  });
}

function getSourceBlobFromOrig() {
  return getSourceBlob({
    html: htmlParts.html.sources[0].source,
    css: htmlParts.css.sources[0].source,
    js: htmlParts.js.sources[0].source,
  });
}

function dirname(path) {
  const ndx = path.lastIndexOf('/');
  return path.substring(0, ndx);
}

function basename(path) {
  const ndx = path.lastIndexOf('/');
  return path.substring(ndx + 1);
}

function resize() {
  forEachHTMLPart(function(info) {
    info.editors.forEach((editorInfo) => {
      editorInfo.editor.layout();
    });
  });
}

function getScripts(scriptInfo) {
  ++blobGeneration;

  function getScriptsImpl(scriptInfo) {
    const scripts = [];
    if (scriptInfo.blobGenerationId !== blobGeneration) {
      scriptInfo.blobGenerationId = blobGeneration;
      scripts.push(...scriptInfo.deps.map(getScriptsImpl).flat());
      let text = scriptInfo.source;
      scriptInfo.deps.forEach((depScriptInfo) => {
        text = text.split(depScriptInfo.fqURL).join(`worker-${basename(depScriptInfo.fqURL)}`);
      });

      scripts.push({
        name: `worker-${basename(scriptInfo.fqURL)}`,
        text,
      });
    }
    return scripts;
  }
  return getScriptsImpl(scriptInfo);
}

function makeScriptsForWorkers(scriptInfo) {
  const scripts = getScripts(scriptInfo);
  if (scripts.length === 1) {
    return {
      js: scripts[0].text,
      html: '',
    };
  }

  // scripts[last]      = main script
  // scripts[last - 1]  = worker
  const mainScriptInfo = scripts[scripts.length - 1];
  const workerScriptInfo = scripts[scripts.length - 2];
  const workerName = workerScriptInfo.name;
  mainScriptInfo.text = mainScriptInfo.text.split(`'${workerName}'`).join('getWorkerBlob()');
  const html = scripts.map((nameText) => {
    const {name, text} = nameText;
    return `<script id="${name}" type="x-worker">\n${text}\n</script>\n`;
  }).join('\n');
  const init = `



// ------
// Creates Blobs for the Scripts so things can be self contained for snippets/JSFiddle/Codepen
// even though they are using workers
//
(function() {
  const idsToUrls = [];
  const scriptElements = [...document.querySelectorAll('script[type=x-worker]')];
  for (const scriptElement of scriptElements) {
    let text = scriptElement.text;
    for (const {id, url} of idsToUrls) {
      text = text.split(id).join(url);
    }
    const blob = new Blob([text], {type: 'application/javascript'});
    const url = URL.createObjectURL(blob);
    const id = scriptElement.id;
    idsToUrls.push({id, url});
  }
  window.getWorkerBlob = function() {
    return idsToUrls.pop().url;
  };
  import(window.getWorkerBlob());
}());
`;
  return {
    js: init,
    html,
  };
}

async function fixHTMLForCodeSite(html) {
  html = html.replace(lessonHelperScriptRE, '');
  html = html.replace(webglDebugHelperScriptRE, '');
  return html;
}

async function openInCodepen() {
  const comment = `// ${g.title}
// from ${g.url}


`;
  getSourcesFromEditor();
  const scripts = makeScriptsForWorkers(g.rootScriptInfo);
  const code = await fixJSForCodeSite(scripts.js);
  const html = await fixHTMLForCodeSite(htmlParts.html.sources[0].source);

  const pen = {
    title                 : g.title,
    description           : 'from: ' + g.url,
    tags                  : lessonEditorSettings.tags,
    editors               : '101',
    html                  : scripts.html + html,
    css                   : htmlParts.css.sources[0].source,
    js                    : comment + code,
  };

  const elem = document.createElement('div');
  elem.innerHTML = `
    <form method="POST" target="_blank" action="https://codepen.io/pen/define" class="hidden">'
      <input type="hidden" name="data">
      <input type="submit" />
    "</form>"
  `;
  elem.querySelector('input[name=data]').value = JSON.stringify(pen);
  window.frameElement.ownerDocument.body.appendChild(elem);
  elem.querySelector('form').submit();
  window.frameElement.ownerDocument.body.removeChild(elem);
}

async function openInJSFiddle() {
  const comment = `// ${g.title}
// from ${g.url}

`;

  getSourcesFromEditor();
  const scripts = makeScriptsForWorkers(g.rootScriptInfo);
  const code = await fixJSForCodeSite(scripts.js);
  const html = await fixHTMLForCodeSite(htmlParts.html.sources[0].source);

  const elem = document.createElement('div');
  elem.innerHTML = `
    <form method="POST" target="_black" action="https://jsfiddle.net/api/mdn/" class="hidden">
      <input type="hidden" name="html" />
      <input type="hidden" name="css" />
      <input type="hidden" name="js" />
      <input type="hidden" name="title" />
      <input type="hidden" name="wrap" value="b" />
      <input type="submit" />
    </form>
  `;
  elem.querySelector('input[name=html]').value = scripts.html + html;
  elem.querySelector('input[name=css]').value = htmlParts.css.sources[0].source;
  elem.querySelector('input[name=js]').value = comment + code;
  elem.querySelector('input[name=title]').value = g.title;
  window.frameElement.ownerDocument.body.appendChild(elem);
  elem.querySelector('form').submit();
  window.frameElement.ownerDocument.body.removeChild(elem);
}

async function openInJSGist() {
  const comment = `// ${g.title}
// from ${g.url}


`;
  getSourcesFromEditor();
  const scripts = makeScriptsForWorkers(g.rootScriptInfo);
  const code = await fixJSForCodeSite(scripts.js);
  const html = await fixHTMLForCodeSite(htmlParts.html.sources[0].source);
  const gist = {
    name: g.title,
    settings: {},
    files: [
      { name: 'index.html', content: scripts.html + html, },
      { name: 'index.css', content: htmlParts.css.sources[0].source, },
      { name: 'index.js', content: comment + code, },
    ],
  };

  window.open('https://jsgist.org/?newGist=true', '_blank');
  const send = (e) => {
    e.source.postMessage({type: 'newGist', data: gist}, '*');
  };
  window.addEventListener('message', send, {once: true});
}

/*

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    console.log();

<!-- language: lang-css -->

    h1 { color: red; }

<!-- language: lang-html -->

    <h1>foo</h1>

<!-- end snippet -->

*/

function indent4(s) {
  return s.split('\n').map(s => `    ${s}`).join('\n');
}

async function openInStackOverflow() {
  const comment = `// ${g.title}
// from ${g.url}


`;
  getSourcesFromEditor();
  const scripts = makeScriptsForWorkers(g.rootScriptInfo);
  const code = await fixJSForCodeSite(scripts.js);
  const html = await fixHTMLForCodeSite(htmlParts.html.sources[0].source);
  const mainHTML = scripts.html + html;
  const mainJS = comment + code;
  const mainCSS = htmlParts.css.sources[0].source;
  const asModule = /\bimport\b/.test(mainJS);
  // Three.js wants us to use modules but Stack Overflow doesn't support them
  const text = asModule
    ? `
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

<!-- language: lang-css -->

${indent4(mainCSS)}

<!-- language: lang-html -->

${indent4(mainHTML)}
    <script type="module">
${indent4(mainJS)}
    </script>

<!-- end snippet -->
`
    : `
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

${indent4(mainJS)}

<!-- language: lang-css -->

${indent4(mainCSS)}

<!-- language: lang-html -->

${indent4(mainHTML)}

<!-- end snippet -->
`;
  const dialogElem = document.querySelector('.copy-dialog');
  dialogElem.style.display = '';
  const copyAreaElem = dialogElem.querySelector('.copy-area');
  copyAreaElem.textContent = text;
  const linkElem = dialogElem.querySelector('a');
  const tags = lessonEditorSettings.tags.filter(f => !f.endsWith('.org')).join(' ');
  linkElem.href = `https://stackoverflow.com/questions/ask?&tags=javascript ${tags}`;
}

function htmlTemplate(s) {
  return `<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>${s.title}</title>
    <style>
${s.css}
    </style>
  </head>
  <body>
${s.body}
  </body>
${s.script.startsWith('<')
    ? s.script
    : `
  <script type="module">
${s.script}
  </script>
`}
</html>`;
}

// ---vvv---

// Copyright (c) 2013 Pieroxy <[email protected]>
// This work is free. You can redistribute it and/or modify it
// under the terms of the WTFPL, Version 2
// For more information see LICENSE.txt or http://www.wtfpl.net/
//
// For more information, the home page:
// http://pieroxy.net/blog/pages/lz-string/testing.html
//
// LZ-based compression algorithm, version 1.4.4
//
// Modified:

// private property
const keyStrBase64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';

function compressToBase64(input) {
  if (input === null) {
    return '';
  }
  const res = _compress(input, 6, function(a) {
    return keyStrBase64.charAt(a);
  });
  switch (res.length % 4) { // To produce valid Base64
  default: // When could this happen ?
  case 0 : return res;
  case 1 : return res + '===';
  case 2 : return res + '==';
  case 3 : return res + '=';
  }
}

function _compress(uncompressed, bitsPerChar, getCharFromInt) {
  let i;
  let value;
  const context_dictionary = {};
  const context_dictionaryToCreate = {};
  let context_c = '';
  let context_wc = '';
  let context_w = '';
  let context_enlargeIn = 2; // Compensate for the first entry which should not count
  let context_dictSize = 3;
  let context_numBits = 2;
  const context_data = [];
  let context_data_val = 0;
  let context_data_position = 0;
  let ii;

  for (ii = 0; ii < uncompressed.length; ii += 1) {
    context_c = uncompressed.charAt(ii);
    if (!Object.prototype.hasOwnProperty.call(context_dictionary, context_c)) {
      context_dictionary[context_c] = context_dictSize++;
      context_dictionaryToCreate[context_c] = true;
    }

    context_wc = context_w + context_c;
    if (Object.prototype.hasOwnProperty.call(context_dictionary, context_wc)) {
      context_w = context_wc;
    } else {
      if (Object.prototype.hasOwnProperty.call(context_dictionaryToCreate, context_w)) {
        if (context_w.charCodeAt(0) < 256) {
          for (i = 0; i < context_numBits; i++) {
            context_data_val = (context_data_val << 1);
            if (context_data_position === bitsPerChar - 1) {
              context_data_position = 0;
              context_data.push(getCharFromInt(context_data_val));
              context_data_val = 0;
            } else {
              context_data_position++;
            }
          }
          value = context_w.charCodeAt(0);
          for (i = 0; i < 8; i++) {
            context_data_val = (context_data_val << 1) | (value & 1);
            if (context_data_position === bitsPerChar - 1) {
              context_data_position = 0;
              context_data.push(getCharFromInt(context_data_val));
              context_data_val = 0;
            } else {
              context_data_position++;
            }
            value = value >> 1;
          }
        } else {
          value = 1;
          for (i = 0; i < context_numBits; i++) {
            context_data_val = (context_data_val << 1) | value;
            if (context_data_position === bitsPerChar - 1) {
              context_data_position = 0;
              context_data.push(getCharFromInt(context_data_val));
              context_data_val = 0;
            } else {
              context_data_position++;
            }
            value = 0;
          }
          value = context_w.charCodeAt(0);
          for (i = 0; i < 16; i++) {
            context_data_val = (context_data_val << 1) | (value & 1);
            if (context_data_position === bitsPerChar - 1) {
              context_data_position = 0;
              context_data.push(getCharFromInt(context_data_val));
              context_data_val = 0;
            } else {
              context_data_position++;
            }
            value = value >> 1;
          }
        }
        context_enlargeIn--;
        if (context_enlargeIn === 0) {
          context_enlargeIn = Math.pow(2, context_numBits);
          context_numBits++;
        }
        delete context_dictionaryToCreate[context_w];
      } else {
        value = context_dictionary[context_w];
        for (i = 0; i < context_numBits; i++) {
          context_data_val = (context_data_val << 1) | (value & 1);
          if (context_data_position === bitsPerChar - 1) {
            context_data_position = 0;
            context_data.push(getCharFromInt(context_data_val));
            context_data_val = 0;
          } else {
            context_data_position++;
          }
          value = value >> 1;
        }


      }
      context_enlargeIn--;
      if (context_enlargeIn === 0) {
        context_enlargeIn = Math.pow(2, context_numBits);
        context_numBits++;
      }
      // Add wc to the dictionary.
      context_dictionary[context_wc] = context_dictSize++;
      context_w = String(context_c);
    }
  }

  // Output the code for w.
  if (context_w !== '') {
    if (Object.prototype.hasOwnProperty.call(context_dictionaryToCreate, context_w)) {
      if (context_w.charCodeAt(0) < 256) {
        for (i = 0; i < context_numBits; i++) {
          context_data_val = (context_data_val << 1);
          if (context_data_position === bitsPerChar - 1) {
            context_data_position = 0;
            context_data.push(getCharFromInt(context_data_val));
            context_data_val = 0;
          } else {
            context_data_position++;
          }
        }
        value = context_w.charCodeAt(0);
        for (i = 0; i < 8; i++) {
          context_data_val = (context_data_val << 1) | (value & 1);
          if (context_data_position === bitsPerChar - 1) {
            context_data_position = 0;
            context_data.push(getCharFromInt(context_data_val));
            context_data_val = 0;
          } else {
            context_data_position++;
          }
          value = value >> 1;
        }
      } else {
        value = 1;
        for (i = 0; i < context_numBits; i++) {
          context_data_val = (context_data_val << 1) | value;
          if (context_data_position === bitsPerChar - 1) {
            context_data_position = 0;
            context_data.push(getCharFromInt(context_data_val));
            context_data_val = 0;
          } else {
            context_data_position++;
          }
          value = 0;
        }
        value = context_w.charCodeAt(0);
        for (i = 0; i < 16; i++) {
          context_data_val = (context_data_val << 1) | (value & 1);
          if (context_data_position === bitsPerChar - 1) {
            context_data_position = 0;
            context_data.push(getCharFromInt(context_data_val));
            context_data_val = 0;
          } else {
            context_data_position++;
          }
          value = value >> 1;
        }
      }
      context_enlargeIn--;
      if (context_enlargeIn === 0) {
        context_enlargeIn = Math.pow(2, context_numBits);
        context_numBits++;
      }
      delete context_dictionaryToCreate[context_w];
    } else {
      value = context_dictionary[context_w];
      for (i = 0; i < context_numBits; i++) {
        context_data_val = (context_data_val << 1) | (value & 1);
        if (context_data_position === bitsPerChar - 1) {
          context_data_position = 0;
          context_data.push(getCharFromInt(context_data_val));
          context_data_val = 0;
        } else {
          context_data_position++;
        }
        value = value >> 1;
      }


    }
    context_enlargeIn--;
    if (context_enlargeIn === 0) {
      context_numBits++;
    }
  }

  // Mark the end of the stream
  value = 2;
  for (i = 0; i < context_numBits; i++) {
    context_data_val = (context_data_val << 1) | (value & 1);
    if (context_data_position === bitsPerChar - 1) {
      context_data_position = 0;
      context_data.push(getCharFromInt(context_data_val));
      context_data_val = 0;
    } else {
      context_data_position++;
    }
    value = value >> 1;
  }

  // Flush the last char
  for (;;) {
    context_data_val = (context_data_val << 1);
    if (context_data_position === bitsPerChar - 1) {
      context_data.push(getCharFromInt(context_data_val));
      break;
    } else {
      context_data_position++;
    }
  }
  return context_data.join('');
}

function compress(input) {
    return compressToBase64(input)
        .replace(/\+/g, '-') // Convert '+' to '-'
        .replace(/\//g, '_') // Convert '/' to '_'
        .replace(/=+$/, ''); // Remove ending '='
}

function getParameters(parameters) {
    return compress(JSON.stringify(parameters));
}

// -- ^^^ ---

async function openInCodeSandbox() {
  const comment = `// ${g.title}
// from ${g.url}

`;
  getSourcesFromEditor();
  const scripts = getScripts(g.rootScriptInfo);
  const mainScript = scripts.pop();
  const code = await fixJSForCodeSite(mainScript.text);
  const html = await fixHTMLForCodeSite(htmlParts.html.sources[0].source);
  const names = scripts.map(s => s.name);
  const files = scripts.reduce((files, {name, text: content}) => {
    files[name] = {content};
    return files;
  }, {
    'index.html': {
      content: htmlTemplate({
        body: html,
        css: htmlParts.css.sources[0].source,
        title: g.title,
        script: comment + code,
      }),
    },
    'sandbox.config.json': {
      content: '{\n  "template": "static"\n}\n',
    },
    'package.json': {
      content: JSON.stringify({
        'name': 'static',
        'version': '1.0.0',
        'description': 'This is a static template with no bundling',
        'main': 'index.html',
        'scripts': {
          'start': 'serve',
          'build': 'echo This is a static template, there is no bundler or bundling involved!',
        },
        'license': 'MIT',
        'devDependencies': {
          'serve': '^11.2.0',
        },
      }, null, 2),
    },
  });
  for (const file of Object.values(files)) {
    for (const name of names) {
      file.content = file.content.split(name).join(`./${name}`);
    }
  }

  const parameters = getParameters({files});
  const elem = document.createElement('div');
  elem.innerHTML = `
    <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank" class="hidden">
      <input type="hidden" name="parameters" />
      <input type="submit" />
    </form>
  `;
  elem.querySelector('input[name=parameters]').value = parameters;
  window.frameElement.ownerDocument.body.appendChild(elem);
  elem.querySelector('form').submit();
  window.frameElement.ownerDocument.body.removeChild(elem);
}

/*
async function openInStackBlitz() {
  const comment = `// ${g.title}
// from ${g.url}

`;
  getSourcesFromEditor();
  const scripts = getScripts(g.rootScriptInfo);
  const code = await fixJSForCodeSite(scripts.js);
  const html = await fixHTMLForCodeSite(htmlParts.html.sources[0].source);
  const mainScript = scripts.pop();
  const names = scripts.map(s => s.name);
  const files = scripts.reduce((files, {name, text: content}) => {
    files[name] = {content};
    return files;
  }, {
    'index.html': {
      content: htmlTemplate({
        body: html,
        css: htmlParts.css.sources[0].source,
        title: g.title,
        script: '<script src="index.js" type="module"></script>',
      }),
    },
    'index.js': {
      content: comment + code,
    },
    // "tsconfig.json": {
    //   content: JSON.stringify({
    //     "compilerOptions": {
    //       "target": "esnext"
    //     }
    //   }, null, 2),
    // },
    'package.json': {
      content: JSON.stringify({
        'name': 'js',
        'version': '0.0.0',
        'private': true,
        'dependencies': {}
      }, null, 2),
    }
  });

  const elem = document.createElement('div');
  elem.innerHTML = `
    <form action="https://stackblitz.com/run" method="POST" target="_blank" class="hidden">
      <input type="hidden" name="project[description]" value="${g.title}">
      <input type="hidden" name="project[dependencies]" value="{}">
      <input type="hidden" name="project[template]" value="javascript">
      <input type="hidden" name="project[settings]" value="{}">
      <input type="submit" />
    </form>
  `;
  const form = elem.querySelector('form');
  for (const [name, file] of Object.entries(files)) {
    for (const name of names) {
      file.content = file.content.split(name).join(`./${name}`);
    }
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = `project[files][${name}]`;
    input.value = file.content;
    form.appendChild(input);
  }
  window.frameElement.ownerDocument.body.appendChild(elem);
  form.submit();
  window.frameElement.ownerDocument.body.removeChild(elem);
}
*/

document.querySelectorAll('.dialog').forEach(dialogElem => {
  dialogElem.addEventListener('click', function(e) {
    if (e.target === this) {
      this.style.display = 'none';
    }
  });
  dialogElem.addEventListener('keydown', function(e) {
    console.log(e.keyCode);
    if (e.keyCode === 27) {
      this.style.display = 'none';
    }
  });
});
const exportDialogElem = document.querySelector('.export');

function openExport() {
  exportDialogElem.style.display = '';
  exportDialogElem.firstElementChild.focus();
}

function closeExport(fn) {
  return () => {
    exportDialogElem.style.display = 'none';
    fn();
  };
}
document.querySelector('.button-export').addEventListener('click', openExport);

function selectFile(info, ndx, fileDivs) {
  if (info.editors.length <= 1) {
    return;
  }
  info.editors.forEach((editorInfo, i) => {
    const selected = i === ndx;
    editorInfo.div.style.display = selected ? '' : 'none';
    editorInfo.editor.layout();
    addRemoveClass(fileDivs.children[i], 'fileSelected', selected);
  });
}

function showEditorSubPane(type, ndx) {
  const info = htmlParts[type];
  selectFile(info, ndx, info.files);
}

function setupEditor() {

  forEachHTMLPart(function(info, ndx, name) {
    info.pane = document.querySelector('.panes>.' + name);
    info.code = info.pane.querySelector('.code');
    info.files = info.pane.querySelector('.files');
    info.editors = info.sources.map((sourceInfo, ndx) => {
      if (info.sources.length > 1) {
        const div = document.createElement('div');
        div.textContent = basename(sourceInfo.name);
        info.files.appendChild(div);
        div.addEventListener('click', () => {
          selectFile(info, ndx, info.files);
        });
      }
      const div = document.createElement('div');
      info.code.appendChild(div);
      const editor = runEditor(div, sourceInfo.source, info.language);
      sourceInfo.editor = editor;
      return {
        div,
        editor,
      };
    });
    info.button = document.querySelector('.button-' + name);
    info.button.addEventListener('click', function() {
      toggleSourcePane(info.button);
      runIfNeeded();
    });
  });

  g.fullscreen = document.querySelector('.button-fullscreen');
  g.fullscreen.addEventListener('click', toggleFullscreen);

  g.run = document.querySelector('.button-run');
  g.run.addEventListener('click', run);

  g.iframe = document.querySelector('.result>iframe');
  g.other = document.querySelector('.panes .other');

  document.querySelector('.button-codepen').addEventListener('click', closeExport(openInCodepen));
  document.querySelector('.button-jsfiddle').addEventListener('click', closeExport(openInJSFiddle));
  document.querySelector('.button-jsgist').addEventListener('click', closeExport(openInJSGist));
  document.querySelector('.button-stackoverflow').addEventListener('click', closeExport(openInStackOverflow));
  document.querySelector('.button-codesandbox').addEventListener('click', closeExport(openInCodeSandbox));
  //document.querySelector('.button-stackblitz').addEventListener('click', openInStackBlitz);

  g.result = document.querySelector('.panes .result');
  g.resultButton = document.querySelector('.button-result');
  g.resultButton.addEventListener('click', function() {
     toggleResultPane();
     runIfNeeded();
  });
  g.result.style.display = 'none';
  toggleResultPane();

  if (window.innerWidth >= 1000) {
    toggleSourcePane(htmlParts.js.button);
  }

  window.addEventListener('resize', resize);

  showEditorSubPane('js', 0);
  showOtherIfAllPanesOff();
  document.querySelector('.other .loading').style.display = 'none';

  resize();
  run();
}

function toggleFullscreen() {
  try {
    toggleIFrameFullscreen(window);
    resize();
    runIfNeeded();
  } catch (e) {
    console.error(e);  // eslint-disable-line
  }
}

function runIfNeeded() {
  if (runOnResize) {
    run();
  }
}

function run() {
  g.setPosition = false;
  const url = getSourceBlobFromEditor();
  g.iframe.src = url;
}

function addClass(elem, className) {
  const parts = elem.className.split(' ');
  if (parts.indexOf(className) < 0) {
    elem.className = elem.className + ' ' + className;
  }
}

function removeClass(elem, className) {
  const parts = elem.className.split(' ');
  const numParts = parts.length;
  for (;;) {
    const ndx = parts.indexOf(className);
    if (ndx < 0) {
      break;
    }
    parts.splice(ndx, 1);
  }
  if (parts.length !== numParts) {
    elem.className = parts.join(' ');
    return true;
  }
  return false;
}

function toggleClass(elem, className) {
  if (removeClass(elem, className)) {
    return false;
  } else {
    addClass(elem, className);
    return true;
  }
}

function toggleIFrameFullscreen(childWindow) {
  const frame = childWindow.frameElement;
  if (frame) {
    const isFullScreen = toggleClass(frame, 'fullscreen');
    frame.ownerDocument.body.style.overflow = isFullScreen ? 'hidden' : '';
  }
}


function addRemoveClass(elem, className, add) {
  if (add) {
    addClass(elem, className);
  } else {
    removeClass(elem, className);
  }
}

function toggleSourcePane(pressedButton) {
  forEachHTMLPart(function(info) {
    const pressed = pressedButton === info.button;
    if (pressed && !info.showing) {
      addClass(info.button, 'show');
      info.pane.style.display = 'flex';
      info.showing = true;
    } else {
      removeClass(info.button, 'show');
      info.pane.style.display = 'none';
      info.showing = false;
    }
  });
  showOtherIfAllPanesOff();
  resize();
}

function showingResultPane() {
  return g.result.style.display !== 'none';
}
function toggleResultPane() {
  const showing = showingResultPane();
  g.result.style.display = showing ? 'none' : 'block';
  addRemoveClass(g.resultButton, 'show', !showing);
  showOtherIfAllPanesOff();
  resize();
}

function showOtherIfAllPanesOff() {
  let paneOn = showingResultPane();
  forEachHTMLPart(function(info) {
    paneOn = paneOn || info.showing;
  });
  g.other.style.display = paneOn ? 'none' : 'block';
}

// seems like we should probably store a map
function getEditorNdxByBlobUrl(type, url) {
  return htmlParts[type].sources.findIndex(source => source.scriptInfo.blobUrl === url);
}

function getActualLineNumberAndMoveTo(url, lineNo, colNo) {
  let origUrl = url;
  let actualLineNo = lineNo;
  const scriptInfo = Object.values(g.scriptInfos).find(scriptInfo => scriptInfo.blobUrl === url);
  if (scriptInfo) {
    actualLineNo = lineNo - scriptInfo.numLinesBeforeScript;
    origUrl = basename(scriptInfo.fqURL);
    if (!g.setPosition) {
      // Only set the first position
      g.setPosition = true;
      const editorNdx = getEditorNdxByBlobUrl('js', url);
      if (editorNdx >= 0) {
        showEditorSubPane('js', editorNdx);
        const editor = htmlParts.js.editors[editorNdx].editor;
        editor.setPosition({
          lineNumber: actualLineNo,
          column: colNo,
        });
        editor.revealLineInCenterIfOutsideViewport(actualLineNo);
        editor.focus();
      }
    }
  }
  return {origUrl, actualLineNo};
}

window.getActualLineNumberAndMoveTo = getActualLineNumberAndMoveTo;

function runEditor(parent, source, language) {
  return monaco.editor.create(parent, {
    value: source,
    language: language,
    //lineNumbers: false,
    theme: 'vs-dark',
    disableTranslate3d: true,
 //   model: null,
    scrollBeyondLastLine: false,
    minimap: { enabled: false },
  });
}

async function runAsBlob() {
  const query = getQuery();
  g.url = getFQUrl(query.url);
  g.query = getSearch(g.url);
  let html;
  try {
    html = await getHTML(query.url);
  } catch (err) {
    console.log(err);  // eslint-disable-line
    return;
  }
  await parseHTML(query.url, html);
  window.location.href = getSourceBlobFromOrig();
}

function applySubstitutions() {
  [...document.querySelectorAll('[data-subst]')].forEach((elem) => {
    elem.dataset.subst.split('&').forEach((pair) => {
      const [attr, key] = pair.split('|');
      elem[attr] = lessonEditorSettings[key];
    });
  });
}

function start() {
  const parentQuery = getQuery(window.parent.location.search);
  const isSmallish = window.navigator.userAgent.match(/Android|iPhone|iPod|Windows Phone/i);
  const isEdge = window.navigator.userAgent.match(/Edge/i);
  if (isEdge || isSmallish || parentQuery.editor === 'false') {
    runAsBlob();
    // var url = query.url;
    // window.location.href = url;
  } else {
    applySubstitutions();
    require.config({ paths: { 'vs': '/manual/3rdparty/monaco-editor/min/vs' }});
    require(['vs/editor/editor.main'], main);
  }
}

start();
}());