From 141a25ae3f7784e7db9c2ccca5a21c2c76af253c Mon Sep 17 00:00:00 2001 From: rfougier Date: Fri, 22 Jun 2018 11:42:52 -0400 Subject: [PATCH] fix(oui-header-tabs): add active class when dropdown has an active item --- .../src/header-tabs-dropdown.component.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/oui-header-tabs/src/header-tabs-dropdown.component.js b/packages/oui-header-tabs/src/header-tabs-dropdown.component.js index 9a5233f8..4a780f8f 100644 --- a/packages/oui-header-tabs/src/header-tabs-dropdown.component.js +++ b/packages/oui-header-tabs/src/header-tabs-dropdown.component.js @@ -1,22 +1,34 @@ import template from "./header-tabs-dropdown.html"; +const itemClass = "oui-header-tabs__item"; +const dropDownClass = `${itemClass}_dropdown`; + export default { bindings: { text: "@" }, controller: class { - constructor ($element, $timeout) { + constructor ($element, $scope, $timeout) { "ngInject"; this.$element = $element; + this.$scope = $scope; this.$timeout = $timeout; } $postLink () { this.$timeout(() => { this.$element - .addClass("oui-header-tabs__item oui-header-tabs__item_dropdown") + .addClass(`${itemClass} ${dropDownClass}`) .attr("role", "listitem"); + + this.$scope.$watch(() => !!this.$element[0].querySelector(`.${itemClass}_active`), hasActive => { + if (hasActive) { + this.$element.addClass(`${dropDownClass}_active`); + } else { + this.$element.removeClass(`${dropDownClass}_active`); + } + }); }); } },