forked from oskariorg/oskari-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added the workaround libraries to workaround the template repeat issu…
…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
Showing
15 changed files
with
8,103 additions
and
0 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
bundles/statistics/statsgrid.polymer/libs/juicy-table-repeat/.gitignore
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
bower_components/ | ||
node_modules/ | ||
.idea |
20 changes: 20 additions & 0 deletions
20
bundles/statistics/statsgrid.polymer/libs/juicy-table-repeat/Gruntfile.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | ||
}; |
3 changes: 3 additions & 0 deletions
3
bundles/statistics/statsgrid.polymer/libs/juicy-table-repeat/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
28 changes: 28 additions & 0 deletions
28
bundles/statistics/statsgrid.polymer/libs/juicy-table-repeat/bower.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
} |
111 changes: 111 additions & 0 deletions
111
bundles/statistics/statsgrid.polymer/libs/juicy-table-repeat/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
<table> | ||
<thead> | ||
<tr> | ||
<th>Name</th> | ||
<th>Price</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<template is="dom-repeat" items="{{model.products}}"> | ||
<tr> | ||
<td>{{item.name}}</td> | ||
<td> | ||
<span>{{item.price}}</span>$ | ||
</td> | ||
</tr> | ||
</template> | ||
</tbody> | ||
</table></pre> | ||
<br /> | ||
<h4>Juicy workaround to make same table work in IE</h4> | ||
<pre> | ||
<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></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> |
57 changes: 57 additions & 0 deletions
57
bundles/statistics/statsgrid.polymer/libs/juicy-table-repeat/juicy-table-repeat.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
19 changes: 19 additions & 0 deletions
19
bundles/statistics/statsgrid.polymer/libs/juicy-table-repeat/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} |
1 change: 1 addition & 0 deletions
1
bundles/statistics/statsgrid.polymer/libs/polymer-select-with-options/.gitignore
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
*.swp |
66 changes: 66 additions & 0 deletions
66
bundles/statistics/statsgrid.polymer/libs/polymer-select-with-options/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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` |
28 changes: 28 additions & 0 deletions
28
bundles/statistics/statsgrid.polymer/libs/polymer-select-with-options/bower.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
] | ||
} |
Oops, something went wrong.