diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js index f393af1a7..8a370ed08 100644 --- a/app/javascript/entrypoints/application.js +++ b/app/javascript/entrypoints/application.js @@ -15,8 +15,7 @@ import Turbolinks from 'turbolinks'; import './vendor/jquery-ui-triggeredAutocomplete'; import PdcUiLoader from './pdc/pdc_ui_loader.es6'; - -console.log('Vite ⚡️ Rails'); +import WorksWizardPolicy from './works_wizard_policy'; // If using a TypeScript entrypoint file: // <%= vite_typescript_tag 'application' %> @@ -24,8 +23,6 @@ console.log('Vite ⚡️ Rails'); // If you want to use .jsx or .tsx, add the extension: // <%= vite_javascript_tag 'application.jsx' %> -console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails'); - // Example: Load Rails libraries in Vite. // // import * as Turbo from '@hotwired/turbo' @@ -45,6 +42,8 @@ Turbolinks.start(); function ready() { const loader = new PdcUiLoader(); loader.run(); + + WorksWizardPolicy.bind('#agreement'); } // Must run the javascript loader on every page even if turbolinks loads it diff --git a/app/javascript/entrypoints/works_wizard_policy.js b/app/javascript/entrypoints/works_wizard_policy.js new file mode 100644 index 000000000..b97ec4f11 --- /dev/null +++ b/app/javascript/entrypoints/works_wizard_policy.js @@ -0,0 +1,47 @@ +class WorksWizardPolicy { + static bind(elementSelector) { + let built; + const root = document.querySelector(elementSelector); + + if (root) { + built = new WorksWizardPolicy(root, '#submit-button'); + } + + return built; + } + + handleChange(event) { + const { classList } = this.submitButton; + + if (event.target.checked) { + classList.remove('btn-secondary'); + classList.remove('disabled'); + classList.add('btn-primary'); + + this.submitButton.disabled = false; + } else { + classList.remove('btn-primary'); + classList.add('disabled'); + classList.add('btn-secondary'); + + this.submitButton.disabled = true; + } + } + + constructor(root, buttonSelector) { + this.root = root; + this.submitButton = null; + + if (this.root) { + const submitButton = document.querySelector(buttonSelector); + + if (submitButton) { + this.submitButton = submitButton; + const handleChange = this.handleChange.bind(this); + this.root.addEventListener('change', handleChange); + } + } + } +} + +export default WorksWizardPolicy; diff --git a/app/views/works_wizard_policy/show.html.erb b/app/views/works_wizard_policy/show.html.erb index 09e94a344..ed160fb93 100644 --- a/app/views/works_wizard_policy/show.html.erb +++ b/app/views/works_wizard_policy/show.html.erb @@ -19,22 +19,3 @@ - -