From 45bd389a529220c37a7f1eaa3da55d869cdda87c Mon Sep 17 00:00:00 2001 From: kiddhustle Date: Tue, 29 Mar 2022 09:43:52 +0100 Subject: [PATCH] CLDC-1084: IE11 output tag support --- app/frontend/vendor/outerHTML.js | 75 ++++++++++++++++++++ app/frontend/vendor/polyfill-output-value.js | 14 ++++ app/views/layouts/application.html.erb | 7 ++ babel.config.js | 2 +- package.json | 1 + webpack.config.js | 6 +- yarn.lock | 5 ++ 7 files changed, 108 insertions(+), 2 deletions(-) create mode 100644 app/frontend/vendor/outerHTML.js create mode 100644 app/frontend/vendor/polyfill-output-value.js diff --git a/app/frontend/vendor/outerHTML.js b/app/frontend/vendor/outerHTML.js new file mode 100644 index 000000000..11398a71f --- /dev/null +++ b/app/frontend/vendor/outerHTML.js @@ -0,0 +1,75 @@ +/* + * outerHTML.js + * Cross-browser full HTMLElement.outerHTML implementation. + * + * 2011-11-14 + * + * By Eli Grey, http://eligrey.com + * Public Domain. + * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. + */ + +if (typeof document !== "undefined" && !("outerHTML" in document.createElementNS("http://www.w3.org/1999/xhtml", "_"))) { + +(function(view) { +"use strict"; + +var + container = document.createElementNS("http://www.w3.org/1999/xhtml", "_") + , elem_proto = (view.HTMLElement || view.Element).prototype + , xml_serializer = new XMLSerializer + , outerHTML_getter = function() { + var + node = this + , html + ; + if (document.xmlVersion) { + return xml_serializer.serializeToString(node); + } else { + container.appendChild(node.cloneNode(false)); + html = container.innerHTML.replace("><", ">" + node.innerHTML + "<"); + container.innerHTML = ""; + return html; + } + } + , outerHTML_setter = function(html) { + var + node = this + , parent = node.parentNode + , child + ; + if (parent === null) { + DOMException.code = DOMException.NOT_FOUND_ERR; + throw DOMException; + } + container.innerHTML = html; + while ((child = container.firstChild)) { + parent.insertBefore(child, node); + } + parent.removeChild(node); + } +; + +if (Object.defineProperty) { + var outerHTML_prop_desc = { + get: outerHTML_getter + , set: outerHTML_setter + , enumerable: true + , configurable: true + }; + try { + Object.defineProperty(elem_proto, "outerHTML", outerHTML_prop_desc); + } catch (ex) { // IE 8 doesn't support enumerable:true + if (ex.number === -0x7FF5EC54) { + outerHTML_prop_desc.enumerable = false; + Object.defineProperty(elem_proto, "outerHTML", outerHTML_prop_desc); + } + } +} else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__) { + elem_proto.__defineGetter__("outerHTML", outerHTML_getter); + elem_proto.__defineSetter__("outerHTML", outerHTML_setter); +} + +}(self)); + +} \ No newline at end of file diff --git a/app/frontend/vendor/polyfill-output-value.js b/app/frontend/vendor/polyfill-output-value.js new file mode 100644 index 000000000..70c9cbbf2 --- /dev/null +++ b/app/frontend/vendor/polyfill-output-value.js @@ -0,0 +1,14 @@ +if (window.HTMLOutputElement === undefined) { + Object.defineProperty(HTMLUnknownElement.prototype, 'value', { + get: function () { + if (this.tagName === 'OUTPUT') { + return this.textContent; + } + }, + set: function (newValue) { + if (this.tagName === 'OUTPUT') { + this.textContent = newValue; + } + } + }); + } \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 45aaaa511..f47c55cac 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -14,6 +14,13 @@ <%= favicon_link_tag asset_path('images/govuk-apple-touch-icon-167x167.png'), rel: 'apple-touch-icon', type: 'image/png', size: '167x167' %> <%= favicon_link_tag asset_path('images/govuk-apple-touch-icon-180x180.png'), rel: 'apple-touch-icon', type: 'image/png', size: '180x180' %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> + <%= javascript_include_tag "vendor/html5shiv.min.js" %> + <%= javascript_tag do -%> + window.html5.elements = 'output'; + html5.shivDocument(document); + <% end -%> + <%= javascript_include_tag "vendor/polyfill-output-value.js" %> + <%= javascript_include_tag "vendor/outerHTML.js" %> <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %> <% if content_for?(:head) %> diff --git a/babel.config.js b/babel.config.js index b9dca487c..c6ecf4618 100644 --- a/babel.config.js +++ b/babel.config.js @@ -25,7 +25,7 @@ module.exports = function(api) { { forceAllTransforms: true, useBuiltIns: 'entry', - corejs: 3, + corejs: '3.21.1', modules: false, exclude: ['transform-typeof-symbol'] } diff --git a/package.json b/package.json index ccd2bf0e7..e710c0e30 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "custom-event-polyfill": "^1.0.7", "file-loader": "^6.2.0", "govuk-frontend": "^4.0.1", + "html5shiv": "^3.7.3", "intersection-observer": "^0.12.0", "mini-css-extract-plugin": "^2.6.0", "regenerator-runtime": "^0.13.9", diff --git a/webpack.config.js b/webpack.config.js index 5e48d8886..85c9af51a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -26,9 +26,10 @@ module.exports = { include: [ path.resolve(__dirname, 'node_modules/@hotwired/stimulus'), path.resolve(__dirname, 'node_modules/@stimulus/polyfills'), + path.resolve(__dirname, 'node_modules/@hotwired/turbo'), path.resolve(__dirname, 'node_modules/@rails/actioncable'), path.resolve(__dirname, 'node_modules/chartjs'), - path.resolve(__dirname, 'app/frontend/controllers'), + path.resolve(__dirname, 'app/frontend'), ], use: ['babel-loader'], }, @@ -60,6 +61,9 @@ module.exports = { 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" } ], }), new webpack.ProvidePlugin({ diff --git a/yarn.lock b/yarn.lock index b6e936ba9..8df66774c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1842,6 +1842,11 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +html5shiv@^3.7.3: + version "3.7.3" + resolved "https://registry.yarnpkg.com/html5shiv/-/html5shiv-3.7.3.tgz#d78a84a367bcb9a710100d57802c387b084631d2" + integrity sha1-14qEo2e8uacQEA1XgCw4ewhGMdI= + human-signals@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"