[FIX] optimize rpAddressPopover

if popover is not used, do not create popover,
and make only one interaction
with dom - add one 'mouseenter' handler

src/jade/directives/addresspopover.jade

@@ -1,8 +1,3 @@
-div
-  div(ng-show="summ") {{ summ }}
-  span(l10n, ng-show="type==1 && identity") Ripple address {{ identity }}
-  div(ng-show="type==2")
-    div(ng-show="rippleName") {{ rippleName }}
-    span {{ identity }}
-    br
-    a(l10n, target="_blank", href="http://www.ripplecharts.com/#/graph/{{ identity }}") Show in graph
+span(l10n) Ripple address
+br
+span(l10n) Show in graph

src/jade/tabs/trade.jade

@@ -455,7 +455,8 @@ section.col-xs-12.content(ng-controller="TradeCtrl")
                 .col-md-1.type(l10n-data-label="Type")
                   span.rp-hidden-md.rp-hidden-lg {{entry.type | rpucfirst}}
                   span.rp-hidden-xs.rp-hidden-sm {{entry.type | rptruncate:1}}
-                .col-md-2.amount.rpamount(l10n-data-label="QTY",
+                .col-md-2.amount.rpamount(l10n-data-label="QTY"
+                  rp-address-popover, rp-address-popover-sum="entry.first"
                   ng-hide="editOrder.seq == entry.seq") {{entry.first | rpamount:{hard_precision: true, precision: 6, tiny_precision: 6} }}
                 .col-md-2(l10n-data-label="BASE", ng-hide="editOrder.seq == entry.seq")
                   a(href="",ng-click="goto_order_currency()")
@@ -475,7 +476,8 @@ section.col-xs-12.content(ng-controller="TradeCtrl")
                         rp-pretty-issuer="entry.second.issuer().to_json()"
                         rp-pretty-issuer-contacts="userBlob.data.contacts"
                       ) ???
