patternfly-sass 3.11.0 → 3.12.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/assets/stylesheets/patternfly/_bootstrap-treeview.scss +28 -6
  3. data/assets/stylesheets/patternfly/_dropdowns.scss +11 -0
  4. data/assets/stylesheets/patternfly/_forms.scss +14 -0
  5. data/assets/stylesheets/patternfly/_list-view.scss +63 -0
  6. data/assets/stylesheets/patternfly/_toolbar.scss +11 -3
  7. data/assets/stylesheets/patternfly/_wizard.scss +44 -8
  8. data/assets/stylesheets/patternfly/lib/bootstrap-datetimepicker.scss +4 -4
  9. data/bower.json +2 -2
  10. data/lib/patternfly-sass/version.rb +2 -2
  11. data/spec/html/bootstrap-treeview-2.html +1 -1
  12. data/spec/html/bootstrap-treeview.html +16 -3
  13. data/spec/html/card-view-multi-select.html +6 -24
  14. data/spec/html/card-view-single-select.html +6 -24
  15. data/spec/html/cards.html +3 -0
  16. data/spec/html/dist/css/patternfly-additions.css +194 -118
  17. data/spec/html/dist/css/patternfly-additions.css.map +1 -1
  18. data/spec/html/dist/css/patternfly-additions.min.css +2 -2
  19. data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
  20. data/spec/html/dist/css/patternfly.css +20 -38
  21. data/spec/html/dist/css/patternfly.css.map +1 -1
  22. data/spec/html/dist/css/patternfly.min.css +2 -2
  23. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  24. data/spec/html/forms.html +365 -226
  25. data/spec/html/horizontal-navigation.html +3 -0
  26. data/spec/html/index.html +6 -0
  27. data/spec/html/list-view-compound-expansion.html +1716 -0
  28. data/spec/html/list-view-rows.html +4 -0
  29. data/spec/html/list-view-simple-expansion.html +999 -0
  30. data/spec/html/list-view.html +6 -24
  31. data/spec/html/notification-drawer-horizontal-nav.html +3 -0
  32. data/spec/html/notification-drawer-vertical-nav.html +3 -0
  33. data/spec/html/toolbar.html +8 -11
  34. data/spec/html/vertical-navigation-primary-only.html +3 -0
  35. data/spec/html/vertical-navigation-with-badges.html +3 -0
  36. data/spec/html/vertical-navigation-with-secondary.html +3 -0
  37. data/spec/html/vertical-navigation-with-tertiary-no-icons.html +3 -0
  38. data/spec/html/vertical-navigation-with-tertiary-pins.html +3 -0
  39. data/spec/html/wizard.html +574 -318
  40. metadata +6 -2
@@ -145,11 +145,9 @@
145
145
  <div class="input-group-btn">
146
146
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
147
147
  <ul class="dropdown-menu">
148
- <li><a href="#">Action</a></li>
149
- <li><a href="#">Another action</a></li>
150
- <li><a href="#">Something else here</a></li>
151
- <li role="separator" class="divider"></li>
152
- <li><a href="#">Separated link</a></li>
148
+ <li class="selected"><a href="#">Name</a></li>
149
+ <li><a href="#">Type</a></li>
150
+ <li><a href="#">Color</a></li>
153
151
  </ul>
154
152
  </div><!-- /btn-group -->
155
153
  <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
@@ -159,11 +157,9 @@
159
157
  <div class="dropdown btn-group">
160
158
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
161
159
  <ul class="dropdown-menu">
162
- <li><a href="#">Action</a></li>
163
- <li><a href="#">Another action</a></li>
164
- <li><a href="#">Something else here</a></li>
165
- <li role="separator" class="divider"></li>
166
- <li><a href="#">Separated link</a></li>
160
+ <li class="selected"><a href="#">Name</a></li>
161
+ <li><a href="#">Type</a></li>
162
+ <li><a href="#">Last Modified</a></li>
167
163
  </ul>
168
164
  </div>
169
165
  <button class="btn btn-link" type="button">
@@ -245,21 +241,7 @@
245
241
  </div><!-- /col -->
246
242
  </div><!-- /row -->
247
243
  </div><!-- /container -->
248
- <script>
249
- (function($) {
250
- $(document).ready(function() {
251
- // Upon clicking the find button, show the find dropdown content
252
- $(".btn-find").click(function () {
253
- $(".find-pf-dropdown-container").toggle();
254
- });
255
- // Upon clicking the find close button, hide the find dropdown content
256
- $(".btn-find-close").click(function () {
257
- $(".find-pf-dropdown-container").hide();
258
- });
259
244
 
260
- });
261
- })(jQuery);
262
- </script>
263
245
  <div class="container-fluid">
264
246
  <div class="list-group list-view-pf list-view-pf-view">
265
247
  <div class="list-group-item">
@@ -1359,6 +1359,7 @@
1359
1359
  Last 30 Days <span class="caret"></span>
1360
1360
  </button>
1361
1361
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
1362
+ <li class="selected"><a href="#">Last 30 Days</a></li>
1362
1363
  <li><a href="#">Last 60 Days</a></li>
1363
1364
  <li><a href="#">Last 90 Days</a></li>
1364
1365
  </ul>
@@ -1387,6 +1388,7 @@
1387
1388
  Last 30 Days <span class="caret"></span>
1388
1389
  </button>
1389
1390
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
1391
+ <li class="selected"><a href="#">Last 30 Days</a></li>
1390
1392
  <li><a href="#">Last 60 Days</a></li>
1391
1393
  <li><a href="#">Last 90 Days</a></li>
1392
1394
  </ul>
@@ -1417,6 +1419,7 @@
1417
1419
  Last 30 Days <span class="caret"></span>
1418
1420
  </button>
1419
1421
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
1422
+ <li class="selected"><a href="#">Last 30 Days</a></li>
1420
1423
  <li><a href="#">Last 60 Days</a></li>
1421
1424
  <li><a href="#">Last 90 Days</a></li>
1422
1425
  </ul>
@@ -1433,6 +1433,7 @@
1433
1433
  Last 30 Days <span class="caret"></span>
1434
1434
  </button>
1435
1435
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
1436
+ <li class="selected"><a href="#">Last 30 Days</a></li>
1436
1437
  <li><a href="#">Last 60 Days</a></li>
1437
1438
  <li><a href="#">Last 90 Days</a></li>
1438
1439
  </ul>
@@ -1461,6 +1462,7 @@
1461
1462
  Last 30 Days <span class="caret"></span>
1462
1463
  </button>
1463
1464
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
1465
+ <li class="selected"><a href="#">Last 30 Days</a></li>
1464
1466
  <li><a href="#">Last 60 Days</a></li>
1465
1467
  <li><a href="#">Last 90 Days</a></li>
1466
1468
  </ul>
@@ -1491,6 +1493,7 @@
1491
1493
  Last 30 Days <span class="caret"></span>
1492
1494
  </button>
1493
1495
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
1496
+ <li class="selected"><a href="#">Last 30 Days</a></li>
1494
1497
  <li><a href="#">Last 60 Days</a></li>
1495
1498
  <li><a href="#">Last 90 Days</a></li>
1496
1499
  </ul>
@@ -146,11 +146,9 @@
146
146
  <div class="input-group-btn">
