~azzar1/unity/add-show-desktop-key : contents of www/media/common/edit_area/elements

~azzar1/unity/add-show-desktop-key : (revision 512)

/****
 * This page contains some general usefull functions for javascript
 *
 ****/  
	
	
	// need to redefine this functiondue to IE problem
	function getAttribute( elm, aname ) {
		try{
			var avalue = elm.getAttribute( aname );
		}catch(exept){
		
		}
		if ( ! avalue ) {
			for ( var i = 0; i < elm.attributes.length; i ++ ) {
				var taName = elm.attributes [i] .name.toLowerCase();
				if ( taName == aname ) {
					avalue = elm.attributes [i] .value;
					return avalue;
				}
			}
		}
		return avalue;
	};
	
	// need to redefine this function due to IE problem
	function setAttribute( elm, attr, val ) {
		if(attr=="class"){
			elm.setAttribute("className", val);
			elm.setAttribute("class", val);
		}else{
			elm.setAttribute(attr, val);
		}
	};
	
	/* return a child element
		elem: element we are searching in
		elem_type: type of the eleemnt we are searching (DIV, A, etc...)
		elem_attribute: attribute of the searched element that must match
		elem_attribute_match: value that elem_attribute must match
		option: "all" if must return an array of all children, otherwise return the first match element
		depth: depth of search (-1 or no set => unlimited)
	*/
	function getChildren(elem, elem_type, elem_attribute, elem_attribute_match, option, depth)
	{           
		if(!option)
			var option="single";
		if(!depth)
			var depth=-1;
		if(elem){
			var children= elem.childNodes;
			var result=null;
			var results= new Array();
			for (var x=0;x<children.length;x++) {
				strTagName = new String(children[x].tagName);
				children_class="?";
				if(strTagName!= "undefined"){
					child_attribute= getAttribute(children[x],elem_attribute);
					if((strTagName.toLowerCase()==elem_type.toLowerCase() || elem_type=="") && (elem_attribute=="" || child_attribute==elem_attribute_match)){
						if(option=="all"){
							results.push(children[x]);
						}else{
							return children[x];
						}
					}
					if(depth!=0){
						result=getChildren(children[x], elem_type, elem_attribute, elem_attribute_match, option, depth-1);
						if(option=="all"){
							if(result.length>0){
								results= results.concat(result);
							}
						}else if(result!=null){                                                                          
							return result;
						}
					}
				}
			}
			if(option=="all")
			   return results;
		}
		return null;
	};       
	
	function isChildOf(elem, parent){
		if(elem){
			if(elem==parent)
				return true;
			while(elem.parentNode != 'undefined'){
				return isChildOf(elem.parentNode, parent);
			}
		}
		return false;
	};
	
	function getMouseX(e){
		/*if(document.all)
			return event.x + document.body.scrollLeft;
		else
			return e.pageX;*/
		if(e!=null && typeof(e.pageX)!="undefined"){
			return e.pageX;
		}else{
			return (e!=null?e.x:event.x)+ document.documentElement.scrollLeft;
		}
		//return (e!=null) ? e.pageX : event.x + document.documentElement.scrollLeft;
	};
	
	function getMouseY(e){
		/*if(document.all)
			return event.y + document.body.scrollTop;
		else
			return e.pageY;*/
		if(e!=null && typeof(e.pageY)!="undefined"){
			return e.pageY;
		}else{
			return (e!=null?e.y:event.y)+ document.documentElement.scrollTop;
		}
		//return (e!=null) ? e.pageY : event.y + document.documentElement.scrollTop;
	};
	
	function calculeOffsetLeft(r){
	  return calculeOffset(r,"offsetLeft")
	};
	
	function calculeOffsetTop(r){
	  return calculeOffset(r,"offsetTop")
	};
	
	function calculeOffset(element,attr){
	  var offset=0;
	  while(element){
		offset+=element[attr];
		element=element.offsetParent
	  }
	  return offset;
	};
	
	/** return the computed style
	 *	@param: elem: the reference to the element
	 *	@param: prop: the name of the css property	 
	 */
	function get_css_property(elem, prop)
	{
		if(document.defaultView)
		{
			return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop);
		}
		else if(elem.currentStyle)
		{
			var prop = prop.replace(/-\D/gi, function(sMatch)
			{
				return sMatch.charAt(sMatch.length - 1).toUpperCase();
			});
			return elem.currentStyle[prop];
		}
		else return null;
	}
	
/****
 * Moving an element 
 ***/  
	
	var move_current_element;
	/* allow to move an element in a window
		e: the event
		id: the id of the element
		frame: the frame of the element 
		ex of use:
			in html:	<img id='move_area_search_replace' onmousedown='return parent.start_move_element(event,"area_search_replace", parent.frames["this_frame_id"]);' .../>  
		or
			in javascript: document.getElementById("my_div").onmousedown= start_move_element
	*/
	function start_move_element(e, id, frame){
		var elem_id=(e.target || e.srcElement).id;
		if(id)
			elem_id=id;		
		if(!frame)
			frame=window;
		if(frame.event)
			e=frame.event;
			
		move_current_element= frame.document.getElementById(elem_id);
		move_current_element.frame=frame;
		frame.document.onmousemove= move_element;
		frame.document.onmouseup= end_move_element;
		/*move_current_element.onmousemove= move_element;
		move_current_element.onmouseup= end_move_element;*/
		
		//alert(move_current_element.frame.document.body.offsetHeight);
		
		mouse_x= getMouseX(e);
		mouse_y= getMouseY(e);
		//window.status=frame+ " elem: "+elem_id+" elem: "+ move_current_element + " mouse_x: "+mouse_x;
		move_current_element.start_pos_x = mouse_x - (move_current_element.style.left.replace("px","") || calculeOffsetLeft(move_current_element));
		move_current_element.start_pos_y = mouse_y - (move_current_element.style.top.replace("px","") || calculeOffsetTop(move_current_element));
		return false;
	};
	
	function end_move_element(e){
		move_current_element.frame.document.onmousemove= "";
		move_current_element.frame.document.onmouseup= "";		
		move_current_element=null;
	};
	
	function move_element(e){
		/*window.status="move"+frame;
		window.status="move2"+frame.event;*/
		if(move_current_element.frame && move_current_element.frame.event)
			e=move_current_element.frame.event;
		var mouse_x=getMouseX(e);
		var mouse_y=getMouseY(e);
		var new_top= mouse_y - move_current_element.start_pos_y;
		var new_left= mouse_x - move_current_element.start_pos_x;
		
		var max_left= move_current_element.frame.document.body.offsetWidth- move_current_element.offsetWidth;
		max_top= move_current_element.frame.document.body.offsetHeight- move_current_element.offsetHeight;
		new_top= Math.min(Math.max(0, new_top), max_top);
		new_left= Math.min(Math.max(0, new_left), max_left);
		
		move_current_element.style.top= new_top+"px";
		move_current_element.style.left= new_left+"px";		
		return false;
	};
	
