Adds fullscreen support to Epub.js controls via screenfull.js.

Gruntfile.js

@@ -14,7 +14,8 @@ module.exports = function(grunt) {
 		'demo/js/libs/fileStorage.min.js': 'libs/fileStorage/fileStorage.min.js',
 		'demo/js/libs/loader_filesystem.min.js': 'libs/fileStorage/workers/loader_filesystem.min.js',
 		'demo/js/libs/jquery-1.9.0.min.js': 'libs/jquery/jquery-1.9.0.min.js',
-		'demo/js/libs/inflate.js': 'libs/zip/inflate.js'
+		'demo/js/libs/inflate.js': 'libs/zip/inflate.js',
+		'demo/js/libs/screenfull.min.js': 'libs/screenfull.min.js'
 		},
 		uglify: {
 			options: {
@@ -30,7 +31,8 @@ module.exports = function(grunt) {
 					'demo/js/libs/zip.min.js': ['libs/zip/zip.js', 'libs/zip/zip-fs.js', 'libs/zip/zip-ext.js', 'libs/zip/mime-types.js'],
 					'demo/js/libs/inflate.min.js': ['libs/zip/inflate.js'],
 					'build/libs/zip.min.js': ['libs/zip/zip.js', 'libs/zip/zip-fs.js', 'libs/zip/zip-ext.js', 'libs/zip/mime-types.js'],
-					'build/libs/inflate.js': ['libs/zip/inflate.js']
+					'build/libs/inflate.js': ['libs/zip/inflate.js'],
+					'build/libs/screenfull.min.js': ['libs/screenfull.min.js']
 				}
 			}
 		}

build/libs/screenfull.min.js

@@ -0,0 +1,7 @@
+/*!
+* screenfull
+* v1.1.0 - 2013-09-06
+* https://github.com/sindresorhus/screenfull.js
+* (c) Sindre Sorhus; MIT License
+*/
+!function(a,b){"use strict";var c="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,d=function(){for(var a,c,d=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenchange","MSFullscreenerror"]],e=0,f=d.length,g={};f>e;e++)if(a=d[e],a&&a[1]in b){for(e=0,c=a.length;c>e;e++)g[d[0][e]]=a[e];return g}return!1}(),e={request:function(a){var e=d.requestFullscreen;a=a||b.documentElement,/5\.1[\.\d]* Safari/.test(navigator.userAgent)?a[e]():a[e](c&&Element.ALLOW_KEYBOARD_INPUT)},exit:function(){b[d.exitFullscreen]()},toggle:function(a){this.isFullscreen?this.exit():this.request(a)},onchange:function(){},onerror:function(){},raw:d};return d?(Object.defineProperties(e,{isFullscreen:{get:function(){return!!b[d.fullscreenElement]}},element:{enumerable:!0,get:function(){return b[d.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return!!b[d.fullscreenEnabled]}}}),b.addEventListener(d.fullscreenchange,function(a){e.onchange.call(e,a)}),b.addEventListener(d.fullscreenerror,function(a){e.onerror.call(e,a)}),a.screenfull=e,void 0):(a.screenfull=!1,void 0)}(window,document);

build/reader.js

