bookreader
v5.0.0-83
Internet Archive BookReader는 인터넷 아카이브에서 온라인으로 책을 보는 데 사용되며 다른 책을 보는 데도 사용할 수 있습니다.
실제 사례를 확인하세요:
세부정보 페이지: https://archive.org/details/birdbookillustra00reedrich
전체 창: https://archive.org/details/birdbookillustra00reedrich?view=theater
iFrame용 삽입된 URL: https://archive.org/embed/birdbookillustra00reedrich
BookReaderDemo 디렉터리를 참조하세요. 소스 파일을 빌드하여 테스트할 수 있습니다(Node.js가 설치되어 있는지 확인).
npm 실행 빌드
루트 디렉터리에서 간단한 웹 서버를 시작합니다.
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: '간단한 BookReader 프레젠테이션',
// 썸네일은 선택사항이지만 정보 대화상자에서 사용됩니다.
썸네일: '//archive.org/download/BookReader/img/page014.jpg',
// 메타데이터는 선택사항이지만 정보 대화상자에서 사용됩니다.
메타데이터: [{label: 'Title', value: 'Open Library BookReader Presentation'},{label: 'Author', value: 'Internet Archive'},{label: 'Demo Info', value: '이 데모는 'Open Library BookReader Presentation'을 보여줍니다. 자체 콘텐츠와 함께 BookReader를 사용할 수 있습니다.'},
],
ui: 'full', // 포함, 전체(반응형)};var br = new BookReader(options);// 가자!br.init();v5부터 BookReader는 jQuery로 작성된 핵심 코드를 웹 구성 요소로서의 진화에 더 가깝게 병합하는 하이브리드 아키텍처를 도입합니다. 웹 구성 요소로서 BookReader의 미래를 향해 나아가면서 우리는 두 가지를 함께 연결하기 위해 이벤트 기반 접근 방식을 취하고 있습니다.
접근하다:
이벤트 중심
UI 변경
API 반환
핵심 이벤트 src/BookReader/events.js
검색 API src/BookReader/events.js
BookReader(BR)의 핵심 코드는 사용자 정의 이벤트를 내보내며 수행되는 작업을 보고합니다.
BR의 웹 구성요소 컨트롤러인 BookNavigator는 사이드 메뉴 패널을 채우기 위해 이러한 이벤트를 수신하고 반응합니다.
공개 메소드를 사용하여 외부에서 BR 제어
그리기/계산 로직에서 UI를 계속 분리함에 따라 이러한 논리적 메서드는 더 쉽게 발견되고 공개 메서드로 발생하며 이에 대한 단위 테스트를 생성할 것입니다.
BookNavigator가 BR의 이벤트에 반응하면 BookNavigator는 공개 함수를 사용하여 BR 코어를 직접 제어할 수 있습니다.
BookReader의 측면 탐색은 LitElement 맛이 나는 웹 구성 요소로 구동됩니다.
BookReader의 핵심 기능은 jQuery에 있습니다. 여기에는 다음이 포함됩니다.
책 그리기 및 크기 조정 및 다양한 모드(1up, 2페이지 펼치기, 갤러리 보기)
수평 탐색
검색 API 서비스
플러그인
핵심 기능을 사용/확장하는 방법 살펴보기:
속성
TODO(현재는 src/BookReader/options.js 참조)
플러그인
Plugin.autoplay.js - 자동 재생 모드. 설정된 간격으로 페이지를 넘깁니다.
플러그인.chapters.js - 챕터 마커 렌더링
Plugin.search.js - 검색 UI 및 콜백 추가
플러그인.tts.js - tts(소리내어 읽기) UI, 사운드 라이브러리 및 콜백을 추가합니다.
플러그인.url.js - 브라우저 URL을 자동으로 업데이트합니다.
플러그인.resume.js - 현재 페이지를 기억하기 위해 쿠키를 사용합니다.
플러그인.vendor-fullscreen.js - 전체 화면 모드를 공급업체 기본 전체 화면으로 대체합니다.
현재 플러그인 파일은 플러그인 디렉토리를 참조하세요.
기본 플러그인 시스템이 사용됩니다. 플러그인 디렉토리의 예제를 참조하세요. 일반적인 아이디어는 BookReader 프로토타입을 보강하는 믹스인이라는 것입니다. 포함된 모든 플러그인은 플러그인 디렉토리를 참조하세요. 다음은 몇 가지 예입니다.
BookReader는 <iframe> 내에 포함될 수 있습니다. <iframe> 내부에서 IFrame 플러그인을 사용하는 경우 리더는 window.postMessage() 통해 리더 상태 변경에 대한 알림을 보냅니다. 상위 창은 자체 메시지를 보낼 수 있으며( window.postMessage() 통해서도) IFrame 플러그인은 일치하도록 판독기 업데이트를 처리합니다.
포함된 BookReader가 페이지/모드 간에 이동할 때 조각 변경 메시지가 상위 창으로 전송됩니다. <iframe> 은 이 메시지를 받으면 지정된 페이지/모드로 이동합니다. "조각"은 BookReader URL 사양에 따라 형식이 지정됩니다.
{ "유형": "bookReaderFragmentChange", "fragment": "페이지/n1/mode/2up"}(업데이트?)
소스 JavaScript는 ES6( src/js 디렉터리에 있음)과 ES5( BookReader 에 있음)로 작성되었습니다. npm run serve-dev localhost:8000 에서 편집된 js/css를 빌드하는 자동 다시 로드 개발 서버를 시작합니다.
다음 주요 버전이 나올 때까지 이전 버전과의 호환성을 유지하기 위해 빌드 파일을 리포지토리 내부에 저장해야 합니다. PR에 이러한 파일을 포함 하지 마십시오 . BookReader/ 디렉토리에 있는 어떤 것도 커밋해서는 안 됩니다.
bookreader에서 로컬 아이콘 패키지 변경 사항을 보려면 core-js를 아이콘 패키지에 설치하고 bookreader에 연결해야 합니다.
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 실행하세요. 나타나는 버전 번호를 자동으로 업데이트하고, 파일을 빌드하고, 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://iif.io) BookReader에서 IIIF 매니페스트를 로드하는 방법에 대한 예를 보려면 BookReaderDemo/demo-iiif.html 참조하세요.
BookReader는 모든 지식에 대한 보편적 접근이라는 Archive.org 사명의 핵심 부분입니다. 따라서 레거시 브라우저를 지원하려면 주의가 필요합니다. 기존 장치에서도 여전히 작동하고 사용할 수 있습니다.
소스 코드에 포함되지 않고 NPM 종속성이 되도록 라이브러리를 변경합니다.
프로젝트 내역은 CHANGELOG.md를 참조하세요.
소스 코드 라이선스는 LICENSE 파일에 설명된 대로 AGPL v3입니다.
여러 장치에서 테스트할 수 있는 기능은 브라우저 스택을 통해 제공됩니다.
