-
" style="display:none;">
+
" data-question-id="<%= question_id %>" style="display:none;">
<%= render partial: "/notes/archive", locals: { note: note }, formats: [:html] %>
diff --git a/lib/assets/javascripts/views/notes/index.js b/lib/assets/javascripts/views/notes/index.js
index 1c2ce5f..4826544 100644
--- a/lib/assets/javascripts/views/notes/index.js
+++ b/lib/assets/javascripts/views/notes/index.js
@@ -2,6 +2,28 @@
import { isObject, isString } from '../../utils/isType';
$(() => {
+ const defaultViewSelector = questionId => `#note_new${questionId}`;
+ const currentViewSelector = {};
+ /*
+ currentViewSelector represents a map where each key is the question id and
+ each value is the note view selector currently displayed. The value for a key
+ should be one of:
+ - #note_new${questionId}
+ - #note_show${note.id}
+ - #note_edit${note.id}
+ - #note_archive${note.id}
+ */
+ const getCurrentViewSelector = questionId => currentViewSelector[questionId];
+ const putCurrentViewSelector =
+ (questionId, value) => {
+ currentViewSelector[questionId] = value;
+ };
+ const initialiseCurrentViewSelector = () => {
+ $('.note_new').each((i, e) => {
+ const questionId = $(e).attr('data-question-id');
+ putCurrentViewSelector(questionId, defaultViewSelector(questionId));
+ });
+ };
const success = (data) => {
if (isObject(data) &&
isObject(data.notes) &&
@@ -10,21 +32,17 @@
isObject(data.title) &&
isString(data.title.id) &&
isString(data.title.html)) {
- clean(); // eslint-disable-line no-use-before-define
$(`#notes-${data.notes.id}`).html(data.notes.html);
$(`#notes-title-${data.title.id}`).html(data.title.html);
- initOrReload(); // eslint-disable-line no-use-before-define
}
+ clean(); // eslint-disable-line no-use-before-define
+ initOrReload(); // eslint-disable-line no-use-before-define
};
const error = () => {
// TODO adequate error handling for network error
};
const getAction = jQueryForm => jQueryForm.attr('action');
const getMethod = jQueryForm => jQueryForm.attr('method');
- const getCurrentViewSelector = el => $(el).closest('.notes').find('.currentViewSelector').html();
- const setCurrentViewSelector = (el, value) => {
- $(el).closest('.notes').find('.currentViewSelector').html(value);
- };
const destroyCurrentViewEditor = (el) => {
const id = $(el).find('textarea').attr('id');
if (id) {
@@ -32,90 +50,103 @@
}
};
const noteNewLinkHandler = (e) => {
- const currentViewSelector = getCurrentViewSelector(e.target);
- const target = $(e.target).attr('href');
- if (currentViewSelector !== target) {
- $(currentViewSelector)
- .hide({ complete: () => destroyCurrentViewEditor($(currentViewSelector)) });
- setCurrentViewSelector(e.target, target);
- $(e.target).css('visibility', 'hidden');
+ const source = e.target;
+ const target = $(source).attr('href');
+ const questionId = $(target).attr('data-question-id');
+ const viewSelectorSelected = getCurrentViewSelector(questionId);
+ if (viewSelectorSelected !== target) {
+ $(viewSelectorSelected)
+ .hide({ complete: () => destroyCurrentViewEditor($(viewSelectorSelected)) });
+ putCurrentViewSelector(questionId, target);
+ $(source).css('visibility', 'hidden');
$(target).show();
Tinymce.init({ selector: `#${$(target).find('textarea').attr('id')}` });
}
};
const noteShowLinkHandler = (e) => {
- const currentViewSelector = getCurrentViewSelector(e.target);
- const target = $(e.target).attr('href');
- if (currentViewSelector !== target) {
- $(currentViewSelector)
- .hide({ complete: () => destroyCurrentViewEditor($(currentViewSelector)) });
- setCurrentViewSelector(e.target, target);
- $(e.target).closest('.notes').find('.note_new_link').css('visibility', 'visible');
+ const source = e.target;
+ const target = $(source).attr('href');
+ const questionId = $(target).attr('data-question-id');
+ const viewSelectorSelected = getCurrentViewSelector(questionId);
+ if (viewSelectorSelected !== target) {
+ $(viewSelectorSelected)
+ .hide({ complete: () => destroyCurrentViewEditor($(viewSelectorSelected)) });
+ putCurrentViewSelector(questionId, target);
+ $(source).closest('.notes').find('.note_new_link').css('visibility', 'visible');
$(target).show();
}
};
const noteEditLinkHandler = (e) => {
- const currentViewSelector = getCurrentViewSelector(e.target);
- const target = $(e.target).attr('href');
- if (currentViewSelector !== target) {
- $(currentViewSelector)
- .hide({ complete: () => destroyCurrentViewEditor($(currentViewSelector)) });
- setCurrentViewSelector(e.target, target);
- $(e.target).closest('.notes').find('.note_new_link').css('visibility', 'hidden');
+ const source = e.target;
+ const target = $(source).attr('href');
+ const questionId = $(target).attr('data-question-id');
+ const viewSelectorSelected = getCurrentViewSelector(questionId);
+ if (viewSelectorSelected !== target) {
+ $(viewSelectorSelected)
+ .hide({ complete: () => destroyCurrentViewEditor($(viewSelectorSelected)) });
+ putCurrentViewSelector(questionId, target);
+ $(source).closest('.notes').find('.note_new_link').css('visibility', 'hidden');
$(target).show();
Tinymce.init({ selector: `#${$(target).find('textarea').attr('id')}` });
}
};
const noteArchiveLinkHandler = (e) => {
- const currentViewSelector = getCurrentViewSelector(e.target);
- const target = $(e.target).attr('href');
- if (currentViewSelector !== target) {
- $(currentViewSelector)
- .hide({ complete: () => destroyCurrentViewEditor($(currentViewSelector)) });
- setCurrentViewSelector(e.target, target);
- $(e.target).closest('.notes').find('.note_new_link').css('visibility', 'hidden');
+ const source = e.target;
+ const target = $(source).attr('href');
+ const questionId = $(target).attr('data-question-id');
+ const viewSelectorSelected = getCurrentViewSelector(questionId);
+ if (viewSelectorSelected !== target) {
+ $(viewSelectorSelected)
+ .hide({ complete: () => destroyCurrentViewEditor($(viewSelectorSelected)) });
+ putCurrentViewSelector(questionId, target);
+ $(source).closest('.notes').find('.note_new_link').css('visibility', 'hidden');
$(target).show();
}
};
const newEditNoteHandler = (e) => {
e.preventDefault();
+ const source = e.target;
const jQueryForm = $(e.target).closest('form');
const formElements = jQueryForm.serializeArray();
const noteText = formElements.find(el => el.name === 'note[text]');
- const id = $(e.target).closest('form').find('[name="note[text]"]').attr('id');
+ const id = $(source).closest('form').find('[name="note[text]"]').attr('id');
+ const questionId = $(source).closest('.note_new').attr('data-question-id') ||
+ $(source).closest('.note_edit').attr('data-question-id');
noteText.value = Tinymce.findEditorById(id).getContent();
$.ajax({
method: getMethod(jQueryForm),
url: getAction(jQueryForm),
data: formElements,
}).done((data) => {
- success(data);
Tinymce.destroyEditorById(id);
+ success(data);
+ putCurrentViewSelector(questionId, defaultViewSelector(questionId));
}, error);
};
- const editNoteCancelHandler = (e) => {
- const currentViewSelector = getCurrentViewSelector(e.target);
- $(currentViewSelector)
- .hide({ complete: () => destroyCurrentViewEditor($(currentViewSelector)) });
- $(e.target).closest('.notes').find('.note_new_link').css('visibility', 'visible');
- setCurrentViewSelector(e.target, '');
- };
const archiveNoteDestroyHandler = (e) => {
e.preventDefault();
- const jQueryForm = $(e.target).closest('form');
+ const source = e.target;
+ const jQueryForm = $(source).closest('form');
const formElements = jQueryForm.serializeArray();
+ const questionId = $(source).closest('.note_archive').attr('data-question-id');
$.ajax({
method: getMethod(jQueryForm),
url: getAction(jQueryForm),
data: formElements,
- }).done(success, error);
+ }).done((data) => {
+ success(data);
+ putCurrentViewSelector(questionId, defaultViewSelector(questionId));
+ }, error);
};
- const archiveNoteCancelHandler = (e) => {
- const currentViewSelector = getCurrentViewSelector(e.target);
- $(currentViewSelector)
- .hide({ complete: () => destroyCurrentViewEditor($(currentViewSelector)) });
+ const noteCancelHandler = (e) => {
+ const source = e.target;
+ const questionId = $(source).closest('.note_edit').attr('data-question-id') ||
+ $(source).closest('.note_archive').attr('data-question-id');
+ const viewSelectorSelected = getCurrentViewSelector(questionId);
+ $(viewSelectorSelected)
+ .hide({ complete: () => destroyCurrentViewEditor($(viewSelectorSelected)) });
$(e.target).closest('.notes').find('.note_new_link').css('visibility', 'visible');
- setCurrentViewSelector(e.target, '');
+ putCurrentViewSelector(questionId, null);
};
const eventHandlers = ({ attachment = 'off' }) => {
$('.notes .note_new_link')[attachment]('click', noteNewLinkHandler);
@@ -124,9 +155,9 @@
$('.notes .note_archive_link')[attachment]('click', noteArchiveLinkHandler);
$('.new_note')[attachment]('submit', newEditNoteHandler);
$('.edit_note')[attachment]('submit', newEditNoteHandler);
- $('.edit_note button[type="button"]')[attachment]('click', editNoteCancelHandler);
+ $('.edit_note button[type="button"]')[attachment]('click', noteCancelHandler);
$('.archive_note')[attachment]('submit', archiveNoteDestroyHandler);
- $('.archive_note button[type="button"]')[attachment]('click', archiveNoteCancelHandler);
+ $('.archive_note button[type="button"]')[attachment]('click', noteCancelHandler);
};
const initOrReload = () => {
Tinymce.init({ selector: '.note' });
@@ -137,4 +168,5 @@
Tinymce.destroyEditorsByClassName('note');
};
initOrReload();
+ initialiseCurrentViewSelector();
});