bookreader

Outro código-fonte

v5.0.0-83

Baixar

Leitor de livros de arquivo da Internet

Captura de tela da interface do BookReader v5

O Internet Archive BookReader é usado para visualizar livros do Internet Archive online e também pode ser usado para visualizar outros livros.

Veja exemplos ao vivo:

Na página de detalhes: https://archive.org/details/birdbookillustra00reedrich
Janela completa: https://archive.org/details/birdbookillustra00reedrich?view=theater
URL incorporado para iFrames: https://archive.org/embed/birdbookillustra00reedrich

Demonstrações

Consulte o diretório BookReaderDemo . Eles podem ser testados criando os arquivos de origem (certifique-se de que o Node.js esteja instalado):

 npm executar compilação

e iniciando um servidor web simples no diretório raiz:

npm run serve

E então abra http://localhost:8000/BookReaderDemo/demo-simple.html .

Uso

Aqui está um pequeno exemplo.

 // Cria o objectvar do BookReader options = {
  dados: [[ { largura: 800, altura: 1200,uri: '//archive.org/download/BookReader/img/page001.jpg' },],[ { largura: 800, altura: 1200,uri: '/ /archive.org/download/BookReader/img/page002.jpg' }, { largura: 800, altura: 1200,uri: '//archive.org/download/BookReader/img/page003.jpg' },],[ { largura: 800, altura: 1200,uri: '//archive.org/download/BookReader/img/page004.jpg' }, {largura: 800, altura: 1200,uri: '//archive.org/download/BookReader/img/page005.jpg' },]
  ],

  bookTitle: 'Apresentação Simples do BookReader',

  //a miniatura é opcional, mas é usada na caixa de diálogo de informações
  miniatura: '//archive.org/download/BookReader/img/page014.jpg',

  // Os metadados são opcionais, mas são usados na caixa de diálogo de informações
  metadados: [{label: 'Title', value: 'Open Library BookReader Presentation'},{label: 'Author', value: 'Internet Archive'},{label: 'Demo Info', value: 'Esta demonstração mostra como pode-se usar o BookReader com seu próprio conteúdo.'},
  ],

  ui: 'full', // incorporar, full (responsivo)};var br = new BookReader(options);// Vamos lá!br.init();

Visão geral da arquitetura

A partir da v5, o BookReader introduz uma arquitetura híbrida que mescla o código principal escrito em jQuery mais próximo de sua evolução como um componente web. À medida que avançamos em direção ao futuro do BookReader como um componente web, estamos adotando uma abordagem orientada a eventos para conectar os dois.

Abordagem:

Orientado a eventos

Mudanças na IU
Retornos de API
Eventos principais src/BookReader/events.js
API de pesquisa src/BookReader/events.js
O código principal do BookReader (BR) emite eventos personalizados, relatando as ações que ele executa:
BookNavigator, controlador de componentes web do BR, escuta e reage a esses eventos para preencher os painéis do menu lateral

Controle o BR de fora usando métodos públicos

À medida que continuamos a dissociar a UI da lógica de desenho/cálculo, esses métodos lógicos se tornarão mais fáceis de detectar, criar como um método público e criar testes de unidade para eles.
Quando o BookNavigator reage aos eventos do BR, o BookNavigator pode controlar diretamente o núcleo do BR usando funções públicas.

Painéis de menu: componentes da Web via LitElement

A navegação lateral do BookReader é alimentada por componentes da web com sabor LitElement.

Núcleo: jQuery

A principal funcionalidade do BookReader está em jQuery. Isso inclui:

desenhar e redimensionar o livro e os vários modos (1up, 2 páginas espelhadas, visualização de galeria)
a navegação horizontal
serviço de API de pesquisa
plug-ins

Uma olhada em como usar/estender a funcionalidade principal:

Propriedades

TODO (por enquanto, consulte src/BookReader/options.js)

Plug-ins

plugin.autoplay.js - modo de reprodução automática. Vira as páginas em intervalos definidos.
plugin.chapters.js - renderiza marcadores de capítulo
plugin.search.js - adicione interface de pesquisa e retornos de chamada
plugin.tts.js - adicione tts (leia em voz alta) interface do usuário, biblioteca de sons e retornos de chamada
plugin.url.js – atualiza automaticamente a URL do navegador
plugin.resume.js – usa cookies para lembrar a página atual
plugin.vendor-fullscreen.js - substitui o modo de tela cheia pela tela cheia nativa do fornecedor
veja o diretório do plugin para os arquivos atuais do plugin
Um sistema básico de plugins é usado. Veja os exemplos no diretório de plugins. A ideia geral é que sejam mixins que aumentem o protótipo BookReader. Veja o diretório de plugins para todos os plugins incluídos, mas aqui estão alguns exemplos:

