Merge pull request #3 from unicef-polymer/async-data-handling-slow

Async data handling slow

etools-repeatable-field-set.html

@@ -45,7 +45,7 @@
 
 <dom-module id="etools-repeatable-field-set">
   <template>
-    <style include="iron-flex iron-flex-alignment">
+    <style include="iron-flex iron-flex-alignment iron-flex-factors">
       [hidden] {
         display: none !important;
       }
@@ -167,11 +167,10 @@
           <paper-icon-button on-click="_toggle" icon$="[[_getExpandBtnIcon(open)]]"></paper-icon-button>
           <div class="title">[[title]] <span hidden$="{{showCounter}}">([[model.length]])</span></div>
 
-          <paper-fab hidden$="{{hidePlus}}"
-                     icon="add"
-                     on-tap="_addElement"
-                     hidden$="{{!open}}"
-                     title="Add"></paper-fab>
+          <paper-fab hidden$="{{hideFab}}"
+            icon="add"
+            on-tap="_addElement"
+            title="Add"></paper-fab>
         </paper-toolbar>
 
         <iron-collapse id="collapse" opened>
@@ -181,18 +180,18 @@
 
                 <div class="layout vertical center-justified wrap actions" hidden$="[[hidePlus]]">
                   <paper-icon-button class="action delete"
-                                     on-tap="_openDeleteConfirmation"
-                                     data-args$="[[index]]"
-                                     icon="cancel"></paper-icon-button>
+                    on-tap="_openDeleteConfirmation"
+                    data-args$="[[index]]"
+                    icon="cancel"></paper-icon-button>
                   <paper-icon-button class="action copy"
-                                     hidden$="[[!allowCopy]]"
-                                     on-tap="_copyElement"
-                                     data-args$="[[index]]"
-                                     icon="content-copy"></paper-icon-button>
+                    hidden$="[[!allowCopy]]"
+                    on-tap="_copyElement"
+                    data-args$="[[index]]"
+                    icon="content-copy"></paper-icon-button>
                 </div>
 
                 <div class="vertical-bar" hidden$="[[hideVerticalDivider]]"
-                     data-count-val$="[[_displayIndex(index, showCounter)]]"></div>
+                  data-count-val$="[[_displayIndex(index, showCounter)]]"></div>
 
               </div>
               <div class="item-content layout horizontal flex" id="item-[[index]]"></div>
@@ -219,6 +218,10 @@
           type: Boolean,
           value: false
         },
+        hideFab: {
+          type: Boolean,
+          computed: '_computeHideFab(hidePlus, open)'
+        },
         model: {
           type: Array,
           notify: true,
@@ -256,8 +259,19 @@
         deleteConfirmationMessage: {
           type: String,
           value: 'Are you sure you want to delete this item?'
+        },
+        _itemCounter: {
+          type: Number,
+          value: 0
+        },
+        _isCopy: {
+          type: Number,
+          value: -1
         }
       },
+      _computeHideFab: function(hidePlus, open) {
+        return hidePlus && open;
+      },
       _getHasCounterClass: function(showCounter) {
         if (showCounter) {
           return 'has-counter';
@@ -283,11 +297,6 @@
         if (!this.hidePlus) {
           var newObj = this._getItemModelObject();
           this.push('model', newObj);
-          this.async(function() {
-            var children = this._getPureChildren();
-            var index = children.length - 1;
-            this.$$('#item-' + index).appendChild(children[index]);
-          });
         }
       },
       _openDeleteConfirmation: function(event) {
@@ -303,6 +312,7 @@
               container.removeChild(firstChild);
               firstChild = container.firstChild;
             }
+            this._itemCounter -= 1;
             this.splice('model', index, 1);
           }
         }
@@ -311,11 +321,8 @@
         if (!this.hidePlus && this.allowCopy) {
           var index = parseInt(Polymer.dom(event).localTarget.getAttribute('data-args'), 10);
           var copy = JSON.parse(JSON.stringify(this.model[index]));
+          this._isCopy = index + 1;
           this.splice('model', index + 1, 0, copy);
-          this.async(function() {
-            var children = this._getPureChildren();
-            this.$$('#item-' + (index + 1)).appendChild(children[index + 1]);
-          });
         }
       },
       _toggle: function() {
@@ -353,19 +360,17 @@
         Polymer.dom(this.deleteDialog.root).querySelector('paper-dialog-scrollable').appendChild(deleteConfirmationContent);
       },
 
-      _printLightDom: function() {
+      _printLightDom: function(children) {
         var self = this;
-        self.async(function() {
-          var children = self._getPureChildren();
-          children.forEach(function(child, index) {
-            self.$$('#item-' + index).appendChild(child);
-          });
-        });
-      },
-
-      _getPureChildren: function() {
-        return this.getEffectiveChildren().filter(function(item){
-          return item.localName !== 'template';
+        if(this._isCopy !== -1 ) {
+          this._itemCounter = this._isCopy;
+          this._isCopy = -1;
+        }
+        children.forEach(function(child) {
+          self.async(function() {
+            self.$$('#item-' + self._itemCounter).appendChild(child);
+            self._itemCounter += 1;
+          })
         });
       },
       ready: function() {
@@ -374,7 +379,13 @@
         }
       },
       attached: function() {
-        this._printLightDom();
+        Polymer.dom(this).observeNodes(function(info) {
+          var addedChildren = info.addedNodes.filter(function(item) {
+            return item.localName !== 'template' && item.nodeName !== '#text';
+          });
+          this._printLightDom(addedChildren)
+        });
+
       },
       detached: function() {
         if (!this.hidePlus) {