darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-01 06:30:56 -04:00
Code Issues Packages Projects Releases Wiki Activity

go to forms on click of action buttons, and detatch and reattach els

Browse Source 
the action buttons have a value that matches up with the key for the
target form in the `this.states` object - we can just set the
currentState to that and call re-render and it all Just Works™.

detatch and reattach feel better than hide/unhide, mainly because it
means when the form is posted, any data that might linger in them
definitely won't be sent in the POST.
This commit is contained in:
Leo Hemsted
2018-11-29 17:39:58 +00:00
parent db9d4aa2cb
commit 9942725d35
1 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/javascripts/templateFolderForm.js
View File

@@ -15,19 +15,32 @@
this.states = {
nothingSelectedButtons: this.$form.find('#nothing_selected'),
itemsSelectedButtons: this.$form.find('#items_selected'),
moveToFolderRadios: this.$form.find('#move_to_folder_radios'),
addNewFolderName: this.$form.find('#add_new_folder_form'),
moveToNewFolderName: this.$form.find('#move_to_new_folder_form'),
moveToNewFolderForm: this.$form.find('#move_to_new_folder_form'),
addNewFolderForm: this.$form.find('#add_new_folder_form'),
addNewTemplateForm: this.$form.find('#add_new_template_form'),
};
// first off show the new template / new folder buttons
this.currentState = 'nothingSelectedButtons';
this.$form.on('click', 'button.button-secondary', (event) => this.actionButtonClicked(event));
this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged());
this.render();
};
this.templateFolderCheckboxChanged = function(event) {
this.actionButtonClicked = function(event) {
event.preventDefault();
this.currentState = $(event.currentTarget).val();
this.render();
};
this.templateFolderCheckboxChanged = function() {
let numSelected = this.countSelectedCheckboxes();
if (this.currentState === 'nothingSelectedButtons' && numSelected !== 0) {
@@ -46,15 +59,17 @@
this.render = function() {
let numSelected = this.countSelectedCheckboxes();
// hide everything, unless they are the currentState
Object.entries(this.states).forEach(([state, $el]) => (state === this.currentState ? $el.show() : $el.hide()));
// detach everything, unless they are the currentState
Object.entries(this.states).forEach(
([state, $el]) => (state === this.currentState ? this.$stickyBottom.append($el) : $el.detach())
);
};
this.nothingSelectedButtons = function() {
return `
<div id="nothing_selected">
<button class="button-secondary" value="new_template">New template</button>
<button class="button-secondary" value="new_folder">New folder</button>
<button class="button-secondary" value="addNewTemplateForm">New template</button>
<button class="button-secondary" value="addNewFolderForm">New folder</button>
</div>
`;
};
@@ -62,8 +77,8 @@
this.itemsSelectedButtons = function() {
return `
<div id="items_selected">
<button class="button-secondary" value="move_to_folder">Move</button>
<button class="button-secondary" value="add_to_new_folder">Add to a new folder</button>
<button class="button-secondary" value="moveToFolderRadios">Move</button>
<button class="button-secondary" value="moveToNewFolderForm">Add to a new folder</button>
</div>
`;
};