/** @file diehard_collapsible.js @brief Copyright 2009 Creative Crew. All rights reserved. @author William Chang Email: william@babybluebox.com Website: http://www.babybluebox.com @version 0.1 @date - Created: 2009-04-28 - Modified: 2009-05-08 . @note Prerequisites: - jQuery http://www.jquery.com/ - jquery.cookie http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ . */ /** Collapsible widget. */ // Tabs widget. (function($){ // Plugin for jQuery. $.fn.diehard_collapsible = function(options) { // Validate prerequisites. if(!$.cookie) {throw('Dependency Error: jQuery plugin cookie is missing.');} // Iterate and return each selected element back to library's chain. return this.each(function(_intIndex) { /** Hide panel. */ function _hideCollapsiblePanel(eleHeader, eleBody) { $(eleHeader).addClass('collapsible-selected-hide'); $(eleBody).get(0).style.display = 'none'; return '0'; } /** Show panel. */ function _showCollapsiblePanel(eleHeader, eleBody) { $(eleHeader).removeClass('collapsible-selected-hide'); $(eleBody).get(0).style.display = 'block'; return '1'; } /** Get state of panel. */ function _getState(intPanelIndex) { if(!_boolCookieEnabled) {return '';} if(_strCookieValues[intPanelIndex] !== undefined) { return _strCookieValues[intPanelIndex]; } else { return ''; } } /** Set state of panel. */ function _setState(intPanelIndex, strToggle) { if(!_boolCookieEnabled) {return false;} _strCookieValues[intPanelIndex] = strToggle; _setCookie(); return true; } /** Get cookie. */ function _getCookie() { var strValue = $.cookie(_strCookieName); if(typeof strValue === 'string') { _strCookieValues = strValue.split(','); } else { _strCookieValues = []; } } /** Set cookie. */ function _setCookie() { var strValue = _strCookieValues.join(','); $.cookie(_strCookieName, strValue, {expires:7}); } /** Set collapse panel. */ this.setCollapsiblePanel = function(strPanelId, strCommand) { // Find elements by id. for(var intIndex = 0;intIndex < _elePanels.length;intIndex++) { if(_elePanels[intIndex].id == strPanelId) { // Get header and body from panel. var eleHeader = $('> .' + _eleThis.options.strCollapsibleHeaderCss, _elePanels[intIndex]).get(0); var eleBody = $('> .' + _eleThis.options.strCollapsibleBodyCss, _elePanels[intIndex]).get(0); // Execute command. switch(strCommand.toLowerCase()) { case '1': case 'true': case 'show': case 'open': _showCollapsiblePanel(eleHeader, eleBody);_setState(intIndex, '1');break; case '0': case 'false': case 'hide': case 'close': _hideCollapsiblePanel(eleHeader, eleBody);_setState(intIndex, '0');break; default: return false; } // Return element found. return _elePanels[intIndex]; } } return false; } /** Create collapsible events. */ function _createCollapsiblePanelEvents(intPanelIndex, eleHeader, eleBody) { var objAnimateParams = {}; switch(_eleThis.options.strCollapsibleDirection.toLowerCase()) { case 'vertical': objAnimateParams = {opacity:'toggle', height:'toggle'};break; case 'horizontal': objAnimateParams = {opacity:'toggle', width:'toggle'};break; default: return; } $(eleHeader).toggle(function(e) { // Has toggled, then trigger next method. if($(eleBody).css('display') == 'none') {$(this).trigger('click');return;} // Animate hide. if(_eleThis.options.fnBeforeStart) {_eleThis.options.fnBeforeStart.call(this, '0');} $(eleBody).animate(objAnimateParams, 'fast', function() { // Hide panel. _hideCollapsiblePanel(eleHeader, eleBody); _setState(intPanelIndex, '0'); }); if(_eleThis.options.fnAfterStop) {_eleThis.options.fnAfterStop.call(this, '0');} }, function(e) { // Animate show. if(_eleThis.options.fnBeforeStart) {_eleThis.options.fnBeforeStart.call(this, '1');} $(eleBody).animate(objAnimateParams, 'fast', function() { // Show panel. _showCollapsiblePanel(eleHeader, eleBody); _setState(intPanelIndex, '1'); if($.browser.msie) {$(this).get(0).style.removeAttribute('filter');} }); if(_eleThis.options.fnAfterStop) {_eleThis.options.fnAfterStop.call(this, '1');} }); } /** Create collapsible panels from markup code. */ function _createCollapsiblePanels() { // Get panels. _elePanels = $('.' + _eleThis.options.strPanelCss, _eleRegion).get(); if(_elePanels.length <= 0) {throw('Error: Collapsible panels not found.');} var objPanels = [_elePanels.length]; // Setup cookie. if(_eleThis.options.strCookieNamespace.length > 0) { _strCookieName = _eleThis.options.strCookieNamespace + _eleThis.options.strPanelCss; _boolCookieEnabled = true; _getCookie(); } // Setup each panel. for(var intIndex = 0;intIndex < _elePanels.length;intIndex++) { // Get header and body from panel. var eleHeader = $('> .' + _eleThis.options.strCollapsibleHeaderCss, _elePanels[intIndex]).get(0); var eleBody = $('> .' + _eleThis.options.strCollapsibleBodyCss, _elePanels[intIndex]).get(0); // Prepend and append markup code to header. var eleHeaderLeft = $('').prependTo(eleHeader).get(0); var eleHeaderRight = $('').appendTo(eleHeader).get(0); // Restore state. var strState = _getState(intIndex); _eleThis.setCollapsiblePanel(_elePanels[intIndex].id, strState); if(!$(eleHeader).hasClass('collapsible-selected-hide') && $(eleBody).css('display') == 'none') {$(eleHeader).addClass('collapsible-selected-hide');} // Bind events to header. _createCollapsiblePanelEvents(intIndex, eleHeader, eleBody); // Create object and append to array of objects. var objPanel = {}; objPanel.elePanel = _elePanels[intIndex]; objPanel.eleHeader = eleHeader; objPanel.eleBody = eleBody; objPanel.strState = strState; objPanels[intIndex] = objPanel; } if(_eleThis.options.fnLoad) {_eleThis.options.fnLoad.call(this, objPanels);} } /** Load widget. */ this.load = function _load() { _eleRegion = _eleThis; _createCollapsiblePanels(); } /** Init library. */ this.init = function init(options) { var defaults = { strPanelCss:'panel-collapsible', strCollapsibleHeaderCss:'panel-collapsible-header', strCollapsibleBodyCss:'panel-collapsible-body', strCookieNamespace:'domain_', strCollapsibleDirection:'vertical', fnLoad:null, fnBeforeStart:null, fnAfterStop:null }; return $.extend(defaults, options); } // Fields. var _elePanels = []; var _eleRegion; var _boolCookieEnabled = false; var _strCookieName; var _strCookieValues = []; // Procedural. var _eleThis = this; _eleThis.options = _eleThis.init(options); _eleThis.load(); }); }; })(jQuery);