From 919b92400994792725ba36c15e4e00a3d0438216 Mon Sep 17 00:00:00 2001
From: Anton Platonov <platosha@gmail.com>
Date: Mon, 13 Mar 2017 14:15:27 +0200
Subject: [PATCH] Fix demos to work IE11

Fixes #799
---
 demo/columns.html           |  22 +++---
 demo/data.html              | 114 +++++++++++++++-------------
 demo/row-details.html       |  14 ++--
 demo/selection.html         | 146 ++++++++++++++++++------------------
 demo/sorting-filtering.html |  92 ++++++++++++-----------
 demo/x-data-provider.html   |  92 ++++++++++++-----------
 6 files changed, 252 insertions(+), 228 deletions(-)

diff --git a/demo/columns.html b/demo/columns.html
index bec4dd81a..145771580 100644
--- a/demo/columns.html
+++ b/demo/columns.html
@@ -295,16 +295,18 @@ <h3>Dynamic Columns using dom-repeat</h3>
             </vaadin-grid>
           </template>
           <script>
-            Polymer({
-              is: 'x-dynamic-columns',
-
-              properties: {
-                columns: Array
-              },
-
-              ready: function() {
-                this.columns = ['name.first', 'name.last', 'email'];
-              }
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'x-dynamic-columns',
+
+                properties: {
+                  columns: Array
+                },
+
+                ready: function() {
+                  this.columns = ['name.first', 'name.last', 'email'];
+                }
+              });
             });
           </script>
         </dom-module>
diff --git a/demo/data.html b/demo/data.html
index 80525a10c..a84b3b0b9 100644
--- a/demo/data.html
+++ b/demo/data.html
@@ -49,18 +49,20 @@ <h3>Assigning Array Data</h3>
             </vaadin-grid>
           </template>
           <script>
-            Polymer({
-              is: 'x-array-data-example',
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'x-array-data-example',
 
-              ready: function() {
-                var items = [];
+                ready: function() {
+                  var items = [];
 
-                for (var i = 0; i < 100; i++) {
-                  items.push({firstName: 'First Name ' + i, lastName: 'Last Name ' + i});
-                }
+                  for (var i = 0; i < 100; i++) {
+                    items.push({firstName: 'First Name ' + i, lastName: 'Last Name ' + i});
+                  }
 
-                this.items = items;
-              }
+                  this.items = items;
+                }
+              });
             });
           </script>
         </dom-module>
@@ -104,26 +106,28 @@ <h3>Dynamic Array Data</h3>
             </vaadin-grid>
           </template>
           <script>
-            Polymer({
-              is: 'x-dynamic-data-example',
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'x-dynamic-data-example',
 
-              ready: function() {
-                var items = [];
+                ready: function() {
+                  var items = [];
 
-                for (var i = 0; i < 10; i++) {
-                  items.push({firstName: 'First Name ' + i, lastName: 'Last Name ' + i});
-                }
+                  for (var i = 0; i < 10; i++) {
+                    items.push({firstName: 'First Name ' + i, lastName: 'Last Name ' + i});
+                  }
 
-                this.items = items;
-              },
+                  this.items = items;
+                },
 
-              _add: function() {
-                this.push('items', {firstName: 'First Name ' + this.items.length, lastName: 'Last Name ' + this.items.length});
-              },
+                _add: function() {
+                  this.push('items', {firstName: 'First Name ' + this.items.length, lastName: 'Last Name ' + this.items.length});
+                },
 
-              _remove: function() {
-                this.pop('items');
-              }
+                _remove: function() {
+                  this.pop('items');
+                }
+              });
             });
           </script>
         </dom-module>
@@ -172,26 +176,28 @@ <h3>Dynamic Height</h3>
             </vaadin-grid>
           </template>
           <script>
-            Polymer({
-              is: 'x-dynamic-height-example',
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'x-dynamic-height-example',
 
-              ready: function() {
-                var items = [];
+                ready: function() {
+                  var items = [];
 
-                for (var i = 0; i < 5; i++) {
-                  items.push({firstName: 'First Name ' + i, lastName: 'Last Name ' + i});
-                }
+                  for (var i = 0; i < 5; i++) {
+                    items.push({firstName: 'First Name ' + i, lastName: 'Last Name ' + i});
+                  }
 
-                this.items = items;
-              },
+                  this.items = items;
+                },
 
-              _add: function() {
-                this.push('items', {firstName: 'First Name ' + this.items.length, lastName: 'Last Name ' + this.items.length});
-              },
+                _add: function() {
+                  this.push('items', {firstName: 'First Name ' + this.items.length, lastName: 'Last Name ' + this.items.length});
+                },
 
-              _remove: function() {
-                this.pop('items');
-              }
+                _remove: function() {
+                  this.pop('items');
+                }
+              });
             });
           </script>
         </dom-module>
