bookreader
v5.0.0-83
Der Internet Archive BookReader dient zum Online-Ansehen von Büchern aus dem Internet Archive und kann auch zum Ansehen anderer Bücher verwendet werden.
Sehen Sie sich Live-Beispiele an:
Auf der Detailseite: https://archive.org/details/birdbookillustra00reedrich
Vollständiges Fenster: https://archive.org/details/birdbookillustra00reedrich?view=theater
Eingebettete URL für iFrames: https://archive.org/embed/birdbookillustra00reedrich
Siehe BookReaderDemo Verzeichnis. Diese können durch Erstellen der Quelldateien getestet werden (stellen Sie sicher, dass Node.js installiert ist):
npm run build
und Starten eines einfachen Webservers im Stammverzeichnis:
npm run serve
Und dann öffnen Sie http://localhost:8000/BookReaderDemo/demo-simple.html .
Hier ist ein kurzes Beispiel.
// Erstelle das BookReader-Objektvar options = {
Daten: [[ { width: 800, height: 1200,uri: '//archive.org/download/BookReader/img/page001.jpg' },],[ { width: 800, height: 1200,uri: '/ /archive.org/download/BookReader/img/page002.jpg' }, { width: 800, height: 1200,uri: '//archive.org/download/BookReader/img/page003.jpg' },],[ { width: 800, height: 1200,uri: '//archive.org/download/BookReader/img/page004.jpg' }, { Breite: 800, Höhe: 1200, uri: '//archive.org/download/BookReader/img/page005.jpg' },]
],
Buchtitel: „Einfache BookReader-Präsentation“,
// Miniaturansicht ist optional, wird aber im Infodialog verwendet
Miniaturansicht: '//archive.org/download/BookReader/img/page014.jpg',
// Metadaten sind optional, werden aber im Infodialog verwendet
Metadaten: [{label: 'Titel', Wert: 'Open Library BookReader-Präsentation'},{label: 'Autor', Wert: 'Internet Archive'},{label: 'Demo-Info', Wert: 'Diese Demo zeigt, wie man könnte BookReader mit eigenen Inhalten verwenden.'},
],
ui: 'full', // embed, full (responsive)};var br = new BookReader(options);// Let's go!br.init();Ab Version 5 führt BookReader eine Hybridarchitektur ein, die den in jQuery geschriebenen Kerncode näher an seine Entwicklung als Webkomponente heranführt. Auf unserem Weg in die Zukunft von BookReader als Webkomponente verfolgen wir einen ereignisgesteuerten Ansatz, um beides miteinander zu verbinden.
Ansatz:
Ereignisgesteuert
Änderungen an der Benutzeroberfläche
API-Rückgaben
Kernereignisse src/BookReader/events.js
Durchsuchen Sie die API src/BookReader/events.js
Der Kerncode von BookReader (BR) gibt benutzerdefinierte Ereignisse aus und meldet die durchgeführten Aktionen:
BookNavigator, der Webkomponenten-Controller von BR, hört auf diese Ereignisse und reagiert darauf, um die Seitenmenübereiche zu füllen
Steuern Sie BR von außen mithilfe öffentlicher Methoden
Da wir die Benutzeroberfläche weiterhin von der Zeichen-/Berechnungslogik entkoppeln, werden diese logischen Methoden leichter zu erkennen, als öffentliche Methode aufzurufen und Komponententests für sie zu erstellen.
Wenn BookNavigator auf BR-Ereignisse reagiert, kann BookNavigator den BR-Kern mithilfe öffentlicher Funktionen direkt steuern.
Die Seitennavigation von BookReader basiert auf Webkomponenten mit LitElement-Geschmack.
Die Kernfunktionalität von BookReader liegt in jQuery. Dazu gehört:
Zeichnen und Ändern der Größe des Buches sowie die verschiedenen Modi (1-fach, 2-seitig, Galerieansicht)
die horizontale Navigation
Such-API-Dienst
Plugins
Ein Einblick in die Nutzung/Erweiterung der Kernfunktionalität:
Eigenschaften
TODO (siehe src/BookReader/options.js)
Plugins
plugin.autoplay.js – Autoplay-Modus. Blättert die Seiten in festgelegten Abständen um.
plugin.chapters.js – Kapitelmarkierungen rendern
plugin.search.js – Such-UI und Rückrufe hinzufügen
plugin.tts.js – TTS-Benutzeroberfläche (vorlesen), Soundbibliothek und Rückrufe hinzufügen
plugin.url.js – aktualisiert automatisch die Browser-URL
plugin.resume.js – verwendet Cookies, um sich die aktuelle Seite zu merken
plugin.vendor-fullscreen.js – ersetzt den Vollbildmodus durch den herstellereigenen Vollbildmodus
Aktuelle Plugin-Dateien finden Sie im Plugin-Verzeichnis
Es wird ein einfaches Plugin-System verwendet. Sehen Sie sich die Beispiele im Plugins-Verzeichnis an. Die allgemeine Idee ist, dass es sich um Mixins handelt, die den BookReader-Prototyp erweitern. Alle enthaltenen Plugins finden Sie im Plugins-Verzeichnis. Hier sind jedoch einige Beispiele:
BookReader kann in einen <iframe> eingebettet werden. Wenn Sie das IFrame-Plugin innerhalb des <iframe> verwenden, sendet der Reader über window.postMessage() Benachrichtigungen über Änderungen im Status des Readers. Das übergeordnete Fenster kann eigene Nachrichten senden (auch über window.postMessage() ) und das IFrame-Plugin kümmert sich um die entsprechende Aktualisierung des Readers.
Die Fragmentänderungsnachricht wird an das übergeordnete Fenster gesendet, wenn der eingebettete BookReader zwischen Seiten/Modi wechselt. Wenn der <iframe> diese Nachricht empfängt, wechselt er zur angegebenen Seite/zum angegebenen Modus. Das „Fragment“ ist gemäß der BookReader-URL-Spezifikation formatiert.
{ „type“: „bookReaderFragmentChange“, „fragment“: „page/n1/mode/2up“}(Updates?)
Das Quell-JavaScript ist in ES6 (im Verzeichnis src/js ) und in ES5 (im BookReader ) geschrieben. npm run serve-dev startet einen automatisch neu ladenden Dev-Server, der js/css erstellt, das bei localhost:8000 bearbeitet wurde.
Bis zum nächsten großen Versionswechsel müssen wir die Build-Dateien im Repo speichern, um die Abwärtskompatibilität aufrechtzuerhalten. Bitte fügen Sie diese Dateien NICHT in Ihre PR ein. Alles im BookReader/ -Verzeichnis sollte nicht festgeschrieben werden.
Um Änderungen an lokalen Symbolpaketen im Bookreader anzuzeigen, müssen Sie core-js im Symbolpaket installieren und eine Verknüpfung mit Bookreader herstellen.
Nehmen wir als Beispiel icon-share .
Bestätigen Sie in der iaux-icons-Demo, dass Ihr Symbolpaket ordnungsgemäß funktioniert
Navigieren Sie zu Ihrem Symbolpaket ( iaux-icons/packages/icon-share ) und führen Sie den Befehl aus: npm install core-js
Sie sollten keine dieser Core-JS-Änderungen vornehmen müssen
Führen Sie in Ihrem Symbolpaketverzeichnis den Befehl npm link aus
Sie können den Befehl npm ls -g verwenden, um zu bestätigen, dass Ihr lokales Paket jetzt in der Registrierung angezeigt wird
Navigieren Sie zu /bookreader und führen Sie den Befehl aus: npm link @internetarchive/icon-share
Sie können den Befehl npm ls |grep icon-share verwenden, um zu bestätigen, dass icon-share jetzt ein Link zu Ihrem lokalen Verzeichnis ist
Sie können jetzt einen lokalen Server starten, um Ihre Änderungen anzuzeigen, indem Sie den folgenden Befehl ausführen: npm run serve-dev
Um das Repo zu versionieren und eine Veröffentlichung vorzubereiten, führen Sie npm version major|minor|patch (nach semver) und dann (so etwas wie) git push origin HEAD --tags aus. Es aktualisiert automatisch die Versionsnummer dort, wo sie angezeigt wird, erstellt die Dateien und fordert Sie auf, das CHANGELOG zu aktualisieren.
Wir veröffentlichen BookReader im Repo als Tags und auch als Knotenmodul @internetarchive/bookreader
Wir möchten eine Testabdeckung von 100 % erreichen und verfolgen unsere Fortschritte in diesem Projekt: BookReader Fidelity
Wir führen auch End-to-End-Tests mit Testcafe durch. Wir schreiben Tests für das Repo selbst und auch für unsere Nutzung auf archive.org. Sie können hier darüber lesen. Diese sind relativ einfach durchzuführen und eine fantastische Möglichkeit, die Wunder von BookReader kennenzulernen. Suchen Sie im Projektboard nach offenen Tickets, an denen Sie arbeiten können. Und wenn Sie für etwas, das Sie entdeckt haben, keinen Test sehen, können Sie gerne ein Problem melden.
Um alle lokalen End-to-End-Tests auszuführen, führen Sie den Befehl aus: npm run test:e2e
Um den End-to-End-Testserver während der Entwicklung eingeschaltet zu lassen, führen Sie den Befehl aus: npm run test:e2e:dev
Wir führen Unit-Tests durch und verwenden Jest, um sie auszuführen. Für Spott verwenden wir den internen Spottmechanismus von Jest und Sinon, um Spione einzusetzen.
Um alle lokalen Komponententests auszuführen, führen Sie den Befehl aus: npm run test
Wir können immer einen von Hand erstellten BookReader verwenden. Schauen Sie sich die Themen an und finden Sie heraus, was Sie interessiert. Wenn Sie eine Idee für eine Verbesserung haben, öffnen Sie ein Problem.
Entwicklerdokumentation: https://openlibrary.org/dev/docs/bookreader
Gehosteter Quellcode: https://github.com/internetarchive/bookreader
IIIF (http://iiif.io) Unter BookReaderDemo/demo-iiif.html finden Sie ein Beispiel für das Laden eines IIIF-Manifests in BookReader.
Beachten Sie, dass BookReader ein zentraler Bestandteil der Mission von Archive.org ist, universellen Zugang zu allem Wissen zu ermöglichen. Daher muss darauf geachtet werden, ältere Browser zu unterstützen. Es sollte noch funktionieren und auf alten Geräten nutzbar sein.
Ändern Sie Bibliotheken so, dass sie NPM-Abhängigkeiten sind und nicht im Quellcode enthalten sind
Siehe CHANGELOG.md für die Geschichte des Projekts.
Die Quellcodelizenz ist AGPL v3, wie in der LICENSE-Datei beschrieben.
Die Möglichkeit, auf mehreren Geräten zu testen, wird dank Browser Stack bereitgestellt.
