Commits

Gregory Petukhov committed afea92f

Add delete page feature

Comments (0)

Files changed (2)

 
         #map {
             position: relative;
-            width: 500px;
+            width: 700px;
             height: 90%;
+            /*border: 1px solid red;*/
+        }
+
+        .trash-button {
+            position: absolute;
+            bottom: 5px;
+            right: 15px;
+            color: white;
+            background-color: #c33;
+            line-height: 10px;
+            font-size: 12px;
+            padding: 2px;
+        }
+
+        .trash-button:hover {
+            color: yellow;
+            text-decoration: none;
+        }
+
+        .transparent-endpoint {
+            background-color: blue;
         }
     </style>
 
 <script src="static/bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
 <script type="text/javascript" src="static/jsplumb-1.3.16/js/jquery.jsPlumb-1.3.16-all.js"></script>
-<script type="text/javascript" src="static/js/util.js"></script>
+<script type="text/javascript" src="static/js/util.js?2"></script>
 </head>
 <body>
 <div class="navbar navbar-inverse navbar-fixed-top">
         <div class="span8">
             <div id="map">
             </div>
-            &nbsp;
         </div>
         <div class="span2">
             <h3>Credits</h3>

static/js/util.js

 //function getRandomInt(min, max) {
   //return Math.floor(Math.random() * (max - min + 1)) + min;
 //}
+//
+function filter_array(array, value) {
+    new_values = []
+    $.each(array, function(idx, new_value) {
+        if (new_value != value) {
+            new_values[new_values.length] = new_value;
+        }
+    });
+    return new_values;
+}
 
 function makeConnection(res) {
     var cid = res.sourceId + res.targetId;
                 ['Arrow', {'location': 1}],
             ],
             paintStyle: {strokeStyle: color, lineWidth: 3},
-            endpointStyle: {fillStyle: '#c33', radius: 3},
+            endpointStyle: {fillStyle: '#c33', radius: 5},
         });
 
         if ($('input[name="auto-calc"]:checked').length) {
     }
 }
 
+function breakConnection(res) {
+    var cid = res.sourceId + res.targetId;
+    delete connections[cid];
+    var page = pageRegistry[res.sourceId];
+    page.links = filter_array(page.links, res.targetId);
+    refreshSidebarLinks();
+    if ($('input[name="auto-calc"]:checked').length) {
+        calculatePageRank();
+    }
+}
+
 function createNewPage() {
     pageCounter += 1;
 
     var node = $(
         '<div class="box" id="' + page.id + '">' + 
         '<span class="name">' + pid + '</span>' + 
-        '<span class="pr">1<span>' + 
+        '<span class="pr">1</span>' + 
+        '<a onclick="deletePage(\'' + page.id + '\'); return false;" href="#" class="trash-button">x</a>' + 
         '</div>'
     );
     node.css('left', initialOffset[0]);
             radius: 10,
             fillStyle: '#666',
         },
-        anchor: [0.9, 0.5, 0, 0],
+        anchor: [0.9, 0.3, 0, 0],
         beforeDrop: function(res) {
             makeConnection(res);
-        },
+        }
     }
     var ep = jsPlumb.addEndpoint(pid, options); 
 
 
 function resetAll() {
     $.each(pageRegistry, function(pid, page) {
-        jsPlumb.deleteEveryEndpoint(pid);
-        $('#' + pid).remove();
+        deletePage(pid);
     });
-    pageRegistry = {}
     pageCounter = 0;
-    connections = {};
     initialOffset = [0, 0];
 }
 
+function deletePage(pid) {
+    jsPlumb.removeAllEndpoints(pid);
+    $('#' + pid).remove();
+    delete pageRegistry[pid];
+    $.each(connections, function(idx, conn) {
+        if (conn.dst == pid) {
+            var page = pageRegistry[conn.src];
+            page.links = filter_array(page.links, pid);
+        }
+        if (conn.src == pid || conn.dst == pid) {
+            delete connections[idx];
+        }
+    });
+    calculatePageRank();
+}
+
 $(function() {
+    jsPlumb.bind('jsPlumbConnectionDetached', function(res) {
+        var cid = res.sourceId + res.targetId;
+        if (typeof(connections[cid]) != "undefined") {
+            breakConnection(res);
+        }
+    });
     p1 = createNewPage();
     p2 = createNewPage();
     makeConnection({'sourceId': p1.id, 'targetId': p2.id})