blob: 22923e354f0bb42e53696cacaa29dbc47e2ba649 [file] [log] [blame]
This in an HTML Import-able file that contains the definitions
for the following elements:
To use this file import it:
<link href="res/imp/toggle.html" rel="import" />
Typical usage #1:
<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".
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.
open() - Adds the display class.
toggle() - Toggles the display class.
<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">
<button disabled$="{{disabled}}">
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.nextElementSibling];
toggle: function (e) {
var targets = this._targetElements();
for (var i=targets.length - 1; i >= 0; i--) {
open: function () {
var targets = this._targetElements();
for (var i=targets.length - 1; i >= 0; i--) {
targets[i].classList.toggle(this.classname, false);