Skip to content

Commit 142a1be

Browse files
jmdobryjmdobry
committed
Merge pull request #17 from txchen/master
Add riotjs example.
2 parents 38db31b + c03f317 commit 142a1be

File tree

6 files changed

+354
-0
lines changed

6 files changed

+354
-0
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ Firebase adapter for [js-data](http://www.js-data.io/).
1212

1313
[js-data-firebase + React](https://js-data-firebase.firebaseapp.com/react/)
1414

15+
[js-data-firebase + Riot](https://js-data-firebase.firebaseapp.com/riot/)
16+
1517
### Project Status
1618

1719
__Latest Release:__ [![Latest Release](https://img.shields.io/github/release/js-data/js-data-firebase.svg?style=flat-square)](https://github.com/js-data/js-data-firebase/releases)

‎examples/angular/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<a class="example-nav-item" href="https://github.com/js-data/js-data-firebase/issues">Issues</a>
2727
<a class="example-nav-item active" href="#">js-data-firebase & Angular</a>
2828
<a class="example-nav-item" href="../react">js-data-firebase & React</a>
29+
<a class="example-nav-item" href="../riot">js-data-firebase & Riot</a>
2930
</nav>
3031
</div>
3132
</div>

‎examples/react/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
<a class="example-nav-item" href="https://github.com/js-data/js-data-firebase/issues">Issues</a>
2626
<a class="example-nav-item" href="../angular">js-data-firebase & Angular</a>
2727
<a class="example-nav-item active" href="#">js-data-firebase & React</a>
28+
<a class="example-nav-item" href="../riot">js-data-firebase & Riot</a>
2829
</nav>
2930
</div>
3031
</div>

‎examples/riot/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+
}

‎examples/riot/example.tag

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<example>
2+
<div class="panel panel-primary">
3+
<div class="panel-heading">
4+
<h3 class="panel-title">Users</h3>
5+
</div>
6+
<div class="list-group">
7+
<div each={ users } class="list-group-item" key={ id }>
8+
<div class="pull-right">
9+
<button class="btn btn-xs btn-danger" onClick={ parent.removeUser }>
10+
Delete
11+
</button>
12+
</div>
13+
{ name }
14+
</div>
15+
<div class="list-group-item">
16+
<form id="user-form" name="user-form" class="list-group-item" onSubmit={ createUser }>
17+
<input class="form-control" type="text" name="userNameInput" onKeyUp={ edit }
18+
placeholder="Enter a name and press enter" />
19+
</form>
20+
</div>
21+
</div>
22+
</div>
23+
24+
<script>
25+
var self = this
26+
self.userNameToAdd = ''
27+
var store = new JSData.DS()
28+
var firebaseAdapter = new DSFirebaseAdapter({
29+
basePath: 'https://js-data-firebase.firebaseio.com'
30+
})
31+
store.registerAdapter('firebase', firebaseAdapter, { default: true })
32+
33+
var UserStore = store.defineResource({
34+
name: 'user',
35+
afterInject: function () {
36+
UserStore.emit('change')
37+
},
38+
afterEject: function () {
39+
UserStore.emit('change')
40+
}
41+
})
42+
43+
for (var resourceName in store.definitions) {
44+
var Resource = store.definitions[resourceName]
45+
var ref = firebaseAdapter.ref.child(Resource.endpoint)
46+
// Inject items into the store when they're added to Firebase
47+
// Update items in the store when they're modified in Firebase
48+
ref.on('child_changed', function (dataSnapshot) {
49+
var data = dataSnapshot.val()
50+
if (data[Resource.idAttribute]) {
51+
Resource.inject(data)
52+
}
53+
})
54+
// Eject items from the store when they're removed from Firebase
55+
ref.on('child_removed', function (dataSnapshot) {
56+
var data = dataSnapshot.val()
57+
if (data[Resource.idAttribute]) {
58+
Resource.eject(data[Resource.idAttribute])
59+
}
60+
})
61+
}
62+
63+
UserStore.on('change', function() {
64+
self.users = UserStore.getAll()
65+
self.update()
66+
})
67+
68+
self.on('mount', function() {
69+
// Pull the initial list of users from Firebase
70+
UserStore.findAll()
71+
})
72+
73+
edit(e) {
74+
self.userNameToAdd = e.target.value
75+
}
76+
77+
createUser() {
78+
if (self.userNameToAdd) {
79+
UserStore.create({ name: self.userNameToAdd }).then(function () {
80+
self.userNameToAdd = self.userNameInput.value = ''
81+
})
82+
}
83+
}
84+
85+
removeUser(e) {
86+
UserStore.destroy(e.item.id)
87+
}
88+
</script>
89+
</example>

‎examples/riot/index.html

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>js-data-firebase & Riot</title>
6+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
7+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
8+
<link href="./example.css" rel="stylesheet">
9+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
10+
<script src="https://cdn.firebase.com/js/client/2.1.2/firebase.js"></script>
11+
<script src="https://github.com/js-data/js-data/releases/download/2.0.0-rc.1/js-data.min.js"></script>
12+
<script src="https://github.com/js-data/js-data-firebase/releases/download/2.0.0-rc.1/js-data-firebase.min.js"></script>
13+
<script src="//cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)"></script>
14+
<script src="./example.tag" type="riot/tag"></script>
15+
</head>
16+
<body>
17+
<div class="example-masthead">
18+
<div class="container">
19+
<nav class="example-nav">
20+
<a class="example-nav-item" href="http://www.js-data.io">js-data.io</a>
21+
<a class="example-nav-item" href="http://www.js-data.io/docs/dsfirebaseadapter">API Documentation</a>
22+
<a class="example-nav-item" href="https://github.com/js-data/js-data-firebase">GitHub</a>
23+
<a class="example-nav-item" href="https://groups.io/org/groupsio/jsdata">Mailing List</a>
24+
<a class="example-nav-item" href="https://github.com/js-data/js-data-firebase/issues">Issues</a>
25+
<a class="example-nav-item" href="../angular">js-data-firebase & Angular</a>
26+
<a class="example-nav-item" href="../react">js-data-firebase & React</a>
27+
<a class="example-nav-item active" href="#">js-data-firebase & Riot</a>
28+
</nav>
29+
</div>
30+
</div>
31+
<div class="container" style="margin-top: 100px">
32+
<div class="col-sm-5">
33+
<h2 class="page-header">js-data-firebase & Riot example</h2>
34+
<example></example>
35+
</div>
36+
<div>
37+
<pre><code class="javascript" style="overflow-x: auto">
38+
// RiotJs: https://muut.com/riotjs/
39+
var self = this
40+
self.userNameToAdd = ''
41+
var store = new JSData.DS()
42+
var firebaseAdapter = new DSFirebaseAdapter({
43+
basePath: 'https://js-data-firebase.firebaseio.com'
44+
})
45+
store.registerAdapter('firebase', firebaseAdapter, { default: true })
46+
47+
var UserStore = store.defineResource({
48+
name: 'user',
49+
afterInject: function () {
50+
UserStore.emit('change')
51+
},
52+
afterEject: function () {
53+
UserStore.emit('change')
54+
}
55+
})
56+
57+
for (var resourceName in store.definitions) {
58+
var Resource = store.definitions[resourceName]
59+
var ref = firebaseAdapter.ref.child(Resource.endpoint)
60+
// Inject items into the store when they're added to Firebase
61+
// Update items in the store when they're modified in Firebase
62+
ref.on('child_changed', function (dataSnapshot) {
63+
var data = dataSnapshot.val()
64+
if (data[Resource.idAttribute]) {
65+
Resource.inject(data)
66+
}
67+
})
68+
// Eject items from the store when they're removed from Firebase
69+
ref.on('child_removed', function (dataSnapshot) {
70+
var data = dataSnapshot.val()
71+
if (data[Resource.idAttribute]) {
72+
Resource.eject(data[Resource.idAttribute])
73+
}
74+
})
75+
}
76+
77+
UserStore.on('change', function() {
78+
self.users = UserStore.getAll()
79+
self.update()
80+
})
81+
82+
self.on('mount', function() {
83+
// Pull the initial list of users from Firebase
84+
UserStore.findAll()
85+
})
86+
87+
edit(e) {
88+
self.userNameToAdd = e.target.value
89+
}
90+
91+
createUser() {
92+
if (self.userNameToAdd) {
93+
UserStore.create({ name: self.userNameToAdd }).then(function () {
94+
self.userNameToAdd = self.userNameInput.value = ''
95+
})
96+
}
97+
}
98+
99+
removeUser(e) {
100+
UserStore.destroy(e.item.id)
101+
}
102+
</code></pre>
103+
</div>
104+
</div>
105+
<script>
106+
riot.mount('*')
107+
hljs.initHighlightingOnLoad();
108+
</script>
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)