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

hoai · Nov 12, 2013 · c3782f7 · c3782f7
1 parent 2ed69e9
commit c3782f7
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 19 deletions.
diff --git a/Gruntfile.js b/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']
 				}
 			}
 		}

diff --git a/build/libs/screenfull.min.js b/build/libs/screenfull.min.js
diff --git a/build/reader.js b/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){

diff --git a/demo/css/main.css b/demo/css/main.css
@@ -377,6 +377,3 @@ input:-moz-placeholder {
     webkit-padding-start:;
   }
 }
-
-
-
diff --git a/demo/dev.html b/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.cssPath = "css/";
-                fileStorage.filePath = "../libs/fileStorage/workers/";
+                EPUBJS.VERSION = "0.1.6";
 
-                EPUBJS.VERSION = "0.1.5";
-                // EPUBJSR.app.init('/demo/moby-dick.epub');
-                window.book = EPUBJSR.app.init('/demo/moby-dick/');
+                EPUBJS.filePath = "js/libs/";
+                EPUBJS.cssPath = "css/";
+                // 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>

diff --git a/demo/img/cancelfullscreen.png b/demo/img/cancelfullscreen.png
diff --git a/demo/img/fullscreen.png b/demo/img/fullscreen.png
diff --git a/demo/index.html b/demo/index.html
@@ -16,7 +16,6 @@
 
         <script src="js/libs/zip.min.js"></script>        
 
-
         <script>
             "use strict";
 
@@ -43,8 +42,11 @@
         <!-- 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>
@@ -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>

diff --git a/demo/js/libs/screenfull.min.js b/demo/js/libs/screenfull.min.js
diff --git a/demo/js/reader.min.js b/demo/js/reader.min.js
diff --git a/libs/screenfull.min.js b/libs/screenfull.min.js
diff --git a/reader/app.js b/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){
Original file line number	Diff line number	Diff line change
Expand Up		@@ -377,6 +377,3 @@ input:-moz-placeholder {
		webkit-padding-start:;
		}
		}