https://winfashion.com/scripts/switchcontent.js

1// -------------------------------------------------------------------
2// Switch Content Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
3// Created: Jan 5th, 2007
4// April 5th, 07: Added ability to persist content states by x days versus just session only
5// March 27th, 08': Added ability for certain headers to get its contents remotely from an external file via Ajax (2 variables below to customize)
6// -------------------------------------------------------------------
7
8var switchcontent_ajax_msg='<em>Loading Ajax content...</em>' //Customize message to show while fetching Ajax content (if applicable)
9var switchcontent_ajax_bustcache=true //Bust cache and refresh fetched Ajax contents when page is reloaded/ viewed again?
10
11function switchcontent(className, filtertag){
12	this.className=className
13	this.collapsePrev=false //Default: Collapse previous content each time
14	this.persistType="none" //Default: Disable persistence
15	//Limit type of element to scan for on page for switch contents if 2nd function parameter is defined, for efficiency sake (ie: "div")
16	this.filter_content_tag=(typeof filtertag!="undefined")? filtertag.toLowerCase() : ""
17	this.ajaxheaders={} //object to hold path to ajax content for corresponding header (ie: ajaxheaders["header1"]='external.htm')
18}
19
20switchcontent.prototype.setStatus=function(openHTML, closeHTML){ //PUBLIC: Set open/ closing HTML indicator. Optional
21	this.statusOpen=openHTML
22	this.statusClosed=closeHTML
23}
24
25switchcontent.prototype.setColor=function(openColor, closeColor){ //PUBLIC: Set open/ closing color of switch header. Optional
26	this.colorOpen=openColor
27	this.colorClosed=closeColor
28}
29
30switchcontent.prototype.setPersist=function(bool, days){ //PUBLIC: Enable/ disable persistence. Default is false.
31	if (bool==true){ //if enable persistence
32		if (typeof days=="undefined") //if session only
33			this.persistType="session"
34		else{ //else if non session persistent
35			this.persistType="days"
36			this.persistDays=parseInt(days)
37		}
38	}
39	else
40		this.persistType="none"
41}
42
43switchcontent.prototype.collapsePrevious=function(bool){ //PUBLIC: Enable/ disable collapse previous content. Default is false.
44	this.collapsePrev=bool
45}
46
47switchcontent.prototype.setContent=function(index, filepath){ //PUBLIC: Set path to ajax content for corresponding header based on header index
48	this.ajaxheaders["header"+index]=filepath
49}
50
51switchcontent.prototype.sweepToggle=function(setting){ //PUBLIC: Expand/ contract all contents method. (Values: "contract"|"expand")
52	if (typeof this.headers!="undefined" && this.headers.length>0){ //if there are switch contents defined on the page
53		for (var i=0; i<this.headers.length; i++){
54			if (setting=="expand")
55				this.expandcontent(this.headers[i]) //expand each content
56			else if (setting=="contract")
57				this.contractcontent(this.headers[i]) //contract each content
58		}
59	}
60}
61
62
63switchcontent.prototype.defaultExpanded=function(){ //PUBLIC: Set contents that should be expanded by default when the page loads (ie: defaultExpanded(0,2,3)). Persistence if enabled overrides this setting.
64	var expandedindices=[] //Array to hold indices (position) of content to be expanded by default
65	//Loop through function arguments, and store each one within array
66	//Two test conditions: 1) End of Arguments array, or 2) If "collapsePrev" is enabled, only the first entered index (as only 1 content can be expanded at any time)
67	for (var i=0; (!this.collapsePrev && i<arguments.length) || (this.collapsePrev && i==0); i++)
68		expandedindices[expandedindices.length]=arguments[i]
69	this.expandedindices=expandedindices.join(",") //convert array into a string of the format: "0,2,3" for later parsing by script
70}
71
72
73//PRIVATE: Sets color of switch header.
74
75switchcontent.prototype.togglecolor=function(header, status){
76	if (typeof this.colorOpen!="undefined")
77		header.style.color=status
78}
79
80
81//PRIVATE: Sets status indicator HTML of switch header.
82
83switchcontent.prototype.togglestatus=function(header, status){
84	if (typeof this.statusOpen!="undefined")
85		header.firstChild.innerHTML=status
86}
87
88
89//PRIVATE: Contracts a content based on its corresponding header entered
90
91switchcontent.prototype.contractcontent=function(header){
92	var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content container for this header
93	innercontent.style.display="none"
94	this.togglestatus(header, this.statusClosed)
95	this.togglecolor(header, this.colorClosed)
96}
97
98
99//PRIVATE: Expands a content based on its corresponding header entered
100
101switchcontent.prototype.expandcontent=function(header){
102	var innercontent=document.getElementById(header.id.replace("-title", ""))
103	if (header.ajaxstatus=="waiting"){//if this is an Ajax header AND remote content hasn't already been fetched
104		switchcontent.connect(header.ajaxfile, header)
105	}
106	innercontent.style.display="block"
107	this.togglestatus(header, this.statusOpen)
108	this.togglecolor(header, this.colorOpen)
109}
110
111// -------------------------------------------------------------------
112// PRIVATE: toggledisplay(header)- Toggles between a content being expanded or contracted
113// If "Collapse Previous" is enabled, contracts previous open content before expanding current
114// -------------------------------------------------------------------
115
116switchcontent.prototype.toggledisplay=function(header){
117	var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content container for this header
118	if (innercontent.style.display=="block")
119		this.contractcontent(header)
120	else{
121		this.expandcontent(header)
122		if (this.collapsePrev && typeof this.prevHeader!="undefined" && this.prevHeader.id!=header.id) // If "Collapse Previous" is enabled and there's a previous open content
123			this.contractcontent(this.prevHeader) //Contract that content first
124	}
125	if (this.collapsePrev)
126		this.prevHeader=header //Set current expanded content as the next "Previous Content"
127}
128
129
130// -------------------------------------------------------------------
131// PRIVATE: collectElementbyClass()- Searches and stores all switch contents (based on shared class name) and their headers in t

