mirror of
https://github.com/john-okeefe/foliate-js.git
synced 2026-09-09 11:29:14 -04:00
@@ -123,7 +123,7 @@ One advantage of having such an interface is that one can easily use it for read
|
|||||||
|
|
||||||
### Mobipocket and Kindle Files
|
### Mobipocket and Kindle Files
|
||||||
|
|
||||||
It can read both MOBI and KF8 (.azw3, and combo .mobi files) from a `File` (or `Blob`) object. For MOBI files, it decompresses all text at once and splits the raw markup into sections at every `<mbp:pagebreak>`, instead of outputing one long page for the whole book, which drastically improves rendering performance. For KF8 files, it tries to decompress as little text as possible when loading a section, but it can still be quite slow due to the slowness of the current HUFF/CDIC decompressor implementation. In all cases, images and other resources are not loaded until they are needed.
|
It can read both MOBI and KF8 (.azw3, and combo .mobi files) from a `File` (or `Blob`) object. For MOBI files, it decompresses all text at once and splits the raw markup into sections at every `<mbp:pagebreak>`, instead of outputting one long page for the whole book, which drastically improves rendering performance. For KF8 files, it tries to decompress as little text as possible when loading a section, but it can still be quite slow due to the slowness of the current HUFF/CDIC decompressor implementation. In all cases, images and other resources are not loaded until they are needed.
|
||||||
|
|
||||||
Note that KF8 files can contain fonts that are zlib-compressed. They need to be decompressed with an external library. The demo uses [fflate](https://github.com/101arrowz/fflate) to decompress them.
|
Note that KF8 files can contain fonts that are zlib-compressed. They need to be decompressed with an external library. The demo uses [fflate](https://github.com/101arrowz/fflate) to decompress them.
|
||||||
|
|
||||||
@@ -237,7 +237,7 @@ A range CFI is an object `{ parent, start, end }`, each property being the same
|
|||||||
|
|
||||||
The parser uses a state machine rather than regex, and should handle assertions that contain escaped characters correctly (see tests for examples of this).
|
The parser uses a state machine rather than regex, and should handle assertions that contain escaped characters correctly (see tests for examples of this).
|
||||||
|
|
||||||
It has the ability ignore nodes, which is needed if you want to inject your own nodes into the document without affecting CFIs. To do this, you need to pass the optional filter function that works similarily to the filter function of [`TreeWalker`s](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker):
|
It has the ability ignore nodes, which is needed if you want to inject your own nodes into the document without affecting CFIs. To do this, you need to pass the optional filter function that works similarly to the filter function of [`TreeWalker`s](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker):
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const filter = node => node.nodeType !== 1 ? NodeFilter.FILTER_ACCEPT
|
const filter = node => node.nodeType !== 1 ? NodeFilter.FILTER_ACCEPT
|
||||||
@@ -356,7 +356,7 @@ document.querySelector('foliate-quoteimage').getBlob({
|
|||||||
|
|
||||||
The main use of the library is for use in [Foliate](https://github.com/johnfactotum/foliate), which uses WebKitGTK. As such it's the only engine that has been tested extensively. But it should also work in Chromium and Firefox.
|
The main use of the library is for use in [Foliate](https://github.com/johnfactotum/foliate), which uses WebKitGTK. As such it's the only engine that has been tested extensively. But it should also work in Chromium and Firefox.
|
||||||
|
|
||||||
Apart from the renderers, using the modules outside browsers is also possible. Most features depend on having the global objects `Blob`, `TextDecoder`, `TextEncoder`, `DOMParser`, `XMLSerializer`, and `URL`, and should work if you polyfill them. Note that `epubcfi.js` can be used as is in any envirnoment if you only need to parse or sort CFIs.
|
Apart from the renderers, using the modules outside browsers is also possible. Most features depend on having the global objects `Blob`, `TextDecoder`, `TextEncoder`, `DOMParser`, `XMLSerializer`, and `URL`, and should work if you polyfill them. Note that `epubcfi.js` can be used as is in any environment if you only need to parse or sort CFIs.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
@@ -120,7 +120,7 @@ const pathRelative = (from, to) => {
|
|||||||
const pathDirname = str => str.slice(0, str.lastIndexOf('/') + 1)
|
const pathDirname = str => str.slice(0, str.lastIndexOf('/') + 1)
|
||||||
|
|
||||||
// replace asynchronously and sequentially
|
// replace asynchronously and sequentially
|
||||||
// same techinque as https://stackoverflow.com/a/48032528
|
// same technique as https://stackoverflow.com/a/48032528
|
||||||
const replaceSeries = async (str, regex, f) => {
|
const replaceSeries = async (str, regex, f) => {
|
||||||
const matches = []
|
const matches = []
|
||||||
str.replace(regex, (...args) => (matches.push(args), null))
|
str.replace(regex, (...args) => (matches.push(args), null))
|
||||||
|
|||||||
@@ -148,7 +148,7 @@ const annotationLayerBuilderCSS = `
|
|||||||
--input-disabled-border-color: GrayText;
|
--input-disabled-border-color: GrayText;
|
||||||
--input-hover-border-color: Highlight;
|
--input-hover-border-color: Highlight;
|
||||||
--link-outline: 1.5px solid LinkText;
|
--link-outline: 1.5px solid LinkText;
|
||||||
--hcm-highligh-filter: invert(100%);
|
--hcm-highlight-filter: invert(100%);
|
||||||
}
|
}
|
||||||
.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
|
.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
|
||||||
.annotationLayer .choiceWidgetAnnotation select:required,
|
.annotationLayer .choiceWidgetAnnotation select:required,
|
||||||
@@ -159,7 +159,7 @@ const annotationLayerBuilderCSS = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.annotationLayer .linkAnnotation:hover {
|
.annotationLayer .linkAnnotation:hover {
|
||||||
backdrop-filter: var(--hcm-highligh-filter);
|
backdrop-filter: var(--hcm-highlight-filter);
|
||||||
}
|
}
|
||||||
|
|
||||||
.annotationLayer .linkAnnotation > a:hover {
|
.annotationLayer .linkAnnotation > a:hover {
|
||||||
@@ -180,7 +180,7 @@ const annotationLayerBuilderCSS = `
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
backdrop-filter: var(--hcm-highligh-filter);
|
backdrop-filter: var(--hcm-highlight-filter);
|
||||||
content: "";
|
content: "";
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -109,11 +109,11 @@ export const search = (strs, query, options) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const searchMatcher = (textWalker, opts) => {
|
export const searchMatcher = (textWalker, opts) => {
|
||||||
const { defalutLocale, matchCase, matchDiacritics, matchWholeWords } = opts
|
const { defaultLocale, matchCase, matchDiacritics, matchWholeWords } = opts
|
||||||
return function* (doc, query) {
|
return function* (doc, query) {
|
||||||
const iter = textWalker(doc, function* (strs, makeRange) {
|
const iter = textWalker(doc, function* (strs, makeRange) {
|
||||||
for (const result of search(strs, query, {
|
for (const result of search(strs, query, {
|
||||||
locales: doc.body.lang || doc.documentElement.lang || defalutLocale || 'en',
|
locales: doc.body.lang || doc.documentElement.lang || defaultLocale || 'en',
|
||||||
granularity: matchWholeWords ? 'word' : 'grapheme',
|
granularity: matchWholeWords ? 'word' : 'grapheme',
|
||||||
sensitivity: matchDiacritics && matchCase ? 'variant'
|
sensitivity: matchDiacritics && matchCase ? 'variant'
|
||||||
: matchDiacritics && !matchCase ? 'accent'
|
: matchDiacritics && !matchCase ? 'accent'
|
||||||
|
|||||||
Reference in New Issue
Block a user