JavaScript pro diskusi • 2009

Reaguji na Str4wberryho:
„Dobrá, máš to mít.“
To byl fofr. V úplně prvním komentáři na stránce teď ale mám: Poznačil bys prosím ty komentáře nějak unikátněji, abych z nich poznal, že jsou opravdu pro mě? Třeba:
„nebo to mám hodit i k sobě?“
Klidně jen k sobě. Na FTP sandboxu nemám přístup, takže přímo tady si s tím pohrát nemůžu.

„by se možná hodila funkce, která by uměla zobrazit samostatný příspěvek“
K čemu? Myslíš na ukázání náhledu?

„Bylo by možné vyrobit její zvětšování, a to ruční nebo podle napsaného textu“
Už jsem o tom přemýšlel, zatím odkládám. Nestává se často, že upravený příspěvek několikanásobně vyroste.

„či jí alespoň dát min-height?“
Nějaká minimální výška tam už je.

Další novinky v djpw.js:

36) Chytřejší vkládání odkazu (Ctrl+K):
  a) Je-li kurzor uvnitř odkazu, obrázku či adresy, označí se celý příslušný kus textu.
  b) Je-li označený právě jeden odkaz, funkce ho zruší a ponechá jen text.
  c) Je-li označený právě jeden obrázek, funkce z něj udělá odkaz na uvedený obrázek.
  d) Není-li v označeném textu žádná adresa ani odkaz, funkce vyrobí obecný odkaz vedoucí na example.cz.
  e) Je-li v označeném textu alespoň jeden odkaz, funkce v něm všechny odkazy zruší a adresu/adresy doplní na konec.
  f) Je-li v označeném textu právě jedna adresa, funkce vyrobí ze zbývajícího textu odkaz na dotyčnou adresu.
  g) Je-li v označeném textu více adres, funkce udělá postupně odkazy z ostatních slov ve zbývajícím textu.


Reaguji na Str4wberryho:
„Hotovo.“
Nevymyslel jsem ty HTML komentáře zrovna moudře, protože regulární výraz hledající <!--[něco]--> najde i <!--[[něco]]-->.

Už mi to bezznovunačítací upravování asi nějak funguje. Odeslání se provádí JavaScriptem a HTML kód nového příspěvku se plácne na místo starého. Nastavení změněného titulku jsem zatím neřešil, ale to bude snadné. Největší problém teď je, že když při odesílání skriptem sestavuji celý požadavek sám, musím provést podobné kouzlo, jako provádějí prohlížeče. To není zrovna triviální, protože interpret JavaScriptu přemýšlí výhradně v Unicodu. Neřekne mi, zda ten či onen znak pasuje do ISO-8859-2 a zda jej je či není potřeba zapsat entitou. Nyní převádím celý rozsah znaků [\u0080-\uFFFF] na entity, což není optimální, protože se entity dělají i z českých znaků s diakritikou. Výsledek sice vypadá v prohlížečích správně, ale slova s diakritikou míjí filtr sprostých slov i interní vyhledávání. Dokázal bych to vyřešit, ale než se pohnu dál, potřeboval bych znát tvé rozhodnutí ohledně převodu formulářových vstupů do UTF-8.

„To s těmi komentáři se mi moc nelíbí“
Klidně vymysli lepší způsob. Můžu ti poslat POSTem navíc jednu vstupní proměnnou, která ti řekne „dotaz posílá JS“, pak může být formát odpovědi jakýkoliv. Kromě HTML kódů příspěvku a titulku bys mi asi měl posílat i nějakou stavovou hlášku, pro případ, že úprava selže.

Reaguji na Str4wberryho:
Explorer nepošle při accept-charset="utf-8" vstupy v UTF-8, pokud v nich nejsou znaky nezapsatelné v kódování stránky. Takže bude nutné přidat pojistku: (A možná pak i testovat, jak se pojistka poslala, pro případ, že by některý z prohlížečů posílal stejně ISO-8859-2.)

Reaguji na Str4wberryho:
„Někdy to zkusím s tím accept-charset="utf-8".“
Už jsem to vyřešil i s ISO-8859-2. Nebylo to tak těžké, jak se původně zdálo, jako převodní tabulka rizikových znaků nakonec postačil jeden řetězec.
Úprava transplantace je připravená k nasazení do sandboxu.

Reaguji na Str4wberryho:
Ad 1) Kdy to nefunguje? Zkusil jsem teď něco změnit, možná to chybu odstranilo.
Ad 2) Prázdný titulek se nastaví, protože mi posíláš „<!--nadpis[]-->“. Teď už i testuji, jestli je neprázdný, takže to ze své strany měnit nemusíš.

