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

manga mode toolbar button

Browse source
This commit is contained in:
Bala Clark 2013-08-19 23:09:31 +02:00
parent e83dd1e875
commit 57e67301eb
3 changed files with 16 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
lib/ComicBook.js
View file

@ -239,6 +239,10 @@ var ComicBook = (function ($) {
}); });
this.controls = controls; this.controls = controls;
this.getControl('toolbar')
.find('.manga-' + options.manga).show().end()
.find('.manga-' + !options.manga).hide();
}; };
ComicBook.prototype.getControl = function (control) { ComicBook.prototype.getControl = function (control) {
@ -835,6 +839,13 @@ var ComicBook = (function ($) {
} }
}; };
ComicBook.prototype.toggleReadingMode = function () {
options.manga = !options.manga;
self.getControl('toolbar')
.find('.manga-' + options.manga).show().end()
.find('.manga-' + !options.manga).hide();
};
ComicBook.prototype.destroy = function () { ComicBook.prototype.destroy = function () {
$.each(this.controls, function (name, $control) { $.each(this.controls, function (name, $control) {

2
lib/templates.js
View file

@ -38,6 +38,6 @@ helpers = helpers || Handlebars.helpers; data = data || {};
return "\n<div class=\"toolbar\">\n\n <ul class=\"pull-left\">\n <li class=\"close\">\n <button data-trigger=\"click\" data-action=\"close\" title=\"close\" class=\"icon-remove-sign\"></button>\n </li>\n <li class=\"close separator\"></li>\n <li>\n <button title=\"image settings\" class=\"icon-settings\" data-toggle=\"dropdown\"></button>\n <div class=\"dropdown\">\n <form name=\"image-enhancements\" data-trigger=\"reset\" data-action=\"resetEnhancements\">\n <div class=\"sliders\">\n <div class=\"control-group\">\n <label title=\"adjust brightness\" class=\"icon-sun\"></label>\n <input data-trigger=\"change\" data-action=\"brightness\" type=\"range\" min=\"-100\" max=\"100\" step=\"1\" value=\"0\">\n </div>\n <div class=\"control-group\">\n <label title=\"adjust contrast\" class=\"icon-adjust\"></label>\n <input data-trigger=\"change\" data-action=\"contrast\" type=\"range\" min=\"-1\" max=\"1\" step=\"0.1\" value=\"0\">\n </div>\n <div class=\"control-group\">\n <label title=\"sharpen\" class=\"icon-droplet\"></label>\n <input data-trigger=\"change\" data-action=\"sharpen\" type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0\">\n </div>\n </div>\n <div class=\"control-group pull-left\">\n <input id=\"image-desaturate\" type=\"checkbox\" data-trigger=\"change\" data-action=\"desaturate\">\n <label for=\"image-desaturate\">desaturate</label>\n </div>\n <div class=\"control-group pull-right\">\n <input type=\"reset\" value=\"reset\">\n </div>\n </form>\n </div>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"toggleLayout\" title=\"toggle one/two pages at a time\" class=\"icon-file\"></button>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"zoomOut\" title=\"zoom out\" class=\"icon-zoom-out\"></button>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"zoomIn\" title=\"zoom in\" class=\"icon-zoom-in\"></button>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"fitWidth\" title=\"fit page to window width\" class=\"icon-expand\"></button>\n </li>\n </ul>\n\n <ul class=\"pull-right\">\n <li><span id=\"current-page\"></span> / <span id=\"page-count\"></span></li>\n </ul>\n\n</div>\n"; return "\n<div class=\"toolbar\">\n\n <ul class=\"pull-left\">\n <li class=\"close\">\n <button data-trigger=\"click\" data-action=\"close\" title=\"close\" class=\"icon-remove-sign\"></button>\n </li>\n <li class=\"close separator\"></li>\n <li>\n <button title=\"image settings\" class=\"icon-settings\" data-toggle=\"dropdown\"></button>\n <div class=\"dropdown\">\n <form name=\"image-enhancements\" data-trigger=\"reset\" data-action=\"resetEnhancements\">\n <div class=\"sliders\">\n <div class=\"control-group\">\n <label title=\"adjust brightness\" class=\"icon-sun\"></label>\n <input data-trigger=\"change\" data-action=\"brightness\" type=\"range\" min=\"-100\" max=\"100\" step=\"1\" value=\"0\">\n </div>\n <div class=\"control-group\">\n <label title=\"adjust contrast\" class=\"icon-adjust\"></label>\n <input data-trigger=\"change\" data-action=\"contrast\" type=\"range\" min=\"-1\" max=\"1\" step=\"0.1\" value=\"0\">\n </div>\n <div class=\"control-group\">\n <label title=\"sharpen\" class=\"icon-droplet\"></label>\n <input data-trigger=\"change\" data-action=\"sharpen\" type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0\">\n </div>\n </div>\n <div class=\"control-group pull-left\">\n <input id=\"image-desaturate\" type=\"checkbox\" data-trigger=\"change\" data-action=\"desaturate\">\n <label for=\"image-desaturate\">desaturate</label>\n </div>\n <div class=\"control-group pull-right\">\n <input type=\"reset\" value=\"reset\">\n </div>\n </form>\n </div>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"toggleLayout\" title=\"toggle one/two pages at a time\" class=\"icon-file\"></button>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"zoomOut\" title=\"zoom out\" class=\"icon-zoom-out\"></button>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"zoomIn\" title=\"zoom in\" class=\"icon-zoom-in\"></button>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"fitWidth\" title=\"fit page to window width\" class=\"icon-expand\"></button>\n </li>\n <li>\n <button data-trigger=\"click\" data-action=\"toggleReadingMode\" title=\"enable manga mode\" class=\"icon-arrow-right-3 manga-false\"></button>\n <button data-trigger=\"click\" data-action=\"toggleReadingMode\" title=\"disable manga mode\" class=\"icon-arrow-left-3 manga-true\"></button>\n </li>\n </ul>\n\n <ul class=\"pull-right\">\n <li><span id=\"current-page\"></span> / <span id=\"page-count\"></span></li>\n </ul>\n\n</div>\n";
}); });
})(); })();

4
templates/toolbar.handlebars
View file

@ -46,6 +46,10 @@
<li> <li>
<button data-trigger="click" data-action="fitWidth" title="fit page to window width" class="icon-expand"></button> <button data-trigger="click" data-action="fitWidth" title="fit page to window width" class="icon-expand"></button>
</li> </li>
<li>
<button data-trigger="click" data-action="toggleReadingMode" title="switch reading direction" class="icon-arrow-right-3 manga-false"></button>
<button data-trigger="click" data-action="toggleReadingMode" title="switch reading direction" class="icon-arrow-left-3 manga-true"></button>
</li>
</ul> </ul>
<ul class="pull-right"> <ul class="pull-right">