mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-05 15:32:55 +02:00
split rendition into view managers
This commit is contained in:
fchasen
parent
d9a19e5a28
commit
48216cc7ec
20 changed files with 4683 additions and 2188 deletions
614
src/rendition.js
614
src/rendition.js
|
|
@ -9,6 +9,7 @@ var View = require('./view');
|
|||
var Views = require('./views');
|
||||
var Layout = require('./layout');
|
||||
var Map = require('./map');
|
||||
var Stage = require('./stage');
|
||||
|
||||
function Rendition(book, options) {
|
||||
|
||||
|
|
@ -19,7 +20,9 @@ function Rendition(book, options) {
|
|||
height: null,
|
||||
layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto'},
|
||||
axis: "vertical",
|
||||
ignoreClass: ''
|
||||
ignoreClass: '',
|
||||
manager: "single",
|
||||
view: "iframe"
|
||||
});
|
||||
|
||||
core.extend(this.settings, options);
|
||||
|
|
@ -54,151 +57,111 @@ function Rendition(book, options) {
|
|||
|
||||
this.q.enqueue(this.parseLayoutProperties);
|
||||
|
||||
// Block the queue until rendering is started
|
||||
this.starting = new RSVP.defer();
|
||||
this.started = this.starting.promise;
|
||||
this.q.enqueue(this.started);
|
||||
|
||||
// TODO: move this somewhere else
|
||||
if(this.book.archive) {
|
||||
this.replacements();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates an element to render to.
|
||||
* Resizes to passed width and height or to the elements size
|
||||
*/
|
||||
Rendition.prototype.initialize = function(_options){
|
||||
var options = _options || {};
|
||||
var height = options.height;// !== false ? options.height : "100%";
|
||||
var width = options.width;// !== false ? options.width : "100%";
|
||||
var hidden = options.hidden || false;
|
||||
var container;
|
||||
var wrapper;
|
||||
Rendition.prototype.requireManager = function(manager) {
|
||||
var viewManager;
|
||||
|
||||
if(options.height && core.isNumber(options.height)) {
|
||||
height = options.height + "px";
|
||||
// If manager is a string, try to load from register managers,
|
||||
// or require included managers directly
|
||||
if (typeof manager == "string") {
|
||||
viewManager = ePub.ViewManagers[manager] || require('./managers/'+manager);
|
||||
} else {
|
||||
// otherwise, assume we were passed a function
|
||||
viewManager = manager
|
||||
}
|
||||
|
||||
if(options.width && core.isNumber(options.width)) {
|
||||
width = options.width + "px";
|
||||
}
|
||||
|
||||
// Create new container element
|
||||
container = document.createElement("div");
|
||||
|
||||
container.id = "epubjs-container:" + core.uuid();
|
||||
container.classList.add("epub-container");
|
||||
|
||||
// Style Element
|
||||
container.style.fontSize = "0";
|
||||
container.style.wordSpacing = "0";
|
||||
container.style.lineHeight = "0";
|
||||
container.style.verticalAlign = "top";
|
||||
|
||||
if(this.settings.axis === "horizontal") {
|
||||
container.style.whiteSpace = "nowrap";
|
||||
}
|
||||
|
||||
if(width){
|
||||
container.style.width = width;
|
||||
}
|
||||
|
||||
if(height){
|
||||
container.style.height = height;
|
||||
}
|
||||
|
||||
container.style.overflow = this.settings.overflow;
|
||||
|
||||
return container;
|
||||
return viewManager;
|
||||
};
|
||||
|
||||
Rendition.wrap = function(container) {
|
||||
var wrapper = document.createElement("div");
|
||||
Rendition.prototype.requireView = function(view) {
|
||||
var View;
|
||||
|
||||
wrapper.style.visibility = "hidden";
|
||||
wrapper.style.overflow = "hidden";
|
||||
wrapper.style.width = "0";
|
||||
wrapper.style.height = "0";
|
||||
// If view is a string, try to load from register managers,
|
||||
// or require included managers directly
|
||||
if (typeof view == "string") {
|
||||
View = ePub.Views[view] || require('./views/'+view);
|
||||
} else {
|
||||
// otherwise, assume we were passed a function
|
||||
View = view
|
||||
}
|
||||
|
||||
wrapper.appendChild(container);
|
||||
return wrapper;
|
||||
return View;
|
||||
};
|
||||
|
||||
// Call to attach the container to an element in the dom
|
||||
// Container must be attached before rendering can begin
|
||||
Rendition.prototype.attachTo = function(_element){
|
||||
var bounds;
|
||||
Rendition.prototype.start = function(stage){
|
||||
var ViewManager = this.requireManager(this.settings.manager);
|
||||
var View = this.requireView(this.settings.view);
|
||||
|
||||
this.container = this.initialize({
|
||||
"width" : this.settings.width,
|
||||
"height" : this.settings.height
|
||||
// Add view manager
|
||||
this.manager = new ViewManager({
|
||||
view: View,
|
||||
renderer: this.render.bind(this),
|
||||
queue: this.q,
|
||||
settings: this.settings
|
||||
});
|
||||
|
||||
if(core.isElement(_element)) {
|
||||
this.element = _element;
|
||||
} else if (typeof _element === "string") {
|
||||
this.element = document.getElementById(_element);
|
||||
}
|
||||
// Listen for displayed views
|
||||
this.manager.on("added", this.afterDisplayed.bind(this))
|
||||
|
||||
if(!this.element){
|
||||
console.error("Not an Element");
|
||||
return;
|
||||
}
|
||||
|
||||
if(this.settings.hidden) {
|
||||
this.wrapper = this.wrap(this.container);
|
||||
this.element.appendChild(this.wrapper);
|
||||
} else {
|
||||
this.element.appendChild(this.container);
|
||||
}
|
||||
|
||||
this.views = new Views(this.container);
|
||||
|
||||
// Attach Listeners
|
||||
this.attachListeners();
|
||||
|
||||
// Calculate Stage Size
|
||||
this.stageSize();
|
||||
// Start rendering
|
||||
this.manager.start(stage);
|
||||
|
||||
// Add Layout method
|
||||
this.applyLayoutMethod();
|
||||
|
||||
this.on('displayed', this.reportLocation.bind(this));
|
||||
|
||||
// Trigger that rendering has started
|
||||
this.trigger("started");
|
||||
|
||||
// Start processing queue
|
||||
this.starting.resolve();
|
||||
};
|
||||
|
||||
// Call to attach the container to an element in the dom
|
||||
// Container must be attached before rendering can begin
|
||||
Rendition.prototype.attachTo = function(element){
|
||||
|
||||
this.container = new Stage(element, {
|
||||
"width" : this.settings.width,
|
||||
"height" : this.settings.height
|
||||
});
|
||||
|
||||
this.start(this.container);
|
||||
|
||||
// Trigger Attached
|
||||
this.trigger("attached");
|
||||
|
||||
// Start processing queue
|
||||
// this.q.run();
|
||||
|
||||
};
|
||||
|
||||
Rendition.prototype.attachListeners = function(){
|
||||
|
||||
// Listen to window for resize event if width or height is set to 100%
|
||||
if(!core.isNumber(this.settings.width) ||
|
||||
!core.isNumber(this.settings.height) ) {
|
||||
window.addEventListener("resize", this.onResized.bind(this), false);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Rendition.prototype.bounds = function() {
|
||||
return this.container.getBoundingClientRect();
|
||||
};
|
||||
|
||||
Rendition.prototype.display = function(target){
|
||||
|
||||
// if (!this.book.spine.spineItems.length > 0) {
|
||||
// Book isn't open yet
|
||||
// return this.q.enqueue(this.display, target);
|
||||
// }
|
||||
|
||||
return this.q.enqueue(this._display, target);
|
||||
|
||||
};
|
||||
|
||||
Rendition.prototype._display = function(target){
|
||||
|
||||
var isCfiString = this.epubcfi.isCfiString(target);
|
||||
var displaying = new RSVP.defer();
|
||||
var displayed = displaying.promise;
|
||||
|
||||
var section;
|
||||
var view;
|
||||
var offset;
|
||||
var fragment;
|
||||
var cfi = this.epubcfi.isCfiString(target);
|
||||
|
||||
var visible;
|
||||
var moveTo;
|
||||
|
||||
section = this.book.spine.get(target);
|
||||
|
||||
|
|
@ -207,81 +170,42 @@ Rendition.prototype._display = function(target){
|
|||
return displayed;
|
||||
}
|
||||
|
||||
// Check to make sure the section we want isn't already shown
|
||||
visible = this.views.find(section);
|
||||
|
||||
if(visible) {
|
||||
offset = visible.locationOf(target);
|
||||
this.moveTo(offset);
|
||||
displaying.resolve();
|
||||
|
||||
} else {
|
||||
|
||||
// Hide all current views
|
||||
this.views.hide();
|
||||
|
||||
// Create a new view
|
||||
// view = new View(section, this.viewSettings);
|
||||
view = this.createView(section);
|
||||
|
||||
// This will clear all previous views
|
||||
displayed = this.fill(view)
|
||||
.then(function(){
|
||||
|
||||
// Parse the target fragment
|
||||
if(typeof target === "string" &&
|
||||
target.indexOf("#") > -1) {
|
||||
fragment = target.substring(target.indexOf("#")+1);
|
||||
}
|
||||
|
||||
// Move to correct place within the section, if needed
|
||||
if(cfi || fragment) {
|
||||
offset = view.locationOf(target);
|
||||
return this.moveTo(offset);
|
||||
}
|
||||
|
||||
if(typeof this.check === 'function') {
|
||||
return this.check();
|
||||
}
|
||||
}.bind(this))
|
||||
.then(function(){
|
||||
return this.hooks.display.trigger(view);
|
||||
}.bind(this))
|
||||
.then(function(){
|
||||
this.views.show();
|
||||
}.bind(this));
|
||||
// Trim the target fragment
|
||||
// removing the chapter
|
||||
if(!isCfiString && typeof target === "string" &&
|
||||
target.indexOf("#") > -1) {
|
||||
moveTo = target.substring(target.indexOf("#")+1);
|
||||
}
|
||||
|
||||
displayed.then(function(){
|
||||
if (isCfiString) {
|
||||
moveTo = target;
|
||||
}
|
||||
|
||||
this.trigger("displayed", section);
|
||||
return this.manager.display(section, moveTo)
|
||||
.then(function(){
|
||||
this.trigger("displayed", section);
|
||||
}.bind(this));
|
||||
|
||||
}.bind(this));
|
||||
|
||||
|
||||
return displayed;
|
||||
};
|
||||
|
||||
// Takes a cfi, fragment or page?
|
||||
Rendition.prototype.moveTo = function(offset){
|
||||
this.scrollTo(offset.left, offset.top);
|
||||
};
|
||||
|
||||
Rendition.prototype.render = function(view, show) {
|
||||
|
||||
// view.onLayout = this.layout.format.bind(this.layout);
|
||||
view.create();
|
||||
|
||||
view.onLayout = this.layout.format.bind(this.layout);
|
||||
|
||||
// Fit to size of the container, apply padding
|
||||
this.resizeView(view);
|
||||
this.manager.resizeView(view);
|
||||
|
||||
// Render Chain
|
||||
return view.render(this.book.request)
|
||||
.then(function(){
|
||||
return view.section.render(this.book.request)
|
||||
.then(function(contents){
|
||||
return view.load(contents);
|
||||
}.bind(this))
|
||||
.then(function(doc){
|
||||
return this.hooks.content.trigger(view, this);
|
||||
}.bind(this))
|
||||
.then(function(){
|
||||
this.layout.format(view.contents);
|
||||
return this.hooks.layout.trigger(view, this);
|
||||
}.bind(this))
|
||||
.then(function(){
|
||||
|
|
@ -291,13 +215,11 @@ Rendition.prototype.render = function(view, show) {
|
|||
return this.hooks.render.trigger(view, this);
|
||||
}.bind(this))
|
||||
.then(function(){
|
||||
if(show !== false && this.views.hidden === false) {
|
||||
if(show !== false) {
|
||||
this.q.enqueue(function(view){
|
||||
view.show();
|
||||
}, view);
|
||||
}
|
||||
|
||||
|
||||
// this.map = new Map(view, this.layout);
|
||||
this.hooks.show.trigger(view, this);
|
||||
this.trigger("rendered", view.section);
|
||||
|
|
@ -309,170 +231,69 @@ Rendition.prototype.render = function(view, show) {
|
|||
|
||||
};
|
||||
|
||||
|
||||
Rendition.prototype.afterDisplayed = function(view){
|
||||
this.trigger("added", view.section);
|
||||
Rendition.prototype.afterDisplayed = function(section){
|
||||
this.trigger("added", section);
|
||||
this.reportLocation();
|
||||
};
|
||||
|
||||
Rendition.prototype.fill = function(view){
|
||||
|
||||
this.views.clear();
|
||||
|
||||
this.views.append(view);
|
||||
|
||||
// view.on("shown", this.afterDisplayed.bind(this));
|
||||
view.onDisplayed = this.afterDisplayed.bind(this);
|
||||
|
||||
return this.render(view);
|
||||
};
|
||||
|
||||
Rendition.prototype.resizeView = function(view) {
|
||||
|
||||
if(this.globalLayoutProperties.layout === "pre-paginated") {
|
||||
view.lock("both", this.stage.width, this.stage.height);
|
||||
} else {
|
||||
view.lock("width", this.stage.width, this.stage.height);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Rendition.prototype.stageSize = function(_width, _height){
|
||||
var bounds;
|
||||
var width = _width || this.settings.width;
|
||||
var height = _height || this.settings.height;
|
||||
|
||||
// If width or height are set to false, inherit them from containing element
|
||||
if(width === false) {
|
||||
bounds = this.element.getBoundingClientRect();
|
||||
|
||||
if(bounds.width) {
|
||||
width = bounds.width;
|
||||
this.container.style.width = bounds.width + "px";
|
||||
}
|
||||
}
|
||||
|
||||
if(height === false) {
|
||||
bounds = bounds || this.element.getBoundingClientRect();
|
||||
|
||||
if(bounds.height) {
|
||||
height = bounds.height;
|
||||
this.container.style.height = bounds.height + "px";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(width && !core.isNumber(width)) {
|
||||
bounds = this.container.getBoundingClientRect();
|
||||
width = bounds.width;
|
||||
//height = bounds.height;
|
||||
}
|
||||
|
||||
if(height && !core.isNumber(height)) {
|
||||
bounds = bounds || this.container.getBoundingClientRect();
|
||||
//width = bounds.width;
|
||||
height = bounds.height;
|
||||
}
|
||||
|
||||
|
||||
this.containerStyles = window.getComputedStyle(this.container);
|
||||
this.containerPadding = {
|
||||
left: parseFloat(this.containerStyles["padding-left"]) || 0,
|
||||
right: parseFloat(this.containerStyles["padding-right"]) || 0,
|
||||
top: parseFloat(this.containerStyles["padding-top"]) || 0,
|
||||
bottom: parseFloat(this.containerStyles["padding-bottom"]) || 0
|
||||
};
|
||||
|
||||
this.stage = {
|
||||
width: width -
|
||||
this.containerPadding.left -
|
||||
this.containerPadding.right,
|
||||
height: height -
|
||||
this.containerPadding.top -
|
||||
this.containerPadding.bottom
|
||||
};
|
||||
|
||||
return this.stage;
|
||||
|
||||
};
|
||||
|
||||
Rendition.prototype.applyLayoutMethod = function() {
|
||||
|
||||
this.layout = new Layout.Scroll();
|
||||
this.updateLayout();
|
||||
this.calculateLayout();
|
||||
|
||||
this.map = new Map(this.layout);
|
||||
// this.map = new Map(this.layout);
|
||||
// this.manager.layout(this.layout.format);
|
||||
};
|
||||
|
||||
Rendition.prototype.calculateLayout = function() {
|
||||
var bounds = this.manager.stage.bounds();
|
||||
|
||||
this.layout.calculate(bounds.width, bounds.height);
|
||||
};
|
||||
|
||||
Rendition.prototype.updateLayout = function() {
|
||||
this.calculateLayout();
|
||||
|
||||
this.layout.calculate(this.stage.width, this.stage.height);
|
||||
|
||||
this.manager.layout(this.layout.format);
|
||||
};
|
||||
|
||||
Rendition.prototype.resize = function(width, height){
|
||||
|
||||
this.stageSize(width, height);
|
||||
Rendition.prototype.onResized = function(size){
|
||||
|
||||
this.updateLayout();
|
||||
|
||||
this.views.each(this.resizeView.bind(this));
|
||||
if(this.location) {
|
||||
this.display(this.location.start);
|
||||
}
|
||||
|
||||
this.trigger("resized", {
|
||||
width: this.stage.width,
|
||||
height: this.stage.height
|
||||
width: size.width,
|
||||
height: size.height
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
Rendition.prototype.onResized = function(e) {
|
||||
this.resize();
|
||||
};
|
||||
|
||||
Rendition.prototype.createView = function(section) {
|
||||
// Transfer the existing hooks
|
||||
section.hooks.serialize.register(this.hooks.serialize.list());
|
||||
|
||||
return new View(section, this.viewSettings);
|
||||
Rendition.prototype.moveTo = function(offset){
|
||||
this.manager.moveTo(offset);
|
||||
};
|
||||
|
||||
Rendition.prototype.next = function(){
|
||||
|
||||
return this.q.enqueue(function(){
|
||||
|
||||
var next;
|
||||
var view;
|
||||
|
||||
if(!this.views.length) return;
|
||||
|
||||
next = this.views.last().section.next();
|
||||
|
||||
if(next) {
|
||||
view = this.createView(next);
|
||||
return this.fill(view);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return this.q.enqueue(this.manager.next.bind(this.manager));
|
||||
};
|
||||
|
||||
Rendition.prototype.prev = function(){
|
||||
return this.q.enqueue(this.manager.prev.bind(this.manager));
|
||||
};
|
||||
|
||||
return this.q.enqueue(function(){
|
||||
Rendition.prototype.bounds = function() {
|
||||
var bounds;
|
||||
|
||||
var prev;
|
||||
var view;
|
||||
|
||||
if(!this.views.length) return;
|
||||
|
||||
prev = this.views.first().section.prev();
|
||||
if(prev) {
|
||||
view = this.createView(prev);
|
||||
return this.fill(view);
|
||||
}
|
||||
|
||||
});
|
||||
if(!this.settings.height || !this.container) {
|
||||
bounds = core.windowBounds();
|
||||
} else {
|
||||
bounds = this.container.getBoundingClientRect();
|
||||
}
|
||||
|
||||
return bounds;
|
||||
};
|
||||
|
||||
//-- http://www.idpf.org/epub/fxl/
|
||||
|
|
@ -481,76 +302,60 @@ Rendition.prototype.parseLayoutProperties = function(_metadata){
|
|||
var layout = (this.layoutOveride && this.layoutOveride.layout) || metadata.layout || "reflowable";
|
||||
var spread = (this.layoutOveride && this.layoutOveride.spread) || metadata.spread || "auto";
|
||||
var orientation = (this.layoutOveride && this.layoutOveride.orientation) || metadata.orientation || "auto";
|
||||
this.globalLayoutProperties = {
|
||||
|
||||
this.settings.globalLayoutProperties = {
|
||||
layout : layout,
|
||||
spread : spread,
|
||||
orientation : orientation
|
||||
};
|
||||
return this.globalLayoutProperties;
|
||||
|
||||
return this.settings.globalLayoutProperties;
|
||||
};
|
||||
|
||||
/**
|
||||
* Uses the settings to determine which Layout Method is needed
|
||||
* Triggers events based on the method choosen
|
||||
* Takes: Layout settings object
|
||||
* Returns: String of appropriate for EPUBJS.Layout function
|
||||
*/
|
||||
// Paginate.prototype.determineLayout = function(settings){
|
||||
// // Default is layout: reflowable & spread: auto
|
||||
// var spreads = this.determineSpreads(this.settings.minSpreadWidth);
|
||||
// console.log("spreads", spreads, this.settings.minSpreadWidth)
|
||||
// var layoutMethod = spreads ? "ReflowableSpreads" : "Reflowable";
|
||||
// var scroll = false;
|
||||
//
|
||||
// if(settings.layout === "pre-paginated") {
|
||||
// layoutMethod = "Fixed";
|
||||
// scroll = true;
|
||||
// spreads = false;
|
||||
// }
|
||||
//
|
||||
// if(settings.layout === "reflowable" && settings.spread === "none") {
|
||||
// layoutMethod = "Reflowable";
|
||||
// scroll = false;
|
||||
// spreads = false;
|
||||
// }
|
||||
//
|
||||
// if(settings.layout === "reflowable" && settings.spread === "both") {
|
||||
// layoutMethod = "ReflowableSpreads";
|
||||
// scroll = false;
|
||||
// spreads = true;
|
||||
// }
|
||||
//
|
||||
// this.spreads = spreads;
|
||||
//
|
||||
// return layoutMethod;
|
||||
// };
|
||||
|
||||
Rendition.prototype.current = function(){
|
||||
var visible = this.visible();
|
||||
if(visible.length){
|
||||
// Current is the last visible view
|
||||
return visible[visible.length-1];
|
||||
}
|
||||
return null;
|
||||
|
||||
Rendition.prototype.reportLocation = function(){
|
||||
return this.q.enqueue(function(){
|
||||
this.location = this.manager.currentLocation();
|
||||
this.trigger("locationChanged", this.location);
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
Rendition.prototype.isVisible = function(view, offsetPrev, offsetNext, _container){
|
||||
var position = view.position();
|
||||
var container = _container || this.container.getBoundingClientRect();
|
||||
|
||||
if(this.settings.axis === "horizontal" &&
|
||||
position.right > container.left - offsetPrev &&
|
||||
position.left < container.right + offsetNext) {
|
||||
|
||||
return true;
|
||||
|
||||
} else if(this.settings.axis === "vertical" &&
|
||||
position.bottom > container.top - offsetPrev &&
|
||||
position.top < container.bottom + offsetNext) {
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
};
|
||||
|
||||
Rendition.prototype.visible = function(){
|
||||
var container = this.bounds();
|
||||
var displayedViews = this.views.displayed();
|
||||
var visible = [];
|
||||
var isVisible;
|
||||
var view;
|
||||
|
||||
for (var i = 0; i < displayedViews.length; i++) {
|
||||
view = displayedViews[i];
|
||||
isVisible = this.isVisible(view, 0, 0, container);
|
||||
|
||||
if(isVisible === true) {
|
||||
visible.push(view);
|
||||
}
|
||||
|
||||
}
|
||||
return visible;
|
||||
|
||||
};
|
||||
|
||||
Rendition.prototype.bounds = function(func) {
|
||||
var bounds;
|
||||
|
||||
if(!this.settings.height) {
|
||||
bounds = core.windowBounds();
|
||||
} else {
|
||||
bounds = this.container.getBoundingClientRect();
|
||||
}
|
||||
|
||||
return bounds;
|
||||
};
|
||||
|
||||
Rendition.prototype.destroy = function(){
|
||||
// Clear the queue
|
||||
|
|
@ -567,67 +372,8 @@ Rendition.prototype.destroy = function(){
|
|||
|
||||
};
|
||||
|
||||
Rendition.prototype.reportLocation = function(){
|
||||
return this.q.enqueue(function(){
|
||||
this.location = this.currentLocation();
|
||||
this.trigger("locationChanged", this.location);
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
Rendition.prototype.currentLocation = function(){
|
||||
var view;
|
||||
var start, end;
|
||||
|
||||
if(this.views.length) {
|
||||
view = this.views.first();
|
||||
// start = container.left - view.position().left;
|
||||
// end = start + this.layout.spread;
|
||||
|
||||
return this.map.page(view);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Rendition.prototype.scrollBy = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.ignore = true;
|
||||
}
|
||||
|
||||
if(this.settings.height) {
|
||||
|
||||
if(x) this.container.scrollLeft += x;
|
||||
if(y) this.container.scrollTop += y;
|
||||
|
||||
} else {
|
||||
window.scrollBy(x,y);
|
||||
}
|
||||
// console.log("scrollBy", x, y);
|
||||
this.scrolled = true;
|
||||
};
|
||||
|
||||
Rendition.prototype.scrollTo = function(x, y, silent){
|
||||
if(silent) {
|
||||
this.ignore = true;
|
||||
}
|
||||
|
||||
if(this.settings.height) {
|
||||
this.container.scrollLeft = x;
|
||||
this.container.scrollTop = y;
|
||||
} else {
|
||||
window.scrollTo(x,y);
|
||||
}
|
||||
// console.log("scrollTo", x, y);
|
||||
this.scrolled = true;
|
||||
// if(this.container.scrollLeft != x){
|
||||
// setTimeout(function() {
|
||||
// this.scrollTo(x, y, silent);
|
||||
// }.bind(this), 10);
|
||||
// return;
|
||||
// };
|
||||
};
|
||||
|
||||
Rendition.prototype.passViewEvents = function(view){
|
||||
view.listenedEvents.forEach(function(e){
|
||||
view.contents.listenedEvents.forEach(function(e){
|
||||
view.on(e, this.triggerViewEvent.bind(this));
|
||||
}.bind(this));
|
||||
|
||||
|
|
@ -699,7 +445,7 @@ Rendition.prototype.replacements = function(){
|
|||
|
||||
// Replace Asset Urls in chapters
|
||||
// by registering a hook after the sections contents has been serialized
|
||||
this.hooks.serialize.register(function(output, section) {
|
||||
this.book.spine.hooks.serialize.register(function(output, section) {
|
||||
this.replaceAssets(section, urls, replacementUrls);
|
||||
}.bind(this));
|
||||
|
||||
|
|
@ -765,6 +511,22 @@ Rendition.prototype.range = function(_cfi, ignoreClass){
|
|||
}
|
||||
};
|
||||
|
||||
Rendition.prototype.adjustImages = function(view) {
|
||||
|
||||
view.addStylesheetRules([
|
||||
["img",
|
||||
["max-width", (this.layout.spread) + "px"],
|
||||
["max-height", (this.layout.height) + "px"]
|
||||
]
|
||||
]);
|
||||
return new RSVP.Promise(function(resolve, reject){
|
||||
// Wait to apply
|
||||
setTimeout(function() {
|
||||
resolve();
|
||||
}, 1);
|
||||
});
|
||||
};
|
||||
|
||||
//-- Enable binding events to Renderer
|
||||
RSVP.EventTarget.mixin(Rendition.prototype);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue