[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
Backup
/
14082024
/
Data
/
htdocs
/
htdocs
/
ojs
/
248
/
lib
/
pkp
/
js
/
controllers
/
wizard
/
[
Home
]
File: WizardHandler.js
/** * @defgroup js_controllers_wizard */ // Create the files namespace jQuery.pkp.controllers.wizard = jQuery.pkp.controllers.wizard || { }; /** * @file js/controllers/wizard/WizardHandler.js * * Copyright (c) 2013-2019 Simon Fraser University * Copyright (c) 2000-2019 John Willinsky * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING. * * @class WizardHandler * @ingroup js_controllers_wizard * * @brief Basic wizard handler. */ (function($) { /** * @constructor * * @extends $.pkp.controllers.TabHandler * * @param {jQuery} $wizard A wrapped HTML element that * represents the wizard. * @param {Object} options Wizard options. */ $.pkp.controllers.wizard.WizardHandler = function($wizard, options) { this.parent($wizard, options); // Start the wizard. this.startWizard(); // Add the wizard buttons this.addWizardButtons_($wizard, options); // Bind the wizard events to handlers. this.bindWizardEvents(); // Assume that we usually have forms in the wizard // tabs and bind to form events. this.bind('formValid', this.formValid); this.bind('formInvalid', this.formInvalid); this.bind('formSubmitted', this.formSubmitted); }; $.pkp.classes.Helper.inherits( $.pkp.controllers.wizard.WizardHandler, $.pkp.controllers.TabHandler); // // Private properties // /** * The continue button. * @private * @type {jQuery} */ $.pkp.controllers.wizard.WizardHandler.prototype.$continueButton_ = null; /** * The progress indicator. * @private * @type {jQuery} */ $.pkp.controllers.wizard.WizardHandler.prototype.$progressIndicator_ = null; /** * The continue button label. * @private * @type {?string} */ $.pkp.controllers.wizard.WizardHandler.prototype.continueButtonText_ = null; /** * The finish button label. * @private * @type {?string} */ $.pkp.controllers.wizard.WizardHandler.prototype.finishButtonText_ = null; // // Public methods // /** * Handle the user's request to advance the wizard. * * NB: Please do not override this method. This is an internal event * handler. Override the wizardAdvanceRequested() and wizardAdvance() * event handlers instead if you want to provide custom behavior. * * @param {HTMLElement} buttonElement The button that triggered the event. * @param {Event} event The triggered event. * @return {boolean} Should return false to stop event propagation. */ $.pkp.controllers.wizard.WizardHandler.prototype.continueRequest = function(buttonElement, event) { // Trigger the "advance requested" event on the current // tab's children to give it a chance to veto the advance // request. var advanceRequestedEvent = new $.Event('wizardAdvanceRequested'); this.getCurrentTab().children().first().trigger(advanceRequestedEvent); // Advance the wizard if the advanceRequestEvent handler didn't // prevent it. if (!advanceRequestedEvent.isDefaultPrevented()) { this.advanceOrClose_(); } return false; }; /** * Handle "form valid" events that may be triggered by forms in the * wizard tab. * * @param {HTMLElement} formElement The form that triggered the event. * @param {Event} event The triggered event. */ $.pkp.controllers.wizard.WizardHandler.prototype.formValid = function(formElement, event) { // The default implementation enables the continue button // as soon as the form validates. this.getContinueButton().button('enable'); }; /** * Handle "form invalid" events that may be triggered by forms in the * wizard tab. * * @param {HTMLElement} formElement The form that triggered the event. * @param {Event} event The triggered event. */ $.pkp.controllers.wizard.WizardHandler.prototype.formInvalid = function(formElement, event) { // The default implementation disables the continue button // as if the form no longer validates. this.getContinueButton().button('disable'); }; /** * Handle "form submitted" events that may be triggered by forms in the * wizard tab. * * @param {HTMLElement} formElement The form that triggered the event. * @param {Event} event The triggered event. */ $.pkp.controllers.wizard.WizardHandler.prototype.formSubmitted = function(formElement, event) { // The default implementation advances the wizard. this.advanceOrClose_(); }; /** * Handle the user's request to cancel the wizard. * * NB: Please do not override this method. This is an internal event * handler. Override the wizardCancel() event handler instead if you * want to provide custom behavior. * * @param {HTMLElement} buttonElement The button that triggered the event. * @param {Event} event The triggered event. * @return {boolean} Should return false to stop event propagation. */ $.pkp.controllers.wizard.WizardHandler.prototype.cancelRequest = function(buttonElement, event) { // this is a 'cancel' click, so unregister forms without prompting. this.checkForm_(false); // Trigger the "cancel requested" event on the current // tab's children to give it a chance to veto the cancel // request. var cancelRequestedEvent = new $.Event('wizardCancelRequested'); this.getCurrentTab().children().first().trigger(cancelRequestedEvent); // Trigger the wizardCancel event if the // cancelRequestEvent handler didn't prevent it. if (!cancelRequestedEvent.isDefaultPrevented()) { this.trigger('wizardCancel'); } return false; }; /** * Handle the wizard "cancel requested" event. * * Please override this method to clean up before the wizard is * being canceled. You can execute event.preventDefault() if you * don't want the wizard to cancel. * * NB: This is a fallback handler that will be called if no other * event handler calls the event.stopPropagation() method. * * @param {HTMLElement} wizardElement The wizard's HTMLElement on * which the event was triggered. * @param {Event} event The triggered event. * @return {Boolean} Return false if not overridden and if check form * returns true. */ $.pkp.controllers.wizard.WizardHandler.prototype.wizardCancelRequested = function(wizardElement, event) { if (this.checkForm_(true)) { return false; } }; /** * Handle the wizard "advance requested" event. * * Please override this method to make custom validation checks or * place server requests before you let the wizard advance to the next * step. You can execute event.preventDefault() if you don't want * the wizard to advance because you encountered errors during * validation. * * NB: This is a fallback handler that will be called if no other * event handler calls the event.stopPropagation() method. * * @param {HTMLElement} wizardElement The wizard's HTMLElement on * which the event was triggered. * @param {Event} event The triggered event. */ $.pkp.controllers.wizard.WizardHandler.prototype.wizardAdvanceRequested = function(wizardElement, event) { // If we find a form then submit it. var $form = this.getForm_(); if ($form) { // Try to submit the form. if ($form.submit()) { this.getContinueButton().button('disable'); this.getProgressIndicator().show(); } // Prevent default event handling so that the form // can do its validation checks first. event.preventDefault(); } }; /** * Handle the "wizard advance" event. The default implementation * advances the wizard to the next step and disables the previous step. * * In most cases you probably don't want to override this method unless * you want to provide a different navigation experience. Form validation * and submission or similar tasks should be done in the * wizardAdvanceRequested() event handler. * * @param {HTMLElement} wizardElement The wizard's HTMLElement on * which the event was triggered. * @param {Event} event The triggered event. */ $.pkp.controllers.wizard.WizardHandler.prototype.wizardAdvance = function(wizardElement, event) { // The wizard can only be advanced one step at a time. // The step cannot be greater than the number of wizard // tabs and not less than 1. var currentStep = this.getCurrentStep(), lastStep = this.getNumberOfSteps() - 1, targetStep = currentStep + 1; // Do not advance beyond the last step. if (targetStep > lastStep) { throw Error('Trying to set an invalid wizard step!'); } // Enable the target step. var $wizard = this.getHtmlElement(); $wizard.tabs('enable', targetStep); // Advance to the target step. $wizard.tabs('select', targetStep); // Disable the previous step. $wizard.tabs('disable', currentStep); // If this is the last step then change the text on the // continue button to finish. var $continueButton = this.getContinueButton(); if (targetStep === lastStep) { $continueButton.button('option', 'label', this.getFinishButtonText()); } this.getProgressIndicator().hide(); $continueButton.button('enable'); }; // // Protected methods // /** * (Re-)Start the wizard. * @protected */ $.pkp.controllers.wizard.WizardHandler.prototype.startWizard = function() { // Retrieve the wizard element. var $wizard = this.getHtmlElement(); // Do we re-start the wizard? if (this.getCurrentStep() !== 0) { // Make sure that the first step is enabled, otherwise // we cannot select it. $wizard.tabs('enable', 0); // Go to the first step. $wizard.tabs('select', 0); // Reset the continue button label. var $continueButton = this.getContinueButton(); $continueButton.button('option', 'label', this.getContinueButtonText()); } // Disable all but the first step. var disabledSteps = []; for (var i = 1; i < this.getNumberOfSteps(); i++) { disabledSteps.push(i); } $wizard.tabs('option', 'disabled', disabledSteps); }; /** * Bind wizard events to default event handlers. * @protected */ $.pkp.controllers.wizard.WizardHandler.prototype.bindWizardEvents = function() { this.bind('wizardCancelRequested', this.wizardCancelRequested); this.bind('wizardAdvanceRequested', this.wizardAdvanceRequested); this.bind('wizardAdvance', this.wizardAdvance); }; /** * Get the current wizard step. * @protected * @return {number} The current wizard step. */ $.pkp.controllers.wizard.WizardHandler.prototype. getCurrentStep = function() { return this.getCurrentTabIndex(); }; /** * Get the continue button. * @protected * @return {jQuery} The continue button. */ $.pkp.controllers.wizard.WizardHandler.prototype. getContinueButton = function() { return this.$continueButton_; }; /** * Get the progress indicator. * @protected * @return {jQuery} The progress indicator. */ $.pkp.controllers.wizard.WizardHandler.prototype. getProgressIndicator = function() { return this.$progressIndicator_; }; /** * Get the continue button label. * @protected * @return {?string} The text to display on the continue button. */ $.pkp.controllers.wizard.WizardHandler.prototype. getContinueButtonText = function() { return this.continueButtonText_; }; /** * Get the finish button label. * @protected * @return {?string} The text to display on the continue button * in the last wizard step. */ $.pkp.controllers.wizard.WizardHandler.prototype. getFinishButtonText = function() { return this.finishButtonText_; }; /** * Count the wizard steps. * @return {number} The current number of wizard steps. */ $.pkp.controllers.wizard.WizardHandler.prototype. getNumberOfSteps = function() { var $wizard = this.getHtmlElement(); return $wizard.find('ul').first().children().length; }; // // Private methods // /** * Return the current form (if any). * * @private * @return {?jQuery} The form (if any). */ $.pkp.controllers.wizard.WizardHandler.prototype.getForm_ = function() { // If we find a form in the current tab then return it. var $tabContent = this.getCurrentTab().children().first(); if ($tabContent.is('form')) { return $tabContent; } return null; }; /** * Continue to the next step or, if this is the last step, * then close the wizard. * * @private */ $.pkp.controllers.wizard.WizardHandler.prototype.advanceOrClose_ = function() { var currentStep = this.getCurrentStep(), lastStep = this.getNumberOfSteps() - 1; if (currentStep < lastStep) { this.trigger('wizardAdvance'); } else { this.trigger('wizardClose'); } }; /** * Helper method to look for changed forms. * * @param {boolean} prompt Whether or not to prompt. * @return {boolean} Whether or not they wish to cancel. * @private */ $.pkp.controllers.wizard.WizardHandler.prototype.checkForm_ = function(prompt) { var $form = this.getForm_(); var handler = $.pkp.classes.Handler.getHandler($('#' + $form.attr('id'))); if (prompt) { if (handler.formChangesTracked) { if (!confirm($.pkp.locale.form_dataHasChanged)) { return true; // the user has clicked cancel, they wish to stay. } else { handler.cancelForm(); } } } else { handler.cancelForm(); } }; /** * Add wizard buttons to the wizard. * * @private * @param {jQuery} $wizard The wizard element. * @param {Object} options The wizard options. */ $.pkp.controllers.wizard.WizardHandler.prototype.addWizardButtons_ = function($wizard, options) { // Add space before wizard buttons. var $wizardButtons = $('<div id="wizardButtons" class="modal-buttons"></div>'); if (options.cancelButtonText) { // Add cancel button. var $cancelButton = $(['<a id="cancelButton" href="#">', options.cancelButtonText, '</a>'].join('')); $wizardButtons.append($cancelButton); // Attach the cancel request handler. $cancelButton.bind('click', this.callbackWrapper(this.cancelRequest)); } if (options.continueButtonText) { // Add continue/finish button. var $continueButton = $(['<button id="continueButton"', 'class="button pkp_helpers_align_right">', options.continueButtonText, '</button>'].join('')).button(); $wizardButtons.append($continueButton); var $progressIndicator = $( '<div class="pkp_helpers_progressIndicator"></div>'); $wizardButtons.append($progressIndicator); $continueButton. // Attach the continue request handler. bind('click', this.callbackWrapper(this.continueRequest)); this.$continueButton_ = $continueButton; this.$progressIndicator_ = $progressIndicator; // Remember the button labels. this.continueButtonText_ = options.continueButtonText; if (options.finishButtonText) { this.finishButtonText_ = options.finishButtonText; } else { this.finishButtonText_ = options.continueButtonText; } } // Insert wizard buttons. $wizard.after($wizardButtons); }; /** @param {jQuery} $ jQuery closure. */ })(jQuery);