Uhlazení JavaScriptu
This commit is contained in:
		
							parent
							
								
									e205ca52d3
								
							
						
					
					
						commit
						c54e11f25a
					
				
					 4 changed files with 27 additions and 47 deletions
				
			
		|  | @ -80,6 +80,7 @@ img{background:white;} | |||
| 	padding: 3px; | ||||
| 	border: 2px solid rgb(var(--rgb)); | ||||
| 	border-radius: 10px; | ||||
| 	position: absolute; | ||||
| 
 | ||||
| 	&:hover { | ||||
| 		border-width:3px; | ||||
|  |  | |||
|  | @ -1,56 +1,40 @@ | |||
| const W_SKIP = 10; | ||||
| const H_SKIP = 5; | ||||
| const POINTER_MIN_H = 30; | ||||
| 
 | ||||
| function place_comments_one_div(img_id, comments) | ||||
| { | ||||
| 	var img = document.getElementById("img-"+img_id); | ||||
| 	if( img == null ) { | ||||
| 		return; | ||||
| 	} | ||||
| 	var par = img.parentNode; | ||||
| 	var w = img.clientWidth; | ||||
| 	var h = img.clientHeight; | ||||
| 	var w_skip = 10; | ||||
| 	var h_skip = 5; | ||||
| 	var pointer_min_h = 30; | ||||
| 	const img = document.getElementById("img-"+img_id); | ||||
| 	if( img == null ) return; | ||||
|     const comments_sorted = comments.sort((a, b) => a.y - b.y); | ||||
| 
 | ||||
| 	var bott_max = 0; | ||||
| 	var comments_sorted = comments.sort(function (a,b) { | ||||
| 		return a.y - b.y; | ||||
| 	const par = img.parentNode; | ||||
| 	const w = img.clientWidth; | ||||
| 
 | ||||
| 	}); | ||||
| 	let bott_max = 0; | ||||
| 	for (const oprava of comments_sorted) { | ||||
| 		const x = oprava.x; | ||||
| 		const y = oprava.y; | ||||
|         const el = oprava.htmlElement; | ||||
| 		const elp = oprava.pointer; | ||||
|         const htmlElement = oprava.htmlElement; | ||||
| 		const pointer = oprava.pointer; | ||||
| 
 | ||||
| 		if( el == null  || elp == null ) {  | ||||
| 			continue; | ||||
| 		} | ||||
| 		par.appendChild(pointer); | ||||
| 		par.appendChild(htmlElement); | ||||
| 
 | ||||
| 		par.appendChild(elp); | ||||
| 		par.appendChild(el); | ||||
| 		const delta_y = (y > bott_max) ?  0: bott_max - y + H_SKIP; | ||||
| 
 | ||||
| 		var delta_y = (y > bott_max) ?  0: bott_max - y + h_skip; | ||||
| 		pointer.style.left = x; | ||||
| 		pointer.style.top = y; | ||||
| 		pointer.style.width = w - x + W_SKIP; | ||||
| 		pointer.style.height = POINTER_MIN_H + delta_y; | ||||
| 
 | ||||
| 		elp.style.left = x; | ||||
| 		elp.style.top = y ; | ||||
| 		elp.style.width = w - x  + w_skip; | ||||
| 		elp.style.height = pointer_min_h + delta_y; | ||||
| 		htmlElement.style.left = w + W_SKIP; | ||||
| 		htmlElement.style.top = y + delta_y; | ||||
| 
 | ||||
|         el.pointer = elp; | ||||
| 		el.img_id = img_id; | ||||
|         el.x = x | ||||
|         el.y = y | ||||
| 		el.style.position = 'absolute'; | ||||
| 		el.style.left = w + w_skip; | ||||
| 		el.style.top = y + delta_y; | ||||
| 
 | ||||
| 		var bott =  el.offsetTop + el.offsetHeight; | ||||
| 		bott_max = ( bott_max > bott ) ?  bott_max : bott; | ||||
| 		bott_max = Math.max(bott_max, htmlElement.offsetTop + htmlElement.offsetHeight); | ||||
| 	} | ||||
| 	if( par.offsetHeight < bott_max ) { | ||||
| 		par.style.height = bott_max; | ||||
| 
 | ||||
| 	} | ||||
| 	if (par.offsetHeight < bott_max) par.style.height = bott_max; | ||||
| } | ||||
| 
 | ||||
| function place_comments() { | ||||
|  |  | |||
|  | @ -38,7 +38,7 @@ | |||
| 
 | ||||
|   //fill up comment form and show him | ||||
|   function show_form(img_id, dx, dy, id, text, action) { | ||||
|     var img = document.getElementById("img-" + img_id); | ||||
|     const img = document.getElementById("img-" + img_id); | ||||
| 
 | ||||
|     if (commform._div.style.display !== 'none' && commform._text.value !== "" && !confirm("Zavřít předchozí okénko přidávání korektury / editace komentáře?")) return 1; | ||||
| 
 | ||||
|  |  | |||
|  | @ -91,7 +91,7 @@ | |||
|       this.htmlElement.addEventListener('mouseout', _ => this.pointer.dataset.highlight = 'false'); | ||||
| 
 | ||||
|       opravy[this.id] = this; | ||||
|       comments[this.img_id].push(this); | ||||
|       if (this.img_id in comments) comments[this.img_id].push(this); else alert("Někdo korekturoval stranu, která neexistuje. Dejte vědět webařům :)"); | ||||
|     } | ||||
| 
 | ||||
|     update(oprava_data) { | ||||
|  | @ -116,9 +116,7 @@ | |||
|     #toggle_visibility(){ | ||||
|       this.zobrazit = !this.zobrazit; | ||||
|       this.htmlElement.dataset.opravazobrazit = String(this.zobrazit); | ||||
|       for (let i=0;i<comments.length-1;i++){ | ||||
|         place_comments_one_div(comments[i][0], comments[i][1]) | ||||
|       } | ||||
|       place_comments() | ||||
|     } | ||||
| 
 | ||||
|     // show comment form, when 'comment' button pressed | ||||
|  | @ -127,11 +125,8 @@ | |||
|     #zmenStavKorektury(event) { | ||||
|       const data = new FormData(CSRF_FORM); | ||||
|       data.append('id', this.id); | ||||
|       console.log(event) | ||||
|       data.append('action', event.target.value); | ||||
| 
 | ||||
|       console.log(data) | ||||
| 
 | ||||
|       fetch('{% url "korektury_api_oprava_stav" %}', {method: 'POST', body: data}) | ||||
|         .then(response => { | ||||
|           if (!response.ok) {alert('Něco se nepovedlo:' + response.statusText);} | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue