Simplify switching between menu styles

awx/ui/static/js/main-menu/default-menu.directive.js

@@ -0,0 +1,14 @@
+export default function() {
+    return {
+        restrict: 'E',
+        templateUrl: '/static/js/main-menu/menu-default.partial.html',
+        link: function(scope, element) {
+            var contents = element.contents();
+            contents.unwrap();
+
+            scope.$on('$destroy', function() {
+                contents.remove();
+            });
+        }
+    };
+}

awx/ui/static/js/main-menu/main-menu.block.less

@@ -25,6 +25,10 @@
       padding: 0 1rem;
   }
 
+  &-menuContainer {
+      display: flex;
+  }
+
   &-toggle {
     @media screen and (min-width: 571px) {
       display: none;

awx/ui/static/js/main-menu/main-menu.directive.js

@@ -1,33 +1,12 @@
 /* jshint unused: vars */
 
-function getMenuStylePartialUrl(style) {
-
-    if (style !== 'default' && style !== 'portal') {
-        /* jshint ignore:start */
-        console.warn('main-menu: "', style, 'is not a valid menu style. Please use "default" or "minimal".');
-        /* jshint ignore:end */
-        style = 'default';
-    }
-
-    return '/static/js/main-menu/menu-' + style + '.partial.html';
-}
-
-function link(scope, element, attrs) {
-    scope.$watch(function(scope) {
-        return scope.$eval(scope.style);
-    }, function(value) {
-        scope.menuStylePartialUrl = getMenuStylePartialUrl(value);
-    });
-}
-
 export default function() {
     return {
         restrict: 'E',
         templateUrl: '/static/js/main-menu/main-menu.partial.html',
         scope: {
-            style: '&menuStyle',
+            menuStyle: '&menuStyle',
             currentUser: '='
-        },
+        }
-        link: link
     };
 }

awx/ui/static/js/main-menu/main-menu.partial.html

@@ -1,7 +1,8 @@
-<nav class="MainMenu MainMenu--fixedTop">
+<nav class="MainMenu MainMenu--fixedTop" ng-switch="$eval(menuStyle)">
     <a link-to="dashboard" class="MenuItem MenuItem--logo">
         <img id="ansible-brand-logo" alt="Ansible Tower" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
         <menu-toggle-button width="15" height="15" bar-height="2" class="MainMenu-toggle"></menu-toggle-button>
     </a>
-    <include-partial ng-include="menuStylePartialUrl"></include-partial>
+    <default-menu ng-switch-when="default" class="MainMenu-menuContainer"></default-menu>
+    <portal-menu ng-switch-when="portal" class="MainMenu-menuContainer"></portal-menu>
 </nav>

awx/ui/static/js/main-menu/main.js

@@ -2,16 +2,18 @@ import mainMenu from './main-menu.directive';
 import menuItem from './menu-item.directive';
 import menuToggle from './menu-toggle.directive';
 import webSocketStatus from './web-socket-status.directive';
+import defaultMenu from './default-menu.directive';
+import portalMenu from './portal-menu.directive';
 
-import includePartial from 'tower/shared/include-partial/main';
 import shared from 'tower/shared/main';
 
 export default
     angular.module('mainMenu',
-                   [    includePartial.name,
+                   [    shared.name
-                        shared.name
                    ])
         .directive('menuItem', menuItem)
+        .directive('defaultMenu', defaultMenu)
+        .directive('portalMenu', portalMenu)
         .directive('menuToggleButton', menuToggle)
         .directive('webSocketStatus', webSocketStatus)
         .directive('mainMenu', mainMenu);

awx/ui/static/js/main-menu/portal-menu.directive.js

@@ -0,0 +1,15 @@
+export default function() {
+    return {
+        restrict: 'E',
+        templateUrl: '/static/js/main-menu/menu-portal.partial.html',
+        link: function(scope, element) {
+            var contents = element.contents();
+            contents.unwrap();
+
+            scope.$on('$destroy', function() {
+                contents.remove();
+            });
+        }
+    };
+}
+

awx/ui/static/js/shared/include-partial/include-partial.directive.js

@@ -1,64 +0,0 @@
-// Typically ng-include requires the use of an extra tag like:
-//
-//  <div ng-include="my-partial.html"></div>
-//
-// This means that the content from `my-partial.html` will _always_
-// be wrapped in that extra div.
-//
-// This directive works with ngInclude to replace its own contents with
-// the contents of the included partial.
-//
-// The high-level strategy here is to find the comment
-// inserted by ng-include, remove all children after
-// the comment (this will be the children inserted by
-// this directiv) then insert the included children
-// after the comment.
-//
-// So say we have:
-//
-// <include-partial ng-include="'my-partial.html'"></include-partial>
-//
-// and "my-partial.html" contains:
-//
-// <p>Item 1</p>
-// <p>Item 2</p>
-// <p>Item 3</p>
-//
-// When the <include-partial> link function runs the
-// DOM will look like:
-//
-// <!-- ngInclude: 'my-partial.html' -->
-// <include-partial ng-include="'my-partial.html'">
-//     <p>Item 1</p>
-//     <p>Item 2</p>
-//     <p>Item 3</p>
-// </include-partial>
-//
-// First we find the comment, then we get all the
-// chilren of <include-partial> (the contents of 'my-partial.html').
-//
-// Then we remove the <include-partial> tag and
-// insert the its contents after the comment.
-//
-// There is a potential bug here if the <include-partial>
-// is followed by other siblings, they will get removed
-// too. We can fix this probably by inserting another
-// comment and removing everything between the two
-// comments instead.
-
-export default function() {
-    return {
-        restrict: 'E',
-        link: function(scope, linkElement) {
-            var contents = Array.prototype.slice.apply(linkElement.parent().contents());
-            var commentNode = contents.filter(function(node) {
-                // This selects a comment node
-                return node.nodeType === 8;
-            });
-
-            var children = linkElement.children();
-            $(commentNode[0]).nextAll().remove();
-            $(commentNode[0]).after(children);
-        }
-    };
-}

awx/ui/static/js/shared/include-partial/main.js

@@ -1,5 +0,0 @@
-import includePartial from './include-partial.directive';
-
-export default
-    angular.module('includePartial', [])
-        .directive('includePartial', includePartial);