mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-03 14:59:18 +02:00
fixed merge
This commit is contained in:
commit
2aaac35671
20 changed files with 780 additions and 344 deletions
455
dist/epub.js
vendored
455
dist/epub.js
vendored
File diff suppressed because it is too large
Load diff
2
dist/epub.js.map
vendored
2
dist/epub.js.map
vendored
File diff suppressed because one or more lines are too long
|
@ -3,11 +3,20 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>EPUB.js Basic Example</title>
|
<title>EPUB.js + Hypothes.is Example</title>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
|
||||||
<script src="../dist/epub.js"></script>
|
<script src="../dist/epub.js"></script>
|
||||||
|
|
||||||
<script src="//hypothes.is/embed.js"></script>
|
<script>
|
||||||
|
window.hypothesisConfig = function () {
|
||||||
|
return {
|
||||||
|
constructor: this.Annotator.Sidebar,
|
||||||
|
app: 'http://45.55.144.135:5000/app.html',
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="http://45.55.144.135:5000/embed.js"></script>
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body {
|
body {
|
||||||
|
@ -15,17 +24,22 @@
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#navigation {
|
#navigation {
|
||||||
width: 200px;
|
width: 300px;
|
||||||
margin-top: 60px;
|
position: absolute;
|
||||||
float: left;
|
overflow: auto;
|
||||||
padding: 0 0 0 100px;
|
top: 60px;
|
||||||
|
left: 1000px
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigation.fixed {
|
||||||
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navigation h1 {
|
#navigation h1 {
|
||||||
|
width: 200px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #777;
|
color: #777;
|
||||||
|
@ -40,7 +54,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#navigation ul {
|
#navigation ul {
|
||||||
padding-left: 0;
|
padding-left: 18px;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,12 +94,20 @@
|
||||||
background: white;
|
background: white;
|
||||||
box-shadow: 0 0 4px #ccc;
|
box-shadow: 0 0 4px #ccc;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
padding: 20px;
|
padding: 40px 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
margin-left: 300px;
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 100px;
|
||||||
width: 800px;
|
width: 800px;
|
||||||
|
z-index: 2;
|
||||||
|
transition: left .15s cubic-bezier(.55, 0, .2, .8) .08s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main.open {
|
||||||
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pagination {
|
#pagination {
|
||||||
|
@ -139,36 +161,12 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*#annotation-controls {
|
|
||||||
position: absolute;
|
|
||||||
top: -7px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#annotation-controls ul {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#annotation-controls ul li button {
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
background: #fff;
|
|
||||||
border: none;
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#annotation-controls ul li button:hover {
|
|
||||||
opacity: .8;
|
|
||||||
}
|
|
||||||
|
|
||||||
#annotation-controls ul li button:focus {
|
|
||||||
border: none !important;
|
|
||||||
}*/
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="navigation">
|
<div id="navigation">
|
||||||
<h1 id="title">...</h1>
|
<h1 id="title">...</h1>
|
||||||
|
<image id="cover" width="150px"/>
|
||||||
<h2 id="author">...</h2>
|
<h2 id="author">...</h2>
|
||||||
<ul id="toc"></ul>
|
<ul id="toc"></ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -179,34 +177,36 @@
|
||||||
<a id="next" href="#next" class="arrow">...</a>
|
<a id="next" href="#next" class="arrow">...</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div id="annotation-controls"></div> -->
|
|
||||||
<!-- <div id="hypothesis">
|
|
||||||
<iframe src="//hypothes.is/app.html" seamless></iframe>
|
|
||||||
</div> -->
|
|
||||||
<script>
|
<script>
|
||||||
var currentSectionIndex = 8;
|
var currentSectionIndex = 8;
|
||||||
// Load the opf
|
// Load the opf
|
||||||
var book = ePub("../books/alice/");
|
var book = ePub("../books/11-3-117-1-10-20141029.epub");
|
||||||
var rendition = book.renderTo("viewer");
|
var rendition = book.renderTo("viewer");
|
||||||
|
|
||||||
var hash = window.location.hash.slice(2);
|
// var hash = window.location.hash.slice(2);
|
||||||
|
var loc = window.location.href.indexOf("?loc=");
|
||||||
|
if (loc > -1) {
|
||||||
|
var href = window.location.href.slice(loc + 5);
|
||||||
|
var hash = decodeURIComponent(href);
|
||||||
|
}
|
||||||
rendition.display(hash || 1);
|
rendition.display(hash || 1);
|
||||||
|
|
||||||
|
|
||||||
var next = document.getElementById("next");
|
var next = document.getElementById("next");
|
||||||
next.addEventListener("click", function(e){
|
next.addEventListener("click", function(e){
|
||||||
|
window.scrollTo(0,0);
|
||||||
rendition.next();
|
rendition.next();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
var prev = document.getElementById("prev");
|
var prev = document.getElementById("prev");
|
||||||
prev.addEventListener("click", function(e){
|
prev.addEventListener("click", function(e){
|
||||||
|
window.scrollTo(0,0);
|
||||||
rendition.prev();
|
rendition.prev();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
rendition.on("rendered", function(section){
|
rendition.on("rendered", function(section){
|
||||||
var nextSection = section.next();
|
var nextSection = section.next();
|
||||||
var prevSection = section.prev();
|
var prevSection = section.prev();
|
||||||
|
@ -239,8 +239,17 @@
|
||||||
prev.textContent = "";
|
prev.textContent = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var old = document.querySelectorAll('.active');
|
||||||
|
Array.prototype.slice.call(old, 0).forEach(function (link) {
|
||||||
|
link.classList.remove("active");
|
||||||
|
})
|
||||||
|
|
||||||
|
var active = document.querySelector('a[href="'+section.href+'"]');
|
||||||
|
if (active) {
|
||||||
|
active.classList.add("active");
|
||||||
|
}
|
||||||
// Add CFI fragment to the history
|
// Add CFI fragment to the history
|
||||||
// history.pushState({}, '', section.href);
|
history.pushState({}, '', "?loc=" + encodeURIComponent(section.href));
|
||||||
// window.location.hash = "#/"+section.href
|
// window.location.hash = "#/"+section.href
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -248,9 +257,10 @@
|
||||||
var $nav = document.getElementById("toc"),
|
var $nav = document.getElementById("toc"),
|
||||||
docfrag = document.createDocumentFragment();
|
docfrag = document.createDocumentFragment();
|
||||||
|
|
||||||
toc.forEach(function(chapter) {
|
toc.forEach(function(chapter, index) {
|
||||||
var item = document.createElement("li");
|
var item = document.createElement("li");
|
||||||
var link = document.createElement("a");
|
var link = document.createElement("a");
|
||||||
|
link.id = "chap-" + chapter.id;
|
||||||
link.textContent = chapter.label;
|
link.textContent = chapter.label;
|
||||||
link.href = chapter.href;
|
link.href = chapter.href;
|
||||||
item.appendChild(link);
|
item.appendChild(link);
|
||||||
|
@ -273,73 +283,94 @@
|
||||||
book.loaded.metadata.then(function(meta){
|
book.loaded.metadata.then(function(meta){
|
||||||
var $title = document.getElementById("title");
|
var $title = document.getElementById("title");
|
||||||
var $author = document.getElementById("author");
|
var $author = document.getElementById("author");
|
||||||
|
var $cover = document.getElementById("cover");
|
||||||
|
var $nav = document.getElementById('navigation');
|
||||||
|
|
||||||
$title.textContent = meta.title;
|
$title.textContent = meta.title;
|
||||||
$author.textContent = meta.creator;
|
$author.textContent = meta.creator;
|
||||||
|
if (book.archive) {
|
||||||
|
book.archive.createUrl(book.cover)
|
||||||
|
.then(function (url) {
|
||||||
|
$cover.src = url;
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
$cover.src = book.cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($nav.offsetHeight + 60 < window.innerHeight) {
|
||||||
|
$nav.classList.add("fixed");
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function checkForAnnotator(cb, w) {
|
||||||
|
if (!w) {
|
||||||
|
w = window;
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
if (w && w.annotator) {
|
||||||
|
cb();
|
||||||
|
} else {
|
||||||
|
checkForAnnotator(cb, w);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
book.rendition.hooks.content.register(function(view) {
|
book.rendition.hooks.content.register(function(view) {
|
||||||
view.addScript("//hypothes.is/embed.js").then(function() {
|
|
||||||
view.window.hypothesisConfig = function () {
|
view.window.hypothesisConfig = function () {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
constructor: this.Annotator.Guest,
|
constructor: this.Annotator.Guest,
|
||||||
app: 'https://hypothes.is/app.html'
|
app: 'http://45.55.144.135:5000/app.html'
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
})
|
|
||||||
|
view.contents.addScript("http://45.55.144.135:5000/embed.js").then(function() {
|
||||||
|
|
||||||
|
checkForAnnotator(function () {
|
||||||
|
|
||||||
|
var annotator = view.window.annotator;
|
||||||
|
|
||||||
|
annotator.on("scrollToAnnotation", function (node) {
|
||||||
|
var cfi = view.section.cfiFromElement(node);
|
||||||
|
// var selectors = ev.target[0].selector;
|
||||||
|
// var range = selectors[0];
|
||||||
|
console.log("scrollToAnnotation", cfi);
|
||||||
|
book.rendition.display(cfi);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
annotator.on("highlightClick", function (annotation) {
|
||||||
|
console.log(annotation);
|
||||||
|
window.annotator.show();
|
||||||
|
})
|
||||||
|
|
||||||
|
annotator.on("beforeAnnotationCreated", function (annotation) {
|
||||||
|
console.log(annotation);
|
||||||
|
window.annotator.show();
|
||||||
|
})
|
||||||
|
|
||||||
|
}, view.window);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
checkForAnnotator(function () {
|
||||||
|
var main = document.querySelector('#main');
|
||||||
|
|
||||||
|
if(window.innerWidth < 1400) {
|
||||||
|
window.annotator.on("show", function () {
|
||||||
|
main.classList.add("open");
|
||||||
|
});
|
||||||
|
|
||||||
|
window.annotator.on("hide", function () {
|
||||||
|
main.classList.remove("open");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script>
|
|
||||||
// // Hypothesis Customized embedding
|
|
||||||
// // This hypothesis config function returns a new constructor which modifies
|
|
||||||
// // annotator for a better integration. Below we create our own EpubAnnotationSidebar
|
|
||||||
// // Constructor, customizing the show and hide function to take acount for the reader UI.
|
|
||||||
//
|
|
||||||
// window.hypothesisConfig = function() {
|
|
||||||
// var Annotator = window.Annotator;
|
|
||||||
// var $main = $("#main");
|
|
||||||
//
|
|
||||||
// function EpubAnnotationSidebar(elem, options) {
|
|
||||||
// options = {
|
|
||||||
// server: true,
|
|
||||||
// origin: true,
|
|
||||||
// showHighlights: true,
|
|
||||||
// Toolbar: {container: '#annotation-controls'}
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// Annotator.Host.call(this, elem, options);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// EpubAnnotationSidebar.prototype = Object.create(Annotator.Host.prototype);
|
|
||||||
//
|
|
||||||
// // EpubAnnotationSidebar.prototype.show = function() {
|
|
||||||
// // this.frame.css({
|
|
||||||
// // 'margin-left': (-1 * this.frame.width()) + "px"
|
|
||||||
// // });
|
|
||||||
// // this.frame.removeClass('annotator-collapsed');
|
|
||||||
// // if (!$main.hasClass('single')) {
|
|
||||||
// // $main.addClass("single");
|
|
||||||
// // this.toolbar.find('[name=sidebar-toggle]').removeClass('h-icon-chevron-left').addClass('h-icon-chevron-right');
|
|
||||||
// // this.setVisibleHighlights(true);
|
|
||||||
// // }
|
|
||||||
// // };
|
|
||||||
// //
|
|
||||||
// // EpubAnnotationSidebar.prototype.hide = function() {
|
|
||||||
// // this.frame.css({
|
|
||||||
// // 'margin-left': ''
|
|
||||||
// // });
|
|
||||||
// // this.frame.addClass('annotator-collapsed');
|
|
||||||
// // if ($main.hasClass('single')) {
|
|
||||||
// // $main.removeClass("single");
|
|
||||||
// // this.toolbar.find('[name=sidebar-toggle]').removeClass('h-icon-chevron-right').addClass('h-icon-chevron-left');
|
|
||||||
// // this.setVisibleHighlights(false);
|
|
||||||
// // }
|
|
||||||
// // };
|
|
||||||
//
|
|
||||||
// return {
|
|
||||||
// constructor: EpubAnnotationSidebar
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -121,7 +121,7 @@
|
||||||
// var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
|
// var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
|
||||||
var book = ePub("../books/alice/OPS/package.opf");
|
var book = ePub("../books/alice/OPS/package.opf");
|
||||||
var rendition = book.renderTo("viewer", {
|
var rendition = book.renderTo("viewer", {
|
||||||
method: "paginate",
|
manager: "paginate",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: 600
|
height: 600
|
||||||
});
|
});
|
||||||
|
|
109
src/contents.js
109
src/contents.js
|
@ -8,48 +8,90 @@ function Contents(doc, content) {
|
||||||
|
|
||||||
this.document = doc;
|
this.document = doc;
|
||||||
this.documentElement = this.document.documentElement;
|
this.documentElement = this.document.documentElement;
|
||||||
this.content = content || this.document.body;
|
this.content = content;
|
||||||
this.window = this.document.defaultView;
|
this.window = this.document.defaultView;
|
||||||
// Dom events to listen for
|
// Dom events to listen for
|
||||||
this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
|
this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
|
||||||
|
|
||||||
|
this.size = {
|
||||||
|
width: 0,
|
||||||
|
height: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
this.listeners();
|
||||||
};
|
};
|
||||||
|
|
||||||
Contents.prototype.width = function(w) {
|
Contents.prototype.width = function(w) {
|
||||||
|
var frame = this.content || this.documentElement;
|
||||||
|
|
||||||
if (w && core.isNumber(w)) {
|
if (w && core.isNumber(w)) {
|
||||||
w = w + "px";
|
w = w + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (w) {
|
if (w) {
|
||||||
this.documentElement.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) {
|
Contents.prototype.height = function(h) {
|
||||||
|
var frame = this.content || this.documentElement;
|
||||||
|
|
||||||
if (h && core.isNumber(h)) {
|
if (h && core.isNumber(h)) {
|
||||||
h = h + "px";
|
h = h + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (h) {
|
if (h) {
|
||||||
this.documentElement.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() {
|
Contents.prototype.textWidth = function() {
|
||||||
var width;
|
var width;
|
||||||
var range = this.document.createRange();
|
var range = this.document.createRange();
|
||||||
|
var content = this.content || this.document.body;
|
||||||
|
|
||||||
// Select the contents of frame
|
// Select the contents of frame
|
||||||
range.selectNodeContents(this.content);
|
range.selectNodeContents(content);
|
||||||
|
|
||||||
// get the width of the text content
|
// get the width of the text content
|
||||||
width = range.getBoundingClientRect().width;
|
width = range.getBoundingClientRect().width;
|
||||||
|
@ -60,9 +102,9 @@ Contents.prototype.textWidth = function() {
|
||||||
Contents.prototype.textHeight = function() {
|
Contents.prototype.textHeight = function() {
|
||||||
var height;
|
var height;
|
||||||
var range = this.document.createRange();
|
var range = this.document.createRange();
|
||||||
|
var content = this.content || this.document.body;
|
||||||
|
|
||||||
|
range.selectNodeContents(content);
|
||||||
range.selectNodeContents(this.content);
|
|
||||||
|
|
||||||
height = range.getBoundingClientRect().height;
|
height = range.getBoundingClientRect().height;
|
||||||
|
|
||||||
|
@ -83,7 +125,7 @@ Contents.prototype.scrollHeight = function() {
|
||||||
|
|
||||||
Contents.prototype.overflow = function(overflow) {
|
Contents.prototype.overflow = function(overflow) {
|
||||||
|
|
||||||
if (h) {
|
if (overflow) {
|
||||||
this.documentElement.style.overflow = overflow;
|
this.documentElement.style.overflow = overflow;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -91,12 +133,13 @@ Contents.prototype.overflow = function(overflow) {
|
||||||
};
|
};
|
||||||
|
|
||||||
Contents.prototype.css = function(property, value) {
|
Contents.prototype.css = function(property, value) {
|
||||||
|
var content = this.content || this.document.body;
|
||||||
|
|
||||||
if (value) {
|
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() {
|
Contents.prototype.viewport = function() {
|
||||||
|
@ -148,7 +191,7 @@ Contents.prototype.viewport = function() {
|
||||||
// };
|
// };
|
||||||
|
|
||||||
Contents.prototype.expand = function() {
|
Contents.prototype.expand = function() {
|
||||||
//TODO: this should just report resize
|
this.trigger("expand");
|
||||||
};
|
};
|
||||||
|
|
||||||
Contents.prototype.listeners = function() {
|
Contents.prototype.listeners = function() {
|
||||||
|
@ -157,9 +200,14 @@ Contents.prototype.listeners = function() {
|
||||||
|
|
||||||
this.mediaQueryListeners();
|
this.mediaQueryListeners();
|
||||||
|
|
||||||
|
this.fontLoadListeners();
|
||||||
|
|
||||||
this.addEventListeners();
|
this.addEventListeners();
|
||||||
|
|
||||||
this.addSelectionListeners();
|
this.addSelectionListeners();
|
||||||
|
|
||||||
|
this.resizeListeners();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Contents.prototype.removeListeners = function() {
|
Contents.prototype.removeListeners = function() {
|
||||||
|
@ -169,10 +217,25 @@ Contents.prototype.removeListeners = function() {
|
||||||
this.removeSelectionListeners();
|
this.removeSelectionListeners();
|
||||||
};
|
};
|
||||||
|
|
||||||
Contents.prototype.resizeListenters = function() {
|
Contents.prototype.resizeListeners = function() {
|
||||||
|
var width, height;
|
||||||
// Test size again
|
// Test size again
|
||||||
clearTimeout(this.expanding);
|
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
|
//https://github.com/tylergaw/media-query-events/blob/master/js/mq-events.js
|
||||||
|
@ -222,7 +285,7 @@ Contents.prototype.observe = function(target) {
|
||||||
};
|
};
|
||||||
|
|
||||||
Contents.prototype.imageLoadListeners = function(target) {
|
Contents.prototype.imageLoadListeners = function(target) {
|
||||||
var images = this.contentDocument.querySelectorAll("img");
|
var images = this.document.querySelectorAll("img");
|
||||||
var img;
|
var img;
|
||||||
for (var i = 0; i < images.length; i++) {
|
for (var i = 0; i < images.length; i++) {
|
||||||
img = images[i];
|
img = images[i];
|
||||||
|
@ -234,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() {
|
Contents.prototype.root = function() {
|
||||||
if(!this.document) return null;
|
if(!this.document) return null;
|
||||||
return this.document.documentElement;
|
return this.document.documentElement;
|
||||||
|
@ -246,9 +320,14 @@ Contents.prototype.locationOf = function(target, ignoreClass) {
|
||||||
|
|
||||||
if(this.epubcfi.isCfiString(target)) {
|
if(this.epubcfi.isCfiString(target)) {
|
||||||
range = new EpubCFI(cfi).toRange(this.document, ignoreClass);
|
range = new EpubCFI(cfi).toRange(this.document, ignoreClass);
|
||||||
|
|
||||||
if(range) {
|
if(range) {
|
||||||
|
if (range.startContainer.nodeType === Node.ELEMENT_NODE) {
|
||||||
|
targetPos = range.startContainer.getBoundingClientRect();
|
||||||
|
} else {
|
||||||
targetPos = range.getBoundingClientRect();
|
targetPos = range.getBoundingClientRect();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
} else if(typeof target === "string" &&
|
} else if(typeof target === "string" &&
|
||||||
target.indexOf("#") > -1) {
|
target.indexOf("#") > -1) {
|
||||||
|
|
|
@ -439,6 +439,7 @@ function qs(el, sel) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function qsa(el, sel) {
|
function qsa(el, sel) {
|
||||||
|
|
||||||
if (typeof el.querySelector != "undefined") {
|
if (typeof el.querySelector != "undefined") {
|
||||||
return el.querySelectorAll(sel);
|
return el.querySelectorAll(sel);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -67,7 +67,7 @@ EpubCFI.prototype.checkType = function(cfi) {
|
||||||
// Is a range object
|
// Is a range object
|
||||||
} else if (typeof cfi === 'object' && core.type(cfi) === "Range"){
|
} else if (typeof cfi === 'object' && core.type(cfi) === "Range"){
|
||||||
return 'range';
|
return 'range';
|
||||||
} else if (typeof cfi === 'object' && cfi instanceof window.Node ){ // || typeof cfi === 'function'
|
} else if (typeof cfi === 'object' && typeof(cfi.nodeType) != "undefined" ){ // || typeof cfi === 'function'
|
||||||
return 'node';
|
return 'node';
|
||||||
} else if (typeof cfi === 'object' && cfi instanceof EpubCFI){
|
} else if (typeof cfi === 'object' && cfi instanceof EpubCFI){
|
||||||
return 'EpubCFI';
|
return 'EpubCFI';
|
||||||
|
|
|
@ -46,8 +46,6 @@ Reflowable.prototype.calculate = function(_width, _height, _gap, _devisor){
|
||||||
|
|
||||||
delta = (colWidth + gap) * divisor;
|
delta = (colWidth + gap) * divisor;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
this.columnAxis = core.prefixed('columnAxis');
|
this.columnAxis = core.prefixed('columnAxis');
|
||||||
this.columnGap = core.prefixed('columnGap');
|
this.columnGap = core.prefixed('columnGap');
|
||||||
this.columnWidth = core.prefixed('columnWidth');
|
this.columnWidth = core.prefixed('columnWidth');
|
||||||
|
|
|
@ -14,8 +14,8 @@ function ContinuousViewManager(options) {
|
||||||
offsetDelta: 250
|
offsetDelta: 250
|
||||||
});
|
});
|
||||||
|
|
||||||
core.extend(this.settings, options.settings);
|
core.defaults(this.settings, options.settings || {});
|
||||||
|
// core.extend(this.settings, options.settings || {});
|
||||||
};
|
};
|
||||||
|
|
||||||
// subclass extends superclass
|
// subclass extends superclass
|
||||||
|
@ -82,7 +82,7 @@ ContinuousViewManager.prototype.append = function(section){
|
||||||
|
|
||||||
this.views.append(view);
|
this.views.append(view);
|
||||||
|
|
||||||
return this.update();
|
// return this.update();
|
||||||
|
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
};
|
};
|
||||||
|
@ -96,7 +96,7 @@ ContinuousViewManager.prototype.prepend = function(section){
|
||||||
|
|
||||||
this.views.prepend(view);
|
this.views.prepend(view);
|
||||||
|
|
||||||
return this.update();
|
// return this.update();
|
||||||
|
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
|
@ -165,10 +165,11 @@ ContinuousViewManager.prototype.check = function(_offset){
|
||||||
*/
|
*/
|
||||||
|
|
||||||
ContinuousViewManager.prototype.update = function(_offset){
|
ContinuousViewManager.prototype.update = function(_offset){
|
||||||
var container = this.stage.bounds();
|
var container = this.bounds();
|
||||||
var views = this.views;
|
var views = this.views.all();
|
||||||
var viewsLength = views.length;
|
var viewsLength = views.length;
|
||||||
var visible = [];
|
var visible = [];
|
||||||
|
var offset = _offset || this.settings.offset || 0;
|
||||||
var isVisible;
|
var isVisible;
|
||||||
var view;
|
var view;
|
||||||
|
|
||||||
|
@ -177,10 +178,11 @@ ContinuousViewManager.prototype.update = function(_offset){
|
||||||
|
|
||||||
for (var i = 0; i < viewsLength; i++) {
|
for (var i = 0; i < viewsLength; i++) {
|
||||||
view = views[i];
|
view = views[i];
|
||||||
isVisible = this.isVisible(view, 0, 0, container);
|
|
||||||
|
isVisible = this.isVisible(view, offset, offset, container);
|
||||||
|
|
||||||
if(isVisible === true) {
|
if(isVisible === true) {
|
||||||
promises.push(view.display());
|
promises.push(view.display(this.request));
|
||||||
visible.push(view);
|
visible.push(view);
|
||||||
} else {
|
} else {
|
||||||
this.q.enqueue(view.destroy.bind(view));
|
this.q.enqueue(view.destroy.bind(view));
|
||||||
|
@ -215,9 +217,9 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
|
||||||
delta = _offsetTop;
|
delta = _offsetTop;
|
||||||
}
|
}
|
||||||
|
|
||||||
var bounds = this.stage.bounds(); // TODO: save this until resize
|
var bounds = this._bounds; //this.bounds(); // bounds saved this until resize
|
||||||
|
|
||||||
var offset = horizontal ? this.container.scrollLeft : this.container.scrollTop;
|
var offset = horizontal ? this.scrollLeft : this.scrollTop;
|
||||||
var visibleLength = horizontal ? bounds.width : bounds.height;
|
var visibleLength = horizontal ? bounds.width : bounds.height;
|
||||||
var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
|
var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
|
||||||
|
|
||||||
|
@ -239,12 +241,11 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
|
||||||
}
|
}
|
||||||
|
|
||||||
if(promises.length){
|
if(promises.length){
|
||||||
|
|
||||||
return RSVP.all(promises)
|
return RSVP.all(promises)
|
||||||
.then(function(posts) {
|
.then(function(posts) {
|
||||||
// Check to see if anything new is on screen after rendering
|
// Check to see if anything new is on screen after rendering
|
||||||
this.q.enqueue(this.update.bind(this));
|
this.q.enqueue(this.update.bind(this));
|
||||||
|
// this.update(offset);
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
@ -329,24 +330,22 @@ ContinuousViewManager.prototype.addScrollListeners = function() {
|
||||||
|
|
||||||
if(this.settings.height) {
|
if(this.settings.height) {
|
||||||
scroller = this.container;
|
scroller = this.container;
|
||||||
|
this.scrollTop = this.container.scrollTop;
|
||||||
|
this.scrollLeft = this.container.scrollLeft;
|
||||||
} else {
|
} else {
|
||||||
scroller = window;
|
scroller = window;
|
||||||
|
this.scrollTop = window.scrollY;
|
||||||
|
this.scrollLeft = window.scrollX;
|
||||||
}
|
}
|
||||||
|
|
||||||
scroller.addEventListener("scroll", function(e){
|
scroller.addEventListener("scroll", this.onScroll.bind(this));
|
||||||
if(!this.ignore) {
|
|
||||||
this.scrolled = true;
|
|
||||||
} else {
|
|
||||||
this.ignore = false;
|
|
||||||
}
|
|
||||||
}.bind(this));
|
|
||||||
|
|
||||||
window.addEventListener('unload', function(e){
|
window.addEventListener('unload', function(e){
|
||||||
this.ignore = true;
|
this.ignore = true;
|
||||||
this.destroy();
|
this.destroy();
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
this.tick.call(window, this.onScroll.bind(this));
|
// this.tick.call(window, this.onScroll.bind(this));
|
||||||
|
|
||||||
this.scrolled = false;
|
this.scrolled = false;
|
||||||
|
|
||||||
|
@ -354,7 +353,7 @@ ContinuousViewManager.prototype.addScrollListeners = function() {
|
||||||
|
|
||||||
ContinuousViewManager.prototype.onScroll = function(){
|
ContinuousViewManager.prototype.onScroll = function(){
|
||||||
|
|
||||||
if(this.scrolled) {
|
// if(!this.ignore) {
|
||||||
|
|
||||||
if(this.settings.height) {
|
if(this.settings.height) {
|
||||||
scrollTop = this.container.scrollTop;
|
scrollTop = this.container.scrollTop;
|
||||||
|
@ -364,6 +363,9 @@ ContinuousViewManager.prototype.onScroll = function(){
|
||||||
scrollLeft = window.scrollX;
|
scrollLeft = window.scrollX;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.scrollTop = scrollTop;
|
||||||
|
this.scrollLeft = scrollLeft;
|
||||||
|
|
||||||
if(!this.ignore) {
|
if(!this.ignore) {
|
||||||
|
|
||||||
if((this.scrollDeltaVert === 0 &&
|
if((this.scrollDeltaVert === 0 &&
|
||||||
|
@ -371,7 +373,8 @@ ContinuousViewManager.prototype.onScroll = function(){
|
||||||
this.scrollDeltaVert > this.settings.offsetDelta ||
|
this.scrollDeltaVert > this.settings.offsetDelta ||
|
||||||
this.scrollDeltaHorz > this.settings.offsetDelta) {
|
this.scrollDeltaHorz > this.settings.offsetDelta) {
|
||||||
|
|
||||||
this.q.enqueue(this.check.bind(this));
|
// this.q.enqueue(this.check.bind(this));
|
||||||
|
this.check();
|
||||||
|
|
||||||
this.scrollDeltaVert = 0;
|
this.scrollDeltaVert = 0;
|
||||||
this.scrollDeltaHorz = 0;
|
this.scrollDeltaHorz = 0;
|
||||||
|
@ -401,9 +404,9 @@ ContinuousViewManager.prototype.onScroll = function(){
|
||||||
|
|
||||||
|
|
||||||
this.scrolled = false;
|
this.scrolled = false;
|
||||||
}
|
// }
|
||||||
|
|
||||||
this.tick.call(window, this.onScroll.bind(this));
|
// this.tick.call(window, this.onScroll.bind(this));
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -419,19 +422,20 @@ ContinuousViewManager.prototype.onScroll = function(){
|
||||||
// };
|
// };
|
||||||
|
|
||||||
ContinuousViewManager.prototype.currentLocation = function(){
|
ContinuousViewManager.prototype.currentLocation = function(){
|
||||||
|
|
||||||
var visible = this.visible();
|
var visible = this.visible();
|
||||||
var startPage, endPage;
|
var startPage, endPage;
|
||||||
|
|
||||||
var container = this.container.getBoundingClientRect();
|
var container = this.container.getBoundingClientRect();
|
||||||
|
|
||||||
if(visible.length === 1) {
|
if(visible.length === 1) {
|
||||||
return this.map.page(visible[0]);
|
return this.mapping.page(visible[0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(visible.length > 1) {
|
if(visible.length > 1) {
|
||||||
|
|
||||||
startPage = this.map.page(visible[0]);
|
startPage = this.mapping.page(visible[0]);
|
||||||
endPage = this.map.page(visible[visible.length-1]);
|
endPage = this.mapping.page(visible[visible.length-1]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
start: startPage.start,
|
start: startPage.start,
|
||||||
|
|
|
@ -4,9 +4,9 @@ var ContinuousViewManager = require('./continuous');
|
||||||
var Map = require('../map');
|
var Map = require('../map');
|
||||||
var Layout = require('../layout');
|
var Layout = require('../layout');
|
||||||
|
|
||||||
function PaginatedViewManager(book, options) {
|
function PaginatedViewManager(options) {
|
||||||
|
|
||||||
ContinuousViewManager.apply(arguments);
|
ContinuousViewManager.apply(this, arguments); // call super constructor.
|
||||||
|
|
||||||
this.settings = core.extend(this.settings || {}, {
|
this.settings = core.extend(this.settings || {}, {
|
||||||
width: 600,
|
width: 600,
|
||||||
|
@ -19,7 +19,7 @@ function PaginatedViewManager(book, options) {
|
||||||
infinite: false
|
infinite: false
|
||||||
});
|
});
|
||||||
|
|
||||||
core.extend(this.settings, options.settings);
|
core.defaults(this.settings, options.settings || {});
|
||||||
|
|
||||||
this.isForcedSingle = this.settings.forceSingle;
|
this.isForcedSingle = this.settings.forceSingle;
|
||||||
|
|
||||||
|
@ -82,9 +82,14 @@ PaginatedViewManager.prototype.applyLayoutMethod = function() {
|
||||||
|
|
||||||
this.updateLayout();
|
this.updateLayout();
|
||||||
|
|
||||||
// Set the look ahead offset for what is visible
|
this.setLayout(this.layout);
|
||||||
|
|
||||||
// this.map = new Map(this.layout);
|
this.stage.addStyleRules("iframe", [{"margin-right" : this.layout.gap + "px"}]);
|
||||||
|
|
||||||
|
// Set the look ahead offset for what is visible
|
||||||
|
this.settings.offeset = this.layout.delta;
|
||||||
|
|
||||||
|
this.mapping = new Map(this.layout);
|
||||||
|
|
||||||
// this.hooks.layout.register(this.layout.format.bind(this));
|
// this.hooks.layout.register(this.layout.format.bind(this));
|
||||||
|
|
||||||
|
@ -98,14 +103,13 @@ PaginatedViewManager.prototype.updateLayout = function() {
|
||||||
this.spreads = this.determineSpreads(this.settings.minSpreadWidth);
|
this.spreads = this.determineSpreads(this.settings.minSpreadWidth);
|
||||||
|
|
||||||
this.layout.calculate(
|
this.layout.calculate(
|
||||||
this.stage.width,
|
this._stageSize.width,
|
||||||
this.stage.height,
|
this._stageSize.height,
|
||||||
this.settings.gap,
|
this.settings.gap,
|
||||||
this.spreads
|
this.spreads
|
||||||
);
|
);
|
||||||
|
|
||||||
this.settings.offset = this.layout.delta;
|
this.settings.offset = this.layout.delta;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
PaginatedViewManager.prototype.moveTo = function(offset){
|
PaginatedViewManager.prototype.moveTo = function(offset){
|
||||||
|
@ -124,25 +128,26 @@ PaginatedViewManager.prototype.page = function(pg){
|
||||||
};
|
};
|
||||||
|
|
||||||
PaginatedViewManager.prototype.next = function(){
|
PaginatedViewManager.prototype.next = function(){
|
||||||
|
this.scrollLeft = this.container.scrollLeft;
|
||||||
|
|
||||||
// console.log(this.container.scrollWidth, this.container.scrollLeft + this.container.offsetWidth + this.layout.delta)
|
|
||||||
if(this.container.scrollLeft +
|
if(this.container.scrollLeft +
|
||||||
this.container.offsetWidth +
|
this.container.offsetWidth +
|
||||||
this.layout.delta < this.container.scrollWidth) {
|
this.layout.delta < this.container.scrollWidth) {
|
||||||
this.scrollBy(this.layout.delta, 0);
|
this.scrollBy(this.layout.delta, 0);
|
||||||
} else {
|
} else {
|
||||||
|
// this.scrollTo(this.container.scrollWidth, 0);
|
||||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
||||||
}
|
}
|
||||||
this.reportLocation();
|
// this.reportLocation();
|
||||||
return this.check();
|
this.check();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
PaginatedViewManager.prototype.prev = function(){
|
PaginatedViewManager.prototype.prev = function(){
|
||||||
|
|
||||||
this.scrollBy(-this.layout.delta, 0);
|
this.scrollBy(-this.layout.delta, 0);
|
||||||
this.reportLocation();
|
// this.reportLocation();
|
||||||
return this.check();
|
this.check();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -163,7 +168,7 @@ PaginatedViewManager.prototype.currentLocation = function(){
|
||||||
startA = container.left - visible[0].position().left;
|
startA = container.left - visible[0].position().left;
|
||||||
endA = startA + this.layout.spread;
|
endA = startA + this.layout.spread;
|
||||||
|
|
||||||
return this.map.page(visible[0], startA, endA);
|
return this.mapping.page(visible[0], startA, endA);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(visible.length > 1) {
|
if(visible.length > 1) {
|
||||||
|
@ -176,8 +181,8 @@ PaginatedViewManager.prototype.currentLocation = function(){
|
||||||
startB = container.left + this.layout.spread - visible[visible.length-1].position().left;
|
startB = container.left + this.layout.spread - visible[visible.length-1].position().left;
|
||||||
endB = startB + this.layout.column;
|
endB = startB + this.layout.column;
|
||||||
|
|
||||||
pageLeft = this.map.page(visible[0], startA, endA);
|
pageLeft = this.mapping.page(visible[0], startA, endA);
|
||||||
pageRight = this.map.page(visible[visible.length-1], startB, endB);
|
pageRight = this.mapping.page(visible[visible.length-1], startB, endB);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
start: pageLeft.start,
|
start: pageLeft.start,
|
||||||
|
|
|
@ -4,11 +4,12 @@ var Stage = require('../stage');
|
||||||
var Views = require('../views');
|
var Views = require('../views');
|
||||||
var EpubCFI = require('../epubcfi');
|
var EpubCFI = require('../epubcfi');
|
||||||
var Layout = require('../layout');
|
var Layout = require('../layout');
|
||||||
|
var Mapping = require('../map');
|
||||||
|
|
||||||
function SingleViewManager(options) {
|
function SingleViewManager(options) {
|
||||||
|
|
||||||
this.View = options.view;
|
this.View = options.view;
|
||||||
this.renderer = options.renderer;
|
this.request = options.request;
|
||||||
this.q = options.queue;
|
this.q = options.queue;
|
||||||
|
|
||||||
this.settings = core.extend(this.settings || {}, {
|
this.settings = core.extend(this.settings || {}, {
|
||||||
|
@ -22,8 +23,7 @@ function SingleViewManager(options) {
|
||||||
ignoreClass: ''
|
ignoreClass: ''
|
||||||
});
|
});
|
||||||
|
|
||||||
core.extend(this.settings, options.settings);
|
core.defaults(this.settings, options.settings || {});
|
||||||
|
|
||||||
|
|
||||||
this.viewSettings = {
|
this.viewSettings = {
|
||||||
ignoreClass: this.settings.ignoreClass,
|
ignoreClass: this.settings.ignoreClass,
|
||||||
|
@ -42,7 +42,9 @@ SingleViewManager.prototype.render = function(element, size){
|
||||||
this.stage = new Stage({
|
this.stage = new Stage({
|
||||||
width: size.width,
|
width: size.width,
|
||||||
height: size.height,
|
height: size.height,
|
||||||
hidden: this.settings.hidden
|
overflow: this.settings.overflow,
|
||||||
|
hidden: this.settings.hidden,
|
||||||
|
axis: this.settings.axis
|
||||||
});
|
});
|
||||||
|
|
||||||
this.stage.attachTo(element);
|
this.stage.attachTo(element);
|
||||||
|
@ -54,11 +56,12 @@ SingleViewManager.prototype.render = function(element, size){
|
||||||
this.views = new Views(this.container);
|
this.views = new Views(this.container);
|
||||||
|
|
||||||
// Calculate Stage Size
|
// Calculate Stage Size
|
||||||
this.bounds = this.stage.bounds();
|
this._bounds = this.bounds();
|
||||||
|
this._stageSize = this.stage.size();
|
||||||
|
|
||||||
// Set the dimensions for views
|
// Set the dimensions for views
|
||||||
this.viewSettings.width = this.bounds.width;
|
this.viewSettings.width = this._stageSize.width;
|
||||||
this.viewSettings.height = this.bounds.height;
|
this.viewSettings.height = this._stageSize.height;
|
||||||
|
|
||||||
// Function to handle a resize event.
|
// Function to handle a resize event.
|
||||||
// Will only attach if width and height are both fixed.
|
// Will only attach if width and height are both fixed.
|
||||||
|
@ -81,20 +84,21 @@ SingleViewManager.prototype.onResized = function(e) {
|
||||||
|
|
||||||
SingleViewManager.prototype.resize = function(width, height){
|
SingleViewManager.prototype.resize = function(width, height){
|
||||||
|
|
||||||
this.bounds = this.stage.bounds(width, height);
|
this._stageSize = this.stage.size(width, height);
|
||||||
|
this._bounds = this.bounds();
|
||||||
|
|
||||||
// Update for new views
|
// Update for new views
|
||||||
this.viewSettings.width = this.bounds.width;
|
this.viewSettings.width = this._stageSize.width;
|
||||||
this.viewSettings.height = this.bounds.height;
|
this.viewSettings.height = this._stageSize.height;
|
||||||
|
|
||||||
// Update for existing views
|
// Update for existing views
|
||||||
this.views.each(function(view) {
|
this.views.each(function(view) {
|
||||||
view.size(this.bounds.width, this.bounds.height);
|
view.size(this._stageSize.width, this._stageSize.height);
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
this.trigger("resized", {
|
this.trigger("resized", {
|
||||||
width: this.stage.width,
|
width: this._stageSize.width,
|
||||||
height: this.stage.height
|
height: this._stageSize.height
|
||||||
});
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -127,7 +131,8 @@ SingleViewManager.prototype.display = function(section, target){
|
||||||
if(visible && target) {
|
if(visible && target) {
|
||||||
offset = visible.locationOf(target);
|
offset = visible.locationOf(target);
|
||||||
this.moveTo(offset);
|
this.moveTo(offset);
|
||||||
return displaying.resolve();
|
displaying.resolve();
|
||||||
|
return displayed;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide all current views
|
// Hide all current views
|
||||||
|
@ -144,7 +149,7 @@ SingleViewManager.prototype.display = function(section, target){
|
||||||
// Move to correct place within the section, if needed
|
// Move to correct place within the section, if needed
|
||||||
if(target) {
|
if(target) {
|
||||||
offset = view.locationOf(target);
|
offset = view.locationOf(target);
|
||||||
return this.moveTo(offset);
|
this.moveTo(offset);
|
||||||
}
|
}
|
||||||
|
|
||||||
}.bind(this))
|
}.bind(this))
|
||||||
|
@ -177,7 +182,7 @@ SingleViewManager.prototype.add = function(view){
|
||||||
view.onDisplayed = this.afterDisplayed.bind(this);
|
view.onDisplayed = this.afterDisplayed.bind(this);
|
||||||
view.onResize = this.afterResized.bind(this);
|
view.onResize = this.afterResized.bind(this);
|
||||||
|
|
||||||
return view.display();
|
return view.display(this.request);
|
||||||
// return this.renderer(view, this.views.hidden);
|
// return this.renderer(view, this.views.hidden);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -243,17 +248,17 @@ SingleViewManager.prototype.currentLocation = function(){
|
||||||
|
|
||||||
if(this.views.length) {
|
if(this.views.length) {
|
||||||
view = this.views.first();
|
view = this.views.first();
|
||||||
// start = container.left - view.position().left;
|
start = container.left - view.position().left;
|
||||||
// end = start + this.layout.spread;
|
end = start + this.layout.spread;
|
||||||
console.log("visibile currentLocation", view);
|
|
||||||
// return this.map.page(view);
|
return this.mapping.page(view);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
SingleViewManager.prototype.isVisible = function(view, offsetPrev, offsetNext, _container){
|
SingleViewManager.prototype.isVisible = function(view, offsetPrev, offsetNext, _container){
|
||||||
var position = view.position();
|
var position = view.position();
|
||||||
var container = _container || this.container.getBoundingClientRect();
|
var container = _container || this.bounds();
|
||||||
|
|
||||||
if(this.settings.axis === "horizontal" &&
|
if(this.settings.axis === "horizontal" &&
|
||||||
position.right > container.left - offsetPrev &&
|
position.right > container.left - offsetPrev &&
|
||||||
|
@ -310,6 +315,7 @@ SingleViewManager.prototype.scrollBy = function(x, y, silent){
|
||||||
}
|
}
|
||||||
// console.log("scrollBy", x, y);
|
// console.log("scrollBy", x, y);
|
||||||
this.scrolled = true;
|
this.scrolled = true;
|
||||||
|
this.onScroll();
|
||||||
};
|
};
|
||||||
|
|
||||||
SingleViewManager.prototype.scrollTo = function(x, y, silent){
|
SingleViewManager.prototype.scrollTo = function(x, y, silent){
|
||||||
|
@ -325,6 +331,7 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
|
||||||
}
|
}
|
||||||
// console.log("scrollTo", x, y);
|
// console.log("scrollTo", x, y);
|
||||||
this.scrolled = true;
|
this.scrolled = true;
|
||||||
|
this.onScroll();
|
||||||
// if(this.container.scrollLeft != x){
|
// if(this.container.scrollLeft != x){
|
||||||
// setTimeout(function() {
|
// setTimeout(function() {
|
||||||
// this.scrollTo(x, y, silent);
|
// this.scrollTo(x, y, silent);
|
||||||
|
@ -333,13 +340,17 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
|
||||||
// };
|
// };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
SingleViewManager.prototype.onScroll = function(){
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
SingleViewManager.prototype.bounds = function() {
|
SingleViewManager.prototype.bounds = function() {
|
||||||
var bounds;
|
var bounds;
|
||||||
|
|
||||||
if(!this.settings.height || !this.container) {
|
if(!this.settings.height || !this.container) {
|
||||||
bounds = core.windowBounds();
|
bounds = core.windowBounds();
|
||||||
} else {
|
} else {
|
||||||
bounds = this.container.getBoundingClientRect();
|
bounds = this.stage.bounds();
|
||||||
}
|
}
|
||||||
|
|
||||||
return bounds;
|
return bounds;
|
||||||
|
@ -352,7 +363,7 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
|
||||||
|
|
||||||
this.setLayout(this.layout);
|
this.setLayout(this.layout);
|
||||||
|
|
||||||
// this.map = new Map(this.layout);
|
this.mapping = new Mapping(this.layout);
|
||||||
// this.manager.layout(this.layout.format);
|
// this.manager.layout(this.layout.format);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,7 @@ Map.prototype.section = function(view) {
|
||||||
};
|
};
|
||||||
|
|
||||||
Map.prototype.page = function(view, start, end) {
|
Map.prototype.page = function(view, start, end) {
|
||||||
var root = view.document.body;
|
var root = view.contents.document.body;
|
||||||
return this.rangePairToCfiPair(view.section, {
|
return this.rangePairToCfiPair(view.section, {
|
||||||
start: this.findStart(root, start, end),
|
start: this.findStart(root, start, end),
|
||||||
end: this.findEnd(root, start, end)
|
end: this.findEnd(root, start, end)
|
||||||
|
|
|
@ -372,7 +372,7 @@ Parser.prototype.navItem = function(item, spineIndexByURL, bookSpine){
|
||||||
|
|
||||||
Parser.prototype.ncx = function(tocXml, spineIndexByURL, bookSpine){
|
Parser.prototype.ncx = function(tocXml, spineIndexByURL, bookSpine){
|
||||||
// var navPoints = tocXml.querySelectorAll("navMap navPoint");
|
// var navPoints = tocXml.querySelectorAll("navMap navPoint");
|
||||||
var navPoints = core.qsa("navPoint");
|
var navPoints = core.qsa(tocXml, "navPoint");
|
||||||
var length = navPoints.length;
|
var length = navPoints.length;
|
||||||
var i;
|
var i;
|
||||||
var toc = {};
|
var toc = {};
|
||||||
|
@ -398,7 +398,7 @@ Parser.prototype.ncx = function(tocXml, spineIndexByURL, bookSpine){
|
||||||
Parser.prototype.ncxItem = function(item, spineIndexByURL, bookSpine){
|
Parser.prototype.ncxItem = function(item, spineIndexByURL, bookSpine){
|
||||||
var id = item.getAttribute('id') || false,
|
var id = item.getAttribute('id') || false,
|
||||||
// content = item.querySelector("content"),
|
// content = item.querySelector("content"),
|
||||||
content = core.qs("content"),
|
content = core.qs(item, "content"),
|
||||||
src = content.getAttribute('src'),
|
src = content.getAttribute('src'),
|
||||||
// navLabel = item.querySelector("navLabel"),
|
// navLabel = item.querySelector("navLabel"),
|
||||||
navLabel = core.qs(item, "navLabel"),
|
navLabel = core.qs(item, "navLabel"),
|
||||||
|
|
|
@ -13,12 +13,12 @@ var Map = require('./map');
|
||||||
function Rendition(book, options) {
|
function Rendition(book, options) {
|
||||||
|
|
||||||
this.settings = core.extend(this.settings || {}, {
|
this.settings = core.extend(this.settings || {}, {
|
||||||
infinite: true,
|
// infinite: true,
|
||||||
hidden: false,
|
// hidden: false,
|
||||||
width: null,
|
width: null,
|
||||||
height: null,
|
height: null,
|
||||||
layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto', flow: 'auto', viewport: ''},
|
// layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto', flow: 'auto', viewport: ''},
|
||||||
axis: "vertical",
|
// axis: "vertical",
|
||||||
ignoreClass: '',
|
ignoreClass: '',
|
||||||
manager: "single",
|
manager: "single",
|
||||||
view: "iframe"
|
view: "iframe"
|
||||||
|
@ -66,6 +66,16 @@ function Rendition(book, options) {
|
||||||
this.replacements();
|
this.replacements();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.ViewManager = this.requireManager(this.settings.manager);
|
||||||
|
this.View = this.requireView(this.settings.view);
|
||||||
|
|
||||||
|
this.manager = new this.ViewManager({
|
||||||
|
view: this.View,
|
||||||
|
queue: this.q,
|
||||||
|
request: this.book.request,
|
||||||
|
settings: this.settings
|
||||||
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Rendition.prototype.setManager = function(manager) {
|
Rendition.prototype.setManager = function(manager) {
|
||||||
|
@ -262,11 +272,13 @@ Rendition.prototype.moveTo = function(offset){
|
||||||
};
|
};
|
||||||
|
|
||||||
Rendition.prototype.next = function(){
|
Rendition.prototype.next = function(){
|
||||||
return this.q.enqueue(this.manager.next.bind(this.manager));
|
return this.q.enqueue(this.manager.next.bind(this.manager))
|
||||||
|
.then(this.reportLocation.bind(this));
|
||||||
};
|
};
|
||||||
|
|
||||||
Rendition.prototype.prev = function(){
|
Rendition.prototype.prev = function(){
|
||||||
return this.q.enqueue(this.manager.prev.bind(this.manager));
|
return this.q.enqueue(this.manager.prev.bind(this.manager))
|
||||||
|
.then(this.reportLocation.bind(this));
|
||||||
};
|
};
|
||||||
|
|
||||||
//-- http://www.idpf.org/epub/fxl/
|
//-- http://www.idpf.org/epub/fxl/
|
||||||
|
|
|
@ -22,11 +22,38 @@ function base(doc, section){
|
||||||
base.setAttribute("href", section.url);
|
base.setAttribute("href", section.url);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function canonical(doc, section){
|
||||||
|
var head;
|
||||||
|
var link;
|
||||||
|
var url = section.url; // window.location.origin + window.location.pathname + "?loc=" + encodeURIComponent(section.url);
|
||||||
|
|
||||||
|
if(!doc){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
head = core.qs(doc, "head");
|
||||||
|
link = core.qs(head, "link[rel='canonical']");
|
||||||
|
|
||||||
|
if (link) {
|
||||||
|
link.setAttribute("href", url);
|
||||||
|
} else {
|
||||||
|
link = doc.createElement("link");
|
||||||
|
link.setAttribute("rel", "canonical");
|
||||||
|
link.setAttribute("href", url);
|
||||||
|
head.appendChild(link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function links(view, renderer) {
|
function links(view, renderer) {
|
||||||
|
|
||||||
var links = view.document.querySelectorAll("a[href]");
|
var links = view.document.querySelectorAll("a[href]");
|
||||||
var replaceLinks = function(link){
|
var replaceLinks = function(link){
|
||||||
var href = link.getAttribute("href");
|
var href = link.getAttribute("href");
|
||||||
|
|
||||||
|
if(href.indexOf("mailto:") === 0){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var linkUri = URI(href);
|
var linkUri = URI(href);
|
||||||
var absolute = linkUri.absoluteTo(view.section.url);
|
var absolute = linkUri.absoluteTo(view.section.url);
|
||||||
var relative = absolute.relativeTo(this.book.baseUrl).toString();
|
var relative = absolute.relativeTo(this.book.baseUrl).toString();
|
||||||
|
@ -81,6 +108,7 @@ function substitute(content, urls, replacements) {
|
||||||
}
|
}
|
||||||
module.exports = {
|
module.exports = {
|
||||||
'base': base,
|
'base': base,
|
||||||
|
'canonical' : canonical,
|
||||||
'links': links,
|
'links': links,
|
||||||
'substitute': substitute
|
'substitute': substitute
|
||||||
};
|
};
|
||||||
|
|
|
@ -17,6 +17,7 @@ function Spine(_request){
|
||||||
|
|
||||||
// Register replacements
|
// Register replacements
|
||||||
this.hooks.content.register(replacements.base);
|
this.hooks.content.register(replacements.base);
|
||||||
|
this.hooks.content.register(replacements.canonical);
|
||||||
|
|
||||||
this.epubcfi = new EpubCFI();
|
this.epubcfi = new EpubCFI();
|
||||||
|
|
||||||
|
|
44
src/stage.js
44
src/stage.js
|
@ -2,6 +2,7 @@ var core = require('./core');
|
||||||
|
|
||||||
function Stage(_options) {
|
function Stage(_options) {
|
||||||
this.settings = _options || {};
|
this.settings = _options || {};
|
||||||
|
this.id = "epubjs-container-" + core.uuid();
|
||||||
|
|
||||||
this.container = this.create(this.settings);
|
this.container = this.create(this.settings);
|
||||||
|
|
||||||
|
@ -19,6 +20,7 @@ Stage.prototype.create = function(options){
|
||||||
var height = options.height;// !== false ? options.height : "100%";
|
var height = options.height;// !== false ? options.height : "100%";
|
||||||
var width = options.width;// !== false ? options.width : "100%";
|
var width = options.width;// !== false ? options.width : "100%";
|
||||||
var overflow = options.overflow || false;
|
var overflow = options.overflow || false;
|
||||||
|
var axis = options.axis || "vertical";
|
||||||
|
|
||||||
if(options.height && core.isNumber(options.height)) {
|
if(options.height && core.isNumber(options.height)) {
|
||||||
height = options.height + "px";
|
height = options.height + "px";
|
||||||
|
@ -31,7 +33,7 @@ Stage.prototype.create = function(options){
|
||||||
// Create new container element
|
// Create new container element
|
||||||
container = document.createElement("div");
|
container = document.createElement("div");
|
||||||
|
|
||||||
container.id = "epubjs-container:" + core.uuid();
|
container.id = this.id;
|
||||||
container.classList.add("epub-container");
|
container.classList.add("epub-container");
|
||||||
|
|
||||||
// Style Element
|
// Style Element
|
||||||
|
@ -40,7 +42,7 @@ Stage.prototype.create = function(options){
|
||||||
container.style.lineHeight = "0";
|
container.style.lineHeight = "0";
|
||||||
container.style.verticalAlign = "top";
|
container.style.verticalAlign = "top";
|
||||||
|
|
||||||
if(this.settings.axis === "horizontal") {
|
if(axis === "horizontal") {
|
||||||
container.style.whiteSpace = "nowrap";
|
container.style.whiteSpace = "nowrap";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -126,7 +128,7 @@ Stage.prototype.onResize = function(func){
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Stage.prototype.bounds = function(_width, _height){
|
Stage.prototype.size = function(_width, _height){
|
||||||
var bounds;
|
var bounds;
|
||||||
var width = _width || this.settings.width;
|
var width = _width || this.settings.width;
|
||||||
var height = _height || this.settings.height;
|
var height = _height || this.settings.height;
|
||||||
|
@ -183,4 +185,40 @@ Stage.prototype.bounds = function(_width, _height){
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Stage.prototype.bounds = function(){
|
||||||
|
return this.element.getBoundingClientRect();
|
||||||
|
}
|
||||||
|
|
||||||
|
Stage.prototype.getSheet = function(){
|
||||||
|
var style = document.createElement("style");
|
||||||
|
|
||||||
|
// WebKit hack --> https://davidwalsh.name/add-rules-stylesheets
|
||||||
|
style.appendChild(document.createTextNode(""));
|
||||||
|
|
||||||
|
document.head.appendChild(style);
|
||||||
|
|
||||||
|
return style.sheet;
|
||||||
|
}
|
||||||
|
|
||||||
|
Stage.prototype.addStyleRules = function(selector, rulesArray){
|
||||||
|
var scope = "#" + this.id + " ";
|
||||||
|
var rules = "";
|
||||||
|
|
||||||
|
if(!this.sheet){
|
||||||
|
this.sheet = this.getSheet();
|
||||||
|
}
|
||||||
|
|
||||||
|
rulesArray.forEach(function(set) {
|
||||||
|
for (var prop in set) {
|
||||||
|
if(set.hasOwnProperty(prop)) {
|
||||||
|
rules += prop + ":" + set[prop] + ";";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.sheet.insertRule(scope + selector + " {" + rules + "}", 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
module.exports = Stage;
|
module.exports = Stage;
|
||||||
|
|
|
@ -5,6 +5,10 @@ function Views(container) {
|
||||||
this.hidden = false;
|
this.hidden = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Views.prototype.all = function() {
|
||||||
|
return this._views;
|
||||||
|
};
|
||||||
|
|
||||||
Views.prototype.first = function() {
|
Views.prototype.first = function() {
|
||||||
return this._views[0];
|
return this._views[0];
|
||||||
};
|
};
|
||||||
|
|
|
@ -13,7 +13,7 @@ function IframeView(section, options) {
|
||||||
globalLayoutProperties: {},
|
globalLayoutProperties: {},
|
||||||
}, options || {});
|
}, options || {});
|
||||||
|
|
||||||
this.id = "epubjs-view:" + core.uuid();
|
this.id = "epubjs-view-" + core.uuid();
|
||||||
this.section = section;
|
this.section = section;
|
||||||
this.index = section.index;
|
this.index = section.index;
|
||||||
|
|
||||||
|
@ -35,7 +35,6 @@ function IframeView(section, options) {
|
||||||
this.layout = this.settings.layout;
|
this.layout = this.settings.layout;
|
||||||
// Dom events to listen for
|
// Dom events to listen for
|
||||||
// this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
|
// this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
IframeView.prototype.container = function(axis) {
|
IframeView.prototype.container = function(axis) {
|
||||||
|
@ -119,8 +118,12 @@ IframeView.prototype.render = function(request, show) {
|
||||||
// Fit to size of the container, apply padding
|
// Fit to size of the container, apply padding
|
||||||
this.size();
|
this.size();
|
||||||
|
|
||||||
|
if(!this.sectionRender) {
|
||||||
|
this.sectionRender = this.section.render(request);
|
||||||
|
}
|
||||||
|
|
||||||
// Render Chain
|
// Render Chain
|
||||||
return this.section.render(request)
|
return this.sectionRender
|
||||||
.then(function(contents){
|
.then(function(contents){
|
||||||
return this.load(contents);
|
return this.load(contents);
|
||||||
}.bind(this))
|
}.bind(this))
|
||||||
|
@ -396,10 +399,26 @@ IframeView.prototype.onLoad = function(event, promise) {
|
||||||
this.window = this.iframe.contentWindow;
|
this.window = this.iframe.contentWindow;
|
||||||
this.document = this.iframe.contentDocument;
|
this.document = this.iframe.contentDocument;
|
||||||
|
|
||||||
this.contents = new Contents(this.document);
|
this.contents = new Contents(this.document, this.document.body);
|
||||||
|
|
||||||
this.rendering = false;
|
this.rendering = false;
|
||||||
|
|
||||||
|
var link = this.document.querySelector("link[rel='canonical']");
|
||||||
|
if (link) {
|
||||||
|
link.setAttribute("href", this.section.url);
|
||||||
|
} else {
|
||||||
|
link = this.document.createElement("link");
|
||||||
|
link.setAttribute("rel", "canonical");
|
||||||
|
link.setAttribute("href", this.section.url);
|
||||||
|
this.document.querySelector("head").appendChild(link);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.contents.on("expand", function () {
|
||||||
|
if(this.displayed && this.iframe) {
|
||||||
|
this.expand();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
promise.resolve(this.contents);
|
promise.resolve(this.contents);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -303,16 +303,6 @@ InlineView.prototype.load = function(contents) {
|
||||||
|
|
||||||
this.contents = new Contents(this.document, this.frame);
|
this.contents = new Contents(this.document, this.frame);
|
||||||
|
|
||||||
// <link rel="canonical" href="https://blog.example.com/dresses/green-dresses-are-awesome" />
|
|
||||||
var link = this.document.querySelector("link[rel='canonical']");
|
|
||||||
if (link) {
|
|
||||||
link.setAttribute("href", this.section.url);
|
|
||||||
} else {
|
|
||||||
link = this.document.createElement("link");
|
|
||||||
link.setAttribute("rel", "canonical");
|
|
||||||
link.setAttribute("href", this.section.url);
|
|
||||||
this.document.querySelector("head").appendChild(link);
|
|
||||||
}
|
|
||||||
this.rendering = false;
|
this.rendering = false;
|
||||||
|
|
||||||
loading.resolve(this.contents);
|
loading.resolve(this.contents);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue