From 226c0e92c2ded240b36a7f3d496b95cc1d408554 Mon Sep 17 00:00:00 2001 From: Bala Clark Date: Tue, 26 Nov 2013 23:47:23 +0100 Subject: [PATCH] very basic thumbnail browser. --- Makefile | 2 +- css/thumbnails.css | 21 +++++++++++++++++++++ examples/dev.html | 1 + lib/ComicBook.js | 31 +++++++++++++++++++++++++++++-- lib/tests/unit/ComicBook.js | 2 +- templates/thumbnails.handlebars | 2 ++ 6 files changed, 55 insertions(+), 4 deletions(-) create mode 100644 css/thumbnails.css create mode 100644 templates/thumbnails.handlebars diff --git a/Makefile b/Makefile index c23ee18..9e3ad5a 100755 --- a/Makefile +++ b/Makefile @@ -17,7 +17,7 @@ build: @cp lib/vendor/pixastic/license-mpl.txt comicbook/js/pixastic @./node_modules/.bin/uglifyjs -nc comicbook/js/comicbook.js > comicbook/js/comicbook.min.js @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..." @cp -r css/img comicbook/img @cp -r fonts/icomoon-toolbar/fonts comicbook diff --git a/css/thumbnails.css b/css/thumbnails.css new file mode 100644 index 0000000..217d22f --- /dev/null +++ b/css/thumbnails.css @@ -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; +} diff --git a/examples/dev.html b/examples/dev.html index 8d3168a..7607d52 100755 --- a/examples/dev.html +++ b/examples/dev.html @@ -19,6 +19,7 @@ + diff --git a/lib/ComicBook.js b/lib/ComicBook.js index 152b095..219c147 100755 --- a/lib/ComicBook.js +++ b/lib/ComicBook.js @@ -17,7 +17,6 @@ - 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' @@ -82,7 +81,8 @@ var ComicBook = (function ($) { keyboard: { next: 78, previous: 80, - toggleLayout: 76 + toggleLayout: 76, + thumbnails: 84 }, libPath: '/lib/', forward_buffer: 3 @@ -837,6 +837,11 @@ var ComicBook = (function ($) { if (e.keyCode === options.keyboard.toggleLayout) { self.toggleLayout(); } + + // display thumbnail browser + if (e.keyCode === options.keyboard.thumbnails) { + self.toggleThumbnails(); + } break; default: @@ -869,6 +874,28 @@ var ComicBook = (function ($) { .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 = $('').attr('href', '#' + i).append($img); + $img.attr('height', 150); + $link.on('click', function () { + self.hideControl('thumbnails'); + }); + $thumbnails.append($link); + }); + }; + ComicBook.prototype.destroy = function () { $.each(this.controls, function (name, $control) { diff --git a/lib/tests/unit/ComicBook.js b/lib/tests/unit/ComicBook.js index fc93ddd..85f7462 100644 --- a/lib/tests/unit/ComicBook.js +++ b/lib/tests/unit/ComicBook.js @@ -39,7 +39,7 @@ $(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 diff --git a/templates/thumbnails.handlebars b/templates/thumbnails.handlebars new file mode 100644 index 0000000..1e0991d --- /dev/null +++ b/templates/thumbnails.handlebars @@ -0,0 +1,2 @@ + +