examples/turtle-field-demo/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Blockly Demo: Custom Turtle Field</title>
    <script src="./node_modules/blockly/blockly_compressed.js"></script>
    <script src="blocks.js"></script>
    <script src="field_turtle.js"></script>
    <script src="https://unpkg.com/blockly/msg/en.js"></script>
    <style>
      body {
        margin: 0 10%;
        background-color: #fff;
        font-family: sans-serif;
      }
      h1 {
        font-weight: normal;
        font-size: 140%;
      }
      td {
        padding: 1ex;
      }
      img {
        border: none;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="turtle.css">
  </head>
  <body onload="start()">

    <p>This is a demo of creating custom block fields. In this case the field
      is used to define a turtle.
    </p>

    <p>&rarr; More info on <a href="https://developers.google.com/blockly/guides/create-custom-blocks/fields/customizing-fields/creating">creating a custom field</a>&hellip;</p>

    <p>Click on the blocks' comment icons to learn what they are demonstrating.
      Use the buttons below to see how the fields react to changes.
    </p>

    <p>
      <input type="button" value="set random style" onclick="setRandomStyle()">
      <input type="button" value="toggle shadow" onclick="toggleShadow()">
      <input type="button" value="toggle enabled" onclick="toggleEnabled()">
      <input type="button" value="toggle editable" onclick="toggleEditable()">
      <input type="button" value="toggle collapsed" onclick="toggleCollapsed()">
    </p>

    <p>
      <input type="button" value="Export to XML" onclick="toXml()">
      <input type="button" value="Import from XML" onclick="fromXml()">
    </p>

    <table>
      <tr>
        <td>
          <textarea id="importExport"
                    style="width: 200px; height: 480px;"
                    onchange="textAreaChange();"
                    onkeyup="textAreaChange()"></textarea>
        </td>
        <td>
          <div id="blocklyDiv" style="width: 600px; height: 480px;"></div>
        </td>
      </tr>
    </table>

    <script>
      function toXml() {
        var output = document.getElementById('importExport');
        var xml = Blockly.Xml.workspaceToDom(workspace);
        output.value = Blockly.Xml.domToPrettyText(xml);
        output.focus();
        output.select();
      }

      function fromXml() {
        var input = document.getElementById('importExport');
        var xml = Blockly.utils.xml.textToDom(input.value);
        Blockly.Xml.domToWorkspace(xml, workspace);
      }

      function setRandomStyle() {
        var blocks = workspace.getAllBlocks(false);
        var styles =
            Object.keys(workspace.getRenderer().getConstants().blockStyles);
        styles.splice(styles.indexOf(blocks[0].getStyleName()), 1);
        var style = styles[Math.floor(Math.random() * styles.length)];
        for(var i = 0, block; block = blocks[i]; i++) {
          block.setStyle(style);
        }
      }

      function toggleShadow() {
        var blocks = workspace.getAllBlocks(false);
        for(var i = 0, block; block = blocks[i]; i++) {
          block.setShadow(!block.isShadow());
        }
      }

      function toggleEnabled() {
        var blocks = workspace.getAllBlocks(false);
        for(var i = 0, block; block = blocks[i]; i++) {
          block.setEnabled(!block.isEnabled());
        }
      }

      function toggleEditable() {
        Blockly.hideChaff();
        var blocks = workspace.getAllBlocks(false);
        for(var i = 0, block; block = blocks[i]; i++) {
          block.setEditable(!block.isEditable());
        }
      }

      function toggleCollapsed() {
        Blockly.hideChaff();
        var blocks = workspace.getAllBlocks(false);
        for(var i = 0, block; block = blocks[i]; i++) {
          block.setCollapsed(!block.isCollapsed());
        }
      }

      function appendDom() {
        var blocks = document.getElementById('workspace-blocks');
        if (blocks.firstElementChild) {
          Blockly.Xml.appendDomToWorkspace(blocks, workspace);
        }
      }

      function start() {
        workspace = Blockly.inject('blocklyDiv', options);
        appendDom();
        workspace.scrollCenter();
      }

      var options = {
        media: './node_modules/blockly/media/',
        grid: {
          spacing: 25,
          length: 3,
          colour: '#ccc'
        },
        move: {
          scrollbars: true,
          drag: true,
          wheel: true,
        },
        zoom: {
          controls: true,
          startScale: 1.0,
          maxScale: 4,
          minScale: 0.25,
          scaleSpeed: 1.1
        }
        /*toolbox: document.getElementById('toolbox')*/
      }

    </script>

    <xml xmlns="https://developers.google.com/blockly/xml" id="workspace-blocks" style="display: none">
      <block type="turtle_basic"></block>
      <block type="turtle_nullifier" y="120"></block>
      <block type="turtle_changer" y="230"></block>
    </xml>
  </body>
</html>