deckrb 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. data/README.md +63 -0
  2. data/bin/deck +59 -0
  3. data/deck/GPL-license.txt +278 -0
  4. data/deck/MIT-license.txt +21 -0
  5. data/deck/README.md +57 -0
  6. data/deck/core/deck.core.css +404 -0
  7. data/deck/core/deck.core.html +39 -0
  8. data/deck/core/deck.core.js +498 -0
  9. data/deck/core/deck.core.scss +447 -0
  10. data/deck/extensions/goto/deck.goto.css +41 -0
  11. data/deck/extensions/goto/deck.goto.html +7 -0
  12. data/deck/extensions/goto/deck.goto.js +134 -0
  13. data/deck/extensions/goto/deck.goto.scss +46 -0
  14. data/deck/extensions/hash/deck.hash.css +13 -0
  15. data/deck/extensions/hash/deck.hash.html +2 -0
  16. data/deck/extensions/hash/deck.hash.js +129 -0
  17. data/deck/extensions/hash/deck.hash.scss +15 -0
  18. data/deck/extensions/menu/deck.menu.css +47 -0
  19. data/deck/extensions/menu/deck.menu.js +187 -0
  20. data/deck/extensions/menu/deck.menu.scss +58 -0
  21. data/deck/extensions/navigation/deck.navigation.css +43 -0
  22. data/deck/extensions/navigation/deck.navigation.html +3 -0
  23. data/deck/extensions/navigation/deck.navigation.js +91 -0
  24. data/deck/extensions/navigation/deck.navigation.scss +56 -0
  25. data/deck/extensions/scale/deck.scale.css +16 -0
  26. data/deck/extensions/scale/deck.scale.js +155 -0
  27. data/deck/extensions/scale/deck.scale.scss +17 -0
  28. data/deck/extensions/status/deck.status.css +18 -0
  29. data/deck/extensions/status/deck.status.html +6 -0
  30. data/deck/extensions/status/deck.status.js +95 -0
  31. data/deck/extensions/status/deck.status.scss +22 -0
  32. data/deck/extensions/theme-picker/deck.theme-picker.css +55 -0
  33. data/deck/extensions/theme-picker/deck.theme-picker.js +13 -0
  34. data/deck/introduction/index.html +221 -0
  35. data/deck/introduction/index.rb +101 -0
  36. data/deck/jquery-1.7.min.js +4 -0
  37. data/deck/modernizr.custom.js +4 -0
  38. data/deck/test/fixtures/complex.html +24 -0
  39. data/deck/test/fixtures/empty.html +19 -0
  40. data/deck/test/fixtures/iframe_simple.html +10 -0
  41. data/deck/test/fixtures/iframes.html +32 -0
  42. data/deck/test/fixtures/nesteds.html +36 -0
  43. data/deck/test/fixtures/standard.html +42 -0
  44. data/deck/test/index.html +39 -0
  45. data/deck/test/lib/jasmine-html.js +190 -0
  46. data/deck/test/lib/jasmine-jquery.js +288 -0
  47. data/deck/test/lib/jasmine.css +166 -0
  48. data/deck/test/lib/jasmine.js +2477 -0
  49. data/deck/test/settings.js +3 -0
  50. data/deck/test/spec.core.js +434 -0
  51. data/deck/test/spec.goto.js +119 -0
  52. data/deck/test/spec.hash.js +81 -0
  53. data/deck/test/spec.menu.js +66 -0
  54. data/deck/test/spec.navigation.js +51 -0
  55. data/deck/test/spec.scale.js +57 -0
  56. data/deck/test/spec.status.js +58 -0
  57. data/deck/themes/style/neon.css +114 -0
  58. data/deck/themes/style/neon.scss +139 -0
  59. data/deck/themes/style/swiss.css +75 -0
  60. data/deck/themes/style/swiss.scss +91 -0
  61. data/deck/themes/style/web-2.0.css +205 -0
  62. data/deck/themes/style/web-2.0.scss +236 -0
  63. data/deck/themes/transition/fade.css +44 -0
  64. data/deck/themes/transition/fade.scss +70 -0
  65. data/deck/themes/transition/horizontal-slide.css +79 -0
  66. data/deck/themes/transition/horizontal-slide.scss +94 -0
  67. data/deck/themes/transition/vertical-slide.css +97 -0
  68. data/deck/themes/transition/vertical-slide.scss +116 -0
  69. data/lib/deck.rb +7 -0
  70. data/lib/deck/app.rb +16 -0
  71. data/lib/deck/deck.rb +166 -0
  72. data/lib/deck/rack_static_patch.rb +13 -0
  73. data/lib/deck/slide.rb +120 -0
  74. data/lib/deck/version.rb +3 -0
  75. data/spec/deck_spec.rb +98 -0
  76. data/spec/javascripts/support/jasmine_config.rb +23 -0
  77. data/spec/javascripts/support/jasmine_runner.rb +32 -0
  78. data/spec/slide_spec.rb +285 -0
  79. data/spec/spec_helper.rb +7 -0
  80. metadata +172 -0