Incorporando BookReader em um iFrame

BookReader pode ser incorporado em um <iframe> . Se você usar o Plugin IFrame dentro do <iframe> , o leitor enviará notificações sobre mudanças no estado do leitor via window.postMessage() . A janela pai pode enviar mensagens próprias (também via window.postMessage() ) e o plug-in IFrame cuidará da atualização do leitor para corresponder.

Eventos de mensagens

Alteração de fragmento

A mensagem Fragment Change é enviada para a janela pai quando o BookReader incorporado se move entre páginas/modos. Quando o <iframe> recebe esta mensagem, ele passa para a página/modo especificado. O “fragmento” é formatado de acordo com a especificação de URL do BookReader.

 { "type": "bookReaderFragmentChange", "fragmento": "página/n1/mode/2up"}

Desenvolvimento

(atualizações?)

O JavaScript de origem é escrito em ES6 (localizado no diretório src/js ) e em ES5 (localizado em BookReader ). npm run serve-dev inicia um servidor de desenvolvimento de recarga automática, que cria js/css que foi editado em localhost:8000 .

Até o próximo lançamento de versão principal, temos que armazenar os arquivos de compilação dentro do repositório para manter a compatibilidade com versões anteriores. NÃO inclua esses arquivos em seu PR. Qualquer coisa no diretório BookReader/ não deve ser confirmada.

Desenvolvendo ícones

Para ver as alterações locais do pacote de ícones no bookreader, você precisará instalar o core-js no pacote de ícones e vincular ao bookreader.

Vamos usar icon-share como exemplo.

Confirme se seu pacote de ícones está funcionando corretamente na demonstração iaux-icons
Navegue até o seu pacote de ícones ( iaux-icons/packages/icon-share ) e execute o comando: npm install core-js

Você não deveria precisar confirmar nenhuma dessas alterações do core-js

De dentro do diretório do pacote de ícones, execute o comando: npm link

Você pode usar o comando npm ls -g para confirmar se seu pacote local agora aparece no registro

Navegue até /bookreader e execute o comando: npm link @internetarchive/icon-share

Você pode usar o comando npm ls |grep icon-share para confirmar que icon-share agora é um link para seu diretório local

Agora você pode iniciar um servidor local para ver suas alterações executando o comando: npm run serve-dev

Lançamentos

Para alterar a versão do repositório e preparar um lançamento, execute npm version major|minor|patch (seguindo semver) e (algo como) git push origin HEAD --tags . Ele atualizará automaticamente o número da versão onde aparece, criará os arquivos e solicitará que você atualize o CHANGELOG.

Lançamos o BookReader in-repo como tags e também como um módulo de nó @internetarchive/bookreader

Testes

Gostaríamos de chegar a 100% de cobertura de teste e estamos acompanhando nosso progresso neste projeto: BookReader Fidelity

Testes de ponta a ponta

Também temos testes ponta a ponta usando Testcafe. Escrevemos testes para o próprio repositório e também para uso em archive.org. Você pode ler sobre eles aqui. São relativamente fáceis de fazer e uma maneira fantástica de conhecer as maravilhas do BookReader. Verifique o quadro do projeto para ver se há tickets abertos para trabalhar. E se você não encontrar um teste para algo que detectou, fique à vontade para criar um problema.

Para executar todos os testes locais de ponta a ponta, execute o comando: npm run test:e2e

Para manter o servidor de teste de ponta a ponta durante o desenvolvimento, execute o comando: npm run test:e2e:dev

Testes unitários

Temos testes unitários e usamos Jest para executá-los. Para simulações, usamos o mecanismo interno de zombaria de Jest e Sinon para definir espiões.

Para executar todos os testes de unidade local, execute o comando: npm run test

Formas de contribuir

Sempre podemos usar um BookReader construído manualmente. Confira as questões e veja o que lhe interessa. Se você tiver uma ideia de melhoria, abra um issue.

Mais informações

Documentação do desenvolvedor: https://openlibrary.org/dev/docs/bookreader

Código-fonte hospedado: https://github.com/internetarchive/bookreader

IIIF (http://iif.io) Consulte BookReaderDemo/demo-iiif.html para ver um exemplo de como carregar um manifesto IIIF no BookReader.

Dispositivos alvo

Observe que o BookReader é uma parte essencial da missão do Archive.org de acesso universal a todo o conhecimento. Portanto, deve-se tomar cuidado para oferecer suporte a navegadores legados. Ele ainda deve funcionar e poder ser usado em dispositivos antigos.