mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-04 15:09:16 +02:00
Move managers to subfolder, rename single to default
This commit is contained in:
Fred Chasen
parent
730b06f32b
commit
5c49e4f4b6
5 changed files with 601 additions and 603 deletions
|
|
@ -1,544 +0,0 @@
|
|||
var RSVP = require('rsvp');
|
||||
var core = require('../core');
|
||||
var EpubCFI = require('../epubcfi');
|
||||
// var Layout = require('../layout');
|
||||
var Mapping = require('../mapping');
|
||||
var Queue = require('../queue');
|
||||
var Stage = require('./helpers/stage');
|
||||
var Views = require('./helpers/views');
|
||||
|
||||
function SingleViewManager(options) {
|
||||
|
||||
this.name = "single";
|
||||
this.View = options.view;
|
||||
this.request = options.request;
|
||||
this.renditionQueue = options.queue;
|
||||
this.q = new Queue(this);
|
||||
|
||||
this.settings = core.extend(this.settings || {}, {
|
||||
infinite: true,
|
||||
hidden: false,
|
||||
width: undefined,
|
||||
height: undefined,
|
||||
// globalLayoutProperties : { layout: 'reflowable', spread: 'auto', orientation: 'auto'},
|
||||
// layout: null,
|
||||
axis: "vertical",
|
||||
ignoreClass: ''
|
||||
});
|
||||
|
||||
core.extend(this.settings, options.settings || {});
|
||||
|
||||
this.viewSettings = {
|
||||
ignoreClass: this.settings.ignoreClass,
|
||||
axis: this.settings.axis,
|
||||
layout: this.layout,
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
SingleViewManager.prototype.render = function(element, size){
|
||||
|
||||
// Save the stage
|
||||
this.stage = new Stage({
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
overflow: this.settings.overflow,
|
||||
hidden: this.settings.hidden,
|
||||
axis: this.settings.axis
|
||||
});
|
||||
|
||||
this.stage.attachTo(element);
|
||||
|
||||
// Get this stage container div
|
||||
this.container = this.stage.getContainer();
|
||||
|
||||
// Views array methods
|
||||
this.views = new Views(this.container);
|
||||
|
||||
// Calculate Stage Size
|
||||
this._bounds = this.bounds();
|
||||
this._stageSize = this.stage.size();
|
||||
|
||||
// Set the dimensions for views
|
||||
this.viewSettings.width = this._stageSize.width;
|
||||
this.viewSettings.height = this._stageSize.height;
|
||||
|
||||
// Function to handle a resize event.
|
||||
// Will only attach if width and height are both fixed.
|
||||
this.stage.onResize(this.onResized.bind(this));
|
||||
|
||||
// Add Event Listeners
|
||||
this.addEventListeners();
|
||||
|
||||
// Add Layout method
|
||||
// this.applyLayoutMethod();
|
||||
if (this.layout) {
|
||||
this.updateLayout();
|
||||
}
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.addEventListeners = function(){
|
||||
window.addEventListener('unload', function(e){
|
||||
this.destroy();
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.destroy = function(){
|
||||
// this.views.each(function(view){
|
||||
// view.destroy();
|
||||
// });
|
||||
|
||||
/*
|
||||
|
||||
clearTimeout(this.trimTimeout);
|
||||
if(this.settings.hidden) {
|
||||
this.element.removeChild(this.wrapper);
|
||||
} else {
|
||||
this.element.removeChild(this.container);
|
||||
}
|
||||
*/
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.onResized = function(e) {
|
||||
clearTimeout(this.resizeTimeout);
|
||||
this.resizeTimeout = setTimeout(function(){
|
||||
this.resize();
|
||||
}.bind(this), 150);
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.resize = function(width, height){
|
||||
|
||||
// Clear the queue
|
||||
this.q.clear();
|
||||
|
||||
this._stageSize = this.stage.size(width, height);
|
||||
this._bounds = this.bounds();
|
||||
|
||||
// Update for new views
|
||||
this.viewSettings.width = this._stageSize.width;
|
||||
this.viewSettings.height = this._stageSize.height;
|
||||
|
||||
// Update for existing views
|
||||
this.views.each(function(view) {
|
||||
view.size(this._stageSize.width, this._stageSize.height);
|
||||
}.bind(this));
|
||||
|
||||
this.updateLayout();
|
||||
|
||||
this.trigger("resized", {
|
||||
width: this.stage.width,
|
||||
height: this.stage.height
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.createView = function(section) {
|
||||
return new this.View(section, this.viewSettings);
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.display = function(section, target){
|
||||
|
||||
var displaying = new RSVP.defer();
|
||||
var displayed = displaying.promise;
|
||||
|
||||
// Check to make sure the section we want isn't already shown
|
||||
var visible = this.views.find(section);
|
||||
|
||||
// View is already shown, just move to correct location
|
||||
if(visible && target) {
|
||||
offset = visible.locationOf(target);
|
||||
this.moveTo(offset);
|
||||
displaying.resolve();
|
||||
return displayed;
|
||||
}
|
||||
|
||||
// Hide all current views
|
||||
this.views.hide();
|
||||
|
||||
this.views.clear();
|
||||
|
||||
this.add(section)
|
||||
.then(function(){
|
||||
var next;
|
||||
if (this.layout.name === "pre-paginated" &&
|
||||
this.layout.divisor > 1) {
|
||||
next = section.next();
|
||||
if (next) {
|
||||
return this.add(next);
|
||||
}
|
||||
}
|
||||
}.bind(this))
|
||||
.then(function(view){
|
||||
|
||||
// Move to correct place within the section, if needed
|
||||
if(target) {
|
||||
offset = view.locationOf(target);
|
||||
this.moveTo(offset);
|
||||
}
|
||||
|
||||
this.views.show();
|
||||
|
||||
displaying.resolve();
|
||||
|
||||
}.bind(this))
|
||||
// .then(function(){
|
||||
// return this.hooks.display.trigger(view);
|
||||
// }.bind(this))
|
||||
// .then(function(){
|
||||
// this.views.show();
|
||||
// }.bind(this));
|
||||
return displayed;
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.afterDisplayed = function(view){
|
||||
this.trigger("added", view);
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.afterResized = function(view){
|
||||
this.trigger("resize", view.section);
|
||||
};
|
||||
|
||||
// SingleViewManager.prototype.moveTo = function(offset){
|
||||
// this.scrollTo(offset.left, offset.top);
|
||||
// };
|
||||
|
||||
SingleViewManager.prototype.moveTo = function(offset){
|
||||
var distX = 0,
|
||||
distY = 0;
|
||||
|
||||
if(this.settings.axis === "vertical") {
|
||||
distY = offset.top;
|
||||
} else {
|
||||
distX = Math.floor(offset.left / this.layout.delta) * this.layout.delta;
|
||||
|
||||
if (distX + this.layout.delta > this.container.scrollWidth) {
|
||||
distX = this.container.scrollWidth - this.layout.delta;
|
||||
}
|
||||
}
|
||||
|
||||
this.scrollTo(distX, distY);
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.add = function(section){
|
||||
var view = this.createView(section);
|
||||
|
||||
this.views.append(view);
|
||||
|
||||
// view.on("shown", this.afterDisplayed.bind(this));
|
||||
view.onDisplayed = this.afterDisplayed.bind(this);
|
||||
view.onResize = this.afterResized.bind(this);
|
||||
|
||||
return view.display(this.request);
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.append = function(section){
|
||||
var view = this.createView(section);
|
||||
this.views.append(view);
|
||||
return view.display(this.request);
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.prepend = function(section){
|
||||
var view = this.createView(section);
|
||||
|
||||
this.views.prepend(view);
|
||||
return view.display(this.request);
|
||||
};
|
||||
// SingleViewManager.prototype.resizeView = function(view) {
|
||||
//
|
||||
// if(this.settings.globalLayoutProperties.layout === "pre-paginated") {
|
||||
// view.lock("both", this.bounds.width, this.bounds.height);
|
||||
// } else {
|
||||
// view.lock("width", this.bounds.width, this.bounds.height);
|
||||
// }
|
||||
//
|
||||
// };
|
||||
|
||||
SingleViewManager.prototype.next = function(){
|
||||
var next;
|
||||
var view;
|
||||
var left;
|
||||
|
||||
if(!this.views.length) return;
|
||||
|
||||
if(this.settings.axis === "horizontal") {
|
||||
|
||||
this.scrollLeft = this.container.scrollLeft;
|
||||
|
||||
left = this.container.scrollLeft + this.container.offsetWidth + this.layout.delta;
|
||||
|
||||
if(left < this.container.scrollWidth) {
|
||||
this.scrollBy(this.layout.delta, 0);
|
||||
} else if (left - this.layout.columnWidth === this.container.scrollWidth) {
|
||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
||||
} else {
|
||||
next = this.views.last().section.next();
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
next = this.views.last().section.next();
|
||||
|
||||
}
|
||||
|
||||
if(next) {
|
||||
this.views.clear();
|
||||
|
||||
return this.append(next)
|
||||
.then(function(){
|
||||
var right;
|
||||
if (this.layout.name && this.layout.divisor > 1) {
|
||||
right = next.next();
|
||||
if (right) {
|
||||
return this.append(right);
|
||||
}
|
||||
}
|
||||
}.bind(this))
|
||||
.then(function(){
|
||||
this.views.show();
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.prev = function(){
|
||||
var prev;
|
||||
var view;
|
||||
var left;
|
||||
|
||||
if(!this.views.length) return;
|
||||
|
||||
if(this.settings.axis === "horizontal") {
|
||||
|
||||
this.scrollLeft = this.container.scrollLeft;
|
||||
|
||||
left = this.container.scrollLeft;
|
||||
|
||||
if(left > 0) {
|
||||
this.scrollBy(-this.layout.delta, 0);
|
||||
} else {
|
||||
prev = this.views.first().section.prev();
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
prev = this.views.first().section.prev();
|
||||
|
||||
}
|
||||
|
||||
if(prev) {
|
||||
this.views.clear();
|
||||
|
||||
return this.prepend(prev)
|
||||
.then(function(){
|
||||
var left;
|
||||
if (this.layout.name && this.layout.divisor > 1) {
|
||||
left = prev.prev();
|
||||
if (left) {
|
||||
return this.prepend(left);
|
||||
}
|
||||
}
|
||||
}.bind(this))
|
||||
.then(function(){
|
||||
if(this.settings.axis === "horizontal") {
|
||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
||||
}
|
||||
this.views.show();
|
||||
}.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.current = function(){
|
||||
var visible = this.visible();
|
||||
if(visible.length){
|
||||
// Current is the last visible view
|
||||
return visible[visible.length-1];
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
SingleViewManager.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.mapping.page(view, view.section.cfiBase);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.isVisible = function(view, offsetPrev, offsetNext, _container){
|
||||
var position = view.position();
|
||||
var container = _container || this.bounds();
|
||||
|
||||
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;
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.visible = function(){
|
||||
// return this.views.displayed();
|
||||
var container = this.bounds();
|
||||
var views = this.views.displayed();
|
||||
var viewsLength = views.length;
|
||||
var visible = [];
|
||||
var isVisible;
|
||||
var view;
|
||||
|
||||
for (var i = 0; i < viewsLength; i++) {
|
||||
view = views[i];
|
||||
isVisible = this.isVisible(view, 0, 0, container);
|
||||
|
||||
if(isVisible === true) {
|
||||
visible.push(view);
|
||||
}
|
||||
|
||||
}
|
||||
return visible;
|
||||
};
|
||||
|
||||
SingleViewManager.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;
|
||||
this.onScroll();
|
||||
};
|
||||
|
||||
SingleViewManager.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;
|
||||
this.onScroll();
|
||||
// if(this.container.scrollLeft != x){
|
||||
// setTimeout(function() {
|
||||
// this.scrollTo(x, y, silent);
|
||||
// }.bind(this), 10);
|
||||
// return;
|
||||
// };
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.onScroll = function(){
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.bounds = function() {
|
||||
var bounds;
|
||||
|
||||
bounds = this.stage.bounds();
|
||||
|
||||
return bounds;
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.applyLayout = function(layout) {
|
||||
|
||||
this.layout = layout;
|
||||
this.updateLayout();
|
||||
|
||||
this.mapping = new Mapping(this.layout);
|
||||
// this.manager.layout(this.layout.format);
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.updateLayout = function() {
|
||||
if (!this.stage) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._stageSize = this.stage.size();
|
||||
|
||||
if(this.settings.axis === "vertical") {
|
||||
this.layout.calculate(this._stageSize.width, this._stageSize.height);
|
||||
} else {
|
||||
this.layout.calculate(
|
||||
this._stageSize.width,
|
||||
this._stageSize.height,
|
||||
this.settings.gap
|
||||
);
|
||||
|
||||
// Set the look ahead offset for what is visible
|
||||
this.settings.offset = this.layout.delta;
|
||||
|
||||
this.stage.addStyleRules("iframe", [{"margin-right" : this.layout.gap + "px"}]);
|
||||
|
||||
}
|
||||
|
||||
// Set the dimensions for views
|
||||
this.viewSettings.width = this.layout.width;
|
||||
this.viewSettings.height = this.layout.height;
|
||||
|
||||
this.setLayout(this.layout);
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.setLayout = function(layout){
|
||||
|
||||
this.viewSettings.layout = layout;
|
||||
|
||||
if(this.views) {
|
||||
|
||||
this.views.each(function(view){
|
||||
view.setLayout(layout);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.updateFlow = function(flow){
|
||||
var axis = (flow === "paginated") ? "horizontal" : "vertical";
|
||||
|
||||
this.settings.axis = axis;
|
||||
|
||||
this.viewSettings.axis = axis;
|
||||
|
||||
this.settings.overflow = (flow === "paginated") ? "hidden" : "auto";
|
||||
// this.views.each(function(view){
|
||||
// view.setAxis(axis);
|
||||
// });
|
||||
|
||||
};
|
||||
|
||||
//-- Enable binding events to Manager
|
||||
RSVP.EventTarget.mixin(SingleViewManager.prototype);
|
||||
|
||||
module.exports = SingleViewManager;
|
||||
Loading…
Add table
Add a link
Reference in a new issue