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 all matching
    DOM elements and toggle their "display" class when clicked; they need
    not be siblings of the toggle button itself. Eg: specifying
    target=".green" will toggle all elements with class="green".

  Properties:

    target - A DOM query selector to identify the node to be toggled. If more
      than one DOM element matches the given query, they all will be toggled.
      If not supplied then the next sibling element is toggled.

    classname - The name of the class to toggle on and off in the target
      element. If not supplied then the default of "display" is used.

    disabled - Boolean, if true, the button is disabled.

  Methods:

    open() - Adds the display class.

    toggle() - Toggles the display class.

  Events:

    None.

-->

<link rel=import href="/res/imp/bower_components/polymer/polymer.html">
<link rel="stylesheet" href="/res/common/css/md.css" type="text/css" media="all" />

<dom-module id="toggle-display-sk">
  <template>
    <button disabled$="{{disabled}}">
      <content></content>
    </button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'toggle-display-sk',

    properties: {
      target: {
        type: String,
        value: '',
        reflectToAttribute: true
      },
      classname: {
        type: String,
        value: 'display',
        reflectToAttribute: true
      },
      disabled: {
        type: Boolean,
        value: false,
        reflectToAttribute: true
      }
    },

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

    _targetElements: function () {
      return this.target ? $$(this.target) : [this.nextElementSibling];
    },

    toggle: function (e) {
      var targets = this._targetElements();
      for (var i=targets.length - 1; i >= 0; i--) {
        targets[i].classList.toggle(this.classname);
      }
    },

    open: function () {
      var targets = this._targetElements();
      for (var i=targets.length - 1; i >= 0; i--) {
        targets[i].classList.toggle(this.classname, false);
      }
    }
  });
</script>