├── .gitignore
├── README.md
├── meteor-elements.html
├── bower.json
├── meteor-session.html
├── LICENSE.md
├── meteor-call.html
├── index.html
├── meteor-user.html
├── meteor-connection.html
├── meteor-subscribe.html
├── meteor-collection.html
└── meteor-query.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # meteor-elements
2 | 
3 | Check the project [website](http://atoy40.github.io/meteor-elements/) for more informations.
4 | 


--------------------------------------------------------------------------------
/meteor-elements.html:
--------------------------------------------------------------------------------
1 | <link rel="import" href="meteor-call.html">
2 | <link rel="import" href="meteor-connection.html">
3 | <link rel="import" href="meteor-collection.html">
4 | <link rel="import" href="meteor-query.html">
5 | <link rel="import" href="meteor-session.html">
6 | <link rel="import" href="meteor-subscribe.html">
7 | <link rel="import" href="meteor-user.html">
8 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "meteor-elements",
 3 |   "version": "0.4.0",
 4 |   "private": true,
 5 |   "main": "meteor-elements.html",
 6 |   "authors": [
 7 |     "Anthony Hinsinger <anthony.hinsinger@gmail.com>"
 8 |   ],
 9 |   "license": "MIT",
10 |   "ignore": [
11 |     "**/.*",
12 |     "bower_components"
13 |   ],
14 |   "keywords": [
15 |     "web-components",
16 |     "polymer",
17 |     "meteor",
18 |     "wrapper"
19 |   ],
20 |   "dependencies": {
21 |     "polymer": "Polymer/polymer#~1.3.0"
22 |   },
23 |   "devDependencies": {
24 |     "iron-component-page": "PolymerElements/iron-component-page#~1.0.0",
25 |     "webcomponentsjs": "Polymer/webcomponentsjs#~0.7.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/meteor-session.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | A wrapper to meteor Session object.
 3 | 
 4 | Example :
 5 | 
 6 |       <meteor-session name="mainPanelIsActivated" value="{{isMainPanelIsActivated}}"></meteor-session>
 7 | 
 8 |       <div hidden$="{{isMainPanelIsActivated}}">
 9 |         ...
10 |       </div>
11 | -->
12 | 
13 | <script>
14 | Polymer({
15 |   is: 'meteor-session',
16 |   properties: {
17 |     name: {
18 |       type: String,
19 |       observer : '_nameChanged'
20 |     },
21 |     result: {
22 |       type: Object,
23 |       notify : true,
24 |       observer : '_resultChanged'
25 |     }
26 |   },
27 |   _nameChanged : function() {
28 |     if (this._computation)
29 |       this._computation.stop();
30 | 
31 |     this._computation = Tracker.autorun(function() {
32 |       this.result = Session.get(this.name);
33 |     }.bind(this));
34 |   },
35 |   _resultChanged : function(newValue, oldValue) {
36 |     if(!EJSON.equals(oldValue,newValue))
37 |       Session.set(this.name, newValue);
38 |   },
39 |   detached: function() {
40 |     if (this._computation)
41 |       this._computation.stop();
42 |   },
43 | });
44 | </script>
45 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Anthony Hinsinger
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/meteor-call.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | A wrapper to meteor Method.call.
 3 | 
 4 | Example :
 5 | 
 6 |     <meteor-call name="getscore" args="[100, 200]" result={{players}}></meteor-call>
 7 | 
 8 |     <template is="dom-repeat" items="{{players}}">
 9 |       <div>
10 |         <span>{{item.name}}</span>
11 |       </div>
12 |     </template>
13 | -->
14 | <script>
15 | Polymer({
16 |   is: 'meteor-call',
17 | 
18 |   /**
19 |    * Fired when call has result
20 |    * @param {object} result
21 |    * @event result
22 |    */
23 | 
24 |   /**
25 |    * Fired when call has response error
26 |    * @param {object} error
27 |    * @event error
28 |    */
29 | 
30 |   properties: {
31 |     /**
32 |      * Meteor method name to call.
33 |      */
34 |     name: {
35 |       type: String,
36 |       value: ""
37 |     },
38 |     /**
39 |      * An array of Optional method arguments
40 |      */
41 |     args: {
42 |       type: Array,
43 |       value: function() { return []; }
44 |     },
45 |     /**
46 |      * Result of last call
47 |      */
48 |     result: {
49 |       type: Object,
50 |       notify : true
51 |     },
52 |   },
53 |   observers: [ '_recall(name, args)' ],
54 |   _recall : function(name , args) {
55 |     if(name) {
56 |       Meteor.apply(name, args, function (error, result) {
57 |         if(error) {
58 |           this.fire('error', {error: error});
59 |         } else {
60 |           this.result = result;
61 |           this.fire('result', {result: result});
62 |         }
63 |       }.bind(this));
64 |     }
65 |   }
66 | });
67 | </script>
68 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | The MIT License (MIT)
 5 | 
 6 | Copyright (c) 2015 Anthony Hinsinger
 7 | 
 8 | Permission is hereby granted, free of charge, to any person obtaining a copy
 9 | of this software and associated documentation files (the "Software"), to deal
10 | in the Software without restriction, including without limitation the rights
11 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
12 | copies of the Software, and to permit persons to whom the Software is
13 | furnished to do so, subject to the following conditions:
14 | 
15 | The above copyright notice and this permission notice shall be included in
16 | all copies or substantial portions of the Software.
17 | 
18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
21 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
22 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
23 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
24 | THE SOFTWARE.
25 | -->
26 | <html>
27 | <head>
28 | 
29 |   <script src="../webcomponentsjs/webcomponents-lite.js"></script>
30 |   <link rel="import" href="../iron-component-page/iron-component-page.html">
31 |   <title>Meteor elements</title>
32 | </head>
33 | <body>
34 | 
35 |   <iron-component-page></iron-component-page>
36 | 
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/meteor-user.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | This element manage current user.
 3 | 
 4 | Example:
 5 | 
 6 |     <meteor-user logged-in={{conn}} user={{user}}></meteor-user>
 7 | 
 8 |     <span hidden$="{{!conn}}" >UserName : {{user.profile.name}}</span>
 9 | 
10 | -->
11 | 
12 | <script>
13 | Polymer({
14 |   is: 'meteor-user',
15 | 
16 |   properties: {
17 | 
18 |     /**
19 |      * Get the current user id, or null if no user is logged in.
20 |      */
21 |     id: {
22 |       type: String,
23 |       notify: true,
24 |       readOnly: true
25 |     },
26 |     /**
27 |      * Get the current user record, or null if no user is logged in.
28 |      */
29 |     user : {
30 |       type : Object,
31 |       notify: true,
32 |       readOnly: true
33 |     },
34 |     /**
35 |      * Helper on user is logged in or not
36 |      */
37 |     loggedIn: {
38 |       type: Boolean,
39 |       notify: true,
40 |       readOnly: true,
41 |       value: false
42 |     },
43 |     /**
44 |      * True if a login method (such as Meteor.loginWithPassword, Meteor.loginWithFacebook, or Accounts.createUser) is currently in progress.
45 |      */
46 |     loggingIn: {
47 |       type: Boolean,
48 |       notify: true,
49 |       readOnly: true,
50 |       value: false
51 |     },
52 | 
53 |   },
54 |   /**
55 |    * Log the user out.
56 |    */
57 |   logout : function() {
58 |     Meteor.logout();
59 |   },
60 |   ready: function() {
61 |     this._userComputation = Tracker.autorun(function() {
62 |       var user = Meteor.user();
63 | 
64 |       this._setId(user ? user._id : null);
65 |       this._setUser(user);
66 |       this._setLoggedIn(user != null);
67 |     }.bind(this));
68 | 
69 |     this._loggingInComputation = Tracker.autorun(function() {
70 |       this._setLoggingIn(Meteor.loggingIn());
71 |     }.bind(this));
72 | 
73 |   },
74 |   detached: function() {
75 |     if (this._userComputation)
76 |       this._userComputation.stop();
77 |     if (this._loggingInComputation)
78 |       this._loggingInComputation.stop();
79 |   }
80 | });
81 | </script>
82 | 


--------------------------------------------------------------------------------
/meteor-connection.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | This element manage and inspect the network connection between the Meteor client and server.
 3 | 
 4 | Example:
 5 | 
 6 |       <meteor-connection connected={{conn}} on-server-disconnected="_onDisconnect"></meteor-connection>
 7 |       <template is="dom-if" if="{{conn}}">
 8 |           <div>Meteor server is connected</div>
 9 |       </template>
10 | 
11 | -->
12 | 
13 | <script>
14 |   Polymer({
15 |     is: 'meteor-connection',
16 | 
17 |     /**
18 |      * Fired when the connection is established.
19 |      *
20 |      * @event server-connected
21 |      */
22 | 
23 |     /**
24 |       * Fired when the server is disconnected.
25 |       *
26 |       * @event server-disconnected
27 |       */
28 | 
29 |     properties: {
30 |       /**
31 |        * Meteor status object.
32 |        */
33 |       status: {
34 |         type: Object,
35 |         notify: true,
36 |         readOnly: true
37 |       },
38 | 
39 |       /**
40 |        * the connected field from the status object.
41 |        */
42 |       connected: {
43 |         type: Boolean,
44 |         notify: true,
45 |         readOnly: true,
46 |         value: false
47 |       }
48 |     },
49 |     /**
50 |      * Disconnect the client from the server.
51 |      */
52 |     disconnect: function() {
53 |       Meteor.disconnect();
54 |     },
55 |     /**
56 |      * Force an immediate reconnection attempt if the client is not connected to the server.
57 |      */
58 |     reconnect: function() {
59 |       Meteor.reconnect();
60 |     },
61 |     ready: function() {
62 |       this._computation = Tracker.autorun(function() {
63 |         var status = Meteor.status();
64 | 
65 |         if (this.connected != status.connected) {
66 |           this.fire(status.connected ? 'server-connected' : 'server-disconnected', { status: status });
67 |         }
68 | 
69 |         this._setStatus(status);
70 |         this._setConnected(status.connected);
71 |       }.bind(this));
72 |     },
73 |     detached: function() {
74 |       if (this._computation)
75 |         this._computation.stop();
76 |     },
77 |   });
78 | </script>
79 | 


--------------------------------------------------------------------------------
/meteor-subscribe.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Subscribe to a Meteor (DDP) server publication.
 3 | 
 4 | Example :
 5 | 
 6 |       <meteor-subscribe name="peoples" args="[]" isready="{{subready}}"></meteor-subscribe>
 7 | 
 8 | -->
 9 | 
10 | <script>
11 |   Polymer({
12 |     is: 'meteor-subscribe',
13 | 
14 |     /**
15 |      * Fired when the subscribtion becomes ready (first shot of results received).
16 |      *
17 |      * @event subscribe-ready
18 |      */
19 | 
20 |     /**
21 |      * Fired when an error occurs. The detail object contains the error.
22 |      *
23 |      * @event subscribe-error
24 |      */
25 | 
26 |     properties: {
27 |       /**
28 |        * Publish name to subscribe.
29 |        */
30 |       name: {
31 |         type: String,
32 |         value: ""
33 |       },
34 | 
35 |       /**
36 |        * The subscribe arguments.
37 |        */
38 |       args: {
39 |         type: Array,
40 |         value: null
41 |       },
42 | 
43 |       /**
44 |        * Wait to get an Array on args to start subscription
45 |        */
46 |       waitargs: {
47 |         type: Boolean,
48 |         value: true
49 |       },
50 | 
51 |       /**
52 |        * Ready state (first shot of results received).
53 |        */
54 |       isready: {
55 |         type: Boolean,
56 |         value: false,
57 |         notify: true
58 |       }
59 |     },
60 |     observers: [ '_resub(name, args, waitargs)' ],
61 |     _resub: function(name, args, waitargs) {
62 |       //console.log("(re)subscribe meteor-subscribe "+name+" "+ args);
63 |       this.stop();
64 | 
65 |       if (this.name && (args instanceof Array || !waitargs)) {
66 |         var callargs = this.args.slice(0);
67 |         callargs.unshift(this.name);
68 |         callargs.push({
69 |           onStop: function(err) {
70 |             if (err)
71 |               this.fire('subscribe-error', { error: err });
72 |             this.isready = false;
73 |           }.bind(this),
74 |           onReady: function() {
75 |             this.isready = true;
76 |             this.fire('subscribe-ready');
77 |           }.bind(this)
78 |         });
79 | 
80 |         this._handle = Meteor.subscribe.apply(null, callargs);
81 |       }
82 |     },
83 |     /** Stop this subscription */
84 |     stop: function() {
85 |       if (this._handle) {
86 |         this._handle.stop();
87 |         this._handle = null;
88 |       }
89 |     },
90 |     ready: function() {
91 |     }
92 |   });
93 | </script>
94 | 


--------------------------------------------------------------------------------
/meteor-collection.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | A wrapper to meteor Mongo.Collection object.
  3 | -->
  4 | 
  5 | <script>
  6 |   Polymer({
  7 |     is: 'meteor-collection',
  8 | 
  9 |     /**
 10 |      * Fired when a document has been inserted. detail contains the id of the new document.
 11 |      *
 12 |      * @event insert
 13 |      */
 14 | 
 15 |     /**
 16 |      * Fired when a documents has been removed.
 17 |      *
 18 |      * @event removed
 19 |      */
 20 | 
 21 |     /**
 22 |      * Fired when a documents has been updated.
 23 |      *
 24 |      * @event updated
 25 |      */
 26 | 
 27 |     /**
 28 |      * Fired when an error occurs while inserting or removing document. detail contains the error object
 29 |      *
 30 |      * @event error
 31 |      */
 32 | 
 33 |     properties: {
 34 |       /**
 35 |        * Name of the mongo collection.
 36 |        */
 37 |       name: {
 38 |         type: String,
 39 |         value: null,
 40 |         observer: '_nameChanged'
 41 |       },
 42 |       /**
 43 |        * The collection instance.
 44 |        */
 45 |       _ref: {
 46 |         type: Object,
 47 |         value: null,
 48 |         notify: true,
 49 |       }
 50 |     },
 51 |     /**
 52 |      * React to collection name changes.
 53 |      */
 54 |     _nameChanged: function() {
 55 |       if (this.name) {
 56 |         if (window['__meteor_elements_'+this.name]) {
 57 |           this._ref = window['__meteor_elements_'+this.name];
 58 |         } else {
 59 |           this._ref = new Mongo.Collection(this.name);
 60 |           window['__meteor_elements_'+this.name] = this._ref;
 61 |         }
 62 |       } else {
 63 |         this._ref = null;
 64 |       }
 65 | 
 66 |       this._setupChildQueries();
 67 |     },
 68 |     /**
 69 |      * Setup the collection reference to childs elements.
 70 |      */
 71 |     _setupChildQueries: function() {
 72 |       var childs = Polymer.dom(this).childNodes;
 73 |       for(var i=0; i<childs.length; i++) {
 74 |         if (typeof childs[i]._setupCollection === 'function') {
 75 |           childs[i]._setupCollection(this._ref);
 76 |         }
 77 |       }
 78 |     },
 79 |     /**
 80 |      * Insert a document to collection.
 81 |      *
 82 |      * @method insert
 83 |      */
 84 |     insert: function(doc) {
 85 |       if (this._ref)
 86 |         this._ref.insert(doc, function(err, id) {
 87 |           if (err)
 88 |             this.fire('error', { error: err });
 89 |           else
 90 |             this.fire('insert', { id: id });
 91 |         }.bind(this));
 92 |     },
 93 |     /**
 94 |      * Remove documents in collection.
 95 |      *
 96 |      * @method remove
 97 |      */
 98 |     remove: function(selector) {
 99 |       if (this._ref)
100 |         this._ref.remove(selector, function(err) {
101 |           if (err)
102 |             this.fire('error', { error: err });
103 |           else
104 |             this.fire('removed');
105 |         }.bind(this));
106 |     },
107 |     /**
108 |      * Modify one or more documents in the collection.
109 |      *
110 |      * @method update
111 |      */
112 |     update: function(selector, modifier, options) {
113 |       options = options || {};
114 |       if (this._ref)
115 |       this._ref.update(selector, modifier, options, function(err) {
116 |         if (err)
117 |           this.fire('error', { error: err });
118 |         else
119 |           this.fire('updated');
120 |       }.bind(this));
121 |     },
122 |     ready: function() {
123 |     }
124 |   });
125 | </script>
126 | 


--------------------------------------------------------------------------------
/meteor-query.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | Start a reactive collection query. This element must be a direct child of a meteor-collection element.
  3 | 
  4 | 
  5 | Example :
  6 | 
  7 |       <meteor-collection name="peoples" on-insert="_onInsert">
  8 |         <meteor-query query='{ "age": 18 }' options='{"sort": { size: -1 } }' data="{{eighties}}"></meteor-query>
  9 |       </meteor-collection>
 10 | 
 11 |       <template is="dom-repeat" items="{{eighties}}">
 12 |         <div>
 13 |           <span>{{item.name}}</span>
 14 |         </div>
 15 |       </template>
 16 | 
 17 | -->
 18 | 
 19 | <script>
 20 |   Polymer({
 21 |     is: 'meteor-query',
 22 | 
 23 |     properties: {
 24 |       /**
 25 |        * Data contains collection objects matching the query.
 26 |        */
 27 |       data: {
 28 |         type: Array,
 29 |         value: function() { return []; },
 30 |         notify: true,
 31 |         readOnly: true
 32 |       },
 33 | 
 34 |       /**
 35 |        * The collection object to query
 36 |        */
 37 |       _collection: {
 38 |         type: Object,
 39 |         value: null
 40 |       },
 41 | 
 42 |       /**
 43 |        *  A query describing the documents to find.
 44 |        */
 45 |       query: {
 46 |         type: Object,
 47 |         value: function() { return {}; },
 48 |       },
 49 | 
 50 |       /**
 51 |        * An object containing query options (sort, skip and more).
 52 |        */
 53 |       options: {
 54 |         type: Object,
 55 |         value: function() { return {}; },
 56 |       },
 57 | 
 58 |       /**
 59 |        * Activate this query.
 60 |        */
 61 |       enable: {
 62 |         type: Boolean,
 63 |         value: false,
 64 |       },
 65 |     },
 66 | 
 67 |     observers: [ '_refind(_collection, query, options, enable)' ],
 68 | 
 69 |     _setupCollection: function(collection) {
 70 |       this._collection = collection;
 71 |     },
 72 |     _refind: function(_collection, query, options, enable) {
 73 |       this.debounce("refind", this._setupObserver);
 74 |     },
 75 |     _setupObserver: function(_collection, query, options, enable) {
 76 |       //console.log("(re)find meteor-query "+this._collection+" "+this.query+" "+this.options);
 77 | 
 78 |       if (this._handle) {
 79 |         this._handle.stop();
 80 |         this._handle = null;
 81 |         this.splice('data', 0, this.data.length);
 82 |       }
 83 | 
 84 |       if (this._collection && this.enable) {
 85 |         this.initialdata = [];
 86 |         this.initdone = false;
 87 | 
 88 |         this._handle = this._collection.find(this.query, this.options).observeChanges({
 89 |           addedBefore: function(id, fields, before) {
 90 |             // added _id
 91 |             fields._id = id;
 92 |             if (before == null) {
 93 |               if (this.initdone) {
 94 |                 this.push('data', fields);
 95 |               } else {
 96 |                 this.initialdata.push(fields);
 97 |               }
 98 |             } else {
 99 |               if (this.initdone) {
100 |                 var i = this._findIndex(this.data, before);
101 |                 this.splice('data', i, 0, fields);
102 |               } else {
103 |                 var i = this._findIndex(this.initData, before);
104 |                 this.initdata.splice(i, 0, fields);
105 |               }
106 |             }
107 |           }.bind(this),
108 |           changed: function(id, fields) {
109 |             var index = this._findIndex(this.data, id);
110 |             for(var field in fields) {
111 |               var path = ['data', index, field].join('.');
112 |               this.set(path, fields[field]);
113 |             }
114 |           }.bind(this),
115 |           movedBefore: function(id, before) {
116 |             var oldindex = this._findIndex(this.data, id);
117 |             var entry = this.splice('data', oldindex, 1)[0];
118 | 
119 |             if (before) {
120 |               var newindex = this._findIndex(this.data, before);
121 |               this.splice('data', newindex, 0, entry);
122 |             } else {
123 |               this.push('data', entry);
124 |             }
125 |           }.bind(this),
126 |           removed: function(id) {
127 |             var index = this._findIndex(this.data, id);
128 |             this.splice('data', i, 1);
129 |           }.bind(this)
130 |         });
131 | 
132 |         // push initial data as observeChanges returns.
133 |         this.initdone = true;
134 |         // unshift splice arguements to apply it to data array.
135 |         this.initialdata.unshift(0);
136 |         this.initialdata.unshift(0);
137 |         this.initialdata.unshift('data');
138 |         this.splice.apply(this, this.initialdata);
139 |         this.initialdata = null;
140 |       }
141 |     },
142 |     _findIndex: function(data, id) {
143 |       for (i = 0; i < data.length; i++) {
144 |         if (EJSON.equals(data[i]._id,id)) {
145 |           return i;
146 |         }
147 |       }
148 |       return -1;
149 |     },
150 |     ready: function() {
151 |     }
152 |   });
153 | </script>
154 | 


--------------------------------------------------------------------------------