mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-05 15:32:55 +02:00
Updated Expands and Layout methods
This commit is contained in:
Fred Chasen
parent
6b25126f00
commit
b88aab25d9
14 changed files with 1116 additions and 766 deletions
|
|
@ -1,4 +1,6 @@
|
|||
EPUBJS.View = function(section, horz) {
|
||||
EPUBJS.View = function(section, options) {
|
||||
this.settings = options || {};
|
||||
|
||||
this.id = "epubjs-view:" + EPUBJS.core.uuid();
|
||||
this.displaying = new RSVP.defer();
|
||||
this.displayed = this.displaying.promise;
|
||||
|
|
@ -7,7 +9,7 @@ EPUBJS.View = function(section, horz) {
|
|||
|
||||
this.element = document.createElement('div');
|
||||
this.element.classList.add("epub-view");
|
||||
this.element.style.display = "inline-block";
|
||||
|
||||
|
||||
// this.element.style.minHeight = "100px";
|
||||
this.element.style.height = "0px";
|
||||
|
|
@ -17,12 +19,19 @@ EPUBJS.View = function(section, horz) {
|
|||
this.shown = false;
|
||||
this.rendered = false;
|
||||
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
//this.width = 0;
|
||||
//this.height = 0;
|
||||
|
||||
|
||||
if(this.settings.axis && this.settings.axis == "horizontal"){
|
||||
this.element.style.display = "inline-block";
|
||||
} else {
|
||||
this.element.style.display = "block";
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.create = function(width, height) {
|
||||
EPUBJS.View.prototype.create = function() {
|
||||
|
||||
if(this.iframe) {
|
||||
return this.iframe;
|
||||
|
|
@ -44,6 +53,7 @@ EPUBJS.View.prototype.create = function(width, height) {
|
|||
this.element.appendChild(this.iframe);
|
||||
this.rendered = true;
|
||||
|
||||
this.elementBounds = EPUBJS.core.bounds(this.element);
|
||||
|
||||
// if(width || height){
|
||||
// this.resize(width, height);
|
||||
|
|
@ -65,21 +75,31 @@ EPUBJS.View.prototype.create = function(width, height) {
|
|||
|
||||
EPUBJS.View.prototype.lock = function(width, height) {
|
||||
|
||||
var borders = EPUBJS.core.borders(this.element);
|
||||
var elBorders = EPUBJS.core.borders(this.element);
|
||||
var iframeBorders;
|
||||
if(this.iframe) {
|
||||
iframeBorders = EPUBJS.core.borders(this.iframe);
|
||||
} else {
|
||||
iframeBorders = {width: 0, height: 0};
|
||||
}
|
||||
|
||||
|
||||
if(EPUBJS.core.isNumber(width)){
|
||||
this.lockedWidth = width - borders.width;
|
||||
this.lockedWidth = width - elBorders.width - iframeBorders.width;
|
||||
this.resize(this.lockedWidth, 0);
|
||||
}
|
||||
|
||||
if(EPUBJS.core.isNumber(height)){
|
||||
this.lockedHeight = height - borders.height;
|
||||
this.lockedHeight = height - elBorders.height - iframeBorders.height;
|
||||
this.resize(0, this.lockedHeight);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(this.shown) {
|
||||
this.resize(this.lockedWidth, this.lockedHeight);
|
||||
|
||||
if (this.iframe && !this.resizing) {
|
||||
//this.expand();
|
||||
this.expand();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -89,22 +109,6 @@ EPUBJS.View.prototype.lock = function(width, height) {
|
|||
};
|
||||
|
||||
EPUBJS.View.prototype.resize = function(width, height) {
|
||||
|
||||
if(!this.shown) return;
|
||||
|
||||
if(EPUBJS.core.isNumber(width)){
|
||||
this.element.style.width = width + "px";
|
||||
}
|
||||
|
||||
if(EPUBJS.core.isNumber(height)){
|
||||
this.element.style.height = height + "px";
|
||||
}
|
||||
|
||||
this.elementBounds = EPUBJS.core.bounds(this.element);
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.reframe = function(width, height) {
|
||||
|
||||
if(!this.iframe) return;
|
||||
|
||||
|
|
@ -117,7 +121,33 @@ EPUBJS.View.prototype.reframe = function(width, height) {
|
|||
}
|
||||
|
||||
this.iframeBounds = EPUBJS.core.bounds(this.iframe);
|
||||
this.resize(this.iframeBounds.width, this.iframeBounds.height);
|
||||
this.reframe(this.iframeBounds.width, this.iframeBounds.height);
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.reframe = function(width, height) {
|
||||
var prevBounds;
|
||||
|
||||
if(!this.shown) return;
|
||||
|
||||
if(EPUBJS.core.isNumber(width)){
|
||||
this.element.style.width = width + "px";
|
||||
}
|
||||
|
||||
if(EPUBJS.core.isNumber(height)){
|
||||
this.element.style.height = height + "px";
|
||||
}
|
||||
|
||||
prevBounds = this.elementBounds;
|
||||
|
||||
this.elementBounds = EPUBJS.core.bounds(this.element);
|
||||
|
||||
this.trigger("resized", {
|
||||
width: this.elementBounds.width,
|
||||
height: this.elementBounds.height,
|
||||
widthDelta: this.elementBounds.width - prevBounds.width,
|
||||
heightDelta: this.elementBounds.height - prevBounds.height,
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -138,7 +168,6 @@ EPUBJS.View.prototype.display = function(_request) {
|
|||
.then(function(contents){
|
||||
return this.load(contents);
|
||||
}.bind(this))
|
||||
.then(this.afterLoad.bind(this))
|
||||
.then(this.displaying.resolve.call(this));
|
||||
};
|
||||
|
||||
|
|
@ -170,41 +199,61 @@ EPUBJS.View.prototype.load = function(contents) {
|
|||
this.document.close();
|
||||
}
|
||||
|
||||
|
||||
return loaded;
|
||||
};
|
||||
|
||||
|
||||
EPUBJS.View.prototype.afterLoad = function() {
|
||||
EPUBJS.View.prototype.layout = function(layoutFunc) {
|
||||
|
||||
// this.iframe.style.display = "block";
|
||||
this.iframe.style.display = "block";
|
||||
this.iframe.style.display = "inline-block";
|
||||
|
||||
|
||||
// Reset Body Styles
|
||||
this.document.body.style.margin = "0";
|
||||
this.document.body.style.display = "inline-block";
|
||||
this.document.documentElement.style.width = "auto";
|
||||
//this.document.body.style.display = "inline-block";
|
||||
//this.document.documentElement.style.width = "auto";
|
||||
|
||||
if(layoutFunc){
|
||||
layoutFunc(this);
|
||||
}
|
||||
|
||||
this.onLayout(this);
|
||||
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.onLayout = function(view) {
|
||||
// stub
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.listeners = function() {
|
||||
/*
|
||||
setTimeout(function(){
|
||||
this.window.addEventListener("resize", this.resized.bind(this), false);
|
||||
}.bind(this), 10); // Wait to listen for resize events
|
||||
|
||||
*/
|
||||
|
||||
// Wait for fonts to load to finish
|
||||
// http://dev.w3.org/csswg/css-font-loading/
|
||||
// Not implemented fully
|
||||
/*
|
||||
if(this.document.fonts && this.document.fonts.status === "loading") {
|
||||
this.document.fonts.onloading = function(){
|
||||
console.log("fonts unloaded");
|
||||
this.document.fonts.onloadingdone = function(){
|
||||
console.log("loaded fonts");
|
||||
this.expand();
|
||||
}.bind(this);
|
||||
}
|
||||
|
||||
*/
|
||||
if(this.section.properties.indexOf("scripted") > -1){
|
||||
this.observer = this.observe(this.document.body);
|
||||
}
|
||||
|
||||
this.imageLoadListeners();
|
||||
};
|
||||
|
||||
this.mediaQueryListeners();
|
||||
|
||||
};
|
||||
/*
|
||||
EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
|
||||
var bounds;
|
||||
var width, height;
|
||||
|
|
@ -222,12 +271,14 @@ EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
|
|||
// Check bounds
|
||||
bounds = this.document.body.getBoundingClientRect();
|
||||
if(!bounds || (bounds.height === 0 && bounds.width === 0)) {
|
||||
console.error("View not shown");
|
||||
console.error("View not shown", this);
|
||||
|
||||
// setTimeout(function(){
|
||||
// this.expand(expanding, count);
|
||||
// }.bind(this), TIMEOUT);
|
||||
|
||||
expanding.resolve();
|
||||
|
||||
return expanded;
|
||||
}
|
||||
|
||||
|
|
@ -261,6 +312,50 @@ EPUBJS.View.prototype.expand = function(_defer, _count, _func) {
|
|||
|
||||
return expanded;
|
||||
};
|
||||
*/
|
||||
EPUBJS.View.prototype.expand = function() {
|
||||
var width = this.lockedWidth;
|
||||
var height = this.lockedHeight;
|
||||
|
||||
// Expand Vertically
|
||||
if(width && !height) {
|
||||
height = this.document.documentElement.scrollHeight;
|
||||
}
|
||||
|
||||
// Expand Horizontally
|
||||
if(height && !width) {
|
||||
width = this.document.body.scrollWidth;
|
||||
};
|
||||
|
||||
this.resize(width, height);
|
||||
|
||||
//this.width = width;
|
||||
//this.height = height;
|
||||
|
||||
};
|
||||
|
||||
//https://github.com/tylergaw/media-query-events/blob/master/js/mq-events.js
|
||||
EPUBJS.View.prototype.mediaQueryListeners = function() {
|
||||
var sheets = this.document.styleSheets;
|
||||
var mediaChangeHandler = function(m){
|
||||
if(m.matches) {
|
||||
this.expand();
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
for (var i = 0; i < sheets.length; i += 1) {
|
||||
var rules = sheets[i].cssRules;
|
||||
|
||||
for (var j = 0; j < rules.length; j += 1) {
|
||||
//if (rules[j].constructor === CSSMediaRule) {
|
||||
if(rules[j].media){
|
||||
var mql = this.window.matchMedia(rules[j].media.mediaText);
|
||||
mql.addListener(mediaChangeHandler);
|
||||
//mql.onchange = mediaChangeHandler;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.observe = function(target) {
|
||||
var renderer = this;
|
||||
|
|
@ -306,19 +401,25 @@ EPUBJS.View.prototype.imageLoadListeners = function(target) {
|
|||
};
|
||||
|
||||
EPUBJS.View.prototype.show = function() {
|
||||
var shown = new RSVP.defer();
|
||||
|
||||
this.shown = true;
|
||||
|
||||
// Reframe, incase the iframe was recreated
|
||||
// Also resizes element.
|
||||
this.reframe(this.width, this.height)
|
||||
this.layout();
|
||||
|
||||
this.listeners();
|
||||
|
||||
this.expand();
|
||||
|
||||
// this.iframe.style.display = "inline-block";
|
||||
this.element.style.visibility = "visible";
|
||||
this.iframe.style.visibility = "visible";
|
||||
|
||||
this.onShown(this);
|
||||
this.trigger("shown", this);
|
||||
this.onShown(this);
|
||||
|
||||
shown.resolve(this);
|
||||
|
||||
return shown.promise;
|
||||
};
|
||||
|
||||
EPUBJS.View.prototype.hide = function() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue