Commit 52f9ba79 authored by Stephen Dolan's avatar Stephen Dolan

Update Stimulus controller documentation

parent 71863744
......@@ -18,3 +18,6 @@ rules:
'no-unused-vars':
- error
- argsIgnorePattern: "^_"
'max-len':
- error
- code: 120
......@@ -3,8 +3,6 @@ import debounce from 'lodash.debounce';
// This controller allows for various debounced actions to be taken
// on DOM elements.
//
// @author Stephen Dolan
export default class extends Controller {
static targets = [];
......@@ -16,8 +14,6 @@ export default class extends Controller {
// Submit the form after some number of inactive milliseconds or some maximum number of
// milliseconds, whichever comes first. These values are defined in the initialize() function.
//
// @author Stephen Dolan
//
// @data [Integer] debounceMs the number of milliseconds to wait before executing the function.
// Defaults to 500.
// @data [Integer] debounceMaxWaitMs after this many milliseconds, the form will always submit.
......@@ -31,8 +27,6 @@ export default class extends Controller {
);
// Set up some basic listeners to handle state for the entire controller.
//
// @author Stephen Dolan
initialize() {
// Whenever the form element submits by some method other than the debouncedSubmit,
// we need to make sure we don't double submit.
......
......@@ -5,8 +5,6 @@ export default class extends Controller {
// Iterate over all button targets and add the disabled attribute to
// disable them.
//
// @author Stephen Dolan
_disableButtons() {
this.buttonTargets.forEach((button) => {
button.setAttribute('disabled', true);
......@@ -15,8 +13,6 @@ export default class extends Controller {
// Iterate over all button targets and remove the disabled attribute to
// enable them.
//
// @author Stephen Dolan
_enableButtons() {
this.buttonTargets.forEach((button) => {
button.removeAttribute('disabled');
......@@ -25,8 +21,6 @@ export default class extends Controller {
// Determine whether or not a given input element has a value entered.
//
// @author Stephen Dolan
//
// @param [Element] inputElement the element to check the value of.
//
// @return [Boolean] true if the input element has a value, otherwise false.
......@@ -37,8 +31,6 @@ export default class extends Controller {
// Iterate through all inputs to determine if values are present for each one.
// If all inputs have a value set, enable the button targets.
// Otherwise, disable the button targets.
//
// @author Stephen Dolan
_checkInputs() {
if (this.inputTargets.every(this._inputHasValue)) {
this._enableButtons();
......@@ -49,8 +41,6 @@ export default class extends Controller {
// Add listeners to each input target for either the specified event
// or, by default, the input event.
//
// @author Stephen Dolan
_addInputListeners() {
this.inputTargets.forEach((target) => {
const listenedEvent = target.dataset.inputEnabledButtonEvent || 'input';
......@@ -69,8 +59,6 @@ export default class extends Controller {
// Set up listeners and establish the starting state of the buttons by running
// an initial check on the inputs.
//
// @author Stephen Dolan
initialize() {
this._addInputListeners();
this._checkInputs();
......
import { Controller } from 'stimulus';
// Layer some functionality on top of the new package submission page:
// - Dynamically show/hide the submit button based on whether or not the package is valid.
// - Enable/Disable some set of elements when the form is submitting/validating.
// - Keep the preview package name in sync with the name of the package the user is submitting.
//
// @target [Array<Element>] disableable any number of elements to disable on form submission/validation.
// @target [Element] loader the loading spinner to show when the package is being validated.
// @target [Element] form the form that is sending the package to be validated.
// @target [Element] namePreview the element that is showing the package name preview.
// @target [Element] submitButton the button that the user can click to submit a valid package.
//
// @variable [String] hiddenClass the class to use to show and hide elements on the page.
// @variable [String] ajaxSendEvent the event that is fired on a form when an AJAX request is sent.
// @variable [String] ajaxSuccessEvent the event that is fired on a form when an AJAX request is successful.
// @variable [String] ajaxCompleteEvent the event that is fired on a form when an AJAX request is done.
export default class extends Controller {
static targets = [
'disableable',
......@@ -11,23 +26,19 @@ export default class extends Controller {
];
// Set up some basic listeners to handle state for the entire controller.
//
// @author Stephen Dolan
initialize() {
// Whenever the form element submits by some method other than the debouncedSubmit,
// we need to make sure we don't double submit.
this.formTarget.addEventListener('ajax:send', () => {
_addFormListeners() {
this.formTarget.addEventListener(this.ajaxSendEvent, () => {
this._disableElements();
this._hideSubmitButton();
this._hidePreview();
this._showLoader();
});
this.formTarget.addEventListener('ajax:success', () => {
this.formTarget.addEventListener(this.ajaxSuccessEvent, () => {
this._showSubmitButton();
});
this.formTarget.addEventListener('ajax:complete', () => {
this.formTarget.addEventListener(this.ajaxCompleteEvent, () => {
this._hideLoader();
this._showPreview();
this._enableElements();
......@@ -35,12 +46,12 @@ export default class extends Controller {
}
_showSubmitButton() {
this.submitButtonTarget.classList.remove('hidden');
this.submitButtonTarget.classList.remove(this.hiddenClass);
this.submitButtonTarget.removeAttribute('disabled');
}
_hideSubmitButton() {
this.submitButtonTarget.classList.add('hidden');
this.submitButtonTarget.classList.add(this.hiddenClass);
this.submitButtonTarget.setAttribute('disabled', true);
}
......@@ -57,21 +68,24 @@ export default class extends Controller {
}
_showLoader() {
this.loaderTarget.classList.remove('hidden');
this.loaderTarget.classList.remove(this.hiddenClass);
}
_hideLoader() {
this.loaderTarget.classList.add('hidden');
this.loaderTarget.classList.add(this.hiddenClass);
}
_showPreview() {
this.previewTarget.classList.remove('hidden');
this.previewTarget.classList.remove(this.hiddenClass);
}
_hidePreview() {
this.previewTarget.classList.add('hidden');
this.previewTarget.classList.add(this.hiddenClass);
}
// Keep the package name in sync with the submitted package name that the user is typing.
//
// @param [Event] event the event that is triggering the action.
updatePreview(event) {
if (event.target.value !== '') {
this.namePreviewTarget.innerHTML = event.target.value;
......@@ -79,4 +93,16 @@ export default class extends Controller {
this.namePreviewTarget.innerHTML = 'an-awesome-package';
}
}
// Set up the initial variables and listeners needed for the controller to work.
initialize() {
this.hiddenClass = 'hidden';
this.ajaxSendEvent = 'ajax:send';
this.ajaxSuccessEvent = 'ajax:success';
this.ajaxCompleteEvent = 'ajax:complete';
if (this.hasFormTarget) {
this._addFormListeners();
}
}
}
import { Controller } from 'stimulus';
// Allow for content that should be replaced by a loader.
//
// @target [Element] content the main content of the page that can be replaced.
// @target [Element] loader the loading content to show when the content is being replaced.
//
// @variable [String] hiddenClass the class to use to show and hide elements on the page.
export default class extends Controller {
static targets = ['content', 'loader'];
// Hide the content target and show the loader target.
replaceContentWithLoader() {
console.log('here 1');
this.contentTarget.classList.add('hidden');
this.loaderTarget.classList.remove('hidden');
this.contentTarget.classList.add(this.hiddenClass);
this.loaderTarget.classList.remove(this.hiddenClass);
}
// Hide the loader target and show the content target.
replaceLoaderWithContent() {
console.log('here 2');
this.loaderTarget.classList.add('hidden');
this.contentTarget.classList.remove('hidden');
this.loaderTarget.classList.add(this.hiddenClass);
this.contentTarget.classList.remove(this.hiddenClass);
}
// Set up initial variables.
initialize() {
console.log('connected');
this.hiddenClass = 'hidden';
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment