skill-assessment-app/app/assets/javascripts/summary-edit.js

/* global updateResults */
/* TODO: remove global ^ once live-coder is properly name spaced */
/**
 * Summary Page Answer Editor
 */
function disableForm($form){
  $form.find('fieldset').prop('disabled', true);
  $form.find('textarea').prop('disabled', true);
  $form.find('.button-save, .button-cancel').hide();
  $form.find('.button-edit').show();
  $form.find('.editable').removeClass('editable');
  $('.button-edit, .submit-button').removeClass('disabled-button');
}

function restoreValues($form){
  $form.find('[type=radio][data-last], [type=checkbox][data-last]').each(function(){
    $(this).prop('checked', $(this).attr('data-last'));
  });

  $form.find('textarea[data-last]').each(function(){
    $(this).val($(this).attr('data-last'));
  });
}

function updateLocalValues($form){
  $form.find('[type=radio][data-last], [type=checkbox][data-last]').each(function(){
    $(this).attr('data-last', $(this).prop('checked') ? 'checked' : '');
  });

  $form.find('textarea[data-last]').each(function(){
    $(this).attr('data-last', $(this).val());
  });
}

function updateProgress(data) {
  $(".progress-bar").attr('aria-valuenow', data.progress)
                    .attr('style','width: '+ data.progress +'%;')
                    .find('span').text(data.progress + '%');
  if(data.can_submit === true){
    $('#summary-submit').find('.error').remove();
    $('#summary-submit').find('.submit-button').prop('disabled', false);
  }
}

function prepareAjax($form) {
  $form.on("ajax:success", function(e, data){
    $form.prepend('<div class="success">' + data.message + '</div>');
    disableForm($form);
    updateLocalValues($form);
    updateProgress(data);
  }).on("ajax:error", function(e, xhr) {
    if (xhr.status === 400){
      $form.prepend('<div class="error">' + xhr.responseJSON.join('<br>') + '</div>');
    } else {
      $form.prepend('<div class="error">Oops! There was an error processing your request. Please try again.</div>');
    }
  });
}

function editClickHandler(e) {
  e.preventDefault();
  $('.button-edit, .submit-button').addClass('disabled-button');
  var $form = $(e.delegateTarget).closest('form');
  $(e.delegateTarget).addClass('editable');
  $form.find('fieldset').prop('disabled', false);
  $form.find('textarea').prop('disabled', false);
  $form.find('textarea').focus();
  $form.find('.button-edit').hide().delay();
  $form.find('.button-save, .button-cancel').show().delay();
}

function cancelClickHandler(e) {
  e.preventDefault();
  var $form = $(e.delegateTarget).closest('form');
  $form.find('.error, .success').remove();
  disableForm($form);
  restoreValues($form);
  updateResults($form.find("[data-id=live-coder-answer]"));
}

function saveClickHandler(e) {
  e.preventDefault();
  var $form = $(e.delegateTarget).closest('form');
  $form.find('.error, .success').remove();
  $form.submit();
}

$('.summary_tpl fieldset').prop('disabled', true);
$('.summary_tpl textarea').prop('disabled', true);
$('.summary_tpl form').each(function(){ prepareAjax($(this)); });
$('.summary_tpl .answer-sec')
  .find('.button-cancel, .button-save').hide().end()
  .on('click', '.button-edit', editClickHandler)
  .on('click', '.button-cancel', cancelClickHandler)
  .on('click', '.button-save', saveClickHandler);