From a868dfb2f2e20c99f49c38877c5421330b6b2f8b Mon Sep 17 00:00:00 2001
From: gconsidine <greg@greg-considine.com>
Date: Fri, 7 Jul 2017 17:19:07 -0400
Subject: [PATCH] Add refresh ability to popover on text change

---
 .../lib/components/input/label.partial.html   |   2 +-
 .../components/popover/popover.directive.js   | 126 +++++++++++-------
 .../components/popover/popover.partial.html   |  14 +-
 3 files changed, 88 insertions(+), 54 deletions(-)

diff --git a/awx/ui/client/lib/components/input/label.partial.html b/awx/ui/client/lib/components/input/label.partial.html
index d94c073ebf..2a9a61690f 100644
--- a/awx/ui/client/lib/components/input/label.partial.html
+++ b/awx/ui/client/lib/components/input/label.partial.html
@@ -1,7 +1,7 @@
 <label class="at-InputLabel">
     <span ng-if="state.required" class="at-InputLabel-required">*</span>
     <span class="at-InputLabel-name">{{::state.label}}</span>
-    <at-popover position="right" on="mouseover" state="state"></at-popover>
+    <at-popover state="state"></at-popover>
     <span ng-if="state._displayHint" class="at-InputLabel-hint">{{::state._hint}}</span>
     <div ng-if="state._displayPromptOnLaunch" class="at-InputLabel-checkbox pull-right">
         <label class="at-InputLabel-checkboxLabel">
diff --git a/awx/ui/client/lib/components/popover/popover.directive.js b/awx/ui/client/lib/components/popover/popover.directive.js
index 8dd7e28405..2087940ba4 100644
--- a/awx/ui/client/lib/components/popover/popover.directive.js
+++ b/awx/ui/client/lib/components/popover/popover.directive.js
@@ -4,6 +4,7 @@ const DEFAULT_ICON = 'fa fa-question-circle';
 const DEFAULT_ALIGNMENT = 'inline';
 const DEFAULT_ARROW_HEIGHT = 16;
 const DEFAULT_PADDING = 10;
