Merge pull request #55 from ansible/popover_disable

Fixed popOver bug

awx/ui/static/js/controllers/Home.js

@@ -450,11 +450,9 @@ function HomeGroups($log, $scope, $filter, $compile, $location, $routeParams, Lo
             });
             html += "</tbody>\n";
             html += "</table>\n";
-            html += "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
         }
         else {
-            html = "<p>No recent job data available for this inventory.</p>\n" +
+            html = "<p>No recent job data available for this inventory.</p>\n";
-                "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
         }
         attachElem(event, html, title);
     });
@@ -486,7 +484,6 @@ function HomeGroups($log, $scope, $filter, $compile, $location, $routeParams, Lo
         });
         html += "</tbody>\n";
         html += "</table>\n";
-        html += "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
         title = "Sync Status";
         attachElem(event, html, title);
     });

awx/ui/static/js/controllers/Inventories.js

@@ -205,11 +205,9 @@ function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $com
             });
             html += "</tbody>\n";
             html += "</table>\n";
-            html += "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
         }
         else {
-            html = "<p>No recent job data available for this inventory.</p>\n" +
+            html = "<p>No recent job data available for this inventory.</p>\n";
-                "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
         }
         attachElem(event, html, title);
     });
@@ -250,7 +248,6 @@ function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $com
         });
         html += "</tbody>\n";
         html += "</table>\n";
-        html += "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
         title = "Sync Status";
         attachElem(event, html, title);
     });

awx/ui/static/js/controllers/JobDetail.js

@@ -90,9 +90,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     scope.eventsHelpText = "<p><i class=\"fa fa-circle successful-hosts-color\"></i> Successful</p>\n" +
         "<p><i class=\"fa fa-circle changed-hosts-color\"></i> Changed</p>\n" +
         "<p><i class=\"fa fa-circle unreachable-hosts-color\"></i> Unreachable</p>\n" +
