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

very basic thumbnail browser.

Browse source
This commit is contained in:
Bala Clark 2013-11-26 23:47:23 +01:00
parent b820fa4c3e
commit 226c0e92c2
6 changed files with 55 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Makefile
View file

@ -17,7 +17,7 @@ build:
@cp lib/vendor/pixastic/license-mpl.txt comicbook/js/pixastic @cp lib/vendor/pixastic/license-mpl.txt comicbook/js/pixastic
@./node_modules/.bin/uglifyjs -nc comicbook/js/comicbook.js > comicbook/js/comicbook.min.js @./node_modules/.bin/uglifyjs -nc comicbook/js/comicbook.js > comicbook/js/comicbook.min.js
@echo "Compiling CSS..." @echo "Compiling CSS..."
@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 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 fonts/icomoon-toolbar/fonts comicbook @cp -r fonts/icomoon-toolbar/fonts comicbook

21
css/thumbnails.css Normal file
View file

@ -0,0 +1,21 @@
.thumbnails {
position: absolute;
color: white;
background-color: black;
background-image: linear-gradient(to bottom, rgb(80, 80, 80), rgb(17, 17, 17));
padding: 0.5em;
border-radius: 0.2em;
margin: 5em;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: none;
overflow: auto;
}
.thumbnails img {
display: inline-block;
margin: 0.5em;
}

1
examples/dev.html
View file

@ -19,6 +19,7 @@
<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="stylesheet" href="../css/thumbnails.css">
</head> </head>
<body> <body>

31
lib/ComicBook.js
View file

@ -17,7 +17,6 @@
- make page draggable with the cursor - make page draggable with the cursor
- enable menu items via config, allow for custom items - enable menu items via config, allow for custom items
- split out classes into seperate files - split out classes into seperate files
- thumbnail browser
- refactor so we are not using all these loose shared variables and other nastyness - refactor so we are not using all these loose shared variables and other nastyness
- use custom event emitters instead of hacky code - use custom event emitters instead of hacky code
- properly bind 'this' so we don't have to keep using 'self' - properly bind 'this' so we don't have to keep using 'self'
@ -82,7 +81,8 @@ var ComicBook = (function ($) {
keyboard: { keyboard: {
next: 78, next: 78,
previous: 80, previous: 80,
toggleLayout: 76 toggleLayout: 76,
thumbnails: 84
}, },
libPath: '/lib/', libPath: '/lib/',
forward_buffer: 3 forward_buffer: 3
@ -837,6 +837,11 @@ var ComicBook = (function ($) {
if (e.keyCode === options.keyboard.toggleLayout) { if (e.keyCode === options.keyboard.toggleLayout) {
self.toggleLayout(); self.toggleLayout();
} }
// display thumbnail browser
if (e.keyCode === options.keyboard.thumbnails) {
self.toggleThumbnails();
}
break; break;
default: default:
@ -869,6 +874,28 @@ var ComicBook = (function ($) {
.find('.manga-' + !options.manga).hide(); .find('.manga-' + !options.manga).hide();
}; };
ComicBook.prototype.toggleThumbnails = function () {
// TODO: show page numbers
// TODO: in double page mode merge both pages into a single link
// TODO: only load thumbnails when they are in view
// TODO: keyboard navigation (left / right / up / down / enter)
// TODO: highlight currently selected thumbnail
// TODO: focus on current page
// TODO: toolbar button
var $thumbnails = self.getControl('thumbnails');
$thumbnails.html('');
self.toggleControl('thumbnails');
$.each(pages, function (i, img) {
var $img = $(img).clone();
var $link = $('<a>').attr('href', '#' + i).append($img);
$img.attr('height', 150);
$link.on('click', function () {
self.hideControl('thumbnails');
});
$thumbnails.append($link);
});
};
ComicBook.prototype.destroy = function () { ComicBook.prototype.destroy = function () {
$.each(this.controls, function (name, $control) { $.each(this.controls, function (name, $control) {

2
lib/tests/unit/ComicBook.js
View file

@ -39,7 +39,7 @@ $(function () {
}); });
test('all controls should be rendered', function () { test('all controls should be rendered', function () {
equal($('.cb-control, .toolbar').length, 5, 'All toolbar elements should have rendered after book.draw'); equal($('.cb-control, .toolbar').length, 6, 'All toolbar elements should have rendered after book.draw');
}); });
// navigate on keyboard // navigate on keyboard

2
templates/thumbnails.handlebars Normal file
View file

@ -0,0 +1,2 @@
<div class="cb-control thumbnails"></div>