Kotobee

En algún momento, puede agregar sus propias bibliotecas Javascript para realizar ciertas funciones, como renderizar fórmulas matemáticas (por ejemplo, KaTeX) o mostrar una sugerencia de fantasía (por ejemplo Tippy). Puesto que Kotobee Author le brinda acceso transparente a los archivos internos del proyecto de eBook (a través del Administrador de archivos), puede importar cualquier biblioteca JS que necesite. Si ya ha intentado y seguido las instrucciones correspondientes de la biblioteca, es posible que no haya funcionado desde la primera vez. Eso es porque es importante entender cómo funciona el Kotobee Reader, y cómo se trata con tales bibliotecas Javascript externas. Hay algunas gotchas que usted necesita ser muy bien consciente de.

El análisis de Kotobee

Cuando se abre cualquier eBook, el lector de Kotobee disecciona el contenido y divide cada palabra en su propia etiqueta de span HTML. Esto se hace con el fin de proporcionar la selección de texto en el nivel de palabra. Si está ingresando algún código especial dentro de una etiqueta que debe renderizar una biblioteca (como en el caso de KaTeX para representar una fórmula), cuando la biblioteca encuentre el texto, no lo entenderá. Esto es porque ya habrá sido analizado y dividido en partes separadas (suponiendo que haya espacios) por el lector.

La solución para agregar la clase "analizada" a una etiqueta que no necesita ser analizada. Como un ejemplo con una fórmula KaTeX, asume el siguiente código:

HTML

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

El comportamiento predeterminado es que se analizará en lo siguiente:

HTML

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

Para evitar esto y tener todo el contenido unido como una sola pieza, simplemente agregue la clase "analizada" de la siguiente manera:

HTML

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

Esperando el DOM

La forma estándar de tratar con las bibliotecas Javascript que requieren renderizar HTML en el DOM, es esperar a que el DOM se cargue y esté listo. Esto se hace de varias maneras, tales como:

HTML

document.addEventListener("DOMContentLoaded", ready);

o

HTML

window.addEventListener("onload", ready);

Aunque esta es la forma correcta de iniciar la ejecución de cualquier Javascript en su página, esto provoca un problema en Kotobee. Básicamente, el DOM en Kotobee se carga una sola vez para toda la aplicación. Por lo tanto, estos eventos se activarán sólo una vez. Siempre que se cargue un capítulo que dependa de estos eventos de DOM, nunca se activarán. Por lo tanto, el Javascript de enlace nunca se ejecutará. La manera alrededor de esto es ejecutar funciones directamente sin envolverlas en tales oyentes.

En el caso de KaTeX, en lugar de tener el código Javascript como tal:

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>

Se convertirá:

HTML

<script>
        renderMathInElement(document.body,
          {
              delimiters: [
                  {left: "$", right: "$", display: true},
                  {left: "\\[", right: "\\]", display: true},
                  {left: "$", right: "$", display: false},
                  {left: "\\(", right: "\\)", display: false}
              ]
          }                               
</script>

Si usted está planeando usar el ebook en varios lectores incluyendo el lector de Kotobee, entonces usted puede hacer una comprobación simple para descubrir si se está funcionando en el lector de Kotobee con el Javascript siguiente:

Js

if(typeof isKotobee != "undefined")

En un futuro próximo, vamos a aplicar maneras más inteligentes para omitir automáticamente los eventos de DOM, sin tener que introducir ningún código personalizado.