res/imp/toggle.html

<!--
  This in an HTML Import-able file that contains the definitions
  for the following elements:

    <toggle-display-sk>

  To use this file import it:

    <link href="res/imp/cluster.html" rel="import" />

  Typical usage #1:

    <toggle-display-sk>Options</toggle-display-sk>
    <div>Some content to toggle</div>

    in this case, the string "Options" will be displayed inside a styled <paper-button>
    which, when clicked, will toggle the "display" class of the sibling DOM element.

  Typical usage #2:

    <toggle-display-sk target="#some-identifier">More...</toggle-display-sk>
    <div>Some intervening content</div>
    <div id="some-identifier">Content to toggle</div>

    With the optional "target" property here, the toggle will find the matching
    DOM element and toggle its "display" class when clicked; they need
    not be siblings of the toggle button itself.

  Properties:

    target [optional]: any DOM query selector to identify the node to be
                       toggled.  If more than one DOM element matches the given
                       query, the first one will be toggled.

                       If absent, the next sibling element will be toggled.
  Methods:

    open() - Adds the display class.

    toggle() - Toggles the display class.

  Events:

    None.

-->
<polymer-element name="toggle-display-sk" attributes="target">
  <template>
    <style type="text/css" media="screen">
      paper-button {
        color: #1f78b4;
      }
      paper-button:hover {
        background: #eee;
      }
    </style>
    <paper-button>
      <content></content>
    </paper-button>
  </template>
  <script>
    Polymer({
      publish: {
        target: {
          value: "",
          reflect: true
        }
      },

      ready: function() {
        this.addEventListener('click', this.toggle.bind(this));
      },

      detached: function() {
        this.removeEventListener('click', this.toggle.bind(this));
      },

      targetEle: function() {
        var ret;
        if (this.target != "") {
          ret = $$$(this.target);
        } else {
          ret = this.nextElementSibling;
        }
        return ret
      },

      toggle: function(e) {
        this.targetEle().classList.toggle("display");
      },

      open: function() {
        this.targetEle().classList.toggle("display", false);
      },

    });
  </script>
</polymer-element>