/* global _ */ var onEnqForm; ((function(oef) { oef.OnlineEnquiryForm = function(inits) { var base = this base.selector = inits.selector base.sectionsQueue = [] base.currentSection = 0 base.currentStep = 1 base.totalSteps = 0 $(document).ready(function(){ sf.getLocation('fieldset#contact-details'); }) $(base.selector) .on('click', '.begin-sections', function() { $('#enquiry-about').find('input:text:not(:visible)').each(function(ind,el){ $(el).val('') }) base.determineSections() base.displayNextSection(this) }) .on('change', '.sq-form-section[data-show-next-on-answered] input:visible:radio', function() { base.showNextSectionBtnIfReady($(this).parents('.sq-form-section')) }) .on('change', '.sq-form-question.alter-section input:visible:radio', function() { base.alterSections(this); }) .on('click', '.next-section', function() { base.displayNextSection(this) }) .on('click', '.next-question', function() { base.displayNextQuestion(this) }) .on('click', '.prev-question-btn', function() { base.displayPrevQuestion(this) }) .on('click', '.prev-section-btn', function() { base.displayPreviousSection() }) .on('change', '.sq-form-question[data-validators] input:text', function() { var validations = oef.validateFields($(this).parents('.sq-form-question'), true) oef.addValidationErrors(validations) }) .on('click', '.preview-submission', function() { base.previewForm() }) .on('keyup keypress', function(e) { var keyCode = e.keyCode || e.which; if (keyCode === 13) { e.preventDefault(); return false; } }) .on('change', 'input[name="q373738:q1"]:radio', function() { console.log('switching first question', this) // If Complaint or Compliment/Comment, either phone or email becomes compulsory on contact details if (_.includes(['q373738_q1_1','q373738_q1_0'],$(this).attr('id'))) { $('#q373746_q3') .closest('.sq-form-question') .data({validators: 'presence_either mobile_number', 'presence_either': 'q373746_q4'}) $('#q373746_q4') .closest('.sq-form-question') .data({validators: 'presence_either email', 'presence_either': 'q373746_q3'}) $('#q373746_q2') .closets('.sq-form-question') .data({ validators: 'presence' }) $('#q373744_q1').closest('.sq-form-question').find('label.sq-form-question-title').text('We welcome your comments, compliments and suggestions. If you have had an unsatisfactory experience with us, we would like to know *') } else { $('#q373746_q3') .closest('.sq-form-question') .data({ validators: 'presence mobile_number' }) .removeData('presence_either') $('#q373746_q4') .closest('.sq-form-question') .data({ validators: 'presence email' }) .removeData('presence_either') $('#q373746_q2') .closest('.sq-form-question') .removeData('presence') $('#q373744_q1').closest('.sq-form-question').find('label.sq-form-question-title').text('Please describe your enquiry *') } }); } oef.OnlineEnquiryForm.prototype.showNextSectionBtnIfReady = function($thisSection) { if ($thisSection.find('input:visible:radio:checked').length >= $thisSection.find('.sq-form-question-option-list:visible').length) { $thisSection.find('.next-section').removeClass('hide') } else { $thisSection.find('.next-section').addClass('hide') } } oef.OnlineEnquiryForm.prototype.displayNextQuestion = function(lnk) { var $lnk = $(lnk) var $prevQuBtn = $(lnk).parents('.sq-form-section').find('.prev-question-btn') var $el = $($lnk.data('display')) var thisQuestion = $($lnk.data('hide')); $(thisQuestion).addClass('hide') $el.removeClass('hide') $prevQuBtn .data('display', $lnk.data('hide')) .data('hide', $lnk.data('display')) .removeClass('hide') $(lnk).parents('.sq-form-section').find('.prev-section-btn').addClass('hide') if (!$lnk.is('[data-no-step-increase]')) { this.currentStep++ this.updateStep() } $('html,body').animate({ scrollTop: $('#main_form_contents').position().top }, 400); } oef.OnlineEnquiryForm.prototype.displayPrevQuestion = function(lnk) { var $lnk = $(lnk) var $el = $($lnk.data('display')) // hide previous question $($lnk.data('hide')).addClass('hide') $el.removeClass('hide') // remove errors from question we're leaving // $($lnk.data('hide')) // .find('.sq-form-question') // .removeAttr('aria-describedby') // .removeClass('error') // .find('span.error-message') // .remove() // find the next question button for this question and show it var $nextQuBtn = $el.find('a.next-question') // check if we've arrived at the beginning of the section var $firstQuestion = $($(lnk).parents('.sq-form-section').find('.sq-form-question:first')) if ($nextQuBtn.data('hide').match($firstQuestion.attr('id'))) { $('.prev-section-btn').removeClass('hide') $lnk.addClass('hide') } // update previous button to new state var $prevNextQuBtn = $(lnk).parents('.sq-form-section').find('.next-question[data-display*="' + $el.attr('id') + '"]') $lnk .data('display', $prevNextQuBtn.data('hide')) .data('hide', $prevNextQuBtn.data('display')) if (!$nextQuBtn.is('[data-no-step-increase]')) { this.currentStep-- this.updateStep() } oef.helpers.scrollToElementTop($el) oef.helpers.executeScrollQueue() } oef.OnlineEnquiryForm.prototype.determineSections = function() { var base = this var $selections = $('#enquiry-about').find('input:radio:checked') $selections.each(function(ind, el) { var id = $(el).attr('id') base.sectionsQueue = base.fetchSections(id) }) base.sectionsQueue = _.flatten(base.sectionsQueue) this.updateStepTotal() } oef.OnlineEnquiryForm.prototype.alterSections = function(input) { var base = this var $input = $(input) var queue = base.sectionsQueue switch ($input.attr('id')) { case 'q373739_q1_0': queue = queue.slice(0, base.currentSection + 1); queue.push({ id: 'message-final', steps: 1 }); queue.push({ id: 'form-preview', steps: 1}); base.sectionsQueue = queue break; case 'q373741_q1_0': queue = queue.slice(0, base.currentSection); queue.push({ id: 'water-connection', steps: 1}) queue.push({ id: 'message-final', steps: 1 }); queue.push({ id: 'form-preview', steps: 1}); base.sectionsQueue = queue break; default: base.determineSections() break; } this.updateStepTotal() } oef.OnlineEnquiryForm.prototype.displayNextSection = function(lnk) { var thisSection = $(lnk).parents('fieldset.sq-form-section'); console.log('section', thisSection) var validate = oef.validateFields($(thisSection).find('.sq-form-question[data-validators]:visible')); var sectionValid = oef.addValidationErrors(validate); if (sectionValid && $(thisSection).find('.sq-form-question.error:visible').length == 0) { this.currentSection++ this.currentStep++ var nextSection = this.sectionsQueue[this.currentSection] this.displaySection(nextSection) var $nextSectionEl = $('.sq-form-section#' + nextSection.id) if ($nextSectionEl.is('[data-show-next-on-answered]')) { this.showNextSectionBtnIfReady($nextSectionEl) } this.updateStep() } } oef.OnlineEnquiryForm.prototype.displayPreviousSection = function() { this.currentSection-- this.currentStep-- var prevSection = this.sectionsQueue[this.currentSection] this.displaySection(prevSection) // hide prev section button if at a multi question section if ($('.sq-form-section#' + prevSection.id).hasClass('multi-question-section') && $('.sq-form-section#' + prevSection.id).find('.sq-form-question:first').hasClass('hide')) { $('.sq-form-section#' + prevSection.id) .find('.prev-section-btn') .addClass('hide') .end() .find('.prev-question-btn') .removeClass('hide') } // reset sections Queue at beginning of form if (this.currentSection === 0) { this.sectionsQueue = [] $(this.selector).find('.sq-form-section:not(#enquiry-about)') .find('input:radio,input:checkbox').prop('checked', false).end() .find('input:text,textarea').val('').end() .find('.saw-file-remove').trigger('click').end() .find('[begins-hidden]').addClass('hide') } this.updateStep() } oef.OnlineEnquiryForm.prototype.displaySection = function(section) { $('.sq-form-section').addClass('hide') $('.sq-form-section#' + section.id) .removeClass('hide') $('.sq-form-section') .find('[data-no-display-for]') .removeClass('hide') $('html,body').animate({ scrollTop: $('#main_form_contents').position().top }, 400); } oef.OnlineEnquiryForm.prototype.updateStepTotal = function() { this.totalSteps = _.reduce(this.sectionsQueue, function(total, section){ return total + section.steps }, 0) console.log('update step total', _.map(this.sectionsQueue, function(x) { return x.id }), _.map(this.sectionsQueue,function(x) { return x.steps})) $('#step-counter .step-of').text(this.totalSteps) } oef.OnlineEnquiryForm.prototype.updateStep = function() { $('#step-counter .step-num').text(this.currentStep) } oef.OnlineEnquiryForm.prototype.previewForm = function() { var base = this var previewStr = '
' + responses.join('
') + '