Hey Luis,
Nice job! I took your improvements one step further:
- Added a default cookie provider if none is specified since the StateManager doesn't do anything without a valid provider.
- Changed restoreState() to accept an optional defaultState parameter that gets used the first time through when there is no valid saved state.
- Added: containerEl = getEl(collapsableContainer); as the first line of the constructor so that you can simply pass in an id from the page (although passing an element will still work).
- Added functionality in the sample to demonstrate disabling/enabling a panel. Also made the sample html a little more generic, included the style defs, etc.
Let me know if you improve it even further :)
- Brian
New script (collapser.js):
// Collapser
var Collapser = function(collapsableContainer){
containerEl = getEl(collapsableContainer);
this.clickEl = getEl(YAHOO.util.Dom.getElementsByClassName('ycollapsable-menuhead', null, collapsableContainer)[0]);
this.collapseEl = getEl(YAHOO.util.Dom.getElementsByClassName('ycollapsable-menucontent', null, collapsableContainer)[0]);
this.clickEl.addClass('ycollapsable-expanded');
this.id = containerEl.id;
this.enabled = true;
this.collapsed = false;
this.clickEl.mon('click', function(){
if (this.enabled) this.collapsed == true ?
this.expand() : this.collapse();
}, this, true);
this.events = {
'expanded' : new YAHOO.util.CustomEvent('expanded'),
'collapsed' : new YAHOO.util.CustomEvent('collapsed'),
'enabled' : new YAHOO.util.CustomEvent('enabled'),
'disabled' : new YAHOO.util.CustomEvent('disabled')
};
};
YAHOO.extendX(Collapser, YAHOO.ext.util.Observable, {
collapse : function(animate){
if (!this.collapsed) {
this.collapseEl.clip();
if (animate == null || animate == true) {
this.collapseEl.setHeight(1, true, .15, this.afterCollapse.createDelegate(this), YAHOO.util.Easing.easeIn);
} else {
this.collapseEl.setHeight(1);
this.afterCollapse();
}
}
},
afterCollapse : function(){
this.collapsed = true;
this.collapseEl.setDisplayed(false);
this.clickEl.replaceClass('ycollapsable-expanded','ycollapsable-collapsed');
this.fireEvent('collapsed', this);
},
expand : function(animate){
if (this.collapsed) {
this.collapseEl.setDisplayed(true);
if (animate == null || animate == true) {
this.collapseEl.autoHeight(animate, .25, this.afterExpand.createDelegate(this), YAHOO.util.Easing.easeOut);
} else {
this.collapseEl.autoHeight();
this.afterExapand();
}
}
},
afterExpand : function(){
this.collapsed = false;
this.collapseEl.unclip();
this.collapseEl.setStyle('height', '');
this.clickEl.replaceClass('ycollapsable-collapsed','ycollapsable-expanded');
this.fireEvent('expanded', this);
},
enable : function(){
this.enabled = true;
this.clickEl.removeClass('ycollapsable-disabled');
this.fireEvent('enabled', this);
},
disable : function(animate){
this.enabled = false;
this.collapse(animate);
this.clickEl.addClass('ycollapsable-disabled');
this.fireEvent('disabled', this);
},
restoreState : function(defaultState, provider){
if(!provider){
YAHOO.ext.state.Manager.setProvider(new YAHOO.ext.state.CookieProvider());
provider = YAHOO.ext.state.Manager;
}
var sm = new CollapserStateManager();
sm.init(this, provider, defaultState);
}
});
var CollapserStateManager = function(collapserObject, provider){
this.state = {
collapsed: true,
enabled: true
};
};
CollapserStateManager.prototype = {
init : function(collapser, provider, defaultState){
this.provider = provider;
if (!defaultState) {
defaultState = { enabled: true, collapsed: false };
}
var savedState = provider.get(collapser.id+'-collapser-state');
this.state = savedState || defaultState;
if(this.state.collapsed){
collapser.collapse(false);
} else {
collapser.expand(false);
}
if(this.state.enabled == true){
collapser.enable();
}else{
collapser.disable();
}
this.collapser = collapser;
collapser.on('collapsed', this.onCollapsed, this, true);
collapser.on('expanded', this.onExpanded, this, true);
collapser.on('enabled', this.onEnabled, this, true);
collapser.on('disabled', this.onDisabled, this, true);
},
storeState : function(){
this.provider.set(this.collapser.id+'-collapser-state', this.state);
},
onCollapsed : function(){
this.state.collapsed = true;
this.storeState();
},
onExpanded : function(){
this.state.collapsed = false;
this.storeState();
},
onEnabled : function(){
this.state.enabled = true;
this.storeState();
},
onDisabled : function(){
this.state.enabled = false;
this.storeState();
}
};
New html:
<html>
<head>
<script type="text/javascript" src="scripts/yahoo-debug.js"></script>
<script type="text/javascript" src="scripts/dom-debug.js"></script>
<script type="text/javascript" src="scripts/event-debug.js"></script>
<script type="text/javascript" src="scripts/animation-debug.js"></script>
<script type="text/javascript" src="scripts/yui-ext-debug.js"></script>
<script type="text/javascript" src="scripts/collapser.js"></script>
<style>
.ycollapsable-menuhead {border:1px solid #555;background:#369;color:#fff;cursor:pointer;padding-left:10px;}
.ycollapsable-menucontent {border:1px solid #555;padding:20px;}
.ycollapsable-disabled {background:#999;color:#ddd;cursor:default;}
</style>
</head>
<body>
<div id="collapser1" class="ycollapsable">
<div class="ycollapsable-menuhead">
Header
</div>
<div class="ycollapsable-menucontent">
<div>
Content
Content
Content
Content
</div>
</div>
</div>
<div id="collapser2" class="ycollapsable">
<div class="ycollapsable-menuhead">
Header 2
</div>
<div class="ycollapsable-menucontent">
<div>
Content 2
Content 2
</div>
</div>
</div>
<input id="toggleButton" type="button" value="Enable" /></p>
<script>
var coll1 = new Collapser('collapser1');
var coll2 = new Collapser('collapser2');
coll1.restoreState({enabled: true, collapsed: true});
coll2.restoreState({enabled: false});
setButtonState();
YAHOO.util.Event.on('toggleButton', 'click', toggleCollapser, coll2, true);
function toggleCollapser(){
if (coll2.enabled) {
coll2.disable(false);
}
else {
coll2.enable(false);
}
setButtonState();
}
function setButtonState() {
YAHOO.util.Dom.get('toggleButton').value = (coll2.enabled ? "Disable" : "Enable");
}
</script>
</body>
</html>