Skip to content

Commit 38b0c3c

Browse files
dtaylor113dtaylor113
committed
Initial Commit
0 parents  commit 38b0c3c

File tree

7 files changed

+137
-0
lines changed

7 files changed

+137
-0
lines changed

‎.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Ignore Project files
2+
*.idea
3+
4+
# Ignore local nodejs packages
5+
node_modules/
6+
npm-debug.log
7+
8+
# Ignore Desktop Services Store
9+
.DS_Store
10+
11+
#Ignore generated dist files
12+
/dist

‎.npmignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Ignore Project files
2+
*.idea
3+
4+
# Ignore local nodejs packages
5+
node_modules/
6+
npm-debug.log
7+
8+
# Ignore Desktop Services Store
9+
.DS_Store

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Using PatternFly Web Components in Angular 1.5
2+
This uses Patternfly web components in an Angular 1.5 application.
3+
4+
5+
## Getting started
6+
### Build
7+
npm install
8+
### Serve
9+
npm start
10+
URL: http://localhost:8000/
11+

‎app.module.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
'use strict';
2+
3+
// Define the `demoApp` module
4+
angular.module('demoApp', []);

‎appCtrl.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
angular.module( 'demoApp' )
2+
.directive('bindEvents', function() {
3+
return {
4+
restrict: 'A',
5+
link: function(scope, element, attrs) {
6+
eventNames = attrs.bindEvents.split(',');
7+
eventNames.forEach(function(eventName) {
8+
element.bind(eventName, scope[eventName]);
9+
});
10+
}
11+
}
12+
})
13+
.controller( 'appCtrl', function( $scope, $interval) {
14+
$scope.used = 10;
15+
16+
$interval(function() {
17+
if($scope.used > 100) {
18+
$scope.used = 10;
19+
} else {
20+
$scope.used += 10;
21+
}
22+
}, 1000);
23+
24+
$scope.thresholdChangedTextClass = 'ok-text';
25+
$scope.thresholdChangedMsg = "Whew...Everythings normal :-)";
26+
27+
$scope.thresholdSet = function(e) {
28+
var threshold = e.detail.threshold;
29+
var msg = threshold.substr(threshold.lastIndexOf('-') + 1);
30+
if (msg === 'warning') {
31+
$scope.thresholdChangedMsg = "Warning! You should look at this.";
32+
$scope.thresholdChangedTextClass = 'warning-text';
33+
} else if (msg === 'danger') {
34+
$scope.thresholdChangedMsg = "Danger!! Seriously, something's wrong!";
35+
$scope.thresholdChangedTextClass = 'danger-text';
36+
} else if (msg === 'success') {
37+
$scope.thresholdChangedMsg = "Whew...Everythings normal :-)";
38+
$scope.thresholdChangedTextClass = 'ok-text';
39+
}
40+
};
41+
42+
});

‎index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html lang="en" ng-app="demoApp">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Angular 1.5 Demo App.</title>
6+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/patternfly/3.13.0/css/patternfly.css">
7+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/patternfly/3.13.0/css/patternfly-additions.css">
8+
<link rel="stylesheet" href="node_modules/patternfly-webcomponents/dist/css/patternfly.css">
9+
10+
<script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.js"></script>
11+
<script src="node_modules/angular/angular.js"></script>
12+
<script src="node_modules/patternfly-webcomponents/dist/js/patternfly.js"></script>
13+
14+
<script src="app.module.js"></script>
15+
<script src="appCtrl.js"></script>
16+
</head>
17+
<body>
18+
<div>
19+
<div ng-view>
20+
<div ng-controller="appCtrl">
21+
<div class="container">
22+
<h2>Using PatternFly Webcomponents in Angular 1.5</h2>
23+
<label class="label-title">pf-utilization-bar-chart</label>
24+
<div class="row">
25+
<div class="col-xs-8 col-sm-6 col-md-8">
26+
<pf-utilization-bar-chart bind-events="thresholdSet" id="thresholdExample" layout="inline" chart-title="RAM Usage" used="{{used}}" total="100" units="MB" threshold-warning="60" threshold-error="85"></pf-utilization-bar-chart>
27+
<span class="doc-bottom-label">Listening for Threshold Change Events: <span class="{{thresholdChangedTextClass}}" id="thresholdChangedText">{{thresholdChangedMsg}}</span></span>
28+
</div>
29+
</div>
30+
<ul>
31+
<li><label class="label-title"><i>Web components 'used' attr. value being updated from angular controller</i></label></li>
32+
<li><label class="label-title"><i>angular controller listening for web components 'thresholdSet' CustomEvent</i></label></li>
33+
</ul>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</body>
39+
</html>

‎package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "angular1-pf-wecomponents-app",
3+
"private": true,
4+
"version": "0.0.1",
5+
"description": "A demo app to show PF Web Components in Angular 1.5",
6+
"repository": "[email protected]:patternfly-webcomponents/angular1-pf-webcomponents.git",
7+
"license": "MIT",
8+
"devDependencies": {
9+
"http-server": "^0.9.0"
10+
},
11+
"scripts": {
12+
"prestart": "npm install",
13+
"start": "http-server ./ -a localhost -p 8000 -c-1",
14+
"update-index-async": "node -e \"var fs=require('fs'),indexFile='index-async.html',loaderFile='bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+' //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
15+
},
16+
"dependencies": {
17+
"angular": "^1.5.8",
18+
"patternfly-webcomponents": "*"
19+
}
20+
}

0 commit comments

Comments
 (0)