Zobjektizování (v JS) strany
This commit is contained in:
parent
b3ac4c4801
commit
c4679fe261
5 changed files with 95 additions and 84 deletions
korektury/templates/korektury/korekturovatko/moduly
|
|
@ -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 korektura of korektury) {
|
||||
for (const strana of setrizene_strany) {
|
||||
// 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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
img.parentNode.appendChild(korekturovaci_formular.div);
|
||||
strana.htmlElement_div.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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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“)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -13,42 +13,96 @@
|
|||
{% endfor %}
|
||||
|
||||
<script>
|
||||
// Mapování stránka -> korektury
|
||||
/**
|
||||
* @type {Object.<number, Array<Korektura>>}
|
||||
*/
|
||||
const korektury_na_strankach = {
|
||||
{% for s in img_indexes %}
|
||||
{{s}}: []{% if not forloop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
};
|
||||
// Pro umisťování korektur
|
||||
const HORIZONTALNI_MEZERA = 10;
|
||||
const VERTIKALNI_MEZERA = 5;
|
||||
const MINIMALNI_VYSKA_POINTERU = 30;
|
||||
|
||||
// show comment form, when clicked to image
|
||||
for (const strana_img of document.getElementsByClassName('strana')) {
|
||||
strana_img.addEventListener('click', event => {
|
||||
/**
|
||||
* @type {Object.<int, Strana>}
|
||||
*/
|
||||
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?'))
|
||||
return;
|
||||
if (!confirm('Právě jsou zanášeny korektury, opravdu chcete přidat novou?')) return;
|
||||
break;
|
||||
case 'zastarale':
|
||||
if (!confirm('Toto PDF je již zastaralé, opravdu chcete vytvořit korekturu?'))
|
||||
return;
|
||||
if (!confirm('Toto PDF je již zastaralé, opravdu chcete vytvořit korekturu?')) return;
|
||||
break;
|
||||
}
|
||||
|
||||
let dx, dy;
|
||||
const strana_div = strana_img.parentNode;
|
||||
if (event.pageX != null) {
|
||||
dx = event.pageX - strana_div.offsetLeft;
|
||||
dy = event.pageY - strana_div.offsetTop;
|
||||
dx = event.pageX - this.htmlElement_div.offsetLeft;
|
||||
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(img_id, dx, dy, '');
|
||||
console.log("Pro přesun korektur: strana = " + img_id + ", x = " + dx + ", y = " + dy);
|
||||
});
|
||||
korekturovaci_formular.zobraz(this, dx, dy, '');
|
||||
console.log("Pro přesun korektur: strana = " + this.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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue