Skip to content

Commit c189349

Browse files
jmdobryjmdobry
committed
Example update.
1 parent 8d3f9f8 commit c189349

File tree

3 files changed

+206
-37
lines changed

3 files changed

+206
-37
lines changed

‎example/example.css

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/*
2+
* Globals
3+
*/
4+
5+
body {
6+
color: #555;
7+
}
8+
9+
h1, .h1,
10+
h2, .h2,
11+
h3, .h3,
12+
h4, .h4,
13+
h5, .h5,
14+
h6, .h6 {
15+
margin-top: 0;
16+
font-weight: normal;
17+
color: #333;
18+
}
19+
20+
/*
21+
* Masthead for nav
22+
*/
23+
.example-masthead {
24+
background-color: #428bca;
25+
-webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
26+
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
27+
}
28+
29+
/* Nav links */
30+
.example-nav-item {
31+
position: relative;
32+
display: inline-block;
33+
padding: 10px;
34+
color: #cdddeb;
35+
}
36+
37+
.example-nav-item:hover,
38+
.example-nav-item:focus {
39+
color: #fff;
40+
text-decoration: none;
41+
}
42+
43+
/* Active state gets a caret at the bottom */
44+
.example-nav .active {
45+
color: #fff;
46+
}
47+
48+
.example-nav .active:after {
49+
position: absolute;
50+
bottom: 0;
51+
left: 50%;
52+
width: 0;
53+
height: 0;
54+
margin-left: -5px;
55+
vertical-align: middle;
56+
content: " ";
57+
border-right: 5px solid transparent;
58+
border-bottom: 5px solid;
59+
border-left: 5px solid transparent;
60+
}
61+
62+
/*
63+
* Blog name and description
64+
*/
65+
.example-header {
66+
padding-top: 20px;
67+
padding-bottom: 20px;
68+
}
69+
70+
.example-title {
71+
margin-top: 30px;
72+
margin-bottom: 0;
73+
font-size: 60px;
74+
font-weight: normal;
75+
}
76+
77+
.example-description {
78+
font-size: 20px;
79+
color: #999;
80+
}
81+
82+
/*
83+
* Main column and sidebar layout
84+
*/
85+
.example-main {
86+
font-size: 18px;
87+
line-height: 1.5;
88+
}
89+
90+
/* Sidebar modules for boxing content */
91+
.sidebar-module {
92+
padding: 15px;
93+
margin: 0 -15px 15px;
94+
}
95+
96+
.sidebar-module-inset {
97+
padding: 15px;
98+
background-color: #f5f5f5;
99+
border-radius: 4px;
100+
}
101+
102+
.sidebar-module-inset p:last-child,
103+
.sidebar-module-inset ul:last-child,
104+
.sidebar-module-inset ol:last-child {
105+
margin-bottom: 0;
106+
}
107+
108+
/* Pagination */
109+
.pager {
110+
margin-bottom: 60px;
111+
text-align: left;
112+
}
113+
114+
.pager > li > a {
115+
width: 140px;
116+
padding: 10px 20px;
117+
text-align: center;
118+
border-radius: 30px;
119+
}
120+
121+
/*
122+
* Blog posts
123+
*/
124+
.example-post {
125+
margin-bottom: 60px;
126+
}
127+
128+
.example-post-title {
129+
margin-bottom: 5px;
130+
font-size: 40px;
131+
}
132+
133+
.example-post-meta {
134+
margin-bottom: 20px;
135+
color: #999;
136+
}
137+
138+
/*
139+
* Footer
140+
*/
141+
.example-footer {
142+
padding: 40px 0;
143+
color: #999;
144+
text-align: center;
145+
background-color: #f9f9f9;
146+
border-top: 1px solid #e5e5e5;
147+
}
148+
149+
.example-footer p:last-child {
150+
margin-bottom: 0;
151+
}