@@ -232,22 +238,24 @@ <h3>Assigning Remote/Function Data</h3>
             </vaadin-grid>
           </template>
           <script>
-            Polymer({
-              is: 'x-remote-data-example',
-
-              ready: function() {
-                this.size = 200;
-                this.dataProvider = function(params, callback) {
-                  var xhr = new XMLHttpRequest();
-                  xhr.onload = function() {
-                    callback(JSON.parse(xhr.responseText).result);
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'x-remote-data-example',
+
+                ready: function() {
+                  this.size = 200;
+                  this.dataProvider = function(params, callback) {
+                    var xhr = new XMLHttpRequest();
+                    xhr.onload = function() {
+                      callback(JSON.parse(xhr.responseText).result);
+                    };
+                    var index = params.page * params.pageSize;
+                    xhr.open('GET', 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize, true);
+                    xhr.send();
                   };
-                  var index = params.page * params.pageSize;
-                  xhr.open('GET', 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize, true);
-                  xhr.send();
-                };
-              }
+                }
 
+              });
             });
           </script>
         </dom-module>
diff --git a/demo/row-details.html b/demo/row-details.html
index 0bd345ea1..dbcd346a5 100644
--- a/demo/row-details.html
+++ b/demo/row-details.html
@@ -147,12 +147,14 @@ <h3>Expanding Items Without Data Binding</h3>
 
           </template>
           <script>
-            Polymer({
-              is: 'bind-expanded-items',
-
-              _onActiveItemChanged: function(e) {
-                this.$.grid.expandedItems = [e.detail.value];
-              }
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'bind-expanded-items',
+
+                _onActiveItemChanged: function(e) {
+                  this.$.grid.expandedItems = [e.detail.value];
+                }
+              });
             });
           </script>
         </dom-module>
diff --git a/demo/selection.html b/demo/selection.html
index 4e0ceb398..578aa586d 100644
--- a/demo/selection.html
+++ b/demo/selection.html
@@ -62,18 +62,20 @@ <h3>Selection using Active Item</h3>
             </vaadin-grid>
           </template>
           <script>
-            Polymer({
-              is: 'x-selection',
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'x-selection',
+
+                properties: {
+                  activeItem: {
+                    observer: '_activeItemChanged'
+                  }
+                },
 
-              properties: {
-                activeItem: {
-                  observer: '_activeItemChanged'
+                _activeItemChanged: function(item) {
+                  this.$.grid.selectedItems = item ? [item] : [];
                 }
-              },
-
-              _activeItemChanged: function(item) {
-                this.$.grid.selectedItems = item ? [item] : [];
-              }
+              });
             });
           </script>
         </dom-module>
@@ -217,52 +219,52 @@ <h3>Custom Select All with Data Provider</h3>
             </vaadin-grid>
           </template>
           <script>
-          document.addEventListener('WebComponentsReady', function() {
-            Polymer({
-              is: 'dataprovider-select-all',
-
-              properties: {
-                inverted: {
-                  type: Boolean,
-                  value: false
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'dataprovider-select-all',
+
+                properties: {
+                  inverted: {
+                    type: Boolean,
+                    value: false
+                  },
+                  indeterminate: {
+                    type: Boolean,
+                    value: false
+                  }
                 },
-                indeterminate: {
-                  type: Boolean,
-                  value: false
-                }
-              },
-
-              observers: ['_resetSelection(inverted)'],
-
-              _resetSelection: function(inverted) {
-                this.$.grid.selectedItems = [];
-                this.updateStyles();
-                this.indeterminate = false;
-              },
-
-              _invert: function(e) {
-                this.inverted = !this.inverted;
-              },
-
-               // iOS needs indeterminated + checked at the same time
-              _isChecked: function(inverted, indeterminate) {
-                return indeterminate || inverted;
-              },
-
-              _selectItem: function(e) {
-                if (e.target.checked === this.inverted) {
-                  this.$.grid.deselectItem(e.model.item);
-                } else {
-                  this.$.grid.selectItem(e.model.item);
-                }
-                this.indeterminate = this.$.grid.selectedItems.length > 0;
-              },
 
-              _isSelected: function(inverted, selected) {
-                return inverted != selected;
-              }
+                observers: ['_resetSelection(inverted)'],
+
+                _resetSelection: function(inverted) {
+                  this.$.grid.selectedItems = [];
+                  this.updateStyles();
+                  this.indeterminate = false;
+                },
+
+                _invert: function(e) {
+                  this.inverted = !this.inverted;
+                },
+
+                // iOS needs indeterminated + checked at the same time
+                _isChecked: function(inverted, indeterminate) {
+                  return indeterminate || inverted;
+                },
+
+                _selectItem: function(e) {
+                  if (e.target.checked === this.inverted) {
+                    this.$.grid.deselectItem(e.model.item);
+                  } else {
+                    this.$.grid.selectItem(e.model.item);
+                  }
+                  this.indeterminate = this.$.grid.selectedItems.length > 0;
+                },
+
+                _isSelected: function(inverted, selected) {
+                  return inverted != selected;
+                }
+              });
             });
-          });
           </script>
         </dom-module>
       </template>
