deck.blank.js an extension to enable blanking of presentation slides
authorDaniel Knittl-Frank <[email protected]>
Sun, 26 Aug 2012 06:45:35 +0000 (26 08:45 +0200)
committerDaniel Knittl-Frank <[email protected]>
Sun, 26 Aug 2012 06:45:35 +0000 (26 08:45 +0200)
.gitignore [new file with mode: 0644]
README.md [new file with mode: 0644]
deck.blank.css [new file with mode: 0644]
deck.blank.js [new file with mode: 0644]

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..b25c15b
--- /dev/null
@@ -0,0 +1 @@
+*~
diff --git a/README.md b/README.md
new file mode 100644 (file)
index 0000000..018af63
--- /dev/null
+++ b/README.md
@@ -0,0 +1,7 @@
+deck.blank.js
+=============
+
+`deck.blank.js` is an extension for the *deck.js* presentation framework and enables users to blank the currently visible slide at the press of a button.
+This mimics behavior of several other popular presentation applications.
+
+Currently, users can make the presenation black by pressing `b` or `.`, and white by pressing `w`.
diff --git a/deck.blank.css b/deck.blank.css
new file mode 100644 (file)
index 0000000..dc73f27
--- /dev/null
@@ -0,0 +1,11 @@
+.deck-container.deck-blank * {
+       visibility:hidden;
+}
+
+.deck-container.deck-blank.deck-blank-black {
+       background-color:#000;
+}
+
+.deck-container.deck-blank.deck-blank-white {
+       background-color:#fff;
+}
diff --git a/deck.blank.js b/deck.blank.js
new file mode 100644 (file)
index 0000000..58663af
--- /dev/null
@@ -0,0 +1,71 @@
+/*!
+Deck JS - deck.blank
+Copyright (c) 2012 Daniel Knittl-Frank
+Dual licensed under the MIT license and GPL license.
+https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
+https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
+*/
+
+/*
+This module adds the methods and key binding to show a blank page instead of
+the slides in the deck.  The deck menu state is indicated by the presence of
+a class on the deck container.
+*/
+(function($, deck, undefined) {
+       var $d = $(document);
+
+       /*
+       Extends defaults/options.
+
+       options.classes.blank
+               These classes are added to the deck container when blanking the screen.
+
+       options.keys.black
+       options.keys.white
+               The numeric keycodes used to toggle between a blank screen and slides.
+       */
+       $.extend(true, $[deck].defaults, {
+               classes: {
+                       blank: 'deck-blank',
+                       black: 'deck-blank-black',
+                       white: 'deck-blank-white'
+               },
+
+               keys: {
+                       black: [66, 190], // b, .
+                       white: 87         // w
+               }
+       });
+
+       /*
+       jQuery.deck('toggleBlank', color)
+
+       Shows a blank page (either black or white), or unhides the slides,
+       if currently blanked.
+       */
+       $[deck]('extend', 'toggleBlank', function(color) {
+               var $c = $[deck]('getContainer'),
+               opts = $[deck]('getOptions');
+
+               if ($c.hasClass(opts.classes.blank))
+                       $c.removeClass([opts.classes.blank, opts.classes.black, opts.classes.white].join(' '));
+               else
+                       $c.addClass([opts.classes.blank, opts.classes[color]].join(' '));
+       });
+
+       $d.bind('deck.init', function() {
+               var opts = $[deck]('getOptions');
+
+               $d.unbind('keydown.deckblank').bind('keydown.deckblank', function(e) {
+                       if (e.which === opts.keys.black || $.inArray(e.which, opts.keys.black) > -1) {
+                               $[deck]('toggleBlank', 'black');
+                               e.preventDefault();
+                       } else if (e.which === opts.keys.white || $.inArray(e.which, opts.keys.white) > -1) {
+                               $[deck]('toggleBlank', 'white');
+                               e.preventDefault();
+                       }
+               });
+
+       });
+})(jQuery, 'deck');
+