Ticket #2351: wizard_next_or_both.patch

File wizard_next_or_both.patch, 5.0 kB (added by ghenry@…, 18 months ago)

Adds a checkBoth setting, with the default now to only check when the next button is clicked.

  • src/widget/Wizard.js 

    diff -urN dojo-0.4.1-kitchen_sink-old/src/widget/Wizard.js dojo-0.4.1-kitchen_sink/src/widget/Wizard.js
    old new  
    4848        //              Label for the "Done" button. 
    4949        doneButtonLabel: "done", 
    5050 
    51         // cancelButtonLabel: FunctionName 
     51        // checkBoth: Boolean 
     52        //              If true, we call the passFunction when the next button is 
     53        //              clicked, or when the previous button is clicked 
     54        checkBoth: false, 
     55 
     56        // cancelFunction: FunctionName 
    5257        //              Name of function to call if user presses cancel button. 
    5358        //              Cancel button is not displayed if function is not specified. 
    5459        cancelFunction: "", 
    … …  
    112117 
    113118        onSelected: function(/*WizardPanel*/ panel){ 
    114119                // summary: Callback when new panel is selected..  Deselect old panel and select new one 
    115                 if(this.selected ){ 
    116                         if (this.selected._checkPass()) { 
    117                                 this.selected.hide(); 
    118                         } else { 
    119                                 return; 
    120                         } 
    121                 } 
    122                 panel.show(); 
    123                 this.selected = panel; 
     120                if(this.selected){ 
     121            if(this.checkBoth){ // Seems a bit dumb to check here and in _onNextButtonClick? 
     122                if(this.selected._checkPass()){ 
     123                    this.selected.hide(); 
     124                }else{ 
     125                    return; 
     126                } 
     127            }else{ 
     128                this.selected.hide(); 
     129            } 
     130        } 
     131        panel.show(); 
     132        this.selected = panel; 
    124133        }, 
    125134 
    126135        getPanels: function() { 
    … …  
    141150                var selectedIndex = this.selectedIndex(); 
    142151                if ( selectedIndex > -1 ) { 
    143152                        var childPanels = this.getPanels(); 
    144                         if (childPanels[selectedIndex + 1]) { 
    145                                 this.onSelected(childPanels[selectedIndex + 1]); 
    146                         } 
    147                 } 
    148                 this._checkButtons(); 
    149         }, 
     153                        if (childPanels[selectedIndex + 1]){  
     154                if( this.checkBoth ){ 
     155                    this.onSelected(childPanels[selectedIndex + 1]); 
     156                }else{ 
     157                    if (this.selected._checkPass()){ 
     158                        this.onSelected(childPanels[selectedIndex + 1]); 
     159                    } 
     160                } 
     161            } 
     162        } 
     163        this._checkButtons(); 
     164    }, 
    150165 
    151166        _onPreviousButtonClick: function() { 
    152167                // summary: callback when previous button is clicked 

  • tests/widget/test_Wizard.html 

    diff -urN dojo-0.4.1-kitchen_sink-old/tests/widget/test_Wizard.html dojo-0.4.1-kitchen_sink/tests/widget/test_Wizard.html
    old new  
    6666        </div> 
    6767    </div> 
    6868 
    69     <p>The next shows the option to hide the inactive buttons, with a smaller width (smaller width current fails, bug #607)...</p> 
     69    <p>The next example shows the option to hide the inactive buttons, with a smaller width (smaller width current fails, bug #607)...</p> 
    7070 
    7171    <div id="wizard2" dojoType="WizardContainer" hideDisabledButtons="true" style="width: 50%; height: 200px;"> 
    7272        <div dojoType="WizardPane"> 
    … …  
    8383        </div> 
    8484    </div> 
    8585 
    86     <p>The next shows blocking moving to the next step with a JS function...</p> 
     86    <p>The next example shows blocking moving to the next step with a JS function...</p> 
    8787 
    8888    <script> 
    8989        function checkAgreement() { 
    … …  
    109109        </div> 
    110110    </div> 
    111111 
     112    <p>The next example shows that the passFunction can be used in each direction of the wizard, not just when you click "next"</p> 
     113 
     114    <script> 
     115        function checkAgreement1() { 
     116            var frm = document.forms['acceptAgreement1']; 
     117            var accept = frm.accept; 
     118            if (!accept.checked) { 
     119                return "You must agree to the terms before continuing."; 
     120            } 
     121        } 
     122         
     123        function checkAgreement2() { 
     124            var frm = document.forms['acceptAgreement2']; 
     125            var accept = frm.accept; 
     126            if (!accept.checked) { 
     127                return "You must agree to the terms before continuing."; 
     128            } 
     129        } 
     130    </script> 
     131    <div id="wizard4" dojoType="WizardContainer" checkBoth="true" style="width: 100%; height: 200px;"> 
     132        <div dojoType="WizardPane" id="Agreement11" passFunction="checkAgreement1"> 
     133            <h1>Agreement Terms 1</h1> 
     134            <form action="#" name="acceptAgreement1"> 
     135                <p> 
     136                <input type="checkbox" name="accept" value="true"/> I accept the terms of this agreement. 
     137                </p> 
     138            </form> 
     139        </div> 
     140        <div dojoType="WizardPane" id="Agreement2" passFunction="checkAgreement2"> 
     141            <h1>Agreement Terms 2</h1> 
     142            <form action="#" name="acceptAgreement2"> 
     143                <p> 
     144                <input type="checkbox" name="accept" value="true"/> I accept the terms of this agreement. 
     145                </p> 
     146            </form> 
     147        </div> 
     148        <div dojoType="WizardPane" canGoBack="false"> 
     149            <h1>Complete</h1> 
     150            <p>The license has been accepted.</p> 
     151        </div> 
     152    </div> 
     153 
    112154</body> 
    113155</html> 
    114156