@@ -273,6 +273,9 @@ EPUBJSR.app.init = (function($){
 	  	  $settingLink = $("#setting"),
 	  	  $settings = $("#settingsPanel"),
 	  	  $toc = $("#toc"),
+	  	  $fullscreen = $("#fullscreen"),
+	  	  $fullscreenicon = $("#fullscreenicon"),
+          $cancelfullscreenicon = $("#cancelfullscreenicon"),
 	  	  $window = $(window);
 
 
@@ -302,7 +305,11 @@ EPUBJSR.app.init = (function($){
 
 	  });
 	 
-	  
+	  $fullscreen.on("click", function () {
+        screenfull.toggle($('#container')[0]);
+        $fullscreenicon.toggle();
+        $cancelfullscreenicon.toggle();
+      });
 
 	  var lock = false;
 	   	$(document).keydown(function(e){

demo/css/main.css

@@ -377,6 +377,3 @@ input:-moz-placeholder {
     webkit-padding-start:;
   }
 }
-
-
-

demo/dev.html

@@ -15,18 +15,19 @@
         <script>window.jQuery || document.write('<script src="epubjs/libs/jquery-1.9.0.min.js"><\/script>')</script>
         -->
         <script src="../libs/jquery/jquery-1.9.0.js"></script>
+
         <script>
             "use strict";
             
             document.onreadystatechange = function () {  
               if (document.readyState == "complete") {
-                EPUBJS.filePath = "../libs/zip/";
+                EPUBJS.VERSION = "0.1.6";
-                EPUBJS.cssPath = "css/";
-                fileStorage.filePath = "../libs/fileStorage/workers/";
                 
-                EPUBJS.VERSION = "0.1.5";
+                EPUBJS.filePath = "js/libs/";
-                // EPUBJSR.app.init('/demo/moby-dick.epub');
+                EPUBJS.cssPath = "css/";
-                window.book = EPUBJSR.app.init('/demo/moby-dick/');
+                // fileStorage.filePath = EPUBJS.filePath;
+
+                EPUBJSR.app.init("moby-dick/");
               }  
             };
         
@@ -66,17 +67,21 @@
         <script async src="../reader/utils.js"></script>
         <script async src="../reader/app.js"></script>
         
+        <!-- Full Screen -->
+        <script src="js/libs/screenfull.min.js"></script>
         
         
     </head>
     <body>
         <div id="sidebar">
           <div id="controls">
-            
             <input id="search" placeholder="search">
             <a id="network"><img id="store" src="../demo/img/save.png" save="../demo/img/save.png" data-saved="../demo/img/saved.png"></a>
             <a id="setting"><img id="settings" src="../demo/img/settings.png"></a>
-            <a id="bookmark"><img id="bookmarks" src="../demo/img/star.png"></a>
+            <a id="fullscreen">
+              <img id="fullscreenicon" src="img/fullscreen.png">
+              <img id="cancelfullscreenicon" src="img/cancelfullscreen.png" style="display: none">
+            </a>
           </div>
           <div id="toc">
           </div>

demo/index.html

@@ -16,7 +16,6 @@
 
         <script src="js/libs/zip.min.js"></script>        
 
-
         <script>
             "use strict";
             
@@ -43,9 +42,12 @@
         <!-- Reader -->
         <script src="js/reader.min.js"></script>
         
-        <!-- fileStorage -->
+        <!-- File Storage -->
         <!-- <script src="js/libs/fileStorage.min.js"></script> -->
 
+        <!-- Full Screen -->
+        <script src="js/libs/screenfull.min.js"></script>
+        
     </head>
     <body>
         <div id="sidebar">
@@ -54,7 +56,10 @@
             <!-- <input id="search" placeholder="search"> -->
             <a id="network"><img id="store" src="img/save.png"></a>
             <a id="setting"><img id="settings" src="img/settings.png"></a>
-            <a id="bookmark"><img id="bookmarks" src="img/star.png"></a>
+            <a id="fullscreen">
+              <img id="fullscreenicon" src="img/fullscreen.png">
+              <img id="cancelfullscreenicon" src="img/cancelfullscreen.png" style="display: none">
+            </a>
           </div>
           <div id="toc">
           </div>

demo/js/libs/screenfull.min.js

@@ -0,0 +1,7 @@
+/*!
+* screenfull
+* v1.1.0 - 2013-09-06
+* https://github.com/sindresorhus/screenfull.js
+* (c) Sindre Sorhus; MIT License
+*/
+!function(a,b){"use strict";var c="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,d=function(){for(var a,c,d=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenchange","MSFullscreenerror"]],e=0,f=d.length,g={};f>e;e++)if(a=d[e],a&&a[1]in b){for(e=0,c=a.length;c>e;e++)g[d[0][e]]=a[e];return g}return!1}(),e={request:function(a){var e=d.requestFullscreen;a=a||b.documentElement,/5\.1[\.\d]* Safari/.test(navigator.userAgent)?a[e]():a[e](c&&Element.ALLOW_KEYBOARD_INPUT)},exit:function(){b[d.exitFullscreen]()},toggle:function(a){this.isFullscreen?this.exit():this.request(a)},onchange:function(){},onerror:function(){},raw:d};return d?(Object.defineProperties(e,{isFullscreen:{get:function(){return!!b[d.fullscreenElement]}},element:{enumerable:!0,get:function(){return b[d.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return!!b[d.fullscreenEnabled]}}}),b.addEventListener(d.fullscreenchange,function(a){e.onchange.call(e,a)}),b.addEventListener(d.fullscreenerror,function(a){e.onerror.call(e,a)}),a.screenfull=e,void 0):(a.screenfull=!1,void 0)}(window,document);

demo/js/reader.min.js

