From 817be313401c8f7a2b37fe741d611e1d1ba23660 Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Wed, 9 Oct 2013 12:31:51 -0400 Subject: [PATCH] After a million different animation attempts... solved inventory groups tree destroy fouc issue by adjusting oppacity on parent. --- awx/ui/static/js/helpers/Hosts.js | 10 ++-- awx/ui/static/js/helpers/inventory.js | 70 ++++++------------------- awx/ui/static/lib/ansible/Utilities.js | 71 ++++++++++++++++++++------ 3 files changed, 73 insertions(+), 78 deletions(-) diff --git a/awx/ui/static/js/helpers/Hosts.js b/awx/ui/static/js/helpers/Hosts.js index d23d46dfc1..6a26b42aed 100644 --- a/awx/ui/static/js/helpers/Hosts.js +++ b/awx/ui/static/js/helpers/Hosts.js @@ -444,12 +444,12 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H if (scope.hosts[i].has_inventory_sources) { scope.hosts[i].inventory_sources = 'yes'; - scope.hosts[i].has_inv_source_link = '???'; - scope.hosts[i].has_inv_source_tip = 'Has an external source. Click to view details.'; + scope.hosts[i].has_inv_source_link = '/#/inventories/' + scope['inventory_id'] + '/groups/?has_external_source=true'; + scope.hosts[i].has_inv_source_tip = 'Has an external source. Click to view inventory source details.'; } else { scope.hosts[i].inventory_sources = 'no'; - scope.hosts[i].has_inv_source_link = '???'; + scope.hosts[i].has_inv_source_link = '/#/inventories/' + scope['inventory_id'] + '/groups'; scope.hosts[i].has_inv_source_tip = 'Has no external source.'; } @@ -491,9 +491,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H scope[InventoryHostsForm.iterator + 'SearchFieldLabel'] = InventoryHostsForm.fields['has_active_failures'].label; scope[InventoryHostsForm.iterator + 'SearchSelectValue'] = ($routeParams['has_active_failures'] == 'true') ? { value: 1 } : { value: 0 }; } - - if ($routeParams['name']) { - console.log('here!'); + else if ($routeParams['name']) { scope[InventoryHostsForm.iterator + 'InputDisable'] = false; scope[InventoryHostsForm.iterator + 'SearchValue'] = $routeParams['name']; scope[InventoryHostsForm.iterator + 'SearchField'] = 'name'; diff --git a/awx/ui/static/js/helpers/inventory.js b/awx/ui/static/js/helpers/inventory.js index a2bc9f185e..a29abc1299 100644 --- a/awx/ui/static/js/helpers/inventory.js +++ b/awx/ui/static/js/helpers/inventory.js @@ -14,8 +14,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi 'InventoryFormDefinition', 'ParseHelper', 'InventorySummaryDefinition' ]) - .factory('LoadTreeData', ['Alert', 'Rest', 'Authorization', '$http', 'Wait', 'SortNodes', - function(Alert, Rest, Authorization, $http, Wait, SortNodes) { + .factory('LoadTreeData', ['Alert', 'Rest', 'Authorization', '$http', 'Wait', 'SortNodes', 'HideElement', + function(Alert, Rest, Authorization, $http, Wait, SortNodes, HideElement) { return function(params) { var scope = params.scope; @@ -95,8 +95,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi .factory('TreeInit', ['Alert', 'Rest', 'Authorization', '$http', 'LoadTreeData', 'GetBasePath', 'ProcessErrors', 'Wait', - 'LoadRootGroups', - function(Alert, Rest, Authorization, $http, LoadTreeData, GetBasePath, ProcessErrors, Wait, LoadRootGroups) { + 'LoadRootGroups', 'ShowElement', + function(Alert, Rest, Authorization, $http, LoadTreeData, GetBasePath, ProcessErrors, Wait, LoadRootGroups, ShowElement) { return function(params) { var scope = params.scope; @@ -120,7 +120,6 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi var idx = index; var selected = (group_idx !== undefined && group_idx !== null) ? group_idx : 'inventory-node'; json_tree_data = treeData; - $(tree_id).jstree({ "core": { //"initially_open":['inventory-node'], "html_titles": true @@ -157,13 +156,16 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi }); }); - $(tree_id).bind("loaded.jstree", function () { - scope['treeLoading'] = false; - Wait('stop'); + $(tree_id).bind("loaded.jstree", function () { // Force root node styling changes $('#tree-view').prepend("
Group Selector:
"); $('#inventory-node ins').first().remove(); $('#inventory-node a ins').first().css('background-image', 'none').append('').css('margin-right','10px'); + + $('#tree-view').parent().css('opacity','100'); // all our changes are done. display the tree + scope['treeLoading'] = false; + Wait('stop'); + scope.$emit('treeLoaded'); }); @@ -389,8 +391,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi }]) - .factory('RefreshTree', ['Alert', 'Rest', 'Authorization', '$http', 'TreeInit', 'LoadInventory', - function(Alert, Rest, Authorization, $http, TreeInit, LoadInventory) { + .factory('RefreshTree', ['Alert', 'Rest', 'Authorization', '$http', 'TreeInit', 'LoadInventory', 'HideElement', + function(Alert, Rest, Authorization, $http, TreeInit, LoadInventory, HideElement) { return function(params) { // Call after an Edit or Add to refresh tree data @@ -398,58 +400,16 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi var scope = params.scope; var group_id = params.group_id; - /* - var openId = []; - var selectedId; - - if (scope.treeLoadedRemove) { - scope.treeLoadedRemove(); - } - scope.treeLoadedRemove = scope.$on('treeLoaded', function() { - // Called recursively to pop the next openId node value and open it. - // Opens the list in reverse so that nodes open in parent then child order, - // drilling down to the last selected node. - var id, node; - - if (openId.length > 0) { - id = openId.pop(); - node = $('#tree-view li[id="' + id + '"]'); - $.jstree._reference('#tree-view').open_node(node, function(){ scope.$emit('treeLoaded'); }, true); - } - else { - if (selectedId !== null && selectedId !== undefined) { - // Click on the previously selected node - node = $('#tree-view li[id="' + selectedId + '"]'); - $('#tree-view').jstree('select_node', node); - //$('#tree-view li[id="' + selectedId + '"] a').first().click(); - } - } - }); - */ - if (scope.inventoryLoadedRemove) { scope.inventoryLoadedRemove(); } scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() { - // Get the list of open tree nodes starting with the current group and going up - // the tree until we hit the inventory or root node. - /* - function findOpenNodes(node) { - if (node.attr('id') != 'inventory-node') { - if (node.prop('tagName') == 'LI' && (node.hasClass('jstree-open') || node.find('.jstree-clicked'))) { - openId.push(node.attr('id')); - } - findOpenNodes(node.parent()); - } - } - selectedId = scope.selectedNode.attr('id'); - findOpenNodes(scope.selectedNode); - */ $('#tree-view').jstree('destroy'); scope.TreeParams.group_id = group_id; - TreeInit(scope.TreeParams); + TreeInit(scope.TreeParams); }); - + + $('#tree-view').parent().css('opacity','0'); //Hide the tree until all the changes are made scope.treeLoading = true; LoadInventory({ scope: scope, doPostSteps: true }); diff --git a/awx/ui/static/lib/ansible/Utilities.js b/awx/ui/static/lib/ansible/Utilities.js index 3992687909..6b55938c33 100644 --- a/awx/ui/static/lib/ansible/Utilities.js +++ b/awx/ui/static/lib/ansible/Utilities.js @@ -13,7 +13,7 @@ angular.module('Utilities',[]) var scope = angular.element(element).scope(); scope.$destroy(); } - }) + }) .factory('ToggleClass', function() { return function(selector, cssClass) { @@ -25,7 +25,7 @@ angular.module('Utilities',[]) $(selector).addClass(cssClass); } } - }) + }) .factory('Alert', ['$rootScope', '$location', function($rootScope, $location) { return function(hdr, msg, cls, action, secondAlert, disableButtons) { @@ -76,7 +76,7 @@ angular.module('Utilities',[]) } } } - }]) + }]) .factory('ProcessErrors', ['$cookieStore', '$log', '$location', '$rootScope', 'Alert', function($cookieStore, $log, $location, $rootScope, Alert) { @@ -147,7 +147,7 @@ angular.module('Utilities',[]) Alert(defaultMsg.hdr, defaultMsg.msg); } } - }]) + }]) .factory('LoadBreadCrumbs', ['$rootScope', '$routeParams', '$location', function($rootScope, $routeParams, $location, Rest) { return function(crumb) { @@ -218,7 +218,7 @@ angular.module('Utilities',[]) } } } - }]) + }]) .factory('ReturnToCaller', ['$location', function($location) { return function(idx) { @@ -233,7 +233,7 @@ angular.module('Utilities',[]) } $location.path(newpath); } - }]) + }]) .factory('FormatDate', [ function() { return function(dt) { @@ -246,7 +246,7 @@ angular.module('Utilities',[]) //result += ('000' + dt.getMilliseconds()).slice(-3); return result; } - }]) + }]) .factory('Wait', [ '$rootScope', function($rootScope) { return function(directive) { @@ -275,8 +275,45 @@ angular.module('Utilities',[]) $('.spinny, .overlay').fadeOut(1000); } } - }]) + }]) + .factory('HideElement', [ function() { + return function(selector, action) { + // Fade-in a cloack or vail or a specific element + var target = $(selector); + var width = target.css('width'); + var height = target.css('height'); + var position = target.position(); + var parent = target.parent(); + var borderRadius = target.css('border-radius'); + var backgroundColor = target.css('background-color'); + var margin = target.css('margin'); + var padding = target.css('padding'); + parent.append("
"); + $('#curtain-div').show(0, action); + } + }]) + + .factory('ShowElement', [ function() { + return function() { + // And Fade-out the cloack revealing the element + $('#curtain-div').fadeOut(500, function() { $(this).remove(); }); + } + }]) + /* DeugForm(form_name) * * Use to log the $pristine and $invalid properties of each form element. Helpful when form @@ -285,15 +322,15 @@ angular.module('Utilities',[]) */ .factory('DebugForm', [ function() { return function(form_name) { - $('form[name="' + form_name + '"]').find('select, input, button, textarea').each(function(index){ - var name = $(this).attr('name'); - if (name) { - if (scope['job_templates_form'][name]) { - console.log(name + ' pristine: ' + scope['job_templates_form'][name].$pristine); - console.log(name + ' invalid: ' + scope['job_templates_form'][name].$invalid); - } - } - }); + $('form[name="' + form_name + '"]').find('select, input, button, textarea').each(function(index){ + var name = $(this).attr('name'); + if (name) { + if (scope['job_templates_form'][name]) { + console.log(name + ' pristine: ' + scope['job_templates_form'][name].$pristine); + console.log(name + ' invalid: ' + scope['job_templates_form'][name].$invalid); + } + } + }); } }]);