Uhlazení JavaScriptu

korektury/static/korektury/opraf.css

@@ -80,6 +80,7 @@ img{background:white;}
 	padding: 3px;
 	border: 2px solid rgb(var(--rgb));
 	border-radius: 10px;
+	position: absolute;
 
 	&:hover {
 		border-width:3px;

korektury/static/korektury/opraf.js

@@ -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);
+	const img = document.getElementById("img-"+img_id);
-	if( img == null ) {
+	if( img == null ) return;
-		return;
+    const comments_sorted = comments.sort((a, b) => a.y - b.y);
-	}
-	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;
 
-	var bott_max = 0;
+	const par = img.parentNode;
-	var comments_sorted = comments.sort(function (a,b) {
+	const w = img.clientWidth;
-		return a.y - b.y;
 
-	});
+	let bott_max = 0;
 	for (const oprava of comments_sorted) {
 		const x = oprava.x;
 		const y = oprava.y;
-        const el = oprava.htmlElement;
+        const htmlElement = oprava.htmlElement;
-		const elp = oprava.pointer;
+		const pointer = oprava.pointer;
 
-		if( el == null  || elp == null ) { 
+		par.appendChild(pointer);
-			continue;
+		par.appendChild(htmlElement);
+
+		const 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;
+
+		htmlElement.style.left = w + W_SKIP;
+		htmlElement.style.top = y + delta_y;
+
+		bott_max = Math.max(bott_max, htmlElement.offsetTop + htmlElement.offsetHeight);
 	}
 
-		par.appendChild(elp);
+	if (par.offsetHeight < bott_max) par.style.height = bott_max;
-		par.appendChild(el);
-
-		var delta_y = (y > bott_max) ?  0: bott_max - y + h_skip;
-
-		elp.style.left = x;
-		elp.style.top = y ;
-		elp.style.width = w - x  + w_skip;
-		elp.style.height = pointer_min_h + 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;
-	}
-	if( par.offsetHeight < bott_max ) {
-		par.style.height = bott_max;
-
-	}
 }
 
 function place_comments() {

korektury/templates/korektury/korekturovatko/__edit_komentar.html

@@ -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;
 

korektury/templates/korektury/korekturovatko/__oprava.html

@@ -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()
-        place_comments_one_div(comments[i][0], comments[i][1])
-      }
     }
 
     // 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);}