eblock
/
index.html

<!DOCTYPE html>
<html lang="zh">

<!--  by 白篮
    rewrite by AlbertZ-->

<head>
    <title>易块编辑器</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="core.js"></script>
    <script src="block.js"></script>
    <script src="javascript_compressed.js"></script>
    <script src="python_compressed.js"></script>
    <script src="zh-hans.js"></script>
    <script src="lan-block.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/styles/default.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>

</head>

<body>
    <div class="overlay" style="display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 999;"></div>
    <popup style="display: none; position: absolute; overflow: auto; top: calc(50% - 80% / 2 - 1%); left: calc(50% - 60% / 2); width: 60%; height: 80%; background-color: #fefefe; z-index: 1000;">
        <a style="font-size: 40px; text-decoration: none; position: absolute; color: #101010; top: 0.8%; right: 2%;" href="javascript:closePopup();" class="btn-close">×</a>
        <pre style="height: calc(100% - 60px); max-width: 100%; white-space: pre-wrap; word-wrap: break-word;"><code style="font-size: 18px; font-family: Courier New; display: block; margin-top: 50px; height: 100%; padding: 30px; overflow: auto; word-wrap: break-word; max-width: 100%; white-space: pre-wrap;"></code></pre>
    </popup>
    <div class="mdui-appbar">
        <div class="mdui-tab mdui-color-grey-800" mdui-tab>
            <a href="javascript:;" class="mdui-typo-title">易块编辑器 测试版</a>
            <div class="mdui-toolbar-spacer"></div>
        </div>
    </div>
    <small>&nbsp;</small>
    <div class="div">
        <button class="mdui-btn mdui-ripple mdui-color-grey-200" onclick="showjs()">生成js</button>
        <button class="mdui-btn mdui-ripple mdui-color-grey-200" onclick="showpy()">生成py</button>
        <button class="mdui-btn mdui-btn-icon" onclick="runCode()"><i class="mdui-icon material-icons">play_arrow</i></button>
    </div>
    <p4>&nbsp;</p4>
    <div id="blocklyDiv" style="height: 700px; width: 1600px;">
        <!-- 定义编辑器主题大小 -->
        <xml id="toolbox" style="display: none">
            <category name="逻辑" colour="%{BKY_LOGIC_HUE}">
                <!-- 一堆代码盒 -->
                <block type="controls_if">
                </block>
                <block type="controls_if">
                    <mutation else="1"></mutation>
                </block>
                <block type="controls_if">
                    <mutation elseif="1" else="1"></mutation>
                </block>
            </category>
            <category name="布尔逻辑" colour="%{BKY_LOGIC_HUE}">
                <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="循环" colour="%{BKY_LOOPS_HUE}">
                <block type="controls_repeat_ext">
                    <value name="TIMES">
                        <shadow type="math_number">
                            <field name="NUM">
                                10
                            </field>
                        </shadow>
                    </value>
                </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="计算" colour="%{BKY_MATH_HUE}">
                <block type="math_number">
                    <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>
            </category>
            <category name="文本" colour="%{BKY_TEXTS_HUE}">
                <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">文本</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">文本</field>
                        </block>
                    </value>
                </block>
                <block type="text_getSubstring">
                    <value name="STRING">
                        <block type="variables_get">
                            <field name="VAR">文本</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="列表" colour="%{BKY_LISTS_HUE}">
                <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">列表</field>
                        </block>
                    </value>
                </block>
                <block type="lists_getIndex">
                    <value name="VALUE">
                        <block type="variables_get">
                            <field name="VAR">列表</field>
                        </block>
                    </value>
                </block>
                <block type="lists_setIndex">
                    <value name="LIST">
                        <block type="variables_get">
                            <field name="VAR">列表</field>
                        </block>
                    </value>
                </block>
                <block type="lists_getSublist">
                    <value name="LIST">
                        <block type="variables_get">
                            <field name="VAR">列表</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>
            <category name="色彩" colour="%{BKY_COLOUR_HUE}">
                <block type="colour_picker">
                </block>
                <block type="colour_random">
                </block>
                <block type="colour_rgb">
                    <value name="RED">
                        <shadow type="math_number">
                            <field name="NUM">
                                100
                            </field>
                        </shadow>
                    </value>
                    <value name="GREEN">
                        <shadow type="math_number">
                            <field name="NUM">
                                50
                            </field>
                        </shadow>
                    </value>
                    <value name="BLUE">
                        <shadow type="math_number">
                            <field name="NUM">
                                0
                            </field>
                        </shadow>
                    </value>
                </block>
                <block type="colour_blend">
                    <value name="COLOUR1">
                        <shadow type="colour_picker">
                            <field name="COLOUR">
                                #ff0000
                            </field>
                        </shadow>
                    </value>
                    <value name="COLOUR2">
                        <shadow type="colour_picker">
                            <field name="COLOUR">
                                #3333ff
                            </field>
                        </shadow>
                    </value>
                    <value name="RATIO">
                        <shadow type="math_number">
                            <field name="NUM">
                                0.5
                            </field>
                        </shadow>
                    </value>
                </block>
            </category>
            <category name="输入" colour="%{BKY_TEXTS_HUE}">
                <block type="text"></block>
                <block type="text_prompt_ext">
                    <value name="TEXT">
                        <shadow type="text">
                            <field name="TEXT">输入</field>
                        </shadow>
                    </value>
                </block>
            </category>
            <category name="海龟" colour="%{BKY_TEXTS_HUE}">
                <block type="draw_move"></block>
                <block type="draw_turn"></block>
                <block type="draw_shape"></block>
                <block type="draw_pen"></block>
                <block type="draw_color"></block>
                <block type="draw_write"></block>
                <block type="draw_circle"></block>
                <block type="draw_stamp"></block>
                <block type="begin_fill"></block>
                <block type="end_fill"></block>
                <block type="goto"></block>
                <block type="draw_speed"></block>
                <block type="draw_pos"></block>
            </category>
            <sep></sep>
            <category name="easygui" colour="120">
                <label text="两个第三方块不能同时使用！"></label>
                <block type="eb-halloworld"></block>
                <block type="eb-halloworld-1"></block>
                <block type="savebox"></block>
                <block type="fileopenbox"></block>
                <block type="codebox"></block>
                <block type="passwordbox"></block>
                <block type="boolbox"></block>
                <label text="正在更新中"></label>
            </category>
            <category name="box3常用" colour="270">
                <label text="两个第三方块不能同时使用！"></label>
                <block type="box31"></block>
                <block type="box32"></block>
                <block type="box33"></block>
                <block type="box34"></block>
                <block type="box35"></block>
                <block type="box36"></block>
                <block type="box37"></block>
                <block type="box38"></block>
                <label text="代码贡献：ZNS卿本尊"></label>
            </category>
            <sep></sep>
            <category name="变量" colour="%{BKY_VARIABLES_HUE}" custom="VARIABLE">
            </category>
            <category name="函数" colour="%{BKY_PROCEDURES_HUE}" custom="PROCEDURE">
            </category>
        </xml>
    </div>
    <!-- 以上是编辑器 -->
    <script>
        hljs.highlightAll();
        var demoWorkspace = Blockly.inject('blocklyDiv', {
            toolbox: document.getElementById('toolbox')
        });
        //定义toolbox
        Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'), demoWorkspace);
        var demoWorkspace = Blockly.inject('blocklyDiv', {
            toolbox: document.getElementById('toolbox')
        });
        //定义toolbox里面的block为既定var
        function showjs() {
            Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
            var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
            //让varcode等于上面定义的东西
            showPopup(code, 'language-javascript');
            mdui.snackbar({
                message: '代码已经生成，如果没有代码弹出框请反馈给编辑器作者'
            });
        }

        function showpy() {
            Blockly.Python.INFINITE_LOOP_TRAP = true;
            var code = Blockly.Python.workspaceToCode(demoWorkspace);
            //让varcode等于上面定义的东西
            showPopup(code, 'language-python');
            mdui.snackbar({
                message: '代码已经生成，如果没有代码弹出框请反馈给编辑器作者'
            });
        }

        function lan() {
            window.open("http://doutianyang.me");
        }

        function showPopup(code, type) {
            var popup = document.getElementsByTagName('popup')[0];
            var overlay = document.getElementsByClassName('overlay')[0];
            var textarea = popup.getElementsByTagName('code')[0];
            overlay.style.display = 'block';
            popup.style.display = "table";
            textarea.className = type;
            textarea.innerHTML = code;
            hljs.highlightAll()
        }

        function closePopup() {
            var popup = document.getElementsByTagName('popup')[0];
            var overlay = document.getElementsByClassName('overlay')[0];
            overlay.style.display = 'none';
            popup.style.display = "none";
        }

        function runCode() {
            window.LoopTrap = 1000;
            Blockly.JavaScript.INFINITE_LOOP_TRAP =
                'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
            var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
            //还是var
            Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
            try {
                eval(code);
                mdui.snackbar({
                    message: '代码已经运行，如果没有代码弹出框请反馈给编辑器作者'
                });
            } catch (e) {
                alert(e);
                mdui.snackbar({
                    message: '运行错误'
                });
                }
            }
    </script>
</body>

</html>