@@ -1 +1 @@
-var EPUBJSR=EPUBJSR||{};EPUBJSR.app={},EPUBJSR.app.init=function(a){"use strict";function b(b){var e=window.location.search.match(/book=(.*)/),b=b||(e?e[1]:"moby-dick");return k=a(window).width(),k>550?a("#main").width(k-m):a("#main").width(k),j=new EPUBJS.Book({bookPath:b,restore:!0}),j.on("book:online",g),j.on("book:offline",h),j.getMetadata().then(c),j.getToc().then(d),j.ready.all.then(f),j.renderTo("area"),a(function(){i()}),j}function c(b){var c=b.bookTitle,d=b.creator,e=a("#book-title"),f=a("#chapter-title"),g=a("#title-seperator");document.title=c+" – "+d,e.html(c),f.html(d),g.show()}function d(b){var c,d,f=a("#toc");f.empty(),d=e(b,1),f.append(d),c=a(".toc_link"),c.on("click",function(b){var c=a(this),d=c.data("url");a(".openChapter").removeClass("openChapter"),c.parents("li").addClass("openChapter"),j.goto(d),b.preventDefault()})}function e(b,c){var d=a("<ul>"),f=1==c?"chapter":"section";return b.forEach(function(b){var g,h=a("<li id='toc-"+b.id+"'>"),i=a("<a class='toc_link "+f+"' href='#/"+b.href+"' data-url='"+b.href+"'>"+b.label+"</a>");h.append(i),b.subitems&&b.subitems.length&&(c++,g=e(b.subitems,c),h.append(g)),d.append(h)}),d}function f(){var b=a("#divider"),c=a("#loader");c.hide(),j.single||b.addClass("show")}function g(){var b=a("#store");l=!1,b.attr("src",b.data("save"))}function h(){var b=a("#store");l=!0,b.attr("src",b.data("saved"))}function i(){function b(){n.addClass("open"),h.addClass("closed"),p.attr("src",p.data("close"))}function c(){i.css("pointer-events","visible"),n.removeClass("open"),h.removeClass("closed"),p.attr("src",p.data("open"))}function d(){t.hide(),s.show()}function e(){s.hide(),t.show()}var f=a("#next"),g=a("#prev"),h=a("#main"),i=a("#area"),n=a("#sidebar"),o=a("#open"),p=o.find("img"),q=a("#network"),r=a("#setting"),s=a("#settingsPanel"),t=a("#toc"),u=a(window);u.on("resize",function(){k=a(window).width(),k>550?h.width(k-m):h.width(k)}),f.on("click",function(){j.nextPage()}),g.on("click",function(){j.prevPage()}),r.on("click",function(){s.is(":visible")?e():d()});var v=!1;a(document).keydown(function(a){return v?void 0:37==a.keyCode?(g.trigger("click"),v=!0,setTimeout(function(){v=!1},100),!1):39==a.keyCode?(f.trigger("click"),v=!0,setTimeout(function(){v=!1},100),!1):void 0}),o.on("click",function(){n.hasClass("open")?c():b()}),q.on("click",function(){l=!l,j.fromStorage(l)})}var j,k,l=!1,m=0;return b}(jQuery),jQuery.fn.extend({clickOutside:function(a,b){var c=this;return jQuery(document).on("click.offer",function(d){b&&jQuery.inArray(d.target,b)>-1||jQuery.contains(c[0],d.target)||(jQuery(document).off("click.offer"),a(d,c))}),this}});
+var EPUBJSR=EPUBJSR||{};EPUBJSR.app={},EPUBJSR.app.init=function(a){"use strict";function b(b){var e=window.location.search.match(/book=(.*)/),b=b||(e?e[1]:"moby-dick");return k=a(window).width(),k>550?a("#main").width(k-m):a("#main").width(k),j=new EPUBJS.Book({bookPath:b,restore:!0}),j.on("book:online",g),j.on("book:offline",h),j.getMetadata().then(c),j.getToc().then(d),j.ready.all.then(f),j.renderTo("area"),a(function(){i()}),j}function c(b){var c=b.bookTitle,d=b.creator,e=a("#book-title"),f=a("#chapter-title"),g=a("#title-seperator");document.title=c+" – "+d,e.html(c),f.html(d),g.show()}function d(b){var c,d,f=a("#toc");f.empty(),d=e(b,1),f.append(d),c=a(".toc_link"),c.on("click",function(b){var c=a(this),d=c.data("url");a(".openChapter").removeClass("openChapter"),c.parents("li").addClass("openChapter"),j.goto(d),b.preventDefault()})}function e(b,c){var d=a("<ul>"),f=1==c?"chapter":"section";return b.forEach(function(b){var g,h=a("<li id='toc-"+b.id+"'>"),i=a("<a class='toc_link "+f+"' href='#/"+b.href+"' data-url='"+b.href+"'>"+b.label+"</a>");h.append(i),b.subitems&&b.subitems.length&&(c++,g=e(b.subitems,c),h.append(g)),d.append(h)}),d}function f(){var b=a("#divider"),c=a("#loader");c.hide(),j.single||b.addClass("show")}function g(){var b=a("#store");l=!1,b.attr("src",b.data("save"))}function h(){var b=a("#store");l=!0,b.attr("src",b.data("saved"))}function i(){function b(){n.addClass("open"),h.addClass("closed"),p.attr("src",p.data("close"))}function c(){i.css("pointer-events","visible"),n.removeClass("open"),h.removeClass("closed"),p.attr("src",p.data("open"))}function d(){t.hide(),s.show()}function e(){s.hide(),t.show()}var f=a("#next"),g=a("#prev"),h=a("#main"),i=a("#area"),n=a("#sidebar"),o=a("#open"),p=o.find("img"),q=a("#network"),r=a("#setting"),s=a("#settingsPanel"),t=a("#toc"),u=a("#fullscreen"),v=a("#fullscreenicon"),w=a("#cancelfullscreenicon"),x=a(window);x.on("resize",function(){k=a(window).width(),k>550?h.width(k-m):h.width(k)}),f.on("click",function(){j.nextPage()}),g.on("click",function(){j.prevPage()}),r.on("click",function(){s.is(":visible")?e():d()}),u.on("click",function(){screenfull.toggle(a("#container")[0]),v.toggle(),w.toggle()});var y=!1;a(document).keydown(function(a){return y?void 0:37==a.keyCode?(g.trigger("click"),y=!0,setTimeout(function(){y=!1},100),!1):39==a.keyCode?(f.trigger("click"),y=!0,setTimeout(function(){y=!1},100),!1):void 0}),o.on("click",function(){n.hasClass("open")?c():b()}),q.on("click",function(){l=!l,j.fromStorage(l)})}var j,k,l=!1,m=0;return b}(jQuery),jQuery.fn.extend({clickOutside:function(a,b){var c=this;return jQuery(document).on("click.offer",function(d){b&&jQuery.inArray(d.target,b)>-1||jQuery.contains(c[0],d.target)||(jQuery(document).off("click.offer"),a(d,c))}),this}});

