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

Added addScript to views, hooks example

This commit is contained in:
fchasen 2015-06-26 16:50:25 -04:00
parent ae726a1dab
commit a7d76e41ef
5 changed files with 240 additions and 30 deletions

60
dist/epub.js vendored
View file

@ -2329,12 +2329,13 @@ EPUBJS.Hook = function(context){
this.hooks = []; this.hooks = [];
}; };
//-- Hooks allow for injecting async functions that must all complete in order before finishing //-- Hooks allow for injecting functions that must all complete in order before finishing
// Functions must return a promise. // They will execute in parallel but all must finish before continuing
// Functions may return a promise if they are asycn.
// this.beforeDisplay = new EPUBJS.Hook(); // this.content = new EPUBJS.Hook();
// this.beforeDisplay.register(function(){}); // this.content.register(function(){});
// this.beforeDisplay.trigger(args).then(function(){}); // this.content.trigger(args).then(function(){});
// Adds a function to be run before a hook completes // Adds a function to be run before a hook completes
EPUBJS.Hook.prototype.register = function(func){ EPUBJS.Hook.prototype.register = function(func){
@ -2346,20 +2347,21 @@ EPUBJS.Hook.prototype.trigger = function(){
var args = arguments; var args = arguments;
var context = this.context; var context = this.context;
var promises = []; var promises = [];
this.hooks.forEach(function(task, i) { this.hooks.forEach(function(task, i) {
var executing = task.apply(context, args); var executing = task.apply(context, args);
if(executing && typeof executing["then"] === "function") { if(executing && typeof executing["then"] === "function") {
// Task is a function that returns a promise // Task is a function that returns a promise
promises.push(executing); promises.push(executing);
} }
// Otherwise Task resolves immediately, continue // Otherwise Task resolves immediately, continue
}); });
return RSVP.all(promises); return RSVP.all(promises);
}; };
EPUBJS.Parser = function(){}; EPUBJS.Parser = function(){};
EPUBJS.Parser.prototype.container = function(containerXml){ EPUBJS.Parser.prototype.container = function(containerXml){
@ -4423,15 +4425,16 @@ EPUBJS.View.prototype.locationOf = function(target) {
}; };
EPUBJS.View.prototype.addCss = function(src) { EPUBJS.View.prototype.addCss = function(src) {
var $stylesheet = document.createElement('link');
var ready = false;
return new RSVP.Promise(function(resolve, reject){ return new RSVP.Promise(function(resolve, reject){
var $stylesheet;
var ready = false;
if(!this.document) { if(!this.document) {
resolve(false); resolve(false);
return; return;
} }
$stylesheet = this.document.createElement('link');
$stylesheet.type = 'text/css'; $stylesheet.type = 'text/css';
$stylesheet.rel = "stylesheet"; $stylesheet.rel = "stylesheet";
$stylesheet.href = src; $stylesheet.href = src;
@ -4452,11 +4455,13 @@ EPUBJS.View.prototype.addCss = function(src) {
// https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
EPUBJS.View.prototype.addStylesheetRules = function(rules) { EPUBJS.View.prototype.addStylesheetRules = function(rules) {
var styleEl = document.createElement('style'), var styleEl;
styleSheet; var styleSheet;
if(!this.document) return; if(!this.document) return;
var styleEl = this.document.createElement('style');
// Append style element to head // Append style element to head
this.document.head.appendChild(styleEl); this.document.head.appendChild(styleEl);
@ -4481,6 +4486,35 @@ EPUBJS.View.prototype.addStylesheetRules = function(rules) {
} }
}; };
EPUBJS.View.prototype.addScript = function(src) {
return new RSVP.Promise(function(resolve, reject){
var $script;
var ready = false;
if(!this.document) {
resolve(false);
return;
}
$script = this.document.createElement('script');
$script.type = 'text/javascript';
$script.async = true;
$script.src = src;
$script.onload = $script.onreadystatechange = function() {
if ( !ready && (!this.readyState || this.readyState == 'complete') ) {
ready = true;
setTimeout(function(){
resolve(true);
}, 1);
}
};
this.document.head.appendChild($script);
}.bind(this));
};
RSVP.EventTarget.mixin(EPUBJS.View.prototype); RSVP.EventTarget.mixin(EPUBJS.View.prototype);
EPUBJS.Layout = EPUBJS.Layout || {}; EPUBJS.Layout = EPUBJS.Layout || {};

6
dist/epub.min.js vendored

File diff suppressed because one or more lines are too long

143
examples/hooks.html Normal file
View file

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Single Example</title>
<script src="../dist/epub.js"></script>
<style type="text/css">
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
}
#viewer {
overflow: hidden;
width: 800px;
margin: 0 auto;
}
#viewer .epub-view {
background: white;
box-shadow: 0 0 4px #ccc;
margin: 10px;
padding: 20px;
}
.arrow {
margin: 14px;
display: block;
text-align: center;
text-decoration: none;
color: #ccc;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#toc {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<a id="prev" href="#prev" class="arrow">...</a>
<div id="viewer"></div>
<a id="next" href="#next" class="arrow">...</a>
<script>
var currentSectionIndex = 8;
// Load the opf
var book = ePub("../books/alice/OPS/package.opf");
var rendition = book.renderTo("viewer");
rendition.display("chapter_001.xhtml");
var next = document.getElementById("next");
next.addEventListener("click", function(e){
rendition.next();
e.preventDefault();
}, false);
var prev = document.getElementById("prev");
prev.addEventListener("click", function(e){
rendition.prev();
e.preventDefault();
}, false);
rendition.on("rendered", function(section){
var nextSection = section.next();
var prevSection = section.prev();
if(nextSection) {
nextNav = book.navigation.get(nextSection.href);
if(nextNav) {
nextLabel = nextNav.label;
} else {
nextLabel = "next";
}
next.textContent = nextLabel + " »";
} else {
next.textContent = "";
}
if(prevSection) {
prevNav = book.navigation.get(prevSection.href);
if(prevNav) {
prevLabel = prevNav.label;
} else {
prevLabel = "previous";
}
prev.textContent = "« " + prevLabel;
} else {
prev.textContent = "";
}
});
// Hooks
// Add a single script
rendition.hooks.content.register(function(view){
return view.addScript("https://code.jquery.com/jquery-2.1.4.min.js")
.then(function(){
// init code
});
});
// Add several scripts / css
rendition.hooks.content.register(function(view){
var loaded = RSVP.all([
view.addScript("http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"),
view.addCss("http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css")
]);
// return loaded promise
return loaded;
});
</script>
</body>
</html>

View file

@ -3,12 +3,13 @@ EPUBJS.Hook = function(context){
this.hooks = []; this.hooks = [];
}; };
//-- Hooks allow for injecting async functions that must all complete in order before finishing //-- Hooks allow for injecting functions that must all complete in order before finishing
// Functions must return a promise. // They will execute in parallel but all must finish before continuing
// Functions may return a promise if they are asycn.
// this.beforeDisplay = new EPUBJS.Hook(); // this.content = new EPUBJS.Hook();
// this.beforeDisplay.register(function(){}); // this.content.register(function(){});
// this.beforeDisplay.trigger(args).then(function(){}); // this.content.trigger(args).then(function(){});
// Adds a function to be run before a hook completes // Adds a function to be run before a hook completes
EPUBJS.Hook.prototype.register = function(func){ EPUBJS.Hook.prototype.register = function(func){
@ -20,17 +21,17 @@ EPUBJS.Hook.prototype.trigger = function(){
var args = arguments; var args = arguments;
var context = this.context; var context = this.context;
var promises = []; var promises = [];
this.hooks.forEach(function(task, i) { this.hooks.forEach(function(task, i) {
var executing = task.apply(context, args); var executing = task.apply(context, args);
if(executing && typeof executing["then"] === "function") { if(executing && typeof executing["then"] === "function") {
// Task is a function that returns a promise // Task is a function that returns a promise
promises.push(executing); promises.push(executing);
} }
// Otherwise Task resolves immediately, continue // Otherwise Task resolves immediately, continue
}); });
return RSVP.all(promises); return RSVP.all(promises);
}; };

View file

@ -591,15 +591,16 @@ EPUBJS.View.prototype.locationOf = function(target) {
}; };
EPUBJS.View.prototype.addCss = function(src) { EPUBJS.View.prototype.addCss = function(src) {
var $stylesheet = document.createElement('link');
var ready = false;
return new RSVP.Promise(function(resolve, reject){ return new RSVP.Promise(function(resolve, reject){
var $stylesheet;
var ready = false;
if(!this.document) { if(!this.document) {
resolve(false); resolve(false);
return; return;
} }
$stylesheet = this.document.createElement('link');
$stylesheet.type = 'text/css'; $stylesheet.type = 'text/css';
$stylesheet.rel = "stylesheet"; $stylesheet.rel = "stylesheet";
$stylesheet.href = src; $stylesheet.href = src;
@ -620,11 +621,13 @@ EPUBJS.View.prototype.addCss = function(src) {
// https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
EPUBJS.View.prototype.addStylesheetRules = function(rules) { EPUBJS.View.prototype.addStylesheetRules = function(rules) {
var styleEl = document.createElement('style'), var styleEl;
styleSheet; var styleSheet;
if(!this.document) return; if(!this.document) return;
var styleEl = this.document.createElement('style');
// Append style element to head // Append style element to head
this.document.head.appendChild(styleEl); this.document.head.appendChild(styleEl);
@ -649,4 +652,33 @@ EPUBJS.View.prototype.addStylesheetRules = function(rules) {
} }
}; };
EPUBJS.View.prototype.addScript = function(src) {
return new RSVP.Promise(function(resolve, reject){
var $script;
var ready = false;
if(!this.document) {
resolve(false);
return;
}
$script = this.document.createElement('script');
$script.type = 'text/javascript';
$script.async = true;
$script.src = src;
$script.onload = $script.onreadystatechange = function() {
if ( !ready && (!this.readyState || this.readyState == 'complete') ) {
ready = true;
setTimeout(function(){
resolve(true);
}, 1);
}
};
this.document.head.appendChild($script);
}.bind(this));
};
RSVP.EventTarget.mixin(EPUBJS.View.prototype); RSVP.EventTarget.mixin(EPUBJS.View.prototype);