adding searchbox directive

closes issue #39 merges pr #81
ngOfficeUIFabric · Jan 13, 2016 · 52474e1 · 52474e1
1 parent a2a4713
commit 52474e1
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
     "run-sequence": "^1.1.5",
     "ts-loader": "^0.7.2",
     "tslint": "^3.2.0",
+    "webpack": "^1.12.9",
     "yargs": "^3.31.0"
   }
 }
diff --git a/src/components/searchbox/.gitignore b/src/components/searchbox/.gitignore
@@ -0,0 +1,2 @@
+!demo/index.js
+!demoBasicUsage/index.js
diff --git a/src/components/searchbox/demo/index.html b/src/components/searchbox/demo/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>ngOfficeUiFabric | uif-Icon demo</title>
+    <meta charset="utf-8" />
+
+    <!-- office ui fabric css -->
+    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.1.3/fabric.min.css" />
+    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.1.3/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">Searchbox Demo | &lt;uif-searchbox&gt;</h1>
+    <em>In order for this demo to work you must first build the library in debug mode.</em>
+
+    <p>
+        Use the attributes <code>uif-value</code> to specify the value of the search field. 
+    </p>
+    <p>
+        Use the attributes <code>placeholder</code> to specify the placeholder of the search field.
+    </p>
+
+    <p>
+        This markup: <br />
+        <code>
+            &lt;uif-searchbox  /&gt;
+        </code>
+    </p>
+
+    <p>
+        Renders this:
+        <br />
+        <uif-searchbox  />
+    </p>
+
+    <div ng-controller="demoController">
+        <p>
+            Example using a controller
+        </p>
+        <uif-searchbox value="value" placeholder="placeholder"></uif-searchbox>
+    </div>
+
+</body>
+
+</html>
diff --git a/src/components/searchbox/demo/index.js b/src/components/searchbox/demo/index.js
@@ -0,0 +1,14 @@
+'use strict';
+
+var demoApp = angular.module('demoApp', [
+  'officeuifabric.core',
+  'officeuifabric.components.searchbox'
+]);
+
+demoApp.controller('demoController', [
+  '$scope', demoController]);
+
+function demoController($scope) {
+    $scope.placeholder = "Placeholder text";
+    $scope.value= "search keyword"
+}
diff --git a/src/components/searchbox/demoBasicUsage/index.html b/src/components/searchbox/demoBasicUsage/index.html
@@ -0,0 +1 @@
+<uif-Searchbox placeholder="searchPlaceholder" value="textboxValue" ></uif-Searchbox>
diff --git a/src/components/searchbox/demoBasicUsage/index.js b/src/components/searchbox/demoBasicUsage/index.js
@@ -0,0 +1,3 @@
+angular.module('testApp').controller('testController', function ($scope) {
+    $scope.searchPlaceholder = 'Search Field';
+});
diff --git a/src/components/searchbox/searchboxDirective.spec.ts b/src/components/searchbox/searchboxDirective.spec.ts
@@ -0,0 +1,56 @@
+'use strict';
+
+import * as ng from 'angular';
+
+describe('searchBoxDirective: <uif-searchbox />', () => {
+    let element: ng.IAugmentedJQuery;
+    let scope: ng.IScope;
+    beforeEach(() => {
+        angular.mock.module('officeuifabric.core');
+        angular.mock.module('officeuifabric.components.searchbox');
+    });
+    beforeEach(inject(($rootScope: ng.IRootScopeService, $compile: Function) => {
+        element = ng.element('<uif-searchbox value="\'value\'" />');
+        scope = $rootScope;
+        $compile(element)(scope);
+        scope.$digest();
+    }));
+
+    afterEach(() => {
+        // myfunc.reset();
+    });
+    it('should render correct HTML', () => {
+        let elem: ng.IAugmentedJQuery = element.find('input');
+        expect(elem.length).toBe(1);
+    });
+
+    it('should have unique ids', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
+        let $scope: ng.IScope = $rootScope.$new();
+        let textBox1: ng.IAugmentedJQuery = $compile('<uif-searchbox ></uif-searchbox>')($scope);
+        $scope.$digest();
+        let textField1: JQuery = textBox1.find('.ms-SearchBox-field');
+        let textBox2: ng.IAugmentedJQuery = $compile('<uif-searchbox ></uif-searchbox>')($scope);
+        $scope.$digest();
+        let textField2: JQuery = textBox2.find('.ms-SearchBox-field');
+        expect(textField1[0].id === textField2[0].id).toBe(false);
+    }));
+    it('should be able to set value', inject(($rootScope: ng.IRootScopeService, $compile: Function) => {
+        let $newScope: ng.IScope = $rootScope.$new();
+        let tag: ng.IAugmentedJQuery = ng.element("<uif-searchbox value=\"'Value'\" />");
+        $compile(tag)($newScope);
+        $newScope.$digest();
+        expect(tag.find('.ms-SearchBox-field').val()).toBe('Value');
+    }));
+    it('hide label', inject(($rootScope: ng.IRootScopeService, $compile: Function) => {
+        let $newScope: ng.IScope = $rootScope.$new();
+        let tag: ng.IAugmentedJQuery = ng.element('<uif-searchbox />');
+        $compile(tag)($newScope);
+        $newScope.$digest();
+        tag.find('input').triggerHandler('focus');
+        $newScope.$digest();
+        expect(tag.find('.ms-SearchBox-label').hasClass('ng-hide')).toBe(true);
+        tag.find('input').triggerHandler('blur');
+        $newScope.$digest();
+        expect(tag.find('.ms-SearchBox-label').hasClass('ng-hide')).toBe(false);
+    }));
+});
diff --git a/src/components/searchbox/searchboxDirective.ts b/src/components/searchbox/searchboxDirective.ts
@@ -0,0 +1,125 @@
+'use strict';
+import * as ng from 'angular';
+
+/**
+ * @ngdoc interface
+ * @name ISearchBoxScope
+ * @module officeuifabric.components.searchbox
+ * 
+ * @description 
+ * This is the scope used by the directive. 
+ * 
+ * @property {string} placeholder - A placeholder to display over the input. Will hide as soon as a user clicks on the input.
+ * @property {string} value       - The scope variable to bind to the text input. 
+ */
+interface ISearchBoxScope extends ng.IScope {
+
+  btnMousedown: () => void;
+  inputFocus: () => void;
+  inputBlur: () => void;
+  isActive: boolean;
+  isCancel: boolean;
+  isFocus: boolean;
+  isLabelHidden: boolean;
+  placeholder: string;
+  value: string;
+}
+/**
+ * @ngdoc directive
+ * @name uifSearchbox
+ * @module officeuifabric.components.searchbox
+ * 
+ * @restrict E
+ * 
+ * @description 
+ * `<uif-searchbox>` is an searchbox directive.
+ * 
+ * @see {link http://dev.office.com/fabric/components/searchbox}
+ * 
+ * @usage
+ * 
+ * <uif-searchbox value="" placeholder="" />
+ */
+export class SearchBoxDirective implements ng.IDirective {
+
+  public template: string = '<div class="ms-SearchBox" ng-class="{\'is-active\':isActive}">' +
+  '<input class="ms-SearchBox-field" ng-focus="inputFocus()" ng-blur="inputBlur()"' +
+  ' ng-model="value" id="{{::\'searchBox_\'+$id}}" />' +
+  '<label class="ms-SearchBox-label" for="{{::\'searchBox_\'+$id}}" ng-hide="isLabelHidden">' +
+  '<i class="ms-SearchBox-icon ms-Icon ms-Icon--search" ></i> {{placeholder}}</label>' +
+  '<button class="ms-SearchBox-closeButton" ng-mousedown="btnMousedown()" type="button"><i class="ms-Icon ms-Icon--x"></i></button>' +
+  '</div>';
+
+
+  public scope: any = {
+    placeholder: '=',
+    value: '='
+  };
+
+  public static factory(): ng.IDirectiveFactory {
+    const directive: ng.IDirectiveFactory = () => new SearchBoxDirective();
+
+    return directive;
+  }
+
+  public link(scope: ISearchBoxScope, elem: ng.IAugmentedJQuery, attrs: ng.IAttributes): void {
+
+    scope.isFocus = false;
+    scope.isCancel = false;
+    scope.isLabelHidden = false;
+    scope.isActive = false;
+
+    scope.inputFocus = function(): void {
+      scope.isFocus = true;
+      scope.isLabelHidden = true;
+      scope.isActive = true;
+    };
+
+    scope.inputBlur = function(): void {
+      if (scope.isCancel) {
+        scope.value = '';
+        scope.isLabelHidden = false;
+      }
+      scope.isActive = false;
+      if (typeof (scope.value) === 'undefined' || scope.value === '') {
+        scope.isLabelHidden = false;
+      }
+
+      scope.isFocus = scope.isCancel = false;
+    };
+
+    scope.btnMousedown = function(): void {
+      scope.isCancel = true;
+    };
+
+    scope.$watch('value', function(val: string): void {
+      if (!scope.isFocus) {
+        if (val && val !== '') {
+          scope.isLabelHidden = true;
+        } else {
+          scope.isLabelHidden = false;
+        }
+        scope.value = val;
+      }
+
+    });
+
+    scope.$watch('placeholder', function(search: string): void {
+      scope.placeholder = search;
+    });
+
+
+  }
+
+
+}
+/**
+ * @ngdoc module
+ * @name officeuifabric.components.searchbox
+ * 
+ * @description 
+ * Searchbox
+ * 
+ */
+export var module: ng.IModule = ng.module('officeuifabric.components.searchbox', ['officeuifabric.components'])
+  .directive('uifSearchbox', SearchBoxDirective.factory());
diff --git a/src/core/components.ts b/src/core/components.ts
@@ -4,6 +4,7 @@ import * as ng from 'angular';
 import * as contextualMenuModule from '../components/contextualmenu/contextualMenu';
 import * as dropdownModule from '../components/dropdown/dropdownDirective';
 import * as iconModule from '../components/icon/iconDirective';
+import * as searchboxModule from '../components/searchbox/searchboxDirective';
 import * as spinnerModule from '../components/spinner/spinnerDirective';
 import * as tableModule from '../components/table/tableDirective';
 import * as textFieldModule from '../components/textfield/textFieldDirective';
@@ -19,11 +20,12 @@ import * as toggleModule from '../components/toggle/toggleDirective';
  *
  */
 export var module: ng.IModule = ng.module('officeuifabric.components', [
-    contextualMenuModule.module.name,
-    dropdownModule.module.name,
-    iconModule.module.name,
-    spinnerModule.module.name,
-    tableModule.module.name,
-    textFieldModule.module.name,
-    toggleModule.module.name
+  contextualMenuModule.module.name,
+  dropdownModule.module.name,
+  iconModule.module.name,
+  searchboxModule.module.name,
+  spinnerModule.module.name,
+  tableModule.module.name,
+  textFieldModule.module.name,
+  toggleModule.module.name
 ]);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<uif-Searchbox placeholder="searchPlaceholder" value="textboxValue" ></uif-Searchbox>