diff --git a/app/javascript/application.js b/app/javascript/application.js index 8473b5f..22d0db9 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -2,6 +2,7 @@ // https://github.com/rails/importmap-rails import "@hotwired/turbo-rails" import "controllers" +import { disableElement, enableElement } from "element_helpers" /* Hide page before loaded for testing purposes */ @@ -12,23 +13,13 @@ document.addEventListener('turbo:load', showPage) /* Turbo stream actions */ -Turbo.StreamElement.prototype.disableElement = function(element) { - element.setAttribute("disabled", "disabled") - element.setAttribute("aria-disabled", "true") - element.setAttribute("tabindex", "-1") -} +Turbo.StreamElement.prototype.disableElement = disableElement +Turbo.StreamElement.prototype.enableElement = enableElement Turbo.StreamActions.disable = function() { - this.targetElements.forEach((e) => { this.disableElement(e) }) -} - -Turbo.StreamElement.prototype.enableElement = function(element) { - element.removeAttribute("disabled") - element.removeAttribute("aria-disabled") - // Assume 'tabindex' is not used explicitly, so removing it is safe - element.removeAttribute("tabindex") + this.targetElements.forEach(disableElement) } Turbo.StreamActions.enable = function() { - this.targetElements.forEach((e) => { this.enableElement(e) }) + this.targetElements.forEach(enableElement) } /* TODO: change to visibility = collapse to avoid width change? */ diff --git a/app/javascript/controllers/details_controller.js b/app/javascript/controllers/details_controller.js index 4337a18..134d993 100644 --- a/app/javascript/controllers/details_controller.js +++ b/app/javascript/controllers/details_controller.js @@ -1,4 +1,5 @@ import { Controller } from "@hotwired/stimulus" +import { disableElement, enableElement } from "element_helpers" export default class extends Controller { static targets = ["countLabel", "submitButton", "list"] @@ -18,10 +19,10 @@ export default class extends Controller { const count = this.element.querySelectorAll('input:checked:not([disabled])').length if (count > 0) { this.countLabelTarget.textContent = count + ' selected' - Turbo.StreamElement.prototype.enableElement(this.submitButtonTarget) + enableElement(this.submitButtonTarget) } else { this.countLabelTarget.textContent = this.countLabelTarget.dataset.prompt - Turbo.StreamElement.prototype.disableElement(this.submitButtonTarget) + disableElement(this.submitButtonTarget) } } diff --git a/app/javascript/controllers/readout_unit_controller.js b/app/javascript/controllers/readout_unit_controller.js index 841a3da..5ec3164 100644 --- a/app/javascript/controllers/readout_unit_controller.js +++ b/app/javascript/controllers/readout_unit_controller.js @@ -1,13 +1,14 @@ import { Controller } from "@hotwired/stimulus" +import { disableElement, enableElement } from "element_helpers" export default class extends Controller { static targets = ["select", "button"] unitChanged() { if (this.selectTarget.value && this.selectTarget.value !== this.selectTarget.dataset.defaultUnitId) { - Turbo.StreamElement.prototype.enableElement(this.buttonTarget) + enableElement(this.buttonTarget) } else { - Turbo.StreamElement.prototype.disableElement(this.buttonTarget) + disableElement(this.buttonTarget) } } diff --git a/app/javascript/element_helpers.js b/app/javascript/element_helpers.js new file mode 100644 index 0000000..6019d3c --- /dev/null +++ b/app/javascript/element_helpers.js @@ -0,0 +1,11 @@ +export function disableElement(element) { + element.setAttribute("disabled", "disabled") + element.setAttribute("aria-disabled", "true") + element.setAttribute("tabindex", "-1") +} + +export function enableElement(element) { + element.removeAttribute("disabled") + element.removeAttribute("aria-disabled") + element.removeAttribute("tabindex") +} diff --git a/config/importmap.rb b/config/importmap.rb index 8dce42d..df46648 100644 --- a/config/importmap.rb +++ b/config/importmap.rb @@ -1,6 +1,7 @@ # Pin npm packages by running ./bin/importmap pin "application", preload: true +pin "element_helpers" pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true