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

Compare commits

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

4 commits
touch ... master

Author SHA1 Message Date
Bala Clark
e6866964bd allow toolbar to be toggled in mobile devices 2013-12-04 23:11:18 +01:00
Bala Clark
e1491a7e6f improved (& still hacky) mobile detection 2013-12-04 22:35:27 +01:00
Bala Clark
abe97094e8 moved todos into their own file 2013-12-04 22:21:49 +01:00
Bala Clark
5987eb3b78 support web app mode in chrome, added temporary icons 2013-12-04 22:13:00 +01:00
23 changed files with 50 additions and 52 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
@echo "Compiling and minifying javascript..."
@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/vendor/quo.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/templates.js lib/ComicBook.js > comicbook/js/comicbook.js
@cp lib/vendor/pixastic/pixastic.js comicbook/js/pixastic
@cp lib/vendor/pixastic/pixastic.effects.js comicbook/js/pixastic
@cp lib/vendor/pixastic/pixastic.worker.js comicbook/js/pixastic
@ -22,6 +22,8 @@ build:
@cat fonts/icomoon-toolbar/style.css css/reset.css css/styles.css css/toolbar.css > comicbook/comicbook.css
@echo "Copying assets..."
@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/license.txt comicbook/fonts
@echo "Updating examples"

21
TODO Normal file
View file

@ -0,0 +1,21 @@
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,14 +3,18 @@
<head>
<meta charset="utf8">
<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-status-bar-style" content="black">
<title>Basic</title>
<title>Comic Book Reader</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="comicbook/js/comicbook.min.js"></script>
<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>
<body>

7
examples/dev.html
View file

@ -3,23 +3,26 @@
<head>
<meta charset="utf8">
<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-status-bar-style" content="black">
<title>Dev</title>
<title>Comic Book Reader (Dev)</title>
<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.effects.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/quo.js"></script>
<script src="../lib/templates.js"></script>
<script src="../lib/ComicBook.js"></script>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../fonts/icomoon-toolbar/style.css">
<link rel="stylesheet" href="../css/styles.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>
<body>

6
examples/file.html
View file

@ -9,16 +9,20 @@
<head>
<meta charset="utf8">
<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-status-bar-style" content="black">
<title>App</title>
<title>Comic Book Reader</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="bitjs/io.js"></script>
<script src="bitjs/archive.js"></script>
<script src="comicbook/js/comicbook.min.js"></script>
<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>
#filepicker {
margin: 10px;

BIN
icons/1_Desktop_Icons/icon_016.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 646 B

BIN
icons/1_Desktop_Icons/icon_032.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
icons/1_Desktop_Icons/icon_048.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
icons/1_Desktop_Icons/icon_128.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
icons/1_Desktop_Icons/icon_196.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
icons/1_Desktop_Icons/icon_512.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
icons/2_Android_Icons/icon_036.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
icons/2_Android_Icons/icon_048.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
icons/2_Android_Icons/icon_072.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
icons/3_iPhone_Icons/icon_029.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
icons/3_iPhone_Icons/icon_048.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
icons/3_iPhone_Icons/icon_057.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
icons/3_iPhone_Icons/icon_072.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
icons/3_iPhone_Icons/icon_512.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

3
lib/.jshintrc
View file

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

50
lib/ComicBook.js
View file

@ -1,31 +1,6 @@
/* exported ComicBook */
/*
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 ($, $$) {
var ComicBook = (function ($) {
'use strict';
@ -92,11 +67,9 @@ var ComicBook = (function ($, $$) {
this.isMobile = false;
// mobile enhancements
if (navigator.userAgent.match(/mobile/i)) {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(navigator.userAgent)) {
this.isMobile = true;
document.body.classList.add('mobile');
defaults.displayMode = 'single';
window.addEventListener('load', function () {
@ -197,11 +170,13 @@ var ComicBook = (function ($, $$) {
// add page controls
window.addEventListener('keydown', self.navigation, false);
window.addEventListener('hashchange', checkHash, false);
$$('body').swipeLeft(self.navigation).swipeRight(self.navigation);
}
window.addEventListener('touchstart', function (e) {
var $el = $(e.target);
if ($el.attr('id') === 'comic') {
self.toggleToolbar();
}
if ($el.data('toggle') === 'dropdown' ) {
$el.siblings('.dropdown').toggle();
}
@ -846,20 +821,12 @@ var ComicBook = (function ($, $$) {
}
break;
case 'swipeLeft':
side = 'right';
break;
case 'swipeRight':
side = 'left';
break;
default:
throw ComicBookException.INVALID_NAVIGATION_EVENT + ' ' + e.type;
}
if (side) {
e.preventDefault();
e.stopPropagation();
// western style (left to right)
@ -867,7 +834,6 @@ var ComicBook = (function ($, $$) {
if (side === 'left') { self.drawPrevPage(); }
if (side === 'right') { self.drawNextPage(); }
}
// manga style (right to left)
else {
if (side === 'left') { self.drawNextPage(); }
@ -885,6 +851,10 @@ var ComicBook = (function ($, $$) {
.find('.manga-' + !options.manga).hide();
};
ComicBook.prototype.toggleToolbar = function () {
self.toggleControl('toolbar');
};
ComicBook.prototype.destroy = function () {
$.each(this.controls, function (name, $control) {
@ -906,4 +876,4 @@ var ComicBook = (function ($, $$) {
return ComicBook;
})(jQuery, Quo);
})(jQuery);

1
lib/tests/index.html
View file

@ -13,7 +13,6 @@
<script src="../vendor/pixastic/pixastic.effects.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/quo.js"></script>
<script src="../templates.js"></script>
<script src="../ComicBook.js"></script>

4
lib/vendor/quo.js vendored
View file

File diff suppressed because one or more lines are too long