Skip to content
This repository was archived by the owner on Jun 14, 2018. It is now read-only.

Commit 54bcf6a

Browse files
andrewconnellandrewconnell
committed
added validation for specified icon
A new enum is used to verify the specified icon is supported by Office UI Fabric. When an invalid icon is specified, an error is logged to the console. This update also includes a new TypeScript demo. ref #88
1 parent 0bbaa3a commit 54bcf6a

File tree

8 files changed

+974
-3
lines changed

8 files changed

+974
-3
lines changed

‎src/components/icon/.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
!demo/index.js
1+
!demo/index.js
2+
!demoTypeScriptUsage/bundle.js
3+
!demoTypeScriptUsage/webpack.config.js

‎src/components/icon/demo/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,17 @@ <h2>Changing the Icon</h2>
5454
Rendered icon = <uif-icon uif-type="{{selectedIcon.id}}" />
5555
</div>
5656
</div>
57+
58+
<h2>Errors When Unsupported Icons Specified</h2>
59+
<p>
60+
Wouldn't you like to see an error when you specify an icon that's not supported? Open the JavaScript console to see an error for an icon like this: <br />
61+
62+
<code>
63+
&lt;uif-icon uif-type="ngOfficeUiFabric" /&gt;
64+
</code>
65+
66+
<uif-icon uif-type="ngOfficeUiFabric" />
67+
</p>
5768

5869
</body>
5970

‎src/components/icon/demoTypeScriptUsage/bundle.js

+438
Large diffs are not rendered by default.

‎src/components/icon/demoTypeScriptUsage/index.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>ngOfficeUiFabric | uif-Icon demo</title>
6+
<meta charset="utf-8" />
7+
8+
<!-- office ui fabric css -->
9+
<link rel="stylesheet" href="../../../../node_modules/office-ui-fabric/dist/css/fabric.min.css" />
10+
<link rel="stylesheet" href="../../../../node_modules/office-ui-fabric/dist/css/fabric.components.min.css" />
11+
<!-- angular library -->
12+
<script src="../../../../node_modules/angular/angular.min.js"></script>
13+
<!-- ngofficeuifabric library -->
14+
<script src="../../../../dist/ngOfficeUIFabric.js"></script>
15+
<script src="bundle.js"></script>
16+
</head>
17+
18+
<body ng-app="demoApp">
19+
20+
<h1 class="ms-font-su">Icon Demo | &lt;uif-icon&gt;</h1>
21+
22+
<p>
23+
This demo shows how to build an Angular app with TypeScript using the provided icon enum. This option makes sure you are only using Office UI Fabric supported icons.
24+
</p>
25+
<p>
26+
The included icon enum is not intended to be passed directly to the directive's <code>uif-type</code> attribute, rather it should be used to create the string. Refer to the <strong>index.ts</strong> file in this demo to see usage.
27+
</p>
28+
29+
<p>
30+
The TypeScript in this demo uses external modules & this needs a module loader. The ngOfficeUiFabric uses webpack, so we'll use that in this demo as well. We took the <code>index.ts</code> and compile it using webpack to a bundle <code>index.js</code>.
31+
</p>
32+
<p>
33+
After building the library...<br />
34+
<code>gulp build-lib --debug</code><br /><br />
35+
36+
Use webpack bundle was created using the following command, run from within the same folder as the demo. It uses the <code>webpack.config.js</code> for all settings:<br />
37+
<code>webpack</code>
38+
</p>
39+
40+
<h2>Changing the Icon</h2>
41+
<div ng-controller="demoController as controller">
42+
<select ng-model="controller.selectedIcon"
43+
ng-options="icon as icon for icon in controller.icons">
44+
</select>
45+
46+
<div>
47+
Selected icon = <code>{{controller.selectedIcon}}</code><br />
48+
Rendered icon = <uif-icon uif-type="{{controller.selectedIcon}}" />
49+
</div>
50+
</div>
51+
52+
</body>
53+
54+
</html>

