Skip to content

Commit

Permalink
Added animation to save icon when user enters a comment text (#9384)
Browse files Browse the repository at this point in the history 
* Added animation to save icon when user enters a comment text

* Edge case handled

* Updated tests for save and recover buttons

* Update editorToolbar.js

* Unnecessary semicolon

* ESLint typeof operator

* let instead of var

* Matched padding of saving text with file upload text
  • Loading branch information
@waridrox
waridrox authored Jun 11, 2021
1 parent 0feb101 commit c76e485
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 7 deletions.
66 changes: 62 additions & 4 deletions app/assets/javascripts/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,16 +104,74 @@ class Editor {
// h7() {
// this.wrap('#######','')
// }

//debounce function addition
debounce(func, wait, immediate) {
let timeout;
return function () {
let context = this,
args = arguments;
let later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}

// this function is dedicated to Don Blair https://github.com/donblair
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() {
//implementing a debounce function on save method
this.textAreaElement.on(
"input.save",
debounce(function () {
//changing styles and text
//explicitly handling main comment form
if ($('#text-input-main').is(':focus')) {

$("#comment-form-main .btn-toolbar #save-button-main").find("i").removeClass("fa fa-save").addClass("fas fa-sync fa-spin");

let saving_text = $('<p id="saving-text" style="padding-bottom: 8px"> Saving... </p>');
$("#comment-form-main .imagebar").prepend(saving_text);
$("#comment-form-main .imagebar p").not("#saving-text").hide();

//adding delay and revering the styles
setTimeout(() => {
$("#comment-form-main .btn-toolbar #save-button-main").find("i").removeClass("fas fa-sync fa-spin").addClass("fa fa-save");

$("#comment-form-main .imagebar").find("#saving-text").remove();
$("#comment-form-main .imagebar p").not("#saving-text").show();
}, 400);
}
else {
//handling other comment forms
let comment_temp_id = (document.activeElement.parentElement.parentElement.id);
let imager_bar = (document.activeElement.nextElementSibling.className);

$('#'+comment_temp_id).find('.btn-toolbar').find(".save-button").find("i").removeClass("fa fa-save").addClass("fas fa-sync fa-spin");

let saving_text = $('<p id="saving-text" style="padding-bottom: 8px"> Saving... </p>');
$('#'+comment_temp_id).find('.'+imager_bar).prepend(saving_text);
$('#'+comment_temp_id).find('.'+imager_bar).find("p").not("#saving-text").hide();

setTimeout(() => {
$('#'+comment_temp_id).find('.btn-toolbar').find(".save-button").find("i").removeClass("fas fa-sync fa-spin").addClass("fa fa-save");

$('#'+comment_temp_id).find('.'+imager_bar).find("#saving-text").remove();
$('#'+comment_temp_id).find('.'+imager_bar).find("p").not("#saving-text").show();
}, 400);
}
thisEditor.save(thisEditor);
});
}
save(thisEditor) {
}, 700)
);
}
save(thisEditor) {
const storageKey = "plots:" + window.location.pathname + ":" + thisEditor.commentFormID;
localStorage.setItem(storageKey, thisEditor.textAreaValue);
}
Expand Down
49 changes: 46 additions & 3 deletions app/assets/javascripts/editorToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,52 @@ $(function() {
})
// for save & recover buttons
.on("click", ".save-button", function(e) {
$E.setState(e.currentTarget.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
$E.save($E);
})
//preventing multiple clicks on the button
if(!e.detail || e.detail === 1) {
//explicitly handling main comment section
if ((this.id) === "save-button-main") {
// toggling the favicon save icon class to add a spinner icon
$(this).find("i").toggleClass("fa fa-save fas fa-sync fa-spin");

//changing the text from "Upload an image" to "Saving..."
let saving_text = $('<p id="saving-text" style="padding-bottom: 8px"> Saving... </p>');
$("#comment-form-main .imagebar").prepend(saving_text);
$("#comment-form-main .imagebar p").not("#saving-text").hide();

//setting up delay and reverting the styles
setTimeout(() => {
$(this).find("i").toggleClass("fa fa-save fas fa-sync fa-spin");
$("#comment-form-main .imagebar").find("#saving-text").remove();
$("#comment-form-main .imagebar p").not("#saving-text").show();

$E.setState(e.currentTarget.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
$E.save($E);
}, 400);
}
else {
//handling other comment sections
let comment_reply_id = (this.parentNode.parentNode.nextElementSibling.nextElementSibling.id);

// toggling the favicon save icon class to add a spinner icon
$(this).find("i").toggleClass("fa fa-save fas fa-sync fa-spin");

//changing the text from "Upload an image" to "Saving..."
let saving_text = $('<p id="saving-text" style="padding-bottom: 8px"> Saving... </p>');
$('#'+comment_reply_id).find(".imagebar").prepend(saving_text);
$('#'+comment_reply_id).find(".imagebar p").not("#saving-text").hide();

//setting up delay and reverting the styles
setTimeout(() => {
$(this).find("i").toggleClass("fa fa-save fas fa-sync fa-spin");
$('#'+comment_reply_id).find(".imagebar").find("#saving-text").remove();
$('#'+comment_reply_id).find(".imagebar p").not("#saving-text").show();

$E.setState(e.currentTarget.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
$E.save($E);
}, 400);
}
}
})
.on("click", ".recover-button", function(e) {
$E.setState(e.currentTarget.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
$E.recover();
Expand Down
6 changes: 6 additions & 0 deletions test/system/comment_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -389,6 +389,8 @@ def get_path(page_type, path)
page.find('#text-input-main')
.click
.fill_in with: comment_text_main
# taking into account the time for debounce function
sleep(0.7)

# open up reply comment form
page.all('p', text: 'Reply to this comment...')[0].click
Expand All @@ -399,6 +401,8 @@ def get_path(page_type, path)
page.find('#text-input-reply-' + reply_id_num)
.click
.fill_in with: comment_text_reply
# taking into account the time for debounce function
sleep(0.7)

# open up edit comment form
page.find(".edit-comment-btn").click
Expand All @@ -409,6 +413,8 @@ def get_path(page_type, path)
page.find('#text-input-edit-' + edit_id_num)
.click
.fill_in with: comment_text_edit
# taking into account the time for debounce function
sleep(0.7)

# visit the page again (ie. refresh it)
visit get_path(page_type, nodes(node_name).path)
Expand Down

0 comments on commit c76e485

Please sign in to comment.