Method constructor

src/client/code.mjs:31–81

()

class CodeSandbox {
  constructor() {
    this.extensions = [
      keymap.of([
        {key: "Ctrl-Enter", run: () => { this.runCode(); return true }},
        {key: "Cmd-Enter", run: () => { this.runCode(); return true }}
      ]),
      modeGuesser
    ]
    this.editor = new EditorView({
      state: createState("", "javascript", [
        this.extensions,
        contextFacet.of({include: [], mode: null})
      ]),
      parent: document.querySelector("#editor")
    })

    this.output = new Sandbox.Output(document.querySelector(".sandbox-output"))
    this.sandbox = null

    this.chapters = document.querySelector("#chapters")
    chapterData.forEach(chapter => {
      this.chapters.appendChild(opt(chapter.number, chapter.number + ". " + chapter.title))
      chapter.exercises.forEach(exercise => {
        exercise.chapter = chapter
      })
    })
    this.chapters.addEventListener("change", () => {
      this.selectChapter(this.chapters.value)
      document.location.hash = "#" + this.chapters.value
    })

    this.per = document.querySelector("#per_chapter")
    this.per.addEventListener("change", () => {
      this.selectContext(this.per.value)
      document.location.hash = "#" + (this.per.value == "box" ? this.chapters.value : this.per.value)
    })
    this.fileList = document.querySelector("#files")
    this.fileInfo = document.querySelector("#fileInfo")
    this.runLocally = document.querySelector("#runLocally")
    this.localFileList = document.querySelector("#local-files")

    document.querySelector("#run").addEventListener("click", () => this.runCode())

    document.querySelector("#solution").addEventListener("click", () => {
      let context = this.editor.state.facet(contextFacet)
      this.setEditorState(context.solution, context)
    })

    this.parseFragment() || this.selectChapter(0, "box")
    addEventListener("hashchange", () => this.parseFragment())
  }

  setEditorState(code, context) {
    this.editor.setState(createState(code, context.type || guessType(code), [this.extensions, contextFacet.of(context)]))