my-events.js

by Kevin Lawver
This file powers the fairly simple My Events module (live example). It lets folks create a list of events marked up in the hcal microformat.
myevents.init: The onload event for the module. Finds the "big" containers and runs the edit function.
myevents.onsave: Runs right before the page is published, fires off the ping to Pingerati when content has changed.
myevents.edit: Edit function, loads existing events into the form, and attaches onsubmit and onclick events
myevents.toggleSet: Uses the Dojo fx library to open or close the ending time fieldset. In earlier drafts of the module, there were more sets you could open and close.
myevents.addNew: Adds a new set of event fields to the form. Much longer and more complex than it probably should be.
myevents.parseDate: Parses out the date stored in an abbr element's title attribute and returns an array of values.
myevents.changeSelected: Given a select node and a value, compares the values of that element's option elements and changes the selectedIndex if it finds one that matches (if multiple options match, it only selects the first).
myevents.save: Takes all events from the form and adds them to the module's "view".
if ( !myevents ) {
	var myevents={
		isinit:false,
		standalone:false,
		debug:false
	};
	
	if ( myevents.standalone && !myevents.isinit ) {
		var head=document.getElementsByTagName("head")[0];		
	    	djConfig={ baseScriptUri:"http://www.aimpages.com/.resource/jssdk/dojo-0.2.2", isDebug:true };
	    	lop_dojoBaseScriptUri="http://www.aimpages.com/.resource/jssdk/dojo-0.2.2";
	    	
	    	var ds=document.createElement("script");
	    		ds.setAttribute("type","text/javascript");
	    		ds.setAttribute("src","http://o.aolcdn.com/iamalpha/.resource/jssdk/dojo-0.2.2/dojo.js");
	    	var ls=ds.cloneNode(true);
	    		ls.setAttribute("src","http://www.aimpages.com/.resource/jssdk/lop.js");
	    	head.appendChild(ds);
	    	head.appendChild(ls);
	}
}

myevents.init=function(instance,action) {
	var module,view;
		
	module=dojo.byId(instance);
	view=dojo.html.getElementsByClass("view",module,"div")[0];
	
	if ( !instance ) {
		instance="my-events";
		action="view";
		myevents.init('my-events','edit');
	}
	
	switch(action) {
		case "edit":
			myevents.edit(instance,module,view);
			break;
	}
	
	if (lop_isEditDomain()) {
		if ( dojo.event.topic ) {
			dojo.event.topic.subscribe("pageSaveImminent",myevents,"onsave");
		}
	}
	
	myevents.hasChanged=false;
	myevents.isinit=true;
}

myevents.onsave=function(instance) {
	if (myevents.hasChanged) {
		var url="http://pingerati.net/ping/delay:60/www.aimpages.com/"+pub.visitor.getNormalizedScreeName+"/";
		var success=function() {
			if (console && console.debug) {
				console.debug("my-events: successfully pinged-erati");
			}
		}
		var error=function() {
			if (console && console.debug) {
				console.debug("my-events: failed to pingerati");
			}
		}
		var req=new lop.Ajax();
		req.simpleGet(url, success, error, null);
	}
}

