Wizard.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. require({cache:{
  2. 'url:dojox/widget/Wizard/Wizard.html':"<div class=\"dojoxWizard\" dojoAttachPoint=\"wizardNode\">\n <div class=\"dojoxWizardContainer\" dojoAttachPoint=\"containerNode\"></div>\n <div class=\"dojoxWizardButtons\" dojoAttachPoint=\"wizardNav\">\n <button dojoType=\"dijit.form.Button\" type=\"button\" dojoAttachPoint=\"previousButton\">${previousButtonLabel}</button>\n <button dojoType=\"dijit.form.Button\" type=\"button\" dojoAttachPoint=\"nextButton\">${nextButtonLabel}</button>\n <button dojoType=\"dijit.form.Button\" type=\"button\" dojoAttachPoint=\"doneButton\" style=\"display:none\">${doneButtonLabel}</button>\n <button dojoType=\"dijit.form.Button\" type=\"button\" dojoAttachPoint=\"cancelButton\">${cancelButtonLabel}</button>\n </div>\n</div>\n"}});
  3. define("dojox/widget/Wizard", [
  4. "dojo/_base/lang",
  5. "dojo/_base/declare",
  6. "dojo/_base/connect",
  7. "dijit/layout/StackContainer",
  8. "dijit/layout/ContentPane",
  9. "dijit/form/Button",
  10. "dijit/_TemplatedMixin",
  11. "dijit/_WidgetsInTemplateMixin",
  12. "dojo/i18n",
  13. "dojo/text!./Wizard/Wizard.html",
  14. "dojo/i18n!dijit/nls/common",
  15. "dojo/i18n!./nls/Wizard"
  16. ], function (lang, declare, connect, StackContainer, ContentPane, Button, _TemplatedMixin, _WidgetsInTemplateMixin, i18n, template) {
  17. var Wizard = declare("dojox.widget.Wizard", [StackContainer, _TemplatedMixin, _WidgetsInTemplateMixin], {
  18. // summary:
  19. // A set of panels that display sequentially, typically notating a step-by-step
  20. // procedure like an install
  21. //
  22. templateString: template,
  23. // nextButtonLabel: String
  24. // Label override for the "Next" button.
  25. nextButtonLabel: "",
  26. // previousButtonLabel: String
  27. // Label override for the "Previous" button.
  28. previousButtonLabel: "",
  29. // cancelButtonLabel: String
  30. // Label override for the "Cancel" button.
  31. cancelButtonLabel: "",
  32. // doneButtonLabel: String
  33. // Label override for the "Done" button.
  34. doneButtonLabel: "",
  35. // cancelFunction: Function|String
  36. // Name of function to call if user presses cancel button.
  37. // Cancel button is not displayed if function is not specified.
  38. cancelFunction: null,
  39. // hideDisabled: Boolean
  40. // If true, disabled buttons are hidden; otherwise, they are assigned the
  41. // "WizardButtonDisabled" CSS class
  42. hideDisabled: false,
  43. postMixInProperties: function(){
  44. this.inherited(arguments);
  45. var labels = lang.mixin({cancel: i18n.getLocalization("dijit", "common", this.lang).buttonCancel},
  46. i18n.getLocalization("dojox.widget", "Wizard", this.lang));
  47. var prop;
  48. for(prop in labels){
  49. if(!this[prop + "ButtonLabel"]){
  50. this[prop + "ButtonLabel"] = labels[prop];
  51. }
  52. }
  53. },
  54. startup: function(){
  55. if(this._started){
  56. //console.log('started');
  57. return;
  58. }
  59. this.inherited(arguments);
  60. this.connect(this.nextButton, "onClick", "_forward");
  61. this.connect(this.previousButton, "onClick", "back");
  62. if(this.cancelFunction){
  63. if(lang.isString(this.cancelFunction)){
  64. this.cancelFunction = lang.getObject(this.cancelFunction);
  65. }
  66. this.connect(this.cancelButton, "onClick", this.cancelFunction);
  67. }else{
  68. this.cancelButton.domNode.style.display = "none";
  69. }
  70. this.connect(this.doneButton, "onClick", "done");
  71. this._subscription = connect.subscribe(this.id + "-selectChild", lang.hitch(this,"_checkButtons"));
  72. this._started = true;
  73. },
  74. resize: function(){
  75. this.inherited(arguments);
  76. this._checkButtons();
  77. },
  78. _checkButtons: function(){
  79. var sw = this.selectedChildWidget;
  80. var lastStep = sw.isLastChild;
  81. this.nextButton.set("disabled", lastStep);
  82. this._setButtonClass(this.nextButton);
  83. if(sw.doneFunction){
  84. //console.log(sw.doneFunction);
  85. this.doneButton.domNode.style.display = "";
  86. if(lastStep){
  87. this.nextButton.domNode.style.display = "none";
  88. }
  89. }else{
  90. // #1438 issue here.
  91. this.doneButton.domNode.style.display = "none";
  92. }
  93. this.previousButton.set("disabled", !this.selectedChildWidget.canGoBack);
  94. this._setButtonClass(this.previousButton);
  95. },
  96. _setButtonClass: function(button){
  97. button.domNode.style.display = (this.hideDisabled && button.disabled) ? "none" : "";
  98. },
  99. _forward: function(){
  100. // summary: callback when next button is clicked
  101. if(this.selectedChildWidget._checkPass()){
  102. this.forward();
  103. }
  104. },
  105. done: function(){
  106. // summary: Finish the wizard's operation
  107. this.selectedChildWidget.done();
  108. },
  109. destroy: function(){
  110. connect.unsubscribe(this._subscription);
  111. this.inherited(arguments);
  112. }
  113. });
  114. declare("dojox.widget.WizardPane", ContentPane, {
  115. // summary: A panel in a `dojox.widget.Wizard`
  116. //
  117. // description:
  118. // An extended ContentPane with additional hooks for passing named
  119. // functions to prevent the pane from going either forward or
  120. // backwards.
  121. //
  122. // canGoBack: Boolean
  123. // If true, then can move back to a previous panel (by clicking the "Previous" button)
  124. canGoBack: true,
  125. // passFunction: String
  126. // Name of function that checks if it's OK to advance to the next panel.
  127. // If it's not OK (for example, mandatory field hasn't been entered), then
  128. // returns an error message (String) explaining the reason. Can return null (pass)
  129. // or a Boolean (true == pass)
  130. passFunction: null,
  131. // doneFunction: String
  132. // Name of function that is run if you press the "Done" button from this panel
  133. doneFunction: null,
  134. startup: function(){
  135. this.inherited(arguments);
  136. if(this.isFirstChild){ this.canGoBack = false; }
  137. if(lang.isString(this.passFunction)){
  138. this.passFunction = lang.getObject(this.passFunction);
  139. }
  140. if(lang.isString(this.doneFunction) && this.doneFunction){
  141. this.doneFunction = lang.getObject(this.doneFunction);
  142. }
  143. },
  144. _onShow: function(){
  145. if(this.isFirstChild){ this.canGoBack = false; }
  146. this.inherited(arguments);
  147. },
  148. _checkPass: function(){
  149. // summary:
  150. // Called when the user presses the "next" button.
  151. // Calls passFunction to see if it's OK to advance to next panel, and
  152. // if it isn't, then display error.
  153. // Returns true to advance, false to not advance. If passFunction
  154. // returns a string, it is assumed to be a custom error message, and
  155. // is alert()'ed
  156. var r = true;
  157. if(this.passFunction && lang.isFunction(this.passFunction)){
  158. var failMessage = this.passFunction();
  159. switch(typeof failMessage){
  160. case "boolean":
  161. r = failMessage;
  162. break;
  163. case "string":
  164. alert(failMessage);
  165. r = false;
  166. break;
  167. }
  168. }
  169. return r; // Boolean
  170. },
  171. done: function(){
  172. if(this.doneFunction && lang.isFunction(this.doneFunction)){ this.doneFunction(); }
  173. }
  174. });
  175. return Wizard;
  176. });