-        "<p><i class=\"fa fa-circle failed-hosts-color\"></i> Failed</p>\n" +
+        "<p><i class=\"fa fa-circle failed-hosts-color\"></i> Failed</p>\n";
-        "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
-
     function openSocket() {
         event_socket =  Socket({
             scope: scope,

awx/ui/static/js/helpers/Credentials.js

@@ -40,7 +40,7 @@ angular.module('CredentialsHelper', ['Utilities'])
             scope.key_required = false;                             // JT -- doing the same for key and project
             scope.project_required = false;
             scope.subscription_required = false;
-            scope.key_description = "Paste the contents of the SSH private key file.<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>";
+            scope.key_description = "Paste the contents of the SSH private key file.";
             scope.key_hint= "drag and drop an SSH private key file on the field below";
             scope.host_required = false;
             scope.password_required = false;
@@ -68,7 +68,7 @@ angular.module('CredentialsHelper', ['Utilities'])
                     scope.email_required = true;
                     scope.key_required = true;
                     scope.project_required = true;
-                    scope.key_description =  'Paste the contents of the PEM file associated with the service account email. <div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>';
+                    scope.key_description =  'Paste the contents of the PEM file associated with the service account email.';
                     scope.key_hint= "drag and drop a private key file on the field below";
                     break;
                 case 'azure':
@@ -76,7 +76,7 @@ angular.module('CredentialsHelper', ['Utilities'])
                     scope.sshKeyDataLabel = 'Management Certificate';
                     scope.subscription_required = true;
                     scope.key_required = true;
-                    scope.key_description = "Paste the contents of the PEM file that corresponds to the certificate you uploaded in the Microsoft Azure console.<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>";
+                    scope.key_description = "Paste the contents of the PEM file that corresponds to the certificate you uploaded in the Microsoft Azure console.";
                     scope.key_hint= "drag and drop a management certificate file on the field below";
                     break;
                 case 'vmware':

awx/ui/static/js/helpers/Groups.js

@@ -1440,9 +1440,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                 "the associated groups and hosts will no longer appear in the inventory.</dd>\n" +
                 "<dt style=\"margin-top: 5px;\">Promote</dt><dd>Groups and hosts associated with the group being removed will be " +
                 "promoted one level. Note: groups already associated with other groups cannot be promoted to the top level of the " +
-                "tree.</dd></dl>\n" +
+                "tree.</dd></dl>\n";
-                "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>";
-
             buttonSet = [{
                 label: "Cancel",
                 onClick: function() {

awx/ui/static/js/helpers/Hosts.js

@@ -77,8 +77,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
 
         function noRecentJobs() {
             title = 'No job data';
-            html = "<p>No recent job data available for this host.</p>\n" +
+            html = "<p>No recent job data available for this host.</p>\n";
-                "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
         }
 
         function setMsg(host) {
@@ -129,7 +128,6 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
                     }
                     html += "</tbody>\n";
                     html += "</table>\n";
-                    html += "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
                 }
                 else {
                     noRecentJobs();

awx/ui/static/js/helpers/JobSubmission.js

@@ -455,8 +455,7 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
                 "JSON:<br />\n" +
                 "<blockquote>{<br />\"somevar\": \"somevalue\",<br />\"password\": \"magic\"<br /> }</blockquote>\n" +
                 "YAML:<br />\n" +
-                "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
+                "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n";
-                "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
 
             scope.extra_vars = ParseVariableString(extra_vars);
             scope.parseType = 'yaml';

awx/ui/static/js/helpers/JobTemplates.js

@@ -47,8 +47,7 @@ angular.module('JobTemplatesHelper', ['Utilities'])
                 scope.callback_server_path + GetBasePath('job_templates') + scope.example_template_id + "/callback/</pre>\n" +
                 "<p>Note the requesting host must be defined in the inventory associated with the job template. If Tower fails to " +
                 "locate the host, the request will be denied.</p>" +
-                "<p>Successful requests create an entry on the Jobs page, where results and history can be viewed.</p>" +
+                "<p>Successful requests create an entry on the Jobs page, where results and history can be viewed.</p>";
-                "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>";
         };
 
         // The md5 helper emits NewMD5Generated whenever a new key is available

awx/ui/static/js/lists/Credentials.js

@@ -17,8 +17,7 @@ angular.module('CredentialsListDefinition', [])
         selectTitle: 'Add Credentials',
         editTitle: 'Credentials',
         selectInstructions: "<p>Select existing credentials by clicking each credential or checking the related checkbox. When " +
-            "finished, click the blue <em>Select</em> button, located bottom right.</p> <p>Create a brand new credential by clicking " +
+            "finished, click the blue <em>Select</em> button, located bottom right.</p> <p>Create a brand new credential by clicking ",
-            "the <i class=\"fa fa-plus\"></i> button.</p><div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>",
         index: false,
         hover: true,
 

awx/ui/static/js/lists/CustomInventory.js

@@ -16,9 +16,6 @@ angular.module('CustomInventoryListDefinition', [])
         iterator: 'source_script',  //'custom_inventory',
         selectTitle: 'Add custom inventory',
         editTitle: 'Custom Inventories',
-        // selectInstructions: "<p>Select existing credentials by clicking each credential or checking the related checkbox. When " +
-        //     "finished, click the blue <em>Select</em> button, located bottom right.</p> <p>Create a brand new credential by clicking " +
-        //     "the <i class=\"fa fa-plus\"></i> button.</p><div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>",
         index: false,
         hover: false,
 

awx/ui/static/js/lists/Organizations.js

@@ -17,7 +17,7 @@ angular.module('OrganizationListDefinition', [])
         selectTitle: 'Add Organizations',
         selectInstructions: '<p>Select existing organizations by clicking each organization or checking the related checkbox. When finished, ' +
             'click the blue <em>Select</em> button, located bottom right.</p><p>Create a new organization by clicking the ' +
-            '<i class=\"fa fa-plus\"></i> button.</p><div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>',
+            '<i class=\"fa fa-plus\"></i> button.</p>',
         editTitle: 'Organizations',
         hover: true,
         index: false,

awx/ui/static/js/lists/Projects.js

@@ -17,8 +17,7 @@ angular.module('ProjectsListDefinition', [])
         selectTitle: 'Add Project',
         editTitle: 'Projects',
         selectInstructions: '<p>Select existing projects by clicking each project or checking the related checkbox. When finished, click the blue ' +
-            '<em>Select</em> button, located bottom right.</p><p>Create a new project by clicking the <i class=\"fa fa-plus\"></i> button.</p>'+
+            '<em>Select</em> button, located bottom right.</p><p>Create a new project by clicking the <i class=\"fa fa-plus\"></i> button.</p>',
-            '<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>',
         index: false,
         hover: true,
 
@@ -66,34 +65,12 @@ angular.module('ProjectsListDefinition', [])
                 ngClick: 'addProject()',
                 awToolTip: 'Create a new project'
             },
-            /*help: {
-                awPopOver: "<dl>\n<dt>Updating</dt><dd>A source control update is in progress.</dd>\n" +
-                    "<dt>Never Updated</dt><dd>This project has not yet been updated from source control.</dd>\n" +
-                    "<dt>Failed</dt><dd>An error occurred during the most recent source control update, click the status " +
-                    "text for more information.</dd>\n" +
-                    "<dt>Successful</dt><dd>TThe latest source control update completed successfully.</dd>\n" +
-                    "<dt>Missing</dt><dd>The previously configured local project directory is missing.</dd>\n" +
-                    "<dt>N/A</dt><dd>The project is not linked to source control, so updates are not applicable.</dd>\n" +
-                    "</dl>\n",
-                dataPlacement: 'left',
-                dataContainer: 'body',
-                mode: 'edit',
-                awToolTip: 'Click for help',
-                awTipPlacement: 'top'
-            },*/
             refresh: {
                 mode: 'all',
                 awToolTip: "Refresh the page",
                 ngClick: "refresh()",
                 ngShow: "socketStatus == 'error'"
             },
-            /*socket: {
-                mode: 'all',
-                iconClass: "{{ 'fa fa-power-off fa-lg socket-' + socketStatus }}",
-                awToolTip: "{{ socketTip }}",
-                dataTipWatch: "socketTip",
-                ngClick: "socketToggle()",
-            },*/
             stream: {
                 ngClick: "showActivity()",
                 awToolTip: "View Activity Stream",

awx/ui/static/js/lists/Users.js

@@ -17,7 +17,7 @@ angular.module('UserListDefinition', [])
         editTitle: 'Users',
         selectInstructions: '<p>Select existing users by clicking each user or checking the related checkbox. When finished, click the blue ' +
             '<em>Select</em> button, located bottom right.</p> <p>When available, a brand new user can be created by clicking the ' +
-            '<i class=\"fa fa-plus\"></i> button.</p><div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>',
+            '<i class=\"fa fa-plus\"></i> button.</p>',
         index: false,
         hover: true,
 

awx/ui/static/lib/ansible/directives.js

@@ -489,7 +489,8 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
                 title = (attrs.title) ? attrs.title : (attrs.popoverTitle) ? attrs.popoverTitle : 'Help',
                 container = (attrs.container !== undefined) ? attrs.container : false,
                 trigger = (attrs.trigger !== undefined) ? attrs.trigger : 'manual',
-                template = '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>';
+                template = '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
+                id_to_close = "";
 
             if (element[0].id) {
                 template = '<div id="' + element[0].id + '_popover_container" class="popover" role="tooltip"><div class="arrow"></div><h3 id="' + element[0].id + '_popover_title" class="popover-title"></h3><div id="' + element[0].id + '_popover_content" class="popover-content"></div></div>';
@@ -521,17 +522,47 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
                 });
             }
             $(element).attr('tabindex',-1);
-            $(element).click(function() {
+
+            $(element).one('click', showPopover);
+
+            $(element).on('shown.bs.popover', function() {
+                $('body').one('click.popover' + id_to_close, function(e) {
+                    if ($(e.target).parents(id_to_close).length === 0) {
+                        $(element).popover('hide');
+                    }
+                });
+
+                $(document).on('keydown.popover', dismissOnEsc);
+
+            });
+
+            $(element).on('hidden.bs.popover', function() {
+                $(element).off('click', dismissPopover);
+                $(element).off('click', showPopover);
+                $('body').off('click.popover.' + id_to_close);
+                $(element).one('click', showPopover);
+                $(document).off('keydown.popover', dismissOnEsc);
+            });
+
+            function showPopover(e) {
+                console.log(element);
+                e.stopPropagation();
+
                 var self = $(this);
+
+                // remove tool-tip
                 try {
-                    self.tooltip('hide');
+                    element.tooltip('hide');
                 }
                 catch(e) {
                     // ignore
                 }
+
+                // this is called on the help-link (over and over again)
                 $('.help-link, .help-link-white').each( function() {
                     if (self.attr('id') !== $(this).attr('id')) {
                         try {
+                            // not sure what this does different than the method above
                             $(this).popover('hide');
                         }
                         catch(e) {
@@ -539,32 +570,43 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
                         }
                     }
                 });
+
                 $('.popover').each(function() {
                     // remove lingering popover <div>. Seems to be a bug in TB3 RC1
                     $(this).remove();
                 });
                 $('.tooltip').each( function() {
-                    // close any lingering tool tipss
+                    // close any lingering tool tips
                     $(this).hide();
                 });
+
+                // set id_to_close of the actual open element
+                id_to_close = "#" + $(element).attr('id') + "_popover_container";
+
+                // $(element).one('click', dismissPopover);
+
                 $(this).popover('toggle');
+
                 $('.popover').each(function() {
                     $compile($(this))(scope);  //make nested directives work!
                 });
-                $('.popover-content, .popover-title').click(function() {
+            }
-                    $(self).popover('hide');
-                });
-            });
 
-            $(document).bind('keydown', function(e) {
+            function dismissPopover(e) {
+                e.stopPropagation();
+                $(element).popover('hide');
+            }
+
+            function dismissOnEsc(e) {
                 if (e.keyCode === 27) {
                     $(element).popover('hide');
                     $('.popover').each(function() {
                         // remove lingering popover <div>. Seems to be a bug in TB3 RC1
-                        $(this).remove();
+                        // $(this).remove();
                     });
                 }
-            });
+            }
+
         };
     }])
 

awx/ui/static/lib/ansible/generator-helpers.js

@@ -42,7 +42,7 @@ angular.module('GeneratorHelpers', [])
                 break;
             case 'awPopOver':
                 // construct the entire help link
-                result = "<a id=\"awp-" + fld + "\" href=\"\" aw-pop-over=\'" + value + "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\' ";
+                result = "<a id=\"awp-" + fld + "\" href=\"\" aw-pop-over=\'" + value + "\' ";
                 result += (obj.dataPlacement) ? "data-placement=\"" + obj.dataPlacement + "\" " : "";
                 result += (obj.dataContainer) ? "data-container=\"" + obj.dataContainer + "\" " : "";
                 result += (obj.dataTitle) ? "data-title=\"" + obj.dataTitle + "\" " : "";