bookreader

Otro código fuente

v5.0.0-83

Descargar

Lector de libros de archivos de Internet

Captura de pantalla de la interfaz BookReader v5

Internet Archive BookReader se utiliza para ver libros de Internet Archive en línea y también se puede utilizar para ver otros libros.

Vea ejemplos en vivo:

En la página de detalles: https://archive.org/details/birdbookillustra00reedrich
Ventana completa: https://archive.org/details/birdbookillustra00reedrich?view=theater
URL incorporada para iFrames: https://archive.org/embed/birdbookillustra00reedrich

Población

Consulte el directorio BookReaderDemo . Estos se pueden probar compilando los archivos fuente (asegúrese de que Node.js esté instalado):

 compilación de ejecución npm

e iniciando un servidor web simple en el directorio raíz:

npm run serve

Y luego abra http://localhost:8000/BookReaderDemo/demo-simple.html .

Uso

Aquí hay un breve ejemplo.

 // Crea el objeto BookReadervar opciones = {
  datos: [[ { ancho: 800, alto: 1200,uri: '//archive.org/download/BookReader/img/page001.jpg' },],[ { ancho: 800, alto: 1200,uri: '/ /archive.org/download/BookReader/img/page002.jpg' }, {ancho: 800, alto: 1200,uri: '//archive.org/download/BookReader/img/page003.jpg' },],[ { ancho: 800, alto: 1200,uri: '//archive.org/download/BookReader/img/page004.jpg' }, {ancho: 800, alto: 1200,uri: '//archive.org/download/BookReader/img/page005.jpg' },]
  ],

  título del libro: 'Presentación simple de BookReader',

  // la miniatura es opcional, pero se usa en el cuadro de diálogo de información
  miniatura: '//archive.org/download/BookReader/img/page014.jpg',

  // Los metadatos son opcionales, pero se usan en el cuadro de diálogo de información.
  metadatos: [{label: 'Título', valor: 'Presentación de Open Library BookReader'},{label: 'Autor', valor: 'Internet Archive'},{label: 'Información de demostración', valor: 'Esta demostración muestra cómo uno podría usar BookReader con su propio contenido.'},
  ],

  ui: 'full', // incrustar, full (responsive)};var br = new BookReader(options);// ¡Vamos!br.init();

Descripción general de la arquitectura

A partir de la versión 5, BookReader introduce una arquitectura híbrida que fusiona el código central escrito en jQuery para acercarlo a su evolución como componente web. A medida que avanzamos hacia el futuro de BookReader como componente web, estamos adoptando un enfoque basado en eventos para conectar los dos.

Acercarse:

Impulsado por eventos

cambios en la interfaz de usuario
Devoluciones de API
Eventos principales src/BookReader/events.js
API de búsqueda src/BookReader/events.js
El código central de BookReader (BR) emite eventos personalizados, informando las acciones que realiza:
BookNavigator, el controlador de componentes web de BR, escucha y reacciona a estos eventos para completar los paneles del menú lateral.

Controle BR desde el exterior mediante el uso de métodos públicos

A medida que sigamos desacoplando la interfaz de usuario de la lógica de dibujo/cálculo, estos métodos lógicos serán más fáciles de detectar, plantear como método público y crear pruebas unitarias para ellos.
Cuando BookNavigator reacciona a los eventos de BR, BookNavigator puede controlar directamente el núcleo de BR mediante funciones públicas.

Paneles de menú: Componentes web a través de LitElement

La navegación lateral de BookReader funciona con componentes web con sabor a LitElement.

Núcleo: jQuery

La funcionalidad principal de BookReader está en jQuery. Esto incluye:

dibujar y cambiar el tamaño del libro y los distintos modos (1 en 1, 2 páginas, vista de galería)
la navegación horizontal
servicio API de búsqueda
complementos

Un vistazo a cómo utilizar/ampliar la funcionalidad principal:

Propiedades

TODO (por ahora ver src/BookReader/options.js)

Complementos

plugin.autoplay.js: modo de reproducción automática. Voltea las páginas a intervalos establecidos.
plugin.chapters.js - renderizar marcadores de capítulos
plugin.search.js: agrega interfaz de usuario de búsqueda y devoluciones de llamada
plugin.tts.js: agregue interfaz de usuario tts (lectura en voz alta), biblioteca de sonidos y devoluciones de llamadas
plugin.url.js: actualiza automáticamente la URL del navegador
plugin.resume.js: utiliza cookies para recordar la página actual
plugin.vendor-fullscreen.js: reemplaza el modo de pantalla completa con el modo de pantalla completa nativo del proveedor
consulte el directorio de complementos para ver los archivos de complementos actuales
Se utiliza un sistema de complementos básico. Vea los ejemplos en el directorio de complementos. La idea general es que son mixins que aumentan el prototipo de BookReader. Consulte el directorio de complementos para ver todos los complementos incluidos, pero aquí hay algunos ejemplos:

