mirror of
https://github.com/google/blockly.git
synced 2026-01-10 02:17:09 +01:00
166 lines
4.1 KiB
HTML
166 lines
4.1 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<script type="text/javascript" src="../../../../blockly_uncompressed.js"></script>
|
|
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
|
|
<script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.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="../scratchblocks/">Scratch-Blocks</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>PXT-Blockly Rendering</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<iframe id="zelos" src="./zelos.html"></iframe>
|
|
</div>
|
|
<div class="col">
|
|
<iframe id="pxtblockly" src="./pxtblockly.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="pxtblocklyout">
|
|
<h2>PXT-Blockly Rendering</h2>
|
|
<img id="pxtblocklyoutput" class="output" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var pxtblockly = document.getElementById('pxtblockly');
|
|
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('pxtblocklyout').style.display = 'none';
|
|
setInterval(function () {
|
|
if (!pause) {
|
|
document.getElementById(current + 'out').style.display = 'none';
|
|
current = current == 'zelos' ? 'pxtblockly' : 'zelos';
|
|
document.getElementById(current + 'out').style.display = 'block';
|
|
}
|
|
}, 1000);
|
|
|
|
pxtblockly.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>`;
|
|
pxtblockly.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> |