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:
Fred Chasen
commit
2aaac35671
20 changed files with 780 additions and 344 deletions
463
dist/epub.js
vendored
463
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>
|
||||
<meta charset="utf-8">
|
||||
<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="//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">
|
||||
body {
|
||||
|
|
@ -15,17 +24,22 @@
|
|||
background: #fafafa;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #333;
|
||||
|
||||
}
|
||||
|
||||
#navigation {
|
||||
width: 200px;
|
||||
margin-top: 60px;
|
||||
float: left;
|
||||
padding: 0 0 0 100px;
|
||||
width: 300px;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
top: 60px;
|
||||
left: 1000px
|
||||
}
|
||||
|
||||
#navigation.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#navigation h1 {
|
||||
width: 200px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #777;
|
||||
|
|
@ -40,7 +54,7 @@
|
|||
}
|
||||
|
||||
#navigation ul {
|
||||
padding-left: 0;
|
||||
padding-left: 18px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -80,12 +94,20 @@
|
|||
background: white;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
padding: 40px 80px;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin-left: 300px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 100px;
|
||||
width: 800px;
|
||||
z-index: 2;
|
||||
transition: left .15s cubic-bezier(.55, 0, .2, .8) .08s;
|
||||
}
|
||||
|
||||
#main.open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#pagination {
|
||||
|
|
@ -139,36 +161,12 @@
|
|||
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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="navigation">
|
||||
<h1 id="title">...</h1>
|
||||
<image id="cover" width="150px"/>
|
||||
<h2 id="author">...</h2>
|
||||
<ul id="toc"></ul>
|
||||
</div>
|
||||
|
|
@ -179,34 +177,36 @@
|
|||
<a id="next" href="#next" class="arrow">...</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="annotation-controls"></div> -->
|
||||
<!-- <div id="hypothesis">
|
||||
<iframe src="//hypothes.is/app.html" seamless></iframe>
|
||||
</div> -->
|
||||
|
||||
<script>
|
||||
var currentSectionIndex = 8;
|
||||
// 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 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);
|
||||
|
||||
|
||||
var next = document.getElementById("next");
|
||||
next.addEventListener("click", function(e){
|
||||
window.scrollTo(0,0);
|
||||
rendition.next();
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
|
||||
var prev = document.getElementById("prev");
|
||||
prev.addEventListener("click", function(e){
|
||||
window.scrollTo(0,0);
|
||||
rendition.prev();
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
|
||||
|
||||
|
||||
rendition.on("rendered", function(section){
|
||||
var nextSection = section.next();
|
||||
var prevSection = section.prev();
|
||||
|
|
@ -239,8 +239,17 @@
|
|||
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
|
||||
// history.pushState({}, '', section.href);
|
||||
history.pushState({}, '', "?loc=" + encodeURIComponent(section.href));
|
||||
// window.location.hash = "#/"+section.href
|
||||
});
|
||||
|
||||
|
|
@ -248,9 +257,10 @@
|
|||
var $nav = document.getElementById("toc"),
|
||||
docfrag = document.createDocumentFragment();
|
||||
|
||||
toc.forEach(function(chapter) {
|
||||
toc.forEach(function(chapter, index) {
|
||||
var item = document.createElement("li");
|
||||
var link = document.createElement("a");
|
||||
link.id = "chap-" + chapter.id;
|
||||
link.textContent = chapter.label;
|
||||
link.href = chapter.href;
|
||||
item.appendChild(link);
|
||||
|
|
@ -273,73 +283,94 @@
|
|||
book.loaded.metadata.then(function(meta){
|
||||
var $title = document.getElementById("title");
|
||||
var $author = document.getElementById("author");
|
||||
var $cover = document.getElementById("cover");
|
||||
var $nav = document.getElementById('navigation');
|
||||
|
||||
$title.textContent = meta.title;
|
||||
$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) {
|
||||
view.addScript("//hypothes.is/embed.js").then(function() {
|
||||
view.window.hypothesisConfig = function () {
|
||||
|
||||
return {
|
||||
constructor: this.Annotator.Guest,
|
||||
app: 'https://hypothes.is/app.html'
|
||||
};
|
||||
};
|
||||
})
|
||||
view.window.hypothesisConfig = function () {
|
||||
|
||||
return {
|
||||
constructor: this.Annotator.Guest,
|
||||
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>
|
||||
// // 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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@
|
|||
// var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
|
||||
var book = ePub("../books/alice/OPS/package.opf");
|
||||
var rendition = book.renderTo("viewer", {
|
||||
method: "paginate",
|
||||
manager: "paginate",
|
||||
width: "100%",
|
||||
height: 600
|
||||
});
|
||||
|
|
|
|||
111
src/contents.js
111
src/contents.js
|
|
@ -8,48 +8,90 @@ function Contents(doc, content) {
|
|||
|
||||
this.document = doc;
|
||||
this.documentElement = this.document.documentElement;
|
||||
this.content = content || this.document.body;
|
||||
this.content = content;
|
||||
this.window = this.document.defaultView;
|
||||
// Dom events to listen for
|
||||
this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
|
||||
|
||||
this.size = {
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
|
||||
this.listeners();
|
||||
};
|
||||
|
||||
Contents.prototype.width = function(w) {
|
||||
var frame = this.content || this.documentElement;
|
||||
|
||||
if (w && core.isNumber(w)) {
|
||||
w = w + "px";
|
||||
}
|
||||
|
||||
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) {
|
||||
var frame = this.content || this.documentElement;
|
||||
|
||||
if (h && core.isNumber(h)) {
|
||||
h = h + "px";
|
||||
}
|
||||
|
||||
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() {
|
||||
var width;
|
||||
var range = this.document.createRange();
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
// Select the contents of frame
|
||||
range.selectNodeContents(this.content);
|
||||
range.selectNodeContents(content);
|
||||
|
||||
// get the width of the text content
|
||||
width = range.getBoundingClientRect().width;
|
||||
|
|
@ -60,9 +102,9 @@ Contents.prototype.textWidth = function() {
|
|||
Contents.prototype.textHeight = function() {
|
||||
var height;
|
||||
var range = this.document.createRange();
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
|
||||
range.selectNodeContents(this.content);
|
||||
range.selectNodeContents(content);
|
||||
|
||||
height = range.getBoundingClientRect().height;
|
||||
|
||||
|
|
@ -83,7 +125,7 @@ Contents.prototype.scrollHeight = function() {
|
|||
|
||||
Contents.prototype.overflow = function(overflow) {
|
||||
|
||||
if (h) {
|
||||
if (overflow) {
|
||||
this.documentElement.style.overflow = overflow;
|
||||
}
|
||||
|
||||
|
|
@ -91,12 +133,13 @@ Contents.prototype.overflow = function(overflow) {
|
|||
};
|
||||
|
||||
Contents.prototype.css = function(property, value) {
|
||||
var content = this.content || this.document.body;
|
||||
|
||||
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() {
|
||||
|
|
@ -148,7 +191,7 @@ Contents.prototype.viewport = function() {
|
|||
// };
|
||||
|
||||
Contents.prototype.expand = function() {
|
||||
//TODO: this should just report resize
|
||||
this.trigger("expand");
|
||||
};
|
||||
|
||||
Contents.prototype.listeners = function() {
|
||||
|
|
@ -157,9 +200,14 @@ Contents.prototype.listeners = function() {
|
|||
|
||||
this.mediaQueryListeners();
|
||||
|
||||
this.fontLoadListeners();
|
||||
|
||||
this.addEventListeners();
|
||||
|
||||
this.addSelectionListeners();
|
||||
|
||||
this.resizeListeners();
|
||||
|
||||
};
|
||||
|
||||
Contents.prototype.removeListeners = function() {
|
||||
|
|
@ -169,10 +217,25 @@ Contents.prototype.removeListeners = function() {
|
|||
this.removeSelectionListeners();
|
||||
};
|
||||
|
||||
Contents.prototype.resizeListenters = function() {
|
||||
Contents.prototype.resizeListeners = function() {
|
||||
var width, height;
|
||||
// Test size again
|
||||
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
|
||||
|
|
@ -222,7 +285,7 @@ Contents.prototype.observe = function(target) {
|
|||
};
|
||||
|
||||
Contents.prototype.imageLoadListeners = function(target) {
|
||||
var images = this.contentDocument.querySelectorAll("img");
|
||||
var images = this.document.querySelectorAll("img");
|
||||
var img;
|
||||
for (var i = 0; i < images.length; 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() {
|
||||
if(!this.document) return null;
|
||||
return this.document.documentElement;
|
||||
|
|
@ -246,8 +320,13 @@ Contents.prototype.locationOf = function(target, ignoreClass) {
|
|||
|
||||
if(this.epubcfi.isCfiString(target)) {
|
||||
range = new EpubCFI(cfi).toRange(this.document, ignoreClass);
|
||||
|
||||
if(range) {
|
||||
targetPos = range.getBoundingClientRect();
|
||||
if (range.startContainer.nodeType === Node.ELEMENT_NODE) {
|
||||
targetPos = range.startContainer.getBoundingClientRect();
|
||||
} else {
|
||||
targetPos = range.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
|
||||
} else if(typeof target === "string" &&
|
||||
|
|
|
|||
|
|
@ -439,6 +439,7 @@ function qs(el, sel) {
|
|||
}
|
||||
|
||||
function qsa(el, sel) {
|
||||
|
||||
if (typeof el.querySelector != "undefined") {
|
||||
return el.querySelectorAll(sel);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ EpubCFI.prototype.checkType = function(cfi) {
|
|||
// Is a range object
|
||||
} else if (typeof cfi === 'object' && core.type(cfi) === "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';
|
||||
} else if (typeof cfi === 'object' && cfi instanceof EpubCFI){
|
||||
return 'EpubCFI';
|
||||
|
|
|
|||
|
|
@ -46,8 +46,6 @@ Reflowable.prototype.calculate = function(_width, _height, _gap, _devisor){
|
|||
|
||||
delta = (colWidth + gap) * divisor;
|
||||
|
||||
|
||||
|
||||
this.columnAxis = core.prefixed('columnAxis');
|
||||
this.columnGap = core.prefixed('columnGap');
|
||||
this.columnWidth = core.prefixed('columnWidth');
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ function ContinuousViewManager(options) {
|
|||
offsetDelta: 250
|
||||
});
|
||||
|
||||
core.extend(this.settings, options.settings);
|
||||
|
||||
core.defaults(this.settings, options.settings || {});
|
||||
// core.extend(this.settings, options.settings || {});
|
||||
};
|
||||
|
||||
// subclass extends superclass
|
||||
|
|
@ -82,7 +82,7 @@ ContinuousViewManager.prototype.append = function(section){
|
|||
|
||||
this.views.append(view);
|
||||
|
||||
return this.update();
|
||||
// return this.update();
|
||||
|
||||
}.bind(this));
|
||||
};
|
||||
|
|
@ -96,7 +96,7 @@ ContinuousViewManager.prototype.prepend = function(section){
|
|||
|
||||
this.views.prepend(view);
|
||||
|
||||
return this.update();
|
||||
// return this.update();
|
||||
|
||||
}.bind(this));
|
||||
|
||||
|
|
@ -165,10 +165,11 @@ ContinuousViewManager.prototype.check = function(_offset){
|
|||
*/
|
||||
|
||||
ContinuousViewManager.prototype.update = function(_offset){
|
||||
var container = this.stage.bounds();
|
||||
var views = this.views;
|
||||
var container = this.bounds();
|
||||
var views = this.views.all();
|
||||
var viewsLength = views.length;
|
||||
var visible = [];
|
||||
var offset = _offset || this.settings.offset || 0;
|
||||
var isVisible;
|
||||
var view;
|
||||
|
||||
|
|
@ -177,10 +178,11 @@ ContinuousViewManager.prototype.update = function(_offset){
|
|||
|
||||
for (var i = 0; i < viewsLength; i++) {
|
||||
view = views[i];
|
||||
isVisible = this.isVisible(view, 0, 0, container);
|
||||
|
||||
isVisible = this.isVisible(view, offset, offset, container);
|
||||
|
||||
if(isVisible === true) {
|
||||
promises.push(view.display());
|
||||
promises.push(view.display(this.request));
|
||||
visible.push(view);
|
||||
} else {
|
||||
this.q.enqueue(view.destroy.bind(view));
|
||||
|
|
@ -215,9 +217,9 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _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 contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
|
||||
|
||||
|
|
@ -239,12 +241,11 @@ ContinuousViewManager.prototype.check = function(_offsetLeft, _offsetTop){
|
|||
}
|
||||
|
||||
if(promises.length){
|
||||
|
||||
return RSVP.all(promises)
|
||||
.then(function(posts) {
|
||||
// Check to see if anything new is on screen after rendering
|
||||
this.q.enqueue(this.update.bind(this));
|
||||
|
||||
// this.update(offset);
|
||||
}.bind(this));
|
||||
|
||||
} else {
|
||||
|
|
@ -329,24 +330,22 @@ ContinuousViewManager.prototype.addScrollListeners = function() {
|
|||
|
||||
if(this.settings.height) {
|
||||
scroller = this.container;
|
||||
this.scrollTop = this.container.scrollTop;
|
||||
this.scrollLeft = this.container.scrollLeft;
|
||||
} else {
|
||||
scroller = window;
|
||||
this.scrollTop = window.scrollY;
|
||||
this.scrollLeft = window.scrollX;
|
||||
}
|
||||
|
||||
scroller.addEventListener("scroll", function(e){
|
||||
if(!this.ignore) {
|
||||
this.scrolled = true;
|
||||
} else {
|
||||
this.ignore = false;
|
||||
}
|
||||
}.bind(this));
|
||||
scroller.addEventListener("scroll", this.onScroll.bind(this));
|
||||
|
||||
window.addEventListener('unload', function(e){
|
||||
this.ignore = true;
|
||||
this.destroy();
|
||||
}.bind(this));
|
||||
|
||||
this.tick.call(window, this.onScroll.bind(this));
|
||||
// this.tick.call(window, this.onScroll.bind(this));
|
||||
|
||||
this.scrolled = false;
|
||||
|
||||
|
|
@ -354,7 +353,7 @@ ContinuousViewManager.prototype.addScrollListeners = function() {
|
|||
|
||||
ContinuousViewManager.prototype.onScroll = function(){
|
||||
|
||||
if(this.scrolled) {
|
||||
// if(!this.ignore) {
|
||||
|
||||
if(this.settings.height) {
|
||||
scrollTop = this.container.scrollTop;
|
||||
|
|
@ -364,6 +363,9 @@ ContinuousViewManager.prototype.onScroll = function(){
|
|||
scrollLeft = window.scrollX;
|
||||
}
|
||||
|
||||
this.scrollTop = scrollTop;
|
||||
this.scrollLeft = scrollLeft;
|
||||
|
||||
if(!this.ignore) {
|
||||
|
||||
if((this.scrollDeltaVert === 0 &&
|
||||
|
|
@ -371,7 +373,8 @@ ContinuousViewManager.prototype.onScroll = function(){
|
|||
this.scrollDeltaVert > 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.scrollDeltaHorz = 0;
|
||||
|
|
@ -401,9 +404,9 @@ ContinuousViewManager.prototype.onScroll = function(){
|
|||
|
||||
|
||||
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(){
|
||||
|
||||
var visible = this.visible();
|
||||
var startPage, endPage;
|
||||
|
||||
var container = this.container.getBoundingClientRect();
|
||||
|
||||
if(visible.length === 1) {
|
||||
return this.map.page(visible[0]);
|
||||
return this.mapping.page(visible[0]);
|
||||
}
|
||||
|
||||
if(visible.length > 1) {
|
||||
|
||||
startPage = this.map.page(visible[0]);
|
||||
endPage = this.map.page(visible[visible.length-1]);
|
||||
startPage = this.mapping.page(visible[0]);
|
||||
endPage = this.mapping.page(visible[visible.length-1]);
|
||||
|
||||
return {
|
||||
start: startPage.start,
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ var ContinuousViewManager = require('./continuous');
|
|||
var Map = require('../map');
|
||||
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 || {}, {
|
||||
width: 600,
|
||||
|
|
@ -19,7 +19,7 @@ function PaginatedViewManager(book, options) {
|
|||
infinite: false
|
||||
});
|
||||
|
||||
core.extend(this.settings, options.settings);
|
||||
core.defaults(this.settings, options.settings || {});
|
||||
|
||||
this.isForcedSingle = this.settings.forceSingle;
|
||||
|
||||
|
|
@ -82,9 +82,14 @@ PaginatedViewManager.prototype.applyLayoutMethod = function() {
|
|||
|
||||
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));
|
||||
|
||||
|
|
@ -98,14 +103,13 @@ PaginatedViewManager.prototype.updateLayout = function() {
|
|||
this.spreads = this.determineSpreads(this.settings.minSpreadWidth);
|
||||
|
||||
this.layout.calculate(
|
||||
this.stage.width,
|
||||
this.stage.height,
|
||||
this._stageSize.width,
|
||||
this._stageSize.height,
|
||||
this.settings.gap,
|
||||
this.spreads
|
||||
);
|
||||
|
||||
this.settings.offset = this.layout.delta;
|
||||
|
||||
};
|
||||
|
||||
PaginatedViewManager.prototype.moveTo = function(offset){
|
||||
|
|
@ -124,25 +128,26 @@ PaginatedViewManager.prototype.page = function(pg){
|
|||
};
|
||||
|
||||
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 +
|
||||
this.container.offsetWidth +
|
||||
this.layout.delta < this.container.scrollWidth) {
|
||||
this.scrollBy(this.layout.delta, 0);
|
||||
} else {
|
||||
// this.scrollTo(this.container.scrollWidth, 0);
|
||||
this.scrollTo(this.container.scrollWidth - this.layout.delta, 0);
|
||||
}
|
||||
this.reportLocation();
|
||||
return this.check();
|
||||
// this.reportLocation();
|
||||
this.check();
|
||||
|
||||
};
|
||||
|
||||
PaginatedViewManager.prototype.prev = function(){
|
||||
|
||||
this.scrollBy(-this.layout.delta, 0);
|
||||
this.reportLocation();
|
||||
return this.check();
|
||||
// this.reportLocation();
|
||||
this.check();
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -163,7 +168,7 @@ PaginatedViewManager.prototype.currentLocation = function(){
|
|||
startA = container.left - visible[0].position().left;
|
||||
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) {
|
||||
|
|
@ -176,8 +181,8 @@ PaginatedViewManager.prototype.currentLocation = function(){
|
|||
startB = container.left + this.layout.spread - visible[visible.length-1].position().left;
|
||||
endB = startB + this.layout.column;
|
||||
|
||||
pageLeft = this.map.page(visible[0], startA, endA);
|
||||
pageRight = this.map.page(visible[visible.length-1], startB, endB);
|
||||
pageLeft = this.mapping.page(visible[0], startA, endA);
|
||||
pageRight = this.mapping.page(visible[visible.length-1], startB, endB);
|
||||
|
||||
return {
|
||||
start: pageLeft.start,
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@ var Stage = require('../stage');
|
|||
var Views = require('../views');
|
||||
var EpubCFI = require('../epubcfi');
|
||||
var Layout = require('../layout');
|
||||
var Mapping = require('../map');
|
||||
|
||||
function SingleViewManager(options) {
|
||||
|
||||
this.View = options.view;
|
||||
this.renderer = options.renderer;
|
||||
this.request = options.request;
|
||||
this.q = options.queue;
|
||||
|
||||
this.settings = core.extend(this.settings || {}, {
|
||||
|
|
@ -22,8 +23,7 @@ function SingleViewManager(options) {
|
|||
ignoreClass: ''
|
||||
});
|
||||
|
||||
core.extend(this.settings, options.settings);
|
||||
|
||||
core.defaults(this.settings, options.settings || {});
|
||||
|
||||
this.viewSettings = {
|
||||
ignoreClass: this.settings.ignoreClass,
|
||||
|
|
@ -42,7 +42,9 @@ SingleViewManager.prototype.render = function(element, size){
|
|||
this.stage = new Stage({
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
hidden: this.settings.hidden
|
||||
overflow: this.settings.overflow,
|
||||
hidden: this.settings.hidden,
|
||||
axis: this.settings.axis
|
||||
});
|
||||
|
||||
this.stage.attachTo(element);
|
||||
|
|
@ -54,11 +56,12 @@ SingleViewManager.prototype.render = function(element, size){
|
|||
this.views = new Views(this.container);
|
||||
|
||||
// Calculate Stage Size
|
||||
this.bounds = this.stage.bounds();
|
||||
this._bounds = this.bounds();
|
||||
this._stageSize = this.stage.size();
|
||||
|
||||
// Set the dimensions for views
|
||||
this.viewSettings.width = this.bounds.width;
|
||||
this.viewSettings.height = this.bounds.height;
|
||||
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.
|
||||
|
|
@ -81,20 +84,21 @@ SingleViewManager.prototype.onResized = function(e) {
|
|||
|
||||
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
|
||||
this.viewSettings.width = this.bounds.width;
|
||||
this.viewSettings.height = this.bounds.height;
|
||||
this.viewSettings.width = this._stageSize.width;
|
||||
this.viewSettings.height = this._stageSize.height;
|
||||
|
||||
// Update for existing views
|
||||
this.views.each(function(view) {
|
||||
view.size(this.bounds.width, this.bounds.height);
|
||||
view.size(this._stageSize.width, this._stageSize.height);
|
||||
}.bind(this));
|
||||
|
||||
this.trigger("resized", {
|
||||
width: this.stage.width,
|
||||
height: this.stage.height
|
||||
width: this._stageSize.width,
|
||||
height: this._stageSize.height
|
||||
});
|
||||
|
||||
};
|
||||
|
|
@ -127,7 +131,8 @@ SingleViewManager.prototype.display = function(section, target){
|
|||
if(visible && target) {
|
||||
offset = visible.locationOf(target);
|
||||
this.moveTo(offset);
|
||||
return displaying.resolve();
|
||||
displaying.resolve();
|
||||
return displayed;
|
||||
}
|
||||
|
||||
// Hide all current views
|
||||
|
|
@ -144,7 +149,7 @@ SingleViewManager.prototype.display = function(section, target){
|
|||
// Move to correct place within the section, if needed
|
||||
if(target) {
|
||||
offset = view.locationOf(target);
|
||||
return this.moveTo(offset);
|
||||
this.moveTo(offset);
|
||||
}
|
||||
|
||||
}.bind(this))
|
||||
|
|
@ -177,7 +182,7 @@ SingleViewManager.prototype.add = function(view){
|
|||
view.onDisplayed = this.afterDisplayed.bind(this);
|
||||
view.onResize = this.afterResized.bind(this);
|
||||
|
||||
return view.display();
|
||||
return view.display(this.request);
|
||||
// return this.renderer(view, this.views.hidden);
|
||||
};
|
||||
|
||||
|
|
@ -243,17 +248,17 @@ SingleViewManager.prototype.currentLocation = function(){
|
|||
|
||||
if(this.views.length) {
|
||||
view = this.views.first();
|
||||
// start = container.left - view.position().left;
|
||||
// end = start + this.layout.spread;
|
||||
console.log("visibile currentLocation", view);
|
||||
// return this.map.page(view);
|
||||
start = container.left - view.position().left;
|
||||
end = start + this.layout.spread;
|
||||
|
||||
return this.mapping.page(view);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.isVisible = function(view, offsetPrev, offsetNext, _container){
|
||||
var position = view.position();
|
||||
var container = _container || this.container.getBoundingClientRect();
|
||||
var container = _container || this.bounds();
|
||||
|
||||
if(this.settings.axis === "horizontal" &&
|
||||
position.right > container.left - offsetPrev &&
|
||||
|
|
@ -310,6 +315,7 @@ SingleViewManager.prototype.scrollBy = function(x, y, silent){
|
|||
}
|
||||
// console.log("scrollBy", x, y);
|
||||
this.scrolled = true;
|
||||
this.onScroll();
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.scrollTo = function(x, y, silent){
|
||||
|
|
@ -325,6 +331,7 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
|
|||
}
|
||||
// console.log("scrollTo", x, y);
|
||||
this.scrolled = true;
|
||||
this.onScroll();
|
||||
// if(this.container.scrollLeft != x){
|
||||
// setTimeout(function() {
|
||||
// this.scrollTo(x, y, silent);
|
||||
|
|
@ -333,13 +340,17 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
|
|||
// };
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.onScroll = function(){
|
||||
|
||||
};
|
||||
|
||||
SingleViewManager.prototype.bounds = function() {
|
||||
var bounds;
|
||||
|
||||
if(!this.settings.height || !this.container) {
|
||||
bounds = core.windowBounds();
|
||||
} else {
|
||||
bounds = this.container.getBoundingClientRect();
|
||||
bounds = this.stage.bounds();
|
||||
}
|
||||
|
||||
return bounds;
|
||||
|
|
@ -352,7 +363,7 @@ SingleViewManager.prototype.scrollTo = function(x, y, silent){
|
|||
|
||||
this.setLayout(this.layout);
|
||||
|
||||
// this.map = new Map(this.layout);
|
||||
this.mapping = new Mapping(this.layout);
|
||||
// this.manager.layout(this.layout.format);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ Map.prototype.section = function(view) {
|
|||
};
|
||||
|
||||
Map.prototype.page = function(view, start, end) {
|
||||
var root = view.document.body;
|
||||
var root = view.contents.document.body;
|
||||
return this.rangePairToCfiPair(view.section, {
|
||||
start: this.findStart(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){
|
||||
// var navPoints = tocXml.querySelectorAll("navMap navPoint");
|
||||
var navPoints = core.qsa("navPoint");
|
||||
var navPoints = core.qsa(tocXml, "navPoint");
|
||||
var length = navPoints.length;
|
||||
var i;
|
||||
var toc = {};
|
||||
|
|
@ -398,7 +398,7 @@ Parser.prototype.ncx = function(tocXml, spineIndexByURL, bookSpine){
|
|||
Parser.prototype.ncxItem = function(item, spineIndexByURL, bookSpine){
|
||||
var id = item.getAttribute('id') || false,
|
||||
// content = item.querySelector("content"),
|
||||
content = core.qs("content"),
|
||||
content = core.qs(item, "content"),
|
||||
src = content.getAttribute('src'),
|
||||
// navLabel = item.querySelector("navLabel"),
|
||||
navLabel = core.qs(item, "navLabel"),
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@ var Map = require('./map');
|
|||
function Rendition(book, options) {
|
||||
|
||||
this.settings = core.extend(this.settings || {}, {
|
||||
infinite: true,
|
||||
hidden: false,
|
||||
// infinite: true,
|
||||
// hidden: false,
|
||||
width: null,
|
||||
height: null,
|
||||
layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto', flow: 'auto', viewport: ''},
|
||||
axis: "vertical",
|
||||
// layoutOveride : null, // Default: { spread: 'reflowable', layout: 'auto', orientation: 'auto', flow: 'auto', viewport: ''},
|
||||
// axis: "vertical",
|
||||
ignoreClass: '',
|
||||
manager: "single",
|
||||
view: "iframe"
|
||||
|
|
@ -66,6 +66,16 @@ function Rendition(book, options) {
|
|||
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) {
|
||||
|
|
@ -262,11 +272,13 @@ Rendition.prototype.moveTo = function(offset){
|
|||
};
|
||||
|
||||
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(){
|
||||
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/
|
||||
|
|
|
|||
|
|
@ -22,11 +22,38 @@ function base(doc, section){
|
|||
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) {
|
||||
|
||||
var links = view.document.querySelectorAll("a[href]");
|
||||
var replaceLinks = function(link){
|
||||
var href = link.getAttribute("href");
|
||||
|
||||
if(href.indexOf("mailto:") === 0){
|
||||
return;
|
||||
}
|
||||
|
||||
var linkUri = URI(href);
|
||||
var absolute = linkUri.absoluteTo(view.section.url);
|
||||
var relative = absolute.relativeTo(this.book.baseUrl).toString();
|
||||
|
|
@ -81,6 +108,7 @@ function substitute(content, urls, replacements) {
|
|||
}
|
||||
module.exports = {
|
||||
'base': base,
|
||||
'canonical' : canonical,
|
||||
'links': links,
|
||||
'substitute': substitute
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ function Spine(_request){
|
|||
|
||||
// Register replacements
|
||||
this.hooks.content.register(replacements.base);
|
||||
this.hooks.content.register(replacements.canonical);
|
||||
|
||||
this.epubcfi = new EpubCFI();
|
||||
|
||||
|
|
|
|||
44
src/stage.js
44
src/stage.js
|
|
@ -2,6 +2,7 @@ var core = require('./core');
|
|||
|
||||
function Stage(_options) {
|
||||
this.settings = _options || {};
|
||||
this.id = "epubjs-container-" + core.uuid();
|
||||
|
||||
this.container = this.create(this.settings);
|
||||
|
||||
|
|
@ -19,6 +20,7 @@ Stage.prototype.create = function(options){
|
|||
var height = options.height;// !== false ? options.height : "100%";
|
||||
var width = options.width;// !== false ? options.width : "100%";
|
||||
var overflow = options.overflow || false;
|
||||
var axis = options.axis || "vertical";
|
||||
|
||||
if(options.height && core.isNumber(options.height)) {
|
||||
height = options.height + "px";
|
||||
|
|
@ -31,7 +33,7 @@ Stage.prototype.create = function(options){
|
|||
// Create new container element
|
||||
container = document.createElement("div");
|
||||
|
||||
container.id = "epubjs-container:" + core.uuid();
|
||||
container.id = this.id;
|
||||
container.classList.add("epub-container");
|
||||
|
||||
// Style Element
|
||||
|
|
@ -40,7 +42,7 @@ Stage.prototype.create = function(options){
|
|||
container.style.lineHeight = "0";
|
||||
container.style.verticalAlign = "top";
|
||||
|
||||
if(this.settings.axis === "horizontal") {
|
||||
if(axis === "horizontal") {
|
||||
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 width = _width || this.settings.width;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ function Views(container) {
|
|||
this.hidden = false;
|
||||
};
|
||||
|
||||
Views.prototype.all = function() {
|
||||
return this._views;
|
||||
};
|
||||
|
||||
Views.prototype.first = function() {
|
||||
return this._views[0];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ function IframeView(section, options) {
|
|||
globalLayoutProperties: {},
|
||||
}, options || {});
|
||||
|
||||
this.id = "epubjs-view:" + core.uuid();
|
||||
this.id = "epubjs-view-" + core.uuid();
|
||||
this.section = section;
|
||||
this.index = section.index;
|
||||
|
||||
|
|
@ -35,7 +35,6 @@ function IframeView(section, options) {
|
|||
this.layout = this.settings.layout;
|
||||
// Dom events to listen for
|
||||
// this.listenedEvents = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
|
||||
|
||||
};
|
||||
|
||||
IframeView.prototype.container = function(axis) {
|
||||
|
|
@ -119,8 +118,12 @@ IframeView.prototype.render = function(request, show) {
|
|||
// Fit to size of the container, apply padding
|
||||
this.size();
|
||||
|
||||
if(!this.sectionRender) {
|
||||
this.sectionRender = this.section.render(request);
|
||||
}
|
||||
|
||||
// Render Chain
|
||||
return this.section.render(request)
|
||||
return this.sectionRender
|
||||
.then(function(contents){
|
||||
return this.load(contents);
|
||||
}.bind(this))
|
||||
|
|
@ -396,10 +399,26 @@ IframeView.prototype.onLoad = function(event, promise) {
|
|||
this.window = this.iframe.contentWindow;
|
||||
this.document = this.iframe.contentDocument;
|
||||
|
||||
this.contents = new Contents(this.document);
|
||||
this.contents = new Contents(this.document, this.document.body);
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -303,16 +303,6 @@ InlineView.prototype.load = function(contents) {
|
|||
|
||||
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;
|
||||
|
||||
loading.resolve(this.contents);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue