feat(navbar): added new navbar directive

mgcrea · mgcrea · commit fe3e8dd34d91 · 2013-01-01T22:10:51.000+01:00
diff --git a/src/directives/navbar.js b/src/directives/navbar.js
@@ -0,0 +1,30 @@
+
+angular.module('$strap.directives')
+
+.directive('bsNavbar', ['$location', function($location) {
+	'use strict';
+
+	return {
+		restrict: 'A',
+		link: function postLink($scope, element, attrs, controller) {
+			// Watch for the $location
+			$scope.$watch(function() {
+				return $location.path();
+			}, function(newValue, oldValue) {
+
+				element.find('li[data-match-route]').each(function(k, li) {
+					var $li = angular.element(li),
+						pattern = $li.data('match-route'),
+						regexp = new RegExp('^' + pattern + '$', ["i"]);
+
+					if(regexp.test(newValue)) {
+						$li.addClass('active');
+					} else {
+						$li.removeClass('active');
+					}
+
+				});
+			});
+		}
+	};
+}]);
diff --git a/test/unit/directives/navbarSpec.js b/test/unit/directives/navbarSpec.js
@@ -0,0 +1,51 @@
+'use strict';
+
+describe('navbar', function () {
+	var scope, $sandbox, $compile, $timeout, $location;
+
+	beforeEach(module('$strap.directives'));
+
+	beforeEach(inject(function ($injector, $rootScope, _$compile_, _$timeout_, _$location_) {
+		scope = $rootScope;
+		$compile = _$compile_;
+		$timeout = _$timeout_;
+		$location = _$location_;
+
+		$sandbox = $('<div id="sandbox"></div>').appendTo($('body'));
+	}));
+
+	afterEach(function() {
+		$sandbox.remove();
+		scope.$destroy();
+	});
+
+	var templates = {
+		'default': '<nav class="navbar" bs-navbar><ul class="nav"><li data-match-route="/network.*"><a href="#/network">Network</a></li><li data-match-route="/profile.*"><a href="#/profile">Profile</a></li></ul></nav>'
+	};
+
+	function compileDirective(template) {
+		template = template ? templates[template] : templates['default'];
+		template = $(template).appendTo($sandbox);
+		return $compile(template)(scope);
+	}
+
+	// Tests
+
+	it('should toggle "active" class for you', function () {
+		var elm = compileDirective();
+		$location.path('/network'); scope.$digest();
+		expect(elm.find('li:nth-child(1)').hasClass('active')).toBe(true);
+		$location.path('/profile'); scope.$digest();
+		expect(elm.find('li:nth-child(1)').hasClass('active')).toBe(false);
+		expect(elm.find('li:nth-child(2)').hasClass('active')).toBe(true);
+	});
+
+	it('should work with regular expressions', function () {
+		var elm = compileDirective();
+		$location.path('/network'); scope.$digest();
+		expect(elm.find('li:first').hasClass('active')).toBe(true);
+		$location.path('/network/config'); scope.$digest();
+		expect(elm.find('li:first').hasClass('active')).toBe(true);
+	});
+
+});
