Refactor Comment Editor Save & Recover (#9132)

* merge branches #9104 #9107 #9108 #9110 #9118 * change #dropzone-large ID to #comment-form-body * add comprehensive preview button test * add text-input class, data-form-id attribute to textarea #9004 #9131 * add data-form-id to save & recover buttons #9004 #9131 * E.setState when clicking save, recover, & .text-input #9004 #9131 * refactor save & recover #9004 #9131 * add icon to recover button #9004 #9131 * restore edit button tooltip #9004 #9131 * save with window.location.pathname, not href #9004 #9131 * new system test for save & recover #9004 #9131 * update test selector #9004 #9131
publiclab · Feb 6, 2021 · 4f09389 · 4f09389
1 parent 6ded8c4
commit 4f09389
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 41 deletions.
diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js
@@ -9,7 +9,6 @@ class Editor {
   constructor(defaultForm = "main", elementIDPrefixes = {}) {
     this.commentFormID = defaultForm;
     this.elementIDPrefixes = elementIDPrefixes;
-    this.textarea = $("#text-input-" + this.commentFormID);
     // this will get deleted in the next few PRs, so collapsing into one line to pass codeclimate
     this.templates = { 'blog': "## The beginning\n\n## What we did\n\n## Why it matters\n\n## How can you help", 'default': "## What I want to do\n\n## My attempt and results\n\n## Questions and next steps\n\n## Why I'm interested", 'support': "## Details about the problem\n\n## A photo or screenshot of the setup", 'event': "## Event details\n\nWhen, where, what\n\n## Background\n\nWho, why", 'question': "## What I want to do or know\n\n## Background story" };
 
@@ -31,8 +30,7 @@ class Editor {
   }
   setState(commentFormID) {
     this.commentFormID = commentFormID;
-    this.textarea = $("#text-input-" + commentFormID);
-    $E.textarea.bind('input propertychange', $E.save);
+    this.attachSaveListener();
   }
   get textAreaElement() {
     const textAreaID = "#text-input-" + this.commentFormID;
@@ -50,13 +48,13 @@ class Editor {
     const previewID = previewIDPrefix + this.commentFormID;
     return $(previewID);
   }
-  // wraps currently selected text in textarea with strings a and b
-  wrap(a, b, newlineDesired = false, fallback) {
+  // wraps currently selected text in textarea with strings startString & endString
+  wrap(startString, endString, newlineDesired = false, fallback) {
     const selectionStart = this.textAreaElement[0].selectionStart;
     const selectionEnd = this.textAreaElement[0].selectionEnd;
     const selection = fallback || this.textAreaValue.substring(selectionStart, selectionEnd); // fallback if nothing has been selected, and we're simply dealing with an insertion point
 
-    let newText = newlineDesired ?  a + selection + b + "\n\n" : a + selection + b; // ie. ** + selection + ** (wrapping selection in bold)
+    let newText = newlineDesired ? startString + selection + endString + "\n\n" : startString + selection + endString; // ie. ** + selection + ** (wrapping selection in bold)
     const selectionStartsMidText = this.textAreaElement[0].selectionStart > 0;
     if (newlineDesired && selectionStartsMidText) { newText = "\n" + newText; }
 
@@ -109,11 +107,21 @@ class Editor {
   //   this.wrap('#######','')
   // }
   // this function is dedicated to Don Blair https://github.com/donblair
-  save() {
-    localStorage.setItem('plots:lastpost', this.textAreaValue);
+  attachSaveListener() {
+    // remove any other existing eventHandler
+    $("textarea").off("input.save"); // input.save is a custom jQuery eventHandler
+    const thisEditor = this; // save a reference to this editor, because inside the eventListener, "this" points to e.target
+    this.textAreaElement.on("input.save", function() {
+      thisEditor.save(thisEditor) 
+    });
+  }
+  save(thisEditor) {
+    const storageKey = "plots:" + window.location.pathname + ":" + thisEditor.commentFormID;
+    localStorage.setItem(storageKey, thisEditor.textAreaValue);
   }
   recover() {
-    this.textAreaElement.val(localStorage.getItem('plots:lastpost'));
+    const storageKey = "plots:" + window.location.pathname + ":" + this.commentFormID;
+    this.textAreaElement.val(localStorage.getItem(storageKey));
   }
   apply_template(template) {
     if(this.textAreaValue == ""){

diff --git a/app/assets/javascripts/editorToolbar.js b/app/assets/javascripts/editorToolbar.js
@@ -5,15 +5,13 @@
 //   /app/views/map/edit.html.erb
 //   and wherever /app/views/editor/editor.html.erb is still used in production
 
-const progressAll = (elem, data) => {
-  var progress = parseInt(data.loaded / data.total * 100, 10);
-  $(elem).css(
-    'width',
-    progress + '%'
-  );
-}
+// * * * * * * * * * * * 
 
-// attach eventListeners on document.load for toolbar rich-text buttons & image upload .dropzones
+// attach eventListeners on document.load: 
+//   1. rich-text buttons
+//   2. save & recover buttons
+//   3. textareas
+//   4. image upload .dropzones & buttons
 $(function() {
   // for rich-text buttons (bold, italic, header, and link):
   $('.rich-text-button').on('click', function(e) {
@@ -22,6 +20,22 @@ $(function() {
     $E[action](); // call the appropriate editor function
   });
 
+  // for save & recover buttons
+  $('.save-button').on('click', function(e) {
+    $E.setState(e.currentTarget.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
+    $E.save($E);
+  });
+
+  $('.recover-button').on('click', function(e) {
+    $E.setState(e.currentTarget.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
+    $E.recover();
+  });
+
+  // textAreas
+  $('.text-input').on('click', function(e) {
+    $E.setState(e.currentTarget.dataset.formId);
+  });
+
   // image upload event listeners for both:
   //   1. click-to-upload
   //   2. drag & drop
@@ -66,7 +80,6 @@ $(function() {
         start: function(e) {
           $E.setState(e.target.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
           $(e.target).removeClass('hover');
-          console.log($("#image-upload-progress-container-" + $E.commentFormID));
           $("#image-upload-progress-container-" + $E.commentFormID).show();
           $("#image-upload-text-" + $E.commentFormID).show();
           $("#choose-one-" + $E.commentFormID).hide();
@@ -106,6 +119,14 @@ $(function() {
     });
   });
 
+  const progressAll = (elem, data) => {
+    var progress = parseInt(data.loaded / data.total * 100, 10);
+    $(elem).css(
+      'width',
+      progress + '%'
+    );
+  }
+
   // #side-dropzone, is for the main image of research notes, in /app/views/editor/post.html.erb
   $('#side-dropzone').on('dragover',function(e) {
     e.preventDefault();

diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
@@ -19,11 +19,12 @@
     <%= render :partial => "editor/toolbar", :locals => { :comment_id => comment.id.to_s, :location => :edit } %>
     <div id="comment-form-body-edit-<%= comment.id%>" class="form-group dropzone dropzone-large" data-form-id="edit-<%= comment.id %>">
       <textarea 
-        aria-label="Edit Comment" 
-        onFocus="editing=true" 
-        name="body" 
-        class="form-control" 
         id="text-input-edit-<%= comment.id%>" 
+        class="form-control text-input" 
+        name="body" 
+        data-form-id="edit-<%= comment.id %>"
+        onFocus="editing=true" 
+        aria-label="Edit Comment" 
         rows="6" 
         cols="40" 
         placeholder="<%= placeholder %>"

diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
@@ -50,12 +50,13 @@
         </div>
       <% end %>
       <textarea 
+        id="text-input-<%= comment_form_id %>" 
+        class="form-control text-input" 
+        name="body" 
+        data-form-id="<%= comment_form_id %>" 
+        onFocus="editing=true" 
         aria-label="Comment Text" 
         style="border: 1px solid #bbb;border-bottom-left-radius: 0;border-bottom-right-radius: 0;border-bottom: 0;padding: 10px;" 
-        onFocus="editing=true" 
-        name="body" 
-        class="form-control text-input" 
-        id="text-input-<%= comment_form_id %>" 
         rows="6" 
         cols="40" 
         placeholder="<%= placeholder %>"><%= body %>

diff --git a/app/views/editor/_editor.html.erb b/app/views/editor/_editor.html.erb
@@ -2,7 +2,16 @@
 <%= render :partial => "editor/toolbar", :locals => { :location => :main } %>
 
 <div class="form-group dropzone dropzone-large" data-form-id="main">
-  <textarea aria-label="Wiki Text" name="body" tabindex="2" class="form-control" id="text-input-main" rows="20" cols="60"><% if @node && @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
+  <textarea 
+    id="text-input-main" 
+    class="form-control text-input" 
+    name="body" 
+    data-form-id="main"
+    aria-label="Wiki Text" 
+    tabindex="2" 
+    rows="20" 
+    cols="60"
+  ><% if @node && @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
   <div class="imagebar">
     <div 
       id="image-upload-progress-container-main" style="display:none;" 

diff --git a/app/views/editor/_toolbar.html.erb b/app/views/editor/_toolbar.html.erb
@@ -57,8 +57,8 @@
     </a>
     <a
       id="link-button-<%= toolbar_element_id %>"
-      aria-label="Make a link" 
-      title="Make a link" 
+      aria-label="Link" 
+      title="Link" 
       data-action="link"
       <%# to setState on editor.js %>
       data-form-id="<%= toolbar_element_id %>"
@@ -70,9 +70,9 @@
     </a>
     <a
       id="image-upload-button-<%= toolbar_element_id %>"
-      aria-label="Upload an image" 
+      aria-label="Upload Image" 
       data-toggle="tooltip" 
-      title="Upload an image" 
+      title="Upload Image" 
       data-placement="bottom" 
       class="upload-button btn btn-outline-secondary btn-sm"
     >
@@ -94,23 +94,23 @@
   <div class="btn-group mr-2 ">
     <a
       id="save-button-<%= toolbar_element_id %>"
-      data-toggle="tooltip" 
+      class="save-button btn btn-outline-secondary btn-sm"
       title="Save" 
+      data-form-id="<%= toolbar_element_id %>" 
       data-placement="bottom" 
-      onClick="$E.save()" 
-      class="save-button btn btn-outline-secondary btn-sm"
+      data-toggle="tooltip" 
     >
       <i class="fa fa-save"></i>
     </a>
     <a 
       id="recover-button-<%= toolbar_element_id %>"
-      data-toggle="tooltip" 
+      class="recover-button btn btn-outline-secondary btn-sm"
       title="Recover" 
+      data-form-id="<%= toolbar_element_id %>" 
       data-placement="bottom" 
-      onClick="$E.recover()" 
-      class="recover-button btn btn-outline-secondary btn-sm"
+      data-toggle="tooltip" 
     >
-      Recover
+      <i class="fas fa-undo"></i>
     </a>
   </div>
 

diff --git a/app/views/notes/_comment.html.erb b/app/views/notes/_comment.html.erb
@@ -54,8 +54,10 @@
       <% end %>
       <% if current_user && comment.uid == current_user.uid %>
         <a 
-          aria-label="Edit comment" 
+          aria-label="Edit Comment" 
           class="btn btn-outline-secondary btn-sm edit-comment-btn" 
+          rel="tooltip" 
+          title="Edit Comment"
           href="javascript:void(0)" onClick="
             $('#edit-comment-form-wrapper-<%= comment.cid %>').toggle();
             $('#<%= comment.cid %>-like-emojis').toggle();                               

diff --git a/test/system/comment_test.rb b/test/system/comment_test.rb
@@ -208,8 +208,8 @@ def get_path(page_type, path)
       assert_selector('.btn[data-original-title="Bold"]', count: 1)
       assert_selector('.btn[data-original-title="Italic"]', count: 1)
       assert_selector('.btn[data-original-title="Header"]', count: 1)
-      assert_selector('.btn[data-original-title="Make a link"]', count: 1)
-      assert_selector('.btn[data-original-title="Upload an image"]', count: 1)
+      assert_selector('.btn[data-original-title="Link"]', count: 1)
+      assert_selector('.btn[data-original-title="Upload Image"]', count: 1)
       assert_selector('.btn[data-original-title="Save"]', count: 1)
       assert_selector('.btn[data-original-title="Recover"]', count: 1)
       assert_selector('.btn[data-original-title="Help"]', count: 1)