iframe-proxy | Sunbelt Computer Software

217 lines (198 loc) · 6.76 KB
addEventListener("load", () => {
  let editor = CodeMirror.fromTextArea(document.querySelector("#editor"), {
    mode: "javascript",
    extraKeys: {
      "Ctrl-Enter": runCode,
      "Cmd-Enter": runCode
    matchBrackets: true,
    lineNumbers: true
  function guessType(code) {
    return /^[\s\w\n:]*</.test(code) ? "html" : "js"
  let reGuess
  editor.on("change", () => {
    clearTimeout(reGuess)
    reGuess = setTimeout(() => {
      if (context.type == null) {
        let mode = guessType(editor.getValue()) == "html" ? "text/html" : "javascript"
        if (mode != editor.getOption("mode"))
          editor.setOption("mode", mode)
    }, 500)
  function hasIncludes(code, include) {
    if (!include) return code
    let re = /(?:\s|<!--.*?-->)*<script src="([^"]*)"><\/script>/g, m
    let found = []
    while (m = re.exec(code)) found.push(m[1])
    return include.every(s => found.indexOf(s) > -1)
  function setEditorCode(code, type) {
    editor.setValue(code)
    editor.setOption("mode", (type || guessType(code)) == "html" ? "text/html" : "javascript")
  function opt(value, label) {
    let node = document.createElement("option")
    node.value = value
    node.textContent = label || value
    return node
  function getChapter(number) {
    for (let i = 0; i < chapterData.length; i++)
      if (chapterData[i].number == number)
        return chapterData[i]
  let per = document.querySelector("#per_chapter")
  per.addEventListener("change", () => {
    selectContext(per.value)
    document.location.hash = "#" + (per.value == "box" ? chapters.value : per.value)
  let fileList = document.querySelector("#files")
  let fileInfo = document.querySelector("#fileInfo")
  let runLocally = document.querySelector("#runLocally")
  let localFileList = document.querySelector("#local-files")
  function addItem(container, link) {
    let li = container.appendChild(document.createElement("li"))
    let a = li.appendChild(document.createElement("a"))
    a.href = link
    a.textContent = link.replace(/^code\//, "")
  function selectChapter(number, context) {
    per.textContent = ""
    let chapter = getChapter(number)
    if (chapter.exercises.length) {
      per.appendChild(opt("box", "Select an exercise"))
      chapter.exercises.forEach(exercise => {
        let num = chapter.number + "." + exercise.number
        per.appendChild(opt(num, num + " " + exercise.name))
    } else {
      per.appendChild(opt("box", "This chapter has no exercises"))
    fileInfo.style.display = runLocally.style.display = "none"
    fileList.textContent = localFileList.textContent = ""
    if (chapter.links) chapter.links.forEach((file, i) => {
      if (!i) runLocally.style.display = ""
      addItem(localFileList, file)
    if (chapter.include) chapter.include.forEach((file, i) => {
      if (!i) fileInfo.style.display = ""
      addItem(fileList, file)
    selectContext(context || "box")
  function findExercise(id, chapter) {
    let parts = id.split(".")
    if (!chapter) chapter = getChapter(parts[0])
    for (let i = 0; i < chapter.exercises.length; i++)
      if (chapter.exercises[i].number == +parts[1])
        return chapter.exercises[i]
  let context = {include: []}
  function selectContext(value) {
    output.clear()
    clearSandbox()
    let chapter = getChapter(chapters.value), visible
    if (value == "box") {
      let code = (chapters.value < 20 || chapters.value > 21)
       ? "Run code here in the context of Chapter " + chapter.number
       : "Code from Node.js chapters can't be run in the browser"
      let guessed = guessType(chapter.start_code)
      if (guessed == "js")
        code = "// " + code
        code = "<!-- " + code + "-->"
      if (chapter.start_code) code += "\n\n" + chapter.start_code
      context = {include: chapter.include}
      setEditorCode(code, guessed)
      visible = "box"
    } else {
      let exercise = findExercise(value, chapter)
      context = {include: chapter.include,
                 solution: exercise.solution,
                 type: exercise.type}
      setEditorCode(exercise.code, exercise.type)
      visible = "exercise"
      let link = document.querySelector("#download")
      link.setAttribute("download", "solution" + value + ".js")
      if (/\.zip$/.test(exercise.file))
        link.href = exercise.file
        link.href = "data:text/plain;charset=UTF-8," + encodeURIComponent(exercise.solution)
    ["box", "exercise"].forEach(id => {
      document.querySelector("#" + id + "_info").style.display =
        (id == visible ? "" : "none")
  let outnode = document.querySelector(".sandbox-output")
  let output = new SandBox.Output(outnode)
  document.querySelector("#run").addEventListener("click", runCode)
  let sandbox
  function clearSandbox() {
    if (sandbox) {
      sandbox.frame.parentNode.removeChild(sandbox.frame)
      sandbox = null
  function runCode() {
    clearSandbox()
    let val = editor.getValue(), type = context.type || guessType(val)
    SandBox.create({
      loadFiles: hasIncludes(val, context.include) ? [] : context.include,
      place: type == "html" &&
        function(node) {
          let out = document.querySelector(".sandbox-output")
          out.parentNode.insertBefore(node, out)
    }).then(box => {
      sandbox = box
      output.clear()
      if (type == "html")
        box.setHTML(val, output)
        box.run(val, output)
  document.querySelector("#solution").addEventListener("click", () => {
    setEditorCode(context.solution, context.type)
  let chapters = document.querySelector("#chapters")
  chapterData.forEach(chapter => {
    chapters.appendChild(opt(chapter.number, chapter.number + ". " + chapter.title))
    chapter.exercises.forEach(exercise => {
      exercise.chapter = chapter
  chapters.addEventListener("change", () => {
    selectChapter(chapters.value)
    document.location.hash = "#" + chapters.value
  function parseFragment() {
    let hash = document.location.hash.slice(1)
    let valid = /^(\d+)(?:\.(\d+))?$/.exec(hash)
    let chapter, exercise
    if (valid) {
      chapter = getChapter(Number(valid[1]))
      exercise = chapter && valid[2] && findExercise(hash, chapter)
      if (!chapter || valid[2] && !exercise) valid = null
    if (valid) {
      let perValue = exercise ? hash : "box", setPer = false
      if (chapters.value != valid[1]) {
        chapters.value = valid[1]
        selectChapter(Number(valid[1]), perValue)
        setPer = true
      if (per.value != perValue) {
        per.value = perValue
        if (!setPer) selectContext(perValue)
      return true
  parseFragment() || selectChapter(0, "box")
  addEventListener("hashchange", parseFragment)
Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Sunbelt Computer Software

PL/B Language Development and Support

Uh oh!

FilesExpand file tree

code.js

Latest commit

History

code.js

File metadata and controls
