Skip to content
Browse files

Slides of inside-javascript-objects talk at jsFoo Bangalore.

  • Loading branch information...
1 parent 57c8750 commit 194dc45ac411794570589712d21820c06dcd7594 @anandology committed Oct 12, 2011
Showing with 4,452 additions and 0 deletions.
  1. +8 −0 presentations/jsfoo-bangalore/inside-javascript-objects/Readme.md
  2. +393 −0 presentations/jsfoo-bangalore/inside-javascript-objects/core/deck.core.css
  3. +39 −0 presentations/jsfoo-bangalore/inside-javascript-objects/core/deck.core.html
  4. +457 −0 presentations/jsfoo-bangalore/inside-javascript-objects/core/deck.core.js
  5. +431 −0 presentations/jsfoo-bangalore/inside-javascript-objects/core/deck.core.scss
  6. +41 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/goto/deck.goto.css
  7. +6 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/goto/deck.goto.html
  8. +118 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/goto/deck.goto.js
  9. +46 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/goto/deck.goto.scss
  10. +13 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/hash/deck.hash.css
  11. +2 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/hash/deck.hash.html
  12. +113 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/hash/deck.hash.js
  13. +15 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/hash/deck.hash.scss
  14. +24 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/menu/deck.menu.css
  15. +127 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/menu/deck.menu.js
  16. +29 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/menu/deck.menu.scss
  17. +43 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/navigation/deck.navigation.css
  18. +3 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/navigation/deck.navigation.html
  19. +83 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/navigation/deck.navigation.js
  20. +56 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/navigation/deck.navigation.scss
  21. +16 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/scale/deck.scale.css
  22. +155 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/scale/deck.scale.js
  23. +17 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/scale/deck.scale.scss
  24. +14 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/status/deck.status.css
  25. +6 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/status/deck.status.html
  26. +42 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/status/deck.status.js
  27. +16 −0 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/status/deck.status.scss
  28. +811 −0 presentations/jsfoo-bangalore/inside-javascript-objects/index.html
  29. +4 −0 presentations/jsfoo-bangalore/inside-javascript-objects/jquery-1.6.4.min.js
  30. +4 −0 presentations/jsfoo-bangalore/inside-javascript-objects/modernizr.custom.js
  31. +114 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/style/neon.css
  32. +139 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/style/neon.scss
  33. +75 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/style/swiss.css
  34. +91 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/style/swiss.scss
  35. +187 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/style/web-2.0.css
  36. +214 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/style/web-2.0.scss
  37. +44 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/transition/fade.css
  38. +70 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/transition/fade.scss
  39. +79 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/transition/horizontal-slide.css
  40. +94 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/transition/horizontal-slide.scss
  41. +97 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/transition/vertical-slide.css
  42. +116 −0 presentations/jsfoo-bangalore/inside-javascript-objects/themes/transition/vertical-slide.scss