myevents.edit=function(instance,module,view) {
	var edit, form;
	
	edit=dojo.html.getElementsByClass("edit",module,"div")[0];
	
	form=edit.getElementsByTagName("form")[0];
	ul=form.getElementsByTagName("ul")[0];
	viewUL=dojo.html.getElementsByClass("vevents",view,"ul")[0];
	moduleTitle=dojo.dom.textContent(dojo.html.getElementsByClass("head",view,"div")[0].getElementsByTagName("h3")[0]);
	
	titleField=dojo.html.getElementsByClass("module-title",form,"input")[0];
	titleField.value=moduleTitle;
	
	dtstartCheck=dojo.html.getElementsByClass("has-dtstart",form,"input")[0];
	dtendCheck=dojo.html.getElementsByClass("has-dtend",form,"input")[0];
	addLink=dojo.html.getElementsByClass("add-event",form,"a")[0];

	dojo.event.connect(addLink,"onclick", function(evt) {
		myevents.addNew(ul);
	})
	
	if ( !myevents.formTemplate) {
		firstItem=dojo.html.getElementsByClass("vevent",ul,"li")[0];
		myevents.formTemplate=firstItem.cloneNode(true);
	}
	
	ul.innerHTML="";
	
	dojo.event.connect(form,"onsubmit",function(evt) {
		myevents.save(evt.currentTarget);
	});
	
	dojo.event.connect(dtendCheck,"onclick",function(evt) {
		myevents.toggleSet(evt.currentTarget);
	});
	
	form.setAttribute("action","javascript:myevents.n()");
	
	var prevEvents=viewUL.childNodes, nEvents=prevEvents.length;
	for (i=0;i<nEvents;i++) {
		li=prevEvents[i];
		if (li.nodeName != "LI") {
			continue;
		}
		myevents.addNew(ul,li);
	}
	if (nEvents<1) {
		myevents.addNew(ul);
	}
}

myevents.toggleSet=function(check) {
	var container=check.parentNode.parentNode, set=container.getElementsByTagName("fieldset")[0];
	if (dojo.html.hasClass(set,"active")) {
		dojo.fx.wipeOut(set,200,function(n) {
			dojo.html.removeClass(n,"active");
		});
	} else {
		dojo.fx.wipeIn(set,200,function(n) {
			dojo.html.addClass(n,"active");
		});
	}
}

myevents.addNew=function(ul,viewLI) {
	var li=myevents.formTemplate.cloneNode(true),dtstart="",dtend="",summary="", description="", location="", out="", eventURL="", dtstartNode, dtendNode, summaryNode, descriptionNode, locationNode, eventURLNode;
	
	li.className="vevent";
	dtendCheck=dojo.html.getElementsByClass("has-dtend",li,"input")[0];
	
	dojo.event.connect(dtendCheck,"onclick",function(evt) {
		myevents.toggleSet(evt.currentTarget);
	});
	
	if (viewLI) {
		dtstartNode=dojo.html.getElementsByClass("dtstart",viewLI,"abbr");
		if (dtstartNode.length>0) {
			dtstart=dtstartNode[0].getAttribute("title");
		}
		dtendNode=dojo.html.getElementsByClass("dtend",viewLI,"abbr");
		if (dtendNode.length>0) {
			dtend=dtendNode[0].getAttribute("title");
		}
		summaryNode=dojo.html.getElementsByClass("summary",viewLI,"h4");
		if (summaryNode.length>0) {
			summary=dojo.dom.textContent(summaryNode[0])
			urlNode=summaryNode[0].getElementsByTagName("a");
			if (urlNode.length>0) {
				url=urlNode[0].href;
			}
		}
		descriptionNode=dojo.html.getElementsByClass("description",viewLI,"div");
		if (descriptionNode.length>0) {
			description=dojo.dom.textContent(descriptionNode[0]);
		}
		
		locationNode=dojo.html.getElementsByClass("location",viewLI,"p");
		if (locationNode.length>0) {
			location=dojo.dom.textContent(locationNode[0])
		}
		
		summaryField=dojo.html.getElementsByClass("summary",li,"input")[0];
		descriptionField=dojo.html.getElementsByClass("event-description",li,"input")[0];
		locationField=dojo.html.getElementsByClass("location",li,"input")[0];
		urlField=dojo.html.getElementsByClass("url",li,"input")[0];
		startMonthField=dojo.html.getElementsByClass("dtstart-month",li,"select")[0];
		endMonthField=dojo.html.getElementsByClass("dtend-month",li,"select")[0];
		endCheck=dojo.html.getElementsByClass("has-dtend",li,"input")[0];
		startDayField=dojo.html.getElementsByClass("dtstart-day",li,"select")[0];
		endDayField=dojo.html.getElementsByClass("dtend-day",li,"select")[0];
		
		startYearField=dojo.html.getElementsByClass("dtstart-year",li,"input")[0];
		endYearField=dojo.html.getElementsByClass("dtend-year",li,"input")[0];
		
		startHourField=dojo.html.getElementsByClass("dtstart-hour",li,"select")[0];
		endHourField=dojo.html.getElementsByClass("dtend-hour",li,"select")[0];
		
		startMinuteField=dojo.html.getElementsByClass("dtstart-minute",li,"select")[0];
		endMinuteField=dojo.html.getElementsByClass("dtend-minute",li,"select")[0];
		
		summaryField.value=summary;
		descriptionField.value=description;
		locationField.value=location;
		urlField.value=url;
		
		if (dtend.length>0) {
			endCheck.checked=true;
		}
		
		startArray=myevents.parseDate(dtstart);
		endArray=myevents.parseDate(dtend);
		
		myevents.changeSelected(startMonthField,startArray[1]);
		myevents.changeSelected(endMonthField,endArray[1]);
		
		myevents.changeSelected(startDayField,startArray[2]);
		myevents.changeSelected(endDayField,endArray[2]);
		
		myevents.changeSelected(startHourField,startArray[3]);
		myevents.changeSelected(endHourField,endArray[3]);
		
		myevents.changeSelected(startMinuteField,startArray[4]);
		myevents.changeSelected(endMinuteField,endArray[4])
		
		startYearField.value=startArray[0];
		endYearField.value=endArray[0];
	}
	
	li.style.display="none";
		
	ul.appendChild(li);
	
	dojo.fx.fadeShow(li,200);
}