147
147
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
148
148
  <ul class="dropdown-menu">
149
- <li><a href="#">Action</a></li>
150
- <li><a href="#">Another action</a></li>
151
- <li><a href="#">Something else here</a></li>
152
- <li role="separator" class="divider"></li>
153
- <li><a href="#">Separated link</a></li>
149
+ <li class="selected"><a href="#">Name</a></li>
150
+ <li><a href="#">Type</a></li>
151
+ <li><a href="#">Color</a></li>
154
152
  </ul>
155
153
  </div><!-- /btn-group -->
156
154
  <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
@@ -160,11 +158,9 @@
160
158
  <div class="dropdown btn-group">
161
159
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
162
160
  <ul class="dropdown-menu">
163
- <li><a href="#">Action</a></li>
164
- <li><a href="#">Another action</a></li>
165
- <li><a href="#">Something else here</a></li>
166
- <li role="separator" class="divider"></li>
167
- <li><a href="#">Separated link</a></li>
161
+ <li class="selected"><a href="#">Name</a></li>
162
+ <li><a href="#">Type</a></li>
163
+ <li><a href="#">Last Modified</a></li>
168
164
  </ul>
169
165
  </div>
170
166
  <button class="btn btn-link" type="button">
@@ -246,12 +242,13 @@
246
242
  </div><!-- /col -->
247
243
  </div><!-- /row -->
248
244
  </div><!-- /container -->
245
+
249
246
  <script>
