Retour à la documentation
define(["dojo/_base/declare", "spw/api/SpwBaseTemplatedWidget", "dojo/dom-style", "dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/text!./templates/CollapserItem.html", "dojo/Evented", "dijit/form/CheckBox"],
function(declare, SpwBaseTemplatedWidget, domStyle, domConstruct, dom, on, CollapserItemTmpl, Evented) {
/**
* @class spw.api.CollapserItem
* @classdesc Elément UI permettant d'obtenir un groupe ourvrable/fermable.
* @extends {spw.api.SpwBaseTemplatedWidget}
*/
return declare('spw.api.CollapserItem', [SpwBaseTemplatedWidget, Evented], /** @lends spw.api.CollapserItem.prototype */{
templateString: CollapserItemTmpl,
/**
* Label associé à l'objet
* @type String
*/
_label: null,
/**
* Handler appelé au clic sur la checkbox du collapser.
*/
_labelCheckHandler: null,
/**
* Path de l'icone représentant l'objet
* @type String
*/
_iconPath: null,
/**
* Tooltip affiché sur l'icône du collapser.
* @type String
*/
_iconTitle: null,
/**
* Méthode appelée lorsque l'utilisateur clique sur l'icone du collapser.
* @type Function
*/
_iconClickAction: null,
/**
* Le groupe est-il ouvert?
* @type boolean
*/
_isGroupOpened: true,
/**
* Méthode appelée lorsque le collapser est ouvert par l'utilisateur
* @type Function
*/
onExpand: null,
closable: false,
/**
* Méthode appelée lorsque le collapser est ouvert par l'utilisateur
* @type Function
*/
onCollapse: null,
_content: null,
itemWrapperClass: "itemWrapperCollapser",
itemContentBlockClass: "itemContentBlockCollapser",
itemTitleClass: "itemTitleCollapser",
itemIconClass: "spwCloseIcon",
itemImageClass: "itemImageCollapser",
itemTitleImageBlockClass: "itemTitleImageBlockCollapser",
postCreate: function() {
if (!this._isGroupOpened) {
this.collapse();
}
if (this._label == null || this._label == "") {
domStyle.set(this.itemTitleImageBlock, "display", "none");
} else if (this._labelCheckHandler) {
this.checkboxCell.style.display = "";
this.checkboxCell.style.width = "20px";
}
if (this._iconPath != null && this._iconPath != "") {
domStyle.set(this.itemIconImg, "display", "");
this.itemIconImg.src = this._iconPath;
if (this._iconTitle != null && this._iconTitle != "") {
this.itemIconImg.title = this._iconTitle;
this.itemIconImg.alt = this._iconTitle;
}
}
this.itemIcon.style.display = "none";
},
_setTitleAttr: function(title) {
this.itemTitle.innerHTML = title;
},
/**
* Permet de cocher/décocher la checkbox du collapser.
* @param checked {Boolean}
*/
check: function(checked) {
this.labelCheckbox.set('checked', checked);
},
/**
* Permet de savoir si la checkbox du collapser est cochée ou non
* @returns Boolean L'état du checkbox
*/
isChecked: function() {
return this.labelCheckbox.get('checked');
},
/**
* Méthode appelée lorsque la checkbox est cochée/décochée.
*/
onLabelCheck: function(e) {
this._labelCheckHandler(this.labelCheckbox.get('checked'));
},
callIconClickAction: function(e) {
this.destroy();
this.emit('destroy', this);
},
/**
* Permet d'ajouter du contenu au contenu déjà existant
* @param {DomElement} Contenu
*/
addContent: function(contentDomNode) {
this.itemContentBlock.appendChild(contentDomNode);
},
/**
* Permet de changer l'état (visible ou non) du contenu
* @param {Event} event
*/
expendCollapse: function(event) {
if (this._isGroupOpened) {
this.collapse();
} else {
this.expend();
}
},
/**
* Permet de cacher le contenu
*/
collapse: function() {
if (this._label != null && this._label != "" && this.itemTitleImageBlock)
{
this._isGroupOpened = false;
this.itemTitleImageBlock.className = this.itemTitleImageBlock.className.replace("expended", "collapsed");
this.itemContentBlock.style.display = "none";
if (typeof(this.onCollapse) == "function") {
this.onCollapse.call();
}
}
},
/**
* Permet d'afficher le contenu
*/
expend: function() {
if (this._label != null && this._label != "" && this.itemTitleImageBlock)
{
this._isGroupOpened = true;
this.itemTitleImageBlock.className = this.itemTitleImageBlock.className.replace("collapsed", "expended");
this.itemContentBlock.style.display = "block";
if (typeof(this.onExpand) == "function") {
this.onExpand.call();
}
}
}
});
});