<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Multi-toolbox Playground</title>

    <script type="module">
      import {COMPRESSED, loadScript} from './scripts/load.mjs';

      import * as Blockly from '../build/blockly.loader.mjs';
      import '../build/blocks.loader.mjs';

      await loadScript('../build/msg/en.js');

      var options = {
        comments: true,
        collapse: true,
        disable: true,
        maxBlocks: Infinity,
        media: '../media/',
        oneBasedIndex: true,
        readOnly: false,
        //rtl: false,
        scrollbars: true,
        trashcan: true,
        //toolbox: null,
        //horizontalLayout: false,
        //toolboxPosition: 'start',
        zoom: {
          controls: true,
          wheel: false,
          startScale: 1.0,
          maxScale: 4,
          minScale: 0.25,
          scaleSpeed: 1.1,
        },
      };

      function start() {
        setBackgroundColour();
        var match = location.search.match(/toolbox=([^&]+)/);
        var toolbox = document.getElementById(
          'toolbox-' + (match ? match[1] : 'categories'),
        );
        document.forms.options.elements.toolbox.selectedIndex = Number(
          toolbox.getElementsByTagName('category').length == 0,
        );
        startBlocklyInstance('VertStartLTR', false, false, 'start', toolbox);
        startBlocklyInstance('VertStartRTL', true, false, 'start', toolbox);

        startBlocklyInstance('VertEndLTR', false, false, 'end', toolbox);
        startBlocklyInstance('VertEndRTL', true, false, 'end', toolbox);

        startBlocklyInstance(
          'HorizontalStartLTR',
          false,
          true,
          'start',
          toolbox,
        );
        startBlocklyInstance(
          'HorizontalStartRTL',
          true,
          true,
          'start',
          toolbox,
        );

        startBlocklyInstance('HorizontalEndLTR', false, true, 'end', toolbox);
        startBlocklyInstance('HorizontalEndRTL', true, true, 'end', toolbox);
      }

      function startBlocklyInstance(
        suffix,
        rtl,
        horizontalLayout,
        position,
        toolbox,
      ) {
        options.rtl = rtl;
        options.toolbox = toolbox;
        options.horizontalLayout = horizontalLayout;
        options.toolboxPosition = position;
        Blockly.inject('blocklyDiv' + suffix, options);
      }

      function setBackgroundColour() {
        // Set background colour to differentiate between compressed and uncompressed mode.
        if (!COMPRESSED) {
          document.body.style.backgroundColor = '#d6d6ff'; // Familiar lilac.
        } else {
          document.body.style.backgroundColor = '#60fcfc'; // Unfamiliar blue.
        }
      }

      // Call start().  Because this <script> has type=module, it is
      // automatically deferred, so it will not be run until after the
      // document has been parsed, but before firing DOMContentLoaded.
      start();
    </script>

    <style>
      html,
      body {
        height: 100%;
      }
      body {
        background-color: #fff;
        font-family: sans-serif;
      }
      h1 {
        font-weight: normal;
        font-size: 140%;
      }

      #octaweb {
        width: 100%;
      }
      #octaweb th {
        padding-top: 1em;
        width: 50%;
      }
      #octaweb td {
        width: 50%;
      }
      #octaweb td > div {
        height: 480px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Blockly Multi Playground</h1>

    <form id="options">
      <select name="toolbox" onchange="document.forms.options.submit()">
        <option value="categories">Categories</option>
        <option value="simple">Simple</option>
      </select>
    </form>

    <table id="octaweb">
      <tr>
        <th>LTR, Vertical, Start</th>
        <th>RTL, Vertical, Start</th>
      </tr>
      <tr>
        <td><div id="blocklyDivVertStartLTR"></div></td>
        <td><div id="blocklyDivVertStartRTL"></div></td>
      </tr>
      <tr>
        <th>LTR, Vertical, End</th>
        <th>RTL, Vertical, End</th>
      </tr>
      <tr>
        <td><div id="blocklyDivVertEndLTR"></div></td>
        <td><div id="blocklyDivVertEndRTL"></div></td>
      </tr>
      <tr>
        <th>LTR, Horizontal, Start</th>
        <th>RTL, Horizontal, Start</th>
      </tr>
      <tr>
        <td><div id="blocklyDivHorizontalStartLTR"></div></td>
        <td><div id="blocklyDivHorizontalStartRTL"></div></td>
      </tr>
      <tr>
        <th>LTR, Horizontal, End</th>
        <th>RTL, Horizontal, End</th>
      </tr>
      <tr>
        <td><div id="blocklyDivHorizontalEndLTR"></div></td>
        <td><div id="blocklyDivHorizontalEndRTL"></div></td>
      </tr>
    </table>

    <xml
      xmlns="https://developers.google.com/blockly/xml"
      id="toolbox-simple"
      style="display: none">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <!-- <block type="control_repeat"></block> -->
      <block type="logic_operation"></block>
      <block type="controls_repeat_ext">
        <value name="TIMES">
          <shadow type="math_number">
            <field name="NUM">10</field>
          </shadow>
        </value>
      </block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_boolean"></block>
      <block type="logic_null" disabled="true"></block>
      <block type="logic_ternary"></block>
    </xml>

    <xml
      xmlns="https://developers.google.com/blockly/xml"
      id="toolbox-categories"
      style="display: none">
      <category name="Logic" categorystyle="logic_category">
        <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" disabled="true"></block>
        <block type="logic_ternary"></block>
      </category>
      <category name="Loops" categorystyle="loop_category">
        <block type="controls_repeat_ext">
          <value name="TIMES">
            <shadow type="math_number">
              <field name="NUM">10</field>
            </shadow>
          </value>
        </block>
        <block type="controls_repeat" disabled="true"></block>
        <block type="controls_whileUntil"></block>
        <block type="controls_for">
          <value name="FROM">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
          <value name="TO">
            <shadow type="math_number">
              <field name="NUM">10</field>
            </shadow>
          </value>
          <value name="BY">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
        </block>
        <block type="controls_forEach"></block>
        <block type="controls_flow_statements"></block>
      </category>
      <category name="Math" categorystyle="math_category">
        <block type="math_number" gap="32">
          <field name="NUM">123</field>
        </block>
        <block type="math_arithmetic">
          <value name="A">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
          <value name="B">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
        </block>
        <block type="math_single">
          <value name="NUM">
            <shadow type="math_number">
              <field name="NUM">9</field>
            </shadow>
          </value>
        </block>
        <block type="math_trig">
          <value name="NUM">
            <shadow type="math_number">
              <field name="NUM">45</field>
            </shadow>
          </value>
        </block>
        <block type="math_constant"></block>
        <block type="math_number_property">
          <value name="NUMBER_TO_CHECK">
            <shadow type="math_number">
              <field name="NUM">0</field>
            </shadow>
          </value>
        </block>
        <block type="math_round">
          <value name="NUM">
            <shadow type="math_number">
              <field name="NUM">3.1</field>
            </shadow>
          </value>
        </block>
        <block type="math_on_list"></block>
        <block type="math_modulo">
          <value name="DIVIDEND">
            <shadow type="math_number">
              <field name="NUM">64</field>
            </shadow>
          </value>
          <value name="DIVISOR">
            <shadow type="math_number">
              <field name="NUM">10</field>
            </shadow>
          </value>
        </block>
        <block type="math_constrain">
          <value name="VALUE">
            <shadow type="math_number">
              <field name="NUM">50</field>
            </shadow>
          </value>
          <value name="LOW">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
          <value name="HIGH">
            <shadow type="math_number">
              <field name="NUM">100</field>
            </shadow>
          </value>
        </block>
        <block type="math_random_int">
          <value name="FROM">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
          <value name="TO">
            <shadow type="math_number">
              <field name="NUM">100</field>
            </shadow>
          </value>
        </block>
        <block type="math_random_float"></block>
        <block type="math_atan2">
          <value name="X">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
          <value name="Y">
            <shadow type="math_number">
              <field name="NUM">1</field>
            </shadow>
          </value>
        </block>
      </category>
      <category name="Text" categorystyle="text_category">
        <block type="text"></block>
        <block type="text_join"></block>
        <block type="text_append">
          <value name="TEXT">
            <shadow type="text"></shadow>
          </value>
        </block>
        <block type="text_length">
          <value name="VALUE">
            <shadow type="text">
              <field name="TEXT">abc</field>
            </shadow>
          </value>
        </block>
        <block type="text_isEmpty">
          <value name="VALUE">
            <shadow type="text">
              <field name="TEXT"></field>
            </shadow>
          </value>
        </block>
        <block type="text_indexOf">
          <value name="VALUE">
            <block type="variables_get">
              <field name="VAR">text</field>
            </block>
          </value>
          <value name="FIND">
            <shadow type="text">
              <field name="TEXT">abc</field>
            </shadow>
          </value>
        </block>
        <block type="text_charAt">
          <value name="VALUE">
            <block type="variables_get">
              <field name="VAR">text</field>
            </block>
          </value>
        </block>
        <block type="text_getSubstring">
          <value name="STRING">
            <block type="variables_get">
              <field name="VAR">text</field>
            </block>
          </value>
        </block>
        <block type="text_changeCase">
          <value name="TEXT">
            <shadow type="text">
              <field name="TEXT">abc</field>
            </shadow>
          </value>
        </block>
        <block type="text_trim">
          <value name="TEXT">
            <shadow type="text">
              <field name="TEXT">abc</field>
            </shadow>
          </value>
        </block>
        <block type="text_print">
          <value name="TEXT">
            <shadow type="text">
              <field name="TEXT">abc</field>
            </shadow>
          </value>
        </block>
        <block type="text_prompt_ext">
          <value name="TEXT">
            <shadow type="text">
              <field name="TEXT">abc</field>
            </shadow>
          </value>
        </block>
      </category>
      <category name="Lists" categorystyle="list_category">
        <block type="lists_create_with">
          <mutation items="0"></mutation>
        </block>
        <block type="lists_create_with"></block>
        <block type="lists_repeat">
          <value name="NUM">
            <shadow type="math_number">
              <field name="NUM">5</field>
            </shadow>
          </value>
        </block>
        <block type="lists_length"></block>
        <block type="lists_isEmpty"></block>
        <block type="lists_indexOf">
          <value name="VALUE">
            <block type="variables_get">
              <field name="VAR">list</field>
            </block>
          </value>
        </block>
        <block type="lists_getIndex">
          <value name="VALUE">
            <block type="variables_get">
              <field name="VAR">list</field>
            </block>
          </value>
        </block>
        <block type="lists_setIndex">
          <value name="LIST">
            <block type="variables_get">
              <field name="VAR">list</field>
            </block>
          </value>
        </block>
        <block type="lists_getSublist">
          <value name="LIST">
            <block type="variables_get">
              <field name="VAR">list</field>
            </block>
          </value>
        </block>
        <block type="lists_split">
          <value name="DELIM">
            <shadow type="text">
              <field name="TEXT">,</field>
            </shadow>
          </value>
        </block>
        <block type="lists_sort"></block>
      </category>
      <sep></sep>
      <category
        name="Variables"
        categorystyle="variable_category"
        custom="VARIABLE"></category>
      <category
        name="Functions"
        categorystyle="procedure_category"
        custom="PROCEDURE"></category>
    </xml>
  </body>
</html>