MoinMoin: attachment:jquery_animatedcollapse_2.01_p1.js of MacroMarket/jQuery

   1 //** Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
   2 //** May 24th, 08'- Script rewritten and updated to 2.0.
   3 //** June 4th, 08'- Version 2.01: Bug fix to work with jquery 1.2.6 (which changed the way attr() behaves).
   4 
   5 var animatedcollapse={
   6 divholders: {}, //structure: {div.id, div.attrs, div.$divref}
   7 divgroups: {}, //structure: {groupname.count, groupname.lastactivedivid}
   8 lastactiveingroup: {}, //structure: {lastactivediv.id}
   9 
  10 show:function(divids){ //public method
  11 	if (typeof divids=="object"){
  12 		for (var i=0; i<divids.length; i++)
  13 			this.showhide(divids[i], "show")
  14 	}
  15 	else
  16 		this.showhide(divids, "show")
  17 },
  18 
  19 hide:function(divids){ //public method
  20 	if (typeof divids=="object"){
  21 		for (var i=0; i<divids.length; i++)
  22 			this.showhide(divids[i], "hide")
  23 	}
  24 	else
  25 		this.showhide(divids, "hide")
  26 },
  27 
  28 toggle:function(divid){ //public method
  29 	this.showhide(divid, "toggle")
  30 },
  31 
  32 addDiv:function(divid, attrstring){ //public function
  33 	this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
  34 	this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
  35 		var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
  36 		return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
  37 	}
  38 },
  39 
  40 showhide:function(divid, action){
  41 	var $divref=this.divholders[divid].$divref //reference collapsible DIV
  42 	if (this.divholders[divid] && $divref.length==1){ //if DIV exists
  43 		var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
  44 		if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
  45 			if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
  46 				this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
  47 				this.slideengine(divid, 'show')
  48 			targetgroup.lastactivedivid=divid //remember last active DIV
  49 		}
  50 		else{
  51 			this.slideengine(divid, action)
  52 		}
  53 	}
  54 },
  55 
  56 slideengine:function(divid, action){
  57 	var $divref=this.divholders[divid].$divref
  58 	if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
  59 		var animateSetting={height: action}
  60 		if ($divref.attr('fade'))
  61 			animateSetting.opacity=action
  62 		$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500)
  63 		return false
  64 	}
  65 },
  66 
  67 generatemap:function(){
  68 	var map={}
  69 	for (var i=0; i<arguments.length; i++){
  70 		if (arguments[i][1]!=null){
  71 			map[arguments[i][0]]=arguments[i][1]
  72 		}
  73 	}
  74 	return map
  75 },
  76 
  77 init:function(){
  78 	var ac=this
  79 	jQuery(document).ready(function($){
  80 		var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
  81 		var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
  82 		if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
  83 			persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
  84 		groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
  85 		jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
  86 			if (this.id.charAt(0)=='.' || this.id.charAt(0)=='#') this.$divref=$(this.id);
  87             else this.$divref=$('#'+this.id);
  88 			if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){
  89 				var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
  90 			}
  91 			else{
  92 				var cssdisplay=this.getAttr('hide')? 'none' : null
  93 			}
  94 			this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
  95 			this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
  96 			if (this.getAttr('group')){ //if this DIV has the "group" attr defined
  97 				var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
  98 				targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
  99 				if (!targetgroup.lastactivedivid && this.$divref.css('display')!='none' || cssdisplay=="block") //if this DIV was open by default or should be open due to persistence								
 100 					targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded)
 101 				this.$divref.css({display:'none'}) //hide any DIV that's part of said group for now
 102 			}
 103 		}) //end divholders.each
 104 		jQuery.each(ac.divgroups, function(){ //loop through each group
 105 			if (this.lastactivedivid)
 106 				ac.divholders[this.lastactivedivid].$divref.show() //and show last "active" DIV within each group (one that should be expanded)
 107 		})
 108 		var $allcontrols=$('*[rel]').filter('[@rel^="collapse-"], [@rel^="expand-"], [@rel^="toggle-"]') //get all elements on page with rel="collapse-", "expand-" and "toggle-"
 109 		var controlidentifiers=/(collapse-)|(expand-)|(toggle-)/
 110 		$allcontrols.each(function(){
 111 			$(this).click(function(){
 112 				var relattr=this.getAttribute('rel')
 113 				var divid=relattr.replace(controlidentifiers, '')
 114 				var doaction=(relattr.indexOf("collapse-")!=-1)? "hide" : (relattr.indexOf("expand-")!=-1)? "show" : "toggle"
 115 				return ac.showhide(divid, doaction)
 116 			}) //end control.click
 117 		})// end control.each
 118 		$(window).bind('unload', function(){
 119 			ac.uninit()
 120 		})
 121 	}) //end doc.ready()
 122 },
 123 
 124 uninit:function(){
 125 	var opendivids='', groupswithpersist=''
 126 	jQuery.each(this.divholders, function(){
 127 		if (this.$divref.css('display')!='none'){
 128 			opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
 129 		}
 130 		if (this.getAttr('group') && this.getAttr('persist'))
 131 			groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
 132 	})
 133 	opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
 134 	groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
 135 	this.setCookie('acopendivids', opendivids)
 136 	this.setCookie('acgroupswithpersist', groupswithpersist)
 137 },
 138 
 139 getCookie:function(Name){ 
 140 	var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
 141 	if (document.cookie.match(re)) //if cookie found
 142 		return document.cookie.match(re)[0].split("=")[1] //return its value
 143 	return null
 144 },
 145 
 146 setCookie:function(name, value, days){
 147 	if (typeof days!="undefined"){ //if set persistent cookie
 148 		var expireDate = new Date()
 149 		expireDate.setDate(expireDate.getDate()+days)
 150 		document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
 151 	}
 152 	else //else if this is a session only cookie
 153 		document.cookie = name+"="+value+"; path=/"
 154 }
 155 
 156 }