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

Merge branch 'master' into thumbs

Browse source 
Conflicts:
	examples/dev.html
	lib/ComicBook.js
This commit is contained in:
Bala Clark 2013-12-04 23:48:17 +01:00
commit 50e84662d9
20 changed files with 46 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Makefile
View file

@ -20,6 +20,8 @@ build:
@cat fonts/icomoon-toolbar/style.css css/reset.css css/styles.css css/toolbar.css css/thumbnails.css > comicbook/comicbook.css @cat fonts/icomoon-toolbar/style.css css/reset.css css/styles.css css/toolbar.css css/thumbnails.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 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> <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>Basic</title> <title>Comic Book Reader</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>

6
examples/dev.html
View file

@ -3,10 +3,11 @@
<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>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="//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>
@ -20,6 +21,9 @@
<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="stylesheet" href="../css/thumbnails.css"> <link rel="stylesheet" href="../css/thumbnails.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,16 +9,20 @@
<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>App</title> <title>Comic Book Reader</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 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

33
lib/ComicBook.js
View file

@ -1,29 +1,5 @@
/* exported ComicBook */ /* 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
- 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'; 'use strict';
@ -91,7 +67,7 @@ var ComicBook = (function ($) {
this.isMobile = false; this.isMobile = false;
// mobile enhancements // 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; this.isMobile = true;
document.body.classList.add('mobile'); document.body.classList.add('mobile');
defaults.displayMode = 'single'; defaults.displayMode = 'single';
@ -198,6 +174,9 @@ var ComicBook = (function ($) {
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();
} }
@ -896,6 +875,10 @@ var ComicBook = (function ($) {
}); });
}; };
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) {