„Ale hodila by se nějaká informace, že se příspěvek upravil.“
Přidal jsem alert. Není moc otravný?

„Potom bych měl ještě připomínku k moderátorským checkboxům, které mají někdy tendenci opustit své místo“
V Opeře nepochopitelně létají, nevím, jak je usměrnit. V Exploreru způsobují v zamčeném vlákně mizení textů a podivné přeskupení odkazů napravo.

Další novinky v djpw.js:

37) Při listování ve vícestránkových vláknech přežívá text rozepsaného příspěvku. Zejména při odpovídání v těchto vývojových vláknech jsem bádal nad tím, jak toho dosáhnout. Vymýšlel jsem nejprve všelijaké šílenosti s <iframe>m, později jsem se snažil o inteligentní aktualizaci částí DOMu s pomocí XMLHttpRequestu. Nakonec jsem si vzpomněl na projev problému s chybějícím refererem a sáhl jsem po obyčejném odeslání formuláře.

38) Stisk klávesy R vyvolá znovunačtení zobrazeného vlákna, opět při zachování rozepsaného textu. Velmi užitečné, pokud se chce diskutér rychle podívat, co se odehrálo během déle trvajícího psaní odpovědi.

Reaguji na Str4wberryho:
Pokud si myslíš, že to server utáhne, tak pravidelnou kontrolu udělat můžeme, ale…

„tak by je JS rovnou zobrazil“
… bez automatického zobrazování. Právě nad tím, jak v JS upravit HTML kód celé tabulky s příspěvky, jsem už dost dlouho přemýšlel právě v souvislosti s těmi posledními dvěma úpravami. Žádná pohodlná cesta neexistuje, je tu moc možností. Musel bych pak také znovu inicializovat část ostatních skriptů, aby všechno šlapalo.

Můžeme návštěvníkovi říkat něco jako „od doby načtení stránky do teď přispěli k tématu Mistr a Str4wberry, chceš-li to vidět, zmáčkni si R“ :-)

Reaguji na Alpharda:
Vymyslím nějaký zajímavější efekt.
To žluté podbarvení celého příspěvku při přechodu na záložku se mi mimochodem nelíbí a chystám se ho přestylovat.


Reaguji na Str4wberryho:
„ale nezachovává se mi titulek“
Všiml jsem si. JavaScript zařizuje, že se posílá, ale PHP ho neprotlačí na očekávané místo.

„bych vygeneroval novou tabulku s případnými novými příspěvky, kterou by JS připlácnul pod tu současnou“
Kdyby se jen jednoduše připlácla, „Změnit“ by vedlo na jinou stránku, chyběl by odkaz „Citovat“, kliknutí na jméno by neudělalo nic, <pre> by nebylo obarvené JUSHem, nová jména přispěvatelů by se neprotlačila do klávesové mapy, odkazy s kotvami by se nechovaly dle očekávání…
Vše zmíněné by šlo nějak ošetřit, ale mnohem snazší bude vyzvat diskutéra k vědomému vyvolání bezpečného znovunačtení — nějakým neobtěžujícím způsobem. Tobě by se líbilo, kdyby se ti během psaní příspěvku samovolně přidávaly (třeba i dlouhé) příspěvky nad formulář? Musel bych i srovnávat pozici posuvníku, aby to necukalo s formulářem.

Támhle, jak je stránkování „<< . 1 . 2 . 3 . 4 .“, máme napravo nevyužité místo, kde se může ukazovat krátký text o změnách, které nastaly od okamžiku načtení, a vedle něj rovnou čudlík pro bezpečné znovunačtení. Co ty na to?
(Možná bychom to ale mohli nechat až na příští vlnu úprav.)


Mohl bys upravit onclick tlačítka na přidání odkazu, aby místo současného „insertTag('url')“ volal chytřejší „insertLink()“?
Přidal bys prosím k odstavci s upozorněním na diakritiku a interpunkci nějaké ID?

Reaguji na Str4wberryho:
„Při tom bezpečném znovunačtení by bylo vhodné odlišit nové příspěvky.“
Může být namířené na příslušnou kotvu, stejně jako stránkování vede na konkrétní adresy.

„stránku s výpisem nově přispívajících vyrobím“
Možná by bylo dobré, kdyby to nebyl jen výpis jmen, ale rovnou HTML kód celé formulace, která se zobrazí. I s odkazem na znovunačtení. JavaScript by akorát vlepil na místo celé innerHTML a ošetřil by všechny odkazy uvnitř. Krom zpráv o nových příspěvcích by se tam mohlo ukazovat i upozornění, že je už zamčeno (v takovém případě bez odkazu).

