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

/**
 * Summary Page Answer Editor
 */

(function($){
  $.fn.setTextAreaHeight = function(input) {
    return this.each(function(){
      var lineHeight = parseInt($(this).css('line-height'));
      var rows = Math.ceil(input / lineHeight);
      rows = rows === 0 ? 1 : rows;

      $(this).attr('rows', rows);
    });
  };

  $('input[type="radio"]').on('change', function() {
    var inputName = $(this).attr('name');
    //$('input[name="'+inputName+'"]').attr('checked', false);
    var value = $(this).attr('value');
    $('input[name="'+inputName+'"][value="'+value+'"]').attr("checked",true);
    $('input[name="'+inputName+'"]').each(function() {
      if($(this).val() != value) {
        $(this).attr('checked', false);
      }
    });
  });

  // $('.run-js').hide().delay();
}(jQuery));

var existingValue = [];

var editClickHandler = function(e) {
  e.preventDefault();
  var thisEd = $(e.delegateTarget);
  var height = thisEd.find('p').height();
  thisEd.data('answer', thisEd.find('p').text());
  if(thisEd.find('input').attr('type') == 'radio') {
    existingValue = thisEd.find('input:checked').val();
  }
  else if(thisEd.find('input').attr('type') == 'checkbox') {
    $(thisEd.find('input')).each(function() {
      if($(this).prop('checked') === true) {
         existingValue.push($(this).val());
      }
    });
  }
  else if (thisEd.find('textarea:not(.code-answer)')) {
    existingValue = thisEd.find('textarea:not(.code-answer)').val();
    thisEd.find('.chars.hidden').removeClass('hidden');
  }

  $('.button-edit, .submit-button').addClass('disabled-button');
  thisEd.addClass('editable');
  // thisEd.find('.text-answer:not(.code-answer)').replaceWith('<textarea class="answer-block">' + $.trim(thisEd.data('answer')) + '</textarea>');
  thisEd.find('.answer-block, .code-answer').prop('disabled', false);
  thisEd.find('textarea').setTextAreaHeight(height);
  thisEd.find('textarea.answer-block').focus();
  thisEd.find('.button-edit').hide().delay();
  thisEd.find('.button-save, .button-cancel').show().delay();
  // thisEd.find('button.run-js').show().delay();
};

var cancelClickHandler = function(e) {
  e.preventDefault();
  var thisEd = $(e.delegateTarget);
  if(thisEd.find('input').attr('type') == 'radio') {
    $(thisEd.find('input')).each(function() {
        if($(this).val()!=existingValue) {
          $(this).attr('checked', false).prop('checked', false);
        }
        else {
          $(this).prop('checked', true);
        }
      });
  }
  else if(thisEd.find('input').attr('type') == 'checkbox') {
    $(existingValue).each(function(index, value) {
      thisEd.find('input[value="'+value+'"]').prop('checked', true);
    });
  }
  else if (thisEd.find('textarea:not(.code-answer)')) {
    thisEd.find('textarea:not(.code-answer)').val(existingValue);
    thisEd.find('.chars').addClass('hidden');
  }
  $('.success, .error').remove();
  $('.button-edit, .submit-button').removeClass('disabled-button');
  thisEd.removeClass('editable');
  // thisEd.find('textarea:not(.code-answer)').replaceWith('<p class="text-answer answer-container">' + $.trim(thisEd.data('answer')) + '</p>');
  thisEd.find('.answer-block, .code-answer').prop('disabled', true);
  thisEd.find('.button-edit').show();
  thisEd.find('.button-save, .button-cancel').hide();
  // thisEd.find('button.run-js').hide();
  existingValue = [];
};

var saveClickHandler = function(e) {
  e.preventDefault();
  var thisEd = $(e.delegateTarget);
  var data =[];
  var executeQuery;
  var questionId = thisEd.find('.button-edit').attr('data-questionId');
  var answerId = thisEd.find('.button-edit').attr('data-answerId');

  if (thisEd.hasClass('live_code-type')) {
    var htmlAnswer = $(thisEd.find('textarea.code-html')[0]).val();
    var cssAnswer = $(thisEd.find('textarea.code-css')[0]).val();
    var jsAnswer = $(thisEd.find('textarea.code-js')[0]).val();
    data = {
      'live_code': {
        'html': htmlAnswer,
        'css': cssAnswer,
        'js': jsAnswer
      }
    };
  } else if(thisEd.hasClass('radio-type')) {
    $(thisEd.find('input')).each(function() {
      if($(this).prop('checked') === true) {
        data = ({
          'radio': $(this).val()
        });
      }
    });
  } else if(thisEd.hasClass('checkbox-type')) {
    data = {'checkbox': []};

    $(thisEd.find('input')).each(function() {
      if($(this).prop('checked') === true) {
        data.checkbox.push($(this).val());
      }
    });
  } else {
    data = {'text': thisEd.find('textarea').val()};
  }

  if(data === '') {
    $(thisEd).before('<div class="error">Please select or enter a value.</div>');
  } else {
    thisEd.find('textarea:not(.code-answer)').replaceWith('<p class="text-answer answer-container">' + $.trim(thisEd.find('textarea').val()) + '</p>');
    url = thisEd.closest('form').attr('action');

    $.ajax({
      type: "POST",
      url: url,
      data: ({
        'answer': $.extend(data, {'question_id': questionId, 'answer_id': answerId}),
        'submit': true
      }),
      success: function(data){
        executeQuery = true;
      },
      error: function(data){
        executeQuery = false;
      }
    }).done(function() {
    if(executeQuery === true) {
      $('.success, .error').remove();
      $(thisEd).before('<div class="success">Your answer has been updated successfully!</div>');
      $(thisEd).find('.code-answer').attr('disabled', true);
    }
    if(executeQuery === false) {
      $('.error, .success').remove();
      $(thisEd).before('<div class="error">Oops! There was an error processing your request. Please try again.</div>');
    }
    });

  $('.button-edit, .submit-button').removeClass('disabled-button');
  thisEd.removeClass('editable');
  thisEd.find('.answer-block').prop('disabled', true);
  thisEd.find('.button-edit').show();
  thisEd.find('.button-save, .button-cancel').hide();
}
};

$('.answer-block').prop('disabled', true);

// Question events
$('.answer-sec')
  .find('.button-cancel, .button-save').hide().end()
  // delegating events
  .on('click', '.button-edit', editClickHandler)
  .on('click', '.button-cancel', cancelClickHandler)
  .on('click', '.button-save', saveClickHandler);

  // Dynamically load in coders
$.each($('.answer-sec.live_code-type, .answer-sec.live_code_text-type'), function(index, elem){
  var qid = $(elem).data('qid');
  $(elem).find("[data-id='live-coder-answer']").load("/live-coder-entry/" + qid, function(){
    $(elem).find('.js-error').addClass('hidden');
    $(elem).find(".code-input textarea").linedtextarea();
  });
});