Merge pull request #68 from legalthings/Obtain_wizard_actions_from_view

Obtain wizard actions from template. Fix for refreshing wizard after any action
legalthings · Jul 14, 2017 · ebd5a6e · ebd5a6e
2 parents 1ad5895 + f1f82c9
commit ebd5a6e
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 63 deletions.
diff --git a/css/general.css b/css/general.css
@@ -40,3 +40,7 @@
 .wizard .datepicker table {
     width: 100%;
 }
+
+.wizards-actions.template {
+    display: none;
+}
diff --git a/index.html b/index.html
@@ -32,6 +32,12 @@ <h1>LegalForm.js demo</h1>
             </div>
 
             <div id="doc-wizard" class="wizard"></div>
+
+            <div class="wizards-actions template">
+                <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
+                <button 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 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
@@ -45,11 +45,14 @@ function LegalForm($) {
                 lines.push(self.buildField( field, step.group || null, 'use'));
             });
 
+            var buttonsTemplate = '.wizards-actions.template';
+            var buttonsHtml = $(buttonsTemplate).length ?
+                $(buttonsTemplate).html() :
+                $( $('#ractive-template').html() ).find(buttonsTemplate).html();
+
             lines.push('</form>');
             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(buttonsHtml);
             lines.push('</div>'); // wizard actions
             lines.push('</div>'); // wizard step
             if (step.conditions) lines.push('{{/ ' + step.conditions + ' }}');

diff --git a/js/ractive-legalform.js b/js/ractive-legalform.js
@@ -91,7 +91,6 @@
         onChangeLegalForm: function (newValue, oldValue, keypath) {
             if (this.isCondition(keypath)) {
                 this.onChangeCondition(newValue, oldValue, keypath);
-                return;
             }
 
             this.updateExpressions(newValue, oldValue, keypath);

diff --git a/material.html b/material.html
@@ -30,6 +30,12 @@ <h1>LegalForm.js demo with Material Design</h1>
                 </div>
             </div>
             <div id="doc-wizard" class="wizard"></div>
+
+            <div class="wizards-actions template">
+                <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
+                <button 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 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/nomaterial.html b/nomaterial.html
@@ -4,7 +4,7 @@
         <title>LegalForm.js demo with Material Design wizard, but no material design style</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        
+
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker-standalone.min.css">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
@@ -18,7 +18,7 @@
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.bootstrap3.min.css">
-        
+
         <link rel="stylesheet" href="css/likert.css">
         <link rel="stylesheet" href="css/general.css">
         <link rel="stylesheet" href="css/material.css">
@@ -42,6 +42,12 @@ <h1>LegalForm.js demo with Material Design</h1>
                 </div>
             </div>
             <div id="doc-wizard" class="wizard"></div>
+
+            <div class="wizards-actions template">
+                <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
+                <button 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 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/spec/legalform.build.spec.js b/spec/legalform.build.spec.js
@@ -66,9 +66,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -120,9 +117,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -176,9 +170,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -247,9 +238,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -339,9 +327,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -400,9 +385,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
             </div>
         `);
     });
@@ -462,9 +444,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
             </div>
         `);
     });
@@ -513,9 +492,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -565,9 +541,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -704,9 +677,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -745,9 +715,6 @@ describe("building a LegalForm", function() {
                     </div>
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -821,9 +788,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -899,9 +863,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -959,9 +920,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -1064,9 +1022,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -1111,9 +1066,6 @@ describe("building a LegalForm", function() {
 
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
         `);
@@ -1263,9 +1215,6 @@ describe("building a LegalForm", function() {
                     {{/  first_step.text == 'test' }}
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
             <div class="wizard-step">
@@ -1300,9 +1249,6 @@ describe("building a LegalForm", function() {
                     </div>
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
             {{# second_step.amount == 8 }}
@@ -1328,9 +1274,6 @@ describe("building a LegalForm", function() {
                     </div>
                 </form>
                 <div class="wizards-actions">
-                    <button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="btn btn-default pull-left wizard-hide">Previous</button>
-                    <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>
-                    <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>
                 </div>
             </div>
             {{/ second_step.amount == 8 }}