Zobjektizování (v JS) strany

korektury/templates/korektury/korekturovatko/moduly/dalsi_korektura.html

@@ -38,8 +38,9 @@ Nemusíš mačkat, pokud ti stačí, že se korektury aktualizují samy každé
 
   function dalsi_nebo_predchozi_korektura(dalsi=true, stav=null) {
     let predchozi = null;
-    for (let [_, korektury] of Object.entries(korektury_na_strankach)) {
+    for (const strana of setrizene_strany) {
-      for (const korektura of korektury) {
+      // strana.setrid_korektury(); // Nemělo by být potřeba, protože se volá vždy, když se renderují korektury.
+      for (const korektura of strana.korektury) {
         if (stav == null || korektura.stav === stav) {
           const y = korektura.htmlElement.getBoundingClientRect().y;
           if (y >= -1) {

korektury/templates/korektury/korekturovatko/moduly/edit_komentar.html

@@ -48,26 +48,25 @@
     schovej() { this.div.style.display = 'none'; }
 
     // zobrazí korekturovací formulář
-    _zobraz(img_id, x, y) {
+    _zobraz(strana, x, y) {
       this.odesilaci_button.disabled = false;
       this.div.style.display = 'block';
       this.div.style.left = x;
       this.div.style.top = y;
 
-      const img = document.getElementById("img-" + img_id);
+      strana.htmlElement_div.appendChild(korekturovaci_formular.div);
-      img.parentNode.appendChild(korekturovaci_formular.div);
 
       this.text.focus();
     }
 
     // fill up comment form and show him
-    zobraz(img_id, x, y, text, korektura_id=-1, komentar_id=-1) {
+    zobraz(strana, x, y, text, korektura_id=-1, komentar_id=-1) {
       if (this.div.style.display !== 'none' && this.text.value !== "" && !confirm("Zavřít předchozí okénko přidávání korektury / editace komentáře?")) return;
 
       // set hidden values
       this.x = x;
       this.y = y;
-      this.imgID = img_id;
+      this.strana = strana;
       this.korektura_id = korektura_id;
       this.komentar_id = komentar_id;
       this.text.value = text;
@@ -83,7 +82,7 @@
           tag.dataset.vybran = String(korektura.tagy.has(parseInt(tag.value)));
       }
 
-      this._zobraz(img_id, x, y);
+      this._zobraz(strana, x, y);
     }
 
     odesli_formular() {
@@ -91,7 +90,7 @@
       const data = new FormData(CSRF_FORM);
       data.append('x', this.x);
       data.append('y', this.y);
-      data.append('img_id', this.imgID);
+      data.append('img_id', this.strana.id);
       data.append('oprava_id', this.korektura_id);
       data.append('komentar_id', this.komentar_id);
 

korektury/templates/korektury/korekturovatko/moduly/komentar.html

@@ -81,7 +81,7 @@
 
     // Ukaž formulář na editaci komentáře (když je zmáčknuto „uprav-komentar“)
     #uprav_komentar() {
-      return korekturovaci_formular.zobraz(this.korektura.img_id, this.korektura.x, this.korektura.y, this.#text.textContent, this.korektura.id, this.id);
+      return korekturovaci_formular.zobraz(this.korektura.strana, this.korektura.x, this.korektura.y, this.#text.textContent, this.korektura.id, this.id);
     }
 
     // Smaž komentář (když je zmáčknuto „smaz-komentar“)

korektury/templates/korektury/korekturovatko/moduly/korektura.html

@@ -71,7 +71,7 @@
 
     #komentare; #tagy;
     htmlElement; pointer;
-    id; x; y; img_id; stav; sbalena = false; {# korektura_data; #}
+    id; x; y; strana; stav; sbalena = false; {# korektura_data; #}
     tagy;
 
     constructor(korektura_data) {
@@ -86,7 +86,6 @@
 
       this.x = korektura_data['x'];
       this.y = korektura_data['y'];
-      this.img_id = korektura_data['strana'];
 
       this.aktualizuj(korektura_data);
 
@@ -102,8 +101,12 @@
       this.htmlElement.addEventListener('mouseover', _ => this.pointer.dataset.hover = 'true');
       this.htmlElement.addEventListener('mouseout', _ => this.pointer.dataset.hover = 'false');
 
+      const cislo_strany = korektura_data['strana'];
+      if (cislo_strany in strany) {
+        this.strana = strany[cislo_strany];
+        this.strana.korektury.push(this);
+      } else alert("Někdo korekturoval stranu, která neexistuje. Dejte vědět webařům :)");
       korektury[this.id] = this;
-      if (this.img_id in korektury_na_strankach) korektury_na_strankach[this.img_id].push(this); else alert("Někdo korekturoval stranu, která neexistuje. Dejte vědět webařům :)");
     }
 
     aktualizuj(korektura_data) {
@@ -143,7 +146,7 @@
     }
 
     // Ukaž komentovací formulář (když je zmáčknuto komentovat)
-    #komentuj() { korekturovaci_formular.zobraz(this.img_id, this.x, this.y, "", this.id); }
+    #komentuj() { korekturovaci_formular.zobraz(this.strana, this.x, this.y, "", this.id); }
 
     #zmen_stav_korektury(event) {
       const data = new FormData(CSRF_FORM);
@@ -178,57 +181,11 @@
     }
 
     #smaz_pouze_na_strance() {
-      korektury_na_strankach[this.img_id].splice(korektury_na_strankach[this.img_id].indexOf(this), 1);
+      this.strana.korektury.splice(this.strana.korektury.indexOf(this), 1);
       delete korektury[this.id];
       for (const komentar of Object.values(komentare)) if (komentar.korektura === this) komentar.smaz_pouze_na_strance();
       this.htmlElement.remove();
       this.pointer.remove();
     }
   }
-
-  // Umisťování korektur
-  const HORIZONTALNI_MEZERA = 10;
-  const VERTIKALNI_MEZERA = 5;
-  const MINIMALNI_VYSKA_POINTERU = 30;
-
-  function umisti_korektury_na_jedne_strance(strana, korektury)
-  {
-    const strana_img = document.getElementById("img-"+strana);
-    if( strana_img == null ) return;
-    const setridene_korektury = korektury.sort((a, b) => a.y - b.y);
-
-    const img_div = strana_img.parentNode;
-    const w = strana_img.clientWidth;
-
-    let spodek_posledni_korektury = 0;
-    for (const korektura of setridene_korektury) {
-      const x = korektura.x;
-      const y = korektura.y;
-      const htmlElement = korektura.htmlElement;
-      const pointer = korektura.pointer;
-
-      img_div.appendChild(pointer);
-      img_div.appendChild(htmlElement);
-
-      const delta_y = (y > spodek_posledni_korektury) ?  0: spodek_posledni_korektury - y + VERTIKALNI_MEZERA;
-
-      pointer.style.left = x;
-      pointer.style.top = y;
-      pointer.style.width = w - x + HORIZONTALNI_MEZERA;
-      pointer.style.height = MINIMALNI_VYSKA_POINTERU + delta_y;
-
-      htmlElement.style.left = w + HORIZONTALNI_MEZERA;
-      htmlElement.style.top = y + delta_y;
-
-      spodek_posledni_korektury = Math.max(spodek_posledni_korektury, htmlElement.offsetTop + htmlElement.offsetHeight + VERTIKALNI_MEZERA); // FIXME nemám páru, proč +H_SKIP funguje, ale opravuje to bug, že nově vytvořené korektury za sebou neměly mezeru
-    }
-
-    if (img_div.offsetHeight < spodek_posledni_korektury) img_div.style.height = spodek_posledni_korektury;
-  }
-
-  function umisti_korektury() {
-    for (let [img_id, korektury] of Object.entries(korektury_na_strankach)) {
-      umisti_korektury_na_jedne_strance(img_id, korektury)
-    }
-  }
 </script>

korektury/templates/korektury/korekturovatko/moduly/stranky_pdfka.html

@@ -13,42 +13,96 @@
 {% endfor %}
 
 <script>
-  // Mapování stránka -> korektury
+  // Pro umisťování korektur
-  /**
+  const HORIZONTALNI_MEZERA = 10;
-   * @type {Object.<number, Array<Korektura>>}
+  const VERTIKALNI_MEZERA = 5;
-   */
+  const MINIMALNI_VYSKA_POINTERU = 30;
-  const korektury_na_strankach = {
-    {% for s in img_indexes %}
-      {{s}}: []{% if not forloop.last %},{% endif %}
-    {% endfor %}
-  };
 
-  // show comment form, when clicked to image
+  /**
-  for (const strana_img of document.getElementsByClassName('strana')) {
+   * @type {Object.<int, Strana>}
-    strana_img.addEventListener('click', event => {
+   */
+  const strany = {};
+
+  class Strana {
+    htmlElement_img; htmlElement_div;
+    id; korektury;
+
+    constructor(htmlElement_img) {
+      this.htmlElement_img = htmlElement_img;
+      this.htmlElement_div = this.htmlElement_img.parentNode;
+
+      this.id = parseInt(this.htmlElement_img.id.substring(4));
+      this.korektury = []
+
+      this.htmlElement_img.addEventListener('click', event => this.#korekturuj(event));
+
+      strany[this.id] = this;
+    }
+
+    #korekturuj(event) {
       switch (document.body.dataset.stav_pdf) {
         case 'zanaseni':
-          if (!confirm('Právě jsou zanášeny korektury, opravdu chcete přidat novou?'))
+          if (!confirm('Právě jsou zanášeny korektury, opravdu chcete přidat novou?')) return;
-            return;
           break;
         case 'zastarale':
-          if (!confirm('Toto PDF je již zastaralé, opravdu chcete vytvořit korekturu?'))
+          if (!confirm('Toto PDF je již zastaralé, opravdu chcete vytvořit korekturu?')) return;
-            return;
           break;
       }
 
       let dx, dy;
-      const strana_div = strana_img.parentNode;
       if (event.pageX != null) {
-        dx = event.pageX - strana_div.offsetLeft;
+        dx = event.pageX - this.htmlElement_div.offsetLeft;
-        dy = event.pageY - strana_div.offsetTop;
+        dy = event.pageY - this.htmlElement_div.offsetTop;
       } else { //IE a další
         dx = event.offsetX;
         dy = event.offsetY;
       }
-      const img_id = strana_img.id.substring(4);
+      korekturovaci_formular.zobraz(this, dx, dy, '');
-      korekturovaci_formular.zobraz(img_id, dx, dy, '');
+      console.log("Pro přesun korektur: strana = " + this.id + ", x = " + dx + ", y = " + dy);
-      console.log("Pro přesun korektur: strana = " + img_id + ", x = " + dx + ", y = " + dy);
-    });
     }
+
+    setrid_korektury() { this.korektury.sort((a, b) => a.y - b.y); }
+
+    umisti_korektury() {
+      this.setrid_korektury()
+
+      const w = this.htmlElement_img.clientWidth;
+
+      let spodek_posledni_korektury = 0;
+      for (const korektura of this.korektury) {
+        const x = korektura.x;
+        const y = korektura.y;
+        const pointer = korektura.pointer;
+
+        this.htmlElement_div.appendChild(pointer);
+        this.htmlElement_div.appendChild(korektura.htmlElement);
+
+        const delta_y = (y > spodek_posledni_korektury) ?  0: spodek_posledni_korektury - y + VERTIKALNI_MEZERA;
+
+        pointer.style.left = x;
+        pointer.style.top = y;
+        pointer.style.width = w - x + HORIZONTALNI_MEZERA;
+        pointer.style.height = MINIMALNI_VYSKA_POINTERU + delta_y;
+
+        korektura.htmlElement.style.left = w + HORIZONTALNI_MEZERA;
+        korektura.htmlElement.style.top = y + delta_y;
+
+        spodek_posledni_korektury = Math.max(
+          spodek_posledni_korektury,
+          korektura.htmlElement.offsetTop + korektura.htmlElement.offsetHeight + VERTIKALNI_MEZERA
+        ); // FIXME nemám páru, proč +VERTIKALNI_MEZERA funguje, ale opravuje to bug, že nově vytvořené korektury za sebou neměly mezeru
+      }
+
+      if (this.htmlElement_div.offsetHeight < spodek_posledni_korektury)
+        this.htmlElement_div.style.height = spodek_posledni_korektury;
+    }
+  }
+
+  for (const strana_img of document.getElementsByClassName('strana'))
+    new Strana(strana_img);
+
+  const setrizene_strany = Object.values(strany);
+  setrizene_strany.sort((a, b) => a.htmlElement_img.offsetTop - b.htmlElement_img.offsetTop);
+
+  function umisti_korektury() { for (const strana of Object.values(strany)) strana.umisti_korektury(); }
 </script>