Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | 1x 1x 1x | import React, { Component } from 'react';
import PropTypes from 'prop-types';
/**
* BookReaderWrapper wraps globally accessible BookReader to create an instance
*
* This component is client-side only.
* This component expects all necessary scripts for BookReader to be pre-loaded onto the page before use.
* Please see https://github.com/internetarchive/bookreader for more instructions & examples.
*
* If jsia is specified then it adds Internet Archive specific stuff via the BookreaderJSIA function
* the script BookreaderJSIA should previously have been loaded.
*
* The BookreaderJSIA code cant go in here, because it is InternetArchive specific,
* future development could be a wrapper, for this, that includes BookreaderJSIA
*
* Note this component is used by dweb-archive for offline and dweb versions.
*
* global: BookReader
* Creates a global: window.br (which Search will need)
*
* <BookReaderWrapper
* jsia={ options returned by JSIA call} optional
* options={ options to override default bookreader options}
* />
*
* Note will almost certainly need a AJS.theatresize() in caller after this.
*/
export default class BookReaderWrapper extends Component {
constructor(props) {
super(props);
this.BookReaderRef = React.createRef();
this.iaBookreaderRef = React.createRef();
this.bookreader = {};
this.bindEventListeners = this.bindEventListeners.bind(this);
this.loadBookReader = this.loadBookReader.bind(this);
this.bindEventListeners();
}
componentDidMount() {
this.loadBookReader();
const { userSignedIn } = this.props;
if (userSignedIn) {
const iaBr = this.iaBookreaderRef.current;
if (iaBr.setAttribute) {
iaBr.setAttribute('signedIn', '');
}
}
}
componentDidUpdate() {
// eslint-disable-next-line react/destructuring-assignment
if (this.props.item && !this.iaBookreader.item) {
// eslint-disable-next-line react/destructuring-assignment
this.iaBookreader.item = this.props.item;
}
}
get iaBookreader() {
return this.iaBookreaderRef.current;
}
bindEventListeners() {
window.addEventListener('BrBookNav:PostInit', () => {
this.bookreader.init();
setTimeout(() => {
this.bookreader.resize();
this.bookreader.jumpToIndex(0);
}, 500); /* wait for bookreader & its main container styles to load */
});
}
loadBookReader() {
const { options } = this.props;
const originalGetPageURI = window.BookReader.prototype.getPageURI;
const defaultOptions = {
el: `#${this.BookReaderRef.current.id}`,
showToolbar: false,
onePage: { autofit: 'height' }, // options: auto, width, height
enableFSLogoShortcut: true,
enableBookmarks: true,
enablePageResume: false,
enableTtsPlugin: false,
enableUrlPlugin: false,
defaults: 'mode/1up',
enableSearch: true,
searchInsideUrl: '/fulltext/inside.php',
initialSearchTerm: null,
imagesBaseURL: '/bookreader/BookReader/images/',
defaultStartLeaf: 0,
titleLeaf: 0,
/**
* Needed bypass to generate Image URL with scale factor.
* We must eliminate sooner than later to allow BookReader full image fetching control
* @param {Number} index - page index
* @param {Number} reduce - image size scale factor
* @param {Number} rotate - degrees of rotation
*/
getPageURI: (index, reduce = 1, rotate = 0) => {
// IA only supports power of 2 reduces
const brReduce = Math.pow(2, Math.floor(Math.log2(Math.max(1, reduce))));
let uri = originalGetPageURI.call(this.bookreader, index, brReduce, rotate);
uri += (uri.indexOf('?') > -1 ? '&' : '?');
uri = `${uri}scale=${brReduce}&rotate=${rotate}`;
return uri;
},
controls: {
twoPage: { visible: false },
viewmode: { visible: false },
},
bookType: 'linerNotes', // bookType: linerNotes, book
};
const fullOptions = {
...defaultOptions,
...options,
};
this.bookreader = new window.BookReader(fullOptions);
window.br = this.bookreader; // keep for legacy
}
render() {
const { baseHost } = this.props;
return (
<section className="bookreader-wrapper liner-notes" {...this.props}>
<ia-bookreader
basehost={baseHost}
ref={this.iaBookreaderRef}
>
<div slot="main">
<div id="BookReader" className="BookReader" ref={this.BookReaderRef} />
</div>
</ia-bookreader>
</section>
);
}
}
BookReaderWrapper.displayName = 'BookReaderWrapper';
BookReaderWrapper.defaultProps = {
options: {},
userSignedIn: false,
item: null,
baseHost: ''
};
BookReaderWrapper.propTypes = {
options: PropTypes.object,
userSignedIn: PropTypes.bool,
item: PropTypes.object,
baseHost: PropTypes.string
};
|