neyric/wireit

View on GitHub
sandbox/editor-examples/ajaxAdapter/index.html

Summary

Maintainability
Test Coverage
<!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 using Ajax Adapter</title>

<!-- YUI -->
<!-- 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>



<!-- Libs -->

<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/ajax.js"></script>
<script type="text/javascript" src="../WiringEditor/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>

YUI_config.groups.wireit.base = '../src/';
YUI({filter: 'raw', combine: false}).use('wire', 'bezier-wire', 'terminal', function(Y) {
    
    try {
    
    
    Y.WiringEditor.adapters.Ajax.config =     {
        saveWiring: {
            method: 'GET',
            url: 'fakeSaveDelete.json'
        },
        deleteWiring: {
            method: 'GET',
            url: function(value) {
                if(console && console.log) {
                    console.log(value);
                }
                // for a REST query you might want to send a DELETE /resource/wirings/moduleName
                return "fakeSaveDelete.json";
            }
        },
        listWirings: {
            method: 'GET',
            url: 'listWirings.json'
        }
    };
        
    demoLanguage.adapter = Y.WiringEditor.adapters.Ajax;
    
    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">Ajax Adapter</a></div>
        <div id="toolbar"></div>
        <div class="topright">
            <span>Hello there !</span> | 
            <a href="../..">back to WireIt</a>
        </div>
    </div>


    <div id="left">
    </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>Uses Ajax Adapter</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>Uses Ajax Adapter</p>
        </div>
    </div>

</body>
</html>