marionette.modal 1.0.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.
- checksums.yaml +7 -0
- data/.gitignore +36 -0
- data/Gemfile +4 -0
- data/Gruntfile.coffee +109 -0
- data/LICENSE +22 -0
- data/README.md +42 -0
- data/Rakefile +1 -0
- data/backbone.marionette.modals-min.js +1 -0
- data/backbone.marionette.modals.js +104 -0
- data/backbone.modal-min.js +1 -0
- data/backbone.modal.js +382 -0
- data/examples/1_single_view.html +71 -0
- data/examples/2_tab_based.html +104 -0
- data/examples/3_stacked_modal_with_marionette.html +105 -0
- data/examples/4_wizard.html +132 -0
- data/examples/css/style.css +45 -0
- data/examples/img/tab-icons.png +0 -0
- data/examples/style.css +35 -0
- data/examples/vendor/backbone.js +1571 -0
- data/examples/vendor/backbone.marionette.modals.js +104 -0
- data/examples/vendor/backbone.modal.css +24 -0
- data/examples/vendor/backbone.modal.js +382 -0
- data/examples/vendor/backbone.modal.theme.css +324 -0
- data/examples/vendor/jquery-1.9.1.js +9597 -0
- data/examples/vendor/marionette.js +2340 -0
- data/examples/vendor/marionette.modal.css +24 -0
- data/examples/vendor/marionette.modal.js +370 -0
- data/examples/vendor/marionette.modal.theme.css +324 -0
- data/examples/vendor/underscore.js +1227 -0
- data/lib/marionette.modal/version.rb +3 -0
- data/lib/marionette.modal.rb +5 -0
- data/marionette.modal-bundled-min.js +1 -0
- data/marionette.modal-bundled.js +858 -0
- data/marionette.modal-min.js +1 -0
- data/marionette.modal.css +24 -0
- data/marionette.modal.gemspec +23 -0
- data/marionette.modal.js +370 -0
- data/marionette.modal.theme.css +324 -0
- data/package.json +18 -0
- data/src/backbone.marionette.modals.coffee +67 -0
- data/src/backbone.modal.coffee +253 -0
- data/src/marionette.modal.coffee +248 -0
- data/src/marionette.modal.sass +26 -0
- data/src/marionette.modal.theme.sass +486 -0
- data/src/style.sass +48 -0
- data/test/spec/backbone.marionette.modals.spec.js +87 -0
- data/test/spec/backbone.modal.spec.js +224 -0
- data/test/spec.html +41 -0
- data/test/src/backbone.marionette.modals.spec.coffee +47 -0
- data/test/src/backbone.modal.spec.coffee +139 -0
- metadata +128 -0
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
2
|
+
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<head>
|
|
6
|
+
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
|
|
8
|
+
|
|
9
|
+
<title>Wizard modal</title>
|
|
10
|
+
|
|
11
|
+
<script type="text/javascript" src="vendor/jquery-1.9.1.js"></script>
|
|
12
|
+
<script type="text/javascript" src="vendor/underscore.js"></script>
|
|
13
|
+
<script type="text/javascript" src="vendor/backbone.js"></script>
|
|
14
|
+
|
|
15
|
+
<!-- Adding Backbone.Modal extension here -->
|
|
16
|
+
<link type="text/css" rel="stylesheet" href="vendor/backbone.modal.css">
|
|
17
|
+
<link type="text/css" rel="stylesheet" href="vendor/backbone.modal.theme.css">
|
|
18
|
+
<script type="text/javascript" src="vendor/backbone.modal.js"></script>
|
|
19
|
+
|
|
20
|
+
<!-- Custom style -->
|
|
21
|
+
<link type="text/css" rel="stylesheet" href="css/style.css">
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
</head>
|
|
25
|
+
|
|
26
|
+
<body>
|
|
27
|
+
<a href="#" class="open">Open modal</a>
|
|
28
|
+
|
|
29
|
+
<div class="app"></div>
|
|
30
|
+
|
|
31
|
+
<!-- The modal structure, with an container element that will contain all tabs -->
|
|
32
|
+
<script type="text/template" id="modal-template">
|
|
33
|
+
<div class="my-container"></div>
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<!-- Step 1 -->
|
|
37
|
+
<script type="text/template" id="modal-view1-template">
|
|
38
|
+
<div class="bbm-modal__topbar">
|
|
39
|
+
<h3 class="bbm-modal__title">Wizard example - step 1</h3>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="bbm-modal__section">
|
|
42
|
+
<p>You can create all kinds of modals, like this wizard. It's pretty basic, but you can do anything you'd like.</p>
|
|
43
|
+
<a href="#" id="step3">Directly go to the last step</a>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="bbm-modal__bottombar">
|
|
46
|
+
<a href="#" class="bbm-button previous inactive">Previous</a>
|
|
47
|
+
<a href="#" class="bbm-button next">Next</a>
|
|
48
|
+
</div>
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<!-- Step 2 -->
|
|
52
|
+
<script type="text/template" id="modal-view2-template">
|
|
53
|
+
<div class="bbm-modal__topbar">
|
|
54
|
+
<h3 class="bbm-modal__title">Wizard example - step 2</h3>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="bbm-modal__section">
|
|
57
|
+
<p>This is the second step of the wizard.</p>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="bbm-modal__bottombar">
|
|
60
|
+
<a href="#" class="bbm-button previous">Previous</a>
|
|
61
|
+
<a href="#" class="bbm-button next">Next</a>
|
|
62
|
+
</div>
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<!-- Step 3 -->
|
|
66
|
+
<script type="text/template" id="modal-view3-template">
|
|
67
|
+
<div class="bbm-modal__topbar">
|
|
68
|
+
<h3 class="bbm-modal__title">Wizard example - step 3</h3>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="bbm-modal__section">
|
|
71
|
+
<p>And finally, the last step!</p>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="bbm-modal__bottombar">
|
|
74
|
+
<a href="#" class="bbm-button previous">Previous</a>
|
|
75
|
+
<a href="#" class="bbm-button done">Done</a>
|
|
76
|
+
</div>
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<script>
|
|
80
|
+
jQuery(function($) {
|
|
81
|
+
|
|
82
|
+
// Create a modal view class
|
|
83
|
+
var Modal = Backbone.Modal.extend({
|
|
84
|
+
template: _.template($('#modal-template').html()),
|
|
85
|
+
|
|
86
|
+
viewContainer: '.my-container',
|
|
87
|
+
submitEl: '.done',
|
|
88
|
+
cancelEl: '.cancel',
|
|
89
|
+
|
|
90
|
+
views: {
|
|
91
|
+
'click #step1': {
|
|
92
|
+
view: _.template($('#modal-view1-template').html())
|
|
93
|
+
},
|
|
94
|
+
'click #step2': {
|
|
95
|
+
view: _.template($('#modal-view2-template').html())
|
|
96
|
+
},
|
|
97
|
+
'click #step3': {
|
|
98
|
+
view: _.template($('#modal-view3-template').html())
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
|
|
102
|
+
events: {
|
|
103
|
+
'click .previous': 'previousStep',
|
|
104
|
+
'click .next': 'nextStep'
|
|
105
|
+
},
|
|
106
|
+
|
|
107
|
+
previousStep: function(e) {
|
|
108
|
+
e.preventDefault();
|
|
109
|
+
this.previous();
|
|
110
|
+
},
|
|
111
|
+
|
|
112
|
+
nextStep: function(e) {
|
|
113
|
+
e.preventDefault();
|
|
114
|
+
this.next();
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
$('.open').on('click', function(){
|
|
120
|
+
|
|
121
|
+
// Render an instance of your modal
|
|
122
|
+
var modalView = new Modal();
|
|
123
|
+
$('.app').html(modalView.render().el);
|
|
124
|
+
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
$('.open').click()
|
|
128
|
+
|
|
129
|
+
});
|
|
130
|
+
</script>
|
|
131
|
+
</body>
|
|
132
|
+
</html>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: "Helvetica Neue"; }
|
|
3
|
+
|
|
4
|
+
a {
|
|
5
|
+
text-decoration: none;
|
|
6
|
+
font-style: normal; }
|
|
7
|
+
|
|
8
|
+
.bb-modal{
|
|
9
|
+
font-size: 16px;
|
|
10
|
+
line-height: 1.5;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.bb-modal .intro-line{
|
|
14
|
+
font-size: 22px;
|
|
15
|
+
line-height: 1.6;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.bbm-modal__tab {
|
|
19
|
+
padding: 0; }
|
|
20
|
+
.bbm-modal__tab a {
|
|
21
|
+
display: block;
|
|
22
|
+
padding-top: 55px;
|
|
23
|
+
padding-bottom: 10px;
|
|
24
|
+
padding-left: 20px;
|
|
25
|
+
padding-right: 20px;
|
|
26
|
+
position: relative;
|
|
27
|
+
font-size: 13px; }
|
|
28
|
+
.bbm-modal__tab a:before {
|
|
29
|
+
position: absolute;
|
|
30
|
+
content: "";
|
|
31
|
+
background: url(../img/tab-icons.png);
|
|
32
|
+
left: 50%;
|
|
33
|
+
top: 10px;
|
|
34
|
+
margin-left: -20px;
|
|
35
|
+
width: 40px;
|
|
36
|
+
height: 40px;
|
|
37
|
+
opacity: 0.5; }
|
|
38
|
+
.bbm-modal__tab a.active {
|
|
39
|
+
opacity: 1; }
|
|
40
|
+
.bbm-modal__tab a.active:before {
|
|
41
|
+
opacity: 1; }
|
|
42
|
+
.bbm-modal__tab:last-child {
|
|
43
|
+
margin-left: -5px; }
|
|
44
|
+
.bbm-modal__tab:last-child a:before {
|
|
45
|
+
background-position: -40px; }
|
|
Binary file
|
data/examples/style.css
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: "Helvetica Neue"; }
|
|
3
|
+
|
|
4
|
+
a {
|
|
5
|
+
text-decoration: none;
|
|
6
|
+
font-style: normal; }
|
|
7
|
+
|
|
8
|
+
.bbm-modal__tab {
|
|
9
|
+
padding: 0; }
|
|
10
|
+
.bbm-modal__tab a {
|
|
11
|
+
display: block;
|
|
12
|
+
padding-top: 55px;
|
|
13
|
+
padding-bottom: 10px;
|
|
14
|
+
padding-left: 20px;
|
|
15
|
+
padding-right: 20px;
|
|
16
|
+
position: relative;
|
|
17
|
+
font-size: 13px; }
|
|
18
|
+
.bbm-modal__tab a:before {
|
|
19
|
+
position: absolute;
|
|
20
|
+
content: "";
|
|
21
|
+
background: url(img/tab-icons.png);
|
|
22
|
+
left: 50%;
|
|
23
|
+
top: 10px;
|
|
24
|
+
margin-left: -20px;
|
|
25
|
+
width: 40px;
|
|
26
|
+
height: 40px;
|
|
27
|
+
opacity: 0.5; }
|
|
28
|
+
.bbm-modal__tab a.active {
|
|
29
|
+
opacity: 1; }
|
|
30
|
+
.bbm-modal__tab a.active:before {
|
|
31
|
+
opacity: 1; }
|
|
32
|
+
.bbm-modal__tab:last-child {
|
|
33
|
+
margin-left: -5px; }
|
|
34
|
+
.bbm-modal__tab:last-child a:before {
|
|
35
|
+
background-position: -40px; }
|