Permalink
Browse files

added separate toolbar button for double page mode

  • Loading branch information...
balaclark committed Aug 19, 2013
1 parent 4db6ff3 commit 280bb3070c8ace02018907d69a69ca31bd1aa64e
View
0 fonts/icomoon-toolbar/Read Me.txt 100755 → 100644
No changes.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
Binary file not shown.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
Binary file not shown.
View
Binary file not shown.
View
8 fonts/icomoon-toolbar/index.html 100755 → 100644
@@ -204,6 +204,10 @@ <h1>Your font contains the following glyphs</h1>
<div class="fs1" aria-hidden="true" data-icon="&#xf00d;"></div>
<input type="text" readonly="readonly" value="&amp;#xf00d;" />
</div>
+ <div class="glyph">
+ <div class="fs1" aria-hidden="true" data-icon="&#xe037;"></div>
+ <input type="text" readonly="readonly" value="&amp;#xe037;" />
+ </div>
</section>
<div class="clear"></div>
<section class="mtm clearfix" id="glyphs">
@@ -326,6 +330,10 @@ <h1>Class Names</h1>
<span aria-hidden="true" class="icon-remove"></span>
&nbsp;icon-remove
</span>
+ <span class="box1">
+ <span aria-hidden="true" class="icon-copy"></span>
+ &nbsp;icon-copy
+ </span>
</section>
<footer>
<p>Generated by <a href="http://icomoon.io">IcoMoon.io</a></p>
View
7 fonts/icomoon-toolbar/license.txt 100755 → 100644
@@ -1,8 +1,5 @@
-Icon Set: Entypo -- http://www.entypo.com/
-License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/
-
-
-Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
+Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/
+License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/
View
3 fonts/icomoon-toolbar/lte-ie7.js 100755 → 100644
@@ -34,7 +34,8 @@ window.onload = function() {
'icon-adjust' : '&#xf042;',
'icon-sun' : '&#xe018;',
'icon-remove-sign' : '&#xf057;',
- 'icon-remove' : '&#xf00d;'
+ 'icon-remove' : '&#xf00d;',
+ 'icon-copy' : '&#xe037;'
},
els = document.getElementsByTagName('*'),
i, attr, html, c, el;
View
5 fonts/icomoon-toolbar/style.css 100755 → 100644
@@ -27,7 +27,7 @@ Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
-.icon-file, .icon-image, .icon-zoom-out, .icon-zoom-in, .icon-expand, .icon-expand-2, .icon-folder-open, .icon-folder, .icon-cog, .icon-menu, .icon-wrench, .icon-settings, .icon-loop, .icon-pin, .icon-first, .icon-last, .icon-arrow-left, .icon-arrow-right, .icon-arrow-left-2, .icon-arrow-right-2, .icon-arrow-left-3, .icon-arrow-right-3, .icon-previous, .icon-next, .icon-droplet, .icon-adjust, .icon-sun, .icon-remove-sign, .icon-remove {
+.icon-file, .icon-image, .icon-zoom-out, .icon-zoom-in, .icon-expand, .icon-expand-2, .icon-folder-open, .icon-folder, .icon-cog, .icon-menu, .icon-wrench, .icon-settings, .icon-loop, .icon-pin, .icon-first, .icon-last, .icon-arrow-left, .icon-arrow-right, .icon-arrow-left-2, .icon-arrow-right-2, .icon-arrow-left-3, .icon-arrow-right-3, .icon-previous, .icon-next, .icon-droplet, .icon-adjust, .icon-sun, .icon-remove-sign, .icon-remove, .icon-copy {
font-family: 'toolbar';
speak: none;
font-style: normal;
@@ -124,3 +124,6 @@ you can use the generic selector below, but it's slower:
.icon-remove:before {
content: "\f00d";
}
+.icon-copy:before {
+ content: "\e037";
+}
View
@@ -210,7 +210,7 @@ var ComicBook = (function ($) {
*/
ComicBook.prototype.renderControls = function () {
- var controls = {};
+ var controls = {}, $toolbar;
$.each(Handlebars.templates, function (name, template) {
@@ -240,9 +240,12 @@ var ComicBook = (function ($) {
this.controls = controls;
- this.getControl('toolbar')
+ $toolbar = this.getControl('toolbar');
+ $toolbar
.find('.manga-' + options.manga).show().end()
- .find('.manga-' + !options.manga).hide();
+ .find('.manga-' + !options.manga).hide().end()
+ .find('.layout').hide().end().find('.layout-' + options.displayMode).show();
+
};
ComicBook.prototype.getControl = function (control) {
@@ -266,14 +269,13 @@ var ComicBook = (function ($) {
ComicBook.prototype.toggleLayout = function() {
- var $control = self.getControl('toolbar').find('[data-action=toggleLayout]');
+ var $toolbar = self.getControl('toolbar');
var displayMode = (options.displayMode === 'single') ? 'double' : 'single';
- $control.removeClass(options.displayMode);
- $control.addClass(displayMode);
-
options.displayMode = displayMode;
+ $toolbar.find('.layout').hide().end().find('.layout-' + options.displayMode).show();
+
self.drawPage();
};
View
@@ -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 <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";
+ 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 layout layout-single\"></button>\n <button data-trigger=\"click\" data-action=\"toggleLayout\" title=\"toggle one/two pages at a time\" class=\"icon-copy layout layout-double\"></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=\"switch reading direction\" class=\"icon-arrow-right-3 manga-false\"></button>\n <button data-trigger=\"click\" data-action=\"toggleReadingMode\" title=\"switch reading direction\" 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";
});
})();
@@ -35,7 +35,8 @@
</div>
</li>
<li>
- <button data-trigger="click" data-action="toggleLayout" title="toggle one/two pages at a time" class="icon-file"></button>
+ <button data-trigger="click" data-action="toggleLayout" title="toggle one/two pages at a time" class="icon-file layout layout-single"></button>
+ <button data-trigger="click" data-action="toggleLayout" title="toggle one/two pages at a time" class="icon-copy layout layout-double"></button>
</li>
<li>
<button data-trigger="click" data-action="zoomOut" title="zoom out" class="icon-zoom-out"></button>

0 comments on commit 280bb30

Please sign in to comment.