Главная страница>Связанные с программированием>Другой исходный код
Скачать

Интернет-архив BookReader

Скриншот интерфейса BookReader v5

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 .

Использование

Вот краткий пример.

 // Создаём объект BookReadervar options = {
  data: [[ { 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' },]
  ],

  bookTitle: 'Простая презентация BookReader',

  // миниатюра не является обязательной, но она используется в информационном диалоговом окне
  миниатюра: '//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', // встроить, полный (адаптивный)};var br = new BookReader(options);// Поехали!br.init();

Обзор архитектуры

Начиная с версии 5, BookReader представляет гибридную архитектуру, которая объединяет основной код, написанный на jQuery, ближе к его развитию как веб-компонента. По мере того, как мы приближаемся к будущему BookReader как веб-компонента, мы применяем подход, управляемый событиями, чтобы соединить их вместе.

Подход:

  • Управляемый событиями

    • Изменения пользовательского интерфейса

    • API возвращает

    • Основные события src/BookReader/events.js

    • API поиска src/BookReader/events.js

    • Основной код BookReader (BR) генерирует пользовательские события, сообщая о предпринимаемых действиях:

    • BookNavigator, контроллер веб-компонентов BR, прослушивает эти события и реагирует на них, чтобы заполнить панели бокового меню.

    • Управляйте BR извне, используя общедоступные методы.

      • Поскольку мы продолжаем отделять пользовательский интерфейс от логики рисования/вычисления, эти логические методы станет легче обнаружить, использовать как общедоступный метод и создавать для них модульные тесты.

      • Когда BookNavigator реагирует на события BR, BookNavigator может напрямую управлять ядром BR, используя общедоступные функции.

    Панели меню: веб-компоненты через LitElement

    Боковая навигация BookReader основана на веб-компонентах LitElement.

    Ядро: jQuery

    Основная функциональность BookReader реализована в jQuery. Это включает в себя:

    • рисование и изменение размера книги и различные режимы (1 разворот, 2 разворота, просмотр галереи)

    • горизонтальная навигация

    • API-сервис поиска

    • плагины

    Немного о том, как использовать/расширять основные функции:

    • Характеристики

      • TODO (на данный момент см. src/BookReader/options.js)

    • Плагины

      • плагин.autoplay.js — режим автозапуска. Переворачивает страницы через заданные промежутки времени.

      • плагин.chapters.js — отображает маркеры глав

      • плагин.search.js — добавляет интерфейс поиска и обратные вызовы

      • плагин.tts.js — добавляет пользовательский интерфейс tts (чтение вслух), звуковую библиотеку и обратные вызовы.

      • плагин.url.js — автоматически обновляет URL-адрес браузера

      • плагин.resume.js — использует файлы cookie для запоминания текущей страницы.

      • плагин.vendor-fullscreen.js — заменяет полноэкранный режим собственным полноэкранным режимом поставщика.

      • см. каталог плагинов для текущих файлов плагина

      • Используется базовая система плагинов. См. примеры в каталоге плагинов. Общая идея заключается в том, что это миксины, дополняющие прототип BookReader. См. каталог плагинов для всех включенных плагинов, но вот несколько примеров:

    Встраивание BookReader в iFrame

    BookReader можно встроить в <iframe> . Если вы используете плагин IFrame внутри <iframe> , программа чтения будет отправлять уведомления об изменениях в состоянии программы чтения через window.postMessage() . Родительское окно может отправлять собственные сообщения (также через window.postMessage() ), а плагин IFrame будет обрабатывать обновление средства чтения в соответствии с ним.

    События сообщений

    Изменение фрагмента

    Сообщение об изменении фрагмента отправляется в родительское окно, когда встроенный BookReader перемещается между страницами/режимами. Когда <iframe> получает это сообщение, он перемещается на указанную страницу/режим. «Фрагмент» форматируется в соответствии со спецификацией URL-адреса BookReader.

     { "type": "bookReaderFragmentChange", "fragment": "page/n1/mode/2up"}

    Разработка

    (обновления?)

    Исходный код JavaScript написан на ES6 (находится в каталоге src/js ) и на ES5 (находится в BookReader ). npm run serve-dev запускает сервер разработки с автоматической перезагрузкой, который собирает js/css, отредактированный на localhost:8000 .

    До следующего выпуска основной версии нам приходится хранить файлы сборки внутри репозитория, чтобы обеспечить обратную совместимость. Пожалуйста, НЕ ВКЛЮЧАЙТЕ эти файлы в свой PR. Ничего в каталоге BookReader/ не следует фиксировать.

    Разработка иконок

    Чтобы увидеть изменения локального пакета значков в букридере, вам необходимо установить core-js в пакет значков и связать его с букридером.

    Давайте использовать icon-share в качестве примера.

    1. Убедитесь, что ваш пакет значков работает правильно в демо-версии iaux-icons.

    2. Перейдите к пакету значков ( iaux-icons/packages/icon-share ) и выполните команду: npm install core-js

      • Вам не нужно вносить какие-либо из этих изменений в core-js.

    3. Из каталога пакета значков выполните команду: npm link

      • Вы можете использовать команду npm ls -g чтобы убедиться, что ваш локальный пакет теперь появился в реестре.

    4. Перейдите в /bookreader и выполните команду: npm link @internetarchive/icon-share

      • Вы можете использовать команду npm ls |grep icon-share , чтобы подтвердить, что icon-share теперь является ссылкой на ваш локальный каталог.

    5. Теперь вы можете запустить локальный сервер, чтобы увидеть ваши изменения, выполнив команду: npm run serve-dev

    Релизы

    Чтобы обновить репозиторий и подготовить выпуск, запустите npm version major|minor|patch (после semver), а затем (что-то вроде) git push origin HEAD --tags . Он автоматически обновит номер версии там, где он появляется, создаст файлы и попросит вас обновить CHANGELOG.

    Мы выпускаем 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

    Способы внести свой вклад

    Мы всегда можем использовать BookReader, собранный вручную. Ознакомьтесь с вопросами и посмотрите, что вас интересует. Если у вас есть идея по улучшению, откройте проблему.

    Дополнительная информация

    Документация разработчика: 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, как описано в файле LICENSE.

    Другие кредиты

    Возможность тестирования на нескольких устройствах предоставляется благодаря Browser Stack.

    Расширять
    Дополнительная информация
    Связанные приложения
    Рекомендуем вам
    Связанные новости Все