mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-05 15:32:55 +02:00
Merge branch 'v0.3' of https://github.com/futurepress/epub.js into v0.3
This commit is contained in:
Fred Chasen
commit
e9d7e79158
7 changed files with 2687 additions and 1065 deletions
|
|
@ -23,7 +23,8 @@
|
|||
var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
|
||||
var rendition = book.renderTo("viewer", {
|
||||
width: "100%",
|
||||
height: 600
|
||||
height: 600,
|
||||
manager: "continuous"
|
||||
});
|
||||
|
||||
rendition.display("chapter_007.xhtml");
|
||||
|
|
@ -90,11 +91,11 @@
|
|||
console.log(location);
|
||||
});
|
||||
|
||||
/*
|
||||
rendition.themes.register("dark", "theme.css");
|
||||
rendition.themes.register("light", "theme.css");
|
||||
rendition.themes.register("tan", "theme.css");
|
||||
*/
|
||||
|
||||
rendition.themes.register("dark", "themes.css");
|
||||
rendition.themes.register("light", "themes.css");
|
||||
rendition.themes.register("tan", "themes.css");
|
||||
|
||||
|
||||
|
||||
rendition.themes.default({
|
||||
|
|
@ -107,8 +108,8 @@
|
|||
}
|
||||
});
|
||||
|
||||
// rendition.themes.select("tan");
|
||||
// rendition.themes.fontSize("140%");
|
||||
rendition.themes.select("tan");
|
||||
rendition.themes.fontSize("140%");
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
3474
package-lock.json
generated
3474
package-lock.json
generated
File diff suppressed because it is too large
Load diff
58
package.json
58
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "epubjs",
|
||||
"version": "0.3.47",
|
||||
"version": "0.3.49",
|
||||
"description": "Parse and Render Epubs",
|
||||
"main": "lib/index.js",
|
||||
"module": "src/index.js",
|
||||
|
|
@ -24,55 +24,55 @@
|
|||
"author": "fchasen@gmail.com",
|
||||
"license": "BSD-2-Clause",
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.22.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-loader": "^6.2.10",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-add-module-exports": "^0.2.1",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-polyfill": "^6.22.0",
|
||||
"babel-preset-env": "1.1.8",
|
||||
"babel-preset-es2015": "^6.22.0",
|
||||
"babili-webpack-plugin": "0.0.10",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-env": "1.6.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babili-webpack-plugin": "0.1.2",
|
||||
"colors": "^1.1.2",
|
||||
"connect": "^3.5.0",
|
||||
"eslint": "^3.15.0",
|
||||
"express": "^4.14.1",
|
||||
"connect": "^3.6.3",
|
||||
"eslint": "^4.5.0",
|
||||
"express": "^4.15.4",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-connect": "~5.0.0",
|
||||
"gulp-documentation": "fchasen/gulp-documentation",
|
||||
"gulp-documentation": "github:fchasen/gulp-documentation",
|
||||
"gulp-jshint": "^2.0.4",
|
||||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-size": "^2.1.0",
|
||||
"gulp-sourcemaps": "^2.4.1",
|
||||
"gulp-uglify": "^2.0.1",
|
||||
"gulp-sourcemaps": "^2.6.1",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"gulp-util": "^3.0.8",
|
||||
"jquery": "^3.1.1",
|
||||
"jshint": "^2.9.4",
|
||||
"karma": "^1.4.1",
|
||||
"jquery": "^3.2.1",
|
||||
"jshint": "^2.9.5",
|
||||
"karma": "^1.7.0",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-mocha-reporter": "^2.2.2",
|
||||
"karma-phantomjs-launcher": "^1.0.2",
|
||||
"karma-mocha-reporter": "^2.2.4",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-webpack": "^2.0.2",
|
||||
"mocha": "^3.2.0",
|
||||
"mocha-loader": "^1.1.0",
|
||||
"morgan": "^1.8.0",
|
||||
"karma-webpack": "^2.0.4",
|
||||
"mocha": "^3.5.0",
|
||||
"mocha-loader": "^1.1.1",
|
||||
"morgan": "^1.8.2",
|
||||
"optimist": "^0.6.1",
|
||||
"portfinder": "^1.0.13",
|
||||
"raw-loader": "^0.5.1",
|
||||
"serve-static": "^1.11.2",
|
||||
"serve-static": "^1.12.4",
|
||||
"uglify": "^0.1.5",
|
||||
"vinyl-buffer": "^1.0.0",
|
||||
"vinyl-source-stream": "^1.1.0",
|
||||
"webpack": "^v2.2.1",
|
||||
"webpack-dev-middleware": "^1.10.0",
|
||||
"webpack-dev-server": "^2.6.1"
|
||||
"webpack": "^v3.5.5",
|
||||
"webpack-dev-middleware": "^1.12.0",
|
||||
"webpack-dev-server": "^2.7.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"event-emitter": "^0.3.5",
|
||||
"jszip": "^3.1.3",
|
||||
"jszip": "^3.1.4",
|
||||
"lodash": "^4.17.4",
|
||||
"marks-pane": "^1.0.2",
|
||||
"path-webpack": "0.0.3",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import EventEmitter from "event-emitter";
|
||||
import {isNumber, prefixed} from "./utils/core";
|
||||
import {isNumber, prefixed, borders} from "./utils/core";
|
||||
import EpubCFI from "./epubcfi";
|
||||
import Mapping from "./mapping";
|
||||
import {replaceLinks} from "./utils/replacements";
|
||||
|
|
@ -107,9 +107,10 @@ class Contents {
|
|||
}
|
||||
|
||||
textWidth() {
|
||||
var width;
|
||||
var range = this.document.createRange();
|
||||
var content = this.content || this.document.body;
|
||||
let width;
|
||||
let range = this.document.createRange();
|
||||
let content = this.content || this.document.body;
|
||||
let border = borders(content);
|
||||
|
||||
// Select the contents of frame
|
||||
range.selectNodeContents(content);
|
||||
|
|
@ -117,20 +118,28 @@ class Contents {
|
|||
// get the width of the text content
|
||||
width = range.getBoundingClientRect().width;
|
||||
|
||||
return width;
|
||||
if (border && border.width) {
|
||||
width += border.width;
|
||||
}
|
||||
|
||||
return Math.round(width);
|
||||
}
|
||||
|
||||
textHeight() {
|
||||
var height;
|
||||
var range = this.document.createRange();
|
||||
var content = this.content || this.document.body;
|
||||
let height;
|
||||
let range = this.document.createRange();
|
||||
let content = this.content || this.document.body;
|
||||
let border = borders(content);
|
||||
|
||||
range.selectNodeContents(content);
|
||||
|
||||
height = range.getBoundingClientRect().height;
|
||||
|
||||
return height;
|
||||
if (height && border.height) {
|
||||
height += border.height;
|
||||
}
|
||||
|
||||
return Math.round(height);
|
||||
}
|
||||
|
||||
scrollWidth() {
|
||||
|
|
@ -323,7 +332,6 @@ class Contents {
|
|||
resizeCheck() {
|
||||
let width = this.textWidth();
|
||||
let height = this.textHeight();
|
||||
|
||||
if (width != this._size.width || height != this._size.height) {
|
||||
|
||||
this._size = {
|
||||
|
|
@ -342,10 +350,7 @@ class Contents {
|
|||
// Test size again
|
||||
clearTimeout(this.expanding);
|
||||
|
||||
width = this.textWidth();
|
||||
height = this.textHeight();
|
||||
|
||||
this.resizeCheck();
|
||||
requestAnimationFrame(this.resizeCheck.bind(this));
|
||||
|
||||
this.expanding = setTimeout(this.resizeListeners.bind(this), 350);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -128,8 +128,10 @@ class Layout {
|
|||
// colWidth = (width - gap) / divisor;
|
||||
// gap = gap / divisor;
|
||||
colWidth = (width / divisor) - gap;
|
||||
pageWidth = colWidth + gap;
|
||||
} else {
|
||||
colWidth = width;
|
||||
pageWidth = width;
|
||||
}
|
||||
|
||||
if (this.name === "pre-paginated" && divisor > 1) {
|
||||
|
|
@ -137,7 +139,6 @@ class Layout {
|
|||
}
|
||||
|
||||
spreadWidth = (colWidth * divisor) + gap;
|
||||
pageWidth = colWidth + (gap / 2);
|
||||
|
||||
delta = width;
|
||||
|
||||
|
|
|
|||
|
|
@ -125,7 +125,9 @@ class DefaultViewManager {
|
|||
this.removeEventListeners();
|
||||
|
||||
this.views.each(function(view){
|
||||
view.destroy();
|
||||
if (view) {
|
||||
view.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
this.stage.destroy();
|
||||
|
|
@ -529,7 +531,7 @@ class DefaultViewManager {
|
|||
|
||||
// Find mapping
|
||||
let start = left + container.left - position + used;
|
||||
let end = start + this.layout.spreadWidth - used;
|
||||
let end = start + this.layout.width - used;
|
||||
|
||||
let mapping = this.mapping.page(view.contents, view.section.cfiBase, start, end);
|
||||
|
||||
|
|
@ -725,7 +727,9 @@ class DefaultViewManager {
|
|||
if(this.views) {
|
||||
|
||||
this.views.each(function(view){
|
||||
view.setLayout(layout);
|
||||
if (view) {
|
||||
view.setLayout(layout);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -757,7 +761,10 @@ class DefaultViewManager {
|
|||
getContents(){
|
||||
var contents = [];
|
||||
this.views.each(function(view){
|
||||
contents.push(view.contents);
|
||||
const viewContents = view && view.contents;
|
||||
if (viewContents) {
|
||||
contents.push(viewContents);
|
||||
}
|
||||
});
|
||||
return contents;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -140,13 +140,10 @@ class IframeView {
|
|||
// Listen for events that require an expansion of the iframe
|
||||
this.addListeners();
|
||||
|
||||
// Wait for formating to apply
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
// Expand the iframe to the full size of the content
|
||||
this.expand();
|
||||
resolve();
|
||||
}, 1);
|
||||
// Expand the iframe to the full size of the content
|
||||
this.expand();
|
||||
resolve();
|
||||
});
|
||||
|
||||
}.bind(this))
|
||||
|
|
@ -221,7 +218,6 @@ class IframeView {
|
|||
|
||||
// this.contents.layout();
|
||||
this.expand();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -241,149 +237,69 @@ class IframeView {
|
|||
if(this.layout.name === "pre-paginated") return;
|
||||
|
||||
this._expanding = true;
|
||||
|
||||
// Expand Horizontally
|
||||
// if(height && !width) {
|
||||
if(this.settings.axis === "horizontal") {
|
||||
// Get the width of the text
|
||||
textWidth = this.contents.textWidth();
|
||||
width = this.contentWidth(textWidth);
|
||||
width = this.contents.textWidth();
|
||||
|
||||
// Check if the textWidth has changed
|
||||
if(width != this._width){
|
||||
// Get the contentWidth by resizing the iframe
|
||||
// Check with a min reset of the textWidth
|
||||
|
||||
// Add padding back
|
||||
if (width % this.layout.width > 0) {
|
||||
width += this.layout.gap / 2;
|
||||
}
|
||||
/*
|
||||
columns = Math.ceil(width / this.settings.layout.delta);
|
||||
if ( this.settings.layout.divisor > 1 &&
|
||||
this.settings.layout.name === "reflowable" &&
|
||||
(columns % 2 > 0)) {
|
||||
// add a blank page
|
||||
width += this.settings.layout.gap + this.settings.layout.columnWidth;
|
||||
}
|
||||
*/
|
||||
|
||||
// Save the textWdith
|
||||
this._textWidth = textWidth;
|
||||
|
||||
// Save the contentWidth
|
||||
this._contentWidth = width;
|
||||
} else {
|
||||
// Otherwise assume content height hasn't changed
|
||||
width = this._contentWidth;
|
||||
if (width % this.layout.pageWidth > 0) {
|
||||
width = Math.ceil(width / this.layout.pageWidth) * this.layout.pageWidth;
|
||||
}
|
||||
|
||||
/*
|
||||
columns = Math.ceil(width / this.settings.layout.delta);
|
||||
if ( this.settings.layout.divisor > 1 &&
|
||||
this.settings.layout.name === "reflowable" &&
|
||||
(columns % 2 > 0)) {
|
||||
// add a blank page
|
||||
width += this.settings.layout.gap + this.settings.layout.columnWidth;
|
||||
}
|
||||
*/
|
||||
} // Expand Vertically
|
||||
else if(this.settings.axis === "vertical") {
|
||||
textHeight = this.contents.textHeight();
|
||||
if(textHeight != this._textHeight){
|
||||
height = this.contentHeight(textHeight);
|
||||
this._textHeight = textHeight;
|
||||
this._contentHeight = height;
|
||||
} else {
|
||||
height = this._contentHeight;
|
||||
}
|
||||
|
||||
height = this.contents.textHeight();
|
||||
}
|
||||
|
||||
// Only Resize if dimensions have changed or
|
||||
// if Frame is still hidden, so needs reframing
|
||||
if(this._needsReframe || width != this._width || height != this._height){
|
||||
this.resize(width, height);
|
||||
this.reframe(width, height);
|
||||
}
|
||||
|
||||
this._expanding = false;
|
||||
}
|
||||
|
||||
contentWidth(min) {
|
||||
var prev;
|
||||
var width;
|
||||
|
||||
// Save previous width
|
||||
prev = this.iframe.style.width;
|
||||
// Set the iframe size to min, width will only ever be greater
|
||||
// Will preserve the aspect ratio
|
||||
this.iframe.style.width = (min || 0) + "px";
|
||||
// Get the scroll overflow width
|
||||
width = this.contents.scrollWidth();
|
||||
// Reset iframe size back
|
||||
this.iframe.style.width = prev;
|
||||
return width;
|
||||
}
|
||||
|
||||
contentHeight(min) {
|
||||
var prev;
|
||||
var height;
|
||||
|
||||
prev = this.iframe.style.height;
|
||||
this.iframe.style.height = (min || 0) + "px";
|
||||
height = this.contents.scrollHeight();
|
||||
|
||||
this.iframe.style.height = prev;
|
||||
return height;
|
||||
}
|
||||
|
||||
|
||||
resize(width, height) {
|
||||
|
||||
if(!this.iframe) return;
|
||||
reframe(width, height) {
|
||||
var size;
|
||||
|
||||
if(isNumber(width)){
|
||||
this.element.style.width = width + "px";
|
||||
this.iframe.style.width = width + "px";
|
||||
this._width = width;
|
||||
}
|
||||
|
||||
if(isNumber(height)){
|
||||
this.element.style.height = height + "px";
|
||||
this.iframe.style.height = height + "px";
|
||||
this._height = height;
|
||||
}
|
||||
|
||||
this.iframeBounds = bounds(this.iframe);
|
||||
|
||||
this.reframe(this.iframeBounds.width, this.iframeBounds.height);
|
||||
|
||||
}
|
||||
|
||||
reframe(width, height) {
|
||||
var size;
|
||||
|
||||
// if(!this.displayed) {
|
||||
// this._needsReframe = true;
|
||||
// return;
|
||||
// }
|
||||
|
||||
if(isNumber(width)){
|
||||
this.element.style.width = width + "px";
|
||||
}
|
||||
|
||||
if(isNumber(height)){
|
||||
this.element.style.height = height + "px";
|
||||
}
|
||||
|
||||
this.elementBounds = bounds(this.element);
|
||||
|
||||
let widthDelta = this.prevBounds ? this.elementBounds.width - this.prevBounds.width : this.elementBounds.width;
|
||||
let heightDelta = this.prevBounds ? this.elementBounds.height - this.prevBounds.height : this.elementBounds.height;
|
||||
let widthDelta = this.prevBounds ? width - this.prevBounds.width : width;
|
||||
let heightDelta = this.prevBounds ? height - this.prevBounds.height : height;
|
||||
|
||||
size = {
|
||||
width: this.elementBounds.width,
|
||||
height: this.elementBounds.height,
|
||||
width: width,
|
||||
height: height,
|
||||
widthDelta: widthDelta,
|
||||
heightDelta: heightDelta,
|
||||
};
|
||||
|
||||
this.onResize(this, size);
|
||||
|
||||
if (this.contents) {
|
||||
this.settings.layout.format(this.contents);
|
||||
}
|
||||
|
||||
this.emit("resized", size);
|
||||
|
||||
this.prevBounds = this.elementBounds;
|
||||
this.prevBounds = size;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -445,12 +361,18 @@ class IframeView {
|
|||
this.contents.on("expand", () => {
|
||||
if(this.displayed && this.iframe) {
|
||||
this.expand();
|
||||
if (this.contents) {
|
||||
this.settings.layout.format(this.contents);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.contents.on("resize", (e) => {
|
||||
if(this.displayed && this.iframe) {
|
||||
this.expand();
|
||||
if (this.contents) {
|
||||
this.settings.layout.format(this.contents);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -465,12 +387,6 @@ class IframeView {
|
|||
this.settings.axis = axis;
|
||||
}
|
||||
|
||||
resizeListenters() {
|
||||
// Test size again
|
||||
clearTimeout(this.expanding);
|
||||
this.expanding = setTimeout(this.expand.bind(this), 350);
|
||||
}
|
||||
|
||||
addListeners() {
|
||||
//TODO: Add content listeners for expanding
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue