mam/mamweb
13
1
Fork 0
Code Issues Pull requests 12 Projects Wiki Activity Actions

Zobjektizování (v JS) strany

Browse source
This commit is contained in:
Jonas Havelka 2025-03-05 17:51:17 +01:00
parent b3ac4c4801
commit c4679fe261
5 changed files with 95 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
korektury/templates/korektury/korekturovatko/moduly/dalsi_korektura.html
View file

@ -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) {

13
korektury/templates/korektury/korekturovatko/moduly/edit_komentar.html
View file

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

2
korektury/templates/korektury/korekturovatko/moduly/komentar.html
View file

@ -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“)

59
korektury/templates/korektury/korekturovatko/moduly/korektura.html
View file

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

100
korektury/templates/korektury/korekturovatko/moduly/stranky_pdfka.html
View file

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