Last active
August 29, 2015 14:23
-
-
Save GleasonK/12feaf65f70d1b21cdd6 to your computer and use it in GitHub Desktop.
Polymer 1.0 To-Do App
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="import" href="paper-fab"> | |
| ... | |
| <paper-fab icon="send"></paper-fab> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> | |
| </head> | |
| <body> | |
| ... | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> | |
| <link href="elements/todo-app.html" rel="import"> | |
| </head> | |
| <body fullbreed unresolved> | |
| <todo-app></todo-app> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link href="../bower_components/polymer/polymer.html" rel="import"> | |
| <!-- Element Imports --> | |
| </head> | |
| <dom-module id="todo-element" attributes="task user rid"> | |
| <style> | |
| /* CSS rules for your element */ | |
| </style> | |
| <template> | |
| <!-- local DOM for your element --> | |
| ... | |
| </template> | |
| </dom-module> | |
| <script> | |
| Polymer({ | |
| is: "element-name", | |
| properties: { | |
| ... | |
| }, | |
| ready: function(e){ | |
| ... | |
| } | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <link href="../bower_components/polymer/polymer.html" rel="import"> | |
| <link href="../bower_components/paper-checkbox/paper-checkbox.html" rel="import"> | |
| <link href="../bower_components/paper-item/paper-item.html" rel="import"> | |
| <link href="../bower_components/paper-input/paper-input.html" rel="import"> | |
| <link href="../bower_components/paper-material/paper-material.html" rel="import"> | |
| <link href="../bower_components/iron-icons/iron-icons.html" rel="import"> | |
| <link href="../bower_components/paper-fab/paper-fab.html" rel="import"> | |
| </head> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <paper-material class="todo"> | |
| <paper-checkbox checked="{{completed}}"></paper-checkbox> | |
| <paper-fab hidden={{editing}} icon="icons:create" on-tap="doEdit" mini></paper-fab> | |
| <paper-fab hidden={{!editing}} icon="icons:done" on-tap="doEdit" mini></paper-fab> | |
| <paper-item hidden="{{editing}}" id="task">{{task}}</paper-item> | |
| <paper-input id="edit" hidden="{{!editing}}" value="{{task}}"></paper-input> | |
| <paper-item>Created by: <span>{{user}}</span></paper-item> | |
| <paper-item>{{time}}</paper-item> | |
| </paper-material> <!-- data bindings in local DOM --> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| Polymer({ | |
| is: "todo-element", | |
| properties: { | |
| // declare properties for the element's public API | |
| user: { | |
| type: String, | |
| value: "" | |
| }, | |
| task: { | |
| type: String, | |
| value: "Hello!" | |
| }, | |
| rid: { | |
| type: Number, | |
| value: -1 | |
| }, | |
| time: { | |
| type: String, | |
| value: new Date().toLocaleString() | |
| }, | |
| completed: { | |
| type: Boolean, | |
| value: false, | |
| observer:'compChanged' | |
| }, | |
| editing: { | |
| type: Boolean, | |
| value: false | |
| } | |
| }, | |
| compChanged: function(e){ | |
| if(e){ this.fire('complete',this); } | |
| }, | |
| doEdit: function(e){ | |
| this.editing=!this.editing; | |
| }, | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <link href="../bower_components/polymer/polymer.html" rel="import"> | |
| <link href="../elements/todo-element.html" rel="import"> | |
| <link href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" rel="import"> | |
| <link href="../bower_components/paper-header-panel/paper-header-panel.html" rel="import"> | |
| <link href="../bower_components/paper-toolbar/paper-toolbar.html" rel="import"> | |
| <link href="../bower_components/paper-icon-button/paper-icon-button.html" rel="import"> | |
| <link href="../bower_components/paper-material/paper-material.html" rel="import"> | |
| <link href="../bower_components/paper-menu/paper-menu.html" rel="import"> | |
| <link href="../bower_components/paper-item/paper-item.html" rel="import"> | |
| <link href="../bower_components/paper-input/paper-input.html" rel="import"> | |
| <link href="../bower_components/iron-icons/iron-icons.html" rel="import"> | |
| ... | |
| </head> | |
| <dom-module id="todo-app"> | |
| <style> ... </style> | |
| <template> ... </template> | |
| </dom-module> | |
| < script> ... </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <paper-drawer-panel> | |
| <paper-header-panel drawer> | |
| <paper-toolbar> | |
| <paper-item>Side Bar Title</paper-item> | |
| </paper-toolbar> | |
| <!-- Side Bar Content --> | |
| </paper-header-panel> | |
| <paper-header-panel main> | |
| <paper-toolbar> | |
| <paper-item>Main Body Title</paper-item> | |
| </paper-toolbar> | |
| <!-- Body of Element --> | |
| </paper-header-panel> | |
| </paper-drawer-panel> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <paper-menu class="list"> | |
| <template is="dom-if" if="{{!done.length}}"> | |
| <paper-material> | |
| <paper-item>Completed tasks will appear here!</paper-item> | |
| </paper-material> | |
| </template> | |
| <template id="done" is="dom-repeat" items="{{done}}"> | |
| <paper-item>{{item.task}}<i style="margin-left: 5px;">{{item.user}}</i></paper-item> | |
| </template> | |
| </paper-menu> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div style="border-left: 1px solid #ccc;"> | |
| <!-- To create a new Todo --> | |
| <paper-material id="todoEntry"> | |
| <paper-input id="tTask" label="Task"></paper-input> | |
| <paper-input id="tUser" char-counter label="Username" maxlength="16"></paper-input> | |
| <paper-fab icon="icons:add" on-tap="postTask"></paper-fab> | |
| </paper-material> | |
| <div id="todos"> | |
| <template is="dom-if" if="{{!todo.length}}"> | |
| <paper-material> | |
| <paper-item>No Tasks remain. Updates are Real-Time so stay tuned!</paper-item> | |
| </paper-material> | |
| </template> | |
| <template id="tasks" is="dom-repeat" items="{{todo}}"> | |
| <todo-element user="{{item.user}}" task="{{item.task}}" rid="{{item.rid}}"></todo-element> | |
| </template> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Polymer({ | |
| is: "todo-app", | |
| properties: { | |
| todo: { | |
| type: Array, // Default with one value | |
| value: [{user:"Coder",task:"Learn Polymer",rid:0}] | |
| }, | |
| done: { | |
| type:Array, | |
| value: [] | |
| }, | |
| }, | |
| postTask: function(e) { // Add a new task | |
| var tsk = this.$.tTask.value; | |
| var usr = this.$.tUser.value; | |
| if (tsk==""){ | |
| alert("Task is Empty!"); | |
| return; | |
| } | |
| if (usr==""){ | |
| usr = "Anonymous"; | |
| } | |
| this.$.tTask.value = ""; | |
| //Will need to publish the task in Part 4 | |
| }, | |
| handleComplete: function(e){ | |
| var idx = findWithAttr(this.todo, 'rid', e.target.rid); | |
| var itm = this.todo[idx]; | |
| itm.task = e.target.task; //Task of the fired event | |
| itm.user = this.$.tUser.value; //User who completed task | |
| itm.type = "done"; //Change to completed | |
| // Will Publish completed item in Part 4 | |
| }, | |
| ready: function(e){ | |
| this.addEventListener('complete', this.handleComplete); | |
| } | |
| }); | |
| function randID(){ // RandID is just a large number, could be better. | |
| return Math.floor(Math.random()*10000); | |
| } | |
| function findWithAttr(array, attr, value) { //Finds object index in array by its random ID | |
| for(var i = 0; i < array.length; i += 1) { | |
| if(array[i][attr] === value) { | |
| return i; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| ... | |
| <core-pubnub | |
| publish_key="your_pub_key" | |
| subscribe_key="your_sub_key"> | |
| <core-pubnub-publish id="pub" channel="todo" message="Test"> </core-pubnub-publish> | |
| <core-pubnub-subscribe id="sub" channel="todo" messages="{{messages}}" presence="{{present}}" on-callback="subscribeCallback"></core-pubnub-subscribe> | |
| </core-pubnub> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this.$.pub.message = {task:"<task>", user:"<user>", rid:"<rid>"}; | |
| this.$.pub.publish(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| handleComplete: function(e){ | |
| ... | |
| this.$.pub.message = itm; | |
| this.$.pub.publish(); | |
| }, | |
| postTask: function(e) { | |
| ... | |
| this.$.pub.message = {type:"todo", task:tsk, user:usr, rid:randID()}; | |
| this.$.pub.publish(); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| properties: { | |
| ... | |
| messages: { | |
| type: Array, | |
| value: [] | |
| }, | |
| present: { | |
| type: Array, | |
| value: [] | |
| } | |
| }, | |
| ..., | |
| subscribeCallback: function(e){ | |
| while(this.messages.length > 0){ // Get all messages | |
| var item = this.messages.pop(); | |
| switch(item.type){ | |
| case "todo": | |
| this.unshift('todo', {task:item.task, user:item.user, rid:item.rid}); | |
| break; | |
| case "done": | |
| var idx = findWithAttr(this.todo, 'rid',item.rid); | |
| var itm = this.splice('todo', idx, 1)[0]; | |
| itm.task = item.task; | |
| itm.user = item.user; | |
| this.push('done',itm); | |
| break; | |
| default: | |
| continue; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <paper-item> | |
| <iron-icon icon="icons:face"></iron-icon> | |
| <span id="here">0</span> | |
| </paper-item> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this.addEventListener('presence', presChange); | |
| function presChange(e){ | |
| var pres = this.present.pop() | |
| this.$.here.innerHTML = pres.occupancy; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment