| <!-- |
| |
| This file contains definitions for both the summary-sk and details-sk |
| elements. These elements operate just like the HTML 5 'details' and 'summary' |
| elements, but these will work in all browsers, not just the browsers |
| that have decided to implement details/summary. See: |
| |
| https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details |
| |
| --> |
| |
| <link rel=import href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html"> |
| <link rel=import href="/res/imp/bower_components/iron-icons/iron-icons.html"> |
| <link rel=import href="/res/imp/bower_components/iron-icon/iron-icon.html"> |
| <!-- The <summary-sk> custom element declaration. |
| |
| Attributes: |
| None. |
| |
| Events: |
| None. |
| |
| Methods: |
| None. |
| --> |
| <dom-module id="summary-sk"> |
| <template> |
| <content></content> |
| </template> |
| </dom-module> |
| |
| <script> |
| Polymer({ |
| is: "summary-sk", |
| }); |
| </script> |
| |
| |
| <!-- The <details-sk> custom element declaration. |
| |
| Attributes: |
| open - Boolean that controls if the details are displayed, or only the |
| summary. |
| |
| Events: |
| None. |
| |
| Methods: |
| None. |
| --> |
| <dom-module id="details-sk"> |
| <style> |
| #details.hidden { |
| display: none; |
| } |
| </style> |
| <template> |
| <paper-icon-button id=toggle icon="unfold-more" on-tap="_toggle"></paper-icon-button> |
| <content select="summary-sk"></content> |
| <div id=details class=hidden> |
| <content></content> |
| </div> |
| </template> |
| </dom-module> |
| |
| <script> |
| Polymer({ |
| is: "details-sk", |
| |
| properties: { |
| open: { |
| type: Boolean, |
| value: false, |
| reflectToAttribute: true, |
| observer: "_openChanged", |
| notify:true, |
| }, |
| }, |
| |
| _openChanged: function() { |
| if (this.open) { |
| this.$.details.classList.remove("hidden"); |
| this.$.toggle.icon = "unfold-less"; |
| } else { |
| this.$.details.classList.add("hidden"); |
| this.$.toggle.icon = "unfold-more"; |
| } |
| }, |
| |
| _toggle: function(e) { |
| this.open = !this.open; |
| // The paper-icon-button doesn't swallow its tap event, so we have |
| // swallow it here. |
| e.stopPropagation(); |
| }, |
| |
| }); |
| </script> |