PHP File Manager

File "index.html"
Full path: /usr/home/mndrn/domains/mndrn.ru/public_html/block-hill/blockly/tests/rendering/zelos/scratchblocks/index.html
File size: 4.09 KiB (4188 bytes)
MIME-type: text/html
Charset: utf-8
Download Open Back
<html>

<head>
  <script type="text/javascript" src="../../../../blockly_uncompressed.js"></script>
  <script type="text/javascript"
    src="https://unpkg.com/[email protected]/blocks_compressed_vertical.js"></script>
  <style>
    html,
    body {
      margin: 0;
    }

    #frames {
      position: absolute;
      width: 100%;
      height: calc(100% - 3rem);
      bottom: 0;
    }

    #frames .row {
      position: relative;
      display: flex;
      flex-direction: row;
    }

    #frames .col {
      flex: 1;
      width: 100%;
      height: 100%;
    }

    #frames .col h2 {
      text-align: center;
    }

    #frames iframe {
      border: 0;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 300px;
    }

    .output {
      max-height: 300px;
      max-width: 100%;
    }
  </style>
</head>

<body>
  <select id="selector">
  </select>
  <a href="../pxtblockly/">PXT-Blockly</a>
  <script>
    var selector = document.getElementById('selector');
    for (var blockId in Blockly.Blocks) {
      if (!Object.keys(Blockly.Blocks[blockId]).length) continue;
      var option = document.createElement('option');
      option.value = blockId;
      option.textContent = blockId;
      selector.appendChild(option);
    }
  </script>
  <div id="frames">
    <div class="row">
      <div class="col">
        <h2>Zelos Rendering</h2>
      </div>
      <div class="col">
        <h2>Scratch-Blocks Rendering</h2>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <iframe id="zelos" src="./zelos.html"></iframe>
      </div>
      <div class="col">
        <iframe id="scratchblocks" src="./scratchblocks.html"></iframe>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div id="zelosout">
          <h2>Zelos Rendering</h2>
          <img id="zelosoutput" class="output" />
        </div>
        <div id="scratchblocksout">
          <h2>Scratch-Blocks Rendering</h2>
          <img id="scratchblocksoutput" class="output" />
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    var scratchblocks = document.getElementById('scratchblocks');
    var zelos = document.getElementById('zelos');
    var selector = document.getElementById('selector');
    var hash = document.location.hash;
    if (hash) {
      selector.value = hash.substring(1);
    }

    window.addEventListener('message', function (msg) {
      var data = msg.data;
      if (data.type === 'svg') {
        var output = document.getElementById(data.from + 'output');
        output.src = data.text;
      }
    });

    var current = 'zelos';
    var pause = false;
    document.getElementById('scratchblocksout').style.display = 'none';
    setInterval(function () {
      if (!pause) {
        document.getElementById(current + 'out').style.display = 'none';
        current = current == 'zelos' ? 'scratchblocks' : 'zelos';
        document.getElementById(current + 'out').style.display = 'block';
      }
    }, 1000);

    scratchblocks.addEventListener('load', function () {
      updateWorkspaces(selector.value);
    });

    zelos.addEventListener('load', function () {
      updateWorkspaces(selector.value);
    });

    selector.addEventListener('change', function (e) {
      updateWorkspaces(e.target.value);
    });

    function updateWorkspaces(testCase) {
      window.location.hash = testCase;
      var xml = `<xml xmlns="https://developers.google.com/blockly/xml">
  <block type="${testCase}"></block>
</xml>`;
      scratchblocks.contentWindow.postMessage({
        type: 'post',
        xml: xml
      }, '*');
      zelos.contentWindow.postMessage({
        type: 'post',
        xml: xml
      }, '*');
    }

    document.addEventListener('keydown', function (e) {
      if (e.keyCode === 37) {
        selector.selectedIndex = selector.selectedIndex - 1;
        updateWorkspaces(selector.value);
      } else if (e.keyCode === 39) {
        selector.selectedIndex = selector.selectedIndex + 1;
        updateWorkspaces(selector.value);
      } else if (e.keyCode === 32) {
        pause = !pause;
      }
    });

  </script>
</body>

</html>