index.html

<!DOCTYPE html>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>snapblocks homepage</title>

<meta name=description content="Use snapblocks to write pictures of Snap! scripts in forum posts.">

<link rel=stylesheet href="/style.css">

<!---------------------------------------------------------------------------->

  
<h1>
  <div id=title>
    <a href="/">snapblocks</a>
    <span class="author">v<span id="version"></span> • by <a href="https://github.com/ego-lay-atman-bay">ego-lay-atman-bay</a></span>
  </div>
  <span>
    <a target="_blank" href="/docs/writing-snapblocks">help</a>
    <a href="http://github.com/snap-snapblocks/snapblocks">github</a>
    <!-- <a href="/translator/" id="translate-link"><b>translate</b></a>
    <a href="/generator/"><b>generate</b></a> -->
  </span>
</h1>

<main>
  
  <div id="side">
    <div id="options">
      <select id="choose-style">
        <option value="snap" selected>Snap!</option>
        <option value="snap-flat">Snap! Flat design</option>
        <option value="scratch2">Scratch 2.0</option>
        <option value="scratch3">Scratch 3.0</option>
        <option value="scratch3-high-contrast">Scratch 3.0 (high-contrast)</option>
      </select>
  
      <select id="choose-lang">
        <option value="">Select language…</option>
      </select>
      
      <br>

      <input type="checkbox" name="zebraColoring" id="zebraColoring">
      <label for="zebraColoring">Zebra Coloring</label>
      <input type="checkbox" name="blockWrapping" id="blockWrapping">
      <label for="blockWrapping">Block Wrapping</label>
      <input type="checkbox" name="showSpaces" id="showSpaces">
      <label for="showSpaces">Show Spaces</label>
      <input type="checkbox" name="santa" id="santa">
      <label for="santa">Santa Hats</label>
    </div>
  
    <div id="editor"></div>
  </div>

  <div class="preview-container">
    <a id="export-svg" class="export-link" download="snapblocks.svg">Export SVG</a>
    <a id="export-png" class="export-link" download="snapblocks.png">Export PNG</a>
    
    <pre id="preview" class="blocks"></pre>
    
  </div>
</main>


<!---------------------------------------------------------------------------->

<script src="/js/snapblocks.min.js"></script>
<script src="/js/translations-all.js" charset="utf8"></script>
<script src=/lib/codemirror.build.js></script>

