The repeater!

.eslintrc.js

@@ -16,4 +16,12 @@ module.exports = {
     'security/detect-non-literal-require': 'off',
     'security/detect-non-literal-fs-filename': 'off',
   },
+  overrides: [
+    {
+      files: ["routes/*/client.js", "assets/js/*.js"],
+      settings: {
+        "import/resolver": "webpack",
+      },
+    }
+  ],
 }

app.js

@@ -9,7 +9,7 @@ const helmet = require('helmet')
 const path = require('path')
 const cookieSession = require('cookie-session')
 const cookieSessionConfig = require('./config/cookieSession.config')
-const { hasData } = require('./utils')
+const { hasData, contextMiddleware } = require('./utils')
 const { addNunjucksFilters } = require('./filters')
 const csp = require('./config/csp.config')
 const csrf = require('csurf')
@@ -25,7 +25,7 @@ const app = express()
 
 // general app configuration.
 app.use(express.json())
-app.use(express.urlencoded({ extended: false }))
+app.use(express.urlencoded({ extended: true }))
 app.use(cookieParser(process.env.app_session_secret))
 app.use(require('./config/i18n.config').init)
 
@@ -70,6 +70,9 @@ app.locals.hasData = hasData
 app.locals.basedir = path.join(__dirname, './views')
 app.set('views', [path.join(__dirname, './views')])
 
+// add in helpers for scoped data contexts (used in the repeater)
+app.use(contextMiddleware)
+
 app.routes = configRoutes(app, routes, locales)
 
 // view engine setup

assets/js/button-link.js

@@ -0,0 +1,15 @@
+// allow for certain links to be activated by pressing the space bar,
+// for keyboard-navigating users.
+//
+// we are using a single global listener because button-link elements
+// may be added and removed from the DOM dynamically.
+document.addEventListener('keydown', (e) => {
+  // check when we press the spacebar on a button-link element
+  if (e.keyCode !== 32) return
+  if (!e.target.classList.contains('button-link')) return
+
+  // trigger the click handlers instead of entering a space
+  e.preventDefault()
+  e.target.click()
+  return false
+})

assets/js/details-polyfill-detect.js

@@ -0,0 +1,5 @@
+if (typeof Promise !== "function" &&
+    document.querySelector('details') !== null) {
+  const script = '<script src="/js/details-element-polyfill.js"><\/script>'
+  document.write(script) // lgtm[js/eval-like-call]
+}

assets/js/repeater.js

@@ -0,0 +1,209 @@
+export const Repeater = (() => {
+  "use strict"
+
+  // state for the module
+  let repeatedSets
+
+  // mapping things that aren't quite arrays
+  const map = (arr, fn) => Array.prototype.map.call(arr, fn)
+  const query = (q, el=document) => el.querySelectorAll(q)
+
+  const indexBy = (key, arr) => {
+    const out = {}
+    arr.forEach(x => { out[x[key]] = x })
+    return out
+  }
+
+  // a Block is the largest grouping in the repeater. It contains all the repeated
+  // instances.
+  class Block {
+    constructor(el) {
+      this.name = el.id
+      this.container = el
+
+      this.instances = map(query('.repeater-instance', el), (fieldset, i) => {
+        const instance = new Instance(this, fieldset, i)
+        instance.reindex(i)
+        return instance
+      })
+    }
+
+    setupListeners() {
+      // we use one global listener for removal, because the repeat links may
+      // get added and removed from the DOM, and this means we don't have to
+      // re-register the event listeners when we clone the nodes.
+      this.container.addEventListener('click', (evt) => {
+        if (!evt.target.classList.contains('remove-repeat-link')) return
+        evt.preventDefault()
+        const instance = instanceFor(evt.target)
+        instance && instance.remove()
+      })
+
+      return this
+    }
+
+    repeat() {
+      if (!this.instances.length) throw new Error(`empty instances, can't repeat!`)
+
+      const newIndex = this.instances.length
+      const newEl = this.instances[0].el.cloneNode(true)
+      const newInstance = new Instance(this, newEl, newIndex)
+      newInstance.reindex(newIndex, true)
+      this.container.appendChild(newEl)
+      this.instances.push(newInstance)
+      newInstance.focus()
+      return newInstance
+    }
+  }
+
+  const reindexValue = (str, index) => {
+    // it's always going to be the first [0] or [1] or etc.
+    return str.replace(/\[\d+\]/, `[${index}]`)
+  }
+
+  const reindexProp = (el, prop, index) => {
+    const current = el.getAttribute(prop)
+    if (!current) return
+    el.setAttribute(prop, reindexValue(current, index))
+  }
+
+  const clearField = (control) => {
+    if (control.tagName === 'textarea') {
+      control.innerText = ''
+    }
+    else if (control.type === 'radio' || control.type === 'checkbox') {
+      control.checked = false
+    }
+    else {
+      control.value = null
+    }
+  }
+
+  // one instance of a repeater
+  class Instance {
+    // private functions
+    constructor(block, el, index) {
+      this.block = block
+      this.el = el
+      this.index = index
+    }
+
+    reindex(newIndex, clear) {
+      this.index = newIndex
+
+      reindexProp(this.el, 'name', newIndex)
+      this.el.dataset.index = newIndex
+
+      query('input,textarea,select', this.el).forEach(control => {
+        reindexProp(control, 'name', newIndex)
+        reindexProp(control, 'id', newIndex)
+        reindexProp(control, 'aria-describedby', newIndex)
+        if (clear) clearField(control)
+      })
+
+      query('label', this.el).forEach(label => {
+        reindexProp(label, 'for', newIndex)
+      })
+
+      query('.validation-message', this.el).forEach(error => {
+        reindexProp(error, 'id', newIndex)
+      })
+
+      query('.remove-repeat-link', this.el).forEach(link => {
+        reindexProp(link, 'id', newIndex)
+      })
+
+      // special elements that show the user which number they're looking at
+      query('.repeat-number', this.el).forEach(el => {
+        el.innerText = `${newIndex+1}`
+      })
+
+      return this
+    }
+
+    clear() {
+      let first
+      query('input,textarea,select', this.el).forEach(el => {
+        if (!first) first = el
+        clearField(el)
+      })
+
+      if (first) first.focus()
+      return this
+    }
+
+    focus() {
+      const first = this.el.querySelector('input,textarea,select')
+      if (first) first.focus()
+    }
+
+    remove() {
+      // if we're the last one, we should just empty the fields
+      if (this.block.instances.length === 1) return this.clear()
+
+      // remove the DOM element
+      this.el.parentElement.removeChild(this.el)
+
+      // reindex everything that comes after, updating name and label attributes
+      for (let i = this.index+1; i < this.block.instances.length; i += 1) {
+        this.block.instances[i].reindex(i - 1)
+      }
+
+      // remove from the list of instances
+      this.block.instances.splice(this.index, 1)
+
+      // focus the next fieldset if it exists, otherwise the last one
+      const adjacent = this.block.instances[this.index] ||
+                       this.block.instances[this.index-1]
+
+      if (adjacent) adjacent.focus()
+
+      return this
+    }
+
+  }
+
+  const repeat = (name) => {
+    repeatedSets[name] && repeatedSets[name].repeat()
+  }
+
+  const instanceFor = (el) => {
+    const fieldset = el.closest('.repeater-instance')
+    if (!fieldset) return null
+
+    const match = fieldset.name.match(/^\w+/)
+    if (!match) return null
+
+    const blockName = match[0]
+    const index = parseInt(fieldset.dataset.index)
+
+    const block = repeatedSets[blockName]
+    if (!block) return null
+
+    return block.instances[index]
+  }
+
+  const init = () => {
+    repeatedSets = indexBy('name',
+      map(query('.repeater'), (el) => {
+        return new Block(el).setupListeners()
+      }))
+
+    // repeat links are expected to be *outside* the repeater, so can manage
+    // their own event listeners.
+    query('.repeat-link').forEach(link => {
+      link.addEventListener('click', (evt) => {
+        evt.preventDefault()
+        repeat(link.dataset.target)
+      })
+    })
+  }
+
+  return {
+    repeat: repeat,
+    init: init
+  }
+})()
+
+// we are run at the bottom of the page, all necessary elements should have loaded
+Repeater.init()

assets/scss/components/_repeater.scss

@@ -0,0 +1,26 @@
+.repeater {
+}
+
+.repeater-instance {
+  padding: 10px 20px;
+  border-left: 5px solid gray;
+  border-top: 5px solid gray;
+
+  > legend {
+    padding: 10px 15px;
+  }
+}
+
+.remove-repeat-link,
+.repeat-link {
+  width: 25%;
+  padding: 5px;
+}
+
+.remove-repeat-link {
+  background-color: red;
+}
+
+.repeat-link {
+  background-color: green;
+}

assets/scss/styles.scss

@@ -17,4 +17,5 @@
 @import './components/_breakdown-table';
 @import './components/_phase-banner';
 @import './components/_input-file';
-@import './components/skip-link';
+@import './components/_repeater';
+@import './components/skip-link';

config/routes.config.js

@@ -2,6 +2,7 @@
 const routes = [
   { name: 'start', path: { en: '/start', fr: '/debut' } },
   { name: 'personal', path: { en: '/personal', fr: '/personnel' } },
+  { name: 'addresses', path: { en: '/addresses', fr: '/addresses' } },
   { name: 'confirmation', path: '/confirmation' },
 ]
 

filters/error.helpers.js

@@ -0,0 +1,9 @@
+const errorHelpers = env => {
+  env.addFilter('errorToName', (str) => {
+    return str.replace(/[.](\w+)/g, '[$1]')
+  })
+}
+
+module.exports = {
+  errorHelpers
+}

filters/index.js

@@ -1,7 +1,9 @@
 const { spreadParams } = require('./spread.params')
+const { errorHelpers } = require('./error.helpers')
 
 const addNunjucksFilters = env => {
   spreadParams(env)
+  errorHelpers(env)
 }
 
 module.exports = {

locales/en.json

@@ -48,8 +48,21 @@
   "start.submit": "Let's Go",
   "start.title": "Node Starter App",
   "wordmark.alt": "Symbol of the Government of Canada",
-  "caught this error": "caught this error",
-  "Cannot read property 'match' of undefined": "Cannot read property 'match' of undefined",
+  "required": "required",
   "Government of Canada": "Government of Canada",
-  "required": "required"
+  "addresses.title": "Enter all addresses from the last 2 years",
+  "addresses.intro": "This information is needed because lorem ipsum dolor sit amet",
+  "addresses.number": "Address #%s",
+  "addresses.street": "Street address",
+  "addresses.type": "Address Type",
+  "addresses.type.house": "House",
+  "addresses.type.apartment": "Apartment",
+  "addresses.type.other": "Other",
+  "addresses.features": "Features",
+  "addresses.features.laundry": "Laundry",
+  "addresses.features.kitchen": "Kitchen",
+  "addresses.features.yard": "Yard",
+  "addresses.remove": "[- remove]",
+  "addresses.add-another": "[+ add another]",
+  "errors.address.length": "Please fill in an address"
 }