index.html 3.44 KB
Newer Older
Adam Feuer's avatar
Adam Feuer committed
1 2 3 4 5 6 7 8
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="foundation.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="d3-context-menu.css" />
</head>
<body>
Adam Feuer's avatar
Adam Feuer committed
9 10
        <div id="RenameNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
          <h2 id="modalTitle">Rename Node</h2>
11
          <form id="RenameNodeForm">
Adam Feuer's avatar
Adam Feuer committed
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
            <div class="row">
              <div class="large-12 columns">
                <label>Node name
                  <input type="text" class="inputName" id='RenameNodeName' placeholder="node name" />
                </label>
              </div>
            </div>
            <div class="row">
              <div class="large-8 columns">
                &nbsp;
              </div>
              <div class="large-4 columns">
                <a href="#" class="button info" onclick="close_rename_node_modal()">Cancel</a>
                <a href="#" class="button success" onclick="rename_node()">Rename</a>
              </div>
            </div>
          </form>
          <a class="close-reveal-modal" aria-label="Close">&#215;</a>
        </div>

Adam Feuer's avatar
Adam Feuer committed
32 33
        <div id="CreateNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
          <h2 id="modalTitle">Create Node</h2>
34
          <form id="CreateNodeForm">
Adam Feuer's avatar
Adam Feuer committed
35 36 37
            <div class="row">
              <div class="large-12 columns">
                <label>Node name
Adam Feuer's avatar
Adam Feuer committed
38
                  <input type="text" class="inputName" id='CreateNodeName' placeholder="node name" />
Adam Feuer's avatar
Adam Feuer committed
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
                </label>
              </div>
            </div>
            <div class="row">
              <div class="large-8 columns">
                &nbsp;
              </div>
              <div class="large-4 columns">
                <a href="#" class="button info" onclick="close_create_node_modal()">Cancel</a>
                <a href="#" class="button success" onclick="create_node()">Create</a>
              </div>
            </div>
          </form>
          <a class="close-reveal-modal" aria-label="Close">&#215;</a>
        </div>

        <div id="tree-container"></div>

Adam Feuer's avatar
Adam Feuer committed
57
        <script src="d3.v3.min.js"></script>
Adam Feuer's avatar
Adam Feuer committed
58 59 60 61 62 63 64
        <script src="dndTree.js"></script>
        <script src="d3-context-menu.js"></script>
        <script src="underscore-min.js"></script>
        <script src="jquery.js"></script>
        <script src="fastclick.js"></script>
        <script src="foundation.min.js"></script>
        <script>
65 66 67 68 69 70 71 72 73
                // for the first initialization
                $('document').ready(function(){
                    $(document).foundation();
                    $(document).on('opened', '[data-reveal]', function () {
                        var element = $(".inputName:visible").first();
                        element.focus(function(){
                            this.selectionStart = this.selectionEnd = this.value.length;
                        });
                        element.focus();
Adam Feuer's avatar
Adam Feuer committed
74
                    });
75 76 77 78 79 80 81 82
                    $('#RenameNodeForm').submit(function(e){
                            rename_node();
                            return false;
                    });
                    $('#CreateNodeForm').submit(function(e){
                            create_node();
                            return false;
                    });
83
                    var treeJSON = d3.json("tree.json", draw_tree);
84
                });
Adam Feuer's avatar
Adam Feuer committed
85 86 87 88
        </script>
</body>
</html>