Skip to content

Commit

Permalink
Fix demos to work IE11
Browse files Browse the repository at this point in the history 
Fixes #799
  • Loading branch information
@platosha
platosha committed Mar 13, 2017
1 parent c5e99a9 commit 919b924
Show file tree
Hide file tree
Showing 6 changed files with 252 additions and 228 deletions.
22 changes: 12 additions & 10 deletions demo/columns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
114 changes: 61 additions & 53 deletions demo/data.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
14 changes: 8 additions & 6 deletions demo/row-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
146 changes: 75 additions & 71 deletions demo/selection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 919b924

Please sign in to comment.