Javascript könyvtárak hozzáadása (haladó) 
Previous Topic  Next Topic 

Elérkezhet az idő, amikor saját Javascript könyvtárakat szeretne hozzáilleszteni az eBookhoz, hogy megadott funkciót hajtson végre, mint például matematikai képleketet létrehozni (pl. KaTeX), vagy tréfás elemírást akar megjeleníteni (pl.  Tippy). Mivel a Kotobee Authorban átlátható, hogy milyen belső fájlok vannak az eBook projektben, és a Fájlkezelővel szükség esetén akár JS könyvtárakat is importálhatunk. Ha már megpróbálta, és követte a könyvtárhoz tartozó utasításokat, lehet, hogy nem működött elsőre. Ez azért lehet, mert előtte meg kell ismerni, hogy a Kotobee Reader hogyan működik, és hogy hogyan kezeli a külső Javascript könyvtárakat. Van néhány trükk, amivel tisztában kell lenni.



A Kotobee kódfeldolgozása (parsing)


Amikor egy eBookot megnyitunk, a Kotobee olvasója elemzi a tartalmát, és a szavakat saját HTML tartomány címkék (span tag-ek) közé illeszti. Ez szó szintű szövegkijelölés miatt szükséges. Ha speciális kódokat ír egy olyan címkébe, amelyet egy könyvtár hozott létre (jelen példában a KaTeX egy egyenletet), később nem ismeri fel. Ez azért van, mert közben kódfeldolgozás történt, és több darabra osztotta szét (feltételezve, hogy szóköz is szerepelt a szövegben) az olvasó.


A megoldás, hogy egy "parsed" osztályt helyezünk el abba a címkébe, amelyiket nem kell feldolgozni. Vegyünk egy KaTeX egyenletet példának:


(HTML)

<p>\[\int_1^\pi \sin x \mathrm{d} x\]</p>



Az alap esetben a következőképpen dolgozza fel az olvasó:


(HTML)

<p>

  <span>\[\int_1^\pi </span>

  <span>\sin </span>

  <span>x </span>

  <span>\mathrm{d} </span>

  <span>x\]</span>

</p>


Ahhoz, hogy ez ne következzen be, és a teljes tartalmat egyetlen darabnak vegye, egyszerűen egy "parsed" osztályt kell beiktatni:

HTML


<p class="parsed">\[\int_1^\pi \sin x \mathrm{d} x\]</p>




Várakozás a DOM-ra


A Javascript könyvtárak szabványos kezelésénél a HTML-t le kell képezni a DOM-ban (Document Object Model/Dokumentum objektum modell), azaz a DOM betöltésére kell várni, hogy rendelkezésre álljon. Ezt több módon lehet elérni:



(HTML)

document.addEventListener("DOMContentLoaded", ready);


vagy

(HTML)

window.addEventListener("onload", ready);



Bár ez a helyes mód arra, hogy inicializáljon egy Javascript végrehajtását az oldalon, problémát okoz a Kotobee-ban. Tulajdonképpen a DOM a Kotobee-ban csak egyszer kerül betöltésre az egész alkalmazáshoz, így ezeket az eseményeket csak egyszer indítja el. Amikor egy fejezet betöltésre kerül, amelyik ezeken a DOM-kész eseményeken alapulnak, soha sem indulnak el, azaz az kapcsolódó Javascript soha sem kerül végrehajtásra. A megoldás, hogy a függvények közvetlenül kerüljenek végrehajtásra, nem pedig eseményfigyelőbe ágyazva.


A KaTeX esetében a következő Javascript kód


(HTML)

<script>

document.addEventListener("DOMContentLoaded", function() {

        renderMathInElement(document.body,

          {

              delimiters: [

                  {left: "$", right: "$", display: true},

                  {left: "\\[", right: "\\]", display: true},

                  {left: "$", right: "$", display: false},

                  {left: "\\(", right: "\\)", display: false}

              ]

          }                               

); 

</script>



helyett legyen:


(HTML)

<script>

        renderMathInElement(document.body,

          {

              delimiters: [

                  {left: "$", right: "$", display: true},

                  {left: "\\[", right: "\\]", display: true},

                  {left: "$", right: "$", display: false},

                  {left: "\\(", right: "\\)", display: false}

              ]

          }                               

</script>



Ha az eBookot különböző olvasók (közöttük a Kotobee Reader) használatára tervezi, egy egyszerű ellenőrzéssel megállapíthatja, hogy fut-e Kotobee Readeren, a következő Javascripttel:


(Js)

if(typeof isKotobee != "undefined")


A közeljövőben a Kotobee fejlesztői egy jobb megoldást fognak beleépíteni az Authorba, hogy automatikusan átugorják a DOM-kész eseményeket anélkül, hogy egyedi kódot kéne megadnia.