☰

Edit ZapChain Answer inline

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

  1. // ==UserScript==
  2. // @name         Edit ZapChain Answer inline
  3. // @namespace    https://zapchain.com
  4. // @version      0.1
  5. // @description  Adds a button to edit your ZapChain answer inline into the page | BTC Donations welcome: http://onename.io/jt
  6. // @author       Jess Telford, http://onename.io/jt
  7. // @match        https://www.zapchain.com/a/*
  8. // @grant        none
  9. // ==/UserScript==
  10. ;(function() {
  11.  
  12.   // Initial timeout, will be increased exponentially
  13.   var timerInterval = 50;
  14.  
  15.   var answersByUser = {};
  16.   var answerElementSelectors = [];
  17.  
  18.   // Once the page is loaded
  19.   $(function() {
  20.     var userId = Parse.User.current().id;
  21.     var questionId = window.location.pathname.replace('/a/', '');
  22.  
  23.     var Question = Parse.Object.extend('Question');
  24.     var query = new Parse.Query(Question);
  25.  
  26.     query.equalTo('autoquestionid', questionId);
  27.     query.equalTo('askedof', userId);
  28.  
  29.     query.find({
  30.       success: function(results) {
  31.  
  32.         $(results).each(function(i, result) {
  33.           var answer = result.toJSON();
  34.           answersByUser[answer.objectId] = answer;
  35.           answerElementSelectors.push('#qanda' + answer.objectId);
  36.         });
  37.  
  38.         if (answerElementSelectors.length > 0) {
  39.           // Kick off the timeouts
  40.           startTimeout();
  41.         }
  42.       }
  43.     });
  44.  
  45.   });
  46.  
  47.   function startTimeout() {
  48.     window.setTimeout(checkForElements, timerInterval);
  49.   }
  50.  
  51.   function checkForElements() {
  52.  
  53.     // Ensure the correct number of elements exist in the page before proceeding
  54.     if ($(answerElementSelectors.join(',')).length == answerElementSelectors.length) {
  55.  
  56.       // Find all the elements and make them editable
  57.       $.each(answersByUser, function(answerId, answer) {
  58.  
  59.         var answerEl = $('#qanda' + answerId).first();
  60.  
  61.         if (answerEl.length > 0) {
  62.           makeAnswerEditable(answer, answerId, answerEl);
  63.         }
  64.  
  65.       });
  66.  
  67.     } else {
  68.       timerInterval = timerInterval * 2;
  69.       startTimeout();
  70.     }
  71.  
  72.   }
  73.  
  74.   function makeAnswerEditable(result, answerId, container) {
  75.  
  76.     var answerEl = $('#answertext' + answerId, container);
  77.  
  78.     // The new editable text area
  79.     var textareaEl = $('<textarea>' + result.answer + '</textarea>')
  80.       .attr('id', 'editedanswertext' + answerId)
  81.       .css({
  82.         boxSizing: 'border-box',
  83.         width: '100%',
  84.         fontSize: '18px',
  85.         lineHeight: '160%',
  86.         wordBreak: 'normal',
  87.         display: 'none'
  88.       });
  89.  
  90.     // Insert it into the page
  91.     textareaEl.insertAfter(answerEl);
  92.  
  93.     // Build the Edit button's HTML
  94.     var editEl = $('<button>Edit</button>')
  95.       .attr('id', 'edit_button' + answerId)
  96.       .css({
  97.         padding: '10px',
  98.         float: 'right',
  99.         cursor: 'pointer'
  100.       });
  101.  
  102.     var saveEl = editEl.clone(false)
  103.       .css({
  104.         display: 'none'
  105.       })
  106.       .html('Save');
  107.  
  108.     // Set up the click handler to start editing the content
  109.     editEl.on('click', function() {
  110.       editEl.hide();
  111.       answerEl.hide();
  112.  
  113.       saveEl.show();
  114.       textareaEl.show();
  115.     });
  116.  
  117.     saveEl.on('click', function() {
  118.       saveEl.attr('disabled', 'disabled');
  119.       saveEl.css('pointer', 'auto');
  120.       saveAnswer(textareaEl.val(), answerId);
  121.     });
  122.  
  123.     // Insert the buttons into the page
  124.     saveEl.prependTo($('#loggedin_like' + answerId, container));
  125.     editEl.prependTo($('#loggedin_like' + answerId, container));
  126.  
  127.     function saveAnswer(answer, answerId) {
  128.  
  129.       // Update question with the answer
  130.       var Question = Parse.Object.extend("Question");
  131.       var question = new Question();
  132.       question.id = answerId;
  133.  
  134.       // Set a new value on quantity
  135.       question.set("answer", answer);
  136.  
  137.       // Save
  138.       question.save(null, {
  139.         success: function(question) {
  140.           location.reload();
  141.         },
  142.         error: function(point, error) {
  143.           console.error('Error saving answer:', arguments);
  144.         }
  145.       });
  146.     }
  147.     
  148.   };
  149. })()