rewrite vis using angular directives

temporarily use custom built version of angular-ui-bootstrap
while the fix for angular-ui/bootstrap#387 has not yet been released
with additional patch to support tooltip-placement="mouse"

Author: lanterndev

.travis.yml

@@ -5,7 +5,8 @@ node_js:
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
-  - npm install --quiet -g karma
+  - npm install --quiet -g karma bower
+  - bower install
   - ./scripts/web-server.js > /dev/null &
   - sleep 1 # give server time to start
 

app/_css/app.css

@@ -6407,6 +6407,7 @@ html, body {
 
 body {
   background: url('../img/bg.png');
+  overflow: hidden;
 }
 
 small {
@@ -6496,6 +6497,7 @@ label.checkbox.inline, label.radio.inline {
 
 .tooltip-inner {
   font-size: 12.6px;
+  max-width: none;
 }
 
 .btn-give {
@@ -6778,6 +6780,21 @@ textarea {
   }
 }
 
+.modal {
+  background-color: transparent;
+}
+
+.modal-header, .modal-body:not(#welcome) {
+  background-color: white;
+}
+
+.modal-header {
+  -webkit-border-top-left-radius: 6px;
+  border-top-left-radius: 6px;
+  -webkit-border-top-right-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
 .modal.fade {
   -webkit-transition: opacity 0.3s ease;
   transition: opacity 0.3s ease;
@@ -6876,7 +6893,7 @@ textarea {
 
 #welcome {
   text-align: center;
-  background-color: black;
+  background-color: rgba(0, 0, 0, 0.3);
   color: white;
 }
 #welcome .modal-body {
@@ -7265,6 +7282,14 @@ textarea.report {
   left: 25px;
 }
 
+#vis-block {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 #vis-container, #vis {
   height: 100%;
 }
@@ -7302,6 +7327,14 @@ textarea.report {
   stroke-opacity: 1 !important;
 }
 
+.peer {
+  opacity: 0.4;
+}
+
+.peer.connected {
+  opacity: 1;
+}
+
 .peer.get, #self.get {
   fill: #ffcc66;
 }
@@ -7330,54 +7363,53 @@ g.transferring .connection {
   opacity: 1;
 }
 
-.tooltip.vis .tooltip-inner {
-  max-width: none;
+.tooltip .vis {
   text-align: left;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.tooltip.vis .tooltip-inner .picture {
+.tooltip .vis .picture {
   height: 64px;
   width: 64px;
   margin: 5px 10px 0 0;
 }
-.tooltip.vis .tooltip-inner .picture, .tooltip.vis .tooltip-inner .headers {
+.tooltip .vis .picture, .tooltip .vis .headers {
   float: left;
 }
-.tooltip.vis .tooltip-inner .header {
+.tooltip .vis .header {
   font-weight: bold;
   font-size: 14.7px;
 }
-.tooltip.vis .tooltip-inner .get .header, .tooltip.vis .tooltip-inner .get .type {
+.tooltip .vis .get .header, .tooltip .vis .get .type {
   color: #ffcc66;
 }
-.tooltip.vis .tooltip-inner .give .header, .tooltip.vis .tooltip-inner .give .type {
+.tooltip .vis .give .header, .tooltip .vis .give .type {
   color: #aad092;
 }
-.tooltip.vis .tooltip-inner .unknown .header, .tooltip.vis .tooltip-inner .unknown .type {
+.tooltip .vis .unknown .header, .tooltip .vis .unknown .type {
   color: #eeeeee;
 }
-.tooltip.vis .tooltip-inner .cloud .header, .tooltip.vis .tooltip-inner .laeproxy .header, .tooltip.vis .tooltip-inner .cloud .type, .tooltip.vis .tooltip-inner .laeproxy .type {
+.tooltip .vis .cloud .header, .tooltip .vis .laeproxy .header, .tooltip .vis .cloud .type, .tooltip .vis .laeproxy .type {
   color: green !important;
 }
-.tooltip.vis .tooltip-inner .type {
+.tooltip .vis .type {
   font-size: 10.5px;
 }
-.tooltip.vis .tooltip-inner .peerid, .tooltip.vis .tooltip-inner .id {
+.tooltip .vis .peerid, .tooltip .vis .id {
   font-size: 10.5px;
   color: #999999;
 }
-.tooltip.vis .tooltip-inner .stats {
+.tooltip .vis .stats {
   clear: both;
   font-size: 10.5px;
 }
-.tooltip.vis .tooltip-inner .lastConnected {
+.tooltip .vis .lastConnected {
   font-size: 10.5px;
 }
-.tooltip.vis .tooltip-inner .npeersEver {
+.tooltip .vis .npeersEver {
   color: #999999;
 }
-.tooltip.vis .tooltip-inner .give-colored {
+.tooltip .vis .give-colored {
   color: #aad092;
 }
 

app/index.html

@@ -27,17 +27,25 @@
     <script src="lib/angular/i18n/angular-locale_fa-ir.js"></script>
     <script src="lib/angular/i18n/angular-locale_ar.js"></script>
     -->
+
     <script src="components/angular-ui-utils/modules/if/if.js"></script>
     <script src="components/angular-ui-utils/modules/showhide/showhide.js"></script>
+    <!--
     <script src="components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+    -->
+    <script src="lib/ui-bootstrap-tpls-0.4.0-SNAPSHOT.js"></script>
+
     <!--
     <script src="lib/bootstrap.js"></script>
     <script src="lib/select2/select2.js"></script>
     -->
 
     <script src="components/lodash/lodash.js"></script>
     <script src="components/d3/d3.js"></script>
+    <script src="lib/topojson.js"></script>
+    <!--
     <script src="components/topojson/topojson.js"></script>
+    -->
 
     <script src="js/version.js"></script>
     <script src="js/app.js"></script>

app/js/app.js

@@ -30,9 +30,4 @@ var app = angular.module('app', [
   // angular-ui config
   .value('ui.config', {
     animate: 'ui-hide',
-    jq: {
-      tooltip: {
-        container: 'body'
-      }
-    }
   });

app/js/controllers.js

@@ -220,7 +220,7 @@ function ContactCtrl($scope, MODAL, $filter, CONTACT_FORM_MAXLEN) {
   }, true);
 }
 
-function SettingsCtrl($scope, $timeout, modelSrvc, logFactory, MODAL) {
+function SettingsCtrl($scope, logFactory, MODAL) {
   var log = logFactory('SettingsCtrl');
 
   $scope.$watch('model.settings.runAtSystemStart', function(runAtSystemStart) {
@@ -249,10 +249,6 @@ function ProxiedSitesCtrl($scope, $timeout, $filter, logFactory, MODAL, SETTING,
       proxiedSites = [],
       proxiedSitesDirty = [];
 
-  $scope.$watch('model.modal', function(modal) {
-    $scope.show = modal === MODAL.proxiedSites;
-  });
-
   $scope.$watch('searchText', function(searchText) {
     $scope.inputFiltered = (searchText ? fltr(proxiedSitesDirty, searchText) : proxiedSitesDirty).join('\n');
   });

app/js/directives.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('app.directives', [])
+var directives = angular.module('app.directives', [])
   .directive('focusOn', ['$parse', function($parse) {
     return function(scope, element, attr) {
       var val = $parse(attr['focusOn']);
@@ -11,3 +11,15 @@ angular.module('app.directives', [])
       });
     }
   }]);
+
+// XXX https://github.com/angular/angular.js/issues/1050#issuecomment-9650293
+angular.forEach(['x', 'y', 'cx', 'cy', 'd', 'fill', 'r'], function(name) {
+  var ngName = 'ng' + name[0].toUpperCase() + name.slice(1);
+  directives.directive(ngName, function() {
+    return function(scope, element, attrs) {
+      attrs.$observe(ngName, function(value) {
+        attrs.$set(name, value); 
+      })
+    };
+  });
+});

app/js/filters.js

@@ -2,6 +2,11 @@
 
 angular.module('app.filters', [])
   // see i18n.js for i18n filter
+  .filter('upper', function() {
+    return function(s) {
+      return angular.uppercase(s);
+    };
+  })
   .filter('badgeCount', function() {
     return function(str, max) {
       var count = parseInt(str), max = max || 9;