res/imp/details-summary.html

<!--

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>