added toggle directive

closes issue #38 closes pr #67
ngOfficeUIFabric · Jan 11, 2016 · d48401a · d48401a
1 parent 80db9cc
commit d48401a
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 3 deletions.
diff --git a/src/components/toggle/demo/index.html b/src/components/toggle/demo/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>ngOfficeUiFabric | uif-Toggle demo</title>
+  <meta charset="utf-8" />
+
+  <!-- office ui fabric css -->
+  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.1/fabric.min.css" />
+  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.1/fabric.components.min.css" />
+  <!-- angular library -->
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
+  <!-- ngofficeuifabric library -->
+  <script src="../../../../dist/ngOfficeUIFabric.js"></script>
+  <script src="index.js"></script>
+</head>
+
+<body ng-app="demoApp">
+
+  <h1 class="ms-font-su">Toggle Demo | &lt;uif-toggle&gt;</h1> 
+  <em>In order for this demo to work you must first build the library in debug mode.</em>
+
+  <p>
+    This markup: <br />
+    <code>
+    &lt;uif-toggle label-off=&quot;Label off&quot; label-on=&quot;Label on&quot; ng-model=&quot;toggled&quot;/&gt;  
+    </code>
+  </p>
+
+  <p>
+    Renders this:
+    <br />
+    <uif-toggle label-off="Label off" label-on="Label on" ng-model="toggled"/>
+
+  </p>
+  <p>
+    Toggled: {{toggled}}  
+  </p>
+
+
+  <p>
+    This markup: <br />
+    <code>
+      &lt;uif-toggle label-off=&quot;Label off&quot; label-on=&quot;Label on&quot; text-location=&quot;right&quot;/&gt;
+    </code>
+  </p>
+
+  <p>
+    Renders this:
+    <br />
+    <uif-toggle label-off="Label off" label-on="Label on" text-location="right"/>
+
+  </p>
+
+</body>
+
+</html>
diff --git a/src/components/toggle/demoBasicUsage/index.html b/src/components/toggle/demoBasicUsage/index.html
@@ -0,0 +1,13 @@
+<html ng-app="demoApp" ng-controller="demoController">
+<uif-toggle label-off="Label off" label-on="Label on" ng-model="toggled" />
+</html>
+
+<script type="text/javascript">
+    var demoApp = angular.module('demoApp', [
+        'officeuifabric.core',
+        'officeuifabric.components.toggle'
+        ]);
+
+        demoApp.controller('demoController', [
+        '$scope', demoController]);
+</script>
diff --git a/src/components/toggle/toggleDirective.spec.ts b/src/components/toggle/toggleDirective.spec.ts
@@ -0,0 +1,65 @@
+describe('toggleDirective: <uif-toggle />', () => {
+    beforeEach(() => {
+        angular.mock.module('officeuifabric.components.toggle');
+    });
+
+    it('should have unique ids', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
+        let $scope: any = $rootScope.$new();
+        let toggle1: JQuery = $compile('<uif-toggle label-off="No" label-on="Yes" ng-model="toggled">Test</toggle>')($scope);
+        $scope.$apply();
+
+        let checkBox1: JQuery = toggle1.find('input.ms-Toggle-input');
+        let toggle2: JQuery = $compile('<uif-toggle  label-off="No" label-on="Yes" ng-model="toggled">Test</toggle>')($scope);
+        $scope.$apply();
+
+        let checkBox2: JQuery = toggle2.find('input.ms-Toggle-input');
+        expect(checkBox1[0].id === checkBox2[0].id).toBe(false);
+    }));
+    it('should be able to set text location', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
+        let $scope: any = $rootScope.$new();
+        $scope.toggled = true;
+
+        let toggle: JQuery = $compile('<uif-toggle label-off="No" label-on="Yes" ng-model="toggled" ' +
+            'text-location="right">Toggle this, or not</toggle>')($scope);
+        $scope.$digest();
+
+        let mainToggle: JQuery = toggle.find('.ms-Toggle');
+        expect(mainToggle.hasClass('ms-Toggle--textRight')).toBe(true);
+    }));
+    it('should be able to set labels', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
+        let $scope: any = $rootScope.$new();
+        $scope.toggled = true;
+
+        let toggle: JQuery = $compile('<uif-toggle label-off="No" label-on="Yes" ng-model="toggled">Toggle this, or not</toggle>')($scope);
+        $scope.$apply();
+
+        let labelOff: JQuery = toggle.find('.ms-Label--off');
+        let labelOn: JQuery = toggle.find('.ms-Label--on');
+        let descLabel: JQuery = toggle.find('.ms-Toggle-description span');
+
+        expect(labelOff.html()).toBe('No');
+        expect(labelOn.html()).toBe('Yes');
+        expect(descLabel.html()).toBe('Toggle this, or not');
+    }));
+
+    it('should be able to toggle', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
+        let $scope: any = $rootScope.$new();
+        $scope.toggled = true;
+
+        let toggle: JQuery = $compile('<uif-toggle desc="TEST" label-off="No" label-on="Yes" ng-model="toggled"></toggle>')($scope);
+        $scope.$apply();
+
+        let checkBox: JQuery = toggle.find('input.ms-Toggle-input');
+
+        expect(checkBox.is(':checked')).toBe(true);
+
+        $scope.toggled = false;
+        $scope.$apply();
+
+        expect(checkBox.is(':checked')).toBe(false);
+
+        checkBox.click();
+        expect(checkBox.is(':checked')).toBe(true);
+        expect($scope.toggled).toBe(true);
+    }));
+});
diff --git a/src/components/toggle/toggleDirective.ts b/src/components/toggle/toggleDirective.ts
@@ -0,0 +1,95 @@
+'use strict';
+
+import * as ng from 'angular';
+
+/**
+ * @ngdoc interface
+ * @name IToggleScope
+ * @module officeuifabric.components.toggle
+ * 
+ * @description 
+ * This is the scope used by the directive. 
+ *  
+ * 
+ * @property {string} ngModel      - The scope variable to bind to the toggle.
+ * @property {string} labelOff     - The label to display when not toggled
+ * @property {string} labelOn      - The label to display when toggled
+ * @property {string} textLocation - Location of the label (left or right), compared to the toggle  
+ */
+export interface IToggleScope {
+    ngModel: string;
+    labelOff: string;
+    labelOn: string;
+    textLocation: string;
+    uniqueId: number;
+    toggleClass: string;
+}
+
+/**
+ * @ngdoc directive
+ * @name uifToggle
+ * @module officeuifabric.components.toggle
+ * 
+ * @restrict E
+ * 
+ * @description 
+ * `<uif-toggle>` is a toggle directive.
+ * 
+ * @see {link http://officeuifabric.com/components/toggle/}
+ * 
+ * @usage
+ * 
+ * <uif-toggle ng-model='toggled' />
+ */
+export class ToggleDirective implements ng.IDirective {
+    public template: string = '<div ng-class="toggleClass">' +
+                 '<span class="ms-Toggle-description"><ng-transclude/></span>' +
+                '<input type="checkbox" id="{{uniqueId}}" class="ms-Toggle-input" ng-model="ngModel" />' +
+                '<label for="{{uniqueId}}" class="ms-Toggle-field">' +
+                    '<span class="ms-Label ms-Label--off">{{labelOff}}</span>' +
+                    '<span class="ms-Label ms-Label--on">{{labelOn}}</span>' +
+                '</label>' +
+                '</div>';
+    public restrict: string = 'E';
+    public transclude: boolean = true;
+    public uniqueId: number = 1;
+    public scope: {} = {
+        labelOff: '@',
+        labelOn: '@',
+        ngModel: '=',
+        textLocation: '@'
+    };
+
+    public static factory(): ng.IDirectiveFactory {
+        const directive: ng.IDirectiveFactory = () => new ToggleDirective();
+        return directive;
+    }
+
+    public link(scope: IToggleScope, elem: ng.IAugmentedJQuery, attrs: ng.IAttributes): void {
+        if (!this.uniqueId) {
+            this.uniqueId = 1;
+        }
+
+        scope.uniqueId = this.uniqueId++;
+        scope.toggleClass = 'ms-Toggle';
+
+        if (scope.textLocation) {
+            let loc: string = scope.textLocation;
+            loc = loc.charAt(0).toUpperCase() + loc.slice(1);
+            scope.toggleClass += ' ms-Toggle--text' + loc;
+        }
+    }
+}
+
+/**
+ * @ngdoc module
+ * @name officeuifabric.components.toggle
+ * 
+ * @description 
+ * Toggle
+ * 
+ */
+export var module: ng.IModule = ng.module('officeuifabric.components.toggle', [
+    'officeuifabric.components'
+  ])
+  .directive('uifToggle', ToggleDirective.factory());
diff --git a/src/core/components.ts b/src/core/components.ts
@@ -5,7 +5,7 @@ import * as iconModule from '../components/icon/iconDirective';
 import * as spinnerModule from '../components/spinner/spinnerDirective';
 import * as tableModule from '../components/table/tableDirective';
 import * as textFieldModule from '../components/textfield/textFieldDirective';
-
+import * as toggleModule from '../components/toggle/toggleDirective';
 
 /**
  * @ngdoc module
@@ -19,6 +19,7 @@ import * as textFieldModule from '../components/textfield/textFieldDirective';
 export var module: ng.IModule = ng.module('officeuifabric.components', [
     iconModule.module.name,
     spinnerModule.module.name,
+    tableModule.module.name,
     textFieldModule.module.name,
-    tableModule.module.name
-  ]);
+    toggleModule.module.name
+]);