@qooxdoo/framework
Version:
The JS Framework for Coders
194 lines (166 loc) • 5.15 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2013 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Christopher Zuendorf (czuendorf)
************************************************************************ */
/**
* Creates a Collapsible widget.
* It contains a {@link qx.ui.mobile.basic.Label Label} for the header and a {@link qx.ui.mobile.container.Composite Composite}
* for the content.
*
* The visibility of the content composite toggles when user taps on header.
*
* *Example*
*
* Here is an example of how to use the widget.
*
* <pre class='javascript'>
* var collapsible = new qx.ui.mobile.container.Collapsible("Collapsible Header");
* collapsible.setCombined(false);
* collapsible.setCollapsed(false);
*
* var label = new qx.ui.mobile.basic.Label("This is the content of the Collapsible.");
* collapsible.add(label);
*
* </pre>
*
*/
qx.Class.define("qx.ui.mobile.container.Collapsible", {
extend: qx.ui.mobile.core.Widget,
/*
*****************************************************************************
CONSTRUCTOR
*****************************************************************************
*/
/**
* @param title {String?} the text which should be displayed in the Collapsible's header label.
*/
construct(title) {
super();
this._header = this._createHeader();
this._header.addCssClass("collapsible-header");
this._header.addListener("tap", this.toggleCollapsed, this);
this.setTitle(title);
this._content = this._createContent();
this._content.addCssClass("collapsible-content");
this._add(this._header);
this._add(this._content);
this.initCollapsed();
this.initCombined();
this.addCssClass("gap");
},
/*
*****************************************************************************
PROPERTIES
*****************************************************************************
*/
properties: {
// overridden
defaultCssClass: {
refine: true,
init: "collapsible"
},
/** The collapsed state of this widget. */
collapsed: {
check: "Boolean",
init: true,
nullable: false,
apply: "_applyCollapsed",
event: "changeCollapsed"
},
/** Controls whether the Collapsible's content
should be visually associated with its headers. */
combined: {
check: "Boolean",
init: true,
apply: "_applyCombined"
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members: {
_header: null,
_content: null,
/**
* Adds a new child widget to the Collapsible's content composite.
* @param child {qx.ui.mobile.core.Widget} the widget to add.
* @param layoutProperties {Map?} (default:null) Optional layout data for widget.
*/
add(child, layoutProperties) {
if (child && this._content instanceof qx.ui.mobile.container.Composite) {
this._content.add(child, layoutProperties);
}
},
/**
* Setter for the Collapsible's header title.
* @param title {String} the Collapsible's title.
*/
setTitle(title) {
if (title && this._header instanceof qx.ui.mobile.basic.Label) {
this._header.setValue(title);
}
},
/**
* Getter for the Collapsible's header label.
* @return {qx.ui.mobile.basic.Label} the header.
*/
getHeader() {
return this._header;
},
/**
* Getter for the Collapsible's content composite.
* @return {qx.ui.mobile.container.Composite} the content composite.
*/
getContent() {
return this._content;
},
/**
* Factory method for the Collapsible's header.
* @return {qx.ui.mobile.basic.Label} the label which represents the header.
*/
_createHeader() {
var header = new qx.ui.mobile.basic.Label();
header.setAnonymous(false);
header.setActivatable(true);
return header;
},
/**
* Factory method for the Collapsible's content.
* @return {qx.ui.mobile.container.Composite} the content composite.
*/
_createContent() {
return new qx.ui.mobile.container.Composite();
},
// property apply
_applyCollapsed(value, old) {
if (value === true) {
this._content.exclude();
this.addCssClass("collapsed");
} else {
this._content.show();
this.removeCssClass("collapsed");
}
},
// property apply
_applyCombined(value, old) {
if (value === true) {
this.addCssClass("combined");
} else {
this.removeCssClass("combined");
}
}
},
destruct() {
this._header.removeListener("tap", this.toggleCollapsed, this);
this._disposeObjects("_header", "_content");
}
});