‎example/example.js

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,35 @@
22
angular.module('firebase-example', [])
33
.factory('store', function () {
44
var store = new JSData.DS();
5+
56
store.registerAdapter('firebase', new DSFirebaseAdapter({
67
basePath: 'https://js-data-firebase.firebaseio.com'
78
}), { default: true });
9+
810
return store;
911
})
1012
.factory('User', function (store) {
1113
return store.defineResource('user');
1214
})
13-
.controller('firebaseCtrl', function ($scope, $timeout, User) {
15+
.controller('firebaseCtrl', function ($scope, User) {
1416
var fCtrl = this;
15-
User.findAll().then(function () {
17+
18+
User.findAll().then(function (users) {
19+
$scope.users = users;
1620
$scope.$apply();
1721
});
1822

1923
$scope.add = function (user) {
20-
$scope.creating = true;
2124
User.create(user).then(function () {
22-
$scope.creating = false;
2325
fCtrl.name = '';
24-
$timeout();
25-
}, function () {
26-
$scope.creating = false;
26+
$scope.$apply();
2727
});
2828
};
29+
2930
$scope.remove = function (user) {
30-
$scope.destroying = user.id;
3131
User.destroy(user.id).then(function () {
32-
delete $scope.destroying;
33-
$timeout();
34-
}, function () {
35-
delete $scope.destroying;
32+
$scope.$apply();
3633
});
3734
};
38-
$scope.$watch(function () {
39-
return User.lastModified();
40-
}, function () {
41-
$scope.users = User.filter();
42-
});
4335
});
4436
})();

‎example/index.html

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<title></title>
66
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
7+
<link href="./example.css" rel="stylesheet">
78
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
89
<script src="https://cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
910
<script src="https://github.com/js-data/js-data/releases/download/0.4.1/js-data-0.4.1.min.js"></script>
@@ -12,6 +13,18 @@
1213
<script src="./example.js"></script>
1314
</head>
1415
<body data-ng-controller="firebaseCtrl as fCtrl">
16+
<div class="example-masthead">
17+
<div class="container">
18+
<nav class="example-nav">
19+
<a class="example-nav-item" href="http://www.js-data.io">js-data.io</a>
20+
<a class="example-nav-item" href="https://github.com/js-data/js-data/wiki/DSFirebaseAdapter">API Documentation</a>
21+
<a class="example-nav-item" href="https://github.com/js-data/js-data-firebase">GitHub</a>
22+
<a class="example-nav-item" href="https://groups.io/org/groupsio/jsdata">Mailing List</a>
23+
<a class="example-nav-item" href="https://github.com/js-data/js-data-firebase/issues">Issues</a>
24+
<a class="example-nav-item active" href="#">Firebase Adapter Demo</a>
25+
</nav>
26+
</div>
27+
</div>
1528
<div class="container" style="margin-top: 100px">
1629
<div class="col-sm-6">
1730
<h1 class="page-header">js-data firebase example</h1>
@@ -23,8 +36,7 @@ <h3 class="panel-title">Users</h3>
2336
<div class="list-group">
2437
<div class="list-group-item" data-ng-repeat="user in users track by user.id">
2538
<div class="pull-right">
26-
<button class="btn btn-xs btn-danger" data-ng-click="remove(user)"
27-
data-ng-disabled="destroying === user.id">
39+
<button class="btn btn-xs btn-danger" data-ng-click="remove(user)">
2840
Delete
2941
</button>
3042
</div>
@@ -34,7 +46,7 @@ <h3 class="panel-title">Users</h3>
3446
<form id="user-form" name="user-form" data-ng-submit="add({ name: fCtrl.name })">
3547

3648
<input class="form-control" type="text" data-ng-model="fCtrl.name" id="name" name="name"
37-
placeholder="Enter a name and press enter" data-ng-disabled="creating"/>
49+
placeholder="Enter a name and press enter" />
3850
<input type="submit" class="hidden"/>
3951
</form>
4052
</div>
@@ -46,45 +58,59 @@ <h3 class="panel-title">Users</h3>
4658
angular.module('firebase-example', [])
4759
.factory('store', function () {
4860
var store = new JSData.DS();
49-
store.registerAdapter('http', new DSHttpAdapter({
61+
62+
store.registerAdapter('firebase', new DSFirebaseAdapter({
5063
basePath: 'https://js-data-firebase.firebaseio.com'
5164
}, { default: true });
65+
5266
return store;
5367
})
5468
.factory('User', function (store) {
5569
return store.defineResource('user');
5670
})
5771
.controller('firebaseCtrl', function ($scope, $timeout, User) {
5872
var fCtrl = this;
59-
User.findAll().then(function () {
73+
74+
User.findAll().then(function (users) {
75+
$scope.users = users;
6076
$scope.$apply();
6177
});
6278

6379
$scope.add = function (user) {
64-
$scope.creating = true;
6580
User.create(user).then(function () {
66-
$scope.creating = false;
6781
fCtrl.name = '';
68-
$timeout();
69-
}, function () {
70-
$scope.creating = false;
82+
$scope.$apply();
7183
});
7284
};
85+
7386
$scope.remove = function (user) {
74-
$scope.destroying = user.id;
7587
User.destroy(user.id).then(function () {
76-
delete $scope.destroying;
77-
$timeout();
78-
}, function () {
79-
delete $scope.destroying;
88+
$scope.$apply();
8089
});
8190
};
82-
$scope.$watch(function () {
83-
return User.lastModified();
84-
}, function () {
85-
$scope.users = User.filter();
86-
});
8791
});
92+
</code></pre>
93+
</div>
94+
<div>
95+
<pre><code data-ng-non-bindable>
96+
&lt;div class="list-group"&gt;
97+
&lt;div class="list-group-item" data-ng-repeat="user in users track by user.id"&gt;
98+
&lt;div class="pull-right"&gt;
99+
&lt;button class="btn btn-xs btn-danger" data-ng-click="remove(user)"&gt;
100+
Delete
101+
&lt;/button&gt;
102+
&lt;/div&gt;
103+
{{ user.id }}: {{ user.name }}
104+
&lt;/div&gt;
105+
&lt;div class="list-group-item"&gt;
106+
&lt;form id="user-form" name="user-form" data-ng-submit="add({ name: fCtrl.name })"&gt;
107+
108+
&lt;input class="form-control" type="text" data-ng-model="fCtrl.name" id="name" name="name"
109+
placeholder="Enter a name and press enter"/&gt;
110+
&lt;input type="submit" class="hidden"/&gt;
111+
&lt;/form&gt;
112+
&lt;/div&gt;
113+
&lt;/div&gt;
88114
</code></pre>
89115
</div>
90116
</div>

0 commit comments

Comments
 (0)