mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-05 15:32:55 +02:00
Updated iframe and contents css
This commit is contained in:
Fred Chasen
parent
f930e48cd6
commit
653e308464
4 changed files with 192 additions and 36 deletions
114
dist/epub.js
vendored
114
dist/epub.js
vendored
|
|
@ -6399,7 +6399,7 @@ Book.prototype.open = function(_url){
|
|||
// }
|
||||
uri = URI(_url);
|
||||
|
||||
if (window) {
|
||||
if (window && window.location) {
|
||||
absoluteUri = uri.absoluteTo(window.location.href);
|
||||
this.url = absoluteUri.toString();
|
||||
} else {
|
||||
|
|
@ -6647,50 +6647,90 @@ function Contents(doc, content) {
|
|||
|
||||
this.document = doc;
|
||||
this.documentElement = this.document.documentElement;
|
||||
this.content = content || this.document.body;
|
||||
this.content = content;
|
||||
this.window = this.document.defaultView;
|
||||
// Dom events to listen for
|
||||
this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
|
||||
|
||||
this.size = {
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
|
||||
this.listeners();
|
||||
};
|
||||
|
||||
Contents.prototype.width = function(w) {
|
||||
var frame = this.content || this.documentElement;
|
||||
|
||||
if (w && core.isNumber(w)) {
|
||||
w = w + "px";
|
||||
}
|
||||
|
||||
if (w) {
|
||||
this.documentElement.style.width = w;
|
||||
this.content.style.width = w;
|
||||
frame.style.width = w;
|
||||
}
|
||||
|
||||
return this.window.getComputedStyle(this.documentElement)['width'];
|
||||
return this.window.getComputedStyle(frame)['width'];
|
||||
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.height = function(h) {
|
||||
var frame = this.content || this.documentElement;
|
||||
|
||||
if (h && core.isNumber(h)) {
|
||||
h = h + "px";
|
||||
}
|
||||
|
||||
if (h) {
|
||||
this.documentElement.style.height = h;
|
||||
this.content.style.height = h;
|
||||
frame.style.height = h;
|
||||
}
|
||||
|
||||
return this.window.getComputedStyle(this.documentElement)['height'];
|
||||
return this.window.getComputedStyle(frame)['height'];
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.contentWidth = function(w) {
|
||||
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
if (w && core.isNumber(w)) {
|
||||
w = w + "px";
|
||||
}
|
||||
|
||||
if (w) {
|
||||
content.style.width = w;
|
||||
}
|
||||
|
||||
return this.window.getComputedStyle(content)['width'];
|
||||
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.contentHeight = function(h) {
|
||||
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
if (h && core.isNumber(h)) {
|
||||
h = h + "px";
|
||||
}
|
||||
|
||||
if (h) {
|
||||
content.style.height = h;
|
||||
}
|
||||
|
||||
return this.window.getComputedStyle(content)['height'];
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.textWidth = function() {
|
||||
var width;
|
||||
var range = this.document.createRange();
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
// Select the contents of frame
|
||||
range.selectNodeContents(this.content);
|
||||
range.selectNodeContents(content);
|
||||
|
||||
// get the width of the text content
|
||||
width = range.getBoundingClientRect().width;
|
||||
|
|
@ -6701,9 +6741,9 @@ Contents.prototype.textWidth = function() {
|
|||
Contents.prototype.textHeight = function() {
|
||||
var height;
|
||||
var range = this.document.createRange();
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
|
||||
range.selectNodeContents(this.content);
|
||||
range.selectNodeContents(content);
|
||||
|
||||
height = range.getBoundingClientRect().height;
|
||||
|
||||
|
|
@ -6732,12 +6772,13 @@ Contents.prototype.overflow = function(overflow) {
|
|||
};
|
||||
|
||||
Contents.prototype.css = function(property, value) {
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
if (value) {
|
||||
this.content.style[property] = value;
|
||||
content.style[property] = value;
|
||||
}
|
||||
|
||||
return this.window.getComputedStyle(this.content)[property];
|
||||
return this.window.getComputedStyle(content)[property];
|
||||
};
|
||||
|
||||
Contents.prototype.viewport = function() {
|
||||
|
|
@ -6789,7 +6830,7 @@ Contents.prototype.viewport = function() {
|
|||
// };
|
||||
|
||||
Contents.prototype.expand = function() {
|
||||
//TODO: this should just report resize
|
||||
this.trigger("expand");
|
||||
};
|
||||
|
||||
Contents.prototype.listeners = function() {
|
||||
|
|
@ -6798,9 +6839,14 @@ Contents.prototype.listeners = function() {
|
|||
|
||||
this.mediaQueryListeners();
|
||||
|
||||
this.fontLoadListeners();
|
||||
|
||||
this.addEventListeners();
|
||||
|
||||
this.addSelectionListeners();
|
||||
|
||||
this.resizeListeners();
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.removeListeners = function() {
|
||||
|
|
@ -6810,10 +6856,25 @@ Contents.prototype.removeListeners = function() {
|
|||
this.removeSelectionListeners();
|
||||
};
|
||||
|
||||
Contents.prototype.resizeListenters = function() {
|
||||
Contents.prototype.resizeListeners = function() {
|
||||
var width, height;
|
||||
// Test size again
|
||||
clearTimeout(this.expanding);
|
||||
this.expanding = setTimeout(this.expand.bind(this), 350);
|
||||
|
||||
width = this.scrollWidth();
|
||||
height = this.scrollHeight();
|
||||
|
||||
if (width != this.size.width || height != this.size.height) {
|
||||
|
||||
this.size = {
|
||||
width: width,
|
||||
height: height
|
||||
}
|
||||
|
||||
this.trigger("resize", this.size);
|
||||
}
|
||||
|
||||
this.expanding = setTimeout(this.resizeListeners.bind(this), 350);
|
||||
};
|
||||
|
||||
//https://github.com/tylergaw/media-query-events/blob/master/js/mq-events.js
|
||||
|
|
@ -6863,7 +6924,7 @@ Contents.prototype.observe = function(target) {
|
|||
};
|
||||
|
||||
Contents.prototype.imageLoadListeners = function(target) {
|
||||
var images = this.contentDocument.querySelectorAll("img");
|
||||
var images = this.document.querySelectorAll("img");
|
||||
var img;
|
||||
for (var i = 0; i < images.length; i++) {
|
||||
img = images[i];
|
||||
|
|
@ -6875,6 +6936,17 @@ Contents.prototype.imageLoadListeners = function(target) {
|
|||
}
|
||||
};
|
||||
|
||||
Contents.prototype.fontLoadListeners = function(target) {
|
||||
if (!this.document.fonts) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.document.fonts.ready.then(function () {
|
||||
this.expand();
|
||||
}.bind(this));
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.root = function() {
|
||||
if(!this.document) return null;
|
||||
return this.document.documentElement;
|
||||
|
|
@ -13982,7 +14054,7 @@ IframeView.prototype.onLoad = function(event, promise) {
|
|||
this.window = this.iframe.contentWindow;
|
||||
this.document = this.iframe.contentDocument;
|
||||
|
||||
this.contents = new Contents(this.document);
|
||||
this.contents = new Contents(this.document, this.document.body);
|
||||
|
||||
this.rendering = false;
|
||||
|
||||
|
|
@ -13996,6 +14068,12 @@ IframeView.prototype.onLoad = function(event, promise) {
|
|||
this.document.querySelector("head").appendChild(link);
|
||||
}
|
||||
|
||||
this.contents.on("expand", function () {
|
||||
if(this.displayed && this.iframe) {
|
||||
this.expand();
|
||||
}
|
||||
});
|
||||
|
||||
promise.resolve(this.contents);
|
||||
};
|
||||
|
||||
|
|
|
|||
2
dist/epub.js.map
vendored
2
dist/epub.js.map
vendored
File diff suppressed because one or more lines are too long
104
src/contents.js
104
src/contents.js
|
|
@ -8,50 +8,90 @@ function Contents(doc, content) {
|
|||
|
||||
this.document = doc;
|
||||
this.documentElement = this.document.documentElement;
|
||||
this.content = content || this.document.body;
|
||||
this.content = content;
|
||||
this.window = this.document.defaultView;
|
||||
// Dom events to listen for
|
||||
this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
|
||||
|
||||
this.size = {
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
|
||||
this.listeners();
|
||||
};
|
||||
|
||||
Contents.prototype.width = function(w) {
|
||||
var frame = this.content || this.documentElement;
|
||||
|
||||
if (w && core.isNumber(w)) {
|
||||
w = w + "px";
|
||||
}
|
||||
|
||||
if (w) {
|
||||
this.documentElement.style.width = w;
|
||||
this.content.style.width = w;
|
||||
frame.style.width = w;
|
||||
}
|
||||
|
||||
return this.window.getComputedStyle(this.documentElement)['width'];
|
||||
return this.window.getComputedStyle(frame)['width'];
|
||||
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.height = function(h) {
|
||||
var frame = this.content || this.documentElement;
|
||||
|
||||
if (h && core.isNumber(h)) {
|
||||
h = h + "px";
|
||||
}
|
||||
|
||||
if (h) {
|
||||
this.documentElement.style.height = h;
|
||||
this.content.style.height = h;
|
||||
frame.style.height = h;
|
||||
}
|
||||
|
||||
return this.window.getComputedStyle(this.documentElement)['height'];
|
||||
return this.window.getComputedStyle(frame)['height'];
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.contentWidth = function(w) {
|
||||
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
if (w && core.isNumber(w)) {
|
||||
w = w + "px";
|
||||
}
|
||||
|
||||
if (w) {
|
||||
content.style.width = w;
|
||||
}
|
||||
|
||||
return this.window.getComputedStyle(content)['width'];
|
||||
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.contentHeight = function(h) {
|
||||
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
if (h && core.isNumber(h)) {
|
||||
h = h + "px";
|
||||
}
|
||||
|
||||
if (h) {
|
||||
content.style.height = h;
|
||||
}
|
||||
|
||||
return this.window.getComputedStyle(content)['height'];
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.textWidth = function() {
|
||||
var width;
|
||||
var range = this.document.createRange();
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
// Select the contents of frame
|
||||
range.selectNodeContents(this.content);
|
||||
range.selectNodeContents(content);
|
||||
|
||||
// get the width of the text content
|
||||
width = range.getBoundingClientRect().width;
|
||||
|
|
@ -62,9 +102,9 @@ Contents.prototype.textWidth = function() {
|
|||
Contents.prototype.textHeight = function() {
|
||||
var height;
|
||||
var range = this.document.createRange();
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
|
||||
range.selectNodeContents(this.content);
|
||||
range.selectNodeContents(content);
|
||||
|
||||
height = range.getBoundingClientRect().height;
|
||||
|
||||
|
|
@ -93,12 +133,13 @@ Contents.prototype.overflow = function(overflow) {
|
|||
};
|
||||
|
||||
Contents.prototype.css = function(property, value) {
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
if (value) {
|
||||
this.content.style[property] = value;
|
||||
content.style[property] = value;
|
||||
}
|
||||
|
||||
return this.window.getComputedStyle(this.content)[property];
|
||||
return this.window.getComputedStyle(content)[property];
|
||||
};
|
||||
|
||||
Contents.prototype.viewport = function() {
|
||||
|
|
@ -150,7 +191,7 @@ Contents.prototype.viewport = function() {
|
|||
// };
|
||||
|
||||
Contents.prototype.expand = function() {
|
||||
//TODO: this should just report resize
|
||||
this.trigger("expand");
|
||||
};
|
||||
|
||||
Contents.prototype.listeners = function() {
|
||||
|
|
@ -159,9 +200,14 @@ Contents.prototype.listeners = function() {
|
|||
|
||||
this.mediaQueryListeners();
|
||||
|
||||
this.fontLoadListeners();
|
||||
|
||||
this.addEventListeners();
|
||||
|
||||
this.addSelectionListeners();
|
||||
|
||||
this.resizeListeners();
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.removeListeners = function() {
|
||||
|
|
@ -171,10 +217,25 @@ Contents.prototype.removeListeners = function() {
|
|||
this.removeSelectionListeners();
|
||||
};
|
||||
|
||||
Contents.prototype.resizeListenters = function() {
|
||||
Contents.prototype.resizeListeners = function() {
|
||||
var width, height;
|
||||
// Test size again
|
||||
clearTimeout(this.expanding);
|
||||
this.expanding = setTimeout(this.expand.bind(this), 350);
|
||||
|
||||
width = this.scrollWidth();
|
||||
height = this.scrollHeight();
|
||||
|
||||
if (width != this.size.width || height != this.size.height) {
|
||||
|
||||
this.size = {
|
||||
width: width,
|
||||
height: height
|
||||
}
|
||||
|
||||
this.trigger("resize", this.size);
|
||||
}
|
||||
|
||||
this.expanding = setTimeout(this.resizeListeners.bind(this), 350);
|
||||
};
|
||||
|
||||
//https://github.com/tylergaw/media-query-events/blob/master/js/mq-events.js
|
||||
|
|
@ -224,7 +285,7 @@ Contents.prototype.observe = function(target) {
|
|||
};
|
||||
|
||||
Contents.prototype.imageLoadListeners = function(target) {
|
||||
var images = this.contentDocument.querySelectorAll("img");
|
||||
var images = this.document.querySelectorAll("img");
|
||||
var img;
|
||||
for (var i = 0; i < images.length; i++) {
|
||||
img = images[i];
|
||||
|
|
@ -236,6 +297,17 @@ Contents.prototype.imageLoadListeners = function(target) {
|
|||
}
|
||||
};
|
||||
|
||||
Contents.prototype.fontLoadListeners = function(target) {
|
||||
if (!this.document.fonts) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.document.fonts.ready.then(function () {
|
||||
this.expand();
|
||||
}.bind(this));
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.root = function() {
|
||||
if(!this.document) return null;
|
||||
return this.document.documentElement;
|
||||
|
|
|
|||
|
|
@ -399,7 +399,7 @@ IframeView.prototype.onLoad = function(event, promise) {
|
|||
this.window = this.iframe.contentWindow;
|
||||
this.document = this.iframe.contentDocument;
|
||||
|
||||
this.contents = new Contents(this.document);
|
||||
this.contents = new Contents(this.document, this.document.body);
|
||||
|
||||
this.rendering = false;
|
||||
|
||||
|
|
@ -413,6 +413,12 @@ IframeView.prototype.onLoad = function(event, promise) {
|
|||
this.document.querySelector("head").appendChild(link);
|
||||
}
|
||||
|
||||
this.contents.on("expand", function () {
|
||||
if(this.displayed && this.iframe) {
|
||||
this.expand();
|
||||
}
|
||||
});
|
||||
|
||||
promise.resolve(this.contents);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue