-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
note-app.html
106 lines (98 loc) · 2.42 KB
/
note-app.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<link rel="import" href="bower_components/note-app-elements/na-elements.html">
<link rel="import" href="bower_components/app-storage/app-indexeddb-mirror/app-indexeddb-mirror.html">
<link rel="import" href="bower_components/polymerfire/polymerfire.html">
<dom-module id="note-app">
<template>
<style include="note-app-shared-styles"></style>
<na-login
on-sign-in="signIn"
signed-in="[[signedIn]]"
disabled="[[!online]]">
</na-login>
<na-toolbar
signed-in="[[signedIn]]"
on-sign-out="signOut">
</na-toolbar>
<firebase-auth
id="auth"
app-name="notes"
provider="google"
signed-in="{{signedIn}}"
user="{{user}}">
</firebase-auth>
<firebase-query
id="query"
app-name="notes"
path="/notes/[[user.uid]]"
data="{{notes}}">
</firebase-query>
<app-indexeddb-mirror
session="[[user.uid]]"
key="notes"
data="{{notes}}"
persisted-data="{{persistedNotes}}">
</app-indexeddb-mirror>
<paper-icon-button
title="Grid / List"
hidden="[[!signedIn]]"
id="ui"
toggles
active="{{UI}}"
icon$="[[getUIIcon(UI)]]">
</paper-icon-button>
<div class$="[[getUIType(UI)]] notes">
<template is="dom-repeat" items="[[persistedNotes]]" as="note">
<na-note
class="box"
id$="[[note.$key]]"
title="[[note.title]]"
body="[[note.body]]"
on-tap="edit">
</na-note>
</template>
<div class="footer">
<a href="https://liyas-thomas.firebaseapp.com" title="Info" target="_blank"><iron-icon icon="info-outline"></iron-icon></a>
</div>
</div>
<paper-fab
icon="create"
on-tap="create"
disabled="[[!online]]">
</paper-fab>
<firebase-document
id="document"
app-name="notes"
path="[[editableNoteId]]"
data="{{editableNote}}">
</firebase-document>
<na-editor
id="editor"
note="{{editableNote}}"
on-close="commitChange">
</na-editor>
</template>
<script>
Polymer({
is: 'note-app',
getUIType: function (UI) {
return UI ? 'list' : 'grid';
},
getUIIcon: function(icon) {
return icon ? 'dashboard' : 'view-agenda';
},
behaviors: [Polymer.NoteAppBehavior],
signIn: function() {
this.$.auth.signInWithPopup();
},
get notesPath() {
return '/notes/' + this.user.uid;
},
toEditableId: function(noteId) {
return this.notesPath + '/' + noteId;
},
get isEditable() {
return this.online;
}
});
</script>
</dom-module>