Incrustar BookReader en un iFrame

BookReader se puede incrustar dentro de un <iframe> . Si utiliza el complemento IFrame dentro de <iframe> , el lector enviará notificaciones sobre cambios en el estado del lector a través de window.postMessage() . La ventana principal puede enviar sus propios mensajes (también a través de window.postMessage() ) y el complemento IFrame se encargará de actualizar el lector para que coincida.

Eventos de mensajes

Cambio de fragmento

El mensaje de cambio de fragmento se envía a la ventana principal cuando el BookReader integrado se mueve entre páginas/modos. Cuando el <iframe> recibe este mensaje, pasa a la página/modo especificado. El "fragmento" tiene el formato de acuerdo con la especificación de URL de BookReader.

 { "tipo": "bookReaderFragmentChange", "fragmento": "página/n1/modo/2up"}

Desarrollo

(¿actualizaciones?)

El JavaScript fuente está escrito en ES6 (ubicado en el directorio src/js ) y en ES5 (ubicado en BookReader ). npm run serve-dev inicia un servidor de desarrollo de recarga automática, que compila js/css que se ha editado en localhost:8000 .

Hasta el próximo aumento de versión importante, tenemos que almacenar los archivos de compilación dentro del repositorio para mantener la compatibilidad con versiones anteriores. NO incluya estos archivos en su PR. No se debe confirmar nada en el directorio BookReader/ .

Desarrollando iconos

Para ver los cambios del paquete de íconos locales en Bookreader, deberá instalar core-js en el paquete de íconos y vincularlo a Bookreader.

Usemos icon-share como ejemplo.

Confirme que su paquete de íconos esté funcionando correctamente en la demostración de iaux-icons
Navegue hasta su paquete de iconos ( iaux-icons/packages/icon-share ) y ejecute el comando: npm install core-js

No debería necesitar realizar ninguno de estos cambios de core-js

Desde el directorio de su paquete de iconos, ejecute el comando: npm link

Puede usar el comando npm ls -g para confirmar que su paquete local ahora aparece en el registro.

Navegue hasta /bookreader y ejecute el comando: npm link @internetarchive/icon-share

Puede usar el comando npm ls |grep icon-share para confirmar que icon-share ahora es un enlace a su directorio local

Ahora puede iniciar un servidor local para ver los cambios ejecutando el comando: npm run serve-dev

Lanzamientos

Para modificar la versión del repositorio y preparar un lanzamiento, ejecute npm version major|minor|patch (siguiendo semver), luego (algo así como) git push origin HEAD --tags . Actualizará automáticamente el número de versión donde aparece, creará los archivos y le pedirá que actualice CHANGELOG.

Lanzamos BookReader en el repositorio como etiquetas y también como módulo de nodo @internetarchive/bookreader

Pruebas

Nos gustaría alcanzar una cobertura de prueba del 100% y estamos siguiendo nuestro progreso en este proyecto: BookReader Fidelity

Pruebas de extremo a extremo

También tenemos pruebas de extremo a extremo usando Testcafe. Escribimos pruebas para el repositorio en sí y también para nuestro uso en archive.org. Puedes leer sobre ellos aquí. Son relativamente fáciles de hacer y una forma fantástica de conocer las maravillas de BookReader. Consulte el tablero del proyecto para ver si hay tickets abiertos en los que trabajar. Y si no ve una prueba para algo que detectó, no dude en plantear un problema.

Para ejecutar todas las pruebas locales de extremo a extremo, ejecute el comando: npm run test:e2e

Para mantener el servidor de prueba de un extremo a otro durante el desarrollo, ejecute el comando: npm run test:e2e:dev

Pruebas unitarias

Tenemos pruebas unitarias y usamos Jest para ejecutarlas. Para las burlas, utilizamos el mecanismo de burla interno de Jest y Sinon para establecer espías.

Para ejecutar todas las pruebas de unidades locales, ejecute el comando: npm run test

Formas de contribuir

Siempre podemos utilizar un BookReader de construcción manual. Consulte los números y vea lo que le interesa. Si tiene una idea para mejorar, abra un problema.

Más información

Documentación del desarrollador: https://openlibrary.org/dev/docs/bookreader

Código fuente alojado: https://github.com/internetarchive/bookreader

IIIF (http://iiif.io) Consulte BookReaderDemo/demo-iiif.html para ver un ejemplo de cómo cargar un manifiesto IIIF en BookReader.

Dispositivos de destino

Tenga en cuenta que BookReader es una parte fundamental de la misión de Archive.org de acceso universal a todo el conocimiento. Por lo tanto, se debe tener cuidado de admitir navegadores antiguos. Aún debería funcionar y poder utilizarse en dispositivos antiguos.