sandbox/editor-examples/WiringEditor/index.html from neyric/wireit

sandbox/editor-examples/WiringEditor/index.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>WireIt - WiringEditor</title>

<!-- YUI -->
<link rel="stylesheet" href="https://yui-s.yahooapis.com/combo?3.6.0/build/cssreset/reset-min.css&3.6.0/build/cssfonts/fonts-min.css">
<script src="https://yui-s.yahooapis.com/3.6.0/build/yui/yui.js"></script>

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../../inputex/lib/inputex/css/inputEx.css' />

<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../../../assets/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../assets/WireItEditor.css" />

<style>
div.WireIt-Container {
    width: 350px; /* Prevent the modules from scratching on the right */
}

div.WireIt-InOutContainer {    
    width: 150px;
}

div.WireIt-InputExTerminal {
    float: left;
    width: 21px;
    height: 21px;
    position: relative;
}
div.WireIt-InputExTerminal div.WireIt-Terminal {
    top: -3px;
    left: -7px;
}
div.inputEx-Group div.inputEx-label {
    width:100px;
}

div.WireIt-ImageContainer {
    width: auto;
}

div.Bubble div.body {
    width: 70px;
    height: 45px;
    opacity: 0.8;
    cursor: move;
}

.WiringEditor-module span {
    position: relative;
    top: -3px;
}

</style>


<!-- YUI -->
<script src="../../lib/accordionview/accordionview-min.js"  type='text/javascript'></script>
<script type="text/javascript" src="../../../../lib/excanvas.js"></script>


<!-- WireIt -->
<script type="text/javascript" src="../../../../build/wireit-inputex-editor-min.js"></script>

<script type="text/javascript" src="../../js/adapters/json-rpc.js"></script>
<script type="text/javascript" src="demo.js"></script>


<style>
/* Comment Module */
div.WireIt-Container.WiringEditor-module-comment { width: 200px; }
div.WireIt-Container.WiringEditor-module-comment div.body { background-color: #EEEE66; }
div.WireIt-Container.WiringEditor-module-comment div.body textarea { background-color: transparent; font-weight: bold; border: 0; }
</style>


<script>

Y.Terminal.prototype.wireConfig = {
                   label: 'Ouf !!',
                   labelEditor: {type: 'string', value: "Testst"},                    
                   xtype: "Y.BezierWire"
       };
       Y.Terminal.prototype.editingWireConfig = Y.Terminal.prototype.wireConfig;


YUI_config.groups.wireit.base = '../src/';
YUI({filter: 'raw', combine: false}).use('wire', 'bezier-wire', 'terminal', function(Y) {

    try {
        var editor = new Y.WiringEditor(demoLanguage); 
        
        // Open the infos panel
        editor.accordionView.openPanel(2);
    }
    catch(ex) {
        console.log(ex);
    }
});

</script>

</head>

<body class="yui-skin-sam">

    <div id="top">
        <div class="logo">WiringEditor</a></div>
        <div id="toolbar"></div>
        <div class="topright">
            <span>Hello there !</span> | 
            <a href="../..">back to WireIt</a>
        </div>
    </div>


    <div id="left">
        
         <ul id="modulesAccordionView">
            <li>
                <h2>Main</h2>
                <div>
                    <div id='module-category-main'></div>
                </div>
            </li>
            
            <li>
                <h2>Form Modules</h2>
                <div>
                    <div id='module-category-form'></div>
                </div>
            </li>
            
            <li>
                <h2>Image Modules</h2>
                <div>
                    <div id='module-category-images'></div>
                </div>
            </li>
        </ul>
        
    </div>
    
    <div id="right">
      <ul id="accordionView">
        <li>
            <h2>Properties</h2>
            <div>
                <div id="propertiesForm"></div>
            </div>
        </li>
        <li>
            <h2>Minimap</h2>
            <div style='position: relative;'>
                <div id="layerMap"></div>
            </div>
        </li>
        <li>
            <h2>Infos</h2>
            <div>
                <div style="padding: 10px;">
                    <p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
                    <br />
                    <p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
                    <br />
                    <p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
                </div>
            </div>
        </li>
        
      </ul>
    </div>

    <div id="center">
    </div>
    
    
    <div id="helpPanel">
        <div class="hd">Welcome to the WiringEditor demonstration</div>
        <div class="bd" style="text-align: left;">
                    
                    <p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
                    <br />
                    <p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
                    <br />
                    <p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
                    <br />
                    <p>Close this dialog to test the WiringEditor</p>
        </div>
    </div>

</body>
</html>