diff --git a/static/js/utils/form.js b/static/js/utils/form.js
index 31b94d1bb..afd0c72e8 100644
--- a/static/js/utils/form.js
+++ b/static/js/utils/form.js
@@ -177,51 +177,95 @@
setup: reactiveButtonUtil,
});
+ /**
+ *
+ * Interactive Fieldset Utility
+ * shows/hides inputs based on value of particular input
+ *
+ * Attribute: uw-interactive-fieldset
+ *
+ * Params:
+ * data-conditional-input: string
+ * Selector for the input that this fieldset watches for changes
+ * data-conditional-value: string
+ * The value the conditional input needs to be set to for this fieldset to be shown
+ *
+ * Example usage:
+ *
+ *
...
+ * ...
+ * ## example with
+ *
+ * Zero
+ * One
+ * ...
+ * ...
+ */
+ var INTERACTIVE_FIELDSET_UTIL_NAME = 'interactiveFieldset';
+ var INTERACTIVE_FIELDSET_UTIL_SELECTOR = '[uw-interactive-fieldset]';
+ var INTERACTIVE_FIELDSET_INITIALIZED_CLASS = 'interactive-fieldset--initialized';
- window.utils.interactiveFieldset = function(form, options) {
- options = options || {};
- var fieldSets = options.fieldSets;
+ var interactiveFieldsetUtil = function(element) {
+ var conditionalInput;
+ var conditionalValue;
- if (!fieldSets) {
- throw new Error('interactiveFieldset must be passed fieldSets via options');
+ function init() {
+ if (!element) {
+ throw new Error('Interactive Fieldset utility cannot be setup without an element!');
}
- var fields = fieldSets.map(function(fs) {
- return {
- fieldSet: fs,
- condId: fs.dataset.conditionalId,
- condValue: fs.dataset.conditionalValue,
- condEl: form.querySelector('#' + fs.dataset.conditionalId),
- };
- }).filter(function(field) {
- return !!field.condEl;
- });
+ if (element.classList.contains(INTERACTIVE_FIELDSET_INITIALIZED_CLASS)) {
+ throw new Error('Interactive Fieldset utility already initialized!');
+ }
- function updateFields() {
- fields.forEach(function(field) {
- field.fieldSet.classList.toggle('hidden', field.condEl.value !== field.condValue);
- });
+ // param conditionalInput
+ if (!element.dataset.conditionalInput) {
+ throw new Error('Interactive Fieldset needs a selector for a conditional input!');
+ }
+ conditionalInput = document.querySelector(element.dataset.conditionalInput);
+ if (!conditionalInput) {
+ // abort if form has no required inputs
+ throw new Error('Couldn\'t find the conditional input. Aborting setup for interactive fieldset.');
}
- function addEventListeners() {
- fields.forEach(function(field) {
- field.condEl.addEventListener('input', updateFields)
- });
+ // param conditionalValue
+ if (!element.dataset.conditionalValue) {
+ throw new Error('Interactive Fieldset needs a conditional value!');
}
+ conditionalValue = element.dataset.conditionalValue;
- if (fieldSets.length) {
- addEventListeners();
- updateFields();
- }
+ // add event listener
+ conditionalInput.addEventListener('input', updateVisibility);
+
+ // initial visibility update
+ updateVisibility();
+
+ // mark as initialized
+ element.classList.add(INTERACTIVE_FIELDSET_INITIALIZED_CLASS);
return {
- scope: form,
+ name: INTERACTIVE_FIELDSET_UTIL_NAME,
+ element: element,
destroy: function() {},
};
+ }
+
+ function updateVisibility() {
+ element.classList.toggle('hidden', conditionalInput.value !== conditionalValue);
+ }
+
+ return init();
};
+ formUtilities.push({
+ name: INTERACTIVE_FIELDSET_UTIL_NAME,
+ selector: INTERACTIVE_FIELDSET_UTIL_SELECTOR,
+ setup: interactiveFieldsetUtil,
+ });
+
+
window.utils.autoSubmit = function(form, options) {
var button = form.querySelector(AUTOSUBMIT_BUTTON_SELECTOR);
if (button) {
diff --git a/templates/widgets/multi-action/multi-action.hamlet b/templates/widgets/multi-action/multi-action.hamlet
index 71e3acf14..f65a39dec 100644
--- a/templates/widgets/multi-action/multi-action.hamlet
+++ b/templates/widgets/multi-action/multi-action.hamlet
@@ -1,4 +1,4 @@
-
+
_{act}
^{w}