mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-03 14:59:18 +02:00
fixed column width bug
This commit is contained in:
fchasen
parent
02a9a4b566
commit
a6815c0398
10 changed files with 154 additions and 25 deletions
|
|
@ -3885,10 +3885,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
|
|||
cutoff = 800;
|
||||
|
||||
//-- Check the width and create even width columns
|
||||
var width = (_width % 2 === 0) ? _width : Math.floor(_width) - 1;
|
||||
var section = Math.ceil(width / 8);
|
||||
var fullWidth = Math.floor(_width);
|
||||
var width = (fullWidth % 2 === 0) ? fullWidth : fullWidth - 1;
|
||||
var section = Math.floor(width / 8);
|
||||
var gap = (section % 2 === 0) ? section : section - 1;
|
||||
|
||||
//-- Double Page
|
||||
var colWidth = Math.floor((width - gap) / divisor);
|
||||
|
||||
|
|
@ -3896,11 +3896,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
|
|||
this.spreadWidth = (colWidth + gap) * divisor;
|
||||
|
||||
|
||||
documentElement.style.width = "auto"; //-- reset width for calculations
|
||||
|
||||
documentElement.style.overflow = "hidden";
|
||||
|
||||
//documentElement.style.width = width + "px";
|
||||
// Must be set to the new calculated width or the columns will be off
|
||||
documentElement.style.width = width + "px";
|
||||
|
||||
//-- Adjust height
|
||||
documentElement.style.height = _height + "px";
|
||||
|
|
|
|||
2
build/epub.min.js
vendored
2
build/epub.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -3884,10 +3884,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
|
|||
cutoff = 800;
|
||||
|
||||
//-- Check the width and create even width columns
|
||||
var width = (_width % 2 === 0) ? _width : Math.floor(_width) - 1;
|
||||
var section = Math.ceil(width / 8);
|
||||
var fullWidth = Math.floor(_width);
|
||||
var width = (fullWidth % 2 === 0) ? fullWidth : fullWidth - 1;
|
||||
var section = Math.floor(width / 8);
|
||||
var gap = (section % 2 === 0) ? section : section - 1;
|
||||
|
||||
//-- Double Page
|
||||
var colWidth = Math.floor((width - gap) / divisor);
|
||||
|
||||
|
|
@ -3895,11 +3895,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
|
|||
this.spreadWidth = (colWidth + gap) * divisor;
|
||||
|
||||
|
||||
documentElement.style.width = "auto"; //-- reset width for calculations
|
||||
|
||||
documentElement.style.overflow = "hidden";
|
||||
|
||||
//documentElement.style.width = width + "px";
|
||||
// Must be set to the new calculated width or the columns will be off
|
||||
documentElement.style.width = width + "px";
|
||||
|
||||
//-- Adjust height
|
||||
documentElement.style.height = _height + "px";
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ EPUBJS.Reader = function(path, _options) {
|
|||
reload: this.settings.reload,
|
||||
contained: this.settings.contained,
|
||||
bookKey: this.settings.bookKey,
|
||||
styles: this.settings.styles,
|
||||
styles: this.settings.styles
|
||||
});
|
||||
|
||||
if(this.settings.previousLocationCfi) {
|
||||
|
|
|
|||
|
|
@ -262,6 +262,7 @@ input:-moz-placeholder {
|
|||
height: 80%;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
margin-left: -1px;
|
||||
top: 10%;
|
||||
opacity: .15;
|
||||
box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
|
||||
|
|
@ -734,4 +735,3 @@ input:-moz-placeholder {
|
|||
.icon-columns:before { content: '\e810'; } /* '' */
|
||||
.icon-list:before { content: '\e800'; } /* '' */
|
||||
.icon-resize-small:before { content: '\e808'; } /* '' */
|
||||
|
||||
|
|
|
|||
2
demo/js/epub.min.js
vendored
2
demo/js/epub.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -58,7 +58,7 @@ EPUBJS.Reader = function(path, _options) {
|
|||
reload: this.settings.reload,
|
||||
contained: this.settings.contained,
|
||||
bookKey: this.settings.bookKey,
|
||||
styles: this.settings.styles,
|
||||
styles: this.settings.styles
|
||||
});
|
||||
|
||||
if(this.settings.previousLocationCfi) {
|
||||
|
|
|
|||
|
|
@ -65,10 +65,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
|
|||
cutoff = 800;
|
||||
|
||||
//-- Check the width and create even width columns
|
||||
var width = (_width % 2 === 0) ? _width : Math.floor(_width) - 1;
|
||||
var section = Math.ceil(width / 8);
|
||||
var fullWidth = Math.floor(_width);
|
||||
var width = (fullWidth % 2 === 0) ? fullWidth : fullWidth - 1;
|
||||
var section = Math.floor(width / 8);
|
||||
var gap = (section % 2 === 0) ? section : section - 1;
|
||||
|
||||
//-- Double Page
|
||||
var colWidth = Math.floor((width - gap) / divisor);
|
||||
|
||||
|
|
@ -76,11 +76,10 @@ EPUBJS.Layout.ReflowableSpreads.prototype.format = function(documentElement, _wi
|
|||
this.spreadWidth = (colWidth + gap) * divisor;
|
||||
|
||||
|
||||
documentElement.style.width = "auto"; //-- reset width for calculations
|
||||
|
||||
documentElement.style.overflow = "hidden";
|
||||
|
||||
//documentElement.style.width = width + "px";
|
||||
// Must be set to the new calculated width or the columns will be off
|
||||
documentElement.style.width = width + "px";
|
||||
|
||||
//-- Adjust height
|
||||
documentElement.style.height = _height + "px";
|
||||
|
|
|
|||
|
|
@ -235,10 +235,15 @@
|
|||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
/* #qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
} */
|
||||
|
||||
#qunit-fixture #viewer {
|
||||
margin: 10px auto;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
127
tests/render.js
127
tests/render.js
|
|
@ -213,3 +213,130 @@ asyncTest("Switch Spreads to Single", 3, function() {
|
|||
render.then(result);
|
||||
});
|
||||
|
||||
asyncTest("Go to chapter 4 and advance through chapter, checking position with width set", 11, function() {
|
||||
var Book = ePub('../demo/moby-dick/', { width: 1100.5, height: 612 });
|
||||
|
||||
var render = Book.renderTo("qunit-fixture");
|
||||
|
||||
var result = function(){
|
||||
|
||||
var $iframe = $( "iframe", "#qunit-fixture" ),
|
||||
$body;
|
||||
|
||||
equal( $iframe.length, 1, "iframe added successfully" );
|
||||
|
||||
start();
|
||||
|
||||
$body = $iframe.contents().find("body");
|
||||
equal( $body.scrollLeft(), 0, "on page 1");
|
||||
|
||||
stop();
|
||||
|
||||
Book.goto("chapter_003.xhtml").then(function(){
|
||||
|
||||
start();
|
||||
|
||||
equal(Book.renderer.layout.spreadWidth, 1240);
|
||||
|
||||
$body = $iframe.contents().find("body");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), 1240, "on page 2");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), 2480, "on page 3");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), 3720, "on page 4");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), 4960, "on page 5");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), 6200, "on page 6");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), 7440, "on page 7");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), 8680, "on page 8");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), 9920, "on page 9");
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
render.then(result);
|
||||
|
||||
|
||||
});
|
||||
|
||||
asyncTest("Go to chapter 4 and advance through chapter, checking position with width from div", 11, function() {
|
||||
var Book = ePub('../demo/moby-dick/');
|
||||
var viewer = document.createElement("div");
|
||||
var $viewer;
|
||||
var render;
|
||||
var width = 1236;
|
||||
|
||||
var result = function(){
|
||||
|
||||
var $iframe = $( "iframe", "#viewer" ),
|
||||
$body;
|
||||
|
||||
equal( $iframe.length, 1, "iframe added successfully" );
|
||||
|
||||
start();
|
||||
|
||||
$body = $iframe.contents().find("body");
|
||||
equal( $body.scrollLeft(), 0, "on page 1");
|
||||
|
||||
stop();
|
||||
|
||||
Book.goto("chapter_003.xhtml").then(function(){
|
||||
|
||||
start();
|
||||
|
||||
console.log(Book.renderer.render.width)
|
||||
equal(Book.renderer.layout.spreadWidth, width, "Spread width is correctly calculated");
|
||||
$body = $iframe.contents().find("body");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), width, "on page 2");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), width * 2, "on page 3");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), width * 3, "on page 4");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), width * 4, "on page 5");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), width * 5, "on page 6");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), width * 6, "on page 7");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), width * 7, "on page 8");
|
||||
|
||||
Book.nextPage();
|
||||
equal( $body.scrollLeft(), width * 8, "on page 9");
|
||||
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
viewer.id = "viewer";
|
||||
$("#qunit-fixture").append(viewer);
|
||||
$viewer = $("#viewer");
|
||||
|
||||
$viewer.width(1100.797);
|
||||
$viewer.height(612);
|
||||
|
||||
render = Book.renderTo("viewer");
|
||||
render.then(result);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue