Merge pull request #39 from legalthings/preview-buttons-broken

Preview buttons broken
legalthings · May 1, 2017 · 11b44d3 · 11b44d3
2 parents 2ee6db7 + 66531ba
commit 11b44d3
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 58 deletions.
diff --git a/css/general.css b/css/general.css
@@ -2,8 +2,7 @@
     overflow: visible;
 }
 
-.wizard,
-.wizards-actions {
+.wizard {
     padding-right: 25px;
 }
 
@@ -38,4 +37,4 @@
 
 .wizard .datepicker table {
     width: 100%;
-}
+}
diff --git a/css/material.css b/css/material.css
@@ -147,31 +147,18 @@
     color: red;
 }
 
-.material + .wizards-actions {
+.material .wizard-step .wizards-actions {
     display: none;
 }
 
-.material .wizard-step .wizard-actions {
+.material .wizard-step .wizards-actions {
     min-height: 60px;
     padding: 10px 10px 10px 50px;
     width: 100%;
 }
-.material .wizard-step.active .wizard-actions {
+.material .wizard-step.active .wizards-actions {
     display: block;
-}
-
-.material .wizard-step.active .wizard-actions .btn {
-    margin: 0;
-    padding: 8px 30px;
-    font-size: 12px;
-}
-.material .wizard-step.active .wizard-actions .btn-default {
-    border-color: transparent;
-}
-
-.material .wizard-actions .btn:not(.btn-outline) {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+    min-height: 65px;
 }
 
 .material .btn.btn-rounded {

diff --git a/index.html b/index.html
@@ -32,12 +32,6 @@ <h1>LegalForm.js demo</h1>
             </div>
 
             <div id="doc-wizard" class="wizard"></div>
-
-            <div class="wizards-actions">
-                <button id="wizard-prev" data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                <button id="wizard-next" data-target="#doc-wizard" data-toggle="wizard" data-step="next" class="btn btn-primary btn-rounded btn-outline pull-right wizard-hide">Next</button>
-                <button id="wizard-done" data-target="#doc-wizard" data-toggle="wizard" data-step="done" class="btn btn-success btn-rounded btn-outline pull-right wizard-hide">Finish</button>
-            </div>
         </div>
 
         <script src="https://code.jquery.com/jquery.js"></script>

diff --git a/js/legalform.js b/js/legalform.js
@@ -38,15 +38,20 @@ function LegalForm($) {
         $.each(definition, function(i, step) {
             if (step.conditions) lines.push('{{# ' + step.conditions + ' }}');
             lines.push('<div class="wizard-step"' + (step.article ? ' data-article="' + step.article + '"' : '') + '>');
-            lines.push('<form class="form navmenu-form">');
             if (step.label) lines.push('<h3>' + step.label + '</h3>');
+            lines.push('<form class="form navmenu-form">');
 
             $.each(step.fields, function(key, field) {
                 lines.push(self.buildField( field, step.group || null, 'use'));
             });
 
             lines.push('</form>');
-            lines.push('</div>');
+            lines.push('<div class="wizards-actions">');
+            lines.push('<button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>');
+            lines.push('<button data-target="#doc-wizard" data-toggle="wizard" data-step="next" class="btn btn-primary btn-rounded btn-outline pull-right wizard-hide in">Next</button>');
+            lines.push('<button data-target="#doc-wizard" data-toggle="wizard" data-step="done" class="btn btn-success btn-rounded btn-outline pull-right wizard-hide">Finish</button>');
+            lines.push('</div>'); // wizard actions
+            lines.push('</div>'); // wizard step
             if (step.conditions) lines.push('{{/ ' + step.conditions + ' }}');
         });
 

diff --git a/js/to-material.js b/js/to-material.js
@@ -12,32 +12,19 @@ $.fn.toMaterial = function() {
     // Add class to the material design to prevent another styles for it.
     $docWizard.addClass('material');
 
-    // Move step name on the top and create links for it
-    $docWizard.find('h3').each(function(){$(this).prependTo($(this).parent().parent())});
-
     // Fix select without material
     $docWizard.find('select').removeClass('form-control');
 
     // Added prev-next button to the each step
-    var buttons = ['#wizard-prev', '#wizard-next', '#wizard-done'];
     var $wizardSteps = $docWizard.find('.wizard-step');
-    var $wizardActions = $(buttons.join(', '));
 
     $wizardSteps.each(function(index, value) {
         var $wizardForm = $('<div>').appendTo(this);
         $wizardForm.addClass('wizzard-form');
         $wizardForm.append($(this).find('form'));
-        var $wizardActions = $('<div>').addClass('wizard-actions').appendTo($wizardForm);
-
-        //We add all the buttons to each step. When next/prev step is shown or hidden, sometimes it is needed to show/hide buttons of current step
-        //For ex. if now there is no next step at all, for current step 'next' button is hidden and 'done' button is shown
-        for (var i = 0; i < buttons.length; i++) {
-            $wizardActions.append($(buttons[i]).clone().css('display', '').removeAttr('id'));
-        }
+        $wizardForm.append($(this).find('.wizards-actions'));
     });
 
-    $wizardActions.hide();
-
     // Change checkboxes to the bootstrap material
     $docWizard.find('.form-group .option').each(function() {
         var $div = $(this);
@@ -56,4 +43,8 @@ $.fn.toMaterial = function() {
     // Do all labels floating for nice view
     $docWizard.find('.form-group').addClass('label-floating');
     $docWizard.find('.form-group > label').addClass('control-label');
+
+    if ($.material) {
+        $.material.init();
+    }
 };
diff --git a/material.html b/material.html
@@ -32,11 +32,6 @@ <h1>LegalForm.js demo with Material Design</h1>
                 </div>
             </div>
             <div id="doc-wizard" class="wizard"></div>
-            <div class="wizards-actions">
-                <button id="wizard-prev" data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                <button id="wizard-next" data-target="#doc-wizard" data-toggle="wizard" data-step="next" class="btn btn-primary btn-rounded btn-outline pull-right wizard-hide">Next</button>
-                <button id="wizard-done" data-target="#doc-wizard" data-toggle="wizard" data-step="done" class="btn btn-success btn-rounded btn-outline pull-right wizard-hide">Finish</button>
-            </div>
         </div>
 
         <script src="https://code.jquery.com/jquery.js"></script>
@@ -68,8 +63,6 @@ <h1>LegalForm.js demo with Material Design</h1>
         <script src="js/demo/demo.js"></script>
         <script type="text/javascript">
             $('.wizard').toMaterial();
-            //Init material inputs
-            $.material.init();
         </script>
     </body>
 </html>
diff --git a/nomaterial.html b/nomaterial.html
@@ -31,11 +31,6 @@ <h1>LegalForm.js demo with Material Design</h1>
                 </div>
             </div>
             <div id="doc-wizard" class="wizard"></div>
-            <div class="wizards-actions">
-                <button id="wizard-prev" data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                <button id="wizard-next" data-target="#doc-wizard" data-toggle="wizard" data-step="next" class="btn btn-primary btn-rounded btn-outline pull-right wizard-hide">Next</button>
-                <button id="wizard-done" data-target="#doc-wizard" data-toggle="wizard" data-step="done" class="btn btn-success btn-rounded btn-outline pull-right wizard-hide">Finish</button>
-            </div>
         </div>
 
         <script src="https://code.jquery.com/jquery.js"></script>