diff options
Diffstat (limited to 'demo/polymer.html')
| -rw-r--r-- | demo/polymer.html | 201 |
1 files changed, 0 insertions, 201 deletions
diff --git a/demo/polymer.html b/demo/polymer.html deleted file mode 100644 index 41e1e2c..0000000 --- a/demo/polymer.html +++ /dev/null @@ -1,201 +0,0 @@ -<!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"> - <style> - .demo-wrapper > div { - position: relative; - } - - .user-image { - width: auto; - height: auto; - margin: 0; - border: none; - } - .user-image img { - position: absolute; - bottom: 0px; - right: 0px; - width: auto; - max-width: 33%; - max-height: 33%; - } - </style> -</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> |