@@ -332,27 +334,29 @@ <h3>Space Key Action and Click to Activate</h3>
             </vaadin-grid>
           </template>
           <script>
-            Polymer({
-              is: 'x-space-action',
-
-              properties: {
-                activeItem: {
-                  observer: '_activeItemChanged'
-                }
-              },
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'x-space-action',
+
+                properties: {
+                  activeItem: {
+                    observer: '_activeItemChanged'
+                  }
+                },
 
-              _alert: function(e) {
-                alert(e.target.textContent + ' clicked');
-              },
+                _alert: function(e) {
+                  alert(e.target.textContent + ' clicked');
+                },
 
-              _alertAndPreventDefault: function(e) {
-                e.preventDefault();
-                this._alert(e);
-              },
+                _alertAndPreventDefault: function(e) {
+                  e.preventDefault();
+                  this._alert(e);
+                },
 
-              _activeItemChanged: function(item) {
-                this.$.grid.selectedItems = item ? [item] : [];
-              }
+                _activeItemChanged: function(item) {
+                  this.$.grid.selectedItems = item ? [item] : [];
+                }
+              });
             });
           </script>
         </dom-module>
diff --git a/demo/sorting-filtering.html b/demo/sorting-filtering.html
index 29ce8780f..e47877a53 100644
--- a/demo/sorting-filtering.html
+++ b/demo/sorting-filtering.html
@@ -122,32 +122,34 @@ <h3>Sorting with Data Provider</h3>
             </vaadin-grid>
           </template>
           <script>
-            Polymer({
-              is: 'x-remote-sorting-example',
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'x-remote-sorting-example',
 
-              ready: function() {
-                var grid = this.$.grid;
+                ready: function() {
+                  var grid = this.$.grid;
 
-                grid.size = 200;
+                  grid.size = 200;
 
-                grid.dataProvider = function(params, callback) {
-                  var xhr = new XMLHttpRequest();
-                  xhr.onload = function() {
-                    callback(JSON.parse(xhr.responseText).result);
-                  };
+                  grid.dataProvider = function(params, callback) {
+                    var xhr = new XMLHttpRequest();
+                    xhr.onload = function() {
+                      callback(JSON.parse(xhr.responseText).result);
+                    };
 
-                  var index = params.page * params.pageSize;
-                  var url = 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize;
+                    var index = params.page * params.pageSize;
+                    var url = 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize;
 
-                  // `params.sortOrders` format: [{path: 'lastName', direction: 'asc'}, ...];
-                  params.sortOrders.forEach(function(sort) {
-                    url += '&orders[]=' + sort.path + ' ' + sort.direction;
-                  });
+                    // `params.sortOrders` format: [{path: 'lastName', direction: 'asc'}, ...];
+                    params.sortOrders.forEach(function(sort) {
+                      url += '&orders[]=' + sort.path + ' ' + sort.direction;
+                    });
 
-                  xhr.open('GET', url, true);
-                  xhr.send();
-                };
-              }
+                    xhr.open('GET', url, true);
+                    xhr.send();
+                  };
+                }
+              });
             });
           </script>
         </dom-module>
@@ -249,38 +251,40 @@ <h3>Filtering with Data Provider</h3>
             </vaadin-grid>
           </template>
           <script>
