feat(oui-navbar): add onclick and manual control on toggler

package.json

@@ -56,7 +56,7 @@
     "babel-register": "^6.18.0",
     "cross-env": "^5.1.0",
     "css-loader": "^0.28.4",
-    "eslint": "^3.13.1",
+    "eslint": "^4.3.0",
     "eslint-config-ovh": "^0.1.1",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.9.0",

packages/oui-navbar/README.md

@@ -298,12 +298,41 @@ It defines the menu in reponsive mode. It will be visible only for screen resolu
 
 ### With component `oui-navbar-toggler`
 
+#### As toggler menu
+
 ```html:preview
 <oui-navbar active-link="lorem">
     <oui-navbar-toggler links="$ctrl.togglerLinks"></oui-navbar-toggler>
 </oui-navbar>
 ```
 
+#### As toggler button
+
+```html:preview
+<div class="oui-doc-preview-only">
+    <p>
+        <button class="oui-button oui-button_primary" type="button" ng-class="{
+                'oui-button_primary': $ctrl.togglerLoading,
+                'oui-button_secondary': !$ctrl.togglerLoading
+            }" ng-click="$ctrl.togglerLoading = !$ctrl.togglerLoading">
+            Toggle loading
+        </button>
+    </p>
+</div>
+<oui-navbar active-link="lorem">
+    <oui-navbar-toggler
+        on-click="$ctrl.togglerActive = !$ctrl.togglerActive"
+        active="$ctrl.togglerActive"
+        loading="$ctrl.togglerLoading">
+    </oui-navbar-toggler>
+</oui-navbar>
+<div class="oui-doc-preview-only">
+    <p><strong>active value:</strong> {{!!$ctrl.togglerActive | json}}</p>
+</div>
+```
+
+**Note**: By using this mode, you disable the internal `oui-navbar-backdrop` and toggler navigation.
+
 ## Aside Links
 
 ### With attribute `aside-links`

packages/oui-navbar/src/index.spec.js

@@ -581,6 +581,47 @@ describe("ouiNavbar", () => {
             });
         });
 
+        describe("Toggler", () => {
+            it("should set the toggler active", () => {
+                const component = testUtils.compileTemplate(`<oui-navbar>
+                    <oui-navbar-toggler active="$ctrl.active"></oui-navbar-toggler>
+                </oui-navbar>`);
+                const scope = component.scope();
+                const toggler = angular.element(component[0].querySelector(".oui-navbar-toggler"));
+
+                expect(toggler.attr("aria-expanded")).toBe("false"); // Check when undefined
+
+                scope.$ctrl.active = true;
+                scope.$apply();
+                expect(toggler.attr("aria-expanded")).toBe("true");
+
+                scope.$ctrl.active = false;
+                scope.$apply();
+                expect(toggler.attr("aria-expanded")).toBe("false");
+            });
+
+            it("should set the toggler loading", () => {
+                const component = testUtils.compileTemplate(`<oui-navbar>
+                    <oui-navbar-toggler loading="$ctrl.loading"></oui-navbar-toggler>
+                </oui-navbar>`);
+                const scope = component.scope();
+                const toggler = angular.element(component[0].querySelector(".oui-navbar-toggler_button"));
+
+                expect(toggler.hasClass("ng-hide")).toBeFalsy(); // ngHide: Check when undefined
+                expect(angular.element(component[0].querySelector(".oui-navbar-toggler_loading")).length).toBe(0); // ngIf
+
+                scope.$ctrl.loading = true;
+                scope.$apply();
+                expect(toggler.hasClass("ng-hide")).toBeTruthy();
+                expect(angular.element(component[0].querySelector(".oui-navbar-toggler_loading")).length).toBe(1);
+
+                scope.$ctrl.loading = false;
+                scope.$apply();
+                expect(toggler.hasClass("ng-hide")).toBeFalsy();
+                expect(angular.element(component[0].querySelector(".oui-navbar-toggler_loading")).length).toBe(0);
+            });
+        });
+
         describe("Backdrop", () => {
             const data = mockData.mainLinks;
 

packages/oui-navbar/src/toggler/navbar-toggler.component.js

@@ -6,7 +6,10 @@ export default {
         navbarCtrl: "^^ouiNavbar"
     },
     bindings: {
-        links: "<"
+        links: "<?",
+        active: "<?",
+        loading: "<?",
+        onClick: "&"
     },
     controller,
     template

packages/oui-navbar/src/toggler/navbar-toggler.controller.js

@@ -1,8 +1,31 @@
+import { addBooleanParameter } from "@oui-angular/common/component-utils";
+
 export default class {
+    constructor ($attrs) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+    }
+
+    $onInit () {
+        this.hasLinks = !!this.$attrs.links;
+
+        addBooleanParameter(this, "active");
+        addBooleanParameter(this, "loaded");
+    }
+
     $onChanges (changes) {
         // Get links changes for the loader
         if (changes.links) {
-            this.loaded = !!changes.links.currentValue;
+            this.linksLoaded = !!changes.links.currentValue;
+        }
+    }
+
+    onTogglerClick () {
+        if (this.hasLinks) {
+            this.navbarCtrl.toggleMenu("toggler");
         }
+
+        this.onClick();
     }
 }

packages/oui-navbar/src/toggler/navbar-toggler.html

@@ -1,7 +1,7 @@
-<button class="oui-navbar-toggler" type="button"
-    aria-haspopup="true" aria-expanded="{{!!$ctrl.navbarCtrl.navigation['toggler']}}"
-    ng-if="!!$ctrl.loaded"
-    ng-click="$ctrl.navbarCtrl.toggleMenu('toggler')"
+<button class="oui-navbar-toggler oui-navbar-toggler_button" type="button"
+    aria-haspopup="true" aria-expanded="{{(!!$ctrl.active || !!$ctrl.navbarCtrl.navigation['toggler'])}}"
+    ng-click="$ctrl.onTogglerClick()"
+    ng-hide="!!$ctrl.loading || (!!$ctrl.hasLinks && !$ctrl.linksLoaded)"
     oui-navbar-group="toggler">
     <span class="oui-navbar-toggler__hamburger">
         <span></span>
@@ -10,12 +10,12 @@
         <span></span>
     </span>
 </button>
-<span class="oui-navbar-toggler"
-    ng-if="!$ctrl.loaded">
+<span class="oui-navbar-toggler oui-navbar-toggler_loading"
+    ng-if="!!$ctrl.loading || (!!$ctrl.hasLinks && !$ctrl.linksLoaded)">
     <oui-spinner size="s"></oui-spinner>
 </span>
 <oui-navbar-menu
-    ng-if="!!$ctrl.loaded"
+    ng-if="!!$ctrl.hasLinks && !!$ctrl.linksLoaded"
     class="oui-navbar-menu_toggle"
     name="toggler"
     links="::$ctrl.links"