250
247
  (function($) {
251
248
  $(document).ready(function() {
252
249
  // Upon clicking the find button, show the find dropdown content
253
250
  $(".btn-find").click(function () {
254
- $(".find-pf-dropdown-container").toggle();
251
+ $(this).parent().find(".find-pf-dropdown-container").toggle();
255
252
  });
256
253
  // Upon clicking the find close button, hide the find dropdown content
257
254
  $(".btn-find-close").click(function () {
@@ -649,6 +649,7 @@
649
649
  Last 30 Days <span class="caret"></span>
650
650
  </button>
651
651
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
652
+ <li class="selected"><a href="#">Last 30 Days</a></li>
652
653
  <li><a href="#">Last 60 Days</a></li>
653
654
  <li><a href="#">Last 90 Days</a></li>
654
655
  </ul>
@@ -677,6 +678,7 @@
677
678
  Last 30 Days <span class="caret"></span>
678
679
  </button>
679
680
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
681
+ <li class="selected"><a href="#">Last 30 Days</a></li>
680
682
  <li><a href="#">Last 60 Days</a></li>
681
683
  <li><a href="#">Last 90 Days</a></li>
682
684
  </ul>
@@ -707,6 +709,7 @@
707
709
  Last 30 Days <span class="caret"></span>
708
710
  </button>
709
711
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
712
+ <li class="selected"><a href="#">Last 30 Days</a></li>
710
713
  <li><a href="#">Last 60 Days</a></li>
711
714
  <li><a href="#">Last 90 Days</a></li>
712
715
  </ul>
@@ -987,6 +987,7 @@
987
987
  Last 30 Days <span class="caret"></span>
988
988
  </button>
989
989
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
990
+ <li class="selected"><a href="#">Last 30 Days</a></li>
990
991
  <li><a href="#">Last 60 Days</a></li>
991
992
  <li><a href="#">Last 90 Days</a></li>
992
993
  </ul>
@@ -1015,6 +1016,7 @@
1015
1016
  Last 30 Days <span class="caret"></span>
1016
1017
  </button>
1017
1018
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
1019
+ <li class="selected"><a href="#">Last 30 Days</a></li>
1018
1020
  <li><a href="#">Last 60 Days</a></li>
1019
1021
  <li><a href="#">Last 90 Days</a></li>
1020
1022
  </ul>
@@ -1045,6 +1047,7 @@
1045
1047
  Last 30 Days <span class="caret"></span>
1046
1048
  </button>
1047
1049
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
1050
+ <li class="selected"><a href="#">Last 30 Days</a></li>
1048
1051
  <li><a href="#">Last 60 Days</a></li>
1049
1052
  <li><a href="#">Last 90 Days</a></li>
1050
1053
  </ul>
@@ -716,6 +716,7 @@
716
716
  Last 30 Days <span class="caret"></span>
717
717
  </button>
718
718
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
719
+ <li class="selected"><a href="#">Last 30 Days</a></li>
719
720
  <li><a href="#">Last 60 Days</a></li>
720
721
  <li><a href="#">Last 90 Days</a></li>
721
722
  </ul>
@@ -744,6 +745,7 @@
744
745
  Last 30 Days <span class="caret"></span>
745
746
  </button>
746
747
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
748
+ <li class="selected"><a href="#">Last 30 Days</a></li>
747
749
  <li><a href="#">Last 60 Days</a></li>
748
750
  <li><a href="#">Last 90 Days</a></li>
749
751
  </ul>
@@ -774,6 +776,7 @@
774
776
  Last 30 Days <span class="caret"></span>
775
777
  </button>
776
778
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
779
+ <li class="selected"><a href="#">Last 30 Days</a></li>
777
780
  <li><a href="#">Last 60 Days</a></li>
778
781
  <li><a href="#">Last 90 Days</a></li>
779
782
  </ul>
@@ -890,6 +890,7 @@
890
890
  Last 30 Days <span class="caret"></span>
891
891
  </button>
892
892
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
893
+ <li class="selected"><a href="#">Last 30 Days</a></li>
893
894
  <li><a href="#">Last 60 Days</a></li>
894
895
  <li><a href="#">Last 90 Days</a></li>
895
896
  </ul>
@@ -918,6 +919,7 @@
918
919
  Last 30 Days <span class="caret"></span>
919
920
  </button>
920
921
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
922
+ <li class="selected"><a href="#">Last 30 Days</a></li>
921
923
  <li><a href="#">Last 60 Days</a></li>
922
924
  <li><a href="#">Last 90 Days</a></li>
923
925
  </ul>
@@ -948,6 +950,7 @@
948
950
  Last 30 Days <span class="caret"></span>
949
951
  </button>
950
952
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
953
+ <li class="selected"><a href="#">Last 30 Days</a></li>
951
954
  <li><a href="#">Last 60 Days</a></li>
952
955
  <li><a href="#">Last 90 Days</a></li>
953
956
  </ul>
@@ -890,6 +890,7 @@
890
890
  Last 30 Days <span class="caret"></span>
891
891
  </button>
892
892
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
893
+ <li class="selected"><a href="#">Last 30 Days</a></li>
893
894
  <li><a href="#">Last 60 Days</a></li>
894
895
  <li><a href="#">Last 90 Days</a></li>
895
896
  </ul>
@@ -918,6 +919,7 @@
918
919
  Last 30 Days <span class="caret"></span>
919
920
  </button>
920
921
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
922
+ <li class="selected"><a href="#">Last 30 Days</a></li>
921
923
  <li><a href="#">Last 60 Days</a></li>
922
924
  <li><a href="#">Last 90 Days</a></li>
923
925
  </ul>
@@ -948,6 +950,7 @@
948
950
  Last 30 Days <span class="caret"></span>
949
951
  </button>
950
952
  <ul class="dropdown-menu dropdown-menu-right" role="menu">
953
+ <li class="selected"><a href="#">Last 30 Days</a></li>
951
954
  <li><a href="#">Last 60 Days</a></li>
952
955
  <li><a href="#">Last 90 Days</a></li>
953
956
  </ul>
@@ -40,310 +40,272 @@
40
40
  These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
41
41
  </div>
42
42
  <hr>
43
- <h2>Initializing</h2>
44
- <button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
45
- state
46
- </button>
47
- <div class="example-pf "><!-- for testing/dev; not for production -->
48
- <div class="modal" id="initializing" tabindex="-1" role="dialog">
49
- <div class="modal-dialog modal-lg wizard-pf">
50
- <div class="modal-content">
51
- <div class="modal-header">
52
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
53
- <span aria-hidden="true">&times;</span>
54
- </button>
55
- <dt class="modal-title">Wizard Title</dt>
56
- </div>
57
- <div class="modal-body wizard-pf-body clearfix">
58
- <div class="wizard-pf-steps hidden">
59
- <ul class="wizard-pf-steps-indicator">
60
- <li>
61
- <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
62
- </li>
63
- <li>
64
- <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
65
- </li>
66
- <li>
67
- <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
68
- </li>
69
- </ul>
70
- </div>
71
-
72
- <div class="wizard-pf-sidebar hidden">
73
- <ul class="list-group">
74
- <li class="list-group-item active">
75
- <a>
76
- <span class="wizard-pf-substep-number">1A.</span>
77
- <span class="wizard-pf-substep-title">General</span>
78
- </a>
79
- </li>
80
- <li class="list-group-item">
81
- <a>
82
- <span class="wizard-pf-substep-number">1B.</span>
83
- <span class="wizard-pf-substep-title">Masters &amp; Nodes</span>
84
- </a>
85
- </li>
86
- <li class="list-group-item">
87
- <a>
88
- <span class="wizard-pf-substep-number">1C.</span>
89
- <span class="wizard-pf-substep-title">CDN Channel</span>
90
- </a>
91
- </li>
92
- </ul>
93
- </div><!-- /.wizard-pf-sidebar -->
94
-
95
- <div class="wizard-pf-main">
96
- <div class="blank-slate-pf">
97
- <div class="spinner spinner-lg blank-slate-pf-icon"></div>
98
- <h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
99
- <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
100
- vivamus, lorem sociosqu eget nunc amet. </p>
101
- </div>
102
-
103
- </div>
104
-
105
- </div><!-- /.wizard-pf-body -->
106
-
107
- <!-- TODO: disable buttons -->
108
- <div class="modal-footer wizard-pf-footer">
109
- <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
110
- <button type="button" class="btn btn-default disabled" data-dismiss="modal">
111
- <span class="i fa fa-angle-left"></span>
112
- Back
113
- </button>
114
- <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
115
- Next
116
- <span class="i fa fa-angle-right"></span>
117
- </button>
118
- </div><!-- /.wizard-pf-footer -->
119
-
120
- </div><!-- /.modal-content -->
121
- </div><!-- /.modal-dialog -->
122
- </div><!-- /.modal -->
123
- </div><!-- /.example-pf (not for production) -->
124
43
 
125
- <h2>First Step</h2>
126
- <button class="btn btn-default" data-toggle="modal" data-target="#firstStep">Launch wizard showing first step</button>
44
+ <h2>Complete Wizard</h2>
45
+ <button class="btn btn-default wizard-pf-open" data-target="#complete">Launch wizard</button>
127
46
  <div class="example-pf "><!-- for testing/dev; not for production -->
128
- <div class="modal " id="firstStep" tabindex="-1" role="dialog">
47
+ <div class="modal " id="complete" tabindex="-1" role="dialog">
129
48
  <div class="modal-dialog modal-lg wizard-pf">
130
49
  <div class="modal-content">
131
50
  <div class="modal-header">
132
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
51
+ <button type="button" class="close wizard-pf-dismiss" aria-label="Close"><span
133
52
  aria-hidden="true">&times;</span></button>
134
53
  <dt class="modal-title">Wizard Title</dt>
135
54
  </div>
136
55
  <div class="modal-body wizard-pf-body clearfix">
137
- <div class="wizard-pf-steps">
138
- <ul class="wizard-pf-steps-indicator">
139
- <li class="active">
140
- <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
141
- </li>
142
- <li>
143
- <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
144
- </li>
145
- <li>
146
- <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
147
- </li>
148
- </ul>
149
- </div>
150
-
151
- <div class="wizard-pf-sidebar">
152
- <ul class="list-group">
153
- <li class="list-group-item active clearfix">
154
- <a>
155
- <span class="wizard-pf-substep-number">1A.</span>
156
- <span class="wizard-pf-substep-title">Details</span>
157
- </a>
158
- </li>
159
- <li class="list-group-item">
160
- <a>
161
- <span class="wizard-pf-substep-number">1B.</span>
162
- <span class="wizard-pf-substep-title">Settings</span>
163
- </a>
164
- </li>
165
- </ul>
166
- </div><!-- /.wizard-pf-sidebar -->
167
-
168
- <div class="wizard-pf-main">
169
- <div>
170
- <form class="form-horizontal">
171
- <div class="form-group required">
172
- <label class="col-sm-2 control-label" for="textInput-markup">Name</label>
173
- <div class="col-sm-10">
174
- <input type="text" id="textInput-markup" class="form-control">
175
- </div>
176
- </div>
177
- <div class="form-group">
178
- <label class="col-sm-2 control-label" for="descriptionInput-markup">Description (Optional)</label>
179
- <div class="col-sm-10">
180
- <textarea id="descriptionInput-markup" class="form-control" rows="2"></textarea>
181
- </div>
182
- </div>
183
- </form>
184
- </div>
185
- </div><!-- /.wizard-pf-main -->
186
-
187
- </div><!-- /.wizard-pf-body -->
188
-
189
- <div class="modal-footer wizard-pf-footer">
190
- <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
191
- <button type="button" class="btn btn-default disabled" data-dismiss="modal">
192
- <span class="i fa fa-angle-left"></span>
193
- Back
194
- </button>
195
- <button type="button" class="btn btn-primary " data-dismiss="modal">
196
- Next
197
- <span class="i fa fa-angle-right"></span>
198
- </button>
199
-
200
- </div><!-- /.wizard-pf-footer -->
201
-
202
- </div><!-- /.modal-content -->
203
- </div><!-- /.modal-dialog -->
204
- </div><!-- /.modal -->
205
- </div><!-- /.example-pf (not for production) -->
206
-
207
- <h2>Review Step</h2>
208
- <button class="btn btn-default" data-toggle="modal" data-target="#secondStep">Launch wizard showing review step</button>
209
- <div class="example-pf "><!-- for testing/dev; not for production -->
210
- <div class="modal " id="secondStep" tabindex="-1" role="dialog">
211
- <div class="modal-dialog modal-lg wizard-pf">
212
- <div class="modal-content">
213
- <div class="modal-header">
214
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
215
- aria-hidden="true">&times;</span></button>
216
- <dt class="modal-title">Wizard Title</dt>
217
- </div>
218
- <div class="modal-body wizard-pf-body clearfix">
219
- <div class="wizard-pf-steps">
56
+ <div class="wizard-pf-steps hidden">
220
57
  <ul class="wizard-pf-steps-indicator">
221
- <li class="viewed-pf">
58
+ <li class="wizard-pf-step active" data-tabgroup="1">
222
59
  <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
223
60
  </li>
224
- <li class="viewed-pf">
61
+ <li class="wizard-pf-step" data-tabgroup="2">
225
62
  <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
226
63
  </li>
227
- <li class="active">
64
+ <li class="wizard-pf-step" data-tabgroup="3">
228
65
  <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
229
66
  </li>
230
67
  </ul>
231
68
  </div>
232
69
 
233
- <div class="wizard-pf-sidebar">
234
- <ul class="list-group">
235
- <li class="list-group-item active">
236
- <a>
237
- <span class="wizard-pf-substep-number">3A.</span>
238
- <span class="wizard-pf-substep-title">Summary</span>
239
- </a>
240
- </li>
241
- <li class="list-group-item">
242
- <a>
243
- <span class="wizard-pf-substep-number">3B.</span>
244
- <span class="wizard-pf-substep-title">Progress</span>
245
- </a>
246
- </li>
247
- </ul>
248
- </div><!-- /.wizard-pf-sidebar -->
249
-
250
- <div class="wizard-pf-main">
251
- <div class="wizard-pf-review-steps">
70
+ <div class="wizard-pf-row">
71
+ <div class="wizard-pf-sidebar hidden">
252
72
  <ul class="list-group">
73
+ <li class="list-group-item active">
74
+ <a href="#">
75
+ <span class="wizard-pf-substep-number">1A.</span>
76
+ <span class="wizard-pf-substep-title">Details</span>
77
+ </a>
78
+ </li>
253
79
  <li class="list-group-item">
254
- <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1').toggleClass('collapse');">First Step</a>
255
- <div id="reviewStep1" class="wizard-pf-review-substeps">
256
- <ul class="list-group">
257
- <li class="list-group-item">
258
- <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep1').toggleClass('collapse');">
259
- <span class="wizard-pf-substep-number">1A.</span>
260
- <span class="wizard-pf-substep-title">Details</span>
261
- </a>
262
- <div id="reviewStep1Substep1" class="wizard-pf-review-content">
263
- <form class="form">
264
- <div class="wizard-pf-review-item">
265
- <span class="wizard-pf-review-item-label">Name:</span>
266
- <span class="wizard-pf-review-item-value">First Last</span>
267
- </div>
268
- <div class="wizard-pf-review-item">
269
- <span class="wizard-pf-review-item-label">Description:</span>
270
- <span class="wizard-pf-review-item-value">This is the description</span>
271
- </div>
272
- </form>
273
- </div>
274
- </li>
275
- <li class="list-group-item">
276
- <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep2').toggleClass('collapse');">
277
- <span class="wizard-pf-substep-number">1B.</span>
278
- <span class="wizard-pf-substep-title">Settings</span>
279
- </a>
280
- <div id="reviewStep1Substep2" class="wizard-pf-review-content">
281
- <form class="form">
282
- <div class="wizard-pf-review-item">
283
- <div class="wizard-pf-review-item-field">Setting A</div>
284
- <div class="wizard-pf-review-item-field">Setting B</div>
285
- </div>
286
- </form>
287
- </div>
288
- </li>
289
- </ul>
290
- </div>
80
+ <a href="#">
81
+ <span class="wizard-pf-substep-number">1B.</span>
82
+ <span class="wizard-pf-substep-title">Settings</span>
83
+ </a>
84
+ </li>
85
+ </ul>
86
+ <ul class="list-group hidden">
87
+ <li class="list-group-item">
88
+ <a href="#">
89
+ <span class="wizard-pf-substep-number">2A.</span>
90
+ <span class="wizard-pf-substep-title">Details</span>
91
+ </a>
92
+ </li>
93
+ <li class="list-group-item">
94
+ <a href="#">
95
+ <span class="wizard-pf-substep-number">2B.</span>
96
+ <span class="wizard-pf-substep-title">Settings</span>
97
+ </a>
98
+ </li>
99
+ </ul>
100
+ <ul class="list-group hidden">
101
+ <li class="list-group-item">
102
+ <a>
103
+ <span class="wizard-pf-substep-number">3A.</span>
104
+ <span class="wizard-pf-substep-title">Summary</span>
105
+ </a>
291
106
  </li>
292
107
  <li class="list-group-item">
293
- <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2').toggleClass('collapse');">Second Step</a>
294
- <div id="reviewStep2" class="wizard-pf-review-substeps">
295
- <ul class="list-group">
296
- <li class="list-group-item">
297
- <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep1').toggleClass('collapse');">
298
- <span class="wizard-pf-substep-number">2A.</span>
299
- <span class="wizard-pf-substep-title">Details</span>
300
- </a>
301
- <div id="reviewStep2Substep1" class="wizard-pf-review-content">
302
- <form class="form">
303
- <div class="wizard-pf-review-item">
304
- <span class="wizard-pf-review-item-label">Name:</span>
305
- <span class="wizard-pf-review-item-value">First Last</span>
108
+ <a>
109
+ <span class="wizard-pf-substep-number">3B.</span>
110
+ <span class="wizard-pf-substep-title">Progress</span>
111
+ </a>
112
+ </li>
113
+ </ul>
114
+ </div> <!-- /.wizard-pf-sidebar -->
115
+ <div class="wizard-pf-main">
116
+ <div class="wizard-pf-loading blank-slate-pf">
117
+ <div class="spinner spinner-lg blank-slate-pf-icon"></div>
118
+ <h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
119
+ <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
120
+ vivamus, lorem sociosqu eget nunc amet. </p>
121
+ </div>
122
+ <div class="wizard-pf-contents hidden">
123
+ <form class="form-horizontal">
124
+ <!-- replacing id with data-id to pass build errors -->
125
+ <div class="form-group required">
126
+ <label class="col-sm-2 control-label" for="textInput-markup">Name</label>
127
+ <div class="col-sm-10">
128
+ <input type="text" data-id="textInput-markup" class="form-control">
129
+ </div>
130
+ </div>
131
+ <div class="form-group">
132
+ <label class="col-sm-2 control-label" for="descriptionInput-markup">Description (Optional)</label>
133
+ <div class="col-sm-10">
134
+ <textarea data-id="descriptionInput-markup" class="form-control" rows="2"></textarea>
135
+ </div>
136
+ </div>
137
+ </form>
138
+ </div>
139
+ <div class="wizard-pf-contents hidden">
140
+ <form class="form-horizontal">
141
+ <div class="form-group required">
142
+ <label class="col-sm-2 control-label" for="lorem">Lorem ipsum</label>
143
+ <div class="col-sm-10">
144
+ <input type="text" id="lorem" class="form-control">
145
+ </div>
146
+ </div>
147
+ <div class="form-group">
148
+ <label class="col-sm-2 control-label" for="dolor">Dolor (Optional)</label>
149
+ <div class="col-sm-10">
150
+ <textarea id="dolor" class="form-control" rows="2"></textarea>
151
+ </div>
152
+ </div>
153
+ </form>
154
+ </div>
155
+ <div class="wizard-pf-contents hidden">
156
+ <form class="form-horizontal">
157
+ <div class="form-group required">
158
+ <label class="col-sm-2 control-label" for="aliquam">Aliquam</label>
159
+ <div class="col-sm-10">
160
+ <input type="text" id="aliquam" class="form-control">
161
+ </div>
162
+ </div>
163
+ <div class="form-group">
164
+ <label class="col-sm-2 control-label" for="fermentum">Fermentum</label>
165
+ <div class="col-sm-10">
166
+ <textarea id="fermentum" class="form-control" rows="2"></textarea>
167
+ </div>
168
+ </div>
169
+ </form>
170
+ </div>
171
+ <div class="wizard-pf-contents hidden">
172
+ <form class="form-horizontal">
173
+ <div class="form-group required">
174
+ <label class="col-sm-2 control-label" for="consectetur">Consectetur</label>
175
+ <div class="col-sm-10">
176
+ <input type="text" id="consectetur" class="form-control">
177
+ </div>
178
+ </div>
179
+ <div class="form-group">
180
+ <label class="col-sm-2 control-label" for="adipiscing">Adipiscing</label>
181
+ <div class="col-sm-10">
182
+ <textarea id="adipiscing" class="form-control" rows="2"></textarea>
183
+ </div>
184
+ </div>
185
+ </form>
186
+ </div>
187
+ <div class="wizard-pf-contents hidden">
188
+ <div class="wizard-pf-review-steps">
189
+ <ul class="list-group">
190
+ <li class="list-group-item">
191
+ <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1').toggleClass('collapse');">First Step</a>
192
+ <div id="reviewStep1" class="wizard-pf-review-substeps">
193
+ <ul class="list-group">
194
+ <li class="list-group-item">
195
+ <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep1').toggleClass('collapse');">
196
+ <span class="wizard-pf-substep-number">1A.</span>
197
+ <span class="wizard-pf-substep-title">Details</span>
198
+ </a>
199
+ <div id="reviewStep1Substep1" class="wizard-pf-review-content">
200
+ <form class="form">
201
+ <div class="wizard-pf-review-item">
202
+ <span class="wizard-pf-review-item-label">Name:</span>
203
+ <span class="wizard-pf-review-item-value">First Last</span>
204
+ </div>
205
+ <div class="wizard-pf-review-item">
206
+ <span class="wizard-pf-review-item-label">Description:</span>
207
+ <span class="wizard-pf-review-item-value">This is the description</span>
208
+ </div>
209
+ </form>
306
210
  </div>
307
- <div class="wizard-pf-review-item">
308
- <span class="wizard-pf-review-item-label">Description:</span>
309
- <span class="wizard-pf-review-item-value">This is the description</span>
211
+ </li>
212
+ <li class="list-group-item">
213
+ <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep2').toggleClass('collapse');">
214
+ <span class="wizard-pf-substep-number">1B.</span>
215
+ <span class="wizard-pf-substep-title">Settings</span>
216
+ </a>
217
+ <div id="reviewStep1Substep2" class="wizard-pf-review-content">
218
+ <form class="form">
219
+ <div class="wizard-pf-review-item">
220
+ <div class="wizard-pf-review-item-field">Setting A</div>
221
+ <div class="wizard-pf-review-item-field">Setting B</div>
222
+ </div>
223
+ </form>
310
224
  </div>
311
- </form>
312
- </div>
313
- </li>
314
- <li class="list-group-item">
315
- <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep2').toggleClass('collapse');">
316
- <span class="wizard-pf-substep-number">2B.</span>
317
- <span class="wizard-pf-substep-title">Settings</span>
318
- </a>
319
- <div id="reviewStep2Substep2" class="wizard-pf-review-content">
320
- <form class="form">
321
- <div class="wizard-pf-review-item">
322
- <div class="wizard-pf-review-item-field">Setting A</div>
323
- <div class="wizard-pf-review-item-field">Setting B</div>
225
+ </li>
226
+ </ul>
227
+ </div>
228
+ </li>
229
+ <li class="list-group-item">
230
+ <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2').toggleClass('collapse');">Second Step</a>
231
+ <div id="reviewStep2" class="wizard-pf-review-substeps">
232
+ <ul class="list-group">
233
+ <li class="list-group-item">
234
+ <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep1').toggleClass('collapse');">
235
+ <span class="wizard-pf-substep-number">2A.</span>
236
+ <span class="wizard-pf-substep-title">Details</span>
237
+ </a>
238
+ <div id="reviewStep2Substep1" class="wizard-pf-review-content">
239
+ <form class="form">
240
+ <div class="wizard-pf-review-item">
241
+ <span class="wizard-pf-review-item-label">Name:</span>
242
+ <span class="wizard-pf-review-item-value">First Last</span>
243
+ </div>
244
+ <div class="wizard-pf-review-item">
245
+ <span class="wizard-pf-review-item-label">Description:</span>
246
+ <span class="wizard-pf-review-item-value">This is the description</span>
247
+ </div>
248
+ </form>
324
249
  </div>
325
- </form>
326
- </div>
327
- </li>
328
- </ul>
329
- </div>
330
- </li>
331
- </ul>
332
- </div>
333
- </div><!-- /.wizard-pf-main -->
250
+ </li>
251
+ <li class="list-group-item">
252
+ <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep2').toggleClass('collapse');">
253
+ <span class="wizard-pf-substep-number">2B.</span>
254
+ <span class="wizard-pf-substep-title">Settings</span>
255
+ </a>
256
+ <div id="reviewStep2Substep2" class="wizard-pf-review-content">
257
+ <form class="form">
258
+ <div class="wizard-pf-review-item">
259
+ <div class="wizard-pf-review-item-field">Setting A</div>
260
+ <div class="wizard-pf-review-item-field">Setting B</div>
261
+ </div>
262
+ </form>
263
+ </div>
264
+ </li>
265
+ </ul>
266
+ </div>
267
+ </li>
268
+ </ul>
269
+ </div>
270
+ </div>
271
+ <div class="wizard-pf-contents hidden">
272
+ <div class="wizard-pf-process blank-slate-pf">
273
+ <div class="spinner spinner-lg blank-slate-pf-icon"></div>
274
+ <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
275
+ <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
276
+ vivamus, lorem sociosqu eget nunc amet. </p>
277
+ </div>
278
+ <div class="wizard-pf-complete blank-slate-pf hidden">
279
+ <div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
280
+ <h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
281
+ <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
282
+ vivamus, lorem sociosqu eget nunc amet. </p>
283
+ <button type="button" class="btn btn-lg btn-primary">
284
+ View Deployment
285
+ </button>
286
+
287
+ </div>
288
+ </div>
289
+ </div><!-- /.wizard-pf-main -->
290
+ </div>
334
291
 
335
292
  </div><!-- /.wizard-pf-body -->
336
293
 
337
294
  <div class="modal-footer wizard-pf-footer">
338
- <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
339
- <button type="button" class="btn btn-default" data-dismiss="modal">
295
+ <button type="button" class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-dismiss">Cancel</button>
296
+ <button type="button" class="btn btn-default wizard-pf-back disabled">
340
297
  <span class="i fa fa-angle-left"></span>
341
298
  Back
342
299
  </button>
343
- <button type="button" class="btn btn-primary " data-dismiss="modal">
300
+ <button type="button" class="btn btn-primary wizard-pf-next disabled">
344
301
  Next
345
302
  <span class="i fa fa-angle-right"></span>
346
303
  </button>
304
+ <button type="button" class="btn btn-primary hidden wizard-pf-finish">
305
+ Deploy
306
+ <span class="i fa fa-angle-right"></span>
307
+ </button>
308
+ <button type="button" class="btn btn-primary hidden wizard-pf-close wizard-pf-dismiss">Close</button>
347
309
 
348
310
  </div><!-- /.wizard-pf-footer -->
349
311
 
@@ -352,12 +314,12 @@
352
314
  </div><!-- /.modal -->
353
315
  </div><!-- /.example-pf (not for production) -->
354
316
 
355
- <h2>Last Step</h2>
356
- <button class="btn btn-default" data-toggle="modal" data-target="#done">Launch wizard showing finalizing
317
+ <h2>Initializing</h2>
318
+ <button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
357
319
  state
358
320
  </button>
359
321
  <div class="example-pf "><!-- for testing/dev; not for production -->
360
- <div class="modal" id="done" tabindex="-1" role="dialog">
322
+ <div class="modal" id="initializing" tabindex="-1" role="dialog">
361
323
  <div class="modal-dialog modal-lg wizard-pf">
362
324
  <div class="modal-content">
363
325
  <div class="modal-header">
@@ -367,41 +329,47 @@
367
329
  <dt class="modal-title">Wizard Title</dt>
368
330
  </div>
369
331
  <div class="modal-body wizard-pf-body clearfix">
370
- <div class="wizard-pf-steps">
332
+ <div class="wizard-pf-steps hidden">
371
333
  <ul class="wizard-pf-steps-indicator">
372
- <li class="viewed-pf">
334
+ <li>
373
335
  <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
374
336
  </li>
375
- <li class="viewed-pf">
337
+ <li>
376
338
  <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
377
339
  </li>
378
- <li class="active">
340
+ <li>
379
341
  <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
380
342
  </li>
381
343
  </ul>
382
344
  </div>
383
345
 
384
- <div class="wizard-pf-sidebar">
346
+ <div class="wizard-pf-sidebar hidden">
385
347
  <ul class="list-group">
348
+ <li class="list-group-item active">
349
+ <a>
350
+ <span class="wizard-pf-substep-number">1A.</span>
351
+ <span class="wizard-pf-substep-title">General</span>
352
+ </a>
353
+ </li>
386
354
  <li class="list-group-item">
387
355
  <a>
388
- <span class="wizard-pf-substep-number">3A.</span>
389
- <span class="wizard-pf-substep-title">Summary</span>
356
+ <span class="wizard-pf-substep-number">1B.</span>
357
+ <span class="wizard-pf-substep-title">Masters &amp; Nodes</span>
390
358
  </a>
391
359
  </li>
392
- <li class="list-group-item active">
360
+ <li class="list-group-item">
393
361
  <a>
394
- <span class="wizard-pf-substep-number">3B.</span>
395
- <span class="wizard-pf-substep-title">Progress</span>
362
+ <span class="wizard-pf-substep-number">1C.</span>
363
+ <span class="wizard-pf-substep-title">CDN Channel</span>
396
364
  </a>
397
365
  </li>
398
366
  </ul>
399
367
  </div><!-- /.wizard-pf-sidebar -->
400
368
 
401
- <div class="wizard-pf-main">
369
+ <div class="wizard-pf-main" style="margin-left: 0px">
402
370
  <div class="blank-slate-pf">
403
371
  <div class="spinner spinner-lg blank-slate-pf-icon"></div>
404
- <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
372
+ <h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
405
373
  <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
406
374
  vivamus, lorem sociosqu eget nunc amet. </p>
407
375
  </div>
@@ -418,7 +386,7 @@
418
386
  Back
419
387
  </button>
420
388
  <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
421
- Deploy
389
+ Next
422
390
  <span class="i fa fa-angle-right"></span>
423
391
  </button>
424
392
  </div><!-- /.wizard-pf-footer -->
@@ -428,12 +396,12 @@
428
396
  </div><!-- /.modal -->
429
397
  </div><!-- /.example-pf (not for production) -->
430
398
 
431
- <h2>Completed</h2>
432
- <button class="btn btn-default" data-toggle="modal" data-target="#finalizing">Launch wizard showing finalizing
399
+ <h2>Last Step</h2>
400
+ <button class="btn btn-default" data-toggle="modal" data-target="#done">Launch wizard showing finalizing
433
401
  state
434
402
  </button>
435
403
  <div class="example-pf "><!-- for testing/dev; not for production -->
436
- <div class="modal" id="finalizing" tabindex="-1" role="dialog">
404
+ <div class="modal" id="done" tabindex="-1" role="dialog">
437
405
  <div class="modal-dialog modal-lg wizard-pf">
438
406
  <div class="modal-content">
439
407
  <div class="modal-header">
@@ -456,48 +424,46 @@
456
424
  </li>
457
425
  </ul>
458
426
  </div>
427
+ <div class="wizard-pf-row">
428
+ <div class="wizard-pf-sidebar">
429
+ <ul class="list-group">
430
+ <li class="list-group-item">
431
+ <a>
432
+ <span class="wizard-pf-substep-number">3A.</span>
433
+ <span class="wizard-pf-substep-title">Summary</span>
434
+ </a>
435
+ </li>
436
+ <li class="list-group-item active">
437
+ <a>
438
+ <span class="wizard-pf-substep-number">3B.</span>
439
+ <span class="wizard-pf-substep-title">Progress</span>
440
+ </a>
441
+ </li>
442
+ </ul>
443
+ </div><!-- /.wizard-pf-sidebar -->
459
444
 
460
- <div class="wizard-pf-sidebar">
461
- <ul class="list-group">
462
- <li class="list-group-item">
463
- <a>
464
- <span class="wizard-pf-substep-number">3A.</span>
465
- <span class="wizard-pf-substep-title">Summary</span>
466
- </a>
467
- </li>
468
- <li class="list-group-item active">
469
- <a>
470
- <span class="wizard-pf-substep-number">3B.</span>
471
- <span class="wizard-pf-substep-title">Progress</span>
472
- </a>
473
- </li>
474
- </ul>
475
- </div><!-- /.wizard-pf-sidebar -->
476
-
477
- <div class="wizard-pf-main">
478
- <div class="blank-slate-pf">
479
- <div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
480
- <h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
481
- <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
482
- vivamus, lorem sociosqu eget nunc amet. </p>
483
- <button type="button" class="btn btn-lg btn-primary">
484
- View Deployment
485
- </button>
445
+ <div class="wizard-pf-main">
446
+ <div class="blank-slate-pf">
447
+ <div class="spinner spinner-lg blank-slate-pf-icon"></div>
448
+ <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
449
+ <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
450
+ vivamus, lorem sociosqu eget nunc amet. </p>
451
+ </div>
486
452
 
487
453
  </div>
488
-
489
454
  </div>
490
-
491
455
  </div><!-- /.wizard-pf-body -->
492
456
 
493
457
  <!-- TODO: disable buttons -->
494
458
  <div class="modal-footer wizard-pf-footer">
495
- <button type="button" class="btn btn-default" data-dismiss="modal">
459
+ <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
460
+ <button type="button" class="btn btn-default disabled" data-dismiss="modal">
496
461
  <span class="i fa fa-angle-left"></span>
497
462
  Back
498
463
  </button>
499
- <button type="button" class="btn btn-primary" data-dismiss="modal">
500
- Close
464
+ <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
465
+ Deploy
466
+ <span class="i fa fa-angle-right"></span>
501
467
  </button>
502
468
  </div><!-- /.wizard-pf-footer -->
503
469
 
@@ -507,6 +473,296 @@
507
473
  </div><!-- /.example-pf (not for production) -->
508
474
 
509
475
 
476
+ <script>
477
+
478
+ $(document).ready(function() {
479
+ //initialize wizards
480
+ var completeWizard = new wizard(".btn[data-target='#complete']");
481
+ // the other wizard examples are not listed here -- they are only
482
+ // included to show examples of the loading and process screens
483
+
484
+ });
485
+
486
+ var wizard = function(id) {
487
+ var self = this, modal, tabs, tabCount, tabLast, currentGroup, currentTab, contents;
488
+ self.id = id;
489
+
490
+ $(self.id).click(function() {
491
+ self.init(this)
492
+ });
493
+
494
+ this.init = function(button){
495
+ // get id of open modal
496
+ self.modal = $(button).data("target");
497
+
498
+ // open modal
499
+ $(self.modal).modal('show');
500
+ // adjust height of contents row (while steps and sidebar are hidden and loading message displays)
501
+ self.updateWizardLayout();
502
+
503
+ // assign data attribute to all tabs
504
+ $(self.modal + " .wizard-pf-sidebar .list-group-item").each(function() {
505
+ // set the first digit (i.e. n.0) equal to the index of the parent tab group
506
+ // set the second digit (i.e. 0.n) equal to the index of the tab within the tab group
507
+ $(this).attr("data-tab", ($(this).parent().index() +1 + ($(this).index()/10 + .1)));
508
+ });
509
+ // assign data attribute to all tabgroups
510
+ $(self.modal + " .wizard-pf-sidebar .list-group").each(function() {
511
+ // set the value equal to the index of the tab group
512
+ $(this).attr("data-tabgroup", ($(this).index() +1));
513
+ });
514
+
515
+ // create array of all tabs, using the data attribute, and determine the last tab
516
+ self.tabs = $(self.modal + " .wizard-pf-sidebar .list-group-item" ).map(function()
517
+ {
518
+ return $(this).data("tab");
519
+ }
520
+ );
521
+ self.tabCount = self.tabs.length;
522
+ self.tabSummary = self.tabs[self.tabCount - 2]; // second to last tab displays summary
523
+ self.tabLast = self.tabs[self.tabCount - 1]; // last tab displays progress
524
+ // set first tab group and tab as current tab
525
+ // if someone wants to target a specific tab, that could be handled here
526
+ self.currentGroup = 1;
527
+ self.currentTab = 1.1;
528
+ self.updateTabGroup();
529
+ // hide loading message
530
+ $(self.modal + " .wizard-pf-loading").addClass("hidden");
531
+ // show tabs and tab groups
532
+ $(self.modal + " .wizard-pf-steps").removeClass("hidden");
533
+ $(self.modal + " .wizard-pf-sidebar").removeClass("hidden");
534
+ // remove active class from all tabs
535
+ $(self.modal + " .wizard-pf-sidebar .list-group-item.active").removeClass("active");
536
+ // apply active class to new current tab and associated contents
537
+ self.updateActiveTab();
538
+ // adjust height of contents row (while steps and sidebar and tab contents are visible)
539
+ self.updateWizardLayout();
540
+ self.updateWizardFooterDisplay();
541
+
542
+ //initialize click listeners
543
+ self.tabGroupSelect();
544
+ self.tabSelect();
545
+ self.backBtnClicked();
546
+ self.nextBtnClicked();
547
+ self.finishBtnClick();
548
+ self.cancelBtnClick();
549
+
550
+ $( window ).resize(function() {
551
+ self.updateWizardLayout();
552
+ });
553
+ };
554
+
555
+ // update which tab group is active
556
+ this.updateTabGroup = function() {
557
+ $(self.modal + " .wizard-pf-step.active").removeClass("active");
558
+ $(self.modal + " .wizard-pf-step[data-tabgroup='" + self.currentGroup + "']").addClass("active");
559
+ $(self.modal + " .wizard-pf-sidebar .list-group").addClass("hidden");
560
+ $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "']").removeClass("hidden");
561
+ };
562
+
563
+ // update which tab is active
564
+ this.updateActiveTab = function() {
565
+ $(self.modal + " .list-group-item[data-tab='" + self.currentTab + "']").addClass("active");
566
+ self.updateVisibleContents();
567
+ };
568
+
569
+ // update which contents are visible
570
+ this.updateVisibleContents = function() {
571
+ var tabIndex = ($.inArray(self.currentTab, self.tabs));
572
+ // displaying contents associated with currentTab
573
+ $(self.modal + " .wizard-pf-contents").addClass("hidden");
574
+ $(self.modal + " .wizard-pf-contents:eq(" + tabIndex + ")").removeClass("hidden");
575
+ // setting focus to first form field in active contents
576
+ setTimeout (function() {
577
+ $(".wizard-pf-contents:not(.hidden) form input, .wizard-pf-contents:not(.hidden) form textarea, .wizard-pf-contents:not(.hidden) form select").first().focus(); // this does not account for disabled or read-only inputs
578
+ }, 100);
579
+ };
580
+
581
+ // update display state of Back button
582
+ this.updateBackBtnDisplay = function() {
583
+ if (self.currentTab == self.tabs[0]) {
584
+ $(self.modal + " .wizard-pf-back").addClass("disabled");
585
+ }
586
+ };
587
+
588
+ // update display state of next/finish button
589
+ this.updateNextBtnDisplay = function() {
590
+ if (self.currentTab == self.tabSummary) {
591
+ $(self.modal + " .wizard-pf-next").addClass("hidden");
592
+ $(self.modal + " .wizard-pf-finish").removeClass("hidden");
593
+ } else {
594
+ $(self.modal + " .wizard-pf-finish").addClass("hidden");
595
+ $(self.modal + " .wizard-pf-next").removeClass("hidden");
596
+ }
597
+ };
598
+
599
+ // update display state of buttons in the footer
600
+ this.updateWizardFooterDisplay = function() {
601
+ $(self.modal + " .wizard-pf-footer .disabled").removeClass("disabled")
602
+ self.updateBackBtnDisplay();
603
+ self.updateNextBtnDisplay();
604
+ };
605
+
606
+ // adjust layout of panels in wizard
607
+ this.updateWizardLayout = function() {
608
+ var top = ($(self.modal + " .modal-header").outerHeight() + $(self.modal + " .wizard-pf-steps").outerHeight()) + "px",
609
+ bottom = $(self.modal + " .modal-footer").outerHeight() + "px",
610
+ sidebarwidth = $(self.modal + " .wizard-pf-sidebar").outerWidth() + "px";
611
+ $(self.modal + " .wizard-pf-row").css("top", top);
612
+ $(self.modal + " .wizard-pf-row").css("bottom", bottom);
613
+ $(self.modal + " .wizard-pf-main").css("margin-left", sidebarwidth);
614
+ };
615
+
616
+ // when the user clicks a step, then the tab group for that step is displayed
617
+ this.tabGroupSelect = function() {
618
+ $(self.modal + " .wizard-pf-step>a").click(function() {
619
+ // remove active class active tabgroup and add active class to the
620
+ // clicked tab group (but don't remove the active class from current tab)
621
+ self.currentGroup = $(this).parent().data("tabgroup");
622
+ self.updateTabGroup();
623
+ // update value for currentTab -- if a tab is already marked as active
624
+ // for the new tab group, use that, otherwise set it to the first tab
625
+ // in the tab group
626
+ self.currentTab = $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").data("tab");
627
+ if (self.currentTab == undefined) {
628
+ self.currentTab = $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item:first-child").data("tab");
629
+ // apply active class to new current tab and associated contents
630
+ self.updateActiveTab();
631
+ } else {
632
+ // use already active tab and just update contents
633
+ self.updateVisibleContents();
634
+ }
635
+ // show/hide/disable/enable buttons if needed
636
+ self.updateWizardFooterDisplay();
637
+ });
638
+ };
639
+
640
+ // when the user clicks a tab, then the tab contents are displayed
641
+ this.tabSelect = function() {
642
+ $(self.modal + " .wizard-pf-sidebar .list-group-item>a").click(function() {
643
+ // update value of currentTab to new active tab
644
+ self.currentTab = $(this).parent().data("tab");
645
+ // remove active class from active tab in current active tab group (i.e.
646
+ // don't remove the class from tabs in other groups)
647
+ $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").removeClass("active");
648
+ // add active class to the clicked tab and the associated contents
649
+ $(this).parent().addClass("active");
650
+ self.updateVisibleContents();
651
+ if (self.currentTab == self.tabLast) {
652
+ $(self.modal + " .wizard-pf-next").addClass("hidden");
653
+ $(self.modal + " .wizard-pf-finish").removeClass("hidden");
654
+ self.finish();
655
+ } else {
656
+ // show/hide/disable/enable buttons if needed
657
+ self.updateWizardFooterDisplay();
658
+ }
659
+ });
660
+ };
661
+
662
+ // Back button clicked
663
+ this.backBtnClicked = function() {
664
+ $(self.modal + " .wizard-pf-back").click(function() {
665
+ // if not the first page
666
+ if (self.currentTab != self.tabs[0]) {
667
+ // go back a page (i.e. -1)
668
+ self.wizardPaging(-1);
669
+ // show/hide/disable/enable buttons if needed
670
+ self.updateWizardFooterDisplay();
671
+ }
672
+ });
673
+ };
674
+
675
+ // Next button clicked
676
+ this.nextBtnClicked = function() {
677
+ $(self.modal + " .wizard-pf-next").click(function() {
678
+ // go forward a page (i.e. +1)
679
+ self.wizardPaging(1);
680
+ // show/hide/disable/enable buttons if needed
681
+ self.updateWizardFooterDisplay();
682
+ });
683
+ };
684
+
685
+ // Finish button clicked
686
+ // Deploy/Finish button would only display during the second to last step.
687
+ this.finishBtnClick = function() {
688
+ $(self.modal + " .wizard-pf-finish").click(function() {
689
+ self.wizardPaging(1);
690
+ self.finish();
691
+ });
692
+ };
693
+
694
+ // Cancel/Close button clicked
695
+ this.cancelBtnClick = function() {
696
+ $(self.modal + " .wizard-pf-dismiss").click(function() {
697
+ // close the modal
698
+ $(self.modal).modal('hide');
699
+ // drop click event listeners
700
+ $(self.modal + " .wizard-pf-step>a").off("click");
701
+ $(self.modal + " .wizard-pf-sidebar .list-group-item>a").off("click");
702
+ $(self.modal + " .wizard-pf-back").off("click");
703
+ $(self.modal + " .wizard-pf-next").off("click");
704
+ $(self.modal + " .wizard-pf-finish").off("click");
705
+ $(self.modal + " .wizard-pf-dismiss").off("click");
706
+ // reset final step
707
+ $(self.modal + " .wizard-pf-process").removeClass("hidden");
708
+ $(self.modal + " .wizard-pf-complete").addClass("hidden");
709
+ // reset loading message
710
+ $(self.modal + " .wizard-pf-contents").addClass("hidden");
711
+ $(self.modal + " .wizard-pf-loading").removeClass("hidden");
712
+ // remove tabs and tab groups
713
+ $(self.modal + " .wizard-pf-steps").addClass("hidden");
714
+ $(self.modal + " .wizard-pf-sidebar").addClass("hidden");
715
+ // reset buttons in final step
716
+ $(self.modal + " .wizard-pf-close").addClass("hidden");
717
+ $(self.modal + " .wizard-pf-cancel").removeClass("hidden");
718
+ });
719
+ };
720
+
721
+ // when the user clicks Next/Back, then the next/previous tab and contents display
722
+ this.wizardPaging = function(direction) {
723
+ // get n.n value of next tab using the index of next tab in tabs array
724
+ var tabIndex = ($.inArray(self.currentTab, self.tabs)) + direction;
725
+ var newTab = self.tabs[tabIndex];
726
+ // add/remove active class from current tab group
727
+ // included math.round to trim off extra .000000000002 that was getting added
728
+ if (newTab != Math.round(10*(direction*.1 + self.currentTab))/10) {
729
+ // this statement is true when the next tab is in the next tab group
730
+ // if next tab is in next tab group (e.g. next tab data-tab value is
731
+ // not equal to current tab +.1) then apply active class to next
732
+ // tab group and step, and update the value for var currentGroup +/-1
733
+ self.currentGroup = self.currentGroup + direction;
734
+ self.updateTabGroup();
735
+ }
736
+ self.currentTab = newTab;
737
+ // remove active class from active tab in current tab group
738
+ $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").removeClass("active");
739
+ // apply active class to new current tab and associated contents
740
+ self.updateActiveTab();
741
+ };
742
+
743
+ // This code keeps the same contents div active, but switches out what
744
+ // contents display in that div (i.e. replaces process message with
745
+ // success message).
746
+ this.finish = function() {
747
+ $(self.modal + " .wizard-pf-back").addClass("disabled"); // if Back remains enabled during this step, then the Close button needs to be removed when the user clicks Back
748
+ $(self.modal + " .wizard-pf-finish").addClass("disabled");
749
+ // code for kicking off process goes here
750
+ // the next code is just to simulate the expected experience, in that
751
+ // when the process is complete, the success message etc. would display
752
+ setTimeout (function() {
753
+ $(self.modal + " .wizard-pf-cancel").addClass("hidden");
754
+ $(self.modal + " .wizard-pf-finish").addClass("hidden");
755
+ $(self.modal + " .wizard-pf-close").removeClass("hidden");
756
+ $(self.modal + " .wizard-pf-process").addClass("hidden");
757
+ $(self.modal + " .wizard-pf-complete").removeClass("hidden");
758
+ }, 3000);
759
+ };
760
+
761
+
762
+
763
+ };
764
+ </script>
765
+
510
766
 
511
767
  </div><!-- /container -->
512
768
  </body>