Internet Archive BookReader 用于在线查看 Internet Archive 中的图书,也可用于查看其他图书。
查看实例:
在详细信息页面上:https://archive.org/details/birdbookillustra00reedrich
完整窗口:https://archive.org/details/birdbookillustra00reedrich?view=theater
iFrame 的嵌入网址:https://archive.org/embed/birdbookillustra00reedrich
请参阅BookReaderDemo
目录。可以通过构建源文件来测试这些(确保安装了 Node.js):
npm 运行构建
并在根目录中启动一个简单的 Web 服务器:
npm run serve
然后打开http://localhost:8000/BookReaderDemo/demo-simple.html
。
这是一个简短的例子。
// 创建 BookReader 对象var options = { 数据:[[{宽度:800,高度:1200,uri:'//archive.org/download/BookReader/img/page001.jpg'},],[{宽度:800,高度:1200,uri:'/ /archive.org/download/BookReader/img/page002.jpg' }, { 宽度: 800, 高度: 1200,uri: '//archive.org/download/BookReader/img/page003.jpg' },],[ { 宽度: 800, 高度: 1200,uri: '//archive.org/download/BookReader/img/page004.jpg' }, { 宽度:800,高度:1200,uri: '//archive.org/download/BookReader/img/page005.jpg' },] ], bookTitle: '简单的图书阅读器演示', // 缩略图是可选的,但它在信息对话框中使用 缩略图:'//archive.org/download/BookReader/img/page014.jpg', // 元数据是可选的,但它在信息对话框中使用 元数据: [{label: '标题', value: '打开图书馆 BookReader 演示文稿'},{label: '作者', value: 'Internet Archive'},{label: '演示信息', value: '此演示展示了如何人们可以使用 BookReader 来阅读自己的内容。'}, ], ui: 'full', // 嵌入,完整(响应式)};var br = new BookReader(options);// 开始吧!br.init();
从 v5 开始,BookReader 引入了混合架构,该架构合并了用 jQuery 编写的核心代码,使其更接近其作为 Web 组件的演变。 当我们迈向 BookReader 作为 Web 组件的未来时,我们正在采用事件驱动方法将两者连接在一起。
方法:
事件驱动
用户界面更改
API返回
核心事件 src/BookReader/events.js
搜索 API src/BookReader/events.js
BookReader (BR) 的核心代码发出自定义事件,报告它所采取的操作:
BookNavigator 是 BR 的 Web 组件控制器,它监听这些事件并对这些事件做出反应,以便填充侧面菜单面板
使用公共方法从外部控制 BR
随着我们继续将 UI 与绘图/计算逻辑解耦,这些逻辑方法将变得更容易发现、作为公共方法提出并为它们创建单元测试。
当BookNavigator对BR的事件做出反应时,BookNavigator可以使用公共函数直接控制BR核心。
BookReader 的侧面导航由 LitElement 风格的 Web 组件提供支持。
BookReader 的核心功能是在 jQuery 中实现的。这包括:
绘制和调整书籍大小以及各种模式(1up、2页展开、图库视图)
水平导航
搜索API服务
插件
了解如何使用/扩展核心功能:
特性
TODO(现在参见 src/BookReader/options.js)
插件
plugin.autoplay.js - 自动播放模式。以设定的时间间隔翻页。
plugin.chapters.js - 渲染章节标记
plugin.search.js - 添加搜索用户界面和回调
plugin.tts.js - 添加 tts(大声朗读)ui、声音库和回调
plugin.url.js - 自动更新浏览器 url
plugin.resume.js - 使用 cookies 来记住当前页面
plugin.vendor-fullscreen.js - 用供应商原生全屏替换全屏模式
请参阅插件目录以获取当前插件文件
使用基本的插件系统。请参阅插件目录中的示例。总的想法是,它们是增强 BookReader 原型的 mixin。请参阅插件目录以获取所有包含的插件,但这里有一些示例:
BookReader 可以嵌入到<iframe>
中。如果您在<iframe>
内使用 IFrame 插件,阅读器将通过window.postMessage()
发送有关阅读器状态更改的通知。父窗口可以发送自己的消息(也可以通过window.postMessage()
),并且 IFrame 插件将更新阅读器以进行匹配。
当嵌入式 BookReader 在页面/模式之间移动时,片段更改消息将发送到父窗口。当<iframe>
收到此消息时,它会移动到指定的页面/模式。 “片段”的格式符合 BookReader URL 规范。
{“type”:“bookReaderFragmentChange”,“fragment”:“page/n1/mode/2up”}
(更新?)
源 JavaScript 是用 ES6(位于src/js
目录中)和 ES5(位于BookReader
中)编写的。 npm run serve-dev
启动一个自动重新加载的开发服务器,该服务器构建已在localhost:8000
编辑的 js/css 。
在下一个主要版本发布之前,我们必须将构建文件存储在存储库中以保持向后兼容性。请不要将这些文件包含在您的 PR 中。不应提交BookReader/
目录中的任何内容。
要查看图书阅读器中本地图标包的更改,您需要将 core-js 安装到图标包中并链接到图书阅读器。
让我们以icon-share
为例。
确认您的图标包在 iaux-icons 演示中正常工作
导航到您的图标包( iaux-icons/packages/icon-share
)并运行命令: npm install core-js
您不需要提交任何这些 core-js 更改
从图标包目录中运行命令: npm link
您可以使用命令npm ls -g
确认您的本地包现在出现在注册表中
导航到/bookreader
并运行命令: npm link @internetarchive/icon-share
您可以使用命令npm ls |grep icon-share
确认 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 来运行它们。对于mocks,我们使用Jest的内部mocking机制和Sinon来设置spies。
要运行所有本地单元测试,请运行命令: npm run test
我们总是可以使用手工构建 BookReader。 查看问题并看看您感兴趣的内容。 如果您有改进的想法,请提出问题。
开发人员文档:https://openlibrary.org/dev/docs/bookreader
托管源代码:https://github.com/internetarchive/bookreader
IIIF (http://iiif.io) 请参阅BookReaderDemo/demo-iiif.html
以查看如何在 BookReader 中加载 IIIF 清单的示例。
请注意,BookReader 是 Archive.org 普遍获取所有知识这一使命的核心部分。因此,必须注意支持旧版浏览器。它应该仍然可以在旧设备上运行并使用。
将库更改为 NPM 依赖项,而不是包含在源代码中
请参阅 CHANGELOG.md 了解该项目的历史。
源代码许可证是 AGPL v3,如 LICENSE 文件中所述。
浏览器堆栈提供了在多个设备上进行测试的能力。