‎src/components/icon/demoTypeScriptUsage/index.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
'use strict';
2+
3+
import * as ng from 'angular';
4+
import {IconEnum} from './../iconEnum';
5+
6+
export class DemoController {
7+
public icons: string[] = [];
8+
public selectedIcon: any = {};
9+
10+
constructor() {
11+
// set the collection
12+
this.icons = this._fillIconCollection();
13+
// pick one
14+
this.selectedIcon = this.icons[3];
15+
};
16+
17+
/**
18+
* @description
19+
* Populates the icon collection using the provided enum.
20+
*
21+
* @returns {string[]} - Array of icons as strings.
22+
*/
23+
private _fillIconCollection(): string[] {
24+
let icons: string[] = [];
25+
26+
// fill with real options
27+
icons.push(IconEnum[IconEnum.arrowDownLeft]);
28+
icons.push(IconEnum[IconEnum.circleEmpty]);
29+
icons.push(IconEnum[IconEnum.circleFill]);
30+
icons.push(IconEnum[IconEnum.plus]);
31+
icons.push(IconEnum[IconEnum.minus]);
32+
icons.push(IconEnum[IconEnum.question]);
33+
34+
// add one fake option... this should be a real icon tho!!! :)
35+
icons.push('ngOfficeUiFabric');
36+
37+
return icons;
38+
};
39+
}
40+
41+
export var module: ng.IModule = ng.module('demoApp', [
42+
'officeuifabric.core',
43+
'officeuifabric.components.icon'])
44+
.controller('demoController', [DemoController]);

‎src/components/icon/demoTypeScriptUsage/webpack.config.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
entry: './index.ts',
3+
output: {
4+
filename: 'bundle.js'
5+
},
6+
externals: {
7+
'angular': 'angular'
8+
},
9+
module: {
10+
target: 'web',
11+
loaders: [
12+
{
13+
test: /\.ts$/,
14+
loader: 'ts-loader'
15+
}
16+
]
17+
},
18+
resolve: {
19+
extensions: ['', '.js', '.ts']
20+
}
21+
}

‎src/components/icon/iconDirective.ts

+45-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,34 @@
11
'use strict';
22

33
import * as ng from 'angular';
4+
import {IconEnum} from './iconEnum';
5+
6+
/**
7+
* @ngdoc interface
8+
* @name IIconScope
9+
* @module officeuifabric.components.contextualmenu
10+
*
11+
* @description
12+
* This is the scope used by the `<uif-icon />` directive.
13+
*
14+
* @property {string} uifType - Icon to display. Possible types are defined in {@link IconEnum}.
15+
*/
16+
export interface IIconScope extends ng.IScope {
17+
uifType: string;
18+
}
19+
20+
/**
21+
* @controller
22+
* @name IconController
23+
* @private
24+
* @description
25+
* Used to more easily inject the Angular $log service into the directive.
26+
*/
27+
class IconController {
28+
public static $inject: string[] = ['$log'];
29+
constructor(public $log: ng.ILogService) {
30+
}
31+
}
432

533
/**
634
* @ngdoc directive
@@ -26,11 +54,26 @@ export class IconDirective implements ng.IDirective {
2654
uifType: '@'
2755
};
2856
public transclude: Boolean = true;
57+
public controller: any = IconController;
58+
public controllerAs: string = 'icon';
2959

3060
public static factory(): ng.IDirectiveFactory {
3161
const directive: ng.IDirectiveFactory = () => new IconDirective();
3262
return directive;
3363
}
64+
65+
public link(scope: IIconScope, instanceElement: ng.IAugmentedJQuery, attrs: ng.IAttributes, controller: IconController): void {
66+
// add watcher
67+
scope.$watch('uifType', (newValule: string, oldValue: string) => {
68+
// verify a valid icon was passed in
69+
if (IconEnum[newValule] === undefined) {
70+
controller.$log.error('Error [ngOfficeUiFabric] officeuifabric.components.icon - Unsupported icon: ' +
71+
'The icon (\'' + scope.uifType + '\') is not supported by the Office UI Fabric. ' +
72+
'Supported options are listed here: ' +
73+
'https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/src/components/icon/iconEnum.ts');
74+
}
75+
});
76+
};
3477
}
3578

3679
/**
@@ -42,6 +85,6 @@ export class IconDirective implements ng.IDirective {
4285
*
4386
*/
4487
export var module: ng.IModule = ng.module('officeuifabric.components.icon', [
45-
'officeuifabric.components'
46-
])
88+
'officeuifabric.components'
89+
])
4790
.directive('uifIcon', IconDirective.factory());

0 commit comments

Comments
 (0)