yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-03 14:59:18 +02:00
Code Issues Releases Wiki Activity

Merge pull request #1 from Makiwin/fix-scrolling-issue

Browse source 
fix scroll bug
This commit is contained in:
Massimiliano Vinciprova 2022-12-29 12:41:34 +01:00 • committed by GitHub
commit 94815e333d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 363 additions and 358 deletions
Download patch file Download diff file Expand all files Collapse all files

185
src/managers/helpers/stage.js
View file

@ -1,17 +1,22 @@
import {uuid, isNumber, isElement, windowBounds, extend} from "../../utils/core"; import {
import throttle from 'lodash/throttle' uuid,
isNumber,
isElement,
windowBounds,
extend,
} from '../../utils/core';
import throttle from 'lodash/throttle';
class Stage { class Stage {
constructor(_options) { constructor(_options) {
this.settings = _options || {}; this.settings = _options || {};
this.id = "epubjs-container-" + uuid(); this.id = 'epubjs-container-' + uuid();
this.container = this.create(this.settings); this.container = this.create(this.settings);
if (this.settings.hidden) { if (this.settings.hidden) {
this.wrapper = this.wrap(this.container); this.wrapper = this.wrap(this.container);
} }
} }
/* /*
@ -22,37 +27,38 @@ class Stage {
let height = options.height; // !== false ? options.height : "100%"; let height = options.height; // !== false ? options.height : "100%";
let width = options.width; // !== false ? options.width : "100%"; let width = options.width; // !== false ? options.width : "100%";
let overflow = options.overflow || false; let overflow = options.overflow || false;
let axis = options.axis || "vertical"; let axis = options.axis || 'vertical';
let direction = options.direction; let direction = options.direction;
extend(this.settings, options); extend(this.settings, options);
if (options.height && isNumber(options.height)) { if (options.height && isNumber(options.height)) {
height = options.height + "px"; height = options.height + 'px';
} }
if (options.width && isNumber(options.width)) { if (options.width && isNumber(options.width)) {
width = options.width + "px"; width = options.width + 'px';
} }
// Create new container element // Create new container element
let container = document.createElement("div"); let container = document.createElement('div');
container.id = this.id; container.id = this.id;
container.classList.add("epub-container"); container.classList.add('epub-container');
// Style Element // Style Element
// container.style.fontSize = "0"; // container.style.fontSize = "0";
container.style.wordSpacing = "0"; container.style.wordSpacing = '0';
container.style.lineHeight = "0"; container.style.lineHeight = '0';
container.style.verticalAlign = "top"; container.style.verticalAlign = 'top';
container.style.position = "relative"; container.style.position = 'relative';
container.style.overflowAnchor = 'none';
if(axis === "horizontal") { if (axis === 'horizontal') {
// container.style.whiteSpace = "nowrap"; // container.style.whiteSpace = "nowrap";
container.style.display = "flex"; container.style.display = 'flex';
container.style.flexDirection = "row"; container.style.flexDirection = 'row';
container.style.flexWrap = "nowrap"; container.style.flexWrap = 'nowrap';
} }
if (width) { if (width) {
@ -64,60 +70,58 @@ class Stage {
} }
if (overflow) { if (overflow) {
if (overflow === "scroll" && axis === "vertical") { if (overflow === 'scroll' && axis === 'vertical') {
container.style["overflow-y"] = overflow; container.style['overflow-y'] = overflow;
container.style["overflow-x"] = "hidden"; container.style['overflow-x'] = 'hidden';
} else if (overflow === "scroll" && axis === "horizontal") { } else if (overflow === 'scroll' && axis === 'horizontal') {
container.style["overflow-y"] = "hidden"; container.style['overflow-y'] = 'hidden';
container.style["overflow-x"] = overflow; container.style['overflow-x'] = overflow;
} else { } else {
container.style["overflow"] = overflow; container.style['overflow'] = overflow;
} }
} }
if (direction) { if (direction) {
container.dir = direction; container.dir = direction;
container.style["direction"] = direction; container.style['direction'] = direction;
} }
if (direction && this.settings.fullsize) { if (direction && this.settings.fullsize) {
document.body.style["direction"] = direction; document.body.style['direction'] = direction;
} }
return container; return container;
} }
wrap(container) { wrap(container) {
var wrapper = document.createElement("div"); var wrapper = document.createElement('div');
wrapper.style.visibility = "hidden"; wrapper.style.visibility = 'hidden';
wrapper.style.overflow = "hidden"; wrapper.style.overflow = 'hidden';
wrapper.style.width = "0"; wrapper.style.width = '0';
wrapper.style.height = "0"; wrapper.style.height = '0';
wrapper.appendChild(container); wrapper.appendChild(container);
return wrapper; return wrapper;
} }
getElement(_element) { getElement(_element) {
var element; var element;
if (isElement(_element)) { if (isElement(_element)) {
element = _element; element = _element;
} else if (typeof _element === "string") { } else if (typeof _element === 'string') {
element = document.getElementById(_element); element = document.getElementById(_element);
} }
if (!element) { if (!element) {
throw new Error("Not an Element"); throw new Error('Not an Element');
} }
return element; return element;
} }
attachTo(what) { attachTo(what) {
var element = this.getElement(what); var element = this.getElement(what);
var base; var base;
@ -136,7 +140,6 @@ class Stage {
this.element = element; this.element = element;
return element; return element;
} }
getContainer() { getContainer() {
@ -146,17 +149,19 @@ class Stage {
onResize(func) { onResize(func) {
// Only listen to window for resize event if width and height are not fixed. // Only listen to window for resize event if width and height are not fixed.
// This applies if it is set to a percent or auto. // This applies if it is set to a percent or auto.
if(!isNumber(this.settings.width) || if (!isNumber(this.settings.width) || !isNumber(this.settings.height)) {
!isNumber(this.settings.height) ) {
this.resizeFunc = throttle(func, 50); this.resizeFunc = throttle(func, 50);
window.addEventListener("resize", this.resizeFunc, false); window.addEventListener('resize', this.resizeFunc, false);
} }
} }
onOrientationChange(func) { onOrientationChange(func) {
this.orientationChangeFunc = func; this.orientationChangeFunc = func;
window.addEventListener("orientationchange", this.orientationChangeFunc, false); window.addEventListener(
'orientationchange',
this.orientationChangeFunc,
false
);
} }
size(width, height) { size(width, height) {
@ -170,11 +175,11 @@ class Stage {
if (bounds.width) { if (bounds.width) {
width = Math.floor(bounds.width); width = Math.floor(bounds.width);
this.container.style.width = width + "px"; this.container.style.width = width + 'px';
} }
} else { } else {
if (isNumber(width)) { if (isNumber(width)) {
this.container.style.width = width + "px"; this.container.style.width = width + 'px';
} else { } else {
this.container.style.width = width; this.container.style.width = width;
} }
@ -185,12 +190,11 @@ class Stage {
if (bounds.height) { if (bounds.height) {
height = bounds.height; height = bounds.height;
this.container.style.height = height + "px"; this.container.style.height = height + 'px';
} }
} else { } else {
if (isNumber(height)) { if (isNumber(height)) {
this.container.style.height = height + "px"; this.container.style.height = height + 'px';
} else { } else {
this.container.style.height = height; this.container.style.height = height;
} }
@ -207,48 +211,46 @@ class Stage {
this.containerStyles = window.getComputedStyle(this.container); this.containerStyles = window.getComputedStyle(this.container);
this.containerPadding = { this.containerPadding = {
left: parseFloat(this.containerStyles["padding-left"]) || 0, left: parseFloat(this.containerStyles['padding-left']) || 0,
right: parseFloat(this.containerStyles["padding-right"]) || 0, right: parseFloat(this.containerStyles['padding-right']) || 0,
top: parseFloat(this.containerStyles["padding-top"]) || 0, top: parseFloat(this.containerStyles['padding-top']) || 0,
bottom: parseFloat(this.containerStyles["padding-bottom"]) || 0 bottom: parseFloat(this.containerStyles['padding-bottom']) || 0,
}; };
// Bounds not set, get them from window // Bounds not set, get them from window
let _windowBounds = windowBounds(); let _windowBounds = windowBounds();
let bodyStyles = window.getComputedStyle(document.body); let bodyStyles = window.getComputedStyle(document.body);
let bodyPadding = { let bodyPadding = {
left: parseFloat(bodyStyles["padding-left"]) || 0, left: parseFloat(bodyStyles['padding-left']) || 0,
right: parseFloat(bodyStyles["padding-right"]) || 0, right: parseFloat(bodyStyles['padding-right']) || 0,
top: parseFloat(bodyStyles["padding-top"]) || 0, top: parseFloat(bodyStyles['padding-top']) || 0,
bottom: parseFloat(bodyStyles["padding-bottom"]) || 0 bottom: parseFloat(bodyStyles['padding-bottom']) || 0,
}; };
if (!_width) { if (!_width) {
width = _windowBounds.width - width = _windowBounds.width - bodyPadding.left - bodyPadding.right;
bodyPadding.left -
bodyPadding.right;
} }
if ((this.settings.fullsize && !_height) || !_height) { if ((this.settings.fullsize && !_height) || !_height) {
height = _windowBounds.height - height =
bodyPadding.top - _windowBounds.height - bodyPadding.top - bodyPadding.bottom;
bodyPadding.bottom;
} }
return { return {
width: width - width:
width -
this.containerPadding.left - this.containerPadding.left -
this.containerPadding.right, this.containerPadding.right,
height: height - height:
height -
this.containerPadding.top - this.containerPadding.top -
this.containerPadding.bottom this.containerPadding.bottom,
}; };
} }
bounds() { bounds() {
let box; let box;
if (this.container.style.overflow !== "visible") { if (this.container.style.overflow !== 'visible') {
box = this.container && this.container.getBoundingClientRect(); box = this.container && this.container.getBoundingClientRect();
} }
@ -257,14 +259,13 @@ class Stage {
} else { } else {
return box; return box;
} }
} }
getSheet() { getSheet() {
var style = document.createElement("style"); var style = document.createElement('style');
// WebKit hack --> https://davidwalsh.name/add-rules-stylesheets // WebKit hack --> https://davidwalsh.name/add-rules-stylesheets
style.appendChild(document.createTextNode("")); style.appendChild(document.createTextNode(''));
document.head.appendChild(style); document.head.appendChild(style);
@ -272,8 +273,8 @@ class Stage {
} }
addStyleRules(selector, rulesArray) { addStyleRules(selector, rulesArray) {
var scope = "#" + this.id + " "; var scope = '#' + this.id + ' ';
var rules = ""; var rules = '';
if (!this.sheet) { if (!this.sheet) {
this.sheet = this.getSheet(); this.sheet = this.getSheet();
@ -282,21 +283,21 @@ class Stage {
rulesArray.forEach(function (set) { rulesArray.forEach(function (set) {
for (var prop in set) { for (var prop in set) {
if (set.hasOwnProperty(prop)) { if (set.hasOwnProperty(prop)) {
rules += prop + ":" + set[prop] + ";"; rules += prop + ':' + set[prop] + ';';
} }
} }
}); });
this.sheet.insertRule(scope + selector + " {" + rules + "}", 0); this.sheet.insertRule(scope + selector + ' {' + rules + '}', 0);
} }
axis(axis) { axis(axis) {
if(axis === "horizontal") { if (axis === 'horizontal') {
this.container.style.display = "flex"; this.container.style.display = 'flex';
this.container.style.flexDirection = "row"; this.container.style.flexDirection = 'row';
this.container.style.flexWrap = "nowrap"; this.container.style.flexWrap = 'nowrap';
} else { } else {
this.container.style.display = "block"; this.container.style.display = 'block';
} }
this.settings.axis = axis; this.settings.axis = axis;
} }
@ -314,25 +315,28 @@ class Stage {
direction(dir) { direction(dir) {
if (this.container) { if (this.container) {
this.container.dir = dir; this.container.dir = dir;
this.container.style["direction"] = dir; this.container.style['direction'] = dir;
} }
if (this.settings.fullsize) { if (this.settings.fullsize) {
document.body.style["direction"] = dir; document.body.style['direction'] = dir;
} }
this.settings.dir = dir; this.settings.dir = dir;
} }
overflow(overflow) { overflow(overflow) {
if (this.container) { if (this.container) {
if (overflow === "scroll" && this.settings.axis === "vertical") { if (overflow === 'scroll' && this.settings.axis === 'vertical') {
this.container.style["overflow-y"] = overflow; this.container.style['overflow-y'] = overflow;
this.container.style["overflow-x"] = "hidden"; this.container.style['overflow-x'] = 'hidden';
} else if (overflow === "scroll" && this.settings.axis === "horizontal") { } else if (
this.container.style["overflow-y"] = "hidden"; overflow === 'scroll' &&
this.container.style["overflow-x"] = overflow; this.settings.axis === 'horizontal'
) {
this.container.style['overflow-y'] = 'hidden';
this.container.style['overflow-x'] = overflow;
} else { } else {
this.container.style["overflow"] = overflow; this.container.style['overflow'] = overflow;
} }
} }
this.settings.overflow = overflow; this.settings.overflow = overflow;
@ -342,7 +346,6 @@ class Stage {
var base; var base;
if (this.element) { if (this.element) {
if (this.settings.hidden) { if (this.settings.hidden) {
base = this.wrapper; base = this.wrapper;
} else { } else {
@ -353,9 +356,11 @@ class Stage {
this.element.removeChild(this.container); this.element.removeChild(this.container);
} }
window.removeEventListener("resize", this.resizeFunc); window.removeEventListener('resize', this.resizeFunc);
window.removeEventListener("orientationChange", this.orientationChangeFunc); window.removeEventListener(
'orientationChange',
this.orientationChangeFunc
);
} }
} }
} }