/***
 * Managing a textarea (this part need the navigator infos from editAreaLoader
 ***/ 
	
	var nav= editAreaLoader.nav;
	
	// allow to get infos on the selection: array(start, end)
	function getSelectionRange(textarea){
		//if(nav['isIE'])
		//	get_IE_selection(textarea);
		return {"start": textarea.selectionStart, "end": textarea.selectionEnd};
	};
	
	// allow to set the selection
	function setSelectionRange(textarea, start, end){
		textarea.focus();
		
		start= Math.max(0, Math.min(textarea.value.length, start));
		end= Math.max(start, Math.min(textarea.value.length, end));
	
		if(nav['isOpera']){	// Opera bug when moving selection start and selection end
			textarea.selectionEnd = 1;	
			textarea.selectionStart = 0;			
			textarea.selectionEnd = 1;	
			textarea.selectionStart = 0;		
		}
		textarea.selectionStart = start;
		textarea.selectionEnd = end;		
		//textarea.setSelectionRange(start, end);
		
		if(nav['isIE'])
			set_IE_selection(textarea);
	};

	
	// set IE position in Firefox mode (textarea.selectionStart and textarea.selectionEnd). should work as a repeated task
	function get_IE_selection(textarea){
			
		if(textarea && textarea.focused)
		{	
			if(!textarea.ea_line_height)
			{	// calculate the lineHeight
				var div= document.createElement("div");
				div.style.fontFamily= get_css_property(textarea, "font-family");
				div.style.fontSize= get_css_property(textarea, "font-size");
				div.style.visibility= "hidden";			
				div.innerHTML="0";
				document.body.appendChild(div);
				textarea.ea_line_height= div.offsetHeight;
				document.body.removeChild(div);
			}
			//textarea.focus();
			var range = document.selection.createRange();	
			var stored_range = range.duplicate();
			stored_range.moveToElementText( textarea );
			stored_range.setEndPoint( 'EndToEnd', range );
			if(stored_range.parentElement()==textarea){
				// the range don't take care of empty lines in the end of the selection
				var elem= textarea;
				var scrollTop= 0;
				while(elem.parentNode){
					scrollTop+= elem.scrollTop;
					elem= elem.parentNode;
				}
			
			//	var scrollTop= textarea.scrollTop + document.body.scrollTop;
				
			//	var relative_top= range.offsetTop - calculeOffsetTop(textarea) + scrollTop;
				var relative_top= range.offsetTop - calculeOffsetTop(textarea)+ scrollTop;
			//	alert("rangeoffset: "+ range.offsetTop +"\ncalcoffsetTop: "+ calculeOffsetTop(textarea) +"\nrelativeTop: "+ relative_top);
				var line_start = Math.round((relative_top / textarea.ea_line_height) +1);
				
				var line_nb= Math.round(range.boundingHeight / textarea.ea_line_height);
				
		//		alert("store_range: "+ stored_range.text.length+"\nrange: "+range.text.length+"\nrange_text: "+ range.text);
				var range_start= stored_range.text.length - range.text.length;
				var tab= textarea.value.substr(0, range_start).split("\n");			
				range_start+= (line_start - tab.length)*2;		// add missing empty lines to the selection
				textarea.selectionStart = range_start;
				
				var range_end= textarea.selectionStart + range.text.length;
				tab= textarea.value.substr(0, range_start + range.text.length).split("\n");			
				range_end+= (line_start + line_nb - 1 - tab.length)*2;
				textarea.selectionEnd = range_end;
			}
		}
		setTimeout("get_IE_selection(document.getElementById('"+ textarea.id +"'));", 50);
	};
	
	function IE_textarea_focus(){
		event.srcElement.focused= true;
	}
	
	function IE_textarea_blur(){
		event.srcElement.focused= false;
	}
	
	// select the text for IE (take into account the \r difference)
	function set_IE_selection(textarea){
		var nbLineStart=textarea.value.substr(0, textarea.selectionStart).split("\n").length - 1;
		var nbLineEnd=textarea.value.substr(0, textarea.selectionEnd).split("\n").length - 1;
		var range = document.selection.createRange();
		range.moveToElementText( textarea );
		range.setEndPoint( 'EndToStart', range );
		range.moveStart('character', textarea.selectionStart - nbLineStart);
		range.moveEnd('character', textarea.selectionEnd - nbLineEnd - (textarea.selectionStart - nbLineStart)  );
		range.select();
	};
	
	
	editAreaLoader.waiting_loading["elements_functions.js"]= "loaded";

