deckrb 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
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);