summary page rebuild

app/assets/javascripts/jquery-linedtextarea-moser.js

@@ -87,17 +87,6 @@
       }
 
 
-    /* Set the width */
-    // var sidebarWidth					= linesDiv.outerWidth();
-    // var paddingHorizontal 		= parseInt( linedWrapDiv.css("border-left-width") ) + parseInt( linedWrapDiv.css("border-right-width") ) + parseInt( linedWrapDiv.css("padding-left") ) + parseInt( linedWrapDiv.css("padding-right") );
-    // var linedWrapDivNewWidth 	= originalTextAreaWidth - paddingHorizontal;
-    // var textareaNewWidth			= originalTextAreaWidth - sidebarWidth - paddingHorizontal - 20;
-    //
-    // textarea.width( textareaNewWidth );
-    // linedWrapDiv.width( linedWrapDivNewWidth );
-
-
-
       /* React to the scroll event */
       textarea.scroll( function(){
         var domTextArea		= $(this)[0];

app/assets/javascripts/live-coder.js.erb

@@ -1,4 +1,6 @@
 function updateResults(elem) {
+  if ($(elem).length ===0){return false;};
+
   var resultsContainer = $(elem).find('[data-id="results"]')[0];
   var codeHtml = $(elem).find('.code-html')[0].value.trim();
   var codeCss = $(elem).find('.code-css')[0].value.trim();
@@ -100,7 +102,7 @@ $(function(){
   // wait a half second before updating results
   // restart the timer if they resume typing
   $('html').on('keyup', '.code-input textarea', function(){
-    var elem = $(this).closest('.answer-sec.live_code-type, .answer-sec.live_code_text-type');
+    var elem = $(this).closest("[data-id=live-coder-answer]");
     if (timer) { clearTimeout(timer); }
     timer = setTimeout(updateResults(elem), 500);
   });

app/assets/javascripts/summary-edit.js

@@ -1,181 +1,83 @@
+/* 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($){
-  $.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);
-      }
-    });
+function restoreValues($form){
+  $form.find('[type=radio][data-last], [type=checkbox][data-last]').each(function(){
+    $(this).prop('checked', $(this).attr('data-last'));
   });
 
-  // $('.run-js').hide().delay();
-}(jQuery));
+  $form.find('textarea[data-last]').each(function(){
+    $(this).val($(this).attr('data-last'));
+  });
+}
 
-var existingValue = [];
+function updateLocalValues($form){
+  $form.find('[type=radio][data-last], [type=checkbox][data-last]').each(function(){
+    $(this).attr('data-last', $(this).prop('checked') ? 'checked' : '');
+  });
 
-var editClickHandler = function(e) {
+  $form.find('textarea[data-last]').each(function(){
+    $(this).attr('data-last', $(this).val());
+  });
+}
+
+function prepareAjax($form) {
+  $form.on("ajax:success", function(e, data){
+    $form.prepend('<div class="success">' + data.message + '</div>');
+    disableForm($form);
+    updateLocalValues($form);
+  }).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();
-  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 $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();
+}
 
-var cancelClickHandler = function(e) {
+function cancelClickHandler(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 $form = $(e.delegateTarget).closest('form');
+  $form.find('.error, .success').remove();
+  disableForm($form);
+  restoreValues($form);
+  updateResults($form.find("[data-id=live-coder-answer]"));
+}
 
-var saveClickHandler = function(e) {
+function saveClickHandler(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');
+  var $form = $(e.delegateTarget).closest('form');
+  $form.find('.error, .success').remove();
+  $form.submit();
+}
 
-  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>');
-    var postUrl = thisEd.closest('form').attr('action');
-
-    $.ajax({
-      type: "POST",
-      url: postUrl,
-      data: ({
-        'answer': $.extend(data, {'question_id': questionId, 'answer_id': answerId}),
-        'submit': true
-      }),
-      success: function(){ //unused data
-        executeQuery = true;
-      },
-      error: function(){ //unused 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')
+$('.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)

app/assets/stylesheets/molecules/_forms.scss

@@ -78,6 +78,10 @@ textarea {
   padding: 0 0 3rem;
 }
 
+.summary_tpl textarea {
+  padding: 1rem 1rem 3rem;
+}
+
 [type="search"] {
   appearance: none;
 }

app/assets/stylesheets/molecules/_livecoder.scss

@@ -2,18 +2,12 @@
   margin: 10px 0;
 
   textarea {
-    background-color: #fff;
-    border: 1px solid black;
     font-family: "Lucida Console", Monaco, monospace;
     font-size: 10px;
     // line-height: 1.6em;
     margin-bottom: 0;
     min-height: 205px;
     width: 100%;
-
-    &[disabled] {
-      background-color: #ddd;
-    }
   }
 }
 
@@ -44,12 +38,6 @@ iframe {
   width: 100%;
 }
 
-.live-coder-summary{
-  button.update-button{
-    display: none;
-  }
-}
-
 @media only screen and (min-width: $desktop) {
   .code-input {
     float: left;
@@ -107,7 +95,7 @@ iframe {
 .linedtextarea textarea {
 	padding-right: 0.3em;
 	padding-top: 0.3em;
-	border: 0;
+	border: 0 !important;
 }
 
 .linedwrap .lines {