http://www.jmmc.fr/twiki/pub/TWiki/TWikiJavascripts/twikiHTML.js

1/**
2HTML utility functions.
3*/
4if (twiki == undefined) var twiki = {};
5twiki.HTML = {
6
7	/**
8	Writes HTML to an HTMLElement.
9	@param inId : (String) id of element to write to
10	@param inHtml : (String) HTML to write
11	@return The updated HTMLElement
12	*/
13	setHtmlOfElementWithId:function(inId, inHtml) {
14		var elem = document.getElementById(inId);
15		return twiki.HTML.setHtmlOfElement(elem, inHtml);
16	},
17	
18	/**
19	Writes HTML to HTMLElement el.
20	@param el : (HTMLElement) element to write to
21	@param inHtml : (String) HTML to write
22	@return The updated HTMLElement
23	*/
24	setHtmlOfElement:function(el, inHtml) {
25		if (!el || inHtml == undefined) return null;
26		el.innerHTML = inHtml;
27		return el;
28	},
29	
30	/**
31	Returns the HTML contents of element with id inId.
32	@param inId : (String) id of element to get contents of
33	@return HTLM contents string.
34	*/
35	getHtmlOfElementWithId:function(inId) {
36		var elem = document.getElementById(inId);
37		return twiki.HTML.getHtmlOfElement(elem);
38	},
39	
40	/**
41	Returns the HTML contents of element el.
42	@param el : (HTMLElement) element to get contents of
43	@return HTLM contents string.
44	*/
45	getHtmlOfElement:function(el) {
46		if (!el) return null;
47		return el.innerHTML;
48	},
49	
50	/**
51	Clears the contents of element inId.
52	@param inId : (String) id of element to clear the contents of
53	@return The cleared HTMLElement.
54	*/
55	clearElementWithId:function(inId) {
56		var elem = document.getElementById(inId);
57		return twiki.HTML.clearElement(elem);
58	},
59	
60	/**
61	Clears the contents of element el.
62	@param el (HTMLElement) : object to clear
63	*/
64	clearElement:function(el) {
65		if (!el) return null;
66		twiki.HTML.setHtmlOfElement(el, "");
67		return el;
68	},
69	
70	/**
71	untested
72	*/
73	deleteElementWithId:function(inId) {
74		var elem = document.getElementById(inId);
75		return twiki.HTML.deleteElement(elem);
76	},
77	
78	/**
79	untested
80	*/
81	deleteElement:function(el) {
82		if (!el) return null;
83		el.parentNode.removeChild(el);
84		return el;
85	},
86	
87	/**
88	Inserts a new HTMLElement after an existing element.
89	@param el : (HTMLElement) (required) the element to insert after
90	@param inType : (String) (required) element type of the new HTMLElement: 'p', 'b', 'span', etc
91	@param inHtmlContents : (String) (optional) element HTML contents
92	@param inAttributes : (Object) (optional) value object with attributes to set to the new element
93	@return The new HTMLElement
94	@use
95	<pre>
96	twiki.HTML.insertAfterElement(
97    		document.getElementById('title'),
98    		'div',
99    		'<strong>not published</strong>',
100    		{
101    			"style":
102    				{
103    					"backgroundColor":"#f00",
104    					"color":"#fff"
105    				}
106    		}
107    	);
108    </pre>
109	*/
110	insertAfterElement:function(el, inType, inHtmlContents, inAttributes) {
111		if (!el || !inType) return null;
112		var newElement = twiki.HTML._createElementWithTypeAndContents(
113			inType,
114			inHtmlContents,
115			inAttributes
116		);
117		if (newElement) {
118			el.appendChild(newElement);
119			return newElement;
120		}
121		return null;
122	},
123	
124	/**
125	Inserts a new HTMLElement before an existing element.
126	@param el : (HTMLElement) (required) the element to insert before
127	@param inType : (String) (required) element type of the new HTMLElement: 'p', 'b', 'span', etc
128	@param inHtmlContents : (String) (optional) element HTML contents
129	@param inAttributes : (Object) (optional) value object with attributes to set to the new element
130	@return The new HTMLElement
131	*/
132	insertBeforeElement:function(el, inType, inHtmlContents, inAttributes) {
133		if (!el || !inType) return null;
134		var newElement = twiki.HTML._createElementWithTypeAndContents(
135			inType,
136			inHtmlContents,
137			inAttributes
138		);
139		if (newElement) {
140			el.parentNode.insertBefore(newElement, el);
141			return newElement;
142		}
143		return null;
144	},
145	
146	/**
147	Replaces an existing HTMLElement with a new element.
148	@param el : (HTMLElement) (required) the existing element to replace
149	@param inType : (String) (required) element type of the new HTMLElement: 'p', 'b', 'span', etc
150	@param inHtmlContents : (String) (optional) element HTML contents
151	@param inAttributes : (Object) (optional) value object with attributes to set to the new element
152	@return The new HTMLElement
153	*/
154	replaceElement:function(el, inType, inHtmlContents, inAttributes) {
155		if (!el || !inType) return null;
156		var newElement = twiki.HTML._createElementWithTypeAndContents(
157			inType,
158			inHtmlContents,
159			inAttributes
160		);
161		if (newElement) {
162			el.parentNode.replaceChild(newElement, el);
163			return newElement;
164		}
165		return null;
166	},
167	
168	/**
169	Creates a new HTMLElement. See insertAfterElement, insertBeforeElement and replaceElement.
170	@return The new HTMLElement
171	@priviliged
172	*/
173	_createElementWithTypeAndContents:function(inType, inHtmlContents, inAttributes) {
174		var newElement = document.createElement(inType);
175		if (inHtmlContents != undefined) {
176			newElement.innerHTML = inHtmlContents;
177		}
178		if (inAttributes != undefined) {
179			twiki.HTML.setElementAttributes(newElement, inAttributes);
180		}
181		return newElement;
182	},
183
184	/**
185	Passes attributes from value object inAttributes to all nodes in NodeList inNodeList.
186	@param inNodeList : (NodeList) nodes to set the style of
187	@param inAttributes : (Object) value object with element properties, with stringified keys. For example, use "class":"twikiSmall" to set the class. This cannot be a property key written as <code>class</code> because this is a reserved keyword.
188	@use
189	In this example all NodeList elements get assigend a class and style:
190	<pre>
191	var elem = document.getElementById("my_div");
192	var nodeList = elem.getElementsByTagName('ul')
193	var attributes = {
194		"class":"twikiSmall twikiGrayText",
195    	"style":
196    		{
197    			"fontSize":"20px",
198    			"backgroundColor":"#444",
199    			"borderLeft":"5px solid red",
200				"margin":"0 0 1em 0"
201    		}
202    	};
203	twiki.HTML.setNodeAttributesInList(nodeList, attributes);
204	</pre>
205	*/
206	setNodeAttributesInList:function (inNodeList, inAttributes) {
207		if (!inNodeList) return;
208		var i, ilen = inNodeList.length;
209		for (i=0; i<ilen; ++i) {
210			var elem = inNodeList[i];
211			twiki.HTML.setElementAttributes(elem, inAttributes);
212		}
213	},
214	
215	/**
216	Sets attributes to an HTMLElement.
217	@param el : (HTMLElement) element to set attributes to
218	@param inAttributes : (Object) value object with attributes
219	*/
220	setElementAttributes:function (el, inAttributes) {
221		for (var attr in inAttributes) {
222			if (attr == "style") {
223				var styleObject = inAttributes[attr];
224				for (var style in styleObject) {
225					el.style[style] = styleObject[style];
226				}
227			} else {
228				//el.setAttribute(attr, inAttributes[attr]);
229				el[attr] = inAttributes[attr];
230			}
231		}
232	}
233	
234};