233 by mattgiuca Added a shaky implementation of EditArea as the text editor.	1	/****
	2	* This page contains some general usefull functions for javascript
	3	*
	4	****/
	5
	6
	7	// need to redefine this functiondue to IE problem
	8	function getAttribute( elm, aname ) {
	9	try{
	10	var avalue = elm.getAttribute( aname );
	11	}catch(exept){
	12
	13	}
	14	if ( ! avalue ) {
	15	for ( var i = 0; i < elm.attributes.length; i ++ ) {
	16	var taName = elm.attributes [i] .name.toLowerCase();
	17	if ( taName == aname ) {
	18	avalue = elm.attributes [i] .value;
	19	return avalue;
	20	}
	21	}
	22	}
	23	return avalue;
	24	};
	25
	26	// need to redefine this function due to IE problem
	27	function setAttribute( elm, attr, val ) {
	28	if(attr=="class"){
	29	elm.setAttribute("className", val);
	30	elm.setAttribute("class", val);
	31	}else{
	32	elm.setAttribute(attr, val);
	33	}
	34	};
	35
	36	/* return a child element
	37	elem: element we are searching in
	38	elem_type: type of the eleemnt we are searching (DIV, A, etc...)
	39	elem_attribute: attribute of the searched element that must match
	40	elem_attribute_match: value that elem_attribute must match
	41	option: "all" if must return an array of all children, otherwise return the first match element
	42	depth: depth of search (-1 or no set => unlimited)
	43	*/
	44	function getChildren(elem, elem_type, elem_attribute, elem_attribute_match, option, depth)
	45	{
	46	if(!option)
	47	var option="single";
	48	if(!depth)
	49	var depth=-1;
	50	if(elem){
	51	var children= elem.childNodes;
	52	var result=null;
	53	var results= new Array();
	54	for (var x=0;x<children.length;x++) {
	55	strTagName = new String(children[x].tagName);
	56	children_class="?";
	57	if(strTagName!= "undefined"){
	58	child_attribute= getAttribute(children[x],elem_attribute);
	59	if((strTagName.toLowerCase()==elem_type.toLowerCase() \|\| elem_type=="") && (elem_attribute=="" \|\| child_attribute==elem_attribute_match)){
	60	if(option=="all"){
	61	results.push(children[x]);
	62	}else{
	63	return children[x];
	64	}
65	}
66	if(depth!=0){
67	result=getChildren(children[x], elem_type, elem_attribute, elem_attribute_match, option, depth-1);
68	if(option=="all"){
69	if(result.length>0){
70	results= results.concat(result);
71	}
72	}else if(result!=null){
73	return result;
74	}
75	}
76	}
77	}
78	if(option=="all")
79	return results;
80	}
81	return null;
82	};
83
84	function isChildOf(elem, parent){
85	if(elem){
86	if(elem==parent)
87	return true;
88	while(elem.parentNode != 'undefined'){
89	return isChildOf(elem.parentNode, parent);
90	}
91	}
92	return false;
93	};
94
95	function getMouseX(e){
96	/*if(document.all)
97	return event.x + document.body.scrollLeft;
98	else
99	return e.pageX;*/
100	if(e!=null && typeof(e.pageX)!="undefined"){
101	return e.pageX;
102	}else{
103	return (e!=null?e.x:event.x)+ document.documentElement.scrollLeft;
104	}
105	//return (e!=null) ? e.pageX : event.x + document.documentElement.scrollLeft;
106	};
107
108	function getMouseY(e){
109	/*if(document.all)
110	return event.y + document.body.scrollTop;
111	else
112	return e.pageY;*/
113	if(e!=null && typeof(e.pageY)!="undefined"){
114	return e.pageY;
115	}else{
116	return (e!=null?e.y:event.y)+ document.documentElement.scrollTop;
117	}
118	//return (e!=null) ? e.pageY : event.y + document.documentElement.scrollTop;
119	};
120
121	function calculeOffsetLeft(r){
122	return calculeOffset(r,"offsetLeft")
123	};
124
125	function calculeOffsetTop(r){
126	return calculeOffset(r,"offsetTop")
127	};
128
129	function calculeOffset(element,attr){
130	var offset=0;
131	while(element){
132	offset+=element[attr];
133	element=element.offsetParent
134	}
135	return offset;
136	};
137
138	/** return the computed style
139	* @param: elem: the reference to the element
140	* @param: prop: the name of the css property
141	*/
142	function get_css_property(elem, prop)
143	{
144	if(document.defaultView)
145	{
146	return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop);
147	}
148	else if(elem.currentStyle)
149	{
150	var prop = prop.replace(/-\D/gi, function(sMatch)
151	{
152	return sMatch.charAt(sMatch.length - 1).toUpperCase();
153	});
154	return elem.currentStyle[prop];
155	}
156	else return null;
157	}
158
159	/****
160	* Moving an element
161	***/
162
163	var move_current_element;
164	/* allow to move an element in a window
165	e: the event
166	id: the id of the element
167	frame: the frame of the element
168	ex of use:
169	in html: <img id='move_area_search_replace' onmousedown='return parent.start_move_element(event,"area_search_replace", parent.frames["this_frame_id"]);' .../>
170	or
171	in javascript: document.getElementById("my_div").onmousedown= start_move_element
172	*/
173	function start_move_element(e, id, frame){
174	var elem_id=(e.target \|\| e.srcElement).id;
175	if(id)
176	elem_id=id;
177	if(!frame)
178	frame=window;
179	if(frame.event)
180	e=frame.event;
181
182	move_current_element= frame.document.getElementById(elem_id);
183	move_current_element.frame=frame;
184	frame.document.onmousemove= move_element;
185	frame.document.onmouseup= end_move_element;
186	/*move_current_element.onmousemove= move_element;
187	move_current_element.onmouseup= end_move_element;*/
188
189	//alert(move_current_element.frame.document.body.offsetHeight);
190
191	mouse_x= getMouseX(e);
192	mouse_y= getMouseY(e);
193	//window.status=frame+ " elem: "+elem_id+" elem: "+ move_current_element + " mouse_x: "+mouse_x;
194	move_current_element.start_pos_x = mouse_x - (move_current_element.style.left.replace("px","") \|\| calculeOffsetLeft(move_current_element));
195	move_current_element.start_pos_y = mouse_y - (move_current_element.style.top.replace("px","") \|\| calculeOffsetTop(move_current_element));
196	return false;
197	};
198
199	function end_move_element(e){
200	move_current_element.frame.document.onmousemove= "";
201	move_current_element.frame.document.onmouseup= "";
202	move_current_element=null;
203	};
204
205	function move_element(e){
206	/*window.status="move"+frame;
207	window.status="move2"+frame.event;*/
208	if(move_current_element.frame && move_current_element.frame.event)
209	e=move_current_element.frame.event;
210	var mouse_x=getMouseX(e);
211	var mouse_y=getMouseY(e);
212	var new_top= mouse_y - move_current_element.start_pos_y;
213	var new_left= mouse_x - move_current_element.start_pos_x;
214
215	var max_left= move_current_element.frame.document.body.offsetWidth- move_current_element.offsetWidth;
216	max_top= move_current_element.frame.document.body.offsetHeight- move_current_element.offsetHeight;
217	new_top= Math.min(Math.max(0, new_top), max_top);
218	new_left= Math.min(Math.max(0, new_left), max_left);
219
220	move_current_element.style.top= new_top+"px";
221	move_current_element.style.left= new_left+"px";
222	return false;
223	};
224
225	/***
226	* Managing a textarea (this part need the navigator infos from editAreaLoader
227	***/
228
229	var nav= editAreaLoader.nav;
230
231	// allow to get infos on the selection: array(start, end)
232	function getSelectionRange(textarea){
233	//if(nav['isIE'])
234	// get_IE_selection(textarea);
235	return {"start": textarea.selectionStart, "end": textarea.selectionEnd};
236	};
237
238	// allow to set the selection
239	function setSelectionRange(textarea, start, end){
240	textarea.focus();
241
242	start= Math.max(0, Math.min(textarea.value.length, start));
243	end= Math.max(start, Math.min(textarea.value.length, end));
244
245	if(nav['isOpera']){ // Opera bug when moving selection start and selection end
246	textarea.selectionEnd = 1;
247	textarea.selectionStart = 0;
248	textarea.selectionEnd = 1;
249	textarea.selectionStart = 0;
250	}
251	textarea.selectionStart = start;
252	textarea.selectionEnd = end;
253	//textarea.setSelectionRange(start, end);
254
255	if(nav['isIE'])
256	set_IE_selection(textarea);
257	};
258
259
260	// set IE position in Firefox mode (textarea.selectionStart and textarea.selectionEnd). should work as a repeated task
261	function get_IE_selection(textarea){
262
263	if(textarea && textarea.focused)
264	{
265	if(!textarea.ea_line_height)
266	{ // calculate the lineHeight
267	var div= document.createElement("div");
268	div.style.fontFamily= get_css_property(textarea, "font-family");
269	div.style.fontSize= get_css_property(textarea, "font-size");
270	div.style.visibility= "hidden";
271	div.innerHTML="0";
272	document.body.appendChild(div);
273	textarea.ea_line_height= div.offsetHeight;
274	document.body.removeChild(div);
275	}
276	//textarea.focus();
277	var range = document.selection.createRange();
278	var stored_range = range.duplicate();
279	stored_range.moveToElementText( textarea );
280	stored_range.setEndPoint( 'EndToEnd', range );
281	if(stored_range.parentElement()==textarea){
282	// the range don't take care of empty lines in the end of the selection
283	var elem= textarea;
284	var scrollTop= 0;
285	while(elem.parentNode){
286	scrollTop+= elem.scrollTop;
287	elem= elem.parentNode;
288	}
289
290	// var scrollTop= textarea.scrollTop + document.body.scrollTop;
291
292	// var relative_top= range.offsetTop - calculeOffsetTop(textarea) + scrollTop;
293	var relative_top= range.offsetTop - calculeOffsetTop(textarea)+ scrollTop;
294	// alert("rangeoffset: "+ range.offsetTop +"\ncalcoffsetTop: "+ calculeOffsetTop(textarea) +"\nrelativeTop: "+ relative_top);
295	var line_start = Math.round((relative_top / textarea.ea_line_height) +1);
296
297	var line_nb= Math.round(range.boundingHeight / textarea.ea_line_height);
298
299	// alert("store_range: "+ stored_range.text.length+"\nrange: "+range.text.length+"\nrange_text: "+ range.text);
300	var range_start= stored_range.text.length - range.text.length;
301	var tab= textarea.value.substr(0, range_start).split("\n");
302	range_start+= (line_start - tab.length)*2; // add missing empty lines to the selection
303	textarea.selectionStart = range_start;
304
305	var range_end= textarea.selectionStart + range.text.length;
306	tab= textarea.value.substr(0, range_start + range.text.length).split("\n");
307	range_end+= (line_start + line_nb - 1 - tab.length)*2;
308	textarea.selectionEnd = range_end;
309	}
310	}
311	setTimeout("get_IE_selection(document.getElementById('"+ textarea.id +"'));", 50);
312	};
313
314	function IE_textarea_focus(){
315	event.srcElement.focused= true;
316	}
317
318	function IE_textarea_blur(){
319	event.srcElement.focused= false;
320	}
321
322	// select the text for IE (take into account the \r difference)
323	function set_IE_selection(textarea){
324	var nbLineStart=textarea.value.substr(0, textarea.selectionStart).split("\n").length - 1;
325	var nbLineEnd=textarea.value.substr(0, textarea.selectionEnd).split("\n").length - 1;
326	var range = document.selection.createRange();
327	range.moveToElementText( textarea );
328	range.setEndPoint( 'EndToStart', range );
329	range.moveStart('character', textarea.selectionStart - nbLineStart);
330	range.moveEnd('character', textarea.selectionEnd - nbLineEnd - (textarea.selectionStart - nbLineStart) );
331	range.select();
332	};
333
334
335	editAreaLoader.waiting_loading["elements_functions.js"]= "loaded";