Skip to content

Commit

Permalink
Added the workaround libraries to workaround the template repeat issu…
Browse files Browse the repository at this point in the history
…e with table and select elements in Internet Explorer. See Polymer bugs: Polymer/polymer#1735 and Polymer/polymer#1567
  • Loading branch information
Tero Keski-Valkama committed Apr 15, 2016
1 parent 2767d52 commit 52681ba
Show file tree
Hide file tree
Showing 15 changed files with 8,103 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
bower_components/
node_modules/
.idea
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
module.exports = function (grunt) {
grunt.initConfig({
bump: {
options: {
files: ['bower.json', 'package.json', 'juicy-table-repeat.html'],
commit: true,
commitMessage: '%VERSION%',
commitFiles: ['bower.json', 'package.json', 'juicy-table-repeat.html'],
createTag: true,
tagName: '%VERSION%',
tagMessage: 'Version %VERSION%',
push: false,
globalReplace: false,
prereleaseName: false,
regExp: false
}
}
});
grunt.loadNpmTasks('grunt-bump');
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# juicy-table-repeat
This is a workaround custom element to support `<template is="dom-repeat">` in `<table>` under IE.
Will not be required after this Polymer issue is fixed: https://github.com/Polymer/polymer/issues/1567
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "juicy-table-repeat",
"version": "0.0.0",
"homepage": "https://github.com/Juicy/juicy-table-repeat",
"authors": [
"Konstantin <const.miyang@gmail.com>"
],
"description": "A workaround custom element to support dom-repeat inside table under IE",
"main": "juicy-table-repeat.html",
"moduleType": [ ],
"keywords": [
"polymer",
"dom-repeat",
"table",
"internet explorer"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"polymer": "Polymer/polymer"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html>
<head>
<title>juicy-table-repeat</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="juicy-table-repeat.html" />
<style>
body {
padding: 15px;
}
</style>
</head>
<body>
<h3>juicy-table-repeat</h3>
<template is="dom-bind" id="root">
<juicy-table-repeat rows="{{model.products}}">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
<template is="dom-template" class="row-template">
<table>
<tr>
<td>{{item.name}}</td>
<td>
<span>{{item.price}}</span>$
</td>
</tr>
</table>
</template>
</juicy-table-repeat>
</template>
<h4>Polymer implementation, does not work in IE</h4>
<p>
<a href="https://github.com/Polymer/polymer/issues/1567">Dom-repeat doesn't work in tables in IE (issue #1567)</a>
</p>
<pre>
&lt;table>
&lt;thead>
&lt;tr>
&lt;th>Name&lt;/th>
&lt;th>Price&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;template is="dom-repeat" items="{{model.products}}">
&lt;tr>
&lt;td>{{item.name}}&lt;/td>
&lt;td>
&lt;span>{{item.price}}&lt;/span>$
&lt;/td>
&lt;/tr>
&lt;/template>
&lt;/tbody>
&lt;/table></pre>
<br />
<h4>Juicy workaround to make same table work in IE</h4>
<pre>
&lt;juicy-table-repeat rows="{{model.products}}">
&lt;table class="table">
&lt;thead>
&lt;tr>
&lt;th>Name&lt;/th>
&lt;th>Price&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>&lt;/tbody>
&lt;/table>
&lt;template is="dom-template" class="row-template">
&lt;table>
&lt;tr>
&lt;td>{{item.name}}&lt;/td>
&lt;td>
&lt;span>{{item.price}}&lt;/span>$
&lt;/td>
&lt;/tr>
&lt;/table>
&lt;/template>
&lt;/juicy-table-repeat></pre>
<script>
(function () {
var template = document.querySelector("#root");
var model = {
products: [{
name: "i7-4770k",
price: 280
}, {
name: "i7-4790k",
price: 290
}, {
name: "i7-6700k",
price: 330
}, {
name: "i7-5820k",
price: 310
}]
};

template.model = model;
})();
</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!--
This is a workaround custom element to support <template is="dom-repeat"> in <table> under IE.
Will not be required after this Polymer issue is fixed: https://github.com/Polymer/polymer/issues/1567
version: 0.0.0
-->
<dom-module id="juicy-table-repeat">
<template>
<style>
:host {
display: block;
}
</style>
<content></content>
</template>
<script>
Polymer({
is: "juicy-table-repeat",
properties: {
rows: { type: Array, value: [] },
item: { type: Object }
},
attached: function () {
this.table = this.querySelector("table");
this.tbody = this.querySelector("table tbody")
this.rowTemplate = this.querySelector("template.row-template");

this.generateRows();
this.isAttached = true;
},
observers: ["rowsChanged(rows.length)"],
generateRows: function () {
this.tbody.innerHTML = "";

if (!this.rows || !this.rows.length) {
return;
}

for (var i = 0; i < this.rows.length; i++) {
this.rowTemplate._parent_item = this.rows[i];

var row = this.rowTemplate.stamp();
var tr = row.root.querySelector("tr");

this.tbody.appendChild(tr);
this.rowTemplate._parent_item = undefined;
}
},
rowsChanged: function () {
if (!this.isAttached) {
return;
}

this.generateRows();
}
});
</script>
</dom-module>
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "juicy-table-repeat",
"version": "0.0.0",
"description": "A workaround custom element to support dom-repeat inside table under IE",
"main": "juicy-table-repeat.html",
"directories": { },
"dependencies": { },
"devDependencies": {
"grunt-bump": "^0.5.0"
},
"repository": {
"type": "git",
"url": "https://github.com/Juicy/juicy-table-repeat"
},
"bugs": {
"url": "https://github.com/Juicy/juicy-table-repeat/issues"
},
"license": "MIT"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*.swp
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
##Select with options

Replacement for `select` element that works with browsers (like Internet Explorer, including IE11) that don't support templates (including `dom-repeat`) inside ```<select>``` tags.
See Polymer issue [#1735](https://github.com/Polymer/polymer/issues/1735).

## Quick start

Several quick start options are available:

* [Download the latest release](https://github.com/vehikl/polymer-select-with-options/archive/master.zip).
* Clone the repo: `git clone https://github.com/vehikl/polymer-select-with-options.git`.
* Install with [Bower](http://bower.io): `bower install polymer-select-with-options`.

### What's included

For an existing Polymer project, only the `select-with-option.html` file is required to be imported. The remaining files are for use in the demo.

```
├── README.md
├── bower.json
├── demo.html
├── polymer-micro.html
├── polymer-mini.html
├── polymer.html
└── select-with-options.html
```

## Usage

Import `select-with-options.html` into your project;

```
<link rel="import" href="select-with-options.html">
```

This component supports data-binding an array of String, an array of Objects as well as hard coded options.

###Array of Strings

Simply bind an array of strings to the 'options' attribute. The array values will be mapped to both 'value' and 'label'.

```
<select is="select-with-options" options="{{options}}" value="{{value::change}}"></select>
```

###Array of Objects

If you supply an array of objects there are additional parameters to specify which object properties to map as the `value` and `label` (`option-value` and `option-label`).

```
<select is="select-with-options" options="{{options}}" option-value="id" option-label="name" value="{{value::change}}"></select>
```

###Hard coded options

Just like a standard `select` element, you can provide hard-coded ```<option>``` tags, which are displayed before those provided in the `options` attribute.

```
<select is="select-with-options" options="{{options}}" option-value="id" option-label="name" value="{{value::change}}">
<option value="hardcoded_option">Hardcoded Option</option>
</select>
```

## Demo

Live preview available [here](http://vehikl.github.io/polymer-select-with-options/). Source for demo is available in `demo.html`
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "polymer-select-with-options",
"version": "0.0.1",
"homepage": "https://github.com/vehikl/polymer-select-with-options",
"authors": [
"Kris Braun <k.braun@vehikl.com>",
"Richard Bettridge <r.bettridge@vehikl.com>"
],
"description": "Replacement for select element that works with browsers (like IE) that don't support templates inside select tags.",
"main": "select-with-options.html",
"moduleType": [
"es6"
],
"keywords": [
"polymer",
"select",
"dom-repeat",
"tempalte"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
Loading

0 comments on commit 52681ba

Please sign in to comment.