app-examples/wireit-app/index.html from neyric/wireit

app-examples/wireit-app/index.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>WireIt App demo</title>
    <meta name="description" content="An Example for the WireIt">
    <meta name="author" content="Eric Abouaf">

    <!-- Bootstrap -->
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
      
      body {
          margin-top: 60px;
      }
    
    .yui3-layer-content {
        border: 1px solid black;
        overflow: scroll;
    }
    
    ul.containerTypes {
        list-style: none;
        margin: 0;
    }
    ul.containerTypes li {
        margin: 2px;
        padding: 2px;
        border-radius: 3px;
        border: 1px solid #ccc;
        background-color: #ddd;
        cursor: move;
    }
    </style>

    <script src="https://yui-s.yahooapis.com/3.17.2/build/yui/yui.js"></script>

    <!--script type="text/javascript" src="../../build/wireit-all/wireit-all-min.js"></script-->
    <!-- The loader is recommanded if you're debugging WireIt (comment the line before) -->
    <script type="text/javascript" src="../../build/wireit-loader/wireit-loader-min.js"></script>

  </head>

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

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
          <span class="navbar-brand">WireIt App example</span>
      </div>
    </div>


<script id="t-editor" type="text/x-handlebars-template">

    <div class="container-fluid">

      <div class="sidebar col-md-3">
        <div class="well">

        <a href="#/" class="btn">&lt;&lt; Wirings List</a>

          <h5 class="no-toc">Container Types</h5>

        <ul class="containerTypes">
        {{#each containerTypes}}
            <li class="containerType yui3-g">
                <div class="containerType-name yui3-u-2-3" app-container-name="{{name}}">{{name}}</div>
            </li>
        {{/each}}
        </ul>

        </div>
      </div>

      <div class="content col-md-9">
        
        <div class="row" id="wireit-app">
            <div class="span16">
                Name: <input id="wiring-name" />
                <a class="btn primary" id="wiring-save-btn">Save</a>
            </div>
            <div class="span16" id="layer-container">
            </div>
        </div>

      </div>

    </div>
</script>

<script id="t-wiring-list" type="text/x-handlebars-template">
    <div class="container">
          <div class="hero-unit">

        <h2 class="no-toc">Wirings</h2>

        <p>Open an existing wiring :</p>

        <ul class="wiring">
        {{#each wirings}}
            <li class="wiring yui3-g">
                <div class="wiring-name yui3-u-2-3"><a href="#/wirings/{{id}}/edit">{{name}}</a></div>
            </li>
        {{/each}}
        </ul>
    
        <a id="wiring-add-link" href="#/wirings/new" class="btn btn-primary">or create a new one</a>
    
        </div>
    </div>
</script>

<script>
YUI_config.groups.wireit.base = '../../build/';

YUI({
    filter: 'raw' // debug
}).use('wireit-app', 'image-container', 'inout-container', 'textarea-container', function (Y) {

    window.Y = Y; //debug

    var containers_definitions = [
            {
                name: "Fetch",
                config: {
                    type: 'ImageContainer',
                    children: Y.WidgetTerminals.FOUR_EDGES,
                    imageUrl: 'http://www.google.fr/images/logos/ps_logo2.png'
                }
            },
            {
                name: "Loop",
                config: {
                    children: Y.WidgetTerminals.EIGHT_POINTS,
                    type: 'Container',
                    headerContent: 'Loop',
                    bodyContent: 'This is a much longer body content'
                }
            },
            {
                name: "InOutDemo",
                config: {
                    type: 'InOutContainer',
                    headerContent: 'In/Out',
                    inputs: [
                        {
                            label: 'Input A',
                            name: 'A'
                        },
                        {
                            label: 'Input B',
                            name: 'B'
                        }
                    ],
                    outputs: [
                        {
                            label: 'Output C',
                            name: 'C'
                        },
                        {
                            label: 'Output D',
                            name: 'D'
                        }
                    ]
                }
            },
            {
                name: "TextArea Demo",
                config: {
                    children: Y.WidgetTerminals.FOUR_EDGES,
                    type: 'TextareaContainer',
                    headerContent: 'Textarea'
                }
            }
        ];

    var wirings = new Y.WiringModelList();
    wirings.load();
    
    Y.wireitApp = new Y.WireItApp({
        // We force this to false for this example app because there is no server.
        serverRouting: false,
        containerTypes: new Y.ContainerTypeList({
            items: containers_definitions
        }),
        modelList: wirings
    });

    Y.wireitApp.render();

});
</script>

  </body>
</html>