From e84a11d8b718c5f4d2a3865a50dfad1d8a5eb2cf Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Tue, 9 Dec 2014 15:52:56 -0800
Subject: [PATCH] CRM-15578 - crmUiVisible - Add a helper for hiding elements
 while preserving layout

ngShow/ngHide use "display:none" to hide elements -- which modifies layout.
That's normally appropriate, but sometimes one wants to hide things without
changing layout ("visibility:hidden").
---
 js/angular-crm-ui.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index 76ec351ec5..77c2d2f5b9 100644
--- a/js/angular-crm-ui.js
+++ b/js/angular-crm-ui.js
@@ -384,6 +384,25 @@
       }
     })
 
+    // like ng-show, but hides/displays elements using "visibility" which maintains positioning
+    // example <div crm-ui-visible="false">...content...</div>
+    .directive('crmUiVisible', function($parse) {
+      return {
+        restrict: 'EA',
+        scope: {
+          crmUiVisible: '@'
+        },
+        link: function (scope, element, attrs) {
+          var model = $parse(attrs.crmUiVisible);
+          function updatecChildren() {
+            element.css('visibility', model(scope.$parent) ? 'inherit' : 'hidden');
+          }
+          updatecChildren();
+          scope.$parent.$watch(attrs.crmUiVisible, updatecChildren);
+        }
+      };
+    })
+
     // example: <div crm-ui-wizard="myWizardCtrl"><div crm-ui-wizard-step crm-title="ts('Step 1')">...</div><div crm-ui-wizard-step crm-title="ts('Step 2')">...</div></div>
     // Note: "myWizardCtrl" has various actions/properties like next() and $first().
     // WISHLIST: Allow each step to determine if it is "complete" / "valid" / "selectable"
-- 
2.25.1