tests/playground.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly Playground</title>
<script type="text/javascript" src="../node_modules/google-closure-library/closure/goog/base.js"></script>
<script type="text/javascript" src="./test_dependency_map.js"></script>
<script type="text/javascript">
'use strict';
goog.require('Blockly.Playground');
goog.require('goog.tweak');
goog.require('goog.tweak.TweakUi');
var block = null;
</script>
<script type="text/javascript" src="../msg/js/en_us.js"></script>
<script type="text/javascript">
function start() {
  goog.tweak.registerBoolean('RTL', 'run in right-to-left mode', false);
  goog.tweak.registerBoolean('editBlocks', 'opens with level builder mode enabled', false);
  goog.tweak.registerBoolean('nonCategoryMode', 'opens blockly with blocks in categories', false);
  goog.tweak.registerBoolean('openContractEditor', 'pre-opens contract editor', false);
  goog.tweak.registerBoolean('toggleScrollDragDebug', 'enables autoscroll debugging', false);
  goog.tweak.registerBoolean('openFunctionEditor', 'pre-opens function editor', false);
  goog.tweak.registerBoolean('openCustomizedFunctionEditor', 'pre-opens customized function editor', false);
  goog.tweak.registerBoolean('enableExampleRunning', 'enables running of examples', false);
  goog.tweak.registerBoolean('typeHints', 'glow typed inputs based on what color of block they expect', false);
  goog.tweak.registerNumber('addContractDomains', 'adds a given number of domain parameters to the auto-opened contract editor', 0);

  Blockly.inject(document.getElementById('blocklyDiv'), {
    rtl: goog.tweak.getBoolean('RTL'),
    path: '../',
    toolbox: getToolboxElement(),
    hasVerticalScrollbars: true,
    assetUrl: function(path) { return '../' + path; },
    customSimpleDialog: Blockly.Playground.customSimpleDialog,
    valueTypeTabShapeMap: { Sprite: 'angle', Behavior: 'rounded', Location: 'square' },
    typeHints: goog.tweak.getBoolean('typeHints')
  });

  if (goog.tweak.getBoolean('enableExampleRunning')) {
    Blockly.showExampleTestButtons = true;
  }

  if (goog.tweak.getBoolean('editBlocks')) {
    Blockly.editBlocks = true;
  }

  if (goog.tweak.getBoolean('openContractEditor')) {
    newContractEditor();
  } else if (goog.tweak.getBoolean('openFunctionEditor')) {
    newFunctionEditor();
  } else if (goog.tweak.getBoolean('openCustomizedFunctionEditor')) {
    newCustomizedFunctionEditor();
  }
  if (goog.tweak.getBoolean('toggleScrollDragDebug')) {
    Blockly.ScrollOnBlockDragHandler.DEBUG = true;
  }
}

function getToolboxElement() {
  return goog.tweak.getBoolean('nonCategoryMode') ?
      document.getElementById('non-category-toolbox') :
      document.getElementById('toolbox');
}

/**
 * @param {Element} checkboxElement
 */
function toggleFullBump(checkboxElement) {
  Blockly.BlockSpaceEditor.BUMP_ENTIRE_BLOCK = checkboxElement.checked;
  goog.style.setElementShown(document.getElementById('bump-debug-checkbox'),
      checkboxElement.checked);
}

/**
 * @param {Element} checkboxElement
 */
function toggleBumpDebug(checkboxElement) {
  Blockly.BlockSpaceEditor.BUMP_DEBUG = checkboxElement.checked;
}

/**
 * @param {Element} checkboxElement
 */
function toggleScrollDragDebug(checkboxElement) {
  Blockly.ScrollOnBlockDragHandler.DEBUG = checkboxElement.checked;
}

function newContractEditor() {
  Blockly.defaultNumExampleBlocks = 2;
  Blockly.useContractEditor = true;
  Blockly.functionEditor = Blockly.contractEditor = new Blockly.ContractEditor({
    disableExamples: false
  });
  Blockly.contractEditor.openWithNewFunction();
  var numberContractDomains = goog.tweak.getNumber('addContractDomains');
  if (numberContractDomains) {
    for (var i = 0; i < numberContractDomains; i++) {
      Blockly.contractEditor.addParameter('param' + i);
    }
    Blockly.contractEditor.refreshParamsEverywhere();
    Blockly.contractEditor.layOutBlockSpaceItems_();
  }
}

