blockly and jquery (easyui) integration

289 views

Skip to first unread message

Frédéric Clement

unread,

May 18, 2016, 3:07:33 AM5/18/16

to Blockly

Hi, I am trying to integrate jquery easyui and blockly.
What I have, is a "tabs" object and one of the tabs is supposed to content the blockly div and associated menu.

The header of my main page is :

    <head>
        <meta charset="utf-8">
        <title>Intranet</title>
        <meta name="robots" content="noindex, nofollow">
        <link rel="stylesheet" href="css/menu.css"/>
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

        <script type="text/javascript" src="blockly/blockly_compressed.js"></script>
        <script type="text/javascript" src="blockly/msg/js/fr.js"></script>
        <script type="text/javascript" src="blockly/blocks_compressed.js"></script>
        <script type="text/javascript" src="blockly/lua_compressed.js"></script>
        <script type="text/javascript" src="code.js"></script>
        <script src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="js/main.js?<?php time(null) ?>"></script>
    </head>

in my main page, I have a tabs object :

<div id="maintabs" class="easyui-tabs" style="background-color:blue" data-options="height:800">
        <div id="tab-accueil" title="Accueil" style="padding:20px;display:none;height:100%">
        </div>
        <div id="tab-customers" title="Clients" style="padding:20px;display:none;">
        </div>
        <div id="tab-scripts" title="Scripts" style="padding:20px;display:none;">
        </div>
        <div id="tab-modules" title="Modules" style="padding:20px;display:none;">
        </div>
</div>

the pages of every tab are loaded through a JS script :

INTERFACE = {};

INTERFACE.Init = function() {
    this.InitTabModules();
}

INTERFACE.InitTabModules = function()   {
    $('#tab-modules').load("modules/index.php",
        function() {
            modules.Init();
        }
    );

    $('#tab-scripts').load("scripts/index.php",
        function() {
            scripts.Init();
        }
    );
    $('#tab-customers').load("customers/index.php",
        function() {
        }
    );
}

the blockly is supposed to be displayed in the #tab-scripts' div.
For that, I am using following JS :

scripts.InitBlockly = function()    {
    var toolbox = document.getElementById('toolbox');
    Code.workspace = Blockly.inject(document.getElementById('blocklyDiv'),
        {
            grid : {
                spacing : 25,
                length : 3,
                colour : '#ccc',
                snap : true
            },
            zoom : {
                controls : true,
                wheel : true,
                startScale : 1.0,
                maxScale : 3,
                minScale : 0.3,
                scaleSpeed : 1.2
            },
            media : '/blockly/media/',
            toolbox : toolbox
        }
    );
}

My problem is that the Menu of blockly and the blockly div sometimes appear and sometimes not.
Another problem is that the menu sometimes stay visible when I switch to another tab.

I would be really very interested if someone succeeded in integrating a blockly div into a jquery Tab.

Fred

Reply all

Reply to author

Forward

0 new messages