libs/screenfull.min.js

@@ -0,0 +1,7 @@
+/*!
+* screenfull
+* v1.1.0 - 2013-09-06
+* https://github.com/sindresorhus/screenfull.js
+* (c) Sindre Sorhus; MIT License
+*/
+!function(a,b){"use strict";var c="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,d=function(){for(var a,c,d=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenchange","MSFullscreenerror"]],e=0,f=d.length,g={};f>e;e++)if(a=d[e],a&&a[1]in b){for(e=0,c=a.length;c>e;e++)g[d[0][e]]=a[e];return g}return!1}(),e={request:function(a){var e=d.requestFullscreen;a=a||b.documentElement,/5\.1[\.\d]* Safari/.test(navigator.userAgent)?a[e]():a[e](c&&Element.ALLOW_KEYBOARD_INPUT)},exit:function(){b[d.exitFullscreen]()},toggle:function(a){this.isFullscreen?this.exit():this.request(a)},onchange:function(){},onerror:function(){},raw:d};return d?(Object.defineProperties(e,{isFullscreen:{get:function(){return!!b[d.fullscreenElement]}},element:{enumerable:!0,get:function(){return b[d.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return!!b[d.fullscreenEnabled]}}}),b.addEventListener(d.fullscreenchange,function(a){e.onchange.call(e,a)}),b.addEventListener(d.fullscreenerror,function(a){e.onerror.call(e,a)}),a.screenfull=e,void 0):(a.screenfull=!1,void 0)}(window,document);

reader/app.js

@@ -273,6 +273,9 @@ EPUBJSR.app.init = (function($){
 	  	  $settingLink = $("#setting"),
 	  	  $settings = $("#settingsPanel"),
 	  	  $toc = $("#toc"),
+	  	  $fullscreen = $("#fullscreen"),
+	  	  $fullscreenicon = $("#fullscreenicon"),
+          $cancelfullscreenicon = $("#cancelfullscreenicon"),
 	  	  $window = $(window);
 
 
@@ -302,7 +305,11 @@ EPUBJSR.app.init = (function($){
 
 	  });
 	 
-	  
+	  $fullscreen.on("click", function () {
+        screenfull.toggle($('#container')[0]);
+        $fullscreenicon.toggle();
+        $cancelfullscreenicon.toggle();
+      });
 
 	  var lock = false;
 	   	$(document).keydown(function(e){