myevents.parseDate=function(date) {
	var _one=date.split("T"),hour="",minute="",year="", month="", day="";
	if (_one.length>1) {
		_time=_one[1].split(":");
		hour=_time[0];
		minute=_time[1];
	}
	_date=_one[0].split("-");
	year=_date[0];
	month=_date[1];
	day=_date[2];
	
	return [year,month,day,hour,minute];	
}

myevents.changeSelected=function(select,value) {
	var options=select.options, n=options.length, i=0;
	for (i=0;i<n;i++) {
		if (options[i].value==value) {
			options[i].selected=true;
			return;
		}
	}
}

myevents.save=function(form) {
	var module, view, viewList,ul,eventItems,nEvents,i,out="", location, moduleTitle, head, description, url, dtstartYear, dtstartMonthSelect, dtstartDaySelect, dtstartHourSelect;
	
	module=form.parentNode.parentNode.parentNode;
	view=dojo.html.getElementsByClass("view",module,"div")[0];
	viewList=dojo.html.getElementsByClass("vevents",view,"ul")[0];
	ul=dojo.html.getElementsByClass("vevents",form,"ul")[0];
	eventItems=dojo.html.getElementsByClass("vevent",ul,"li");
	nEvents=eventItems.length;
	
	myevents.view(module,view);
	
	for (i=0;i<nEvents;i++) {
		li=eventItems[i];
		summaryField=dojo.html.getElementsByClass("summary",li,"input")[0];
			
		if (!summaryField) {
			continue;
		}
		
		summary=summaryField.value;
		
		moduleTitle=dojo.html.getElementsByClass("module-title",form,"input")[0].value;
		head=dojo.html.getElementsByClass("head",view,"div")[0].getElementsByTagName("h3")[0];
		dojo.dom.textContent(head,moduleTitle)
		
		description=dojo.html.getElementsByClass("event-description",li,"input")[0].value;
		location=dojo.html.getElementsByClass("location",li,"input")[0].value;
		url=dojo.html.getElementsByClass("url",li,"input")[0].value;
		dtstartYear=dojo.html.getElementsByClass("dtstart-year",li,"input")[0].value;
		dtstartMonthSelect=dojo.html.getElementsByClass("dtstart-month",li,"select")[0];
		dtstartDaySelect=dojo.html.getElementsByClass("dtstart-day",li,"select")[0];
		dtstartHourSelect=dojo.html.getElementsByClass("dtstart-hour",li,"select")[0];
		dtstartMinuteSelect=dojo.html.getElementsByClass("dtstart-minute",li,"select")[0];
		dtstartMonth=dtstartMonthSelect[dtstartMonthSelect.selectedIndex].value;
		dtstartDay=dtstartDaySelect[dtstartDaySelect.selectedIndex].value;
		dtstartHour=dtstartHourSelect[dtstartHourSelect.selectedIndex].value;
		dtstartMinute=dtstartMinuteSelect[dtstartMinuteSelect.selectedIndex].value;
		
		if (dtstartYear.length<1 || dtstartMonth.length<1 || dtstartDay.length<1) {
			alert("You have to have a start date (month,day,year) for each event");
			return;
		}
		
		dtendYear=dojo.html.getElementsByClass("dtend-year",li,"input")[0].value;
		dtendMonthSelect=dojo.html.getElementsByClass("dtend-month",li,"select")[0];
		dtendDaySelect=dojo.html.getElementsByClass("dtend-day",li,"select")[0];
		dtendHourSelect=dojo.html.getElementsByClass("dtend-month",li,"select")[0];
		dtendMinuteSelect=dojo.html.getElementsByClass("dtend-minute",li,"select")[0];
		dtendMonth=dtendMonthSelect[dtendMonthSelect.selectedIndex].value;
		dtendDay=dtendDaySelect[dtendDaySelect.selectedIndex].value;
		dtendHour=dtendHourSelect[dtendHourSelect.selectedIndex].value;
		dtendMinute=dtendMinuteSelect[dtendMinuteSelect.selectedIndex].value;
		
		out+="<li class='vevent'><h4 class='summary'>";
		if (url.length>0) {
			out+="<a class='url' href='"+url+"' target='_new'>";
		}
		out+=summary;
		if (url.length>0) {
			out+="</a>";
		}
		
		dtstart=dtstartYear+"-"+dtstartMonth+"-"+dtstartDay;
		if (dtstartHour.length>0 && dtstartMinute.length>0) {
			dtstart+="T"+dtstartHour+":"+dtstartMinute+":00";
		}
		dtend="";
		if (dtendYear.length>0 && dtendMonth.length>0 && dtendDay.length>0) {
			dtend=dtendYear+"-"+dtendMonth+"-"+dtendDay;
			if (dtendHour.length>0 && dtendMinute.length>0) {
				dtend+="T"+dtendHour+":"+dtendMinute+":00";
			}
		}
		
		out+="</h4><div class='description'>"+description+"</div>"
		
		if (location.length>0) {
			out+="<p class='location'>"+location+"</p>";
		}
		
		out+="<p><abbr class='dtstart' title='"+dtstart+"'>"+dtstartMonth+"/"+dtstartDay+"/"+dtstartYear;
	
		if (dtstartHour.length>0 && dtstartMinute.length>0) {
			out+=" "+dtstartHour+":"+dtstartMinute;
		}
		out+="</abbr>";
		if (dtend.length>0) {
			out+=" - <abbr class='dtend' title='"+dtend+"'>"+dtendMonth+"/"+dtendDay+"/"+dtendYear;
			if ( dtendHour.length>0 && dtendMinute.length>0) {
				out+=" "+dtendHour+":"+dtendMinute;
			}
			out+="</abbr>";
		}
		out+="</p>";
		
		out+="</li>";
	}
	
	viewList.innerHTML=out;
	
	if ( !dojo.lang.isUndefined(lop_mod_closeModEdit) ) {
		lop_mod_closeModEdit()
	} 
	
	myevents.hasChanged=true;
	
}

myevents.n=function() {}
my-events.js

Contents