<script>
  let versionEl = document.getElementById("version")
  if (versionEl) {
    versionEl.innerText = snapblocks.version
  }

  var editor = document.getElementById('editor');
  var exportSVGLink = document.getElementById('export-svg');
  var exportPNGLink = document.getElementById('export-png');

  var obj = {
    style: 'snap',
    options: {},
  };
  extractHash();

  var codeEditor = new codemirror.EditorView({
    parent: editor,
    doc: obj.script || "",
    extensions: [
      codemirror.view.keymap.of(codemirror.commands.defaultKeymap),
      codemirror.view.keymap.of(codemirror.commands.indentWithTab),
      codemirror.view.keymap.of([{
        key: "Mod-z",
        run: codemirror.commands.undo,
      },
      {
        key: "Mod-Shift-z",
        run: codemirror.commands.redo,
      },
      {
        key: "Mod-y",
        run: codemirror.commands.redo,
      }]),
      codemirror.language.indentUnit.of('  '),
      codemirror.EditorView.updateListener.of((v) => {
        if (v.docChanged) {
          obj.script = v.state.doc.toString();
          objUpdated();
        }
      }),
      codemirror.view.placeholder('. . .'),
      codemirror.commands.history(),
    ],
  });

  var chooseLang = document.getElementById('choose-lang');

  var languageCodes = Object.keys(snapblocks.allLanguages)
  languageCodes.sort()
  languageCodes.forEach(function (code) {
    if (code === "en") return
    var option = document.createElement("option")
    option.value = code

    var language = snapblocks.allLanguages[code]
    option.textContent = language.name && language.altName ? language.name + " — " + language.altName : language
      .name || language.altName || code
    chooseLang.appendChild(option)
  })

  var langStatus = document.getElementById('lang-status')

  chooseLang.addEventListener('change', function (e) {
    if (obj.lang === chooseLang.value) return
    obj.lang = chooseLang.value;
    objUpdated();
  });


  var chooseStyle = document.getElementById('choose-style');

  chooseStyle.addEventListener('change', function (e) {
    if (obj.style === chooseStyle.value) return
    obj.style = chooseStyle.value;
    objUpdated();
  });

  var chooseOptions = {
    zebraColoring: document.getElementById('zebraColoring'),
    wrap: document.getElementById('blockWrapping'),
    showSpaces: document.getElementById('showSpaces'),
    santa: document.getElementById('santa'),
  }

  for (let [option, element] of Object.entries(chooseOptions)) {
    element.checked = obj.options[option]
    element.addEventListener('change', () => {
      obj.options[option] = element.checked
      objUpdated()
    })
  }

  /* Extract hash from location. Returns true if changed */
  function extractHash() {
    var newObj = decodeHash();
    if (!newObj || !newObj.script) {
      newObj = {
        script: "",
        lang: obj.lang,
        options: {},
      };
    }

    newObj.style = newObj.style || obj.style || 'scratch3'

    if (newObj.lang !== obj.lang || newObj.script !== obj.script) {
      obj = newObj;
      return true;
    }
    return false;
  }

  function decodeHash() {
    var url = new URL(location.href)
    hash = url.hash
    if (!url.search && url.hash) {
      url.search = url.hash.slice(1, url.hash.length)
    }
    let newObj = {
      options: {}
    }
    for (const [key, value] of url.searchParams.entries()) {
      if (["script", "style", "lang"].includes(decodeURI(key))) {
        newObj[decodeURI(key)] = decodeURI(value)
      } else {
        if (value != "") {
          newObj.options[decodeURI(key)] = decodeURI(value)
        } else {
          newObj.options[decodeURI(key)] = true
        }
      }
    }

    return newObj
  }

  function setURL(url) {
    if (history && history.replaceState) {
      history.replaceState("", "", url.toString());
    } else {
      location.href = url.toString();
    }
  }

  function objUpdated() {
    // set hash
    const url = new URL(location.origin)
    const urlParams = new URLSearchParams();
    if (obj.style) urlParams.set('style', encodeURI(obj.style))
    if (obj.lang) urlParams.set('lang', encodeURI(obj.lang))
    if (obj.options) {
      for (let [option, value] of Object.entries(obj.options)) {
        if ([true, false].includes(value)) {
          if (value) {
            urlParams.set(encodeURI(option), '')
          }
        } else {
          urlParams.set(encodeURI(option), value)
        }
      }
    }
    urlParams.set('script', encodeURI(obj.script))
    url.search = urlParams
    setURL(url)

    // render code
    var doc = window.doc = snapblocks.parse(obj.script, {
      languages: obj.lang ? ['en', obj.lang] : ['en'],
    });
    var docView = snapblocks.newView(doc, {
      style: obj.style,
      scale: /^scratch3($|-)/.test(obj.style) ? 0.675 : 1,
      ...obj.options,
    })
    var svg = docView.render()
    svg.classList.add("snapblocks-style-" + obj.style)
    preview.innerHTML = "";
    preview.appendChild(svg);

    exportSVGLink.href = "";
    exportPNGLink.href = "";

    // add export link
    setTimeout(function () {
      exportSVGLink.href = docView.exportSVG();

      docView.exportPNG(function (pngDataURL) {
        exportPNGLink.href = pngDataURL;
      }, 3);
    }, 0);

    // include code in snapblocks links
    let translator = document.getElementById('translate-link')
    if (translator) {
      translator.href = "/translator/" + '#' + encodeURI(obj.script);
    }

    // update language dropdown
    var lang = snapblocks.allLanguages[obj.lang]
    if (langStatus) {
      langStatus.textContent = lang ? lang.percentTranslated + "%" : "";
      if (Object.keys(lang.aliases).length === 0) {
        var link = document.createElement("a")
        link.href = "https://github.com/snap-blocks/snapblocks/edit/master/locales-src/extra_aliases.js"
        link.textContent = "requires aliases"
        langStatus.textContent += ", "
        langStatus.appendChild(link)
      }
    }
  }

  setInterval(function () {
    if (extractHash()) {
      updatedFromHash();
    }
  }, 200);

  function updatedFromHash() {
    objUpdated();
    chooseLang.value = obj.lang || "";
    chooseStyle.value = obj.style || "";
  }

  updatedFromHash();
</script>