Edit ZapChain Answer inline

Adds a button to edit your ZapChain answer inline into the page | BTC Donations welcome: http://onename.io/jt

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         Edit ZapChain Answer inline
// @namespace    https://zapchain.com
// @version      0.1
// @description  Adds a button to edit your ZapChain answer inline into the page | BTC Donations welcome: http://onename.io/jt
// @author       Jess Telford, http://onename.io/jt
// @match        https://www.zapchain.com/a/*
// @grant        none
// ==/UserScript==
;(function() {

  // Initial timeout, will be increased exponentially
  var timerInterval = 50;

  var answersByUser = {};
  var answerElementSelectors = [];

  // Once the page is loaded
  $(function() {
    var userId = Parse.User.current().id;
    var questionId = window.location.pathname.replace('/a/', '');

    var Question = Parse.Object.extend('Question');
    var query = new Parse.Query(Question);

    query.equalTo('autoquestionid', questionId);
    query.equalTo('askedof', userId);

    query.find({
      success: function(results) {

        $(results).each(function(i, result) {
          var answer = result.toJSON();
          answersByUser[answer.objectId] = answer;
          answerElementSelectors.push('#qanda' + answer.objectId);
        });

        if (answerElementSelectors.length > 0) {
          // Kick off the timeouts
          startTimeout();
        }
      }
    });

  });

  function startTimeout() {
    window.setTimeout(checkForElements, timerInterval);
  }

  function checkForElements() {

    // Ensure the correct number of elements exist in the page before proceeding
    if ($(answerElementSelectors.join(',')).length == answerElementSelectors.length) {

      // Find all the elements and make them editable
      $.each(answersByUser, function(answerId, answer) {

        var answerEl = $('#qanda' + answerId).first();

        if (answerEl.length > 0) {
          makeAnswerEditable(answer, answerId, answerEl);
        }

      });

    } else {
      timerInterval = timerInterval * 2;
      startTimeout();
    }

  }

  function makeAnswerEditable(result, answerId, container) {

    var answerEl = $('#answertext' + answerId, container);

    // The new editable text area
    var textareaEl = $('<textarea>' + result.answer + '</textarea>')
      .attr('id', 'editedanswertext' + answerId)
      .css({
        boxSizing: 'border-box',
        width: '100%',
        fontSize: '18px',
        lineHeight: '160%',
        wordBreak: 'normal',
        display: 'none'
      });

    // Insert it into the page
    textareaEl.insertAfter(answerEl);

    // Build the Edit button's HTML
    var editEl = $('<button>Edit</button>')
      .attr('id', 'edit_button' + answerId)
      .css({
        padding: '10px',
        float: 'right',
        cursor: 'pointer'
      });

    var saveEl = editEl.clone(false)
      .css({
        display: 'none'
      })
      .html('Save');

    // Set up the click handler to start editing the content
    editEl.on('click', function() {
      editEl.hide();
      answerEl.hide();

      saveEl.show();
      textareaEl.show();
    });

    saveEl.on('click', function() {
      saveEl.attr('disabled', 'disabled');
      saveEl.css('pointer', 'auto');
      saveAnswer(textareaEl.val(), answerId);
    });

    // Insert the buttons into the page
    saveEl.prependTo($('#loggedin_like' + answerId, container));
    editEl.prependTo($('#loggedin_like' + answerId, container));

    function saveAnswer(answer, answerId) {

      // Update question with the answer
      var Question = Parse.Object.extend("Question");
      var question = new Question();
      question.id = answerId;

      // Set a new value on quantity
      question.set("answer", answer);

      // Save
      question.save(null, {
        success: function(question) {
          location.reload();
        },
        error: function(point, error) {
          console.error('Error saving answer:', arguments);
        }
      });
    }
    
  };
})()