@@ -0,0 +1,404 @@
1
+ html {
2
+ height: 100%;
3
+ }
4
+
5
+ .deck-container {
6
+ position: relative;
7
+ height: 100%;
8
+ width: 70%;
9
+ margin: 0 auto;
10
+ padding: 0 48px;
11
+ font-size: 16px;
12
+ line-height: 1.25;
13
+ overflow: hidden;
14
+ /* Resets and base styles from HTML5 Boilerplate */
15
+ /* End HTML5 Boilerplate adaptations */
16
+ }
17
+ .js .deck-container {
18
+ visibility: hidden;
19
+ }
20
+ .ready .deck-container {
21
+ visibility: visible;
22
+ }
23
+ .touch .deck-container {
24
+ -webkit-text-size-adjust: none;
25
+ }
26
+ .deck-container div, .deck-container span, .deck-container object, .deck-container iframe,
27
+ .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,
28
+ .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,
29
+ .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,
30
+ .deck-container fieldset, .deck-container form, .deck-container label, .deck-container legend,
31
+ .deck-container table, .deck-container caption, .deck-container tbody, .deck-container tfoot, .deck-container thead, .deck-container tr, .deck-container th, .deck-container td,
32
+ .deck-container article, .deck-container aside, .deck-container canvas, .deck-container details, .deck-container figcaption, .deck-container figure,
33
+ .deck-container footer, .deck-container header, .deck-container hgroup, .deck-container menu, .deck-container nav, .deck-container section, .deck-container summary,
34
+ .deck-container time, .deck-container mark, .deck-container audio, .deck-container video {
35
+ margin: 0;
36
+ padding: 0;
37
+ border: 0;
38
+ font-size: 100%;
39
+ font: inherit;
40
+ vertical-align: baseline;
41
+ }
42
+ .deck-container article, .deck-container aside, .deck-container details, .deck-container figcaption, .deck-container figure,
43
+ .deck-container footer, .deck-container header, .deck-container hgroup, .deck-container menu, .deck-container nav, .deck-container section {
44
+ display: block;
45
+ }
46
+ .deck-container blockquote, .deck-container q {
47
+ quotes: none;
48
+ }
49
+ .deck-container blockquote:before, .deck-container blockquote:after, .deck-container q:before, .deck-container q:after {
50
+ content: "";
51
+ content: none;
52
+ }
53
+ .deck-container ins {
54
+ background-color: #ff9;
55
+ color: #000;
56
+ text-decoration: none;
57
+ }
58
+ .deck-container mark {
59
+ background-color: #ff9;
60
+ color: #000;
61
+ font-style: italic;
62
+ font-weight: bold;
63
+ }
64
+ .deck-container del {
65
+ text-decoration: line-through;
66
+ }
67
+ .deck-container abbr[title], .deck-container dfn[title] {
68
+ border-bottom: 1px dotted;
69
+ cursor: help;
70
+ }
71
+ .deck-container table {
72
+ border-collapse: collapse;
73
+ border-spacing: 0;
74
+ }
75
+ .deck-container hr {
76
+ display: block;
77
+ height: 1px;
78
+ border: 0;
79
+ border-top: 1px solid #ccc;
80
+ margin: 1em 0;
81
+ padding: 0;
82
+ }
83
+ .deck-container input, .deck-container select {
84
+ vertical-align: middle;
85
+ }
86
+ .deck-container select, .deck-container input, .deck-container textarea, .deck-container button {
87
+ font: 99% sans-serif;
88
+ }
89
+ .deck-container pre, .deck-container code, .deck-container kbd, .deck-container samp {
90
+ font-family: monospace, sans-serif;
91
+ }
92
+ .deck-container a {
93
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
94
+ }
95
+ .deck-container a:hover, .deck-container a:active {
96
+ outline: none;
97
+ }
98
+ .deck-container ul, .deck-container ol {
99
+ margin-left: 2em;
100
+ vertical-align: top;
101
+ }
102
+ .deck-container ol {
103
+ list-style-type: decimal;
104
+ }
105
+ .deck-container nav ul, .deck-container nav li {
106
+ margin: 0;
107
+ list-style: none;
108
+ list-style-image: none;
109
+ }
110
+ .deck-container small {
111
+ font-size: 85%;
112
+ }
113
+ .deck-container strong, .deck-container th {
114
+ font-weight: bold;
115
+ }
116
+ .deck-container td {
117
+ vertical-align: top;
118
+ }
119
+ .deck-container sub, .deck-container sup {
120
+ font-size: 75%;
121
+ line-height: 0;
122
+ position: relative;
123
+ }
124
+ .deck-container sup {
125
+ top: -0.5em;
126
+ }
127
+ .deck-container sub {
128
+ bottom: -0.25em;
129
+ }
130
+ .deck-container textarea {
131
+ overflow: auto;
132
+ }
133
+ .ie6 .deck-container legend, .ie7 .deck-container legend {
134
+ margin-left: -7px;
135
+ }
136
+ .deck-container input[type="radio"] {
137
+ vertical-align: text-bottom;
138
+ }
139
+ .deck-container input[type="checkbox"] {
140
+ vertical-align: bottom;
141
+ }
142
+ .ie7 .deck-container input[type="checkbox"] {
143
+ vertical-align: baseline;
144
+ }
145
+ .ie6 .deck-container input {
146
+ vertical-align: text-bottom;
147
+ }
148
+ .deck-container label, .deck-container input[type="button"], .deck-container input[type="submit"], .deck-container input[type="image"], .deck-container button {
149
+ cursor: pointer;
150
+ }
151
+ .deck-container button, .deck-container input, .deck-container select, .deck-container textarea {
152
+ margin: 0;
153
+ }
154
+ .deck-container input:invalid, .deck-container textarea:invalid {
155
+ border-radius: 1px;
156
+ -moz-box-shadow: 0px 0px 5px red;
157
+ -webkit-box-shadow: 0px 0px 5px red;
158
+ box-shadow: 0px 0px 5px red;
159
+ }
160
+ .deck-container input:invalid .no-boxshadow, .deck-container textarea:invalid .no-boxshadow {
161
+ background-color: #f0dddd;
162
+ }
163
+ .deck-container button {
164
+ width: auto;
165
+ overflow: visible;
166
+ }
167
+ .ie7 .deck-container img {
168
+ -ms-interpolation-mode: bicubic;
169
+ }
170
+ .deck-container, .deck-container select, .deck-container input, .deck-container textarea {
171
+ color: #444;
172
+ }
173
+ .deck-container a {
174
+ color: #607890;
175
+ }
176
+ .deck-container a:hover, .deck-container a:focus {
177
+ color: #036;
178
+ }
179
+ .deck-container a:link {
180
+ -webkit-tap-highlight-color: #fff;
181
+ }
182
+ .deck-container.deck-loading {
183
+ display: none;
184
+ }
185
+
186
+ .slide {
187
+ width: auto;
188
+ min-height: 100%;
189
+ position: relative;
190
+ }
191
+ .slide h1 {
192
+ font-size: 4.5em;
193
+ }
194
+ .slide h1, .slide .vcenter {
195
+ font-weight: bold;
196
+ text-align: center;
197
+ padding-top: 1em;
198
+ max-height: 100%;
199
+ }
200
+ .csstransforms .slide h1, .csstransforms .slide .vcenter {
201
+ padding: 0 48px;
202
+ position: absolute;
203
+ left: 0;
204
+ right: 0;
205
+ top: 50%;
206
+ -webkit-transform: translate(0, -50%);
207
+ -moz-transform: translate(0, -50%);
208
+ -ms-transform: translate(0, -50%);
209
+ -o-transform: translate(0, -50%);
210
+ transform: translate(0, -50%);
211
+ }
212
+ .slide .vcenter h1 {
213
+ position: relative;
214
+ top: auto;
215
+ padding: 0;
216
+ -webkit-transform: none;
217
+ -moz-transform: none;
218
+ -ms-transform: none;
219
+ -o-transform: none;
220
+ transform: none;
221
+ }
222
+ .slide h2 {
223
+ font-size: 2.25em;
224
+ font-weight: bold;
225
+ padding-top: .5em;
226
+ margin: 0 0 .66666em 0;
227
+ border-bottom: 3px solid #888;
228
+ }
229
+ .slide h3 {
230
+ font-size: 1.4375em;
231
+ font-weight: bold;
232
+ margin-bottom: .30435em;
233
+ }
234
+ .slide h4 {
235
+ font-size: 1.25em;
236
+ font-weight: bold;
237
+ margin-bottom: .25em;
238
+ }
239
+ .slide h5 {
240
+ font-size: 1.125em;
241
+ font-weight: bold;
242
+ margin-bottom: .2222em;
243
+ }
244
+ .slide h6 {
245
+ font-size: 1em;
246
+ font-weight: bold;
247
+ }
248
+ .slide img, .slide iframe, .slide video {
249
+ display: block;
250
+ max-width: 100%;
251
+ }
252
+ .slide video, .slide iframe, .slide img {
253
+ display: block;
254
+ margin: 0 auto;
255
+ }
256
+ .slide p, .slide blockquote, .slide iframe, .slide img, .slide ul, .slide ol, .slide pre, .slide video {
257
+ margin-bottom: 1em;
258
+ }
259
+ .slide pre {
260
+ white-space: pre;
261
+ white-space: pre-wrap;
262
+ word-wrap: break-word;
263
+ padding: 1em;
264
+ border: 1px solid #888;
265
+ }
266
+ .slide em {
267
+ font-style: italic;
268
+ }
269
+ .slide li {
270
+ padding: .25em 0;
271
+ vertical-align: middle;
272
+ }
273
+
274
+ .deck-before, .deck-previous, .deck-next, .deck-after {
275
+ position: absolute;
276
+ left: -999em;
277
+ top: -999em;
278
+ }
279
+
280
+ .deck-current {
281
+ z-index: 2;
282
+ }
283
+
284
+ .slide .slide {
285
+ visibility: hidden;
286
+ position: static;
287
+ min-height: 0;
288
+ }
289
+
290
+ .deck-child-current {
291
+ position: static;
292
+ z-index: 2;
293
+ }
294
+ .deck-child-current .slide {
295
+ visibility: hidden;
296
+ }
297
+ .deck-child-current .deck-previous, .deck-child-current .deck-before, .deck-child-current .deck-current {
298
+ visibility: visible;
299
+ }
300
+
301
+ body.deck-container {
302
+ overflow: visible;
303
+ }
304
+
305
+ @media screen and (max-device-width: 480px) {
306
+ /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
307
+ }
308
+ @media print {
309
+ * {
310
+ background: transparent !important;
311
+ color: black !important;
312
+ text-shadow: none !important;
313
+ filter: none !important;
314
+ -ms-filter: none !important;
315
+ -webkit-box-reflect: none !important;
316
+ -moz-box-reflect: none !important;
317
+ -webkit-box-shadow: none !important;
318
+ -moz-box-shadow: none !important;
319
+ box-shadow: none !important;
320
+ }
321
+ * :before, * :after {
322
+ display: none !important;
323
+ }
324
+
325
+ a, a:visited {
326
+ color: #444 !important;
327
+ text-decoration: underline;
328
+ }
329
+
330
+ a[href]:after {
331
+ content: " (" attr(href) ")";
332
+ }
333
+
334
+ abbr[title]:after {
335
+ content: " (" attr(title) ")";
336
+ }
337
+
338
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
339
+ content: "";
340
+ }
341
+
342
+ pre, blockquote {
343
+ border: 1px solid #999;
344
+ page-break-inside: avoid;
345
+ }
346
+
347
+ thead {
348
+ display: table-header-group;
349
+ }
350
+
351
+ tr, img {
352
+ page-break-inside: avoid;
353
+ }
354
+
355
+ @page {
356
+ margin: 0.5cm;
357
+ }
358
+
359
+ p, h2, h3 {
360
+ orphans: 3;
361
+ widows: 3;
362
+ }
363
+
364
+ h2, h3 {
365
+ page-break-after: avoid;
366
+ }
367
+
368
+ .slide {
369
+ position: static !important;
370
+ visibility: visible !important;
371
+ display: block !important;
372
+ -webkit-transform: none !important;
373
+ -moz-transform: none !important;
374
+ -o-transform: none !important;
375
+ -ms-transform: none !important;
376
+ transform: none !important;
377
+ opacity: 1 !important;
378
+ }
379
+
380
+ h1, .vcenter {
381
+ -webkit-transform: none !important;
382
+ -moz-transform: none !important;
383
+ -o-transform: none !important;
384
+ -ms-transform: none !important;
385
+ transform: none !important;
386
+ padding: 0 !important;
387
+ position: static !important;
388
+ }
389
+
390
+ .deck-container > .slide {
391
+ page-break-after: always;
392
+ }
393
+
394
+ .deck-container {
395
+ width: 100% !important;
396
+ height: auto !important;
397
+ padding: 0 !important;
398
+ display: block !important;
399
+ }
400
+
401
+ script {
402
+ display: none;
403
+ }
404
+ }
@@ -0,0 +1,39 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Deck Skeleton</title>
6
+ <meta name="viewport" content="width=1024, user-scalable=no">
7
+
8
+ <!-- Replace path with correct path to deck.core.css. -->
9
+ <link rel="stylesheet" href="/PATH/TO/CSS/deck.core.css" type="text/css">
10
+
11
+ <!-- Any other extension CSS files go here. -->
12
+
13
+ <!-- Replace path with correct path to Modernizr file. -->
14
+ <script src="/PATH/TO/JS/modernizr.custom.js"></script>
15
+ </head>
16
+ <body class="deck-container">
17
+
18
+ <!-- Create any number of elements with class slide within the container -->
19
+ <section class="slide">
20
+ <!-- Slide content HTML goes here! -->
21
+ </section>
22
+
23
+ <!-- Other extension HTML snippets go here, at the bottom of the deck container. -->
24
+
25
+ <!-- Update these paths to point to the correct files. -->
26
+ <script src="/PATH/TO/JS/jquery.min.js"></script>
27
+ <script src="/PATH/TO/JS/deck.core.js"></script>
28
+
29
+ <!-- Add any other extension JS files here -->
30
+
31
+
32
+ <!-- Initialize the deck. You can put this in an external file if desired. -->
33
+ <script>
34
+ $(function() {
35
+ $.deck('.slide');
36
+ });
37
+ </script>
38
+ </body>
39
+ </html>
@@ -0,0 +1,498 @@
1
+ /*!
2
+ Deck JS - deck.core
3
+ Copyright (c) 2011 Caleb Troughton
4
+ Dual licensed under the MIT license and GPL license.
5
+ https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
6
+ https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
7
+ */
8
+
9
+ /*
10
+ The deck.core module provides all the basic functionality for creating and
11
+ moving through a deck. It does so by applying classes to indicate the state of
12
+ the deck and its slides, allowing CSS to take care of the visual representation
13
+ of each state. It also provides methods for navigating the deck and inspecting
14
+ its state, as well as basic key bindings for going to the next and previous
15
+ slides. More functionality is provided by wholly separate extension modules
16
+ that use the API provided by core.
17
+ */
18
+ (function($, deck, document, undefined) {
19
+ var slides, // Array of all the uh, slides...
20
+ current, // Array index of the current slide
21
+ $container, // Keeping this cached
22
+
23
+ events = {
24
+ /*
25
+ This event fires whenever the current slide changes, whether by way of
26
+ next, prev, or go. The callback function is passed two parameters, from
27
+ and to, equal to the indices of the old slide and the new slide
28
+ respectively. If preventDefault is called on the event within this handler
29
+ the slide change does not occur.
30
+
31
+ $(document).bind('deck.change', function(event, from, to) {
32
+ alert('Moving from slide ' + from + ' to ' + to);
33
+ });
34
+ */
35
+ change: 'deck.change',
36
+
37
+ /*
38
+ This event fires at the beginning of deck initialization, after the options
39
+ are set but before the slides array is created. This event makes a good hook
40
+ for preprocessing extensions looking to modify the deck.
41
+ */
42
+ beforeInitialize: 'deck.beforeInit',
43
+
44
+ /*
45
+ This event fires at the end of deck initialization. Extensions should
46
+ implement any code that relies on user extensible options (key bindings,
47
+ element selectors, classes) within a handler for this event. Native
48
+ events associated with Deck JS should be scoped under a .deck event
49
+ namespace, as with the example below:
50
+
51
+ var $d = $(document);
52
+ $.deck.defaults.keys.myExtensionKeycode = 70; // 'h'
53
+ $d.bind('deck.init', function() {
54
+ $d.bind('keydown.deck', function(event) {
55
+ if (event.which === $.deck.getOptions().keys.myExtensionKeycode) {
56
+ // Rock out
57
+ }
58
+ });
59
+ });
60
+ */
61
+ initialize: 'deck.init'
62
+ },
63
+
64
+ options = {},
65
+ $d = $(document),
66
+
67
+ /*
68
+ Internal function. Updates slide and container classes based on which
69
+ slide is the current slide.
70
+ */
71
+ updateStates = function() {
72
+ var oc = options.classes,
73
+ osc = options.selectors.container,
74
+ old = $container.data('onSlide'),
75
+ $all = $();
76
+
77
+ // Container state
78
+ $container.removeClass(oc.onPrefix + old)
79
+ .addClass(oc.onPrefix + current)
80
+ .data('onSlide', current);
81
+
82
+ // Remove and re-add child-current classes for nesting
83
+ $('.' + oc.current).parentsUntil(osc).removeClass(oc.childCurrent);
84
+ slides[current].parentsUntil(osc).addClass(oc.childCurrent);
85
+
86
+ // Remove previous states
87
+ $.each(slides, function(i, el) {
88
+ $all = $all.add(el);
89
+ });
90
+ $all.removeClass([
91
+ oc.before,
92
+ oc.previous,
93
+ oc.current,
94
+ oc.next,
95
+ oc.after
96
+ ].join(" "));
97
+
98
+ // Add new states back in
99
+ slides[current].addClass(oc.current);
100
+ if (current > 0) {
101
+ slides[current-1].addClass(oc.previous);
102
+ }
103
+ if (current + 1 < slides.length) {
104
+ slides[current+1].addClass(oc.next);
105
+ }
106
+ if (current > 1) {
107
+ $.each(slides.slice(0, current - 1), function(i, el) {
108
+ el.addClass(oc.before);
109
+ });
110
+ }
111
+ if (current + 2 < slides.length) {
112
+ $.each(slides.slice(current+2), function(i, el) {
113
+ el.addClass(oc.after);
114
+ });
115
+ }
116
+ },
117
+
118
+ /* Methods exposed in the jQuery.deck namespace */
119
+ methods = {
120
+
121
+ /*
122
+ jQuery.deck(selector, options)
123
+
124
+ selector: string | jQuery | array
125
+ options: object, optional
126
+
127
+ Initializes the deck, using each element matched by selector as a slide.
128
+ May also be passed an array of string selectors or jQuery objects, in
129
+ which case each selector in the array is considered a slide. The second
130
+ parameter is an optional options object which will extend the default
131
+ values.
132
+
133
+ $.deck('.slide');
134
+
135
+ or
136
+
137
+ $.deck([
138
+ '#first-slide',
139
+ '#second-slide',
140
+ '#etc'
141
+ ]);
142
+ */
143
+ init: function(elements, opts) {
144
+ var startTouch,
145
+ tolerance,
146
+ esp = function(e) {
147
+ e.stopPropagation();
148
+ };
149
+
150
+ options = $.extend(true, {}, $[deck].defaults, opts);
151
+ slides = [];
152
+ current = 0;
153
+ $container = $(options.selectors.container);
154
+ tolerance = options.touch.swipeTolerance;
155
+
156
+ // Pre init event for preprocessing hooks
157
+ $d.trigger(events.beforeInitialize);
158
+
159
+ // Hide the deck while states are being applied to kill transitions
160
+ $container.addClass(options.classes.loading);
161
+
162
+ // Fill slides array depending on parameter type
163
+ if ($.isArray(elements)) {
164
+ $.each(elements, function(i, e) {
165
+ slides.push($(e));
166
+ });
167
+ }
168
+ else {
169
+ $(elements).each(function(i, e) {
170
+ slides.push($(e));
171
+ });
172
+ }
173
+
174
+ /* Remove any previous bindings, and rebind key events */
175
+ $d.unbind('keydown.deck').bind('keydown.deck', function(e) {
176
+ if (e.which === options.keys.next || $.inArray(e.which, options.keys.next) > -1) {
177
+ methods.next();
178
+ e.preventDefault();
179
+ }
180
+ else if (e.which === options.keys.previous || $.inArray(e.which, options.keys.previous) > -1) {
181
+ methods.prev();
182
+ e.preventDefault();
183
+ }
184
+ });
185
+
186
+ /* Bind touch events for swiping between slides on touch devices */
187
+ $container.unbind('touchstart.deck').bind('touchstart.deck', function(e) {
188
+ if (!startTouch) {
189
+ startTouch = $.extend({}, e.originalEvent.targetTouches[0]);
190
+ }
191
+ })
192
+ .unbind('touchmove.deck').bind('touchmove.deck', function(e) {
193
+ $.each(e.originalEvent.changedTouches, function(i, t) {
194
+ if (startTouch && t.identifier === startTouch.identifier) {
195
+ if (t.screenX - startTouch.screenX > tolerance || t.screenY - startTouch.screenY > tolerance) {
196
+ $[deck]('prev');
197
+ startTouch = undefined;
198
+ }
199
+ else if (t.screenX - startTouch.screenX < -1 * tolerance || t.screenY - startTouch.screenY < -1 * tolerance) {
200
+ $[deck]('next');
201
+ startTouch = undefined;
202
+ }
203
+ return false;
204
+ }
205
+ });
206
+ e.preventDefault();
207
+ })
208
+ .unbind('touchend.deck').bind('touchend.deck', function(t) {
209
+ $.each(t.originalEvent.changedTouches, function(i, t) {
210
+ if (startTouch && t.identifier === startTouch.identifier) {
211
+ startTouch = undefined;
212
+ }
213
+ });
214
+ })
215
+ .scrollLeft(0).scrollTop(0)
216
+ /* Stop propagation of key events within editable elements of slides */
217
+ .undelegate('input, textarea, select, button, meter, progress, [contentEditable]', 'keydown', esp)
218
+ .delegate('input, textarea, select, button, meter, progress, [contentEditable]', 'keydown', esp);
219
+
220
+ /*
221
+ Kick iframe videos, which dont like to redraw w/ transforms.
222
+ Remove this if Webkit ever fixes it.
223
+ */
224
+ $.each(slides, function(i, $el) {
225
+ $el.unbind('webkitTransitionEnd.deck').bind('webkitTransitionEnd.deck',
226
+ function(event) {
227
+ if ($el.hasClass($[deck]('getOptions').classes.current)) {
228
+ var embeds = $(this).find('iframe').css('opacity', 0);
229
+ window.setTimeout(function() {
230
+ embeds.css('opacity', 1);
231
+ }, 100);
232
+ }
233
+ });
234
+ });
235
+
236
+ if (slides.length) {
237
+ updateStates();
238
+ }
239
+
240
+ // Show deck again now that slides are in place
241
+ $container.removeClass(options.classes.loading);
242
+ $d.trigger(events.initialize);
243
+ },
244
+
245
+ /*
246
+ jQuery.deck('go', index)
247
+
248
+ index: integer | string
249
+
250
+ Moves to the slide at the specified index if index is a number. Index is
251
+ 0-based, so $.deck('go', 0); will move to the first slide. If index is a
252
+ string this will move to the slide with the specified id. If index is out
253
+ of bounds or doesn't match a slide id the call is ignored.
254
+ */
255
+ go: function(index) {
256
+ var e = $.Event(events.change),
257
+ ndx;
258
+
259
+ /* Number index, easy. */
260
+ if (typeof index === 'number' && index >= 0 && index < slides.length) {
261
+ ndx = index;
262
+ }
263
+ /* Id string index, search for it and set integer index */
264
+ else if (typeof index === 'string') {
265
+ $.each(slides, function(i, $slide) {
266
+ if ($slide.attr('id') === index) {
267
+ ndx = i;
268
+ return false;
269
+ }
270
+ });
271
+ };
272
+
273
+ /* Out of bounds, id doesn't exist, illegal input, eject */
274
+ if (typeof ndx === 'undefined') return;
275
+
276
+ $d.trigger(e, [current, ndx]);
277
+ if (e.isDefaultPrevented()) {
278
+ /* Trigger the event again and undo the damage done by extensions. */
279
+ $d.trigger(events.change, [ndx, current]);
280
+ }
281
+ else {
282
+ current = ndx;
283
+ updateStates();
284
+ }
285
+ },
286
+
287
+ /*
288
+ jQuery.deck('next')
289
+
290
+ Moves to the next slide. If the last slide is already active, the call
291
+ is ignored.
292
+ */
293
+ next: function() {
294
+ methods.go(current+1);
295
+ },
296
+
297
+ /*
298
+ jQuery.deck('prev')
299
+
300
+ Moves to the previous slide. If the first slide is already active, the
301
+ call is ignored.
302
+ */
303
+ prev: function() {
304
+ methods.go(current-1);
305
+ },
306
+
307
+ /*
308
+ jQuery.deck('getSlide', index)
309
+
310
+ index: integer, optional
311
+
312
+ Returns a jQuery object containing the slide at index. If index is not
313
+ specified, the current slide is returned.
314
+ */
315
+ getSlide: function(index) {
316
+ var i = typeof index !== 'undefined' ? index : current;
317
+ if (typeof i != 'number' || i < 0 || i >= slides.length) return null;
318
+ return slides[i];
319
+ },
320
+
321
+ /*
322
+ jQuery.deck('getSlides')
323
+
324
+ Returns all slides as an array of jQuery objects.
325
+ */
326
+ getSlides: function() {
327
+ return slides;
328
+ },
329
+
330
+ /*
331
+ jQuery.deck('getContainer')
332
+
333
+ Returns a jQuery object containing the deck container as defined by the
334
+ container option.
335
+ */
336
+ getContainer: function() {
337
+ return $container;
338
+ },
339
+
340
+ /*
341
+ jQuery.deck('getOptions')
342
+
343
+ Returns the options object for the deck, including any overrides that
344
+ were defined at initialization.
345
+ */
346
+ getOptions: function() {
347
+ return options;
348
+ },
349
+
350
+ /*
351
+ jQuery.deck('extend', name, method)
352
+
353
+ name: string
354
+ method: function
355
+
356
+ Adds method to the deck namespace with the key of name. This doesn’t
357
+ give access to any private member data — public methods must still be
358
+ used within method — but lets extension authors piggyback on the deck
359
+ namespace rather than pollute jQuery.
360
+
361
+ $.deck('extend', 'alert', function(msg) {
362
+ alert(msg);
363
+ });
364
+
365
+ // Alerts 'boom'
366
+ $.deck('alert', 'boom');
367
+ */
368
+ extend: function(name, method) {
369
+ methods[name] = method;
370
+ }
371
+ };
372
+
373
+ /* jQuery extension */
374
+ $[deck] = function(method, arg) {
375
+ if (methods[method]) {
376
+ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
377
+ }
378
+ else {
379
+ return methods.init(method, arg);
380
+ }
381
+ };
382
+
383
+ /*
384
+ The default settings object for a deck. All deck extensions should extend
385
+ this object to add defaults for any of their options.
386
+
387
+ options.classes.after
388
+ This class is added to all slides that appear after the 'next' slide.
389
+
390
+ options.classes.before
391
+ This class is added to all slides that appear before the 'previous'
392
+ slide.
393
+
394
+ options.classes.childCurrent
395
+ This class is added to all elements in the DOM tree between the
396
+ 'current' slide and the deck container. For standard slides, this is
397
+ mostly seen and used for nested slides.
398
+
399
+ options.classes.current
400
+ This class is added to the current slide.
401
+
402
+ options.classes.loading
403
+ This class is applied to the deck container during loading phases and is
404
+ primarily used as a way to short circuit transitions between states
405
+ where such transitions are distracting or unwanted. For example, this
406
+ class is applied during deck initialization and then removed to prevent
407
+ all the slides from appearing stacked and transitioning into place
408
+ on load.
409
+
410
+ options.classes.next
411
+ This class is added to the slide immediately following the 'current'
412
+ slide.
413
+
414
+ options.classes.onPrefix
415
+ This prefix, concatenated with the current slide index, is added to the
416
+ deck container as you change slides.
417
+
418
+ options.classes.previous
419
+ This class is added to the slide immediately preceding the 'current'
420
+ slide.
421
+
422
+ options.selectors.container
423
+ Elements matched by this CSS selector will be considered the deck
424
+ container. The deck container is used to scope certain states of the
425
+ deck, as with the onPrefix option, or with extensions such as deck.goto
426
+ and deck.menu.
427
+
428
+ options.keys.next
429
+ The numeric keycode used to go to the next slide.
430
+
431
+ options.keys.previous
432
+ The numeric keycode used to go to the previous slide.
433
+
434
+ options.touch.swipeTolerance
435
+ The number of pixels the users finger must travel to produce a swipe
436
+ gesture.
437
+ */
438
+ $[deck].defaults = {
439
+ classes: {
440
+ after: 'deck-after',
441
+ before: 'deck-before',
442
+ childCurrent: 'deck-child-current',
443
+ current: 'deck-current',
444
+ loading: 'deck-loading',
445
+ next: 'deck-next',
446
+ onPrefix: 'on-slide-',
447
+ previous: 'deck-previous'
448
+ },
449
+
450
+ selectors: {
451
+ container: '.deck-container'
452
+ },
453
+
454
+ keys: {
455
+ // enter, space, page down, right arrow, down arrow,
456
+ next: [13, 32, 34, 39, 40],
457
+ // backspace, page up, left arrow, up arrow
458
+ previous: [8, 33, 37, 38]
459
+ },
460
+
461
+ touch: {
462
+ swipeTolerance: 60
463
+ }
464
+ };
465
+
466
+ $d.ready(function() {
467
+ $('html').addClass('ready');
468
+ });
469
+
470
+ /*
471
+ FF + Transforms + Flash video don't get along...
472
+ Firefox will reload and start playing certain videos after a
473
+ transform. Blanking the src when a previously shown slide goes out
474
+ of view prevents this.
475
+ */
476
+ $d.bind('deck.change', function(e, from, to) {
477
+ var oldFrames = $[deck]('getSlide', from).find('iframe'),
478
+ newFrames = $[deck]('getSlide', to).find('iframe');
479
+
480
+ oldFrames.each(function() {
481
+ var $this = $(this),
482
+ curSrc = $this.attr('src');
483
+
484
+ if(curSrc) {
485
+ $this.data('deck-src', curSrc).attr('src', '');
486
+ }
487
+ });
488
+
489
+ newFrames.each(function() {
490
+ var $this = $(this),
491
+ originalSrc = $this.data('deck-src');
492
+
493
+ if (originalSrc) {
494
+ $this.attr('src', originalSrc);
495
+ }
496
+ });
497
+ });
498
+ })(jQuery, 'deck', document);