View
8 presentations/jsfoo-bangalore/inside-javascript-objects/Readme.md
@@ -0,0 +1,8 @@
+
+Slides of [Inside Javascript Objects][talk] talk at [jsFoo][]
+
+Built using [deck.js][].
+
+[talk]: http://funnel.hasgeek.com/jsFoo/
+[jsFoo]: http://jsfoo.hasgeek.com/
+[deck.js]: http://imakewebthings.github.com/deck.js
View
393 presentations/jsfoo-bangalore/inside-javascript-objects/core/deck.core.css
@@ -0,0 +1,393 @@
+html {
+ height: 100%;
+}
+
+.deck-container {
+ position: relative;
+ height: 100%;
+ width: 70%;
+ margin: 0 auto;
+ padding: 0 48px;
+ font-size: 16px;
+ line-height: 1.25;
+ overflow: hidden;
+ /* Resets and base styles from HTML5 Boilerplate */
+ /* End HTML5 Boilerplate adaptations */
+}
+.js .deck-container {
+ visibility: hidden;
+}
+.ready .deck-container {
+ visibility: visible;
+}
+.touch .deck-container {
+ -webkit-text-size-adjust: none;
+}
+.deck-container div, .deck-container span, .deck-container object, .deck-container iframe,
+.deck-container h1, .deck-container h2, .deck-container h3, .deck-container h4, .deck-container h5, .deck-container h6, .deck-container p, .deck-container blockquote, .deck-container pre,
+.deck-container abbr, .deck-container address, .deck-container cite, .deck-container code, .deck-container del, .deck-container dfn, .deck-container em, .deck-container img, .deck-container ins, .deck-container kbd, .deck-container q, .deck-container samp,
+.deck-container small, .deck-container strong, .deck-container sub, .deck-container sup, .deck-container var, .deck-container b, .deck-container i, .deck-container dl, .deck-container dt, .deck-container dd, .deck-container ol, .deck-container ul, .deck-container li,
+.deck-container fieldset, .deck-container form, .deck-container label, .deck-container legend,
+.deck-container table, .deck-container caption, .deck-container tbody, .deck-container tfoot, .deck-container thead, .deck-container tr, .deck-container th, .deck-container td,
+.deck-container article, .deck-container aside, .deck-container canvas, .deck-container details, .deck-container figcaption, .deck-container figure,
+.deck-container footer, .deck-container header, .deck-container hgroup, .deck-container menu, .deck-container nav, .deck-container section, .deck-container summary,
+.deck-container time, .deck-container mark, .deck-container audio, .deck-container video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+.deck-container article, .deck-container aside, .deck-container details, .deck-container figcaption, .deck-container figure,
+.deck-container footer, .deck-container header, .deck-container hgroup, .deck-container menu, .deck-container nav, .deck-container section {
+ display: block;
+}
+.deck-container blockquote, .deck-container q {
+ quotes: none;
+}
+.deck-container blockquote:before, .deck-container blockquote:after, .deck-container q:before, .deck-container q:after {
+ content: "";
+ content: none;
+}
+.deck-container ins {
+ background-color: #ff9;
+ color: #000;
+ text-decoration: none;
+}
+.deck-container mark {
+ background-color: #ff9;
+ color: #000;
+ font-style: italic;
+ font-weight: bold;
+}
+.deck-container del {
+ text-decoration: line-through;
+}
+.deck-container abbr[title], .deck-container dfn[title] {
+ border-bottom: 1px dotted;
+ cursor: help;
+}
+.deck-container table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+.deck-container hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+.deck-container input, .deck-container select {
+ vertical-align: middle;
+}
+.deck-container select, .deck-container input, .deck-container textarea, .deck-container button {
+ font: 99% sans-serif;
+}
+.deck-container pre, .deck-container code, .deck-container kbd, .deck-container samp {
+ font-family: monospace, sans-serif;
+}
+.deck-container a {
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.deck-container a:hover, .deck-container a:active {
+ outline: none;
+}
+.deck-container ul, .deck-container ol {
+ margin-left: 2em;
+ vertical-align: top;
+}
+.deck-container ol {
+ list-style-type: decimal;
+}
+.deck-container nav ul, .deck-container nav li {
+ margin: 0;
+ list-style: none;
+ list-style-image: none;
+}
+.deck-container small {
+ font-size: 85%;
+}
+.deck-container strong, .deck-container th {
+ font-weight: bold;
+}
+.deck-container td {
+ vertical-align: top;
+}
+.deck-container sub, .deck-container sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+}
+.deck-container sup {
+ top: -0.5em;
+}
+.deck-container sub {
+ bottom: -0.25em;
+}
+.deck-container textarea {
+ overflow: auto;
+}
+.ie6 .deck-container legend, .ie7 .deck-container legend {
+ margin-left: -7px;
+}
+.deck-container input[type="radio"] {
+ vertical-align: text-bottom;
+}
+.deck-container input[type="checkbox"] {
+ vertical-align: bottom;
+}
+.deck-container .ie7 input[type="checkbox"] {
+ vertical-align: baseline;
+}
+.deck-container .ie6 input {
+ vertical-align: text-bottom;
+}
+.deck-container label, .deck-container input[type="button"], .deck-container input[type="submit"], .deck-container input[type="image"], .deck-container button {
+ cursor: pointer;
+}
+.deck-container button, .deck-container input, .deck-container select, .deck-container textarea {
+ margin: 0;
+}
+.deck-container input:invalid, .deck-container textarea:invalid {
+ border-radius: 1px;
+ -moz-box-shadow: 0px 0px 5px red;
+ -webkit-box-shadow: 0px 0px 5px red;
+ box-shadow: 0px 0px 5px red;
+}
+.deck-container input:invalid .no-boxshadow, .deck-container textarea:invalid .no-boxshadow {
+ background-color: #f0dddd;
+}
+.deck-container button {
+ width: auto;
+ overflow: visible;
+}
+.ie7 .deck-container img {
+ -ms-interpolation-mode: bicubic;
+}
+.deck-container, .deck-container select, .deck-container input, .deck-container textarea {
+ color: #444;
+}
+.deck-container a {
+ color: #607890;
+}
+.deck-container a:hover, .deck-container a:focus {
+ color: #036;
+}
+.deck-container a:link {
+ -webkit-tap-highlight-color: #fff;
+}
+.deck-container h1 {
+ font-size: 4.5em;
+ font-weight: bold;
+ text-align: center;
+ padding-top: 1em;
+}
+.csstransforms .deck-container h1 {
+ padding: 0 48px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 50%;
+ -webkit-transform: translate3d(0, -50%, 0);
+ -moz-transform: translate(0, -50%);
+ -ms-transform: translate(0, -50%);
+ -o-transform: translate(0, -50%);
+ transform: translate3d(0, -50%, 0);
+}
+.deck-container h2 {
+ font-size: 2.25em;
+ font-weight: bold;
+ padding-top: .5em;
+ margin: 0 0 .66666em 0;
+ border-bottom: 3px solid #888;
+}
+.deck-container h3 {
+ font-size: 1.4375em;
+ font-weight: bold;
+ margin-bottom: .30435em;
+}
+.deck-container h4 {
+ font-size: 1.25em;
+ font-weight: bold;
+ margin-bottom: .25em;
+}
+.deck-container h5 {
+ font-size: 1.125em;
+ font-weight: bold;
+ margin-bottom: .2222em;
+}
+.deck-container h6 {
+ font-size: 1em;
+ font-weight: bold;
+}
+.deck-container img, .deck-container iframe, .deck-container video {
+ display: block;
+ max-width: 100%;
+}
+.deck-container video, .deck-container iframe, .deck-container img {
+ display: block;
+ margin: 0 auto;
+}
+.deck-container p, .deck-container blockquote, .deck-container iframe, .deck-container img, .deck-container ul, .deck-container ol, .deck-container pre, .deck-container video {
+ margin-bottom: 1em;
+}
+.deck-container pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ padding: 1em;
+ border: 1px solid #888;
+}
+.deck-container em {
+ font-style: italic;
+}
+.deck-container li {
+ padding: .25em 0;
+ vertical-align: middle;
+}
+.deck-container.deck-loading {
+ display: none;
+}
+
+.slide {
+ width: auto;
+ min-height: 100%;
+ position: relative;
+}
+
+.deck-before, .deck-previous, .deck-next, .deck-after {
+ position: absolute;
+ left: -999em;
+ top: -999em;
+}
+
+.deck-current {
+ z-index: 2;
+}
+
+.slide .slide {
+ visibility: hidden;
+ position: static;
+ min-height: 0;
+}
+
+.deck-child-current {
+ position: static;
+ z-index: 2;
+}
+.deck-child-current .slide {
+ visibility: hidden;
+}
+.deck-child-current .deck-previous, .deck-child-current .deck-before, .deck-child-current .deck-current {
+ visibility: visible;
+}
+
+body.deck-container {
+ overflow: visible;
+}
+
+@media all and (orientation:portrait) {}
+@media all and (orientation:landscape) {}
+@media screen and (max-device-width: 480px) {
+ /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
+}
+
+@media print {
+ * {
+ background: transparent !important;
+ color: black !important;
+ text-shadow: none !important;
+ filter: none !important;
+ -ms-filter: none !important;
+ -webkit-box-reflect: none !important;
+ -moz-box-reflect: none !important;
+ -webkit-box-shadow: none !important;
+ -moz-box-shadow: none !important;
+ box-shadow: none !important;
+ }
+ * :before, * :after {
+ display: none !important;
+ }
+
+ a, a:visited {
+ color: #444 !important;
+ text-decoration: underline;
+ }
+
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
+ content: "";
+ }
+
+ pre, blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+
+ thead {
+ display: table-header-group;
+ }
+
+ tr, img {
+ page-break-inside: avoid;
+ }
+
+ @page {
+ margin: 0.5cm;
+}
+
+ p, h2, h3 {
+ orphans: 3;
+ widows: 3;
+ }
+
+ h2, h3 {
+ page-break-after: avoid;
+ }
+
+ .slide {
+ position: static !important;
+ visibility: visible !important;
+ display: block !important;
+ -webkit-transform: none !important;
+ -moz-transform: none !important;
+ -o-transform: none !important;
+ -ms-transform: none !important;
+ transform: none !important;
+ }
+
+ h1 {
+ -webkit-transform: none !important;
+ -moz-transform: none !important;
+ -o-transform: none !important;
+ -ms-transform: none !important;
+ transform: none !important;
+ padding: 0 !important;
+ position: static !important;
+ }
+
+ .deck-container > .slide {
+ page-break-after: always;
+ }
+
+ .deck-container {
+ width: 100% !important;
+ height: auto !important;
+ padding: 0 !important;
+ display: block !important;
+ }
+
+ script {
+ display: none;
+ }
+}
View
39 presentations/jsfoo-bangalore/inside-javascript-objects/core/deck.core.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Deck Skeleton</title>
+ <meta name="viewport" content="width=1024, user-scalable=no">
+
+ <!-- Replace path with correct path to deck.core.css. -->
+ <link rel="stylesheet" href="/PATH/TO/CSS/deck.core.css" type="text/css">
+
+ <!-- Any other extension CSS files go here. -->
+
+ <!-- Replace path with correct path to Modernizr file. -->
+ <script src="/PATH/TO/JS/modernizr.custom.js"></script>
+</head>
+<body class="deck-container">
+
+<!-- Create any number of elements with class slide within the container -->
+<section class="slide">
+ <!-- Slide content HTML goes here! -->
+</section>
+
+<!-- Other extension HTML snippets go here, at the bottom of the deck container. -->
+
+<!-- Update these paths to point to the correct files. -->
+<script src="/PATH/TO/JS/jquery.min.js"></script>
+<script src="/PATH/TO/JS/deck.core.js"></script>
+
+<!-- Add any other extension JS files here -->
+
+
+<!-- Initialize the deck. You can put this in an external file if desired. -->
+<script>
+ $(function() {
+ $.deck('.slide');
+ });
+</script>
+</body>
+</html>
View
457 presentations/jsfoo-bangalore/inside-javascript-objects/core/deck.core.js
@@ -0,0 +1,457 @@
+/*!
+Deck JS - deck.core - v1.0
+Copyright (c) 2011 Caleb Troughton
+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
+*/
+
+/*
+The deck.core module provides all the basic functionality for creating and
+moving through a deck. It does so by applying classes to indicate the state of
+the deck and its slides, allowing CSS to take care of the visual representation
+of each state. It also provides methods for navigating the deck and inspecting
+its state, as well as basic key bindings for going to the next and previous
+slides. More functionality is provided by wholly separate extension modules
+that use the API provided by core.
+*/
+(function($, deck, document, undefined) {
+ var slides, // Array of all the uh, slides...
+ current, // Array index of the current slide
+
+ events = {
+ /*
+ This event fires whenever the current slide changes, whether by way of
+ next, prev, or go. The callback function is passed two parameters, from
+ and to, equal to the indices of the old slide and the new slide
+ respectively.
+
+ $(document).bind('deck.change', function(event, from, to) {
+ alert('Moving from slide ' + from + ' to ' + to);
+ });
+ */
+ change: 'deck.change',
+
+ /*
+ This event fires at the end of deck initialization. Extensions should
+ implement any code that relies on user extensible options (key bindings,
+ element selectors, classes) within a handler for this event. Native
+ events associated with Deck JS should be scoped under a .deck event
+ namespace, as with the example below:
+
+ var $d = $(document);
+ $.deck.defaults.keys.myExtensionKeycode = 70; // 'h'
+ $d.bind('deck.init', function() {
+ $d.bind('keydown.deck', function(event) {
+ if (event.which === $.deck.getOptions().keys.myExtensionKeycode) {
+ // Rock out
+ }
+ });
+ });
+ */
+ initialize: 'deck.init'
+ },
+
+ options = {},
+ $d = $(document),
+
+ /*
+ Internal function. Updates slide and container classes based on which
+ slide is the current slide.
+ */
+ updateStates = function() {
+ var oc = options.classes,
+ osc = options.selectors.container,
+ $container = $(osc),
+ old = $container.data('onSlide'),
+ $all = $();
+
+ // Container state
+ $container.removeClass(oc.onPrefix + old)
+ .addClass(oc.onPrefix + current)
+ .data('onSlide', current);
+
+ // Remove and re-add child-current classes for nesting
+ $('.' + oc.current).parentsUntil(osc).removeClass(oc.childCurrent);
+ slides[current].parentsUntil(osc).addClass(oc.childCurrent);
+
+ // Remove previous states
+ $.each(slides, function(i, el) {
+ $all = $all.add(el);
+ });
+ $all.removeClass([
+ oc.before,
+ oc.previous,
+ oc.current,
+ oc.next,
+ oc.after
+ ].join(" "));
+
+ // Add new states back in
+ slides[current].addClass(oc.current);
+ if (current > 0) {
+ slides[current-1].addClass(oc.previous);
+ }
+ if (current + 1 < slides.length) {
+ slides[current+1].addClass(oc.next);
+ }
+ if (current > 1) {
+ $.each(slides.slice(0, current - 1), function(i, el) {
+ el.addClass(oc.before);
+ });
+ }
+ if (current + 2 < slides.length) {
+ $.each(slides.slice(current+2), function(i, el) {
+ el.addClass(oc.after);
+ });
+ }
+ },
+
+ /* Methods exposed in the jQuery.deck namespace */
+ methods = {
+
+ /*
+ jQuery.deck(selector, options)
+
+ selector: string | jQuery | array
+ options: object, optional
+
+ Initializes the deck, using each element matched by selector as a slide.
+ May also be passed an array of string selectors or jQuery objects, in
+ which case each selector in the array is considered a slide. The second
+ parameter is an optional options object which will extend the default
+ values.
+
+ $.deck('.slide');
+
+ or
+
+ $.deck([
+ '#first-slide',
+ '#second-slide',
+ '#etc'
+ ]);
+ */
+ init: function(elements, opts) {
+ var startTouch,
+ $c,
+ tolerance,
+ esp = function(e) {
+ e.stopPropagation();
+ };
+
+ options = $.extend(true, {}, $[deck].defaults, opts);
+ slides = [];
+ current = 0;
+ $c = $[deck]('getContainer');
+ tolerance = options.touch.swipeTolerance;
+
+ // Hide the deck while states are being applied to kill transitions
+ $c.addClass(options.classes.loading);
+
+ // Fill slides array depending on parameter type
+ if ($.isArray(elements)) {
+ $.each(elements, function(i, e) {
+ slides.push($(e));
+ });
+ }
+ else {
+ $(elements).each(function(i, e) {
+ slides.push($(e));
+ });
+ }
+
+ /* Remove any previous bindings, and rebind key events */
+ $d.unbind('keydown.deck').bind('keydown.deck', function(e) {
+ if (e.which === options.keys.next || $.inArray(e.which, options.keys.next) > -1) {
+ methods.next();
+ e.preventDefault();
+ }
+ else if (e.which === options.keys.previous || $.inArray(e.which, options.keys.previous) > -1) {
+ methods.prev();
+ e.preventDefault();
+ }
+ });
+
+ /* Bind touch events for swiping between slides on touch devices */
+ $c.unbind('touchstart.deck').bind('touchstart.deck', function(e) {
+ if (!startTouch) {
+ startTouch = $.extend({}, e.originalEvent.targetTouches[0]);
+ }
+ })
+ .unbind('touchmove.deck').bind('touchmove.deck', function(e) {
+ $.each(e.originalEvent.changedTouches, function(i, t) {
+ if (startTouch && t.identifier === startTouch.identifier) {
+ if (t.screenX - startTouch.screenX > tolerance || t.screenY - startTouch.screenY > tolerance) {
+ $[deck]('prev');
+ startTouch = undefined;
+ }
+ else if (t.screenX - startTouch.screenX < -1 * tolerance || t.screenY - startTouch.screenY < -1 * tolerance) {
+ $[deck]('next');
+ startTouch = undefined;
+ }
+ return false;
+ }
+ });
+ e.preventDefault();
+ })
+ .unbind('touchend.deck').bind('touchend.deck', function(t) {
+ $.each(t.originalEvent.changedTouches, function(i, t) {
+ if (startTouch && t.identifier === startTouch.identifier) {
+ startTouch = undefined;
+ }
+ });
+ })
+ .scrollLeft(0).scrollTop(0)
+ /* Stop propagation of key events within editable elements of slides */
+ .undelegate('input, textarea, select, button, meter, progress, [contentEditable]', 'keydown', esp)
+ .delegate('input, textarea, select, button, meter, progress, [contentEditable]', 'keydown', esp);
+
+ /*
+ Kick iframe videos, which dont like to redraw w/ transforms.
+ Remove this if Webkit ever fixes it.
+ */
+ $.each(slides, function(i, $el) {
+ $el.unbind('webkitTransitionEnd.deck').bind('webkitTransitionEnd.deck',
+ function(event) {
+ if ($el.hasClass($[deck]('getOptions').classes.current)) {
+ var embeds = $(this).find('iframe').css('opacity', 0);
+ window.setTimeout(function() {
+ embeds.css('opacity', 1);
+ }, 100);
+ }
+ });
+ });
+
+ updateStates();
+
+ // Show deck again now that slides are in place
+ $c.removeClass(options.classes.loading);
+ $d.trigger(events.initialize);
+ },
+
+ /*
+ jQuery.deck('go', index)
+
+ index: integer
+
+ Moves to the slide at the specified index. Index is 0-based, so
+ $.deck('go', 0); will move to the first slide. If index is out of bounds
+ or not a number the call is ignored.
+ */
+ go: function(index) {
+ if (typeof index != 'number' || index < 0 || index >= slides.length) return;
+
+ $d.trigger(events.change, [current, index]);
+ current = index;
+ updateStates();
+ },
+
+ /*
+ jQuery.deck('next')
+
+ Moves to the next slide. If the last slide is already active, the call
+ is ignored.
+ */
+ next: function() {
+ methods.go(current+1);
+ },
+
+ /*
+ jQuery.deck('prev')
+
+ Moves to the previous slide. If the first slide is already active, the
+ call is ignored.
+ */
+ prev: function() {
+ methods.go(current-1);
+ },
+
+ /*
+ jQuery.deck('getSlide', index)
+
+ index: integer, optional
+
+ Returns a jQuery object containing the slide at index. If index is not
+ specified, the current slide is returned.
+ */
+ getSlide: function(index) {
+ var i = typeof index !== 'undefined' ? index : current;
+ if (typeof i != 'number' || i < 0 || i >= slides.length) return null;
+ return slides[i];
+ },
+
+ /*
+ jQuery.deck('getSlides')
+
+ Returns all slides as an array of jQuery objects.
+ */
+ getSlides: function() {
+ return slides;
+ },
+
+ /*
+ jQuery.deck('getContainer')
+
+ Returns a jQuery object containing the deck container as defined by the
+ container option.
+ */
+ getContainer: function() {
+ return $(options.selectors.container);
+ },
+
+ /*
+ jQuery.deck('getOptions')
+
+ Returns the options object for the deck, including any overrides that
+ were defined at initialization.
+ */
+ getOptions: function() {
+ return options;
+ },
+
+ /*
+ jQuery.deck('extend', name, method)
+
+ name: string
+ method: function
+
+ Adds method to the deck namespace with the key of name. This doesn’t
+ give access to any private member data — public methods must still be
+ used within method — but lets extension authors piggyback on the deck
+ namespace rather than pollute jQuery.
+
+ $.deck('extend', 'alert', function(msg) {
+ alert(msg);
+ });
+
+ // Alerts 'boom'
+ $.deck('alert', 'boom');
+ */
+ extend: function(name, method) {
+ methods[name] = method;
+ }
+ };
+
+ /* jQuery extension */
+ $[deck] = function(method, arg) {
+ if (methods[method]) {
+ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+ }
+ else {
+ return methods.init(method, arg);
+ }
+ };
+
+ /*
+ The default settings object for a deck. All deck extensions should extend
+ this object to add defaults for any of their options.
+
+ options.classes.after
+ This class is added to all slides that appear after the 'next' slide.
+
+ options.classes.before
+ This class is added to all slides that appear before the 'previous'
+ slide.
+
+ options.classes.childCurrent
+ This class is added to all elements in the DOM tree between the
+ 'current' slide and the deck container. For standard slides, this is
+ mostly seen and used for nested slides.
+
+ options.classes.current
+ This class is added to the current slide.
+
+ options.classes.loading
+ This class is applied to the deck container during loading phases and is
+ primarily used as a way to short circuit transitions between states
+ where such transitions are distracting or unwanted. For example, this
+ class is applied during deck initialization and then removed to prevent
+ all the slides from appearing stacked and transitioning into place
+ on load.
+
+ options.classes.next
+ This class is added to the slide immediately following the 'current'
+ slide.
+
+ options.classes.onPrefix
+ This prefix, concatenated with the current slide index, is added to the
+ deck container as you change slides.
+
+ options.classes.previous
+ This class is added to the slide immediately preceding the 'current'
+ slide.
+
+ options.selectors.container
+ Elements matched by this CSS selector will be considered the deck
+ container. The deck container is used to scope certain states of the
+ deck, as with the onPrefix option, or with extensions such as deck.goto
+ and deck.menu.
+
+ options.keys.next
+ The numeric keycode used to go to the next slide.
+
+ options.keys.previous
+ The numeric keycode used to go to the previous slide.
+
+ options.touch.swipeTolerance
+ The number of pixels the users finger must travel to produce a swipe
+ gesture.
+ */
+ $[deck].defaults = {
+ classes: {
+ after: 'deck-after',
+ before: 'deck-before',
+ childCurrent: 'deck-child-current',
+ current: 'deck-current',
+ loading: 'deck-loading',
+ next: 'deck-next',
+ onPrefix: 'on-slide-',
+ previous: 'deck-previous'
+ },
+
+ selectors: {
+ container: '.deck-container'
+ },
+
+ keys: {
+ // enter, space, page down, right arrow, down arrow,
+ next: [13, 32, 34, 39, 40],
+ // backspace, page up, left arrow, up arrow
+ previous: [8, 33, 37, 38]
+ },
+
+ touch: {
+ swipeTolerance: 60
+ }
+ };
+
+ $d.ready(function() {
+ $('html').addClass('ready');
+ });
+
+ /*
+ FF + Transforms + Flash video don't get along...
+ Firefox will reload and start playing certain videos after a
+ transform. Blanking the src when a previously shown slide goes out
+ of view prevents this.
+ */
+ $d.bind('deck.change', function(e, from, to) {
+ var oldFrames = $[deck]('getSlide', from).find('iframe'),
+ newFrames = $[deck]('getSlide', to).find('iframe');
+
+ oldFrames.each(function() {
+ var $this = $(this);
+ $this.data('deck-src', $this.attr('src')).attr('src', '');
+ });
+
+ newFrames.each(function() {
+ var $this = $(this),
+ originalSrc = $this.data('deck-src');
+
+ if (originalSrc) {
+ $this.attr('src', originalSrc);
+ }
+ });
+ });
+})(jQuery, 'deck', document);
View
431 presentations/jsfoo-bangalore/inside-javascript-objects/core/deck.core.scss
@@ -0,0 +1,431 @@
+html {
+ height:100%;
+}
+
+.deck-container {
+ position:relative;
+ height:100%;
+ width:70%;
+ margin:0 auto;
+ padding:0 48px;
+ font-size:16px;
+ line-height:1.25;
+ overflow:hidden;
+
+ .js & {
+ visibility:hidden;
+ }
+
+ .ready & {
+ visibility:visible;
+ }
+
+ .touch & {
+ -webkit-text-size-adjust:none;
+ }
+
+ /* Resets and base styles from HTML5 Boilerplate */
+ div, span, object, iframe,
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+ abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+ small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+ fieldset, form, label, legend,
+ table, caption, tbody, tfoot, thead, tr, th, td,
+ article, aside, canvas, details, figcaption, figure,
+ footer, header, hgroup, menu, nav, section, summary,
+ time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ }
+
+ article, aside, details, figcaption, figure,
+ footer, header, hgroup, menu, nav, section {
+ display: block;
+ }
+
+ blockquote, q {
+ quotes:none;
+
+ &:before, &:after {
+ content:"";
+ content:none;
+ }
+ }
+
+ ins {
+ background-color:#ff9;
+ color:#000;
+ text-decoration:none;
+ }
+
+ mark {
+ background-color:#ff9;
+ color:#000;
+ font-style:italic;
+ font-weight:bold;
+ }
+
+ del {
+ text-decoration:line-through;
+ }
+
+ abbr[title], dfn[title] {
+ border-bottom:1px dotted;
+ cursor:help;
+ }
+
+ table {
+ border-collapse:collapse;
+ border-spacing:0;
+ }
+
+ hr {
+ display:block;
+ height:1px;
+ border:0;
+ border-top:1px solid #ccc;
+ margin:1em 0;
+ padding:0;
+ }
+
+ input, select {
+ vertical-align:middle;
+ }
+
+ select, input, textarea, button {
+ font:99% sans-serif;
+ }
+
+ pre, code, kbd, samp {
+ font-family:monospace, sans-serif;
+ }
+
+ a {
+ -webkit-tap-highlight-color:rgba(0,0,0,0);
+
+ &:hover, &:active {
+ outline:none;
+ }
+ }
+
+ ul, ol {
+ margin-left:2em;
+ vertical-align:top;
+ }
+
+ ol {
+ list-style-type:decimal;
+ }
+
+ nav {
+ ul, li {
+ margin:0;
+ list-style:none;
+ list-style-image:none;
+ }
+ }
+
+ small {
+ font-size:85%;
+ }
+
+ strong, th {
+ font-weight:bold;
+ }
+
+ td {
+ vertical-align:top;
+ }
+
+ sub, sup {
+ font-size:75%;
+ line-height:0;
+ position:relative;
+ }
+
+ sup {
+ top:-0.5em;
+ }
+
+ sub { bottom: -0.25em; }
+
+ textarea {
+ overflow:auto;
+ }
+
+ legend {
+ .ie6 &, .ie7 & {
+ margin-left:-7px;
+ }
+ }
+
+ input[type="radio"] {
+ vertical-align:text-bottom;
+ }
+
+ input[type="checkbox"] {
+ vertical-align:bottom;
+ }
+
+ .ie7 input[type="checkbox"] {
+ vertical-align:baseline;
+ }
+
+ .ie6 input {
+ vertical-align:text-bottom;
+ }
+
+ label, input[type="button"], input[type="submit"], input[type="image"], button {
+ cursor:pointer;
+ }
+
+ button, input, select, textarea {
+ margin: 0;
+ }
+
+ input, textarea {
+ &:invalid {
+ border-radius:1px;
+ -moz-box-shadow:0px 0px 5px red;
+ -webkit-box-shadow:0px 0px 5px red;
+ box-shadow: 0px 0px 5px red;
+
+ .no-boxshadow {
+ background-color: #f0dddd;
+ }
+ }
+ }
+
+ button {
+ width:auto;
+ overflow:visible;
+ }
+
+ .ie7 & img {
+ -ms-interpolation-mode: bicubic; }
+
+ &, select, input, textarea {
+ color:#444;
+ }
+
+ a {
+ color:#607890;
+
+ &:hover, &:focus {
+ color:#036;
+ }
+
+ &:link {
+ -webkit-tap-highlight-color: #fff;
+ }
+ }
+ /* End HTML5 Boilerplate adaptations */
+
+ h1 {
+ font-size:4.5em;
+ font-weight:bold;
+ text-align:center;
+ padding-top:1em;
+
+ .csstransforms & {
+ padding:0 48px;
+ position:absolute;
+ left:0;
+ right:0;
+ top:50%;
+ -webkit-transform:translate3d(0, -50%, 0);
+ -moz-transform:translate(0, -50%);
+ -ms-transform:translate(0, -50%);
+ -o-transform:translate(0, -50%);
+ transform:translate3d(0, -50%, 0);
+ }
+ }
+
+ h2 {
+ font-size:2.25em;
+ font-weight:bold;
+ padding-top:.5em;
+ margin:0 0 .66666em 0;
+ border-bottom:3px solid #888;
+ }
+
+ h3 {
+ font-size:1.4375em;
+ font-weight:bold;
+ margin-bottom:.30435em;
+ }
+
+ h4 {
+ font-size:1.25em;
+ font-weight:bold;
+ margin-bottom:.25em;
+ }
+
+ h5 {
+ font-size:1.125em;
+ font-weight:bold;
+ margin-bottom:.2222em;
+ }
+
+ h6 {
+ font-size:1em;
+ font-weight:bold;
+ }
+
+ img, iframe, video {
+ display:block;
+ max-width:100%;
+ }
+
+ video, iframe, img {
+ display:block;
+ margin:0 auto;
+ }
+
+ p, blockquote, iframe, img, ul, ol, pre, video {
+ margin-bottom:1em;
+ }
+
+ pre {
+ white-space:pre;
+ white-space:pre-wrap;
+ word-wrap:break-word;
+ padding: 1em;
+ border:1px solid #888;
+ }
+
+ em {
+ font-style:italic;
+ }
+
+ li {
+ padding:.25em 0;
+ vertical-align:middle;
+ }
+
+ &.deck-loading {
+ display:none;
+ }
+}
+
+.slide {
+ width:auto;
+ min-height:100%;
+ position:relative;
+}
+
+.deck-before, .deck-previous, .deck-next, .deck-after {
+ position:absolute;
+ left:-999em;
+ top:-999em;
+}
+
+.deck-current {
+ z-index:2;
+}
+
+.slide .slide {
+ visibility:hidden;
+ position:static;
+ min-height:0;
+}
+
+.deck-child-current {
+ position:static;
+ z-index:2;
+
+ .slide {
+ visibility:hidden;
+ }
+
+ .deck-previous, .deck-before, .deck-current {
+ visibility:visible;
+ }
+}
+
+body.deck-container {
+ overflow:visible;
+}
+
+@media all and (orientation:portrait) {
+
+}
+
+@media all and (orientation:landscape) {
+
+}
+
+@media screen and (max-device-width: 480px) {
+
+ /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
+}
+
+
+@media print {
+ * {
+ background: transparent !important;
+ color: black !important;
+ text-shadow: none !important;
+ filter:none !important;
+ -ms-filter: none !important;
+ -webkit-box-reflect:none !important;
+ -moz-box-reflect:none !important;
+ -webkit-box-shadow:none !important;
+ -moz-box-shadow:none !important;
+ box-shadow:none !important;
+
+ :before, :after {
+ display:none !important;
+ }
+}
+ a, a:visited { color: #444 !important; text-decoration: underline; }
+ a[href]:after { content: " (" attr(href) ")"; }
+ abbr[title]:after { content: " (" attr(title) ")"; }
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+ thead { display: table-header-group; }
+ tr, img { page-break-inside: avoid; }
+ @page { margin: 0.5cm; }
+ p, h2, h3 { orphans: 3; widows: 3; }
+ h2, h3{ page-break-after: avoid; }
+
+ .slide {
+ position:static !important;
+ visibility:visible !important;
+ display:block !important;
+ -webkit-transform:none !important;
+ -moz-transform:none !important;
+ -o-transform:none !important;
+ -ms-transform:none !important;
+ transform:none !important;
+ }
+
+ h1 {
+ -webkit-transform:none !important;
+ -moz-transform:none !important;
+ -o-transform:none !important;
+ -ms-transform:none !important;
+ transform:none !important;
+ padding:0 !important;
+ position:static !important;
+ }
+
+ .deck-container > .slide {
+ page-break-after: always;
+ }
+
+ .deck-container {
+ width:100% !important;
+ height:auto !important;
+ padding:0 !important;
+ display:block !important;
+ }
+
+ script {
+ display:none;
+ }
+}
View
41 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/goto/deck.goto.css
@@ -0,0 +1,41 @@
+.deck-container .goto-form {
+ position: absolute;
+ z-index: 3;
+ bottom: 10px;
+ left: 50%;
+ height: 1.75em;
+ margin: 0 0 0 -7.125em;
+ line-height: 1.75em;
+ padding: 0.625em;
+ display: none;
+ background: #ccc;
+ overflow: hidden;
+}
+.borderradius .deck-container .goto-form {
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+}
+.deck-container .goto-form label {
+ font-weight: bold;
+}
+.deck-container .goto-form label, .deck-container .goto-form input {
+ display: inline-block;
+ font-family: inherit;
+}
+
+.deck-goto .goto-form {
+ display: block;
+}
+
+#goto-slide {
+ width: 4.375em;
+ margin: 0 0.625em;
+ height: 1.4375em;
+}
+
+@media print {
+ .goto-form, #goto-slide {
+ display: none !important;
+ }
+}
View
6 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/goto/deck.goto.html
@@ -0,0 +1,6 @@
+<!-- Place the following snippet at the bottom of the deck container. -->
+<form action="." method="get" class="goto-form">
+ <label for="goto-slide">Go to slide:</label>
+ <input type="number" name="slidenum" id="goto-slide">
+ <input type="submit" value="Go">
+</form>
View
118 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/goto/deck.goto.js
@@ -0,0 +1,118 @@
+/*!
+Deck JS - deck.goto - v1.0
+Copyright (c) 2011 Caleb Troughton
+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 necessary methods and key bindings to show and hide a form
+for jumping to any slide number in the deck (and processes that form
+accordingly). The form-showing state is indicated by the presence of a class on
+the deck container.
+*/
+(function($, deck, undefined) {
+ var $d = $(document);
+
+ /*
+ Extends defaults/options.
+
+ options.classes.goto
+ This class is added to the deck container when showing the Go To Slide
+ form.
+
+ options.selectors.gotoForm
+ The element that matches this selector is the form that is submitted
+ when a user hits enter after typing a slide number in the gotoInput
+ element.
+
+ options.selectors.gotoInput
+ The element that matches this selector is the text input field for
+ entering a slide number in the Go To Slide form.
+
+ options.keys.goto
+ The numeric keycode used to toggle between showing and hiding the Go To
+ Slide form.
+ */
+ $.extend(true, $[deck].defaults, {
+ classes: {
+ goto: 'deck-goto'
+ },
+
+ selectors: {
+ gotoForm: '.goto-form',
+ gotoInput: '#goto-slide'
+ },
+
+ keys: {
+ goto: 71 // g
+ }
+ });
+
+ /*
+ jQuery.deck('showGoTo')
+
+ Shows the Go To Slide form by adding the class specified by the goto class
+ option to the deck container.
+ */
+ $[deck]('extend', 'showGoTo', function() {
+ $[deck]('getContainer').addClass($[deck]('getOptions').classes.goto);
+ $($[deck]('getOptions').selectors.gotoInput).focus();
+ });
+
+ /*
+ jQuery.deck('hideGoTo')
+
+ Hides the Go To Slide form by removing the class specified by the goto class
+ option from the deck container.
+ */
+ $[deck]('extend', 'hideGoTo', function() {
+ $[deck]('getContainer').removeClass($[deck]('getOptions').classes.goto);
+ $($[deck]('getOptions').selectors.gotoInput).blur();
+ });
+
+ /*
+ jQuery.deck('toggleGoTo')
+
+ Toggles between showing and hiding the Go To Slide form.
+ */
+ $[deck]('extend', 'toggleGoTo', function() {
+ $[deck]($[deck]('getContainer').hasClass($[deck]('getOptions').classes.goto) ? 'hideGoTo' : 'showGoTo');
+ });
+
+ $d.bind('deck.init', function() {
+ // Bind key events
+ $d.unbind('keydown.deckgoto').bind('keydown.deckgoto', function(e) {
+ var key = $[deck]('getOptions').keys.goto;
+
+ if (e.which === key ||$.inArray(e.which, key) > -1) {
+ e.preventDefault();
+ $[deck]('toggleGoTo');
+ }
+ });
+
+ // Process form submittal, go to the slide entered
+ $($[deck]('getOptions').selectors.gotoForm)
+ .unbind('submit.deckgoto')
+ .bind('submit.deckgoto', function(e) {
+ var $field = ($($[deck]('getOptions').selectors.gotoInput)),
+ i = parseInt($field.val(), 10);
+
+ if (!($.isNaN(i) || i < 1 || i > $[deck]('getSlides').length)) {
+ $[deck]('go', i - 1);
+ $[deck]('hideGoTo');
+ $field.val('');
+ }
+
+ e.preventDefault();
+ });
+
+ $($[deck]('getOptions').selectors.gotoInput)
+ .unbind('keydown.deckgoto')
+ .bind('keydown.deckgoto', function(e) {
+ e.stopPropagation();
+ });
+ });
+})(jQuery, 'deck');
+
View
46 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/goto/deck.goto.scss
@@ -0,0 +1,46 @@
+.deck-container {
+ .goto-form {
+ position:absolute;
+ z-index:3;
+ bottom:10px;
+ left:50%;
+ height:1.75em;
+ margin:0 0 0 -7.125em;
+ line-height:1.75em;
+ padding:0.625em;
+ display:none;
+ background:#ccc;
+ overflow:hidden;
+
+ .borderradius & {
+ -webkit-border-radius:10px;
+ -moz-border-radius:10px;
+ border-radius:10px;
+ }
+
+ label {
+ font-weight:bold;
+ }
+
+ label, input {
+ display:inline-block;
+ font-family:inherit;
+ }
+ }
+}
+
+.deck-goto .goto-form {
+ display:block;
+}
+
+#goto-slide {
+ width:4.375em;
+ margin:0 0.625em;
+ height:1.4375em;
+}
+
+@media print {
+ .goto-form, #goto-slide {
+ display:none !important;
+ }
+}
View
13 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/hash/deck.hash.css
@@ -0,0 +1,13 @@
+.deck-container .deck-permalink {
+ display: none;
+ position: absolute;
+ z-index: 4;
+ bottom: 30px;
+ right: 0;
+ width: 48px;
+ text-align: center;
+}
+
+.no-history .deck-container:hover .deck-permalink {
+ display: block;
+}
View
2 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/hash/deck.hash.html
@@ -0,0 +1,2 @@
+<!-- Place the following snippet at the bottom of the deck container. -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
View
113 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/hash/deck.hash.js
@@ -0,0 +1,113 @@
+/*!
+Deck JS - deck.hash - v1.0
+Copyright (c) 2011 Caleb Troughton
+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 deep linking to individual slides, enables internal links
+to slides within decks, and updates the address bar with the hash as the user
+moves through the deck. A permalink anchor is also updated. Standard themes
+hide this link in browsers that support the History API, and show it for
+those that do not. Slides that do not have an id are assigned one according to
+the hashPrefix option.
+*/
+(function ($, deck, window, undefined) {
+ var $d = $(document),
+ $window = $(window),
+
+ /* Collection of internal fragment links in the deck */
+ $internals,
+
+ /*
+ Internal only function. Given a string, extracts the id from the hash,
+ matches it to the appropriate slide, and navigates there.
+ */
+ goByHash = function(str) {
+ var id = str.substr(str.indexOf("#") + 1),
+ slides = $[deck]('getSlides');
+
+ $.each(slides, function(i, $el) {
+ if ($el.attr('id') === id) {
+ $[deck]('go', i);
+ return false;
+ }
+ });
+
+ // If we don't set these to 0 the container scrolls due to hashchange
+ $[deck]('getContainer').scrollLeft(0).scrollTop(0);
+ };
+
+ /*
+ Extends defaults/options.
+
+ options.selectors.hashLink
+ The element matching this selector has its href attribute updated to
+ the hash of the current slide as the user navigates through the deck.
+
+ options.hashPrefix
+ Every slide that does not have an id is assigned one at initialization.
+ Assigned ids take the form of hashPrefix + slideIndex, e.g., slide-0,
+ slide-12, etc.
+ */
+ $.extend(true, $[deck].defaults, {
+ selectors: {
+ hashLink: '.deck-permalink'
+ },
+
+ hashPrefix: 'slide-'
+ });
+
+
+ $d.bind('deck.init', function() {
+ $internals = $();
+
+ $.each($[deck]('getSlides'), function(i, $el) {
+ var hash;
+
+ /* Hand out ids to the unfortunate slides born without them */
+ if (!$el.attr('id')) {
+ $el.attr('id', $[deck]('getOptions').hashPrefix + i);
+ }
+
+ hash ='#' + $el.attr('id');
+
+ /* Deep link to slides on init */
+ if (hash === window.location.hash) {
+ $[deck]('go', i);
+ }
+
+ /* Add internal links to this slide */
+ $internals = $internals.add('a[href="' + hash + '"]');
+ });
+
+ if (!Modernizr.hashchange) {
+ /* Set up internal links using click for the poor browsers
+ without a hashchange event. */
+ $internals.unbind('click.deckhash').bind('click.deckhash', function(e) {
+ goByHash($(this).attr('href'));
+ });
+ }
+ })
+ /* Update permalink and address bar on a slide change */
+ .bind('deck.change', function(e, from, to) {
+ var hash = '#' + $[deck]('getSlide', to).attr('id');
+
+ $($[deck]('getOptions').selectors.hashLink).attr('href', hash);
+ if (Modernizr.history) {
+ window.history.replaceState({}, "", hash);
+ }
+ });
+
+ /* Deals with internal links in modern browsers */
+ $window.bind('hashchange.deckhash', function(e) {
+ if (e.originalEvent && e.originalEvent.newURL) {
+ goByHash(e.originalEvent.newURL);
+ }
+ else {
+ goByHash(window.location.hash);
+ }
+ });
+})(jQuery, 'deck', this);
View
15 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/hash/deck.hash.scss
@@ -0,0 +1,15 @@
+.deck-container {
+ .deck-permalink {
+ display:none;
+ position:absolute;
+ z-index:4;
+ bottom:30px;
+ right:0;
+ width:48px;
+ text-align:center;
+ }
+}
+
+.no-history .deck-container:hover .deck-permalink {
+ display:block;
+}
View
24 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/menu/deck.menu.css
@@ -0,0 +1,24 @@
+.deck-menu > .slide {
+ float: left;
+ width: 22%;
+ height: 22%;
+ min-height: 0;
+ margin: 1%;
+ font-size: 0.22em;
+ overflow: hidden;
+ padding: 0 0.5%;
+}
+.deck-menu .slide {
+ background: #eee;
+ position: relative;
+ left: 0;
+ top: 0;
+ visibility: visible;
+ cursor: pointer;
+}
+.deck-menu iframe, .deck-menu img, .deck-menu video {
+ max-width: 100%;
+}
+.deck-menu .deck-current, .no-touch .deck-menu .slide:hover {
+ background: #ddf;
+}
View
127 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/menu/deck.menu.js
@@ -0,0 +1,127 @@
+/*!
+Deck JS - deck.menu - v1.0
+Copyright (c) 2011 Caleb Troughton
+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 and hide a menu of all
+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.menu
+ This class is added to the deck container when showing the slide menu.
+
+ options.keys.menu
+ The numeric keycode used to toggle between showing and hiding the slide
+ menu.
+
+ options.touch.doubletapWindow
+ Two consecutive touch events within this number of milliseconds will
+ be considered a double tap, and will toggle the menu on touch devices.
+ */
+ $.extend(true, $[deck].defaults, {
+ classes: {
+ menu: 'deck-menu'
+ },
+
+ keys: {
+ menu: 77 // m
+ },
+
+ touch: {
+ doubletapWindow: 400
+ }
+ });
+
+ /*
+ jQuery.deck('showMenu')
+
+ Shows the slide menu by adding the class specified by the menu class option
+ to the deck container.
+ */
+ $[deck]('extend', 'showMenu', function() {
+ $[deck]('getContainer').addClass($[deck]('getOptions').classes.menu);
+ $[deck]('getContainer').scrollTop($[deck]('getSlide').offset().top);
+ });
+
+ /*
+ jQuery.deck('hideMenu')
+
+ Hides the slide menu by removing the class specified by the menu class
+ option from the deck container.
+ */
+ $[deck]('extend', 'hideMenu', function() {
+ $[deck]('getContainer').removeClass($[deck]('getOptions').classes.menu);
+ $[deck]('getContainer').scrollTop(0);
+ });
+
+ /*
+ jQuery.deck('toggleMenu')
+
+ Toggles between showing and hiding the slide menu.
+ */
+ $[deck]('extend', 'toggleMenu', function() {
+ $[deck]('getContainer').hasClass($[deck]('getOptions').classes.menu) ?
+ $[deck]('hideMenu') : $[deck]('showMenu');
+ });
+
+ $d.bind('deck.init', function() {
+ var opts = $[deck]('getOptions'),
+ touchEndTime = 0,
+ currentSlide;
+
+ // Bind key events
+ $d.unbind('keydown.deckmenu').bind('keydown.deckmenu', function(e) {
+ if (e.which === opts.keys.menu || $.inArray(e.which, opts.keys.menu) > -1) {
+ $[deck]('toggleMenu');
+ e.preventDefault();
+ }
+ });
+
+ // Double tap to toggle slide menu for touch devices
+ $[deck]('getContainer').unbind('touchstart.deckmenu').bind('touchstart.deckmenu', function(e) {
+ currentSlide = $[deck]('getSlide');
+ })
+ .unbind('touchend.deckmenu').bind('touchend.deckmenu', function(e) {
+ var now = Date.now();
+
+ // Ignore this touch event if it caused a nav change (swipe)
+ if (currentSlide !== $[deck]('getSlide')) return;
+
+ if (now - touchEndTime < opts.touch.doubletapWindow) {
+ $[deck]('toggleMenu');
+ e.preventDefault();
+ }
+ touchEndTime = now;
+ });
+
+ // Selecting slides from the menu
+ $.each($[deck]('getSlides'), function(i, $s) {
+ $s.unbind('click.deckmenu').bind('click.deckmenu', function(e) {
+ if (!$[deck]('getContainer').hasClass(opts.classes.menu)) return;
+
+ $[deck]('go', i);
+ $[deck]('hideMenu');
+ e.stopPropagation();
+ e.preventDefault();
+ });
+ });
+ })
+ .bind('deck.change', function(e, from, to) {
+ var container = $[deck]('getContainer');
+
+ if (container.hasClass($[deck]('getOptions').classes.menu)) {
+ container.scrollTop($[deck]('getSlide', to).offset().top);
+ }
+ });
+})(jQuery, 'deck');
+
View
29 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/menu/deck.menu.scss
@@ -0,0 +1,29 @@
+.deck-menu {
+ > .slide {
+ float:left;
+ width:22%;
+ height:22%;
+ min-height:0;
+ margin:1%;
+ font-size:0.22em;
+ overflow:hidden;
+ padding:0 0.5%;
+ }
+
+ .slide {
+ background:#eee;
+ position:relative;
+ left:0;
+ top:0;
+ visibility:visible;
+ cursor:pointer;
+ }
+
+ iframe, img, video {
+ max-width:100%;
+ }
+
+ .deck-current, .no-touch & .slide:hover {
+ background:#ddf;
+ }
+}
View
43 ...tions/jsfoo-bangalore/inside-javascript-objects/extensions/navigation/deck.navigation.css
@@ -0,0 +1,43 @@
+.deck-container .deck-prev-link, .deck-container .deck-next-link {
+ display: none;
+ position: absolute;
+ z-index: 3;
+ top: 50%;
+ width: 32px;
+ height: 32px;
+ margin-top: -16px;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: 32px;
+ vertical-align: middle;
+ text-align: center;
+ text-decoration: none;
+ color: #fff;
+ background: #888;
+}
+.borderradius .deck-container .deck-prev-link, .borderradius .deck-container .deck-next-link {
+ -webkit-border-radius: 16px;
+ -moz-border-radius: 16px;
+ border-radius: 16px;
+}
+.deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-prev-link:active, .deck-container .deck-prev-link:visited, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus, .deck-container .deck-next-link:active, .deck-container .deck-next-link:visited {
+ color: #fff;
+}
+.deck-container .deck-prev-link {
+ left: 8px;
+}
+.deck-container .deck-next-link {
+ right: 8px;
+}
+.deck-container:hover .deck-prev-link, .deck-container:hover .deck-next-link {
+ display: block;
+}
+.deck-container:hover .deck-prev-link.deck-nav-disabled, .touch .deck-container:hover .deck-prev-link, .deck-container:hover .deck-next-link.deck-nav-disabled, .touch .deck-container:hover .deck-next-link {
+ display: none;
+}
+
+@media print {
+ .deck-prev-link, .deck-next-link {
+ display: none !important;
+ }
+}
View
3 ...ions/jsfoo-bangalore/inside-javascript-objects/extensions/navigation/deck.navigation.html
@@ -0,0 +1,3 @@
+<!-- Place the following snippet at the bottom of the deck container. -->
+<a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</a>
View
83 ...ations/jsfoo-bangalore/inside-javascript-objects/extensions/navigation/deck.navigation.js
@@ -0,0 +1,83 @@
+/*!
+Deck JS - deck.navigation - v1.0
+Copyright (c) 2011 Caleb Troughton
+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 clickable previous and next links to the deck.
+*/
+(function($, deck, undefined) {
+ var $d = $(document);
+
+ /*
+ Extends defaults/options.
+
+ options.classes.navDisabled
+ This class is added to a navigation link when that action is disabled.
+ It is added to the previous link when on the first slide, and to the
+ next link when on the last slide.
+
+ options.selectors.nextLink
+ The elements that match this selector will move the deck to the next
+ slide when clicked.
+
+ options.selectors.previousLink
+ The elements that match this selector will move to deck to the previous
+ slide when clicked.
+ */
+ $.extend(true, $[deck].defaults, {
+ classes: {
+ navDisabled: 'deck-nav-disabled'
+ },
+
+ selectors: {
+ nextLink: '.deck-next-link',
+ previousLink: '.deck-prev-link'
+ }
+ });
+
+ $d.bind('deck.init', function() {
+ var opts = $[deck]('getOptions'),
+ nextSlide = $[deck]('getSlide', 1),
+ nextId = nextSlide ? nextSlide.attr('id') : undefined;
+
+ // Setup prev/next link events
+ $(opts.selectors.previousLink)
+ .unbind('click.decknavigation')
+ .bind('click.decknavigation', function(e) {
+ $[deck]('prev');
+ e.preventDefault();
+ });
+
+ $(opts.selectors.nextLink)
+ .unbind('click.decknavigation')
+ .bind('click.decknavigation', function(e) {
+ $[deck]('next');
+ e.preventDefault();
+ });
+
+ // Start on first slide, previous link is disabled, set next link href
+ $(opts.selectors.previousLink).addClass(opts.classes.navDisabled);
+ $(opts.selectors.nextLink).attr('href', '#' + (nextId ? nextId : ''));
+ })
+ /* Updates link hrefs, and disabled states if last/first slide */
+ .bind('deck.change', function(e, from, to) {
+ var opts = $[deck]('getOptions'),
+ last = $[deck]('getSlides').length - 1,
+ prevSlide = $[deck]('getSlide', to - 1),
+ nextSlide = $[deck]('getSlide', to + 1),
+ prevId = prevSlide ? prevSlide.attr('id') : undefined;
+ nextId = nextSlide ? nextSlide.attr('id') : undefined;
+
+ $(opts.selectors.previousLink)
+ .toggleClass(opts.classes.navDisabled, !to)
+ .attr('href', '#' + (prevId ? prevId : ''));
+ $(opts.selectors.nextLink)
+ .toggleClass(opts.classes.navDisabled, to === last)
+ .attr('href', '#' + (nextId ? nextId : ''));
+ });
+})(jQuery, 'deck');
+
View
56 ...ions/jsfoo-bangalore/inside-javascript-objects/extensions/navigation/deck.navigation.scss
@@ -0,0 +1,56 @@
+@mixin border-radius($r) {
+ -webkit-border-radius:$r;
+ -moz-border-radius:$r;
+ border-radius:$r;
+}
+
+.deck-container {
+ .deck-prev-link, .deck-next-link {
+ display:none;
+ position:absolute;
+ z-index:3;
+ top:50%;
+ width:32px;
+ height:32px;
+ margin-top:-16px;
+ font-size:20px;
+ font-weight:bold;
+ line-height:32px;
+ vertical-align:middle;
+ text-align:center;
+ text-decoration:none;
+ color:#fff;
+ background:#888;
+
+ .borderradius & {
+ @include border-radius(16px);
+ }
+
+ &:hover, &:focus, &:active, &:visited {
+ color:#fff;
+ }
+ }
+
+ .deck-prev-link {
+ left:8px;
+ }
+
+ .deck-next-link {
+ right:8px;
+ }
+
+ &:hover .deck-prev-link, &:hover .deck-next-link {
+ display:block;
+
+ &.deck-nav-disabled, .touch & {
+ display:none;
+ }
+ }
+}
+
+
+@media print {
+ .deck-prev-link, .deck-next-link {
+ display:none !important;
+ }
+}
View
16 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/scale/deck.scale.css
@@ -0,0 +1,16 @@
+.csstransforms .deck-container.deck-scale {
+ width: auto;
+ -webkit-transform-origin: 50% 0;
+ -moz-transform-origin: 50% 0;
+ -o-transform-origin: 50% 0;
+ -ms-transform-origin: 50% 0;
+ transform-origin: 50% 0;
+}
+.csstransforms .deck-container.deck-scale.deck-menu {
+ width: 70%;
+ -webkit-transform: none !important;
+ -moz-transform: none !important;
+ -o-transform: none !important;
+ -ms-transform: none !important;
+ transform: none !important;
+}
View
155 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/scale/deck.scale.js
@@ -0,0 +1,155 @@
+/*!
+Deck JS - deck.scale - v1.0
+Copyright (c) 2011 Caleb Troughton
+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 automatic scaling to the deck. It should only be used on
+standalone decks where the body is the deck container. Slides are scaled down
+using CSS transforms to fit within the browser window. If the browser window
+is big enough to hold the slides without scaling, no scaling occurs. The user
+can disable and enable scaling with a keyboard shortcut.
+
+Note: CSS transforms make Flash videos render incorrectly. Presenters that
+need to use video will want to disable scaling to play them. HTML5 video
+works fine.
+*/
+(function($, deck, window, undefined) {
+ var $d = $(document),
+ $w = $(window),
+ baseHeight, // Value to scale against
+ timer, // Timeout id for debouncing
+
+ /*
+ Internal function to do all the dirty work of scaling the deck container.
+ */
+ scaleDeck = function() {
+ var obh = $[deck]('getOptions').baseHeight,
+ $container = $[deck]('getContainer'),
+ height = $w.height(),
+ slides = $[deck]('getSlides'),
+ scale,
+ transform;
+
+ // Don't scale if scaling disabled
+ if (!$container.hasClass($[deck]('getOptions').classes.scale)) {
+ scale = 1;
+ }
+ else {
+ // Use tallest slide as base height if not set manually
+ baseHeight = obh ? obh : (function() {
+ var greatest = 0;
+
+ $.each(slides, function(i, $slide) {
+ greatest = Math.max(greatest, $slide.outerHeight());
+ });
+
+ return greatest;
+ })();
+
+ scale = height / baseHeight;
+ }
+
+ // Scale, but don't scale up
+ transform = scale >= 1 ? 'none' : 'scale(' + scale + ')';
+ $.each('Webkit Moz O ms Khtml'.split(' '), function(i, prefix) {
+ $container.css(prefix + 'Transform', transform);
+ });
+ };
+
+ /*
+ Extends defaults/options.
+
+ options.classes.scale
+ This class is added to the deck container when scaling is enabled.
+ It is enabled by default when the module is included.
+
+ options.keys.scale
+ The numeric keycode used to toggle enabling and disabling scaling.
+
+ options.baseHeight
+ When baseheight is falsy, as it is by default, the deck is scaled
+ in proportion to the height of the slides. You may instead specify
+ a height, and the deck will be scaled against this height regardless
+ of the actual content height.
+
+ options.scaleDebounce
+ Scaling on the browser resize event is debounced. This number is the
+ threshold in milliseconds. You can learn more about debouncing here:
+ http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+
+ */
+ $.extend(true, $[deck].defaults, {
+ classes: {
+ scale: 'deck-scale'
+ },
+
+ keys: {
+ scale: 83 // s
+ },
+
+ baseHeight: null,
+ scaleDebounce: 200
+ });
+
+ /*
+ jQuery.deck('disableScale')
+
+ Disables scaling and removes the scale class from the deck container.
+ */
+ $[deck]('extend', 'disableScale', function() {
+ $[deck]('getContainer').removeClass($[deck]('getOptions').classes.scale);
+ scaleDeck();
+ });
+
+ /*
+ jQuery.deck('enableScale')
+
+ Enables scaling and adds the scale class to the deck container.
+ */
+ $[deck]('extend', 'enableScale', function() {
+ $[deck]('getContainer').addClass($[deck]('getOptions').classes.scale);
+ scaleDeck();
+ });
+
+ /*
+ jQuery.deck('toggleScale')
+
+ Toggles between enabling and disabling scaling.
+ */
+ $[deck]('extend', 'toggleScale', function() {
+ var $c = $[deck]('getContainer');
+ $[deck]($c.hasClass($[deck]('getOptions').classes.scale) ?
+ 'disableScale' : 'enableScale');
+ });
+
+ $d.bind('deck.init', function() {
+ var opts = $[deck]('getOptions');
+
+ // Scaling enabled at start
+ $[deck]('getContainer').addClass(opts.classes.scale);
+
+ // Debounce the resize scaling
+ $w.unbind('resize.deckscale').bind('resize.deckscale', function() {
+ window.clearTimeout(timer);
+ timer = window.setTimeout(scaleDeck, opts.scaleDebounce);
+ })
+ // Scale once on load, in case images or something change layout
+ .unbind('load.deckscale').bind('load.deckscale', scaleDeck);
+
+ // Bind key events
+ $d.unbind('keydown.deckscale').bind('keydown.deckscale', function(e) {
+ if (e.which === opts.keys.scale || $.inArray(e.which, opts.keys.scale) > -1) {
+ $[deck]('toggleScale');
+ e.preventDefault();
+ }
+ });
+
+ // Scale once on init
+ scaleDeck();
+ });
+})(jQuery, 'deck', this);
+
View
17 presentations/jsfoo-bangalore/inside-javascript-objects/extensions/scale/deck.scale.scss
@@ -0,0 +1,17 @@
+.csstransforms .deck-container.deck-scale {
+ width:auto;
+ -webkit-transform-origin: 50% 0;
+ -moz-transform-origin: 50% 0;
+ -o-transform-origin: 50% 0;
+ -ms-transform-origin: 50% 0;
+ transform-origin: 50% 0;
+
+ &.deck-menu {
+ width:70%;
+ -webkit-transform:none !important;
+ -moz-transform:none !important;
+ -o-transform:none !important;
+ -ms-transform:none !important;
+ transform:none !important;
+ }
+}