bookreader
v5.0.0-83
Internet Archive BookReader est utilisé pour visualiser des livres d'Internet Archive en ligne et peut également être utilisé pour visualiser d'autres livres.
Voir des exemples en direct :
Sur la page de détails : https://archive.org/details/birdbookillustra00reedrich
Fenêtre complète : https://archive.org/details/birdbookillustra00reedrich?view=theater
URL intégrée pour les iFrames : https://archive.org/embed/birdbookillustra00reedrich
Voir le répertoire BookReaderDemo . Ceux-ci peuvent être testés en créant les fichiers sources (assurez-vous que Node.js est installé) :
npm exécuter la construction
et démarrer un simple serveur Web dans le répertoire racine :
npm run serve
Et puis ouvrez http://localhost:8000/BookReaderDemo/demo-simple.html .
Voici un court exemple.
// Crée les options de la variable objet BookReader = {
données : [[ { largeur : 800, hauteur : 1200,uri : '//archive.org/download/BookReader/img/page001.jpg' },],[ { largeur : 800, hauteur : 1200,uri : '/ /archive.org/download/BookReader/img/page002.jpg' }, { largeur : 800, hauteur : 1200,uri : '//archive.org/download/BookReader/img/page003.jpg' },],[ { largeur : 800, hauteur : 1200,uri : '//archive.org/download/BookReader/img/page004.jpg' }, { largeur : 800, hauteur : 1200,uri : '//archive.org/download/BookReader/img/page005.jpg' },]
],
titre du livre : « Présentation simple de BookReader »,
// la vignette est facultative, mais elle est utilisée dans la boîte de dialogue d'informations
vignette : '//archive.org/download/BookReader/img/page014.jpg',
// Les métadonnées sont facultatives, mais elles sont utilisées dans la boîte de dialogue d'informations
métadonnées : [{label : 'Titre', valeur : 'Open Library BookReader Présentation'},{label : 'Auteur', valeur : 'Internet Archive'},{label : 'Informations sur la démo', valeur : 'Cette démo montre comment on pourrait utiliser BookReader avec son propre contenu.'},
],
ui: 'full', // embed, full (responsive)};var br = new BookReader(options);// C'est parti!br.init();À partir de la v5, BookReader introduit une architecture hybride qui fusionne le code de base écrit en jQuery au plus près de son évolution en tant que composant Web. Alors que nous nous dirigeons vers l'avenir de BookReader en tant que composant Web, nous adoptons une approche basée sur les événements pour relier les deux.
Approche:
Piloté par les événements
Modifications de l'interface utilisateur
Retours d'API
Événements principaux src/BookReader/events.js
API de recherche src/BookReader/events.js
Le code principal de BookReader (BR) émet des événements personnalisés, signalant les actions qu'il effectue :
BookNavigator, le contrôleur des composants Web de BR, écoute et réagit à ces événements afin de remplir les panneaux de menu latéraux
Contrôler BR de l'extérieur en utilisant des méthodes publiques
À mesure que nous continuons à dissocier l'interface utilisateur de la logique de dessin/calcul, ces méthodes logiques deviendront plus faciles à repérer, à devenir une méthode publique et à créer des tests unitaires pour elles.
Lorsque BookNavigator réagit aux événements de BR, BookNavigator peut contrôler directement le cœur du BR à l'aide de fonctions publiques.
La navigation latérale de BookReader est alimentée par des composants Web de type LitElement.
La fonctionnalité principale de BookReader se trouve dans jQuery. Cela comprend :
dessiner et redimensionner le livre et les différents modes (1up, 2 pages, vue galerie)
la navigation horizontale
service API de recherche
plugins
Un aperçu de la façon d'utiliser/d'étendre les fonctionnalités de base :
Propriétés
TODO (pour l'instant, voir src/BookReader/options.js)
Plugins
plugin.autoplay.js - mode de lecture automatique. Retourne les pages à intervalles définis.
plugin.chapters.js - afficher les marqueurs de chapitre
plugin.search.js - ajoute une interface de recherche et des rappels
plugin.tts.js - ajoute une interface utilisateur tts (lecture à haute voix), une bibliothèque de sons et des rappels
plugin.url.js - met automatiquement à jour l'URL du navigateur
plugin.resume.js - utilise des cookies pour mémoriser la page actuelle
plugin.vendor-fullscreen.js - remplace le mode plein écran par le plein écran natif du fournisseur
voir le répertoire du plugin pour les fichiers du plugin actuels
Un système de plugin de base est utilisé. Voir les exemples dans le répertoire plugins. L'idée générale est qu'il s'agit de mixins qui augmentent le prototype BookReader. Consultez le répertoire des plugins pour tous les plugins inclus, mais voici quelques exemples :
BookReader peut être intégré dans un <iframe> . Si vous utilisez le plugin IFrame dans le <iframe> , le lecteur enverra des notifications sur les changements dans l'état du lecteur via window.postMessage() . La fenêtre parent peut envoyer ses propres messages (également via window.postMessage() ) et le plugin IFrame se chargera de mettre à jour le lecteur pour qu'il corresponde.
Le message Fragment Change est envoyé à la fenêtre parent lorsque le BookReader intégré se déplace entre les pages/modes. Lorsque le <iframe> reçoit ce message, il passe à la page/au mode spécifié. Le « fragment » est formaté conformément à la spécification URL de BookReader.
{ "type": "bookReaderFragmentChange", "fragment": "page/n1/mode/2up"}(mises à jour ?)
Le JavaScript source est écrit en ES6 (situé dans le répertoire src/js ) et en ES5 (situé dans BookReader ). npm run serve-dev démarre un serveur de développement à rechargement automatique, qui construit js/css qui a été modifié sur localhost:8000 .
Jusqu'à la prochaine version majeure, nous devons stocker les fichiers de construction dans le référentiel pour maintenir la compatibilité ascendante. Veuillez NE PAS inclure ces fichiers dans votre PR. Tout ce qui se trouve dans le répertoire BookReader/ ne doit pas être validé.
Pour voir les modifications du package d'icônes local dans bookreader, vous devrez installer core-js dans le package d'icônes et créer un lien vers bookreader.
Utilisons icon-share comme exemple.
Confirmez que votre package d'icônes fonctionne correctement dans la démo iaux-icons
Accédez à votre package d'icônes ( iaux-icons/packages/icon-share ) et exécutez la commande : npm install core-js
Vous ne devriez pas avoir besoin de valider aucune de ces modifications core-js
Depuis le répertoire de votre package d'icônes, exécutez la commande : npm link
Vous pouvez utiliser la commande npm ls -g pour confirmer que votre package local apparaît désormais dans le registre
Accédez à /bookreader et exécutez la commande : npm link @internetarchive/icon-share
Vous pouvez utiliser la commande npm ls |grep icon-share pour confirmer que icon-share est désormais un lien vers votre répertoire local
Vous pouvez maintenant démarrer un serveur local pour voir vos modifications en exécutant la commande : npm run serve-dev
Pour modifier la version du dépôt et préparer une version, exécutez npm version major|minor|patch (après semver), puis (quelque chose comme) git push origin HEAD --tags . Il mettra automatiquement à jour le numéro de version là où il apparaît, créera les fichiers et vous demandera de mettre à jour le CHANGELOG.
Nous publions BookReader in-repo sous forme de balises et également en tant que module de nœud @internetarchive/bookreader
Nous aimerions atteindre une couverture de test de 100 % et suivons nos progrès dans ce projet : BookReader Fidelity
Nous effectuons également des tests de bout en bout avec Testcafe. Nous écrivons des tests pour le dépôt lui-même et également pour notre utilisation sur archive.org. Vous pouvez en savoir plus ici. Celles-ci sont relativement faciles à réaliser et constituent un moyen fantastique de se familiariser avec les merveilles de BookReader. Consultez le tableau de bord du projet pour connaître les tickets ouverts sur lesquels travailler. Et si vous ne voyez pas de test pour quelque chose que vous avez repéré, n'hésitez pas à signaler un problème.
Pour exécuter tous les tests locaux de bout en bout, exécutez la commande : npm run test:e2e
Pour conserver le serveur de test de bout en bout pendant le développement, exécutez la commande : npm run test:e2e:dev
Nous avons des tests unitaires et utilisons Jest pour les exécuter. Pour les simulations, nous utilisons le mécanisme de moquerie interne de Jest et Sinon pour définir des espions.
Pour exécuter tous les tests unitaires locaux, exécutez la commande : npm run test
Nous pouvons toujours utiliser un BookReader construit à la main. Consultez les problèmes et voyez ce qui vous intéresse. Si vous avez une idée d'amélioration, ouvrez un problème.
Documentation du développeur : https://openlibrary.org/dev/docs/bookreader
Code source hébergé : https://github.com/internetarchive/bookreader
IIIF (http://iif.io) Voir BookReaderDemo/demo-iiif.html pour voir un exemple de chargement d'un manifeste IIIF dans BookReader.
Notez que BookReader est un élément essentiel de la mission d'Archive.org d'accès universel à toutes les connaissances. Par conséquent, il faut veiller à prendre en charge les navigateurs existants. Il devrait toujours fonctionner et être utilisable sur les anciens appareils.
Changer les bibliothèques pour qu'elles soient des dépendances NPM plutôt que d'être incluses dans le code source
Voir CHANGELOG.md pour l'historique du projet.
La licence du code source est AGPL v3, comme décrit dans le fichier LICENSE.
La possibilité de tester sur plusieurs appareils est fournie par Browser Stack.
