diff options
Diffstat (limited to 'demo/polymer.html')
| -rw-r--r-- | demo/polymer.html | 181 |
1 files changed, 181 insertions, 0 deletions
diff --git a/demo/polymer.html b/demo/polymer.html new file mode 100644 index 0000000..0294114 --- /dev/null +++ b/demo/polymer.html @@ -0,0 +1,181 @@ +<!doctype html> +<!-- +title: Polymer +order: 1 +layout: page +--> +<html> + +<head> + <title>vaadin-core-elements Code Examples - Polymer Integration</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="common.html"> +</head> + +<body unresolved> + <section> + <h1>vaadin-core-elements</h1> + <table-of-contents select="h3" class="toc"></table-of-contents> + </section> + + <section id="template-example"> + <h3 id="headers">Polymer Integration (Light DOM data source)</h3> + <p>Static data can be easily bound to vaadin-grid light DOM cells with <a href="https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat">the template repeater</a>.</p> + <p><strong>Note:</strong> IE/Edge doesn't support template-repeating inside a table element.</p> + <!--<code-example source> + <div> + <template is="dom-bind" class="my-grid-with-template" demo> + <vaadin-grid id="my-grid-with-template" on-selected-items-changed="onSelect"> + <table> + <colgroup> + <col width="64"> + <col width="100"> + <col> + <col> + <col> + </colgroup> + <thead> + <tr> + <th>#</th> + <th></th> + <th>First Name</th> + <th>Last Name</th> + <th>Email</th> + </tr> + </thead> + <tbody> + <template is="dom-repeat" items="[[users]]"> + <tr> + <td>{{index}}</td> + <td> + <img src="{{item.user.picture.thumbnail}}" style="width: 24px"></img> + </td> + <td>{{item.user.name.first}}</td> + <td>{{item.user.name.last}}</td> + <td>{{item.user.email}}</td> + </tr> + </template> + </tbody> + </table> + </vaadin-grid> + <template is="dom-if" if="{{selected}}"> + <div class="user-image"> + <img src="{{selected.user.picture.large}}"></img> + </div> + </template> + </template> + </div> + <code demo-var="template"> + var template = template || document.querySelector('template.my-grid-with-template'); + + template.addEventListener('dom-change', function() { + // code + var grid = document.querySelector('#my-grid-with-template'); + + template.onSelect = function() { + if (grid.selection.selected().length === 0) { + template.selected = null; + } else { + template.selected = template.users[grid.selection.selected()]; + } + }; + + getJSON('https://randomuser.me/api?results=25', function(data) { + template.users = data.results; + }); + // end-code + }); + + if (template.render) { + // This is needed to make the template render on Chrome in vaadin-doc portlet + template.render(); + } + </code> + </code-example>--> + <script> + // Need this hack to make this demo work on vaadin-docs site + // (by default JSoup, which is used at server-side parsing of the source files, + // doesn't allow a template tag in a table tbody) + var wrapper = document.querySelector('#template-example'); + + if (/Trident|Edge/.test(navigator.userAgent)) { + wrapper.parentElement.removeChild(wrapper); + } else { + wrapper.innerHTML = wrapper.innerHTML.replace(/<!--|-->/g, ''); + } + </script> + + </section> + + <section> + <h3>Polymer Integration (Function data source)</h3> + <p>In case the data is loaded lazily or it changes dynamically a + function datasource is a better option. Click a row to see an enlarged user image.</p> + <code-example source> + <div> + <template is="dom-bind" class="my-grid-with-ds" demo> + <vaadin-grid id="my-grid-with-ds" items="[[items]]" size="[[size]]" on-selected-items-changed="onSelect"> + <table> + <colgroup> + <col name="user.picture.thumbnail" width="100"> + <col name="user.name.first"> + <col name="user.name.last"> + <col name="user.email"> + </colgroup> + </table> + </vaadin-grid> + <template is="dom-if" if="{{selected}}"> + <div class="user-image"> + <img src="{{selected.user.picture.large}}"></img> + </div> + </template> + </template> + </div> + <code demo-var="template"> + // code + var template = template || document.querySelector('template.my-grid-with-ds'); + + template.addEventListener('dom-change', function() { + var grid = document.querySelector('#my-grid-with-ds'); + + grid.columns[0].renderer = function(cell) { + cell.element.innerHTML = '<img style="width: 30px" src="' + cell.data + '" />'; + }; + + template.onSelect = function() { + if (grid.selection.selected().length === 0) { + template.selected = null; + } else { + grid.getItem([grid.selection.selected()], function(err, item) { + template.selected = item; + }); + } + }; + + template.size = 100; + template.items = function(params, callback) { + var url = 'https://randomuser.me/api?index=' + params.index + '&results=' + params.count; + getJSON(url, function(data) { + callback(data.results); + }); + }; + + }); + + // end-code + + if (template.render) { + // This is needed to make the template render on Chrome in vaadin-doc portlet + template.render(); + } + </code> + <code hidden> + document.body.removeAttribute('unresolved'); + </code> + </code-example> + </section> + +</body> +</html> |