131wo arrays
132// Each content should carry an unique ID, and for its header, an ID equal to "CONTENTID-TITLE"
133// -------------------------------------------------------------------
134
135switchcontent.prototype.collectElementbyClass=function(classname){ //Returns an array containing DIVs with specified classname
136	var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
137	this.headers=[], this.innercontents=[]
138	if (this.filter_content_tag!="") //If user defined limit type of element to scan for to a certain element (ie: "div" only)
139		var allelements=document.getElementsByTagName(this.filter_content_tag)
140	else //else, scan all elements on the page!
141		var allelements=document.all? document.all : document.getElementsByTagName("*")
142	for (var i=0; i<allelements.length; i++){
143		if (typeof allelements[i].className=="string" && allelements[i].className.search(classnameRE)!=-1){
144			if (document.getElementById(allelements[i].id+"-title")!=null){ //if header exists for this inner content
145				this.headers[this.headers.length]=document.getElementById(allelements[i].id+"-title") //store reference to header intended for this inner content
146				this.innercontents[this.innercontents.length]=allelements[i] //store reference to this inner content
147			}
148		}
149	}
150}
151
152
153//PRIVATE: init()- Initializes Switch Content function (collapse contents by default unless exception is found)
154
155switchcontent.prototype.init=function(){
156	var instanceOf=this
157	this.collectElementbyClass(this.className) //Get all headers and its corresponding content based on shared class name of contents
158	if (this.headers.length==0) //If no headers are present (no contents to switch), just exit
159		return
160	//If admin has changed number of days to persist from current cookie records, reset persistence by deleting cookie
161	if (this.persistType=="days" && (parseInt(switchcontent.getCookie(this.className+"_dtrack"))!=this.persistDays))
162		switchcontent.setCookie(this.className+"_d", "", -1) //delete cookie
163	// Get ids of open contents below. Four possible scenerios:
164	// 1) Session only persistence is enabled AND corresponding cookie contains a non blank ("") string
165	// 2) Regular (in days) persistence is enabled AND corresponding cookie contains a non blank ("") string
166	// 3) If there are contents that should be enabled by default (even if persistence is enabled and this IS the first page load)
167	// 4) Default to no contents should be expanded on page load ("" value)
168	var opencontents_ids=(this.persistType=="session" && switchcontent.getCookie(this.className)!="")? ','+switchcontent.getCookie(this.className)+',' : (this.persistType=="days" && switchcontent.getCookie(this.className+"_d")!="")? ','+switchcontent.getCookie(this.className+"_d")+',' : (this.expandedindices)? ','+this.expandedindices+',' : ""
169	for (var i=0; i<this.headers.length; i++){ //BEGIN FOR LOOP
170		if (typeof this.ajaxheaders["header"+i]!="undefined"){ //if this is an Ajax header
171			this.headers[i].ajaxstatus='waiting' //two possible statuses: "waiting" and "loaded"
172			this.headers[i].ajaxfile=this.ajaxheaders["header"+i]
173		}
174		if (typeof this.statusOpen!="undefined") //If open/ closing HTML indicator is enabled/ set
175			this.headers[i].innerHTML='<span class="status"></span>'+this.headers[i].innerHTML //Add a span element to original HTML to store indicator
176		if (opencontents_ids.indexOf(','+i+',')!=-1){ //if index "i" exists within cookie string or default-enabled string (i=position of the content to expand)
177			this.expandcontent(this.headers[i]) //Expand each content per stored indices (if ""Collapse Previous" is set, only one content)
178			if (this.collapsePrev) //If "Collapse Previous" set
179			this.prevHeader=this.headers[i]  //Indicate the expanded content's corresponding header as the last clicked on header (for logic purpose)
180		}
181		else //else if no indices found in stored string
182			this.contractcontent(this.headers[i]) //Contract each content by default
183		this.headers[i].onclick=function(){instanceOf.toggledisplay(this)}
184	} //END FOR LOOP
185	switchcontent.dotask(window, function(){instanceOf.rememberpluscleanup()}, "unload") //Call persistence method onunload
186}
187
188
189// -------------------------------------------------------------------
190// PRIVATE: rememberpluscleanup()- Stores the indices of content that are expanded inside session only cookie
191// If "Collapse Previous" is enabled, only 1st expanded content index is stored
192// -------------------------------------------------------------------
193
194//Function to store index of opened ULs relative to other ULs in Tree into cookie:
195switchcontent.prototype.rememberpluscleanup=function(){
196	//Define array to hold ids of open content that should be persisted
197	//Default to just "none" to account for the case where no contents are open when user leaves the page (and persist that):
198	var opencontents=new Array("none")
199	for (var i=0; i<this.innercontents.length; i++){
200		//If persistence enabled, content in question is expanded, and either "Collapse Previous" is disabled, or if enabled, this is the first expanded content
201		if (this.persistType!="none" && this.innercontents[i].style.display=="block" && (!this.collapsePrev || (this.collapsePrev && opencontents.length<2)))
202			opencontents[opencontents.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
203		this.headers[i].onclick=null //Cleanup code
204	}
205	if (opencontents.length>1) //If there exists open content to be persisted
206		opencontents.shift() //Boot the "none" value from the array, so all it contains are the ids of the open contents
207	if (typeof this.statusOpen!="undefined")
208		this.statusOpen=this.statusClosed=null //Cleanup code
209	if (this.persistType=="session") //if session only cookie set
210		switchcontent.setCookie(this.className, opencontents.join(",")) //populate cookie with indices of open contents: classname=1,2,3,etc
211	else if (this.persistType=="days" && typeof this.persistDays=="number"){ //if persistent cookie set instead
212		switchcontent.setCookie(this.className+"_d", opencontents.join(","), this.persistDays) //populate cookie with indices of open contents
213		switchcontent.setCookie(this.className+"_dtrack", this.persistDays, this.persistDays) //also remember number of days to persist (int)
214	}
215}
216
217
218// -------------------------------------------------------------------
219// A few utility functions below:
220// -------------------------------------------------------------------
221
222
223switchcontent.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
224	var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
225	if (target.addEventListener)
226		target.addEventListener(tasktype, functionref, false)
227	else if (target.attachEvent)
228		target.attachEvent(tasktype, functionref)
229}
230
231switchcontent.connect=function(pageurl, header){
232	var page_request = false
233	var bustcacheparameter=""
234	if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
235		try {
236		page_request = new ActiveXObject("Msxml2.XMLHTTP")
237		} 
238		catch (e){
239			try{
240			page_request = new ActiveXObject("Microsoft.XMLHTTP")
241			}
242			catch (e){}
243		}
244	}
245	else if (window.XMLHttpRequest) // if Mozilla, Safari etc
246		page_request = new XMLHttpRequest()
247	else
248		return false
249	page_request.onreadystatechange=function(){switchcontent.loadpage(page_request, header)}
250	if (switchcontent_ajax_bustcache) //if bust caching of external page
251		bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
252	page_request.open('GET', pageurl+bustcacheparameter, true)
253	page_request.send(null)
254}
255
256switchcontent.loadpage=function(page_request, header){
257	var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content container for this header
258	innercontent.innerHTML=switchcontent_ajax_msg //Display "fetching page message"
259	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
260		innercontent.innerHTML=page_request.responseText
261		header.ajaxstatus="loaded"
262	}
263}
264
265switchcontent.getCookie=function(Name){ 
266	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
267	if (document.cookie.match(re)) //if cookie found
268		return document.cookie.match(re)[0].split("=")[1] //return its value
269	return ""
270}
271
272switchcontent.setCookie=function(name, value, days){
273	if (typeof days!="undefined"){ //if set persistent cookie
274		var expireDate = new Date()
275		var expstring=expireDate.setDate(expireDate.getDate()+days)
276		document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()
277	}
278	else //else if this is a session only cookie
279		document.cookie = name+"="+value
280}
281
282