blockly/demos/interpreter/index.html from cra16/cake-core

blockly/demos/interpreter/index.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: JS Interpreter</title>
  <script type="text/javascript" src="acorn_interpreter.js"></script>
  <script type="text/javascript" src="../../blockly_compressed.js"></script>
  <script type="text/javascript" src="../../blocks_compressed.js"></script>
  <script type="text/javascript" src="../../javascript_compressed.js"></script>
  <script type="text/javascript" src="../../msg/js/en.js"></script>
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
  </style>
</head>
<body>
  <h1><a href="https://blockly.googlecode.com/">Blockly</a> &gt;
    <a href="../index.html">Demos</a> &gt; JS Interpreter</h1>

  <p>This is a simple demo of executing code wth a sandboxed JavaScript interpreter.</p>

  <p>&rarr; More info on <a href="https://code.google.com/p/blockly/wiki/JSInterpreter">JS Interpreter</a>...</p>

  <p>
    <button onclick="parseCode()">Parse JavaScript</button>
    <button onclick="stepCode()" id="stepButton" disabled="disabled">Step JavaScript</button>
  </p>

  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

  <xml id="toolbox" style="display: none">
    <category name="Logic">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_boolean"></block>
    </category>
    <category name="Loops">
      <block type="controls_repeat_ext">
        <value name="TIMES">
          <block type="math_number">
            <field name="NUM">10</field>
          </block>
        </value>
      </block>
      <block type="controls_whileUntil"></block>
    </category>
    <category name="Math">
      <block type="math_number"></block>
      <block type="math_arithmetic"></block>
      <block type="math_single"></block>
    </category>
    <category name="Text">
      <block type="text"></block>
      <block type="text_length"></block>
      <block type="text_print"></block>
      <block type="text_prompt_ext">
        <value name="TEXT">
          <block type="text"></block>
        </value>
      </block>
    </category>
    <category name="Variables" custom="VARIABLE"></category>
    <category name="Functions" custom="PROCEDURE"></category>
  </xml>

  <script>
    Blockly.inject(document.getElementById('blocklyDiv'),
        {path: '../../', toolbox: document.getElementById('toolbox')});

    var myInterpreter = null;

    function initApi(interpreter, scope) {
      // Add an API function for the alert() block.
      var wrapper = function(text) {
        text = text ? text.toString() : '';
        return interpreter.createPrimitive(alert(text));
      };
      interpreter.setProperty(scope, 'alert',
          interpreter.createNativeFunction(wrapper));

      // Add an API function for the prompt() block.
      var wrapper = function(text) {
        text = text ? text.toString() : '';
        return interpreter.createPrimitive(prompt(text));
      };
      interpreter.setProperty(scope, 'prompt',
          interpreter.createNativeFunction(wrapper));

      // Add an API function for highlighting blocks.
      var wrapper = function(id) {
        id = id ? id.toString() : '';
        return interpreter.createPrimitive(highlightBlock(id));
      };
      interpreter.setProperty(scope, 'highlightBlock',
          interpreter.createNativeFunction(wrapper));
    }

    var highlightPause = false;

    function highlightBlock(id) {
      Blockly.mainWorkspace.highlightBlock(id);
      highlightPause = true;
    }

    function parseCode() {
      // Generate JavaScript code and parse it.
      Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
      Blockly.JavaScript.addReservedWords('highlightBlock');
      var code = Blockly.JavaScript.workspaceToCode();
      myInterpreter = new Interpreter(code, initApi);

      alert('Ready to execute this code:\n\n' + code);
      document.getElementById('stepButton').disabled = '';
      highlightPause = false;
      Blockly.mainWorkspace.traceOn(true);
      Blockly.mainWorkspace.highlightBlock(null);
    }

    function stepCode() {
      try {
        var ok = myInterpreter.step();
      } finally {
        if (!ok) {
          // Program complete, no more code to execute.
          document.getElementById('stepButton').disabled = 'disabled';
          return;
        }
      }
      if (highlightPause) {
        // A block has been highlighted.  Pause execution here.
        highlightPause = false;
      } else {
        // Keep executing until a highlight statement is reached.
        stepCode();
      }
    }
  </script>

</body>
</html>