+const DEFAULT_REFRESH_DELAY = 50;
 
 function atPopoverLink (scope, el, attr, controllers) {
     let popoverController = controllers[0];
@@ -11,7 +12,10 @@ function atPopoverLink (scope, el, attr, controllers) {
     let popover = container.getElementsByClassName('at-Popover-container')[0];
     let icon = container.getElementsByTagName('i')[0];
 
-    popoverController.init(scope, container, icon, popover);
+    let done = scope.$watch('state', () => {
+        popoverController.init(scope, container, icon, popover);
+        done();
+    });
 }
 
 function AtPopoverController () {
@@ -27,16 +31,22 @@ function AtPopoverController () {
         icon = _icon_;
         popover = _popover_;
 
-        scope.state.popover = scope.state.popover || {};
+        scope.popover = scope.state.popover || {};
 
-        vm.inline = scope.state.popover.inline || DEFAULT_ALIGNMENT;
-        vm.position = scope.state.popover.position || DEFAULT_POSITION;
-        vm.icon = scope.state.popover.icon || DEFAULT_ICON;
-        vm.text = scope.state.popover.text || scope.state.help_text;
-        vm.title = scope.state.popover.title || scope.state.label;
-        vm.on = scope.state.popover.on || DEFAULT_ACTION;
+        scope.popover.text = scope.state.help_text || scope.popover.text;
+        scope.popover.title = scope.state.label || scope.popover.title;
+        scope.popover.inline = scope.popover.inline || DEFAULT_ALIGNMENT;
+        scope.popover.position = scope.popover.position || DEFAULT_POSITION;
+        scope.popover.icon = scope.popover.icon || DEFAULT_ICON;
+        scope.popover.on = scope.popover.on || DEFAULT_ACTION;
 
-        icon.addEventListener(vm.on, vm.createDisplayListener());
+        icon.addEventListener(scope.popover.on, vm.createDisplayListener());
+
+        scope.$watch('popover.text', vm.refresh);
+
+        if (scope.popover.click) {
+            icon.addEventListener('click', scope.popover.click);
+        }
     };
 
     vm.createDismissListener = (createEvent) => {
@@ -47,16 +57,20 @@ function AtPopoverController () {
                 return;
             }
 
-            vm.open = false;
+            vm.dismiss();
 
-            popover.style.visibility = 'hidden';
-            popover.style.opacity = 0;
-
-            window.removeEventListener(vm.on, vm.dismissListener);
+            window.removeEventListener(scope.popover.on, vm.dismissListener);
             window.removeEventListener('resize', vm.dismissListener);
         };
     };
 
+    vm.dismiss = () => {
+        vm.open = false;
+
+        popover.style.visibility = 'hidden';
+        popover.style.opacity = 0;
+    };
+
     vm.isClickWithinPopover = (event, popover) => {
         let box = popover.getBoundingClientRect();
 
@@ -78,39 +92,59 @@ function AtPopoverController () {
 
             event.stopPropagation();
 
-            vm.open = true;
-
-
-            let arrow = popover.getElementsByClassName('at-Popover-arrow')[0];
-            arrow.style.lineHeight = `${DEFAULT_ARROW_HEIGHT}px`;
-            arrow.children[0].style.lineHeight = `${DEFAULT_ARROW_HEIGHT}px`;
-
-            let pos = {
-                icon: icon.getBoundingClientRect(),
-                popover: popover.getBoundingClientRect(),
-                windowHeight: window.innerHeight,
-            };
-
-            pos.cx = Math.floor(pos.icon.left + (pos.icon.width / 2));
-            pos.cy = Math.floor(pos.icon.top + (pos.icon.height / 2));
-
-            if (vm.position === 'right') {
-                vm.displayRight(arrow, pos);
-            } else if (vm.position === 'top') {
-                vm.displayTop(arrow, pos);
-            }
-
-            popover.style.visibility = 'visible';
-            popover.style.opacity = 1;
+            vm.display();
 
             vm.dismissListener = vm.createDismissListener(event);
 
-            window.addEventListener(vm.on, vm.dismissListener);
+            window.addEventListener(scope.popover.on, vm.dismissListener);
             window.addEventListener('resize', vm.dismissListener);
         };
     };
 
-    vm.displayRight = (arrow, pos) => {
+    vm.refresh = () => {
+        if (!vm.open) {
+            return;
+        }
+
+        vm.dismiss();
+        window.setTimeout(vm.display, DEFAULT_REFRESH_DELAY);
+    };
+
+    vm.getPositions = () => {
+        let arrow = popover.getElementsByClassName('at-Popover-arrow')[0];
+
+        arrow.style.lineHeight = `${DEFAULT_ARROW_HEIGHT}px`;
+        arrow.children[0].style.lineHeight = `${DEFAULT_ARROW_HEIGHT}px`;
+
+        let data = {
+            arrow,
+            icon: icon.getBoundingClientRect(),
+            popover: popover.getBoundingClientRect(),
+            windowHeight: window.innerHeight
+        };
+
+        data.cx = Math.floor(data.icon.left + (data.icon.width / 2));
+        data.cy = Math.floor(data.icon.top + (data.icon.height / 2));
+
+        return data;
+    };
+
+    vm.display = () => {
+        vm.open = true;
+
+        let positions = vm.getPositions();
+
+        popover.style.visibility = 'visible';
+        popover.style.opacity = 1;
+
+        if (scope.popover.position === 'right') {
+            vm.displayRight(positions);
+        } else if (scope.popover.position === 'top') {
+            vm.displayTop(positions);
+        }
+    };
+
+    vm.displayRight = (pos) => {
         let arrowTop = Math.floor((pos.cy - (pos.icon.height / 2)));
         let arrowLeft = pos.cx + DEFAULT_PADDING;
 
@@ -123,22 +157,22 @@ function AtPopoverController () {
             popoverTop = Math.floor((pos.cy - pos.popover.height / 2));
         }
 
-        arrow.style.top = `${arrowTop}px`;
-        arrow.style.left = `${arrowLeft}px`;
+        pos.arrow.style.top = `${arrowTop}px`;
+        pos.arrow.style.left = `${arrowLeft}px`;
 
         popover.style.top = `${popoverTop}px`;
         popover.style.left = `${popoverLeft}px`;
     };
 
-    vm.displayTop = (arrow, pos) => {
+    vm.displayTop = (pos) => {
         let arrowTop = pos.icon.top - pos.icon.height;
-        let arrowLeft = Math.floor(pos.icon.right - pos.icon.width - (arrow.style.width / 2));
+        let arrowLeft = Math.floor(pos.icon.right - pos.icon.width - (pos.arrow.style.width / 2));
 
         let popoverTop = pos.icon.top - pos.popover.height - DEFAULT_PADDING;
         let popoverLeft = Math.floor(pos.cx - (pos.popover.width / 2));
 
-        arrow.style.top = `${arrowTop}px`; 
-        arrow.style.left = `${arrowLeft}px`; 
+        pos.arrow.style.top = `${arrowTop}px`; 
+        pos.arrow.style.left = `${arrowLeft}px`; 
 
         popover.style.top = `${popoverTop}px`;
         popover.style.left = `${popoverLeft}px`;
diff --git a/awx/ui/client/lib/components/popover/popover.partial.html b/awx/ui/client/lib/components/popover/popover.partial.html
index a95ccde6d7..b9eaee6f22 100644
--- a/awx/ui/client/lib/components/popover/popover.partial.html
+++ b/awx/ui/client/lib/components/popover/popover.partial.html
@@ -1,16 +1,16 @@
-<div ng-show="vm.text" class="at-Popover" ng-class="{ 'at-Popover--inline': vm.inline }">
+<div ng-show="popover.text" class="at-Popover" ng-class="{ 'at-Popover--inline': popover.inline }">
     <span class="at-Popover-icon"
-          ng-class="{'at-Popover-icon--defaultCursor': vm.on === 'mouseover'}">
-        <i class="fa {{ vm.icon }}"></i>
+          ng-class="{'at-Popover-icon--defaultCursor': popover.on === 'mouseover'}">
+        <i class="fa {{ popover.icon }}"></i>
     </span>
     <div class="at-Popover-container">
         <div class="at-Popover-arrow">
-            <i ng-if="vm.position === 'right'" class="fa fa-caret-left fa-2x"></i>
-            <i ng-if="vm.position === 'top'" class="fa fa-caret-down fa-2x"></i>
+            <i ng-if="popover.position === 'right'" class="fa fa-caret-left fa-2x"></i>
+            <i ng-if="popover.position === 'top'" class="fa fa-caret-down fa-2x"></i>
         </div>
         <div class="at-Popover-content">
-            <h4 class="at-Popover-title">{{ vm.title }}</h4>
-            <p class="at-Popover-text">{{ vm.text }}</p>
+            <h4 ng-if="popover.title" class="at-Popover-title">{{ popover.title }}</h4>
+            <p ng-if="popover.text" class="at-Popover-text">{{ popover.text }}</p>
         </div>
     </div>
 </div>