mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-08 04:13:41 -05:00
77f7d1453c
We added domdiff to replace the DiffDOM library
here:
87f54d1e88
DiffDOM had updated its code to be written to the
ECMAScript 6 (ES6) standard and so needed extra
work to work with the older browsers in our
support matrix. This was recorded as an issue
here:
https://www.pivotaltracker.com/n/projects/1443052/stories/165380360
Domdiff didn't work (see below for more details)
so this replaces it with the morphdom library.
Morphdom supports the same browsers as us and is
relied on by a range of large open source
projects:
https://github.com/patrick-steele-idem/morphdom#what-projects-are-using-morphdom
It was tricky to find alternatives to DiffDOM so
if we have to source alternatives in future, other
options could be:
- https://github.com/choojs/nanomorph
- https://diffhtml.org/index.html (using its
outerHTML method)
Why domdiff didn't work
Turns out that domdiff was replacing the page HTML
with the HTML from the AJAX response every time,
not just when they differed. This isn't a bug.
Domdiff is bare bones enough that it compares old
DOM nodes to new DOM nodes with ===. With our
code, this always results to false because our new
nodes are made from HTML strings from AJAX
response so are never the same node as the old
one.
80 lines
2.7 KiB
JavaScript
80 lines
2.7 KiB
JavaScript
// JS Module used to combine all the JS modules used in the application into a single entry point,
|
|
// a bit like `app/__init__` in the Flask app.
|
|
//
|
|
// When processed by a bundler, this is turned into a Immediately Invoked Function Expression (IIFE)
|
|
// The IIFE format allows it to run in browsers that don't support JS Modules.
|
|
//
|
|
// Exported items will be added to the window.GOVUK namespace.
|
|
// For example, `export { Frontend }` will assign `Frontend` to `window.Frontend`
|
|
|
|
// GOVUK Frontend modules
|
|
import Header from 'govuk-frontend/components/header/header';
|
|
import Details from 'govuk-frontend/components/details/details';
|
|
import Button from 'govuk-frontend/components/button/button';
|
|
import Radios from 'govuk-frontend/components/radios/radios';
|
|
|
|
// Modules from 3rd party vendors
|
|
import morphdom from 'morphdom';
|
|
|
|
/**
|
|
* TODO: Ideally this would be a NodeList.prototype.forEach polyfill
|
|
* This seems to fail in IE8, requires more investigation.
|
|
* See: https://github.com/imagitama/nodelist-foreach-polyfill
|
|
*/
|
|
function nodeListForEach (nodes, callback) {
|
|
if (window.NodeList.prototype.forEach) {
|
|
return nodes.forEach(callback)
|
|
}
|
|
for (var i = 0; i < nodes.length; i++) {
|
|
callback.call(window, nodes[i], i, nodes);
|
|
}
|
|
}
|
|
|
|
// Copy of the initAll function from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/all.js
|
|
// except it only includes, and initialises, the components used by this application.
|
|
function initAll (options) {
|
|
// Set the options to an empty object by default if no options are passed.
|
|
options = typeof options !== 'undefined' ? options : {}
|
|
|
|
// Allow the user to initialise GOV.UK Frontend in only certain sections of the page
|
|
// Defaults to the entire document if nothing is set.
|
|
var scope = typeof options.scope !== 'undefined' ? options.scope : document
|
|
|
|
// Find all buttons with [role=button] on the scope to enhance.
|
|
new Button(scope).init()
|
|
|
|
// Find all global details elements to enhance.
|
|
var $details = scope.querySelectorAll('details')
|
|
nodeListForEach($details, function ($detail) {
|
|
new Details($detail).init()
|
|
})
|
|
|
|
// Find first header module to enhance.
|
|
var $toggleButton = scope.querySelector('[data-module="header"]')
|
|
new Header($toggleButton).init()
|
|
|
|
var $radios = scope.querySelectorAll('[data-module="radios"]')
|
|
nodeListForEach($radios, function ($radio) {
|
|
new Radios($radio).init()
|
|
})
|
|
}
|
|
|
|
// Create separate namespace for GOVUK Frontend.
|
|
var Frontend = {
|
|
"Header": Header,
|
|
"Details": Details,
|
|
"Button": Button,
|
|
"initAll": initAll
|
|
}
|
|
|
|
var vendor = {
|
|
"morphdom": morphdom
|
|
}
|
|
|
|
// The exported object will be assigned to window.GOVUK in our production code
|
|
// (bundled into an IIFE by RollupJS)
|
|
export {
|
|
Frontend,
|
|
vendor
|
|
}
|