mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-04 15:09:16 +02:00
Added basic pagination
This commit is contained in:
Fred Chasen
parent
1a89a9c3ff
commit
816880d328
12 changed files with 1289 additions and 373 deletions
|
|
@ -1,97 +1,176 @@
|
|||
EPUBJS.Layout = function(){};
|
||||
EPUBJS.Layout = EPUBJS.Layout || {};
|
||||
|
||||
/**
|
||||
* Reconciles the current chapters layout properies with
|
||||
* the global layout properities.
|
||||
* Takes: global layout settings object, chapter properties string
|
||||
* Returns: Object with layout properties
|
||||
*/
|
||||
EPUBJS.Layout.prototype.reconcileLayoutSettings = function(global, chapter){
|
||||
var settings = {};
|
||||
EPUBJS.Layout.Reflowable = function(){
|
||||
this.documentElement = null;
|
||||
this.spreadWidth = null;
|
||||
};
|
||||
|
||||
//-- Get the global defaults
|
||||
for (var attr in global) {
|
||||
if (global.hasOwnProperty(attr)){
|
||||
settings[attr] = global[attr];
|
||||
EPUBJS.Layout.Reflowable.prototype.format = function(documentElement, _width, _height, _gap){
|
||||
// Get the prefixed CSS commands
|
||||
var columnAxis = EPUBJS.core.prefixed('columnAxis');
|
||||
var columnGap = EPUBJS.core.prefixed('columnGap');
|
||||
var columnWidth = EPUBJS.core.prefixed('columnWidth');
|
||||
var columnFill = EPUBJS.core.prefixed('columnFill');
|
||||
|
||||
//-- Check the width and create even width columns
|
||||
var width = Math.floor(_width);
|
||||
// var width = (fullWidth % 2 === 0) ? fullWidth : fullWidth - 0; // Not needed for single
|
||||
var section = Math.floor(width / 8);
|
||||
var gap = (_gap >= 0) ? _gap : ((section % 2 === 0) ? section : section - 1);
|
||||
this.documentElement = documentElement;
|
||||
//-- Single Page
|
||||
this.spreadWidth = (width + gap);
|
||||
|
||||
|
||||
documentElement.style.overflow = "hidden";
|
||||
|
||||
// Must be set to the new calculated width or the columns will be off
|
||||
documentElement.style.width = width + "px";
|
||||
|
||||
//-- Adjust height
|
||||
documentElement.style.height = _height + "px";
|
||||
|
||||
//-- Add columns
|
||||
documentElement.style[columnAxis] = "horizontal";
|
||||
documentElement.style[columnFill] = "auto";
|
||||
documentElement.style[columnWidth] = width+"px";
|
||||
documentElement.style[columnGap] = gap+"px";
|
||||
this.colWidth = width;
|
||||
this.gap = gap;
|
||||
|
||||
return {
|
||||
pageWidth : this.spreadWidth,
|
||||
pageHeight : _height
|
||||
};
|
||||
};
|
||||
|
||||
EPUBJS.Layout.Reflowable.prototype.calculatePages = function() {
|
||||
var totalWidth, displayedPages;
|
||||
this.documentElement.style.width = "auto"; //-- reset width for calculations
|
||||
totalWidth = this.documentElement.scrollWidth;
|
||||
displayedPages = Math.ceil(totalWidth / this.spreadWidth);
|
||||
|
||||
return {
|
||||
displayedPages : displayedPages,
|
||||
pageCount : displayedPages
|
||||
};
|
||||
};
|
||||
|
||||
EPUBJS.Layout.ReflowableSpreads = function(){
|
||||
this.documentElement = null;
|
||||
this.spreadWidth = null;
|
||||
};
|
||||
|
||||
EPUBJS.Layout.ReflowableSpreads.prototype.format = function(view, _width, _height, _gap){
|
||||
var columnAxis = EPUBJS.core.prefixed('columnAxis');
|
||||
var columnGap = EPUBJS.core.prefixed('columnGap');
|
||||
var columnWidth = EPUBJS.core.prefixed('columnWidth');
|
||||
var columnFill = EPUBJS.core.prefixed('columnFill');
|
||||
|
||||
var divisor = 2,
|
||||
cutoff = 800;
|
||||
|
||||
//-- Check the width and create even width columns
|
||||
var fullWidth = Math.floor(_width);
|
||||
var width = (fullWidth % 2 === 0) ? fullWidth : fullWidth - 1;
|
||||
|
||||
var section = Math.floor(width / 8);
|
||||
var gap = (_gap >= 0) ? _gap : ((section % 2 === 0) ? section : section - 1);
|
||||
|
||||
//-- Double Page
|
||||
var colWidth = Math.floor((width - gap) / divisor);
|
||||
|
||||
this.spreadWidth = (colWidth + gap) * divisor;
|
||||
|
||||
|
||||
view.document.documentElement.style.overflow = "hidden";
|
||||
|
||||
// Must be set to the new calculated width or the columns will be off
|
||||
view.document.body.style.width = width + "px";
|
||||
|
||||
//-- Adjust height
|
||||
view.document.body.style.height = _height + "px";
|
||||
|
||||
//-- Add columns
|
||||
view.document.body.style[columnAxis] = "horizontal";
|
||||
view.document.body.style[columnFill] = "auto";
|
||||
view.document.body.style[columnGap] = gap+"px";
|
||||
view.document.body.style[columnWidth] = colWidth+"px";
|
||||
|
||||
this.colWidth = colWidth;
|
||||
this.gap = gap;
|
||||
|
||||
view.iframe.style.width = colWidth+"px";
|
||||
view.iframe.style.paddingRight = gap+"px";
|
||||
|
||||
return {
|
||||
pageWidth : this.spreadWidth,
|
||||
pageHeight : _height
|
||||
};
|
||||
};
|
||||
|
||||
EPUBJS.Layout.ReflowableSpreads.prototype.calculatePages = function() {
|
||||
var totalWidth = this.documentElement.scrollWidth;
|
||||
var displayedPages = Math.ceil(totalWidth / this.spreadWidth);
|
||||
|
||||
//-- Add a page to the width of the document to account an for odd number of pages
|
||||
this.documentElement.style.width = totalWidth + this.spreadWidth + "px";
|
||||
return {
|
||||
displayedPages : displayedPages,
|
||||
pageCount : displayedPages * 2
|
||||
};
|
||||
};
|
||||
|
||||
EPUBJS.Layout.Fixed = function(){
|
||||
this.documentElement = null;
|
||||
};
|
||||
|
||||
EPUBJS.Layout.Fixed = function(documentElement, _width, _height, _gap){
|
||||
var columnWidth = EPUBJS.core.prefixed('columnWidth');
|
||||
var viewport = documentElement.querySelector("[name=viewport");
|
||||
var content;
|
||||
var contents;
|
||||
var width, height;
|
||||
|
||||
this.documentElement = documentElement;
|
||||
/**
|
||||
* check for the viewport size
|
||||
* <meta name="viewport" content="width=1024,height=697" />
|
||||
*/
|
||||
if(viewport && viewport.hasAttribute("content")) {
|
||||
content = viewport.getAttribute("content");
|
||||
contents = content.split(',');
|
||||
if(contents[0]){
|
||||
width = contents[0].replace("width=", '');
|
||||
}
|
||||
if(contents[1]){
|
||||
height = contents[1].replace("height=", '');
|
||||
}
|
||||
}
|
||||
//-- Get the chapter's display type
|
||||
chapter.forEach(function(prop){
|
||||
var rendition = prop.replace("rendition:", '');
|
||||
var split = rendition.indexOf("-");
|
||||
var property, value;
|
||||
|
||||
if(split != -1){
|
||||
property = rendition.slice(0, split);
|
||||
value = rendition.slice(split+1);
|
||||
//-- Adjust width and height
|
||||
documentElement.style.width = width + "px" || "auto";
|
||||
documentElement.style.height = height + "px" || "auto";
|
||||
|
||||
//-- Remove columns
|
||||
documentElement.style[columnWidth] = "auto";
|
||||
|
||||
//-- Scroll
|
||||
documentElement.style.overflow = "auto";
|
||||
|
||||
this.colWidth = width;
|
||||
this.gap = 0;
|
||||
|
||||
return {
|
||||
pageWidth : width,
|
||||
pageHeight : height
|
||||
};
|
||||
|
||||
settings[property] = value;
|
||||
}
|
||||
});
|
||||
return settings;
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
EPUBJS.Layout.prototype.determineLayout = function(settings){
|
||||
// Default is layout: reflowable & spread: auto
|
||||
var spreads = this.determineSpreads(this.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;
|
||||
this.render.scroll(scroll);
|
||||
this.trigger("renderer:spreads", spreads);
|
||||
return layoutMethod;
|
||||
EPUBJS.Layout.Fixed.prototype.calculatePages = function(){
|
||||
return {
|
||||
displayedPages : 1,
|
||||
pageCount : 1
|
||||
};
|
||||
};
|
||||
|
||||
//-- STYLES
|
||||
|
||||
EPUBJS.Layout.prototype.applyStyles = function(styles) {
|
||||
for (var style in styles) {
|
||||
for (var view in this.views) {
|
||||
view.setStyle(style, styles[style]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
EPUBJS.Layout.prototype.setStyle = function(style, val, prefixed){
|
||||
for (var view in this.views) {
|
||||
view.setStyle(style, val, prefixed);
|
||||
}
|
||||
};
|
||||
|
||||
EPUBJS.Layout.prototype.removeStyle = function(style){
|
||||
for (var view in this.views) {
|
||||
view.removeStyle(style);
|
||||
}
|
||||
};
|
||||
|
||||
//-- HEAD TAGS
|
||||
EPUBJS.Layout.prototype.applyHeadTags = function(headTags) {
|
||||
for ( var headTag in headTags ) {
|
||||
this.render.addHeadTag(headTag, headTags[headTag]);
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue