marionette-modal 1.0.0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +36 -0
  3. data/Gemfile +4 -0
  4. data/Gruntfile.coffee +111 -0
  5. data/LICENSE +22 -0
  6. data/README.md +42 -0
  7. data/Rakefile +1 -0
  8. data/dist/backbone.marionette.modals-min.js +1 -0
  9. data/dist/backbone.marionette.modals.js +104 -0
  10. data/dist/backbone.modal-min.js +1 -0
  11. data/dist/backbone.modal.js +382 -0
  12. data/dist/marionette.modal-bundled-min.js +1 -0
  13. data/dist/marionette.modal-bundled.js +858 -0
  14. data/dist/marionette.modal-min.js +1 -0
  15. data/dist/marionette.modal.css +24 -0
  16. data/dist/marionette.modal.js +370 -0
  17. data/dist/marionette.modal.theme.css +324 -0
  18. data/examples/1_single_view.html +71 -0
  19. data/examples/2_tab_based.html +104 -0
  20. data/examples/3_stacked_modal_with_marionette.html +105 -0
  21. data/examples/4_wizard.html +132 -0
  22. data/examples/css/style.css +45 -0
  23. data/examples/img/tab-icons.png +0 -0
  24. data/examples/style.css +35 -0
  25. data/examples/vendor/backbone.js +1591 -0
  26. data/examples/vendor/backbone.marionette.modals.js +104 -0
  27. data/examples/vendor/backbone.modal.css +24 -0
  28. data/examples/vendor/backbone.modal.js +382 -0
  29. data/examples/vendor/backbone.modal.theme.css +324 -0
  30. data/examples/vendor/jquery-1.9.1.js +9597 -0
  31. data/examples/vendor/marionette.js +2466 -0
  32. data/examples/vendor/marionette.modal.css +24 -0
  33. data/examples/vendor/marionette.modal.js +370 -0
  34. data/examples/vendor/marionette.modal.theme.css +324 -0
  35. data/examples/vendor/underscore.js +1314 -0
  36. data/lib/marionette-modal/version.rb +3 -0
  37. data/lib/marionette-modal.rb +22 -0
  38. data/marionette-modal.gemspec +23 -0
  39. data/package.json +19 -0
  40. data/src/backbone.marionette.modals.coffee +67 -0
  41. data/src/backbone.modal.coffee +253 -0
  42. data/src/marionette.modal.coffee +248 -0
  43. data/src/marionette.modal.sass +26 -0
  44. data/src/marionette.modal.theme.sass +486 -0
  45. data/src/style.sass +48 -0
  46. data/test/spec/backbone.marionette.modals.spec.js +120 -0
  47. data/test/spec/backbone.modal.spec.js +224 -0
  48. data/test/spec.html +41 -0
  49. data/test/src/backbone.marionette.modals.spec.coffee +56 -0
  50. data/test/src/backbone.modal.spec.coffee +139 -0
  51. metadata +128 -0
@@ -0,0 +1,486 @@
1
+ .bbm-wrapper
2
+ background: rgba(0,0,0,.75)
3
+ -webkit-transition: background-color .3s
4
+
5
+ .bbm-modal
6
+ background: white
7
+ box-shadow: 0 0px 6px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.9)
8
+
9
+
10
+ /* BLOCKS */
11
+ .bbm-modal__topbar,
12
+ .bbm-modal__bottombar
13
+ padding: 0 30px
14
+
15
+ .bbm-modal__topbar
16
+ border-bottom: 1px solid rgba(0,0,0,.1)
17
+ margin:
18
+ bottom: 30px
19
+
20
+ >ul
21
+ list-style: none
22
+ text-align: center
23
+ padding: 0
24
+ margin: 0
25
+
26
+ .bbm-modal__tab
27
+ display: inline-block
28
+ padding: 15px 10px
29
+
30
+ a
31
+ font:
32
+ size: 16px
33
+ weight: bold
34
+ color: #999
35
+
36
+ &:hover,
37
+ &.active
38
+ color: #222
39
+
40
+ .bbm-modal__title
41
+ padding: 20px 0 19px
42
+ margin: 0
43
+ font:
44
+ weight: normal
45
+ size: 22px
46
+ line-height: 1em
47
+ color: #312D3A
48
+
49
+ .bbm-modal__section
50
+ padding: 0 30px
51
+ margin-top: 0px
52
+ font:
53
+ size: 16px
54
+ line-height: 26px
55
+ color: #575656
56
+
57
+ p
58
+ font:
59
+ size: 16px
60
+ line-height: 26px
61
+ color: #575656
62
+
63
+ &:last-child
64
+ padding: 0
65
+ margin-bottom: 0
66
+
67
+ a
68
+ color: #FF643C
69
+
70
+ h3
71
+ margin: 0
72
+ font-size: 20px
73
+ line-height: 1em
74
+
75
+ .bbm-modal__bottombar
76
+ border-top: 1px solid rgba(0,0,0,.1)
77
+ padding: 18px
78
+ text-align: right
79
+ margin-top: 30px
80
+
81
+
82
+ /* MODULES */
83
+ .bbm-group
84
+ content: ""
85
+ display: table
86
+ clear: both
87
+
88
+ .bbm-button
89
+ display: inline-block
90
+ color: rgba(49,45,58,.8)
91
+ text-decoration: none
92
+ font:
93
+ size: 14px
94
+ weight: 500
95
+ position: relative
96
+ line-height: 1em
97
+ padding: 10px 14px
98
+ border-radius: 3px
99
+ background: #FCFCFC
100
+
101
+ background-image: -o-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
102
+ background-image: -moz-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
103
+ background-image: -webkit-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
104
+ background-image: -ms-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
105
+ background-image: linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
106
+
107
+ -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
108
+ -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
109
+ box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
110
+
111
+ &.inactive
112
+ opacity: .5
113
+ pointer-events: none
114
+
115
+ &:active
116
+ background-image: -o-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
117
+ background-image: -moz-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
118
+ background-image: -webkit-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
119
+ background-image: -ms-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
120
+ background-image: linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
121
+
122
+ -moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
123
+ -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
124
+ box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
125
+
126
+
127
+ /* ANIMATIONS */
128
+
129
+ /* Open modal */
130
+ @-webkit-keyframes bbm-open
131
+ 0%
132
+ -webkit-transform: matrix(0.99126, 0, 0, 0.99126, 0, 43.8813)
133
+ opacity: 0.1259
134
+ 4%
135
+ -webkit-transform: matrix(0.99295, 0, 0, 0.99295, 0, 45.06809)
136
+ opacity: 0.29544
137
+ 8%
138
+ -webkit-transform: matrix(0.99467, 0, 0, 0.99467, 0, 46.26922)
139
+ opacity: 0.46703
140
+ 12%
141
+ -webkit-transform: matrix(0.99619, 0, 0, 0.99619, 0, 47.33355)
142
+ opacity: 0.61908
143
+ 16%
144
+ -webkit-transform: matrix(0.99743, 0, 0, 0.99743, 0, 48.19991)
145
+ opacity: 0.74284
146
+ 20%
147
+ -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.86067)
148
+ opacity: 0.83724
149
+ 24%
150
+ -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33658)
151
+ opacity: 0.90523
152
+ 28%
153
+ -webkit-transform: matrix(0.99952, 0, 0, 0.99952, 0, 49.66049)
154
+ opacity: 0.9515
155
+ 32%
156
+ -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8675)
157
+ opacity: 0.98107
158
+ 36%
159
+ -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98966)
160
+ opacity: 0.99852
161
+ 40%
162
+ -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05361)
163
+ opacity: 1.00766
164
+ 44%
165
+ -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.08)
166
+ opacity: 1.01143
167
+ 48%
168
+ -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08394)
169
+ opacity: 1.01199
170
+ 52%
171
+ -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07589)
172
+ opacity: 1.01084
173
+ 56%
174
+ -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06265)
175
+ opacity: 1.00895
176
+ 60%
177
+ -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04833)
178
+ opacity: 1.0069
179
+ 64%
180
+ -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03518)
181
+ opacity: 1.00503
182
+ 68%
183
+ -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02421)
184
+ opacity: 1.00346
185
+ 72%
186
+ -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01567)
187
+ opacity: 1.00224
188
+ 76%
189
+ -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00941)
190
+ opacity: 1.00134
191
+ 80%
192
+ -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00506)
193
+ opacity: 1.00072
194
+ 84%
195
+ -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 50.00223)
196
+ opacity: 1.00032
197
+ 88%
198
+ -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 50.0005)
199
+ opacity: 1.00007
200
+ 92%
201
+ -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 49.99956)
202
+ opacity: 0.99994
203
+ 96%
204
+ -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 49.99913)
205
+ opacity: 0.99988
206
+ 100%
207
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 50)
208
+ opacity: 1
209
+
210
+ .bbm-modal--open
211
+ -webkit-animation-duration: 0.3s
212
+ -webkit-animation-name: bbm-open
213
+ -webkit-animation-timing-function: linear
214
+ -webkit-animation-fill-mode: both
215
+ -webkit-transform-origin: 50% 50%
216
+ -webkit-backface-visibility: hidden
217
+
218
+
219
+ /* Open a stacked modal */
220
+ @-webkit-keyframes bbm-stacked
221
+ 0%
222
+ -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187)
223
+ opacity: 0.93705
224
+ 4%
225
+ -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192)
226
+ opacity: 0.85228
227
+ 8%
228
+ -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078)
229
+ opacity: 0.76648
230
+ 12%
231
+ -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645)
232
+ opacity: 0.69046
233
+ 16%
234
+ -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009)
235
+ opacity: 0.62858
236
+ 20%
237
+ -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933)
238
+ opacity: 0.58138
239
+ 24%
240
+ -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342)
241
+ opacity: 0.54739
242
+ 28%
243
+ -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951)
244
+ opacity: 0.52425
245
+ 32%
246
+ -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325)
247
+ opacity: 0.50946
248
+ 36%
249
+ -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034)
250
+ opacity: 0.50074
251
+ 40%
252
+ -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639)
253
+ opacity: 0.49617
254
+ 44%
255
+ -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001)
256
+ opacity: 0.49429
257
+ 48%
258
+ -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606)
259
+ opacity: 0.494
260
+ 52%
261
+ -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411)
262
+ opacity: 0.49458
263
+ 56%
264
+ -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736)
265
+ opacity: 0.49553
266
+ 60%
267
+ -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167)
268
+ opacity: 0.49655
269
+ 64%
270
+ -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482)
271
+ opacity: 0.49749
272
+ 68%
273
+ -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579)
274
+ opacity: 0.49827
275
+ 72%
276
+ -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433)
277
+ opacity: 0.49888
278
+ 76%
279
+ -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059)
280
+ opacity: 0.49933
281
+ 80%
282
+ -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494)
283
+ opacity: 0.49964
284
+ 84%
285
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777)
286
+ opacity: 0.49984
287
+ 88%
288
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995)
289
+ opacity: 0.49996
290
+ 92%
291
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044)
292
+ opacity: 0.50003
293
+ 96%
294
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088)
295
+ opacity: 0.50006
296
+ 100%
297
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43)
298
+ opacity: 0.5
299
+
300
+ .bbm-modal--stacked
301
+ -webkit-animation-duration: 0.43333333333333335s
302
+ -webkit-animation-name: bbm-stacked
303
+ -webkit-animation-timing-function: linear
304
+ -webkit-animation-fill-mode: both
305
+ -webkit-transform-origin: 50% 50%
306
+ -webkit-backface-visibility: hidden
307
+
308
+
309
+ /* Close a stacked modal */
310
+ @-webkit-keyframes bbm-stacked-reverse
311
+ 0%
312
+ -webkit-transform: matrix(0.99123, 0, 0, 0.99123, 0, 43.86266)
313
+ opacity: 0.56162
314
+ 4%
315
+ -webkit-transform: matrix(0.99293, 0, 0, 0.99293, 0, 45.05306)
316
+ opacity: 0.64665
317
+ 8%
318
+ -webkit-transform: matrix(0.99465, 0, 0, 0.99465, 0, 46.25785)
319
+ opacity: 0.7327
320
+ 12%
321
+ -webkit-transform: matrix(0.99618, 0, 0, 0.99618, 0, 47.32543)
322
+ opacity: 0.80896
323
+ 16%
324
+ -webkit-transform: matrix(0.99742, 0, 0, 0.99742, 0, 48.19443)
325
+ opacity: 0.87103
326
+ 20%
327
+ -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.8572)
328
+ opacity: 0.91837
329
+ 24%
330
+ -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33456)
331
+ opacity: 0.95247
332
+ 28%
333
+ -webkit-transform: matrix(0.99951, 0, 0, 0.99951, 0, 49.65946)
334
+ opacity: 0.97568
335
+ 32%
336
+ -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8671)
337
+ opacity: 0.99051
338
+ 36%
339
+ -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98963)
340
+ opacity: 0.99926
341
+ 40%
342
+ -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05377)
343
+ opacity: 1.00384
344
+ 44%
345
+ -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08024)
346
+ opacity: 1.00573
347
+ 48%
348
+ -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08419)
349
+ opacity: 1.00601
350
+ 52%
351
+ -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07612)
352
+ opacity: 1.00544
353
+ 56%
354
+ -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06284)
355
+ opacity: 1.00449
356
+ 60%
357
+ -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04848)
358
+ opacity: 1.00346
359
+ 64%
360
+ -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03529)
361
+ opacity: 1.00252
362
+ 68%
363
+ -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02428)
364
+ opacity: 1.00173
365
+ 72%
366
+ -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01572)
367
+ opacity: 1.00112
368
+ 76%
369
+ -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00944)
370
+ opacity: 1.00067
371
+ 80%
372
+ -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00508)
373
+ opacity: 1.00036
374
+ 84%
375
+ -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 50.00223)
376
+ opacity: 1.00016
377
+ 88%
378
+ -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 50.0005)
379
+ opacity: 1.00004
380
+ 92%
381
+ -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 49.99956)
382
+ opacity: 0.99997
383
+ 96%
384
+ -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 49.99912)
385
+ opacity: 0.99994
386
+ 100%
387
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 50)
388
+ opacity: 1
389
+
390
+ .bbm-modal--stacked-reverse
391
+ -webkit-animation-duration: 0.43333333333333335s
392
+ -webkit-animation-name: bbm-stacked-reverse
393
+ -webkit-animation-timing-function: linear
394
+ -webkit-animation-fill-mode: both
395
+ -webkit-transform-origin: 50% 50%
396
+ -webkit-backface-visibility: hidden
397
+
398
+
399
+ /* Close a modal */
400
+ @-webkit-keyframes bbm-close
401
+ 0%
402
+ -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187)
403
+ opacity: 0.8741
404
+ 4%
405
+ -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192)
406
+ opacity: 0.70456
407
+ 8%
408
+ -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078)
409
+ opacity: 0.53297
410
+ 12%
411
+ -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645)
412
+ opacity: 0.38092
413
+ 16%
414
+ -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009)
415
+ opacity: 0.25716
416
+ 20%
417
+ -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933)
418
+ opacity: 0.16276
419
+ 24%
420
+ -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342)
421
+ opacity: 0.09477
422
+ 28%
423
+ -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951)
424
+ opacity: 0.0485
425
+ 32%
426
+ -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325)
427
+ opacity: 0.01893
428
+ 36%
429
+ -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034)
430
+ opacity: 0.00148
431
+ 40%
432
+ -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639)
433
+ opacity: -0.00766
434
+ 44%
435
+ -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001)
436
+ opacity: -0.01143
437
+ 48%
438
+ -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606)
439
+ opacity: -0.01199
440
+ 52%
441
+ -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411)
442
+ opacity: -0.01084
443
+ 56%
444
+ -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736)
445
+ opacity: -0.00895
446
+ 60%
447
+ -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167)
448
+ opacity: -0.0069
449
+ 64%
450
+ -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482)
451
+ opacity: -0.00503
452
+ 68%
453
+ -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579)
454
+ opacity: -0.00346
455
+ 72%
456
+ -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433)
457
+ opacity: -0.00224
458
+ 76%
459
+ -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059)
460
+ opacity: -0.00134
461
+ 80%
462
+ -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494)
463
+ opacity: -0.00072
464
+ 84%
465
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777)
466
+ opacity: -0.00032
467
+ 88%
468
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995)
469
+ opacity: -7.0e-05
470
+ 92%
471
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044)
472
+ opacity: 0.00006
473
+ 96%
474
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088)
475
+ opacity: 0.00012
476
+ 100%
477
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43)
478
+ opacity: 0
479
+
480
+ .bbm-modal--close
481
+ -webkit-animation-duration: 0.43333333333333335s
482
+ -webkit-animation-name: bbm-close
483
+ -webkit-animation-timing-function: linear
484
+ -webkit-animation-fill-mode: both
485
+ -webkit-transform-origin: 50% 50%
486
+ -webkit-backface-visibility: hidden
data/src/style.sass ADDED
@@ -0,0 +1,48 @@
1
+ // Custom styling here
2
+
3
+ body
4
+ font-family: "Helvetica Neue"
5
+
6
+ a
7
+ text-decoration: none
8
+ font-style: normal
9
+
10
+ // Add icons to tabs
11
+ .bbm-modal__tab
12
+ padding: 0
13
+
14
+ a
15
+ display: block
16
+ padding:
17
+ top: 55px
18
+ bottom: 10px
19
+ left: 20px
20
+ right: 20px
21
+ position: relative
22
+ font:
23
+ size: 13px
24
+
25
+ &:before
26
+ position: absolute
27
+ content: ""
28
+ background: url(img/tab-icons.png)
29
+ left: 50%
30
+ top: 10px
31
+ margin:
32
+ left: -20px
33
+ width: 40px
34
+ height: 40px
35
+ opacity: .5
36
+
37
+ &.active
38
+ opacity: 1
39
+
40
+ &:before
41
+ opacity: 1
42
+
43
+
44
+ &:last-child
45
+ margin-left: -5px
46
+ a
47
+ &:before
48
+ background-position: -40px
@@ -0,0 +1,120 @@
1
+ (function() {
2
+ var __hasProp = {}.hasOwnProperty,
3
+ __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
4
+
5
+ describe('Backbone.Marionette.Modals', function() {
6
+ var BackboneModal, MarionetteModal, layout, myLayout, _ref, _ref1, _ref2;
7
+ myLayout = {};
8
+ layout = (function(_super) {
9
+ __extends(layout, _super);
10
+
11
+ function layout() {
12
+ _ref = layout.__super__.constructor.apply(this, arguments);
13
+ return _ref;
14
+ }
15
+
16
+ layout.prototype.template = function() {
17
+ return '<div id="modals"></div>';
18
+ };
19
+
20
+ layout.prototype.regions = {
21
+ modals: {
22
+ selector: '#modals',
23
+ regionType: Backbone.Marionette.Modals
24
+ }
25
+ };
26
+
27
+ return layout;
28
+
29
+ })(Backbone.Marionette.Layout);
30
+ BackboneModal = (function(_super) {
31
+ __extends(BackboneModal, _super);
32
+
33
+ function BackboneModal() {
34
+ _ref1 = BackboneModal.__super__.constructor.apply(this, arguments);
35
+ return _ref1;
36
+ }
37
+
38
+ BackboneModal.prototype.viewContainer = 'div';
39
+
40
+ BackboneModal.prototype.cancelEl = '.close';
41
+
42
+ BackboneModal.prototype.submitEl = '.submit';
43
+
44
+ BackboneModal.prototype.template = function() {
45
+ return '<a id="id"></a><div></div><a class="close"></a><a class="submit"></a>';
46
+ };
47
+
48
+ BackboneModal.prototype.views = {
49
+ 'click #id': {
50
+ view: function() {
51
+ return '<p>html</p>';
52
+ }
53
+ }
54
+ };
55
+
56
+ BackboneModal.prototype.cancel = function() {};
57
+
58
+ BackboneModal.prototype.submit = function() {};
59
+
60
+ return BackboneModal;
61
+
62
+ })(Backbone.Modal);
63
+ MarionetteModal = (function(_super) {
64
+ __extends(MarionetteModal, _super);
65
+
66
+ function MarionetteModal() {
67
+ _ref2 = MarionetteModal.__super__.constructor.apply(this, arguments);
68
+ return _ref2;
69
+ }
70
+
71
+ MarionetteModal.prototype.viewContainer = 'div';
72
+
73
+ MarionetteModal.prototype.cancelEl = '.close';
74
+
75
+ MarionetteModal.prototype.submitEl = '.submit';
76
+
77
+ MarionetteModal.prototype.template = function() {
78
+ return '<a id="id"></a><div></div><a class="close"></a><a class="submit"></a>';
79
+ };
80
+
81
+ MarionetteModal.prototype.views = {
82
+ 'click #id': {
83
+ view: function() {
84
+ return '<p>html</p>';
85
+ }
86
+ }
87
+ };
88
+
89
+ MarionetteModal.prototype.cancel = function() {};
90
+
91
+ MarionetteModal.prototype.submit = function() {};
92
+
93
+ return MarionetteModal;
94
+
95
+ })(Marionette.Modal);
96
+ myLayout = new layout();
97
+ describe('#show', function() {
98
+ it('should stack a modal view', function() {
99
+ myLayout.modals.show(new modal());
100
+ return expect(myLayout.modals.zIndex).toBe(1);
101
+ });
102
+ return it('should disable modals with zIndex < modal', function() {});
103
+ });
104
+ describe('#close', function() {
105
+ it('should only close the last modal', function() {
106
+ myLayout.modals.close();
107
+ return expect(myLayout.modals.zIndex).toBe(0);
108
+ });
109
+ return it('should enable the last modal', function() {});
110
+ });
111
+ return describe('#closeAll', function() {
112
+ return it('should close all the modals', function() {
113
+ myLayout.modals.show(new modal());
114
+ myLayout.modals.closeAll();
115
+ return expect(myLayout.modals.modals.length).toBe(0);
116
+ });
117
+ });
118
+ });
119
+
120
+ }).call(this);