function newVariableEditor() {
  Blockly.useContractEditor = true;
  Blockly.functionEditor = Blockly.contractEditor = new Blockly.ContractEditor({
    disableExamples: false
  });
  Blockly.contractEditor.openWithNewFunction(true);
}

function newFunctionEditor() {
  Blockly.defaultNumExampleBlocks = 2;
  Blockly.functionEditor = new Blockly.FunctionEditor({
  });
  Blockly.functionEditor.openWithNewFunction();
}

function newCustomizedFunctionEditor() {
  Blockly.oceanBoilerEditor = new Blockly.FunctionEditor(
    {
      FUNCTION_HEADER: 'Ocean Boiler',
      FUNCTION_NAME_LABEL: 'Name your ocean boiler:',
      FUNCTION_DESCRIPTION_LABEL: 'What kind of ocean is this supposed to boil?',
    },
    'ocean_boiler_definition',
    null,
    false,
    [
      Blockly.BlockValueType.NUMBER,
      Blockly.BlockValueType.STRING,
      Blockly.BlockValueType.COLOUR,
      Blockly.BlockValueType.BOOLEAN,
      Blockly.BlockValueType.SPRITE,
      Blockly.BlockValueType.LOCATION
    ]
  );
  Blockly.oceanBoilerEditor.openWithNewFunction();
}

function toXml() {
  var output = document.getElementById('importExport');
  var xml = Blockly.Xml.blockSpaceToDom(Blockly.mainBlockSpace);
  output.value = Blockly.Xml.domToText(xml);
  output.focus();
  output.select();
}

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

function toCode(lang) {
  var output = document.getElementById('importExport');
  output.value = Blockly.Generator.blockSpaceToCode(lang);
}

function airstrike(n) {
  var prototypes = [];
  var toolbox = getToolboxElement();
  var blocks = toolbox.getElementsByTagName('block');
  for (var x = 0, block; block = blocks[x]; x++) {
    prototypes.push(block.getAttribute('type'));
  }
  for (var x = 0; x < n; x++) {
    var prototype = prototypes[Math.floor(Math.random() * prototypes.length)];
    var block = new Blockly.Block(Blockly.mainBlockSpace, prototype);
    block.initSvg();
    block.getSvgRoot().setAttribute('transform', 'translate(' +
        Math.round(Math.random() * 450 + 40) + ', ' +
        Math.round(Math.random() * 600 + 40) + ')');
    block.render();
  }
}

function sizeTo(sizeString) {
  document.getElementById('blocklyDiv').style.height = sizeString;
  var ev = document.createEvent('Event');
  ev.initEvent('resize', true, true);
  window.dispatchEvent(ev);
}
</script>

<style>
html, body {
  height: 100%;
}
body {
  background-color: #fff;
  font-family: sans-serif;
  overflow: hidden;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
h1 {
  font-weight: normal;
  font-size: 140%;
}
#blocklyDiv {
  position: absolute;
  left: calc(30% + 4px);
  height: 95%;
  width: calc(70% - 8px);
}
#controls-section {
  position: absolute;
  width: calc(30% - 4px);
  left: 0;
  top: 0;
}
#controls {
  margin: 5px;
}

/*
 * Standard styling for goog.ui.Dialog.
 *
 * @author ssaviano@google.com (Steven Saviano)
 * @author attila@google.com (Attila Bodis)
 */
.modal-dialog {
  background: #c1d9ff;
  border: 1px solid #3a5774;
  color: #000;
  padding: 4px;
  position: absolute;
}

.modal-dialog a,
.modal-dialog a:link,
.modal-dialog a:visited  {
  color: #06c;
  cursor: pointer;
}

.modal-dialog-bg {
  background: #666;
  left: 0;
  position: absolute;
  top: 0;
}

.modal-dialog-title {
  background: #e0edfe;
  color: #000;
  cursor: pointer;
  font-size: 120%;
  font-weight: bold;

  /* Add padding on the right to ensure the close button has room. */
  padding: 8px 31px 8px 8px;

  position: relative;
  _zoom: 1; /* Ensures proper width in IE6 RTL. */
}

