yetangitu/canvas-based-HTML5-Comic-Book-Reader
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Compare commits

base: yetangitu:master
Branches Tags
yetangitu:master
yetangitu:release/1.0.0
yetangitu:thumbs
yetangitu:touch
..
compare: yetangitu:touch
Branches Tags
yetangitu:release/1.0.0
yetangitu:thumbs
yetangitu:master
yetangitu:touch

4 commits
master ... touch

Author SHA1 Message Date
Bala Clark
22be208b57 Merge branch 'master' into touch 2013-11-26 22:17:57 +01:00
Bala Clark
b796b22930 add quo to test runner 2013-08-18 23:21:45 +02:00
Bala Clark
14564eef27 add quo to build 2013-08-18 22:43:22 +02:00
Bala Clark
f429c4aafe swipe navigation 2013-08-18 22:27:20 +02:00
23 changed files with 52 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Makefile
View file

@ -10,7 +10,7 @@ build:
@./node_modules/.bin/handlebars templates/*.handlebars -f lib/templates.js @./node_modules/.bin/handlebars templates/*.handlebars -f lib/templates.js
@echo "Compiling and minifying javascript..." @echo "Compiling and minifying javascript..."
@mkdir -p comicbook/js/pixastic @mkdir -p comicbook/js/pixastic
@cat lib/vendor/pixastic/pixastic.js lib/vendor/pixastic/pixastic.effects.js lib/vendor/pixastic/pixastic.worker.js lib/vendor/handlebars.runtime-1.0.rc.1.min.js lib/templates.js lib/ComicBook.js > comicbook/js/comicbook.js @cat lib/vendor/pixastic/pixastic.js lib/vendor/pixastic/pixastic.effects.js lib/vendor/pixastic/pixastic.worker.js lib/vendor/handlebars.runtime-1.0.rc.1.min.js lib/vendor/quo.js lib/templates.js lib/ComicBook.js > comicbook/js/comicbook.js
@cp lib/vendor/pixastic/pixastic.js comicbook/js/pixastic @cp lib/vendor/pixastic/pixastic.js comicbook/js/pixastic
@cp lib/vendor/pixastic/pixastic.effects.js comicbook/js/pixastic @cp lib/vendor/pixastic/pixastic.effects.js comicbook/js/pixastic
@cp lib/vendor/pixastic/pixastic.worker.js comicbook/js/pixastic @cp lib/vendor/pixastic/pixastic.worker.js comicbook/js/pixastic
@ -22,8 +22,6 @@ build:
@cat fonts/icomoon-toolbar/style.css css/reset.css css/styles.css css/toolbar.css > comicbook/comicbook.css @cat fonts/icomoon-toolbar/style.css css/reset.css css/styles.css css/toolbar.css > comicbook/comicbook.css
@echo "Copying assets..." @echo "Copying assets..."
@cp -r css/img comicbook/img @cp -r css/img comicbook/img
@cp -r icons/1_Desktop_Icons/icon_128.png comicbook/img
@cp -r icons/1_Desktop_Icons/icon_196.png comicbook/img
@cp -r fonts/icomoon-toolbar/fonts comicbook @cp -r fonts/icomoon-toolbar/fonts comicbook
@cp -r fonts/icomoon-toolbar/license.txt comicbook/fonts @cp -r fonts/icomoon-toolbar/license.txt comicbook/fonts
@echo "Updating examples" @echo "Updating examples"

21
TODO
View file

@ -1,21 +0,0 @@
Fo sho:
- remember reading position / applied effects (per comic)
- offline mode via cache manifest
- firefox marketplace
- create onclose callback, show close button only if set
- trigger preload if requesting valid but not loaded images (can happen if network was interupted)
- loading and generally hackiness of pointer is buggy, fix.
- check for html5 feature support where used: diveintohtml5.org/everything.html or www.modernizr.com
Nice 2 have:
- remove image inhancement lag when navigating by pre-applying enhancements to other pages
- jump to page?
- make page draggable with the cursor
- enable menu items via config, allow for custom items
- split out classes into seperate files
- thumbnail browser
- refactor so we are not using all these loose shared variables and other nastyness
- use custom event emitters instead of hacky code
- properly bind 'this' so we don't have to keep using 'self'
- allow toolbar to be hidden on mobile (maybe show a small translucent button that opens the toolbar when clicked)
- enhancement progress bar

6
examples/basic.html
View file

@ -3,18 +3,14 @@
<head> <head>
<meta charset="utf8"> <meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Comic Book Reader</title> <title>Basic</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="comicbook/js/comicbook.min.js"></script> <script src="comicbook/js/comicbook.min.js"></script>
<link rel="stylesheet" href="comicbook/comicbook.css"> <link rel="stylesheet" href="comicbook/comicbook.css">
<link rel="shortcut icon" sizes="196x196" href="../icons/1_Desktop_icons/icon_196.png">
<link rel="apple-touch-icon" sizes="128x128" href="../icons/1_Desktop_icons/con_128.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="../icons/1_Desktop_icons/con_128.png">
</head> </head>
<body> <body>

7
examples/dev.html
View file

@ -3,26 +3,23 @@
<head> <head>
<meta charset="utf8"> <meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Comic Book Reader (Dev)</title> <title>Dev</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="../lib/vendor/pixastic/pixastic.js"></script> <script src="../lib/vendor/pixastic/pixastic.js"></script>
<script src="../lib/vendor/pixastic/pixastic.effects.js"></script> <script src="../lib/vendor/pixastic/pixastic.effects.js"></script>
<script src="../lib/vendor/pixastic/pixastic.worker.js"></script> <script src="../lib/vendor/pixastic/pixastic.worker.js"></script>
<script src="../lib/vendor/handlebars.runtime-1.0.rc.1.min.js"></script> <script src="../lib/vendor/handlebars.runtime-1.0.rc.1.min.js"></script>
<script src="../lib/vendor/quo.js"></script>
<script src="../lib/templates.js"></script> <script src="../lib/templates.js"></script>
<script src="../lib/ComicBook.js"></script> <script src="../lib/ComicBook.js"></script>
<link rel="stylesheet" href="../css/reset.css"> <link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../fonts/icomoon-toolbar/style.css"> <link rel="stylesheet" href="../fonts/icomoon-toolbar/style.css">
<link rel="stylesheet" href="../css/styles.css"> <link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/toolbar.css"> <link rel="stylesheet" href="../css/toolbar.css">
<link rel="shortcut icon" sizes="196x196" href="../icons/1_Desktop_icons/icon_196.png">
<link rel="apple-touch-icon" sizes="196x196" href="../icons/1_Desktop_icons/icon_196.png">
<link rel="apple-touch-icon-precomposed" sizes="196x196" href="../icons/1_Desktop_icons/icon_196.png">
</head> </head>
<body> <body>

6
examples/file.html
View file

@ -9,20 +9,16 @@
<head> <head>
<meta charset="utf8"> <meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Comic Book Reader</title> <title>App</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="bitjs/io.js"></script> <script src="bitjs/io.js"></script>
<script src="bitjs/archive.js"></script> <script src="bitjs/archive.js"></script>
<script src="comicbook/js/comicbook.min.js"></script> <script src="comicbook/js/comicbook.min.js"></script>
<link rel="stylesheet" href="comicbook/comicbook.css"> <link rel="stylesheet" href="comicbook/comicbook.css">
<link rel="shortcut icon" sizes="196x196" href="../icons/1_Desktop_icons/icon_196.png">
<link rel="apple-touch-icon" sizes="128x128" href="../icons/1_Desktop_icons/con_128.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="../icons/1_Desktop_icons/con_128.png">
<style> <style>
#filepicker { #filepicker {
margin: 10px; margin: 10px;

BIN
icons/1_Desktop_Icons/icon_016.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 646 B

BIN
icons/1_Desktop_Icons/icon_032.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
icons/1_Desktop_Icons/icon_048.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
icons/1_Desktop_Icons/icon_128.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.7 KiB

BIN
icons/1_Desktop_Icons/icon_196.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
icons/1_Desktop_Icons/icon_512.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
icons/2_Android_Icons/icon_036.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.1 KiB

BIN
icons/2_Android_Icons/icon_048.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
icons/2_Android_Icons/icon_072.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.3 KiB

BIN
icons/3_iPhone_Icons/icon_029.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
icons/3_iPhone_Icons/icon_048.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
icons/3_iPhone_Icons/icon_057.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.9 KiB

BIN
icons/3_iPhone_Icons/icon_072.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.3 KiB

BIN
icons/3_iPhone_Icons/icon_512.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

3
lib/.jshintrc
View file

@ -2,7 +2,8 @@
"predef": [ "predef": [
"jQuery", "jQuery",
"Handlebars", "Handlebars",
"Pixastic" "Pixastic",
"Quo"
], ],
"forin": true, "forin": true,
"noarg": true, "noarg": true,

50
lib/ComicBook.js
View file

@ -1,6 +1,31 @@
/* exported ComicBook */ /* exported ComicBook */
var ComicBook = (function ($) { /*
TODOs:
Fo sho:
- create onclose callback, show close button only if set
- fix progress bar css
- trigger preload if requesting valid but not loaded images (can happen if network was interupted)
- loading and generally hackiness of pointer is buggy, fix.
- check for html5 feature support where used: diveintohtml5.org/everything.html or www.modernizr.com
- full browser test - IE9 / FF3.6+ / Chrome / Safari / Opera
Nice 2 have:
- remove image inhancement lag when navigating by pre-applying enhancements to other pages
- jump to page?
- make page draggable with the cursor
- enable menu items via config, allow for custom items
- split out classes into seperate files
- thumbnail browser
- refactor so we are not using all these loose shared variables and other nastyness
- use custom event emitters instead of hacky code
- properly bind 'this' so we don't have to keep using 'self'
- allow toolbar to be hidden on mobile (maybe show a small translucent button that opens the toolbar when clicked)
- enhancement progress bar
*/
var ComicBook = (function ($, $$) {
'use strict'; 'use strict';
@ -67,9 +92,11 @@ var ComicBook = (function ($) {
this.isMobile = false; this.isMobile = false;
// mobile enhancements // mobile enhancements
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(navigator.userAgent)) { if (navigator.userAgent.match(/mobile/i)) {
this.isMobile = true; this.isMobile = true;
document.body.classList.add('mobile'); document.body.classList.add('mobile');
defaults.displayMode = 'single'; defaults.displayMode = 'single';
window.addEventListener('load', function () { window.addEventListener('load', function () {
@ -170,13 +197,11 @@ var ComicBook = (function ($) {
// add page controls // add page controls
window.addEventListener('keydown', self.navigation, false); window.addEventListener('keydown', self.navigation, false);
window.addEventListener('hashchange', checkHash, false); window.addEventListener('hashchange', checkHash, false);
$$('body').swipeLeft(self.navigation).swipeRight(self.navigation);
} }
window.addEventListener('touchstart', function (e) { window.addEventListener('touchstart', function (e) {
var $el = $(e.target); var $el = $(e.target);
if ($el.attr('id') === 'comic') {
self.toggleToolbar();
}
if ($el.data('toggle') === 'dropdown' ) { if ($el.data('toggle') === 'dropdown' ) {
$el.siblings('.dropdown').toggle(); $el.siblings('.dropdown').toggle();
} }
@ -821,12 +846,20 @@ var ComicBook = (function ($) {
} }
break; break;
case 'swipeLeft':
side = 'right';
break;
case 'swipeRight':
side = 'left';
break;
default: default:
throw ComicBookException.INVALID_NAVIGATION_EVENT + ' ' + e.type; throw ComicBookException.INVALID_NAVIGATION_EVENT + ' ' + e.type;
} }
if (side) { if (side) {
e.preventDefault();
e.stopPropagation(); e.stopPropagation();
// western style (left to right) // western style (left to right)
@ -834,6 +867,7 @@ var ComicBook = (function ($) {
if (side === 'left') { self.drawPrevPage(); } if (side === 'left') { self.drawPrevPage(); }
if (side === 'right') { self.drawNextPage(); } if (side === 'right') { self.drawNextPage(); }
} }
// manga style (right to left) // manga style (right to left)
else { else {
if (side === 'left') { self.drawNextPage(); } if (side === 'left') { self.drawNextPage(); }
@ -851,10 +885,6 @@ var ComicBook = (function ($) {
.find('.manga-' + !options.manga).hide(); .find('.manga-' + !options.manga).hide();
}; };
ComicBook.prototype.toggleToolbar = function () {
self.toggleControl('toolbar');
};
ComicBook.prototype.destroy = function () { ComicBook.prototype.destroy = function () {
$.each(this.controls, function (name, $control) { $.each(this.controls, function (name, $control) {
@ -876,4 +906,4 @@ var ComicBook = (function ($) {
return ComicBook; return ComicBook;
})(jQuery); })(jQuery, Quo);

1
lib/tests/index.html
View file

@ -13,6 +13,7 @@
<script src="../vendor/pixastic/pixastic.effects.js"></script> <script src="../vendor/pixastic/pixastic.effects.js"></script>
<script src="../vendor/pixastic/pixastic.worker.js"></script> <script src="../vendor/pixastic/pixastic.worker.js"></script>
<script src="../vendor/handlebars.runtime-1.0.rc.1.min.js"></script> <script src="../vendor/handlebars.runtime-1.0.rc.1.min.js"></script>
<script src="../vendor/quo.js"></script>
<script src="../templates.js"></script> <script src="../templates.js"></script>
<script src="../ComicBook.js"></script> <script src="../ComicBook.js"></script>

4
lib/vendor/quo.js vendored Executable file
View file

File diff suppressed because one or more lines are too long