| <!-- |
| 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/toggle.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> |