sandbox/step_wires.html from neyric/wireit

sandbox/step_wires.html
Summary

Maintainability

Test Coverage

Issues
<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, Creating Terminals and Wires.</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>

<script type="text/javascript" src="../lib/excanvas.js"></script>

<!-- WireIt -->
<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
<script src="../src/loader.js"  type='text/javascript'></script>



<style>
div.blockBox {
    /* WireIt */
    position: absolute;
    z-index: 5;
    opacity: 0.8;
    filter: alpha(opacity = 80);
    
    /* Others */
    width: 50px;
    height: 380px;
    background-color: rgb(255,200,200);
}

div.WireIt-Terminal {
    margin: 20px 8px;
}


#blockTop div.WireIt-Terminal, #blockBottom div.WireIt-Terminal {
    margin: 8px;
    float: left;
}

</style>
<script>

Y.WireIt.defaultWireClass = "WireIt.StepWire";

window.onload = function() {
    
    var bl = Y.one('#blockLeft');
    var br = Y.one('#blockRight');
    var bt = Y.one('#blockTop');
    var bb = Y.one('#blockBottom');
    
    for( var i = 0 ; i < 7 ; i++) {
        new Y.Terminal(bl, {direction: [1,0], offsetPosition:[0,i*50] });
        new Y.Terminal(br, {direction: [-1,0], offsetPosition:[0,i*50] });
        new Y.Terminal(bt, {direction: [0,1], offsetPosition:[i*50,0] });
        new Y.Terminal(bb, {direction: [0,-1], offsetPosition:[i*50,0] });
    }
    
};
</script>

 </head>
 <body>
    <p style="margin: 30px;"><a href="../index.html">&lt; Back</a></p>
    <p style="margin: 30px;">This example demonstrates how to create Terminals.</p>
    <p style="margin: 30px;">Try to create some wires by drag'n drop on the terminals. Click on the scissor to delete them.</p>
    
    <div id='blockLeft' class="blockBox" style="top: 150px; left: 200px;">
    </div>
    
    <div id='blockRight'  class="blockBox"  style="top: 150px; left: 400px;">
    </div>
    
    
    <div id='blockTop' class="blockBox" style="width: 380px; height: 50px; top: 150px; left: 600px;">
    </div>
    
    <div id='blockBottom'  class="blockBox"  style="width: 380px; height: 50px; top: 350px; left: 600px;">
    </div>

 </body>
</html>