Přepsání korekturovátka do češtiny a oprava -> korektura (alespoň frontendu)

korektury/static/korektury/opraf.css

@@ -1,19 +1,19 @@
 .textzanaseni { display:none; }
 .textzastarale { display:none; }
-#prekomentar, #preoprava, #prepointer { display: none; }
+#prekomentar, #prekorektura, #prepointer { display: none; }
 
 body {
-	&[data-status="pridavani"] {
+	&[data-stav_pdf="pridavani"] {
 		background: #f3f3f3;
 	}
 
-	&[data-status="zanaseni"] {
+	&[data-stav_pdf="zanaseni"] {
 		background: yellow;
 
 		.textzanaseni { display: unset; }
 	}
 
-	&[data-status="zastarale"] {
+	&[data-stav_pdf="zastarale"] {
 		background: red;
 
 		.textzastarale { display: unset; }
@@ -28,25 +28,25 @@ body {
 img{background:white;}
 
 /* Barvy korektur */
-[data-opravastatus="k_oprave"] {
+[data-stav_korektury="k_oprave"] {
 	--rgb: 255, 0, 0;
 
 	[value="k_oprave"] { display: none }
 	.komentovat_disabled { display: none }
 }
-[data-opravastatus="opraveno"] {
+[data-stav_korektury="opraveno"] {
 	--rgb: 0, 0, 255;
 
 	[value="opraveno"] { display: none }
 	.komentovat { display: none }
 }
-[data-opravastatus="neni_chyba"] {
+[data-stav_korektury="neni_chyba"] {
 	--rgb: 128, 128, 128;
 
 	[value="neni_chyba"] { display: none }
 	.komentovat { display: none }
 }
-[data-opravastatus="k_zaneseni"] {
+[data-stav_korektury="k_zaneseni"] {
 	--rgb: 0, 255, 0;
 
 	[value="k_zaneseni"] { display: none }
@@ -54,10 +54,10 @@ img{background:white;}
 }
 
 /* Skrývání korektur */
-[data-opravazobrazit="false"] {
+[data-korektura_sbalena="true"] {
-	.corr-body { display: none; }
+	.korektura-telo { display: none; }
-	.corr-buttons { display: none; }
+	.korektura-tlacitka { display: none; }
-	.toggle-button { transform: rotate(180deg); }
+	.sbal-rozbal-img { transform: rotate(180deg); }
 }
 
 
@@ -72,14 +72,14 @@ img{background:white;}
 	--alpha: 0.35;
 
 	/* Zvýraznění čáry při najetí na korekturu */
-	&[data-highlight="true"] {
+	&[data-hover="true"] {
 		border-width: 3px;
 		--alpha: 1;
 	}
 }
 
 /* Korektura samotná */
-.oprava {
+.korektura {
 	margin: 1px;
 	background-color: white;
 	width: 300px;
@@ -106,11 +106,11 @@ img{background:white;}
 
 	button img { pointer-events: none; }
 
-	.corr-header {
+	.hlavicka-komentare {
 		overflow: auto;
 	}
 
-	.author {
+	.autor {
 		font-weight: bold;
 		float: left;
 		margin-top: 3px;
@@ -133,7 +133,7 @@ form {
 }
 
 /* Přidávání korektury / úprava komentáře */
-#commform-div {
+#korekturovaci-formular-div {
 	position: absolute;
 	background-color: white;
 	padding: 3px;
@@ -148,8 +148,8 @@ form {
 	margin: 2px;
 	padding: 2px;
 
-	&[data-selected="false"] { background: unset !important; }
+	&[data-vybran="false"] { background: unset !important; }
-	/*&[data-selected="true"] { border-color: unset !important; }*/
+	/*&[data-vybran="true"] { border-color: unset !important; }*/
 }
 
 /* Šipky na posouvání korektur */

korektury/templates/korektury/korekturovatko/hlavni_cast_korekturovatka.html

@@ -4,8 +4,8 @@
 
 {% include "korektury/korekturovatko/moduly/stranky_pdfka.html" %}
 
-{# {% for o in opravy %} {% include "korektury/korekturovatko/oprava.html" %} {% endfor %} #}
+{# {% for k in korektury %} {% include "korektury/korekturovatko/korektura.html" %} {% endfor %} #}
-{% include "korektury/korekturovatko/moduly/oprava.html" %}
+{% include "korektury/korekturovatko/moduly/korektura.html" %}
 {% include "korektury/korekturovatko/moduly/komentar.html" %}
 
 {% include "korektury/korekturovatko/moduly/dalsi_korektura.html" %}
@@ -17,21 +17,21 @@
    * @param {Boolean} catchError
    * @param pri_uspechu Akce, která se má provést při úspěchu (speciálně zavřít formulář)
    */
-  function update_all(data={}, catchError=true, pri_uspechu=null) { // FIXME není mi jasné, zda v {} nemá být `cache: "no-store"`, aby prohlížeč necachoval GET.
+  function aktualizuj_vse(data={}, catchError=true, pri_uspechu=null) { // FIXME není mi jasné, zda v {} nemá být `cache: "no-store"`, aby prohlížeč necachoval GET.
     fetch('{% url "korektury_api_opravy_a_komentare" korekturovanepdf.id %}', data)
       .then(response => {
         if (!response.ok && catchError) {alert('Něco se nepovedlo:' + response.statusText);}
         else response.json().then(data => {
-          for (const oprava_data of data["context"]) {
+          for (const korektura_data of data["context"]) {
-            const oprava = Oprava.update_or_create(oprava_data);
+            const korektura = Korektura.aktualizuj_nebo_vytvor(korektura_data);
-            for (const komentar_data of oprava_data["komentare"]) {
+            for (const komentar_data of korektura_data["komentare"]) {
-              Komentar.update_or_create(komentar_data, oprava);
+              Komentar.aktualizuj_nebo_vytvor(komentar_data, korektura);
             }
           }
 
-          updatuj_pocty_stavu();
+          aktualizuj_pocty_stavu();
-          updatuj_pocty_zasluh();
+          aktualizuj_pocty_zasluh();
-          place_comments();
+          umisti_korektury();
           if (pri_uspechu) pri_uspechu();
         });
       })
@@ -39,13 +39,13 @@
   }
 
   window.addEventListener("load", _ => {
-    update_all({}, true, _ => {
+    aktualizuj_vse({}, true, _ => {
       if (location.hash !== "") location.hash = location.hash; // Po rozházení korektur sescrollujeme na kotvu v URL
     });
   });
 
   // FIXME není mi jasné, zda v {} nemá být `cache: "no-store"`, aby prohlížeč necachoval GET.
-  setInterval(() => update_all({}, false), 120000); // Každý dvě minuty fetchni korektury
+  setInterval(() => aktualizuj_vse({}, false), 120000); // Každý dvě minuty fetchni korektury
 </script>
 
 <form id='CSRF_form' style='display: none'>{% csrf_token %}</form>

korektury/templates/korektury/korekturovatko/html_obal.html

@@ -7,7 +7,7 @@
   <link href="{% static 'css/rozliseni.css' %}?version=2" rel="stylesheet">
   <title>Korektury {{korekturovanepdf.nazev}}</title>
 </head>
-<body class="{{ LOCAL_TEST_PROD }}web" data-status="{{ korekturovanepdf.status }}">
+<body class="{{ LOCAL_TEST_PROD }}web" data-stav_pdf="{{ korekturovanepdf.status }}">
 
   <h1>Korektury {{korekturovanepdf.nazev}}</h1>
 
@@ -38,7 +38,7 @@
   <script>
     const span_s_pocty_autoru = document.getElementById("pocty_autoru")
 
-    function updatuj_pocty_zasluh() {
+    function aktualizuj_pocty_zasluh() {
       const pocty_autoru = {};
       for (let komentar of Object.values(komentare)) {
         if (!(komentar.autor in pocty_autoru)) pocty_autoru[komentar.autor] = 0;

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

@@ -38,14 +38,14 @@ 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 [_, opravy] of Object.entries(comments)) {
+    for (let [_, korektury] of Object.entries(korektury_na_strankach)) {
-      for (const oprava of opravy) {
+      for (const korektura of korektury) {
-        if (stav == null || oprava.status === stav) {
+        if (stav == null || korektura.stav === stav) {
-          const y = oprava.htmlElement.getBoundingClientRect().y;
+          const y = korektura.htmlElement.getBoundingClientRect().y;
           if (y >= -1) {
             if (dalsi) {
               if (y > 1) {
-                oprava.htmlElement.scrollIntoView();
+                korektura.htmlElement.scrollIntoView();
                 return;
               }
             } else {
@@ -53,7 +53,7 @@ Nemusíš mačkat, pokud ti stačí, že se korektury aktualizují samy každé
               return;
             }
           }
-          predchozi = oprava;
+          predchozi = korektura;
         }
       }
     }
@@ -72,5 +72,5 @@ Nemusíš mačkat, pokud ti stačí, že se korektury aktualizují samy každé
   dalsi_k_z.addEventListener('click', _ => { dalsi_nebo_predchozi_korektura(true, "k_zaneseni") });
 
   // FIXME není mi jasné, zda v {} nemá být `cache: "no-store"`, aby prohlížeč necachoval GET.
-  document.getElementById("korektury-aktualizace").addEventListener("click", _ => update_all({}, false));
+  document.getElementById("korektury-aktualizace").addEventListener("click", _ => aktualizuj_vse({}, false));
 </script>

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

@@ -1,111 +1,111 @@
-<div id="commform-div" style="display: none">
+<div id="korekturovaci-formular-div" style="display: none">
   <input size="24" name="au" value="{{user.first_name}} {{user.last_name}}" readonly/>
-  <button type="button" id="commform-submit">Oprav!</button>
+  <button type="button" id="korekturovaci-formular-odesli">Oprav!</button>
-  <button type="button" id="commform-close">Zavřít</button>
+  <button type="button" id="korekturovaci-formular-zavri">Zavřít</button>
   <br/>
-  <textarea id="commform-text" cols=40 rows=10 name="txt"></textarea>
+  <textarea id="korekturovaci-formular-text" cols=40 rows=10 name="txt"></textarea>
   <br/>
-  <div id="commform-tagy-info">Úprava tagů celé korektury:</div>
+  <div id="korekturovaci-formular-tagy-info">Úprava tagů celé korektury:</div>
-  <div id="commform-tagy">
+  <div id="korekturovaci-formular-tagy">
     {% for tag in tagy %}
-      <button type="button" class="korektury-tag" value="{{tag.id}}" data-selected="false" style="background: {{ tag.barva }}; border-color: {{ tag.barva }};">{{tag.nazev}}</button>
+      <button type="button" class="korektury-tag" value="{{tag.id}}" data-vybran="false" style="background: {{ tag.barva }}; border-color: {{ tag.barva }};">{{tag.nazev}}</button>
     {% endfor %}
   </div>
 </div>
 
 <script>
-  class _CommForm {
+  class _KorekturovaciFormular {
     constructor() {
-      this.div = document.getElementById('commform-div');
+      this.div = document.getElementById('korekturovaci-formular-div');
-      this.text = document.getElementById('commform-text');
+      this.text = document.getElementById('korekturovaci-formular-text');
-      this.submit_button = document.getElementById('commform-submit');
+      this.odesilaci_button = document.getElementById('korekturovaci-formular-odesli');
-      const close_button = document.getElementById('commform-close');
+      const zaviraci_button = document.getElementById('korekturovaci-formular-zavri');
-      this.tagy = document.getElementById('commform-tagy');
+      this.tagy = document.getElementById('korekturovaci-formular-tagy');
-      this.tagy_info = document.getElementById('commform-tagy-info');
+      this.tagy_info = document.getElementById('korekturovaci-formular-tagy-info');
 
 
-      // ctrl-enter submits form
+      // ctrl-enter odešle formulář
       this.text.addEventListener("keydown", ev => {
-        if (ev.code === "Enter" && ev.ctrlKey) this.submit();
+        if (ev.code === "Enter" && ev.ctrlKey) this.odesli_formular();
       });
 
-      close_button.addEventListener("click", _ => { this.close(); });
+      zaviraci_button.addEventListener("click", _ => { this.schovej(); });
-      this.submit_button.addEventListener("click", _ => { this.submit(); });
+      this.odesilaci_button.addEventListener("click", _ => { this.odesli_formular(); });
-      for (const tag of this.tagy.getElementsByTagName("button")) tag.addEventListener("click", event => { this.toggle_tag(event); });
+      for (const tag of this.tagy.getElementsByTagName("button")) tag.addEventListener("click", event => { this.vyber_nebo_odvyber_tag(event); });
 
-      this.reset_tags_every_open = true;
+      this.pri_otevreni_odvyber_tagy = true;
     }
 
-    toggle_tag(event) {
+    vyber_nebo_odvyber_tag(event) {
       const button = event.target;
-      button.dataset.selected = String(button.dataset.selected === "false");
+      button.dataset.vybran = String(button.dataset.vybran === "false");
     }
 
-    reset_tags() { for (const tag of this.tagy.getElementsByTagName("button")) tag.dataset.selected = "false"; }
+    odvyber_tagy() { for (const tag of this.tagy.getElementsByTagName("button")) tag.dataset.vybran = "false"; }
 
 
-    // schová commform
+    // schová korekturovací formulář
-    close() { this.div.style.display = 'none'; }
+    schovej() { this.div.style.display = 'none'; }
 
-    // zobrazí commform (bez vyplňování)
+    // zobrazí korekturovací formulář
-    _show(img_id, x, y) {
+    _zobraz(img_id, x, y) {
-      this.submit_button.disabled = false;
+      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);
-      img.parentNode.appendChild(commform.div);
+      img.parentNode.appendChild(korekturovaci_formular.div);
 
       this.text.focus();
     }
 
     // fill up comment form and show him
-    show(img_id, x, y, text, oprava_id=-1, komentar_id=-1) {
+    zobraz(img_id, 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.oprava_id = oprava_id;
+      this.korektura_id = korektura_id;
       this.komentar_id = komentar_id;
       this.text.value = text;
 
       // show form
-      if (oprava_id === -1 && komentar_id === -1) {
+      if (korektura_id === -1 && komentar_id === -1) {
-        if (this.reset_tags_every_open) this.reset_tags();
+        if (this.pri_otevreni_odvyber_tagy) this.odvyber_tagy();
         this.tagy_info.style.display = 'none';
       } else {
-        const oprava = opravy[oprava_id];
+        const korektura = korektury[korektura_id];
         this.tagy_info.style.display = 'unset';
         for (const tag of this.tagy.getElementsByTagName("button"))
-          tag.dataset.selected = String(oprava.tagy.has(parseInt(tag.value)));
+          tag.dataset.vybran = String(korektura.tagy.has(parseInt(tag.value)));
       }
 
-      this._show(img_id, x, y);
+      this._zobraz(img_id, x, y);
     }
 
-    submit() {
+    odesli_formular() {
-      this.submit_button.disabled = true;
+      this.odesilaci_button.disabled = true;
       const data = new FormData(CSRF_FORM);
       data.append('x', this.x);
       data.append('y', this.y);
       data.append('img_id', this.imgID);
-      data.append('oprava_id', this.oprava_id);
+      data.append('oprava_id', this.korektura_id);
       data.append('komentar_id', this.komentar_id);
 
       const tagy = [];
       for (const tag of this.tagy.getElementsByTagName("button")) {
-        if (tag.dataset.selected !== "false") tagy.push(tag.value);
+        if (tag.dataset.vybran !== "false") tagy.push(tag.value);
       }
       data.append('tagy', String(tagy));
 
       data.append('text', this.text.value);
 
-      update_all({method: 'POST', body: data}, true, () => {this.close(); this.submit_button.disabled = false;});
+      aktualizuj_vse({method: 'POST', body: data}, true, () => {this.schovej(); this.odesilaci_button.disabled = false;});
     }
   }
 
-  const commform = new _CommForm();
+  const korekturovaci_formular = new _KorekturovaciFormular();
 </script>

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

@@ -1,15 +1,15 @@
 {% load static %}
 
 <div class='comment' id='prekomentar' {# id='k{{k.id}}' #}>
-  <div class='corr-header'>
+  <div class='hlavicka-komentare'>
-    <div class='author'>{# {{k.autor}} #}</div>
+    <div class='autor'>{# {{k.autor}} #}</div>
 
     <div class='float-right'>
-      <button type='button' style='display: none' class='del-comment' title='Smaž komentář'>
+      <button type='button' style='display: none' class="smaz-komentar" title='Smaž komentář'>
         <img src='{% static "korektury/imgs/delete.png" %}' alt='del'/>
       </button>
 
-      <button type='button' class='update-comment' title='Uprav komentář'>
+      <button type='button' class="uprav-komentar" title='Uprav komentář'>
         <img src='{% static "korektury/imgs/edit.png" %}' alt='edit'/>
       </button>
     </div>
@@ -28,42 +28,42 @@
   const komentare = {};
 
   class Komentar {
-    static update_or_create(komentar_data, oprava) {
+    static aktualizuj_nebo_vytvor(komentar_data, korektura) {
       const id = komentar_data['id'];
-      if (id in komentare) komentare[id].update(komentar_data);
+      if (id in komentare) komentare[id].aktualizuj(komentar_data);
-      else new Komentar(komentar_data, oprava);
+      else new Komentar(komentar_data, korektura);
     }
 
     #autor; #text;
     htmlElement;
-    id; oprava; {# komentar_data; #}
+    id; korektura; {# komentar_data; #}
     autor;
 
     /**
      *
      * @param komentar_data
-     * @param {Oprava} oprava
+     * @param {Korektura} korektura
      */
-    constructor(komentar_data, oprava) {
+    constructor(komentar_data, korektura) {
       this.htmlElement = prekomentar.cloneNode(true);
-      this.#autor = this.htmlElement.getElementsByClassName('author')[0];
+      this.#autor = this.htmlElement.getElementsByClassName('autor')[0];
       this.#text = this.htmlElement.getElementsByClassName('komtext')[0];
 
       this.id = komentar_data['id'];
       this.htmlElement.id = 'k' + this.id;
 
-      this.oprava = oprava;
+      this.korektura = korektura;
-      this.oprava.add_komentar_htmlElement(this.htmlElement);
+      this.korektura.pridej_htmlElement_komentare(this.htmlElement);
 
-      this.update(komentar_data);
+      this.aktualizuj(komentar_data);
 
-      this.htmlElement.getElementsByClassName('update-comment')[0].addEventListener('click', _ => this.#update_comment());
+      this.htmlElement.getElementsByClassName('uprav-komentar')[0].addEventListener('click', _ => this.#uprav_komentar());
-      this.htmlElement.getElementsByClassName('del-comment')[0].addEventListener('click', _ => this.#delete_comment());
+      this.htmlElement.getElementsByClassName('smaz-komentar')[0].addEventListener('click', _ => this.#smaz_komentar());
 
       komentare[this.id] = this;
     }
 
-    update(komentar_data) {
+    aktualizuj(komentar_data) {
       {# this.komentar_data = komentar_data; #}
       this.set_autor(komentar_data['autor']);
       this.set_text(komentar_data['text']);
@@ -79,12 +79,13 @@
     };
 
 
-    // show comment form when 'update-comment' button pressed
+    // Ukaž formulář na editaci komentáře (když je zmáčknuto „uprav-komentar“)
-    #update_comment() {
+    #uprav_komentar() {
-      return commform.show(this.oprava.img_id, this.oprava.x, this.oprava.y, this.#text.textContent, this.oprava.id, this.id);
+      return korekturovaci_formular.zobraz(this.korektura.img_id, this.korektura.x, this.korektura.y, this.#text.textContent, this.korektura.id, this.id);
     }
 
-    #delete_comment() {
+    // Smaž komentář (když je zmáčknuto „smaz-komentar“)
+    #smaz_komentar() {
       if (confirm('Opravdu smazat komentář?')) {
         const data = new FormData(CSRF_FORM);
         data.append('komentar_id', this.id);
@@ -92,12 +93,13 @@
           .then(response => {
             if (!response.ok) {alert('Něco se nepovedlo:' + response.statusText);}
             this.smaz_pouze_na_strance();
-            place_comments();
+            umisti_korektury();
           })
           .catch(error => {alert('Něco se nepovedlo:' + error);});
       }
     }
 
+    // Smaž div komentáře, když je smazán komentář nebo jeho nadřazená korektura
     smaz_pouze_na_strance() {
       delete komentare[this.id];
       this.htmlElement.remove();

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

@@ -0,0 +1,234 @@
+{% load static %}
+
+<div id='prepointer' {# id='kor{{k.id}}-pointer' #}
+     class='pointer'
+     data-hover='false'
+     {# data-stav_korektury='{{k.status}}' #}
+></div>
+
+<div id='prekorektura' {# name='kor{{k.id}}' id='kor{{k.id}}' #}
+     class='korektura'
+     {# data-stav_korektury='{{k.status}}' #}
+     data-korektura_sbalena='false'
+>
+  <div class="korektura-tagy">
+    {# {% for tag in k.tagy %} <span style="background:{{ tag.barva }}>{{ tag.text }}<span/> #}
+  </div>
+
+  <div class='korektura-telo'>
+    {# {% for k in k.komentare %} {% include "korektury/korekturovatko/komentar.html" %} {% endfor %} #}
+  </div>
+
+  <div class='hlavicka-komentare'>
+    <span class='float-right'>
+      <span class='korektura-tlacitka'>
+        <button type='button' style='display: none' class="smaz-korekturu" title='Smaž korekturu'>
+          <img src='{% static "korektury/imgs/delete.png" %}' alt='🗑️'/>
+        </button>
+        <button type='button' class='action' value='k_oprave' title='Označ jako neopravené'>
+          <img src='{% static "korektury/imgs/undo.png" %}' alt='↪'/>
+        </button>
+        <button type='button' class='action' value='opraveno' title='Označ jako opravené'>
+          <img src='{% static "korektury/imgs/check.png" %}' alt='✔️'/>
+        </button>
+        <button type='button' class='action' value='neni_chyba' title='Označ, že se nebude měnit'>
+          <img src='{% static "korektury/imgs/cross.png" %}' alt='❌'/>
+        </button>
+        <button type='button' class='action' value='k_zaneseni' title='Označ jako připraveno k zanesení'>
+          <img src='{% static "korektury/imgs/tex.png" %}' alt='TeX'/>
+        </button>
+
+        <a href='{% url "admin:korektury_oprava_change" -1 %}' class='edit' title='Uprav korekturu jako takovou.' style="text-decoration: none;"> {# FIXME Udělat z toho tlačítko? #}
+          <img src='{% static "korektury/imgs/edit.png" %}' alt='✏️' style="opacity: 0.5;"/> {# FIXME Odlišit jinak než pomocí opacity? #}
+        </a>
+        <button type='button' class='komentovat_disabled' title='Korekturu nelze komentovat, protože už je uzavřená' disabled=''>
+          <img src='{% static "korektury/imgs/comment-gr.png" %}' alt='💭'/>
+				</button>
+        <button type='button' class='komentovat' title='Komentovat'>
+          <img src='{% static "korektury/imgs/comment.png" %}' alt='💭'/>
+				</button>
+      </span>
+
+      <button type='button' class='sbal-rozbal' title='Skrýt/Zobrazit'>
+        <img class='sbal-rozbal-img' src='{% static "korektury/imgs/hide.png" %}' alt='⬆'/>
+      </button>
+
+			</span>
+  </div>
+</div>
+
+<script>
+  const prekorektura = document.getElementById('prekorektura');
+  const prepointer = document.getElementById('prepointer');
+  const korektury = {};
+
+  class Korektura {
+    static aktualizuj_nebo_vytvor(korektura_data) {
+      const id = korektura_data['id'];
+      if (id in korektury) return korektury[id].aktualizuj(korektura_data);
+      else return new Korektura(korektura_data);
+    }
+
+    #komentare; #tagy;
+    htmlElement; pointer;
+    id; x; y; img_id; stav; sbalena = false; {# korektura_data; #}
+    tagy;
+
+    constructor(korektura_data) {
+      this.htmlElement = prekorektura.cloneNode(true);
+      this.pointer = prepointer.cloneNode(true);
+      this.#komentare = this.htmlElement.getElementsByClassName('korektura-telo')[0];
+      this.#tagy = this.htmlElement.getElementsByClassName('korektura-tagy')[0];
+
+      this.id = korektura_data['id'];
+      this.htmlElement.id = 'kor' + this.id;
+      this.pointer.id = 'kor' + this.id + '-pointer';
+
+      this.x = korektura_data['x'];
+      this.y = korektura_data['y'];
+      this.img_id = korektura_data['strana'];
+
+      this.aktualizuj(korektura_data);
+
+      this.htmlElement.getElementsByClassName('sbal-rozbal')[0].addEventListener('click', _ => this.#sbal_nebo_rozbal());
+      for (const button of this.htmlElement.getElementsByClassName('action'))
+        button.addEventListener('click', async event => this.#zmen_stav_korektury(event));
+      this.htmlElement.getElementsByClassName('komentovat')[0].addEventListener('click', _ => this.#komentuj())
+      this.htmlElement.getElementsByClassName('smaz-korekturu')[0].addEventListener('click', _ => this.#smaz_korekturu());
+      const odkaz_editace = this.htmlElement.getElementsByClassName('edit')[0];
+      odkaz_editace.href = odkaz_editace.href.replace("-1", this.id);
+      odkaz_editace.onclick = ev => { if (!confirm("Editace korektury je velmi pokročilá featura umožňující přesouvat korekturu nebo přidávat informované orgy, opravdu chceš pokračovat do adminu?")) ev.preventDefault(); };
+
+      this.htmlElement.addEventListener('mouseover', _ => this.pointer.dataset.hover = 'true');
+      this.htmlElement.addEventListener('mouseout', _ => this.pointer.dataset.hover = 'false');
+
+      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) {
+      {# this.korektura_data = korektura_data; #}
+      this.set_stav(korektura_data['status']);
+      this.#tagy.innerHTML = "";
+      this.tagy = new Set();
+      for (const tag of korektura_data["tagy"]) {
+        this.tagy.add(tag["id"]);
+        const span = document.createElement("span");
+        span.innerHTML = tag["nazev"];
+        span.classList.add("korektury-tag");
+        span.style.backgroundColor = tag["barva"];
+        this.#tagy.appendChild(span);
+      }
+      return this;
+    };
+
+    set_stav(stav) {
+      this.stav = stav;
+      this.htmlElement.dataset.stav_korektury=stav;
+      this.pointer.dataset.stav_korektury=stav;
+    };
+
+    pridej_htmlElement_komentare(htmlElement) { this.#komentare.appendChild(htmlElement); }
+
+
+
+
+    sbal_nebo_rozbal() {
+      this.sbalena = !this.sbalena;
+      this.htmlElement.dataset.korektura_sbalena = String(this.sbalena);
+    }
+    #sbal_nebo_rozbal(){
+      this.sbal_nebo_rozbal();
+      umisti_korektury()
+    }
+
+    // Ukaž komentovací formulář (když je zmáčknuto komentovat)
+    #komentuj() { korekturovaci_formular.zobraz(this.img_id, this.x, this.y, "", this.id); }
+
+    #zmen_stav_korektury(event) {
+      const data = new FormData(CSRF_FORM);
+      data.append('id', this.id);
+      data.append('action', event.target.value);
+
+      fetch('{% url "korektury_api_oprava_stav" %}', {method: 'POST', body: data})
+        .then(response => {
+          if (!response.ok) {alert('Něco se nepovedlo:' + response.statusText);}
+          else response.json().then(data => {
+            this.set_stav(data['status']);
+            aktualizuj_pocty_stavu();
+          });
+        })
+        .catch(error => {alert('Něco se nepovedlo:' + error);});
+    }
+
+    #smaz_korekturu() {
+      if (confirm('Opravdu smazat korekturu?')) {
+        const data = new FormData(CSRF_FORM);
+        data.append('oprava_id', this.id);
+        fetch('{% url "korektury_api_oprava_smaz" %}', {method: 'POST', body: data})
+          .then(response => {
+            if (!response.ok) {alert('Něco se nepovedlo:' + response.statusText);}
+            this.#smaz_pouze_na_strance()
+            aktualizuj_pocty_stavu();
+            aktualizuj_pocty_zasluh();
+            umisti_korektury();
+          })
+          .catch(error => {alert('Něco se nepovedlo:' + error);});
+      }
+    }
+
+    #smaz_pouze_na_strance() {
+      korektury_na_strankach[this.img_id].splice(korektury_na_strankach[this.img_id].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/oprava.html

@@ -1,235 +0,0 @@
-{% load static %}
-
-<div id='prepointer' {# id='op{{o.id}}-pointer' #}
-     class='pointer'
-     data-highlight='false'
-     {# data-opravastatus='{{o.status}}' #}
-></div>
-
-<div id='preoprava' {# name='op{{o.id}}' id='op{{o.id}}' #}
-     class='oprava'
-     {# data-opravastatus='{{o.status}}' #}
-     data-opravazobrazit='true'
->
-  <div class='corr-tagy'>
-    {# {% for tag in o.tagy %} <span style="background:{{ tag.barva }}>{{ tag.text }}<span/> #}
-  </div>
-
-  <div class='corr-body'>
-    {# {% for k in o.komentare %} {% include "korektury/korekturovatko/komentar.html" %} {% endfor %} #}
-  </div>
-
-  <div class='corr-header'>
-    <span class='float-right'>
-      <span class='corr-buttons'>
-        <button type='button' style='display: none' class='del' title='Smaž opravu'>
-          <img src='{% static "korektury/imgs/delete.png" %}' alt='🗑️'/>
-        </button>
-        <button type='button' class='action' value='k_oprave' title='Označ jako neopravené'>
-          <img src='{% static "korektury/imgs/undo.png" %}' alt='↪'/>
-        </button>
-        <button type='button' class='action' value='opraveno' title='Označ jako opravené'>
-          <img src='{% static "korektury/imgs/check.png" %}' alt='✔️'/>
-        </button>
-        <button type='button' class='action' value='neni_chyba' title='Označ, že se nebude měnit'>
-          <img src='{% static "korektury/imgs/cross.png" %}' alt='❌'/>
-        </button>
-        <button type='button' class='action' value='k_zaneseni' title='Označ jako připraveno k zanesení'>
-          <img src='{% static "korektury/imgs/tex.png" %}' alt='TeX'/>
-        </button>
-
-        <a href='{% url "admin:korektury_oprava_change" -1 %}' class='edit' title='Uprav korekturu jako takovou.' style="text-decoration: none;"> {# FIXME Udělat z toho tlačítko? #}
-          <img src='{% static "korektury/imgs/edit.png" %}' alt='✏️' style="opacity: 0.5;"/> {# FIXME Odlišit jinak než pomocí opacity? #}
-        </a>
-        <button type='button' class='komentovat_disabled' title='Korekturu nelze komentovat, protože už je uzavřená' disabled=''>
-          <img src='{% static "korektury/imgs/comment-gr.png" %}' alt='💭'/>
-				</button>
-        <button type='button' class='komentovat' title='Komentovat'>
-          <img src='{% static "korektury/imgs/comment.png" %}' alt='💭'/>
-				</button>
-      </span>
-
-      <button type='button' class='toggle-vis' title='Skrýt/Zobrazit'>
-        <img class='toggle-button' src='{% static "korektury/imgs/hide.png" %}' alt='⬆'/>
-      </button>
-
-			</span>
-  </div>
-</div>
-
-<script>
-  const preoprava = document.getElementById('preoprava');
-  const prepointer = document.getElementById('prepointer');
-  const opravy = {};
-
-  class Oprava {
-    static update_or_create(oprava_data) {
-      const id = oprava_data['id'];
-      if (id in opravy) return opravy[id].update(oprava_data);
-      else return new Oprava(oprava_data);
-    }
-
-    #komentare; #tagy;
-    htmlElement; pointer;
-    id; x; y; img_id; status; zobrazit = true; {# oprava_data; #}
-    tagy;
-
-    constructor(oprava_data) {
-      this.htmlElement = preoprava.cloneNode(true);
-      this.pointer = prepointer.cloneNode(true);
-      this.#komentare = this.htmlElement.getElementsByClassName('corr-body')[0];
-      this.#tagy = this.htmlElement.getElementsByClassName('corr-tagy')[0];
-
-      this.id = oprava_data['id'];
-      this.htmlElement.id = 'op' + this.id;
-      this.pointer.id = 'op' + this.id + '-pointer';
-
-      this.x = oprava_data['x'];
-      this.y = oprava_data['y'];
-      this.img_id = oprava_data['strana'];
-
-      this.update(oprava_data);
-
-      this.htmlElement.getElementsByClassName('toggle-vis')[0].addEventListener('click', _ => this.#toggle_visibility());
-      for (const button of this.htmlElement.getElementsByClassName('action'))
-        button.addEventListener('click', async event => this.#zmenStavKorektury(event));
-      this.htmlElement.getElementsByClassName('komentovat')[0].addEventListener('click', _ => this.#comment())
-      this.htmlElement.getElementsByClassName('del')[0].addEventListener('click', _ => this.#delete());
-      const odkaz_editace = this.htmlElement.getElementsByClassName('edit')[0];
-      odkaz_editace.href = odkaz_editace.href.replace("-1", this.id);
-      odkaz_editace.onclick = ev => { if (!confirm("Editace korektury je velmi pokročilá featura umožňující přesouvat korekturu nebo přidávat informované orgy, opravdu chceš pokračovat do adminu?")) ev.preventDefault(); };
-
-      this.htmlElement.addEventListener('mouseover', _ => this.pointer.dataset.highlight = 'true');
-      this.htmlElement.addEventListener('mouseout', _ => this.pointer.dataset.highlight = 'false');
-
-      opravy[this.id] = 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) {
-      {# this.oprava_data = oprava_data; #}
-      this.set_status(oprava_data['status']);
-      this.#tagy.innerHTML = "";
-      this.tagy = new Set();
-      for (const tag of oprava_data["tagy"]) {
-        this.tagy.add(tag["id"]);
-        const span = document.createElement("span");
-        span.innerHTML = tag["nazev"];
-        span.classList.add("korektury-tag");
-        span.style.backgroundColor = tag["barva"];
-        this.#tagy.appendChild(span);
-      }
-      return this;
-    };
-
-    set_status(status) {
-      this.status = status;
-      this.htmlElement.dataset.opravastatus=status;
-      this.pointer.dataset.opravastatus=status;
-    };
-
-    add_komentar_htmlElement(htmlElement) { this.#komentare.appendChild(htmlElement); }
-
-
-
-
-    // hide or show text of correction
-    toggle_visibility() {
-      this.zobrazit = !this.zobrazit;
-      this.htmlElement.dataset.opravazobrazit = String(this.zobrazit);
-    }
-    #toggle_visibility(){
-      this.toggle_visibility();
-      place_comments()
-    }
-
-    // show comment form, when 'comment' button pressed
-    #comment() { commform.show(this.img_id, this.x, this.y, "", this.id); }
-
-    #zmenStavKorektury(event) {
-      const data = new FormData(CSRF_FORM);
-      data.append('id', this.id);
-      data.append('action', event.target.value);
-
-      fetch('{% url "korektury_api_oprava_stav" %}', {method: 'POST', body: data})
-        .then(response => {
-          if (!response.ok) {alert('Něco se nepovedlo:' + response.statusText);}
-          else response.json().then(data => {
-            this.set_status(data['status']);
-            updatuj_pocty_stavu();
-          });
-        })
-        .catch(error => {alert('Něco se nepovedlo:' + error);});
-    }
-
-    #delete() {
-      if (confirm('Opravdu smazat korekturu?')) {
-        const data = new FormData(CSRF_FORM);
-        data.append('oprava_id', this.id);
-        fetch('{% url "korektury_api_oprava_smaz" %}', {method: 'POST', body: data})
-          .then(response => {
-            if (!response.ok) {alert('Něco se nepovedlo:' + response.statusText);}
-            this.#smaz_pouze_na_strance()
-            updatuj_pocty_stavu();
-            updatuj_pocty_zasluh();
-            place_comments();
-          })
-          .catch(error => {alert('Něco se nepovedlo:' + error);});
-      }
-    }
-
-    #smaz_pouze_na_strance() {
-      comments[this.img_id].splice(comments[this.img_id].indexOf(this), 1);
-      delete opravy[this.id];
-      for (const komentar of Object.values(komentare)) if (komentar.oprava === this) komentar.smaz_pouze_na_strance();
-      this.htmlElement.remove();
-      this.pointer.remove();
-    }
-  }
-
-  // Umisťování korektur
-  const W_SKIP = 10;
-  const H_SKIP = 5;
-  const POINTER_MIN_H = 30;
-
-  function place_comments_one_div(img_id, comments)
-  {
-    const img = document.getElementById("img-"+img_id);
-    if( img == null ) return;
-    const comments_sorted = comments.sort((a, b) => 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 htmlElement = oprava.htmlElement;
-      const pointer = oprava.pointer;
-
-      par.appendChild(pointer);
-      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 + H_SKIP); // FIXME nemám páru, proč +H_SKIP funguje, ale opravuje to bug, že nově vytvořené korektury za sebou neměly mezeru
-    }
-
-    if (par.offsetHeight < bott_max) par.style.height = bott_max;
-  }
-
-  function place_comments() {
-    for (let [img_id, opravy] of Object.entries(comments)) {
-      place_comments_one_div(img_id, opravy)
-    }
-  }
-</script>

korektury/templates/korektury/korekturovatko/moduly/schovani_korektur.html

@@ -14,23 +14,23 @@ Zobrazit:
 <hr/>
 
 <script>
-  document.getElementById('k_oprave_checkbox').addEventListener('change', () => toggle_corrections('k_oprave'));
+  document.getElementById('k_oprave_checkbox').addEventListener('change', () => skryj_nebo_zobraz_korektury('k_oprave'));
-  document.getElementById('opraveno_checkbox').addEventListener('change', () => toggle_corrections('opraveno'));
+  document.getElementById('opraveno_checkbox').addEventListener('change', () => skryj_nebo_zobraz_korektury('opraveno'));
-  document.getElementById('neni_chyba_checkbox').addEventListener('change', () => toggle_corrections('neni_chyba'));
+  document.getElementById('neni_chyba_checkbox').addEventListener('change', () => skryj_nebo_zobraz_korektury('neni_chyba'));
-  document.getElementById('k_zaneseni_checkbox').addEventListener('change', () => toggle_corrections('k_zaneseni'));
+  document.getElementById('k_zaneseni_checkbox').addEventListener('change', () => skryj_nebo_zobraz_korektury('k_zaneseni'));
 
   document.getElementById("sbal-korektury").addEventListener("click", () => {
-    for (const oprava of Object.values(opravy))
+    for (const korektura of Object.values(korektury))
-      if (oprava.zobrazit) oprava.toggle_visibility();
+      if (!korektura.sbalena) korektura.sbal_nebo_rozbal();
-    place_comments();
+    umisti_korektury();
   })
   document.getElementById("rozbal-korektury").addEventListener("click", () => {
-    for (const oprava of Object.values(opravy))
+    for (const korektura of Object.values(korektury))
-      if (!oprava.zobrazit) oprava.toggle_visibility();
+      if (korektura.sbalena) korektura.sbal_nebo_rozbal();
-    place_comments();
+    umisti_korektury();
   })
 
-  function toggle_corrections(aclass)
+  function skryj_nebo_zobraz_korektury(aclass)
   {
     const stylesheets = document.styleSheets;
     let ssheet = null;
@@ -45,7 +45,7 @@ Zobrazit:
     }
     for (let i=0; i<ssheet.cssRules.length; i++){
       const rule = ssheet.cssRules[i];
-      if (rule.selectorText === '[data-opravastatus="'+aclass+'"]'){
+      if (rule.selectorText === '[data-stav_korektury="'+aclass+'"]'){
         if (rule.style.display === ""){
           rule.style.display = "none";
         } else {
@@ -53,23 +53,23 @@ Zobrazit:
         }
       }
     }
-    place_comments();
+    umisti_korektury();
   }
 
-  const spany_s_pocty_stavu = {
+  const spany_s_pocty_stavu_korektur = {
     'k_oprave': document.getElementById('k_oprave_pocet'),
     'opraveno': document.getElementById('opraveno_pocet'),
     'neni_chyba': document.getElementById('neni_chyba_pocet'),
     'k_zaneseni': document.getElementById('k_zaneseni_pocet'),
   }
 
-  function updatuj_pocty_stavu() {
+  function aktualizuj_pocty_stavu() {
-    const pocty_stavu = {};
+    const pocty_stavu_korektur = {};
-    for (const stav of Object.keys(spany_s_pocty_stavu)) pocty_stavu[stav] = 0;
+    for (const stav_korektury of Object.keys(spany_s_pocty_stavu_korektur)) pocty_stavu_korektur[stav_korektury] = 0;
-    for (const oprava of Object.values(opravy)) {
+    for (const korektura of Object.values(korektury)) {
-      if (!(oprava.status in pocty_stavu)) pocty_stavu[oprava.status] = 0;
+      if (!(korektura.stav in pocty_stavu_korektur)) pocty_stavu_korektur[korektura.stav] = 0;
-      pocty_stavu[oprava.status] += 1;
+      pocty_stavu_korektur[korektura.stav] += 1;
     }
-    for (let [stav, pocet] of Object.entries(pocty_stavu)) spany_s_pocty_stavu[stav].innerText = pocet;
+    for (let [stav, pocet] of Object.entries(pocty_stavu_korektur)) spany_s_pocty_stavu_korektur[stav].innerText = pocet;
   }
 </script>

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

@@ -15,18 +15,18 @@
 <script>
   // Mapování stránka -> korektury
   /**
-   * @type {Object.<number, Array<Oprava>>}
+   * @type {Object.<number, Array<Korektura>>}
    */
-  const comments = {
+  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 image of document.getElementsByClassName('strana')) {
+  for (const strana_img of document.getElementsByClassName('strana')) {
-    image.addEventListener('click', ev => {
+    strana_img.addEventListener('click', event => {
-      switch (document.body.dataset.status) {
+      switch (document.body.dataset.stav_pdf) {
         case 'zanaseni':
           if (!confirm('Právě jsou zanášeny korektury, opravdu chcete přidat novou?'))
             return;
@@ -38,16 +38,16 @@
       }
 
       let dx, dy;
-      const par = image.parentNode;
+      const strana_div = strana_img.parentNode;
-      if (ev.pageX != null) {
+      if (event.pageX != null) {
-        dx = ev.pageX - par.offsetLeft;
+        dx = event.pageX - strana_div.offsetLeft;
-        dy = ev.pageY - par.offsetTop;
+        dy = event.pageY - strana_div.offsetTop;
       } else { //IE a další
-        dx = ev.offsetX;
+        dx = event.offsetX;
-        dy = ev.offsetY;
+        dy = event.offsetY;
       }
-      const img_id = image.id.substring(4);
+      const img_id = strana_img.id.substring(4);
-      commform.show(img_id, dx, dy, '');
+      korekturovaci_formular.zobraz(img_id, dx, dy, '');
       console.log("Pro přesun korektur: strana = " + img_id + ", x = " + dx + ", y = " + dy);
     });
   }

korektury/templates/korektury/korekturovatko/zmena_stavu_pdf.html

@@ -25,7 +25,7 @@
     )
       .then(response => {
         if (!response.ok) { if (catchError) alert("Něco se nepovedlo:" + response.statusText);}
-        else response.json().then(data => document.body.dataset.status = data["status"]);
+        else response.json().then(data => document.body.dataset.stav_pdf = data["status"]);
       })
       .catch(error => {if (catchError) alert("Něco se nepovedlo:" + error);});
   }