.modal-dialog-title-close {
  /* Client apps may override the URL at which they serve the sprite. */
  background: #e0edfe;
  cursor: default;
  height: 15px;
  position: absolute;
  right: 10px;
  top: 8px;
  width: 15px;
  vertical-align: middle;
}

.modal-dialog-buttons,
.modal-dialog-content {
  background-color: #fff;
  padding: 8px;
}

.goog-buttonset-default {
  font-weight: bold;
}

/*
 * End standard styling for goog.ui.Dialog.
 */

</style>
</head>
<body onload="start()">

  <div id="blocklyDiv"></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>
      <block type="logic_null"></block>
      <block type="logic_ternary"></block>
    </category>
    <category name="Loops">
      <block type="controls_repeat_ext">
        <value name="TIMES">
          <block type="math_number">
            <title name="NUM">10</title>
          </block>
        </value>
      </block>
      <block type="controls_whileUntil"></block>
      <block type="controls_for">
        <value name="FROM">
          <block type="math_number">
            <title name="NUM">1</title>
          </block>
        </value>
        <value name="TO">
          <block type="math_number">
            <title name="NUM">10</title>
          </block>
        </value>
        <value name="BY">
          <block type="math_number">
            <title name="NUM">1</title>
          </block>
        </value>
      </block>
      <block type="controls_forEach"></block>
      <block type="controls_flow_statements"></block>
    </category>
    <category name="Math">
      <block type="math_number"></block>
      <block type="math_arithmetic"></block>
      <block type="math_single"></block>
      <block type="math_trig"></block>
      <block type="math_constant"></block>
      <block type="math_number_property"></block>
      <block type="math_change">
        <value name="DELTA">
          <block type="math_number">
            <title name="NUM">1</title>
          </block>
        </value>
      </block>
      <block type="math_round"></block>
      <block type="math_on_list"></block>
      <block type="math_modulo"></block>
      <block type="math_constrain">
        <value name="LOW">
          <block type="math_number">
            <title name="NUM">1</title>
          </block>
        </value>
        <value name="HIGH">
          <block type="math_number">
            <title name="NUM">100</title>
          </block>
        </value>
      </block>
      <block type="math_random_int">
        <value name="FROM">
          <block type="math_number">
            <title name="NUM">1</title>
          </block>
        </value>
        <value name="TO">
          <block type="math_number">
            <title name="NUM">100</title>
          </block>
        </value>
      </block>
      <block type="math_random_float"></block>
    </category>
    <category name="Text">
      <block type="text"></block>
      <block type="text_join"></block>
      <block type="text_append">
        <value name="TEXT">
          <block type="text"></block>
        </value>
      </block>
      <block type="text_length"></block>
      <block type="text_isEmpty"></block>
      <block type="text_indexOf">
        <value name="VALUE">
          <block type="variables_get">
            <title name="VAR">text</title>
          </block>
        </value>
      </block>
      <block type="text_charAt">
        <value name="VALUE">
          <block type="variables_get">
            <title name="VAR">text</title>
          </block>
        </value>
      </block>
      <block type="text_getSubstring">
        <value name="STRING">
          <block type="variables_get">
            <title name="VAR">text</title>
          </block>
        </value>
      </block>
      <block type="text_changeCase"></block>
      <block type="text_trim"></block>
      <block type="text_print"></block>
      <block type="text_prompt"></block>
    </category>
    <category name="Lists">
      <block type="lists_create_empty"></block>
      <block type="lists_create_with"></block>
      <block type="lists_repeat">
        <value name="NUM">
          <block type="math_number">
            <title name="NUM">5</title>
          </block>
        </value>
      </block>
      <block type="lists_length"></block>
      <block type="lists_isEmpty"></block>
      <block type="lists_indexOf">
        <value name="VALUE">
          <block type="variables_get">
            <title name="VAR">list</title>
          </block>
        </value>
      </block>
      <block type="lists_getIndex">
        <value name="VALUE">
          <block type="variables_get">
            <title name="VAR">list</title>
          </block>
        </value>
      </block>
      <block type="lists_setIndex">
        <value name="LIST">
          <block type="variables_get">
            <title name="VAR">list</title>
          </block>
        </value>
      </block>
      <block type="lists_getSublist">
        <value name="LIST">
          <block type="variables_get">
            <title name="VAR">list</title>
          </block>
        </value>
      </block>
    </category>
    <category name="Colour">
      <block type="colour_picker"></block>
      <block type="colour_random"></block>
      <block type="colour_rgb"></block>
      <block type="colour_blend"></block>
      <block limit="3" type="colour_blend"></block>
    </category>
    <category name="Variables" custom="VARIABLE"></category>
    <category name="Functions" custom="PROCEDURE"></category>
    <category name="Sprites">
      <block type="sprite_variables_get"></block>
      <block type="sprite_variables_set"></block>
      <block type="sprite_variables_set" inline="true"></block>
      <block type="behavior_variables_get"></block>
      <block type="behavior_variables_set"></block>
      <block type="behavior_variables_set" inline="true"></block>
      <block type="location_variables_get"></block>
      <block type="location_variables_set"></block>
      <block type="location_variables_set" inline="true"></block>
      <block type="dropdown_with_button_block" inline="true"></block>
    </category>
    <category name="Events">
      <block type="parent">
        <value name="COLOUR">
          <block type="colour_picker">
            <title name="COLOUR">#ff0000</title>
          </block>
        </value>
        <value name="TEXT">
          <block type="text">
            <title name="TEXT">hello</title>
          </block>
        </value>
      </block>
    </category>
    <category name="CSinA Vars" custom="FUNCTIONAL_VARIABLE" />
  </xml>

  <xml id="non-category-toolbox" style="display: none">
    <block type="button_block"></block>
    <block type="variables_get"></block>
    <block type="variables_set"></block>
    <block type="variables_set" inline="true"></block>
    <block type="sprite_variables_get"></block>
    <block type="sprite_variables_set"></block>
    <block type="sprite_variables_set" inline="true"></block>
    <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>
    <block type="logic_null"></block>
    <block limit="3" type="logic_ternary"></block>
  </xml>

  <div id="controls-section">
    <div id="controls">
      <h1>Blockly Playground</h1>

      <p><a href="javascript:void([document.getElementById('blocklyDiv').style.display = 'block', Blockly.mainBlockSpace.render()])">Show</a>
       - <a href="javascript:void(document.getElementById('blocklyDiv').style.display = 'none')">Hide</a></p>

      <p>
        <input type="button" value="Create Contract Editor" onclick="newContractEditor()">
        &nbsp;
        <input type="button" value="Create Variable Editor" onclick="newVariableEditor()">
        &nbsp;
        <input type="button" value="Create Function Editor" onclick="newFunctionEditor()">
        &nbsp;
        <input type="button" value="Export to XML" onclick="toXml()">
        &nbsp;
        <input type="button" value="Import from XML" onclick="fromXml()">
        <br>
        <input type="button" value="Generate JavaScript" onclick="toCode('JavaScript')">
        &nbsp;
        <input type="button" value="Generate Python" onclick="toCode('Python')">
        <br>
        <textarea id="importExport" style="width: 100%; height: 12em"></textarea>
      </p>
      <hr>
      <p>
        <input type="button" value="Size: 100px" onclick="sizeTo('100px')">
        &nbsp;
        <br>
        <input type="button" value="Size: 95%" onclick="sizeTo('95%')">
        &nbsp;
        <br>
      </p>
      <hr>
      <p>
        Toggle entire block bumping <input type="checkbox" value="false" onclick="toggleFullBump(this)">
        &nbsp;
        <br>
        <span id="bump-debug-checkbox" style="display: none">
          Toggle block bump debug drawing <input type="checkbox" value="false" onclick="toggleBumpDebug(this)">
          &nbsp;
          <br>
        </span>
        Toggle scroll-on-drag debug drawing <input type="checkbox" value="false" onclick="toggleScrollDragDebug(this)">
        &nbsp;
        <br>
        <input type="button" value="Clear Debug Drawings" onclick="Blockly.focusedBlockSpace.clearDebugDrawings()">
        &nbsp;
        <br>
      </p>
      <hr>
      <p>
        Stress test with an <input type="button" value="Airstrike!" onclick="airstrike(100)">
      </p>
      <hr>
      <p>
        <h3>URL Parameter Tweaks</h3>
        <div id="tweak-menu"></div>
        <script>
          document.getElementById('tweak-menu').appendChild(goog.tweak.TweakUi.create());
        </script>
      </p>
    </div>
  </div>
</body>
</html>