يتم استخدام Internet Archive BookReader لعرض الكتب من أرشيف الإنترنت عبر الإنترنت ويمكن استخدامه أيضًا لعرض الكتب الأخرى.
شاهد الأمثلة الحية:
في صفحة التفاصيل: https://archive.org/details/birdbookillustra00reedrich
النافذة الكاملة: https://archive.org/details/birdbookillustra00reedrich?view=theater
عنوان URL المضمن لـ iFrames: https://archive.org/embed/birdbookillustra00reedrich
راجع دليل BookReaderDemo
. يمكن اختبار ذلك عن طريق إنشاء الملفات المصدر (تأكد من تثبيت Node.js):
بناء تشغيل npm
وبدء تشغيل خادم ويب بسيط في الدليل الجذر:
npm run serve
ثم افتح http://localhost:8000/BookReaderDemo/demo-simple.html
.
هنا مثال قصير.
// إنشاء كائن BookReader options = { البيانات: [[ { width: 800, height: 1200,uri: '//archive.org/download/BookReader/img/page001.jpg' },],[ { width: 800, height: 1200,uri: '/ /archive.org/download/BookReader/img/page002.jpg' }, { العرض: 800, الارتفاع: 1200,uri: '//archive.org/download/BookReader/img/page003.jpg' },],[ { width: 800, height: 1200,uri: '//archive.org/download/BookReader/img/page004.jpg' }, { العرض: 800, الارتفاع: 1200,uri: '//archive.org/download/BookReader/img/page005.jpg' },] ]، عنوان الكتاب: "عرض تقديمي بسيط لقارئ الكتب"، // الصورة المصغرة اختيارية، ولكن يتم استخدامها في مربع حوار المعلومات الصورة المصغرة: '//archive.org/download/BookReader/img/page014.jpg', // البيانات الوصفية اختيارية، ولكن يتم استخدامها في مربع حوار المعلومات البيانات الوصفية: [{label: 'Title', value: 'Open Library BookReader Presentation'},{label: 'Author', value: 'Internet Archive'},{label: 'Demo Info', value: 'يوضح هذا العرض التوضيحي كيف يمكن للمرء استخدام BookReader مع المحتوى الخاص به.'}, ]، ui: 'full', // embed, full (response)};var br = new BookReader(options);// هيا بنا!br.init();
بدءًا من الإصدار الخامس، يقدم BookReader بنية هجينة تدمج الكود الأساسي المكتوب في jQuery بشكل أقرب إلى تطوره كمكون ويب. بينما نسير نحو مستقبل BookReader كمكون ويب، فإننا نتبع منهجًا قائمًا على الأحداث لربط الاثنين معًا.
يقترب:
الحدث مدفوع
تغييرات واجهة المستخدم
إرجاع API
الأحداث الأساسية src/BookReader/events.js
بحث API src/BookReader/events.js
يُصدر الكود الأساسي لـ BookReader (BR) أحداثًا مخصصة، ويبلغ عن الإجراءات التي يتخذها:
BookNavigator، وحدة التحكم في مكونات الويب الخاصة بـ BR، تستمع إلى هذه الأحداث وتتفاعل معها من أجل ملء لوحات القائمة الجانبية
السيطرة على BR من الخارج باستخدام الطرق العامة
مع استمرارنا في فصل واجهة المستخدم عن منطق الرسم/الحساب، ستصبح هذه الطرق المنطقية أسهل في اكتشافها ورفعها كطريقة عامة وإنشاء اختبارات وحدة لها.
عندما يتفاعل BookNavigator مع أحداث BR، يمكن لـ BookNavigator التحكم مباشرة في نواة BR باستخدام الوظائف العامة.
يتم تشغيل التنقل الجانبي في BookReader بواسطة مكونات الويب ذات نكهة LiteElement.
الوظيفة الأساسية لـ BookReader موجودة في jQuery. وهذا يشمل:
رسم الكتاب وتغيير حجمه والأوضاع المختلفة (صفحة واحدة، انتشار صفحتين، عرض المعرض)
الملاحة الأفقية
خدمة واجهة برمجة التطبيقات للبحث
الإضافات
نظرة خاطفة على كيفية استخدام/توسيع الوظائف الأساسية:
ملكيات
المهام (انظر الآن src/BookReader/options.js)
الإضافات
plugin.autoplay.js - وضع التشغيل التلقائي. يقلب الصفحات على فترات زمنية محددة.
plugin.chapters.js - عرض علامات الفصل
plugin.search.js - إضافة واجهة المستخدم للبحث وعمليات الاسترجاعات
plugin.tts.js - إضافة واجهة مستخدم tts (القراءة بصوت عالٍ) ومكتبة الصوت وعمليات الاسترجاعات
plugin.url.js - يقوم تلقائيًا بتحديث عنوان URL للمتصفح
plugin.resume.js - يستخدم ملفات تعريف الارتباط لتذكر الصفحة الحالية
plugin.vendor-fullscreen.js - يستبدل وضع ملء الشاشة بملء الشاشة الأصلي للمورد
راجع دليل البرنامج المساعد لملفات البرنامج المساعد الحالية
يتم استخدام نظام البرنامج المساعد الأساسي. راجع الأمثلة في دليل الإضافات. الفكرة العامة هي أنها مزيجات تعمل على تعزيز النموذج الأولي لقارئ الكتب. راجع دليل المكونات الإضافية للتعرف على جميع المكونات الإضافية المضمنة، ولكن فيما يلي بعض الأمثلة:
يمكن تضمين BookReader في ملف <iframe>
. إذا كنت تستخدم ملحق IFrame داخل <iframe>
، فسيرسل القارئ إشعارات حول التغييرات في حالة القارئ عبر window.postMessage()
. يمكن للنافذة الأصلية إرسال رسائل خاصة بها (أيضًا عبر window.postMessage()
) وسيتولى ملحق IFrame تحديث القارئ ليتوافق.
يتم إرسال رسالة "تغيير الأجزاء" إلى النافذة الرئيسية عندما يتحرك قارئ الكتب المضمن بين الصفحات/الأوضاع. عندما يتلقى <iframe>
هذه الرسالة، فإنه ينتقل إلى الصفحة/الوضع المحدد. يتم تنسيق "الجزء" وفقًا لمواصفات عنوان URL الخاص بـ BookReader.
{ "type": "bookReaderFragmentChange", "fragment": "page/n1/mode/2up"}
(التحديثات؟)
تتم كتابة JavaScript المصدر في ES6 (الموجود في دليل src/js
) وفي ES5 (الموجود في BookReader
). يقوم npm run serve-dev
بتشغيل خادم مطور يتم إعادة تحميله تلقائيًا، والذي يبني js/css الذي تم تحريره في localhost:8000
.
حتى الإصدار الرئيسي التالي، يتعين علينا تخزين ملفات البناء داخل الريبو للحفاظ على التوافق مع الإصدارات السابقة. من فضلك لا تقم بتضمين هذه الملفات في العلاقات العامة الخاصة بك. لا ينبغي الالتزام بأي شيء في دليل BookReader/
.
لرؤية تغييرات حزمة الأيقونات المحلية في قارئ الكتب، ستحتاج إلى تثبيت core-js في حزمة الأيقونات وربطها بقارئ الكتب.
دعونا نستخدم icon-share
كمثال.
تأكد من أن حزمة الأيقونة الخاصة بك تعمل بشكل صحيح في العرض التوضيحي لـ iaux-icons
انتقل إلى حزمة الرموز الخاصة بك ( iaux-icons/packages/icon-share
) وقم بتشغيل الأمر: npm install core-js
لا يجب أن تحتاج إلى تنفيذ أي من هذه التغييرات الأساسية في js
من داخل أمر تشغيل دليل حزمة الأيقونة: npm link
يمكنك استخدام الأمر npm ls -g
لتأكيد ظهور الحزمة المحلية الخاصة بك الآن في السجل
انتقل إلى /bookreader
وقم بتشغيل الأمر: npm link @internetarchive/icon-share
يمكنك استخدام الأمر npm ls |grep icon-share
لتأكيد أن مشاركة الأيقونات أصبحت الآن رابطًا إلى دليلك المحلي
يمكنك الآن تشغيل خادم محلي لرؤية تغييراتك عن طريق تشغيل الأمر: npm run serve-dev
لإصدار نسخة الريبو وإعداد الإصدار، قم بتشغيل npm version major|minor|patch
(بعد semver)، ثم (شيء من هذا القبيل) git push origin HEAD --tags
. سيقوم تلقائيًا بتحديث رقم الإصدار حيث يظهر، وإنشاء الملفات، ويطلب منك تحديث سجل التغيير.
نقوم بإصدار BookReader في الريبو كعلامات وأيضًا كوحدة عقدة @internetarchive/bookreader
نرغب في الحصول على تغطية اختبارية بنسبة 100% ونقوم بتتبع تقدمنا في هذا المشروع: BookReader Fidelity
لدينا أيضًا اختبارات شاملة باستخدام Testcafe. نكتب اختبارات للريبو نفسه وأيضًا لاستخدامنا على archive.org. يمكنك أن تقرأ عنها هنا. من السهل نسبيًا القيام بذلك، وهي طريقة رائعة للتعرف على عجائب BookReader. تحقق من لوحة المشروع للحصول على تذاكر مفتوحة للعمل عليها. وإذا لم تجد اختبارًا لشيء لاحظته، فلا تتردد في إثارة مشكلة.
لتشغيل جميع الاختبارات المحلية الشاملة، قم بتشغيل الأمر: npm run test:e2e
للحفاظ على تشغيل خادم الاختبار الشامل أثناء التطوير، قم بتشغيل الأمر: npm run test:e2e:dev
لدينا اختبارات الوحدة ونستخدم Jest لتشغيلها. بالنسبة للسخرية، نستخدم آلية السخرية الداخلية لـ Jest وSinon لتعيين الجواسيس.
لتشغيل كافة اختبارات الوحدة المحلية، قم بتشغيل الأمر: npm run test
يمكننا دائمًا استخدام قارئ الكتب اليدوي. تحقق من القضايا ومعرفة ما يهمك. إذا كانت لديك فكرة للتحسين، افتح موضوعًا.
وثائق المطور: https://openlibrary.org/dev/docs/bookreader
كود المصدر المستضاف: https://github.com/internetarchive/bookreader
IIIF (http://iiif.io) راجع BookReaderDemo/demo-iiif.html
للاطلاع على مثال لكيفية تحميل بيان IIIF في BookReader.
لاحظ أن BookReader هو جزء أساسي من مهمة Archive.org المتمثلة في الوصول الشامل إلى كل المعرفة. ولذلك، يجب الحرص على دعم المتصفحات القديمة. يجب أن يظل يعمل وأن يكون قابلاً للاستخدام على الأجهزة القديمة.
قم بتغيير المكتبات لتكون تبعيات NPM بدلاً من تضمينها في الكود المصدري
راجع CHANGELOG.md للتعرف على تاريخ المشروع.
ترخيص الكود المصدري هو AGPL v3، كما هو موضح في ملف الترخيص.
يتم توفير القدرة على الاختبار على أجهزة متعددة بفضل Browser Stack.