yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-03 14:59:18 +02:00
Code Issues Releases Wiki Activity

fixed merge

Browse source
This commit is contained in:
Fred Chasen 2016-08-04 14:08:49 +02:00
commit 2aaac35671
20 changed files with 780 additions and 344 deletions
Download patch file Download diff file Expand all files Collapse all files

465
dist/epub.js vendored
View file

File diff suppressed because it is too large Load diff

2
dist/epub.js.map vendored
View file

File diff suppressed because one or more lines are too long

241
examples/hypothesis.html
View file

@ -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 () {
return { view.window.hypothesisConfig = function () {
constructor: this.Annotator.Guest,
app: 'https://hypothes.is/app.html' 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>
<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>

2
examples/spreads.html
View file

@ -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
}); });

111
src/contents.js
View file

@ -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,8 +320,13 @@ 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) {
targetPos = range.getBoundingClientRect(); if (range.startContainer.nodeType === Node.ELEMENT_NODE) {
targetPos = range.startContainer.getBoundingClientRect();
} else {
targetPos = range.getBoundingClientRect();
}
} }
} else if(typeof target === "string" && } else if(typeof target === "string" &&

1
src/core.js
View file

@ -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 {

2
src/epubcfi.js
View file

@ -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';

2
src/layout.js
View file

@ -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');

58
src/managers/continuous.js
View file

@ -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,

37
src/managers/paginate.js
View file

@ -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,

57
src/managers/single.js
View file

@ -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);
}; };

2
src/map.js
View file

@ -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)

6
src/parser.js
View file

@ -154,7 +154,7 @@ Parser.prototype.metadata = function(xml){
metadata.rights = p.getElementText(xml, "rights"); metadata.rights = p.getElementText(xml, "rights");
metadata.modified_date = p.getPropertyText(xml, 'dcterms:modified'); metadata.modified_date = p.getPropertyText(xml, 'dcterms:modified');
metadata.layout = p.getPropertyText(xml, "rendition:layout"); metadata.layout = p.getPropertyText(xml, "rendition:layout");
metadata.orientation = p.getPropertyText(xml, 'rendition:orientation'); metadata.orientation = p.getPropertyText(xml, 'rendition:orientation');
metadata.flow = p.getPropertyText(xml, 'rendition:flow'); metadata.flow = p.getPropertyText(xml, 'rendition:flow');
@ -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"),

24
src/rendition.js
View file

@ -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/

28
src/replacements.js
View file

@ -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
}; };

1
src/spine.js
View file

@ -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
View file

@ -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;

4
src/views.js
View file

@ -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];
}; };

27
src/views/iframe.js
View file

@ -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);
}; };

10
src/views/inline.js
View file

@ -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);