From 3a5ad879fa589dd63b3f83f6b1a4529224ff495d Mon Sep 17 00:00:00 2001 From: Paul Robert Lloyd Date: Wed, 15 Jun 2022 13:29:53 +0100 Subject: [PATCH] Lint JavaScript --- app/frontend/application.js | 29 +++++++------- .../accessible_autocomplete_controller.js | 6 +-- app/frontend/controllers/application.js | 6 +-- .../conditional_filter_controller.js | 10 ++--- .../conditional_question_controller.js | 40 +++++++++---------- .../controllers/filter_layout_controller.js | 6 +-- .../controllers/govukfrontend_controller.js | 8 ++-- app/frontend/controllers/index.js | 26 ++++++------ .../numeric_question_controller.js | 39 +++++++++--------- app/frontend/modules/filter_toggle.js | 26 ++++++------ babel.config.js | 12 +++--- package.json | 5 +++ webpack.config.js | 34 ++++++++-------- 13 files changed, 126 insertions(+), 121 deletions(-) diff --git a/app/frontend/application.js b/app/frontend/application.js index 4bff5c3e9..45d4b960d 100644 --- a/app/frontend/application.js +++ b/app/frontend/application.js @@ -1,22 +1,23 @@ // This file is automatically compiled by Webpack, along with any other files -// present in this directory. You're encouraged to place your actual application logic in -// a relevant structure within app/javascript and only use these pack files to reference -// that code so it'll be compiled. +// present in this directory. You're encouraged to place your actual application +// logic in a relevant structure within app/javascript and only use these pack +// files to reference that code so it'll be compiled. // Polyfills for IE -import "@webcomponents/webcomponentsjs" -import "core-js/stable" -import "regenerator-runtime/runtime" -import "@stimulus/polyfills" -import "custom-event-polyfill" -import "intersection-observer" +import '@webcomponents/webcomponentsjs' +import 'core-js/stable' +import 'regenerator-runtime/runtime' +import '@stimulus/polyfills' +import 'custom-event-polyfill' +import 'intersection-observer' + // +import GOVUKFrontend from 'govuk-frontend' +import GOVUKPrototypeComponents from 'govuk-prototype-components' +import './styles/application.scss' +import './controllers' -require.context("govuk-frontend/govuk/assets") -import GOVUKFrontend from "govuk-frontend" -import GOVUKPrototypeComponents from "govuk-prototype-components" -import "./styles/application.scss" -import "./controllers" +require.context('govuk-frontend/govuk/assets') GOVUKFrontend.initAll() GOVUKPrototypeComponents.initAll() diff --git a/app/frontend/controllers/accessible_autocomplete_controller.js b/app/frontend/controllers/accessible_autocomplete_controller.js index db34213ee..d3c900485 100644 --- a/app/frontend/controllers/accessible_autocomplete_controller.js +++ b/app/frontend/controllers/accessible_autocomplete_controller.js @@ -1,9 +1,9 @@ -import { Controller } from "@hotwired/stimulus" -import accessibleAutocomplete from "accessible-autocomplete" +import { Controller } from '@hotwired/stimulus' +import accessibleAutocomplete from 'accessible-autocomplete' import 'accessible-autocomplete/dist/accessible-autocomplete.min.css' export default class extends Controller { - connect() { + connect () { accessibleAutocomplete.enhanceSelectElement({ defaultValue: '', selectElement: this.element diff --git a/app/frontend/controllers/application.js b/app/frontend/controllers/application.js index 932e75c45..e0ec54d90 100644 --- a/app/frontend/controllers/application.js +++ b/app/frontend/controllers/application.js @@ -1,10 +1,10 @@ -import { Application } from "@hotwired/stimulus" +import { Application } from '@hotwired/stimulus' const application = Application.start() // Configure Stimulus development experience application.warnings = true -application.debug = false -window.Stimulus = application +application.debug = false +window.Stimulus = application export { application } diff --git a/app/frontend/controllers/conditional_filter_controller.js b/app/frontend/controllers/conditional_filter_controller.js index f4fee7eb9..0169bf57b 100644 --- a/app/frontend/controllers/conditional_filter_controller.js +++ b/app/frontend/controllers/conditional_filter_controller.js @@ -1,13 +1,13 @@ -import { Controller } from "@hotwired/stimulus" +import { Controller } from '@hotwired/stimulus' export default class extends Controller { - initialize() { + initialize () { this.clearIfHidden() } - clearIfHidden() { - if(this.element.style["display"] == "none") { - this.element.value = "" + clearIfHidden () { + if (this.element.style.display === 'none') { + this.element.value = '' } } } diff --git a/app/frontend/controllers/conditional_question_controller.js b/app/frontend/controllers/conditional_question_controller.js index aab48a280..c3913ceb9 100644 --- a/app/frontend/controllers/conditional_question_controller.js +++ b/app/frontend/controllers/conditional_question_controller.js @@ -1,36 +1,36 @@ -import { Controller } from "@hotwired/stimulus" +import { Controller } from '@hotwired/stimulus' export default class extends Controller { - initialize() { + initialize () { this.displayConditional() } - displayConditional() { - if(this.element.checked) { - let selectedValue = this.element.value - let conditional_for = JSON.parse(this.element.dataset.info) - Object.entries(conditional_for).map(([targetQuestion, conditions]) => { - if(conditions.map(String).includes(String(selectedValue))) { + displayConditional () { + if (this.element.checked) { + const selectedValue = this.element.value + const conditionalFor = JSON.parse(this.element.dataset.info) + + Object.entries(conditionalFor).forEach(([targetQuestion, conditions]) => { + if (!conditions.map(String).includes(String(selectedValue))) { + const textNumericInput = document.getElementById(`case-log-${targetQuestion.replaceAll('_', '-')}-field`) + if (textNumericInput == null) { + const dateInputs = [1, 2, 3].map((idx) => { + return document.getElementById(`case_log_${targetQuestion}_${idx}i`) + }) + this.clearDateInputs(dateInputs) } else { - const textNumericInput = document.getElementById(`case-log-${targetQuestion.replaceAll("_","-")}-field`) - if (textNumericInput == null) { - const dateInputs = [1,2,3].map((idx) => { - return document.getElementById(`case_log_${targetQuestion}_${idx}i`) - }) - this.clearDateInputs(dateInputs) - } else { - this.clearTextNumericInput(textNumericInput) + this.clearTextNumericInput(textNumericInput) } } }) } } - clearTextNumericInput(input) { - input.value = "" + clearTextNumericInput (input) { + input.value = '' } - clearDateInputs(inputs) { - inputs.forEach((input) => { input.value = "" }) + clearDateInputs (inputs) { + inputs.forEach((input) => { input.value = '' }) } } diff --git a/app/frontend/controllers/filter_layout_controller.js b/app/frontend/controllers/filter_layout_controller.js index a44ba5c45..a0e439af3 100644 --- a/app/frontend/controllers/filter_layout_controller.js +++ b/app/frontend/controllers/filter_layout_controller.js @@ -1,8 +1,8 @@ -import { Controller } from "@hotwired/stimulus"; -import { FilterToggle } from "../modules/filter_toggle.js" +import { Controller } from '@hotwired/stimulus' +import { FilterToggle } from '../modules/filter_toggle.js' export default class extends Controller { - connect() { + connect () { const filterToggle = new FilterToggle({ bigModeMediaQuery: '(min-width: 48.0625em)', closeButton: { diff --git a/app/frontend/controllers/govukfrontend_controller.js b/app/frontend/controllers/govukfrontend_controller.js index 9fdc001af..88edee293 100644 --- a/app/frontend/controllers/govukfrontend_controller.js +++ b/app/frontend/controllers/govukfrontend_controller.js @@ -1,9 +1,9 @@ -import GOVUKFrontend from "govuk-frontend"; -import GOVUKPrototypeComponents from "govuk-prototype-components" -import { Controller } from "@hotwired/stimulus"; +import GOVUKFrontend from 'govuk-frontend' +import GOVUKPrototypeComponents from 'govuk-prototype-components' +import { Controller } from '@hotwired/stimulus' export default class extends Controller { - connect() { + connect () { GOVUKFrontend.initAll() GOVUKPrototypeComponents.initAll() } diff --git a/app/frontend/controllers/index.js b/app/frontend/controllers/index.js index d182110a0..ece539d15 100644 --- a/app/frontend/controllers/index.js +++ b/app/frontend/controllers/index.js @@ -1,22 +1,22 @@ // Load all the controllers within this directory and all subdirectories. // Controller files must be named *_controller.js. -import { application } from "./application" +import { application } from './application' -import AccessibleAutocompleteController from "./accessible_autocomplete_controller.js" -application.register("accessible-autocomplete", AccessibleAutocompleteController) +import AccessibleAutocompleteController from './accessible_autocomplete_controller.js' -import ConditionalFilterController from "./conditional_filter_controller.js" -application.register("conditional-filter", ConditionalFilterController) +import ConditionalFilterController from './conditional_filter_controller.js' -import ConditionalQuestionController from "./conditional_question_controller.js" -application.register("conditional-question", ConditionalQuestionController) +import ConditionalQuestionController from './conditional_question_controller.js' -import GovukfrontendController from "./govukfrontend_controller.js" -application.register("govukfrontend", GovukfrontendController) +import GovukfrontendController from './govukfrontend_controller.js' -import NumericQuestionController from "./numeric_question_controller.js" -application.register("numeric-question", NumericQuestionController) +import NumericQuestionController from './numeric_question_controller.js' -import FilterLayoutController from "./filter_layout_controller.js" -application.register("filter-layout", FilterLayoutController) +import FilterLayoutController from './filter_layout_controller.js' +application.register('accessible-autocomplete', AccessibleAutocompleteController) +application.register('conditional-filter', ConditionalFilterController) +application.register('conditional-question', ConditionalQuestionController) +application.register('govukfrontend', GovukfrontendController) +application.register('numeric-question', NumericQuestionController) +application.register('filter-layout', FilterLayoutController) diff --git a/app/frontend/controllers/numeric_question_controller.js b/app/frontend/controllers/numeric_question_controller.js index 391bec630..4dad07436 100644 --- a/app/frontend/controllers/numeric_question_controller.js +++ b/app/frontend/controllers/numeric_question_controller.js @@ -1,27 +1,26 @@ -import { Controller } from "@hotwired/stimulus" +import { Controller } from '@hotwired/stimulus' export default class extends Controller { - connect() { - const affectedField = this.element.dataset.target; - const targetQuestion = affectedField.split("case-log-")[1].split("-field")[0] - const div = document.getElementById(targetQuestion + "_div"); - div.style.display = "block"; + connect () { + const affectedField = this.element.dataset.target + const targetQuestion = affectedField.split('case-log-')[1].split('-field')[0] + const div = document.getElementById(targetQuestion + '_div') + div.style.display = 'block' } - calculateFields() { - const affectedField = this.element.dataset.target; - const fieldsToAdd = JSON.parse(this.element.dataset.calculated).map(x => `case-log-${x.replaceAll("_","-")}-field`); - const valuesToAdd = fieldsToAdd.map(x => getFieldValue(x)).filter(x => x); - const newValue = valuesToAdd.map(x => parseFloat(x)).reduce((a, b) => a + b, 0).toFixed(2); - const elementToUpdate = document.getElementById(affectedField); - elementToUpdate.value = newValue; + calculateFields () { + const affectedField = this.element.dataset.target + const fieldsToAdd = JSON.parse(this.element.dataset.calculated).map(x => `case-log-${x.replaceAll('_', '-')}-field`) + const valuesToAdd = fieldsToAdd.map(x => getFieldValue(x)).filter(x => x) + const newValue = valuesToAdd.map(x => parseFloat(x)).reduce((a, b) => a + b, 0).toFixed(2) + const elementToUpdate = document.getElementById(affectedField) + elementToUpdate.value = newValue } +} +const getFieldValue = (field) => { + const elementFieldToAdd = document.getElementById(field) + if (elementFieldToAdd) { + return elementFieldToAdd.value } - let getFieldValue = (field) => { - const elementFieldToAdd= document.getElementById(field) - if (elementFieldToAdd) { - return elementFieldToAdd.value - } - return document.getElementById(`${field}-error`).value + return document.getElementById(`${field}-error`).value } - diff --git a/app/frontend/modules/filter_toggle.js b/app/frontend/modules/filter_toggle.js index 917fed62b..e65a0e785 100644 --- a/app/frontend/modules/filter_toggle.js +++ b/app/frontend/modules/filter_toggle.js @@ -25,7 +25,7 @@ export class FilterToggle { } enableSmallMode () { - this.options.filter.container.setAttribute("tabindex", "-1") + this.options.filter.container.setAttribute('tabindex', '-1') this.hideMenu() this.addMenuButton() this.addCloseButton() @@ -33,8 +33,8 @@ export class FilterToggle { addCloseButton () { if (this.options.closeButton) { - this.closeButton = document.createElement("button") - this.closeButton.classList.add("app-filter__close") + this.closeButton = document.createElement('button') + this.closeButton.classList.add('app-filter__close') this.closeButton.innerText = this.options.closeButton.text this.closeButton.type = 'button' this.closeButton.addEventListener('click', this.onCloseClick.bind(this)) @@ -56,13 +56,13 @@ export class FilterToggle { } addMenuButton () { - this.menuButton = document.createElement("button") - this.menuButton.setAttribute("aria-expanded", "false") - this.menuButton.setAttribute("aria-has-popup", "true") - this.menuButton.classList.add("govuk-button", this.options.toggleButton.classes, "app-filter-toggle__button") + this.menuButton = document.createElement('button') + this.menuButton.setAttribute('aria-expanded', 'false') + this.menuButton.setAttribute('aria-has-popup', 'true') + this.menuButton.classList.add('govuk-button', this.options.toggleButton.classes, 'app-filter-toggle__button') this.menuButton.innerText = this.options.toggleButton.showText - this.menuButton.type = "button" - this.menuButton.addEventListener("click", this.onMenuButtonClick.bind(this)) + this.menuButton.type = 'button' + this.menuButton.addEventListener('click', this.onMenuButtonClick.bind(this)) this.options.toggleButton.container.prepend(this.menuButton) } @@ -76,18 +76,18 @@ export class FilterToggle { hideMenu () { if (this.menuButton) { - this.menuButton.setAttribute("aria-expanded", "false") + this.menuButton.setAttribute('aria-expanded', 'false') this.menuButton.innerText = this.options.toggleButton.showText } - this.options.filter.container.setAttribute("hidden", true) + this.options.filter.container.setAttribute('hidden', true) } showMenu () { if (this.menuButton) { - this.menuButton.setAttribute("aria-expanded", "true") + this.menuButton.setAttribute('aria-expanded', 'true') this.menuButton.innerText = this.options.toggleButton.hideText } - this.options.filter.container.removeAttribute("hidden") + this.options.filter.container.removeAttribute('hidden') } onMenuButtonClick () { diff --git a/babel.config.js b/babel.config.js index c6ecf4618..544693e50 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,9 +1,9 @@ -module.exports = function(api) { - var validEnv = ['development', 'test', 'production'] - var currentEnv = api.env() - var isDevelopmentEnv = api.env('development') - var isProductionEnv = api.env('production') - var isTestEnv = api.env('test') +module.exports = function (api) { + const validEnv = ['development', 'test', 'production'] + const currentEnv = api.env() + const isDevelopmentEnv = api.env('development') + const isProductionEnv = api.env('production') + const isTestEnv = api.env('test') if (!validEnv.includes(currentEnv)) { throw new Error( diff --git a/package.json b/package.json index aeafeea02..f894445e4 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,11 @@ "last 1 safari version" ] }, + "standard": { + "ignore": [ + "app/frontend/vendor/*.js" + ] + }, "stylelint": { "extends": "stylelint-config-gds/scss" }, diff --git a/webpack.config.js b/webpack.config.js index c22a0a141..c027f2dd2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,18 +1,18 @@ -const path = require("path") -const webpack = require("webpack") +const path = require('node:path') +const webpack = require('webpack') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts') -const CopyPlugin = require("copy-webpack-plugin"); +const CopyPlugin = require('copy-webpack-plugin') const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production' module.exports = { mode, - devtool: "source-map", + devtool: 'source-map', entry: { application: [ - "./app/frontend/application.js", + './app/frontend/application.js' ] }, module: { @@ -24,9 +24,9 @@ module.exports = { path.resolve(__dirname, 'node_modules/@stimulus/polyfills'), path.resolve(__dirname, 'node_modules/@rails/actioncable'), path.resolve(__dirname, 'node_modules/chartjs'), - path.resolve(__dirname, 'app/frontend'), + path.resolve(__dirname, 'app/frontend') ], - use: ['babel-loader'], + use: ['babel-loader'] }, { test: /\.(png|jpe?g|gif|eot|woff|woff2|ttf|svg|ico)$/i, @@ -34,9 +34,9 @@ module.exports = { }, { test: /\.(scss|css)/i, - use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], + use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] } - ], + ] }, resolve: { alias: { @@ -46,11 +46,11 @@ module.exports = { modules: ['node_modules', 'node_modules/govuk-frontend/govuk'] }, output: { - filename: "[name].js", + filename: '[name].js', // we must set publicPath to an empty value to override the default of // auto which doesn't work in IE11 publicPath: '', - path: path.resolve(__dirname, "app/assets/builds"), + path: path.resolve(__dirname, 'app/assets/builds') }, plugins: [ new RemoveEmptyScriptsPlugin(), @@ -58,12 +58,12 @@ module.exports = { new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }), new CopyPlugin({ patterns: [ - { from: "node_modules/govuk-frontend/govuk/assets/images", to: "images" }, - { from: "node_modules/govuk-frontend/govuk/assets/fonts", to: "fonts" }, - { from: "node_modules/html5shiv/dist/html5shiv.min.js", to: "vendor" }, - { from: "app/frontend/vendor/outerHTML.js", to: "vendor" }, - { from: "app/frontend/vendor/polyfill-output-value.js", to: "vendor" } - ], + { from: 'node_modules/govuk-frontend/govuk/assets/images', to: 'images' }, + { from: 'node_modules/govuk-frontend/govuk/assets/fonts', to: 'fonts' }, + { from: 'node_modules/html5shiv/dist/html5shiv.min.js', to: 'vendor' }, + { from: 'app/frontend/vendor/outerHTML.js', to: 'vendor' }, + { from: 'app/frontend/vendor/polyfill-output-value.js', to: 'vendor' } + ] }) ] }