Teď jsem si uvědomil, že na jednostránkových vláknech nepůjde využít prostor vedle odkazů na jednotlivé stránky, když tam ty odkazy nejsou. Využiju tedy prostor vedle odstavce s „Přihlášen/a“.

Jak bude ten tvůj skript poznávat, které příspěvky jsou nové? Mohl bys mi do volání funkce init přidat jako argument čas posledního příspěvku ve vlákně. Já bych ti ho pak předával nazpět (spolu s číslem vlákna) a také bych z něj určoval, jak často se mám dívat po změnách (u týden mrtvého vlákna nemá smysl bombardovat server každou minutu).

„Tlačítko odkaz volá chytřejší funkci, odstavec má id=upozorneni“
Děkuji. S odstavcem si ještě asi budu hrát.

„Lze ji tam nějak jednoduše doplnit v JS, nebo to mám upravit v HTML šabloně?“
V šabloně to je zřejmě jednodušší.

Reaguji na Str4wberryho:
„Pošli mi časem, prosím, kód toho odkazu pro znovunačtení.“
Bude to úplně obyčejný odkaz (vedoucí na kotvu). Skriptem mu doplním onclick, skoro stejný, jako je na odkazech vedoucích na předchozí stránky.

Takový odkaz může mimochodem vést v podstatě kamkoliv. Moje funkce je triviální — stornuje výchozí akci při kliknutí, vezme si jeho href, vyrobí nový formulář: … a ten odešle. O to, že se odpostovaný „poslText“ doplní na správné místo, se už stará PHP. Žádná chytřejší magie v tom není. Kdybych formulář namířil do úplně jiného vlákna, přenese se rozepsaný text také.

„Nebo můžem využít prostor ve spodním drobečku.“
Dobrý nápad. Mohl bys spodnímu <div class="breadcrumb"> přidat nějaké ID?

„Argument půjde předat třeba takto?“
Ano.

„Akorát neznám zkratku pro obrázek.“
Žádná není. Myslím, že není nutná, obrázky sem moc často nevkládáme. I ta zkratka Ctrl+H pro vodorovnou čáru je možná lehce nadbytečná.
Zjistil jsem, že stisk Ctrl+P vyvolá v Exploreru dialog pro tisk. Můžeme buď najít pro [pre] jiné písmenko, nebo doporučovat uživatelům Ctrl+Shift+P.

Reaguji na Str4wberryho:
„Hezké by bylo Ctrl + K“
Domnívám se, že to je docela ustálená zkratka pro výrobu/zrušení odkazu.

„Možná Ctrl + U.“
Pod touhle zkratkou by zase někdo mohl očekávat podtržení.

Reaguji na Str4wberryho:
„je to v pořádku?“
Je. Možná by to „načíst“ mohl být odkaz, zabral by méně místa a šlo by si ho rozkliknout do nového okna/tabu. Mohl by mířit na #kotvu prvního nového příspěvku.

Změny v djpw.js:

39) Skript se průběžně serverů ptá, zda se v nalistovaném vlákně něco změnilo, a vypisuje odpověď.

ad 9) Pokud kotva vede na buňku tabulky, zvýrazňuje se celý řádek.


Reaguji na Str4wberryho:
Ten odkaz nevypadá, že by někam smysluplně vedl (href je prázdný). Stačil by href="#číslo".
ID ke spodnímu drobečku jsem chtěl dát zejména proto, abych si ten element pro text doplňoval sám dynamicky, ale to už je fuk.

Reaguji na Str4wberryho:
„Ptá se i při odeslání zprávy?“
Ne. Měl by? Možná jsem to nenapsal moc jasně, ale úprava 39 je to, o čem se posledních pár příspěvků bavíme :-)

„Nebude pro mě (a možná i pro Tebe) jednodušší, když tam to číslo přidáš v JS z actionu formuláře?“
Na „action“ formuláře se skriptem nedostanu kvůli konfliktu názvů (máme tu <input name="action">).
Nemůžeš snadno odkázat na #post-640426, tedy na číslo příspěvku v databázi?

„To id="breadcrumb2", které jsem přidal včera v 15.44, nestačí?“
Myslel jsem to jinak — není potřeba. Plánoval jsem, že si ten „<small id='newposters'></small>“ vyrobím skriptem uvnitř spodních drobečků, kterým dáš ID. Ale už jsi ho vyrobil sám, takže to ID k tomu nepotřebuji. (Nicméně neruš ho.)

Mimochodem, když necháváš element floatovat doprava, tak by text, který má zůstat vlevo, měl buď být uvnitř něčeho, co floatuje doleva, nebo být až za tím elementem floatovaným doprava. Jinak vznikne v Exploreru a Mozille nežádoucí odřádkování, což je případ „#newposters“ i „.nposts“.