diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js index 95dbf8bd49..e0be961791 100644 --- 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 index e982d05c78..4c9355cebd 100644 --- 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 index bf45c555a4..588f03495d 100644 --- 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 } %>
+