| 1906 |
alexandre_ |
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 |
this.$divref=$('#'+this.id)
|
|
|
87 |
if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){
|
|
|
88 |
var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
|
|
|
89 |
}
|
|
|
90 |
else{
|
|
|
91 |
var cssdisplay=this.getAttr('hide')? 'none' : null
|
|
|
92 |
}
|
|
|
93 |
this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
|
|
|
94 |
this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
|
|
|
95 |
if (this.getAttr('group')){ //if this DIV has the "group" attr defined
|
|
|
96 |
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
|
|
|
97 |
targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
|
|
|
98 |
if (!targetgroup.lastactivedivid && this.$divref.css('display')!='none' || cssdisplay=="block") //if this DIV was open by default or should be open due to persistence
|
|
|
99 |
targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded)
|
|
|
100 |
this.$divref.css({display:'none'}) //hide any DIV that's part of said group for now
|
|
|
101 |
}
|
|
|
102 |
}) //end divholders.each
|
|
|
103 |
jQuery.each(ac.divgroups, function(){ //loop through each group
|
|
|
104 |
if (this.lastactivedivid)
|
|
|
105 |
ac.divholders[this.lastactivedivid].$divref.show() //and show last "active" DIV within each group (one that should be expanded)
|
|
|
106 |
})
|
|
|
107 |
var $allcontrols=$('*[rel]').filter('[@rel^="collapse-"], [@rel^="expand-"], [@rel^="toggle-"]') //get all elements on page with rel="collapse-", "expand-" and "toggle-"
|
|
|
108 |
var controlidentifiers=/(collapse-)|(expand-)|(toggle-)/
|
|
|
109 |
$allcontrols.each(function(){
|
|
|
110 |
$(this).click(function(){
|
|
|
111 |
var relattr=this.getAttribute('rel')
|
|
|
112 |
var divid=relattr.replace(controlidentifiers, '')
|
|
|
113 |
var doaction=(relattr.indexOf("collapse-")!=-1)? "hide" : (relattr.indexOf("expand-")!=-1)? "show" : "toggle"
|
|
|
114 |
return ac.showhide(divid, doaction)
|
|
|
115 |
}) //end control.click
|
|
|
116 |
})// end control.each
|
|
|
117 |
$(window).bind('unload', function(){
|
|
|
118 |
ac.uninit()
|
|
|
119 |
})
|
|
|
120 |
}) //end doc.ready()
|
|
|
121 |
},
|
|
|
122 |
|
|
|
123 |
uninit:function(){
|
|
|
124 |
var opendivids='', groupswithpersist=''
|
|
|
125 |
jQuery.each(this.divholders, function(){
|
|
|
126 |
if (this.$divref.css('display')!='none'){
|
|
|
127 |
opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
|
|
|
128 |
}
|
|
|
129 |
if (this.getAttr('group') && this.getAttr('persist'))
|
|
|
130 |
groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
|
|
|
131 |
})
|
|
|
132 |
opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
|
|
|
133 |
groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
|
|
|
134 |
this.setCookie('acopendivids', opendivids)
|
|
|
135 |
this.setCookie('acgroupswithpersist', groupswithpersist)
|
|
|
136 |
},
|
|
|
137 |
|
|
|
138 |
getCookie:function(Name){
|
|
|
139 |
var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
|
|
|
140 |
if (document.cookie.match(re)) //if cookie found
|
|
|
141 |
return document.cookie.match(re)[0].split("=")[1] //return its value
|
|
|
142 |
return null
|
|
|
143 |
},
|
|
|
144 |
|
|
|
145 |
setCookie:function(name, value, days){
|
|
|
146 |
if (typeof days!="undefined"){ //if set persistent cookie
|
|
|
147 |
var expireDate = new Date()
|
|
|
148 |
expireDate.setDate(expireDate.getDate()+days)
|
|
|
149 |
document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
|
|
|
150 |
}
|
|
|
151 |
else //else if this is a session only cookie
|
|
|
152 |
document.cookie = name+"="+value+"; path=/"
|
|
|
153 |
}
|
|
|
154 |
|
|
|
155 |
}
|