https://www.czecot.de/scripts/jak/dom.js?1

1/*
2Licencováno pod MIT Licencí
3
4© 2008 Seznam.cz, a.s.
5
6Tímto se uděluje bezúplatná nevýhradní licence k oprávnění užívat Software,
7časově i místně neomezená, v souladu s příslušnými ustanoveními autorského zákona.
8
9Nabyvatel/uživatel, který obdržel kopii tohoto softwaru a další přidružené 
10soubory (dále jen „software“) je oprávněn k nakládání se softwarem bez 
11jakýchkoli omezení, včetně bez omezení práva software užívat, pořizovat si 
12z něj kopie, měnit, sloučit, šířit, poskytovat zcela nebo zčásti třetí osobě 
13(podlicence) či prodávat jeho kopie, za následujících podmínek:
14
15- výše uvedené licenční ujednání musí být uvedeno na všech kopiích nebo 
16podstatných součástech Softwaru.
17
18- software je poskytován tak jak stojí a leží, tzn. autor neodpovídá 
19za jeho vady, jakož i možné následky, ledaže věc nemá vlastnost, o níž autor 
20prohlásí, že ji má, nebo kterou si nabyvatel/uživatel výslovně vymínil.
21
22
23
24Licenced under the MIT License
25
26Copyright (c) 2008 Seznam.cz, a.s.
27
28Permission is hereby granted, free of charge, to any person obtaining a copy
29of this software and associated documentation files (the "Software"), to deal
30in the Software without restriction, including without limitation the rights
31to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
32copies of the Software, and to permit persons to whom the Software is
33furnished to do so, subject to the following conditions:
34
35The above copyright notice and this permission notice shall be included in
36all copies or substantial portions of the Software.
37
38THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
39IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
40FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
41AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
42LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
43OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
44THE SOFTWARE.
45*/
46
47/**
48 * @overview Statická třída posytující některé praktické metody na úpravy a práci s DOM stromem, např. vytváření a získávání elementů.
49 * @version 3.0
50 * @author zara, koko, jelc
51 */
52
53/**
54 * @static
55 * @name SZN.Dom
56 * @class Statický konstruktor, nemá smysl vytvářet jeho instance.
57 */
58SZN.Dom = SZN.ClassMaker.makeClass({
59	NAME: "Dom",
60	VERSION: "3.1",
61	CLASS: "static"
62});
63
64/**
65 * Vytvoří DOM node, je možné rovnou zadat id, CSS třídu a styly
66 * @param {String} tagName jméno tagu (lowercase)
67 * @param {String} id id uzlu
68 * @param {String} className název CSS trid(y)
69 * @param {Object} styleObj asociativní pole CSS vlastností a jejich hodnot
70 * @param {Object}

70 doc dokument, v jehož kontextu se node vyrobí (default: document)
71 */
72SZN.cEl = function(tagName,id,className,styleObj,doc) {
73	var d = doc || document;
74	var node = d.createElement(tagName);
75	if (arguments.length == 1) { return node; }
76	if (id) { node.id = id; }
77	if (className) { node.className = className; }
78	if (styleObj) for (p in styleObj) {
79		node.style[p] = styleObj[p];
80	}
81	return node;
82}
83	
84/**
85 * Alias pro document.createTextNode
86 * @param {String} str řetězec s textem
87 * @param {Object} doc dokument, v jehož kontextu se node vyrobí (default: document)
88 */
89SZN.cTxt = function(str, doc) {
90	var d = doc || document;
91	return d.createTextNode(str);
92}
93	
94/**
95 * zjednodušený přístup k metodě DOM document.getElementById
96 * @static
97 * @method 
98 * @param {string} ids id HTML elementu, který chceme získat,
99 * NEBO přímo element
100 * @returns {object} HTML element s id = ids, pokud existuje, NEBO element specifikovaný jako parametr
101 */
102 SZN.gEl = function(ids){
103	if (typeof(ids) == "string") {
104		return document.getElementById(ids);
105	} else { return ids; }
106}
107
108/**
109 * Propoji zadané DOM uzly
110 * @param {Array} pole1...poleN libovolný počet polí; pro každé pole se vezme jeho první prvek a ostatní 
111 *   se mu navěsí jako potomci
112 */
113SZN.Dom.append = function() { /* takes variable amount of arrays */
114	for (var i=0;i<arguments.length;i++) {
115		var arr = arguments[i];
116		var head = arr[0];
117		for (var j=1;j<arr.length;j++) {
118			head.appendChild(arr[j]);
119		}
120	}
121}
122	
123/**
124 * Otestuje, má-li zadany DOM uzel danou CSS třídu
125 * @param {Object} element DOM uzel
126 * @param {String} className CSS třída
127 * @return {boolean} true|false
128 */
129SZN.Dom.hasClass = function(element,className) {
130	var arr = element.className.split(" ");
131	for (var i=0;i<arr.length;i++) { 
132		if (arr[i] == className) { return true; } 
133	}
134	return false;
135}
136
137/**
138 * Přidá DOM uzlu CSS třídu. Pokud ji již má, pak neudělá nic.
139 * @param {Object} element DOM uzel
140 * @param {String} className CSS třída
141 */
142SZN.Dom.addClass = function(element,className) {
143	if (SZN.Dom.hasClass(element,className)) { return; }
144	element.className += " "+className;
145}
146
147/**
148 * Odebere DOM uzlu CSS třídu. Pokud ji nemá, neudělá nic.
149 * @param {Object} element DOM uzel
150 * @param {String} className CSS třída
151 */
152SZN.Dom.removeClass = function(element,className) {
153	var names = element.className.split(" ");
154	var newClassArr = [];
155	for (var i=0;i<names.length;i++) {
156		if (names[i] != className) { newClassArr.push(names[i]); }
157	}
158	element.className = newClassArr.join(" ");
159}
160
161/**
162 * Vymaže (removeChild) všechny potomky daného DOM uzlu
163 * @param {Object} element DOM uzel
164 */
165SZN.Dom.clear = function(element) {
166	while (element.firstChild) { element.removeChild(element.firstChild); }
167}
168
169/**
170 * vrací velikost dokumentu, pro správnou funkcionalitu je třeba aby 
171 * browser rendroval HTML ve standardním módu 
172 * @method  
173 * @returns {object} s vlastnostmi:
174 * <ul><li><em>width</em> - šířka dokumentu</li><li><em>height</em> - výška dokumentu</li></ul> 
175 */    
176SZN.Dom.getDocSize = function(){
177	var x = 0;
178	var y = 0;		
179	
180	if(document.documentElement.clientWidth && SZN.Browser.klient != 'opera'){
181		x = document.documentElement.clientWidth;
182		y = document.documentElement.clientHeight;
183	} else if(SZN.Browser.klient == 'opera') {
184		if(parseFloat(SZN.Browser.version) < 9.5){
185			x = document.body.clientWidth;
186			y = document.body.clientHeight;
187		} else {
188			x = document.documentElement.clientWidth;
189			y = document.documentElement.clientHeight;
190		}
191	} 
192	
193	if ((SZN.Browser.klient == 'safari') || (SZN.Browser.klient == 'konqueror')){
194		y = window.innerHeight; 
195	}
196	
197	return {width:x,height:y};
198};
199
200/**
201 * vrací polohu "obj" ve stránce nebo uvnitř objektu který předám jako druhý 
202 * argument
203 * @method 
204 * @param {object} obj HTML elmenet, jehož pozici chci zjistit
205 * @param {object} [ref] <strong>volitelný</strong> HTML element, vůči kterému chci zjistit pozici <em>obj</em>, element musí být jeho rodič
206 * @returns {object} s vlastnostmi :
207 * <ul><li><em>left</em>(px) - horizontální pozice prvku</li><li><em>top</em>(px) - vertikální pozice prvku</li></ul> 
208 */
209SZN.Dom.getBoxPosition = function(obj, ref){
210	var top = 0;
211	var left = 0;
212	var refBox = ref || document.body;
213	while (obj && obj != refBox) {
214		top += obj.offsetTop;
215		left += obj.offsetLeft;
216		obj = obj.offsetParent;
217	}
218	return {top:top,left:left};
219}
220
221/*
222	Par noticek k výpočtům odscrollovaní:
223	- rodič body je html (documentElement), rodič html je document
224	- v strict mode má scroll okna nastavené html
225	- v quirks mode má scroll okna nastavené body
226	- opera dává vždy do obou dvou
227	- safari dává vždy jen do body
228*/
229
230/**
231 * vrací polohu "obj" v okně nebo uvnitř objektu který předáme jako druhý 
232 * argument, zahrnuje i potencialni odskrolovani kdekoliv nad objektem 
233 *	Par noticek k výpočtům odscrollovaní:<ul>
234 *	<li>rodič body je html (documentElement), rodič html je document</li>
235 *	<li>v strict mode má scroll okna nastavené html</li>
236 *	<li>v quirks mode má scroll okna nastavené body</li>
237 *	<li>opera dává vždy do obou dvou</li>
238 *	<li>safari dává vždy jen do body </li></ul>
239 * @method 
240 * @param {object} obj HTML elmenet, jehož pozici chci zjistit
241 * @param {object} parent <strong>volitelný</strong> HTML element, vůči kterému chci zjistit pozici <em>obj</em>, element musí být jeho rodič
242 * @returns {object} s vlastnostmi :
243 * <ul><li><em>left</em>(px) - horizontalní pozice prvku</li><li><em>top</em>(px) - vertikální pozice prvku</li></ul> 
244 */
245 SZN.Dom.getFullBoxPosition = function(obj, parent) {
246	var pos = SZN.Dom.getBoxPosition(obj, parent);
247	var scroll = SZN.Dom.getBoxScroll(obj, parent);
248	return {left:pos.left-scroll.x,top:pos.top-scroll.y};
249}
250
251/**
252 * vrací dvojici čísel, o kolik je "obj" odscrollovaný vůči oknu nebo vůči zadanému rodičovskému objektu
253 * @method 
254 * @param {object} obj HTML elmenet, jehož odskrolovaní chci zjistit
255 * @param {object} ref <strong>volitelný</strong> HTML element, vůči kterému chci zjistit odskrolování <em>obj</em>, element musí být jeho rodič
256 * @returns {object} s vlastnostmi :
257 * <ul><li><em>left</em>(px) - horizontální scroll prvku</li><li><em>top</em>(px) - vertikální scroll prvku</li></ul> 
258 */
259SZN.Dom.getBoxScroll = function(obj, ref){
260	var x = 0;
261	var y = 0;
262	var cur = obj.parentNode;
263	var limit = ref || document.documentElement;
264	while (1) {
265		/* opera debil obcas nastavi scrollTop = offsetTop, aniz by bylo odscrollovano */
266		if (SZN.Browser.client == "opera" && SZN.Dom.getStyle(cur,"display") != "block") { 
267			cur = cur.parentNode;
268			continue; 
269		}
270		
271		/* a taky opera pocita scrollTop jak pro <body>, tak pro <html> */
272		if (SZN.Browser.client == "opera" && cur == document.documentElement) { break; }
273
274		x += cur.scrollLeft;
275		y += cur.scrollTop;
276		if (cur == limit) { break; }
277		cur = cur.parentNode;
278		if (!cur) { break; }
279	}
280	return {x:x,y:y};
281}
282
283/**
284 * vrací aktuální odskrolování stránky
285 * @method  
286 * @returns {object} s vlastnostmi:
287 * <ul><li><em>x</em>(px) - horizontální odskrolování</li><li><em>y</em>(px) - vertikální odskrolování</li></ul> 
288 *
289 */
290SZN.Dom.getScrollPos = function(){
291	if (document.documentElement.scrollTop || document.documentElement.scrollLeft) {
292		var ox = document.documentElement.scrollLeft;
293		var oy = document.documentElement.scrollTop;
294	} else if (document.body.scrollTop || document.body.scrollLeft) { 
295		var ox = document.body.scrollLeft;
296		var oy = document.body.scrollTop;
297	} else {
298		var ox = 0;
299		var oy = 0;
300	}
301	return {x:ox,y:oy};
302}
303
304/**
305 * vraci současnou hodnotu nějaké css vlastnosti
306 * @method 
307 * @param {object} elm HTML elmenet, jehož vlasnost nás zajímá
308 * @param {string} property řetězec s názvem vlastnosti ("border","backgroundColor",...)
309 */
310SZN.Dom.getStyle = function(elm, property) {
311	if (document.defaultView && document.defaultView.getComputedStyle) {
312		var cs = elm.ownerDocument.defaultView.getComputedStyle(elm,'');
313		if (!cs) { return false; }
314		return cs[property];
315	} else {
316		return elm.currentStyle[property];
317	}
318}
319
320/*
321 * nastavuje objektu konkretny styly, ktere jsou zadany v objektu pojmenovanych vlastnosti (nazev_CSS : hodnota)
322 * @method 
323 * @param {object} elm HTML element, jehož vlastnosti měním
324 * @param {object} style objekt nastavovaných vlastností, např.: {color: 'red', backgroundColor: 'white'}
325 */
326SZN.Dom.setStyle = function(elm, style) {
327	for (name in style) {
328		elm.style[name] = style[name];
329	}
330}
331
332/**
333 * skrývá elementy které se mohou objevit v nejvyšší vrstvě a překrýt obsah,
334 * resp. nelze je překrýt dalším obsahem (typicky &lt;SELECT&gt; v internet exploreru)
335 * @method  
336 * @param {object | string} HTML element nebo jeho ID pod kterým chceme skrývat problematické prvky
337 * @param {array} elements pole obsahující názvy problematických elementů
338 * @param {string} action akce kterou chceme provést 'hide' pro skrytí 'show' nebo cokoli jiného než hide pro zobrazení
339 * @examples 
340 *  <pre>
341 * SZN.Dom.elementsHider(SZN.gEl('test'),['select'],'hide')
342 * SZN.Dom.elementsHider(SZN.gEl('test'),['select'],'show')
343 *</pre>   									
344 *
345 */     
346SZN.Dom.elementsHider = function (obj, elements, action) {
347	var elems = elements;
348	if (!elems) { elems = ["select","object","embed","iframe"]; }
349	
350	function testParent(node) {
351		var ok = false;

352		var cur = node;
353		while (cur.parentNode && cur != document) {
354			if (cur == obj) { ok = true; }
355			cur = cur.parentNode;
356		}
357		return ok;
358	}
359	if (action == 'hide') {
360		if(typeof obj == 'string'){
361			var obj = SZN.gEl(obj);
362		} else {
363			var obj = obj;
364		}
365		
366		var box = this.getBoxPosition(obj);
367		
368		box.width =  obj.offsetWidth + box.left;
369		box.height = obj.offsetHeight +box.top;	
370		for (var e = 0; e < elems.length; ++e) {
371			var elm = document.getElementsByTagName(elems[e]);
372			
373			for (var f = 0; f < elm.length; ++f) {
374				var node = this.getBoxPosition(elm[f]);
375				if (testParent(elm[f])) { continue; }
376				node.width = elm[f].offsetWidth + node.left;
377				node.height = elm[f].offsetHeight + node.top;
378				
379				if (!((box.left> node.width) || (box.width < node.left) 
380				|| (box.top > node.height) || (box.height < node.top))) {
381					elm[f].style.visibility = 'hidden';
382					elm[f].myPropertyHide = true;
383				} else {
384					elm[f].style.visibility = 'visible';
385					elm[f].myPropertyHide = false;
386				}
387			}
388		}
389	} else {
390		for (var e = 0; e < elems.length; ++e) {
391			var elm = document.getElementsByTagName(elems[e]);
392			
393			for (var f = 0; f < elm.length; ++f) {
394				if (testParent(elm[f])) { continue; }
395				if (elm[f].myPropertyHide) {
396					elm[f].style.visibility = 'visible';
397					elm[f].myPropertyHide = false;

398				}
399			}
400		}
401	}
402}
403
404/**
405 * vrati kolekci elementů které mají nadefinovanou třídu <em>searchClass</em>
406 * @method 
407 * @param {string} searchClass vyhledávaná třída
408 * @param {object} node element dokumentu, ve kterém se má hledat, je-li null prohledává
409 * se celý dokument 
410 * @param {string} tag název tagu na který se má hledání omezit, je-li null prohledávají se všechny elementy
411 * @returns {array} pole které obsahuje všechny nalezené elementy, které mají definovanou třídu <em>searchClass</em>
412 */      
413SZN.Dom.getElementsByClass = function (searchClass,node,tag) {
414	var classElements = [];
415	var node = node || document;
416	var tag = tag || "*";
417
418	var els = node.getElementsByTagName(tag);
419	var elsLen = els.length;
420	
421	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
422	for (var i = 0, j = 0; i < elsLen; i++) {
423		if (pattern.test(els[i].className)) {
424			classElements[j] = els[i];
425			j++;
426		}
427	}
428	return classElements;
429}