modules/collaborative_editor/drupal.collaborative_editor_ui.js

function addVisualElements() {
	var i = 0, el, els = document.getElementsByTagName("fieldset");
	// iterates each input element
	while (el = els[i++]) {
		if (el.childNodes[0].childNodes[0].nodeValue == 'Collaborative editor') {
			var fieldSetEl = el;
		}
	}
	var saveMessageEl = document.createElement("DIV");
	fieldSetEl.appendChild(saveMessageEl);
	saveMessageEl.setAttribute("id","autosave");
	saveMessageEl.innerHTML = "Doc not saved yet";
	styleElement(saveMessageEl,'#888','Trebuchet MS','normal','0.9em');

	var helpMessageEl = document.createElement("DIV");
	fieldSetEl.appendChild(helpMessageEl);
	helpMessageEl.innerHTML = "Click on submit button to save the document manually";
	styleElement(helpMessageEl,'#000','Trebuchet MS','normal','0.8em');

	var listHeaderEl = document.createElement("DIV");
	fieldSetEl.appendChild(listHeaderEl);
	listHeaderEl.innerHTML = "Users:";
	styleElement(listHeaderEl,'#000','Trebuchet MS','normal','1em');
	listHeaderEl.style.paddingTop = '10px';
	
	var userListEl = document.createElement("DIV");
	fieldSetEl.appendChild(userListEl);
	userListEl.setAttribute("id","userlist");
}


function showLastUpdate(isCollision, exitDocument) {
	setTimeout(function () {
		if (isCollision != 1 && !exitDocument) {
			var autoSaveEl = document.getElementById("autosave");
			var dateObj = new Date();
			autoSaveEl.innerHTML = "Last saved at " + dateObj.toLocaleTimeString();
			styleElement(autoSaveEl,'#888','Trebuchet MS','normal','1em');
		}	
		}, 2000);
	}


	function showUserList(userList) {
		var userListInitEl = document.getElementById("userlist");
		var userListEl = document.createElement("DIV");
		userListEl.setAttribute("id","userlist");
		userListInitEl.parentNode.replaceChild(userListEl,userListInitEl);
		var newUserListEl = document.getElementById("userlist");
		for (var i = 0; i < userList.length; i++) {
			var newUserEl = document.createElement("LI");
			newUserListEl.appendChild(newUserEl);
			styleElement(newUserListEl,'red','Trebuchet MS','normal','1em');
			newUserListEl.style.listStyle = 'none';
			newUserEl.innerHTML = userList[i] + "<span style='color: #888;'> is editing...</span>";
		}
	}


	function showSaveMessage() {
		var autoSaveEl = document.getElementById("autosave");
		autoSaveEl.innerHTML = "AutoSaving...";
		styleElement(autoSaveEl,'#639ACE','Trebuchet MS','bold','1em');
	}
	
	function styleElement(el,inputColor,inputFontFamily,inputFontWeight,inputFontSize) {
		el.style.color = inputColor;
		el.style.fontFamily = inputFontFamily;
		el.style.fontWeight = inputFontWeight;
		el.style.fontSize = inputFontSize;
	}
1	function addVisualElements() {
2	var i = 0, el, els = document.getElementsByTagName("fieldset");
3	// iterates each input element
4	while (el = els[i++]) {
5	if (el.childNodes[0].childNodes[0].nodeValue == 'Collaborative editor') {
6	var fieldSetEl = el;
7	}
8	}
9	var saveMessageEl = document.createElement("DIV");
10	fieldSetEl.appendChild(saveMessageEl);
11	saveMessageEl.setAttribute("id","autosave");
12	saveMessageEl.innerHTML = "Doc not saved yet";
13	styleElement(saveMessageEl,'#888','Trebuchet MS','normal','0.9em');
14
15	var helpMessageEl = document.createElement("DIV");
16	fieldSetEl.appendChild(helpMessageEl);
17	helpMessageEl.innerHTML = "Click on submit button to save the document manually";
18	styleElement(helpMessageEl,'#000','Trebuchet MS','normal','0.8em');
19
20	var listHeaderEl = document.createElement("DIV");
21	fieldSetEl.appendChild(listHeaderEl);
22	listHeaderEl.innerHTML = "Users:";
23	styleElement(listHeaderEl,'#000','Trebuchet MS','normal','1em');
24	listHeaderEl.style.paddingTop = '10px';
25
26	var userListEl = document.createElement("DIV");
27	fieldSetEl.appendChild(userListEl);
28	userListEl.setAttribute("id","userlist");
29	}
30
31
32	function showLastUpdate(isCollision, exitDocument) {
33	setTimeout(function () {
34	if (isCollision != 1 && !exitDocument) {
35	var autoSaveEl = document.getElementById("autosave");
36	var dateObj = new Date();
37	autoSaveEl.innerHTML = "Last saved at " + dateObj.toLocaleTimeString();
38	styleElement(autoSaveEl,'#888','Trebuchet MS','normal','1em');
39	}
40	}, 2000);
41	}
42
43
44	function showUserList(userList) {
45	var userListInitEl = document.getElementById("userlist");
46	var userListEl = document.createElement("DIV");
47	userListEl.setAttribute("id","userlist");
48	userListInitEl.parentNode.replaceChild(userListEl,userListInitEl);
49	var newUserListEl = document.getElementById("userlist");
50	for (var i = 0; i < userList.length; i++) {
51	var newUserEl = document.createElement("LI");
52	newUserListEl.appendChild(newUserEl);
53	styleElement(newUserListEl,'red','Trebuchet MS','normal','1em');
54	newUserListEl.style.listStyle = 'none';
55	newUserEl.innerHTML = userList[i] + "<span style='color: #888;'> is editing...</span>";
56	}
57	}
58
59
60	function showSaveMessage() {
61	var autoSaveEl = document.getElementById("autosave");
62	autoSaveEl.innerHTML = "AutoSaving...";
63	styleElement(autoSaveEl,'#639ACE','Trebuchet MS','bold','1em');
64	}
65
66	function styleElement(el,inputColor,inputFontFamily,inputFontWeight,inputFontSize) {
67	el.style.color = inputColor;
68	el.style.fontFamily = inputFontFamily;
69	el.style.fontWeight = inputFontWeight;
70	el.style.fontSize = inputFontSize;
71	}