skill-assessment-app/app/assets/javascripts/summary-edit.js
2016-08-08 17:08:20 -05:00

183 lines
6.0 KiB
JavaScript

/**
* 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()
.on('click', '.button-edit', editClickHandler)
.on('click', '.button-cancel', cancelClickHandler)
.on('click', '.button-save', saveClickHandler);