-                .col-md-2.price.rpamount(l10n-data-label="Limit",
+                .col-md-2.price.rpamount(l10n-data-label="Limit"
+                  rp-address-popover, rp-address-popover-sum="entry.second | rpamountratio:entry.first"
                   ng-hide="editOrder.seq == entry.seq") {{entry.second | rpamountratio:entry.first | rpamount:{hard_precision: true, precision: 6, tiny_precision: 6} }}
                 //- .col-md-2.action(l10n-data-label="Time placed(UTC)", ng-hide="editOrder.seq == entry.seq") ...
                 .col-md-3.action(ng-hide="editOrder.seq == entry.seq")
@@ -631,11 +633,11 @@ section.col-xs-12.content(ng-controller="TradeCtrl")
 
                   .row(ng-repeat='order in bookShow.bids track by order.index'
                     ng-class="{my: order.my, cancelling: cancelling}")
-                    .col-xs-4.rpamount.sum
+                    .col-xs-4.rpamount.sum(rp-address-popover="order.Account", rp-address-popover-link-to-charts)
                       a(href="", ng-click="fill_widget('sell', order, true)")
                         span(rp-bind-color-amount="order.showSum")
-                    .col-xs-4.rpamount.size(rp-bind-color-amount="order.showTakerPays")
-                    .col-xs-4.rpamount.price
+                    .col-xs-4.rpamount.size(rp-bind-color-amount="order.showTakerPays", rp-address-popover="order.Account", rp-address-popover-link-to-charts)
+                    .col-xs-4.rpamount.price(rp-address-popover="order.Account", rp-address-popover-link-to-charts)
                       a(href="", ng-click="fill_widget('sell', order, true)", ng-bind="order.showPrice")
 
                   .message(ng-show='!bookShow.bids.length', l10n) There are currently no bids for this pair.
@@ -667,10 +669,10 @@ section.col-xs-12.content(ng-controller="TradeCtrl")
 
                   .row(ng-repeat='order in bookShow.asks track by order.index'
                     ng-class="{my: order.my, cancelling: cancelling}")
-                    .col-xs-4.rpamount.price
+                    .col-xs-4.rpamount.price(rp-address-popover="order.Account", rp-address-popover-link-to-charts)
                       a(href="", ng-click="fill_widget('buy', order, true)", ng-bind="order.showPrice")
-                    .col-xs-4.rpamount.size(rp-bind-color-amount="order.showTakerGets")
-                    .col-xs-4.rpamount.sum
+                    .col-xs-4.rpamount.size(rp-bind-color-amount="order.showTakerGets", rp-address-popover="order.Account", rp-address-popover-link-to-charts)
+                    .col-xs-4.rpamount.sum(rp-address-popover="order.Account", rp-address-popover-link-to-charts)
                       a(href=""
                         ng-click="fill_widget('buy', order, true)")
                         span(rp-bind-color-amount="order.showSum")

src/js/directives/addressPopover.js

@@ -0,0 +1,228 @@
+
+(function() {
+  // 'use strict';
+
+  /* global ripple: false, angular: false, _: false, jQuery: false, store: false, Options: false */
+
+  function AddressPopover($timeout, id, $filter, $parse, scope, element, attr) {
+    this.$timeout = $timeout;
+    this.$parse = $parse;
+    this.scope = scope;
+    this.element = element;
+
+    this.cancelHidePopoverTimeout = null;
+    this.cancelShowPopoverTimeout = null;
+    this.tip = null;
+    this.shown = false;
+    this.identity = '';
+    this.summ = '';
+    this.rippleName = '';
+    this.rpamountFilter = $filter('rpamount');
+    this.popoverCreated = false;
+    this.rpAddressPopoverSum = attr.rpAddressPopoverSum;
+    this.rpAddressPopoverSumMinus = attr.rpAddressPopoverSumMinus;
+
+    if (attr.rpAddressPopover && attr.rpAddressPopover != 'rp-address-popover') {
+      this.identity = $parse(attr.rpAddressPopover)(scope);
+    }
+
+    this.onPopoverEnterBound = null;
+    this.onPopoverLeaveBound = null;
+    this.onElemLeaveBound = null;
+    this.onElemEnterBound = this.onElemEnter.bind(this);
+    element.bind('mouseenter', this.onElemEnterBound);
+
+    var _this = this;
+    if (attr.rpAddressPopoverLinkToCharts) {
+      id.resolveName(this.identity, { tilde: true }).then(function(name) {
+        _this.rippleName = name;
+        if (_this.popoverCreated) {
+          var data = element.data('popover');
+          if (data) {
+            data.options.content = _this.makeContent();
+            data.setContent();
+          }
+        }
+      });
+    }
+
+    // Make sure popover is destroyed and removed.
+    scope.$on('$destroy', function onDestroyPopover() {
+      $timeout.cancel(_this.cancelHidePopoverTimeout);
+      _this.cancelHidePopoverTimeout = null;
+      $timeout.cancel(_this.cancelShowPopoverTimeout);
+      _this.cancelShowPopoverTimeout = null;
+      _this.unbindHanlders();
+      if (_this.tip) {
+        _this.tip.remove();
+        _this.tip = null;
+      }
+      this.scope = null;
+      this.element = null;
+      this.onPopoverEnterBound = null;
+      this.onPopoverLeaveBound = null;
+      this.onElemLeaveBound = null;
+      this.onElemEnterBound = null;
+    });
+  }
+
+  AddressPopover.popupDelay = 800;
+  AddressPopover.hideDelay =  700;
+  AddressPopover.summFilterOpts = { force_precision: 100, min_precision: 2 };
+
+  AddressPopover.prototype.create = function() {
+    if (this.rpAddressPopoverSum) {
+      var nowSumm = this.$parse(this.rpAddressPopoverSum)(this.scope);
+      nowSumm = this.rpamountFilter(nowSumm, AddressPopover.summFilterOpts);
+      if (nowSumm != this.summ) {
+        if (this.rpAddressPopoverSumMinus && nowSumm != 'n/a') {
+          nowSumm = '-' + nowSumm;
+        }
+        this.summ = nowSumm;
+      }
+    }
+
+    var options = {
+      content: this.makeContent(),
+      html: true,
+      trigger: 'manual', placement: 'top',
+      container: 'body',
+      template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"></div></div></div>'
+    };
+
+    var popover = this.element.popover(options);
+    this.tip = this.element.data('popover').tip();
+    this.onPopoverEnterBound = this.onPopoverEnter.bind(this);
+    this.tip.bind('mouseenter', this.onPopoverEnterBound);
+    this.onPopoverLeaveBound = this.onPopoverLeave.bind(this);
+    this.tip.bind('mouseleave', this.onPopoverLeaveBound);
+    this.popoverCreated = true;
+  }
+
+  AddressPopover.prototype.makeContent = function() {
+    var htmlContent = ['<div>'];
+    if (this.summ) {
+      htmlContent.push('<div>', String(this.summ), '</div>');
+    }
+
+    if (this.rippleName) {
+      if (this.rippleName !== this.identity) {
+        htmlContent.push('<div>', this.rippleName, '</div>');
+      }
+      htmlContent.push('<span>', this.identity, '</span>', '<br/>');
+      htmlContent.push('<a target="_blank", href="http://www.ripplecharts.com/#/graph/', this.identity, '" >', AddressPopover.textShowInGraph, '</a>');
+    } else if (this.identity) {
+      htmlContent.push(AddressPopover.textRippleAddress, ' ', this.identity);
+    }
+    htmlContent.push('</div>');
+    return htmlContent.join('');
+  }
+
+  AddressPopover.prototype.showPopover = function() {
+    if (!this.popoverCreated) {
+      this.create();
+    }
+
+    var _this = this;
+    // allow $compile to bind values to template
+    this.$timeout(function() {
+      _this.element.popover('show');
+      _this.shown = true;
+    }, 10, false);
+  }
+
+  AddressPopover.prototype.hidePopover = function() {
+    if (!this.cancelHidePopoverTimeout) {
+      var _this = this;
+      this.cancelHidePopoverTimeout = this.$timeout(function() {
+        _this.element.popover('hide');
+        _this.shown = false;
+      }, AddressPopover.hideDelay, false);
+      this.cancelHidePopoverTimeout['finally'](function() {
+        _this.cancelHidePopoverTimeout = null;
+      });
+    }
+  }
+
+  AddressPopover.prototype.onPopoverEnter = function() {
+    if (this.cancelShowPopoverTimeout) {
+      this.$timeout.cancel(this.cancelShowPopoverTimeout);
+      this.cancelShowPopoverTimeout = null;
+    }
+    if (this.cancelHidePopoverTimeout) {
+      this.$timeout.cancel(this.cancelHidePopoverTimeout);
+      this.cancelHidePopoverTimeout = null;
+    }
+  }
+
+  AddressPopover.prototype.onPopoverLeave = function() {
+    this.hidePopover();
+  }
+
+  AddressPopover.prototype.onElemEnter = function() {
+    if (!this.onElemLeaveBound) {
+      this.onElemLeaveBound = this.onElemLeave.bind(this)
+      this.element.bind('mouseleave', this.onElemLeaveBound);
+    }
+
+    if (this.cancelHidePopoverTimeout) {
+      this.$timeout.cancel(this.cancelHidePopoverTimeout);
+      this.cancelHidePopoverTimeout = null;
+    } else if (!this.cancelShowPopoverTimeout) {
+      this.cancelShowPopoverTimeout = this.$timeout(this.showPopover.bind(this), AddressPopover.popupDelay, false);
+      this.cancelShowPopoverTimeout['finally'](this.onCancelShowPopoverTimeoutFinally.bind(this));
+    }
+  }
+
+  AddressPopover.prototype.onCancelShowPopoverTimeoutFinally = function() {
+    this.cancelShowPopoverTimeout = null;
+  }
+
+  AddressPopover.prototype.onElemLeave = function() {
+    if (this.cancelShowPopoverTimeout) {
+      this.$timeout.cancel(this.cancelShowPopoverTimeout);
+      this.cancelShowPopoverTimeout = null;
+    } else if (this.shown) {
+      this.hidePopover();
+    }
+  }
+
+  AddressPopover.prototype.unbindHanlders = function() {
+    this.element.unbind('mouseenter', this.onElemEnterBound);
+    this.element.unbind('mouseleave', this.onElemLeaveBound);
+
+    if (this.tip) {
+      this.tip.unbind('mouseenter', this.onPopoverEnterBound);
+      this.tip.unbind('mouseleave', this.onPopoverLeaveBound);
+    }
+  }
+
+  var myTemplate = require('../../jade/directives/addresspopover.jade')();
+  var texts = myTemplate.split('<br/>');
+
+  AddressPopover.textRippleAddress = texts[0];
+  AddressPopover.textShowInGraph = texts.length > 1 ? texts[1] : 'Show in graph';
+
+  /**
+   * Special popover to show ripple address with ability to double click on address to select.
+   * Also can link to www.ripplecharts.com.
+   * rp-address-popover-link-to-charts - show ling to ripple charts
+   * rp-address-popover-sum - show full sum of according model in popover
+   * rp-address-popover-sum-minus - put minus sign before sum
+   */
+  angular.module('directives').directive('rpAddressPopover', rpAddressPopover);
+
+  rpAddressPopover.$inject = ['$timeout', 'rpId', '$filter', '$parse'];
+
+  function rpAddressPopover($timeout, id, $filter, $parse) {
+    return {
+      restrict: 'A',
+      replace: false,
+      compile: function (element, attr, linker) {
+        return function (scope, element, attr) {
+          var p = new AddressPopover($timeout, id, $filter, $parse, scope, element, attr);
+        };
+      }
+    };
+  }
+})();