-            Polymer({
-              is: 'x-remote-filtering-example',
+            addEventListener('WebComponentsReady', function() {
+              Polymer({
+                is: 'x-remote-filtering-example',
 
-              ready: function() {
-                var grid = this.$.grid;
+                ready: function() {
+                  var grid = this.$.grid;
 
-                grid.size = 200;
+                  grid.size = 200;
 
-                grid.dataProvider = function(params, callback) {
-                  var xhr = new XMLHttpRequest();
-                  xhr.onload = function() {
-                    var response = JSON.parse(xhr.responseText);
+                  grid.dataProvider = function(params, callback) {
+                    var xhr = new XMLHttpRequest();
+                    xhr.onload = function() {
+                      var response = JSON.parse(xhr.responseText);
 
-                    // Number of items changes after filtering. We need
-                    // to update the grid size based on server response.
-                    grid.size = response.size;
+                      // Number of items changes after filtering. We need
+                      // to update the grid size based on server response.
+                      grid.size = response.size;
 
-                    callback(response.result);
-                  };
+                      callback(response.result);
+                    };
 
-                  var index = params.page * params.pageSize;
-                  var url = 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize;
+                    var index = params.page * params.pageSize;
+                    var url = 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize;
 
-                  // `params.filters` format: [{path: 'lastName', direction: 'asc'}, ...];
-                  params.filters.forEach(function(filter) {
-                    url += '&filters[' + filter.path + ']=' + encodeURIComponent(filter.value);
-                  });
+                    // `params.filters` format: [{path: 'lastName', direction: 'asc'}, ...];
+                    params.filters.forEach(function(filter) {
+                      url += '&filters[' + filter.path + ']=' + encodeURIComponent(filter.value);
+                    });
 
-                  xhr.open('GET', url, true);
-                  xhr.send();
-                };
-              }
+                    xhr.open('GET', url, true);
+                    xhr.send();
+                  };
+                }
+              });
             });
           </script>
         </dom-module>
diff --git a/demo/x-data-provider.html b/demo/x-data-provider.html
index 7aee21199..0b0eb0579 100644
--- a/demo/x-data-provider.html
+++ b/demo/x-data-provider.html
@@ -3,66 +3,70 @@
 
 <dom-module id="x-data-provider">
   <script>
-    Polymer({
-      is: 'x-data-provider',
+    addEventListener('WebComponentsReady', function() {
+      Polymer({
+        is: 'x-data-provider',
 
-      properties: {
+        properties: {
 
-        loading: {
-          type: Boolean,
-          notify: true
-        },
+          loading: {
+            type: Boolean,
+            notify: true
+          },
 
-        delay: {
-          type: Number,
-          value: 0
-        },
+          delay: {
+            type: Number,
+            value: 0
+          },
 
-        dataProvider: {
-          notify: true,
-          value: function() {
-            var _this = this;
-            return function(params, callback) {
-              var items = Array.apply( null, { length: params.pageSize } ).map(function(item, index) {
-                return window.getJSON('http://randomuser.me?index=' + (index + params.page * params.pageSize));
-              });
-              _this.loading = true;
-              setTimeout(function() {
-                callback(items);
-                _this.loading = false;
-              }, _this.delay);
-            };
+          dataProvider: {
+            notify: true,
+            value: function() {
+              var _this = this;
+              return function(params, callback) {
+                var items = Array.apply( null, { length: params.pageSize } ).map(function(item, index) {
+                  return window.getJSON('http://randomuser.me?index=' + (index + params.page * params.pageSize));
+                });
+                _this.loading = true;
+                setTimeout(function() {
+                  callback(items);
+                  _this.loading = false;
+                }, _this.delay);
+              };
+            }
           }
         }
-      }
+      });
     });
   </script>
 </dom-module>
 
 <dom-module id="x-array-data-provider">
   <script>
-    Polymer({
-      is: 'x-array-data-provider',
+    addEventListener('WebComponentsReady', function() {
+      Polymer({
+        is: 'x-array-data-provider',
 
-      properties: {
-        size: {
-          type: Number,
-          value: null
-        },
+        properties: {
+          size: {
+            type: Number,
+            value: null
+          },
 
-        items: {
-          notify: true,
-          computed: '_computeItems(size)'
-        }
-      },
+          items: {
+            notify: true,
+            computed: '_computeItems(size)'
+          }
+        },
 
-      _computeItems: function(size) {
-        if (size !== null) {
-          return window.users.results.slice(0, size);
-        } else {
-          return window.users.results;
+        _computeItems: function(size) {
+          if (size !== null) {
+            return window.users.results.slice(0, size);
+          } else {
+            return window.users.results;
+          }
         }
-      }
+      });
     });
   </script>
 </dom-module>