diff options
Diffstat (limited to 'app/assets/javascripts/commons')
7 files changed, 84 insertions, 6 deletions
diff --git a/app/assets/javascripts/commons/polyfills.js b/app/assets/javascripts/commons/polyfills.js index 5e04b0573d2..fdeb64a7644 100644 --- a/app/assets/javascripts/commons/polyfills.js +++ b/app/assets/javascripts/commons/polyfills.js @@ -1,5 +1,24 @@ // Browser polyfills + +/** + * Polyfill: fetch + * @what https://fetch.spec.whatwg.org/ + * @why Because Apollo GraphQL client relies on fetch + * @browsers Internet Explorer 11 + * @see https://caniuse.com/#feat=fetch + */ +import 'unfetch/polyfill/index'; + +/** + * Polyfill: FormData APIs + * @what delete(), get(), getAll(), has(), set(), entries(), keys(), values(), + * and support for for...of + * @why Because Apollo GraphQL client relies on fetch + * @browsers Internet Explorer 11, Edge < 18 + * @see https://caniuse.com/#feat=mdn-api_formdata and subfeatures + */ import 'formdata-polyfill'; + import './polyfills/custom_event'; import './polyfills/element'; import './polyfills/event'; diff --git a/app/assets/javascripts/commons/polyfills/custom_event.js b/app/assets/javascripts/commons/polyfills/custom_event.js index db51ade61ae..6b14eff6f05 100644 --- a/app/assets/javascripts/commons/polyfills/custom_event.js +++ b/app/assets/javascripts/commons/polyfills/custom_event.js @@ -1,3 +1,10 @@ +/** + * Polyfill: CustomEvent constructor + * @what new CustomEvent() + * @why Certain features, e.g. notes utilize this + * @browsers Internet Explorer 11 + * @see https://caniuse.com/#feat=customevent + */ if (typeof window.CustomEvent !== 'function') { window.CustomEvent = function CustomEvent(event, params) { const evt = document.createEvent('CustomEvent'); diff --git a/app/assets/javascripts/commons/polyfills/element.js b/app/assets/javascripts/commons/polyfills/element.js index dde5e8f54f9..b13ceccf511 100644 --- a/app/assets/javascripts/commons/polyfills/element.js +++ b/app/assets/javascripts/commons/polyfills/element.js @@ -1,6 +1,19 @@ -// polyfill Element.classList and DOMTokenList with classList.js +/** + * Polyfill + * @what Element.classList + * @why In order to align browser features + * @browsers Internet Explorer 11 + * @see https://caniuse.com/#feat=classlist + */ import 'classlist-polyfill'; +/** + * Polyfill + * @what Element.closest + * @why In order to align browser features + * @browsers Internet Explorer 11 + * @see https://caniuse.com/#feat=element-closest + */ Element.prototype.closest = Element.prototype.closest || function closest(selector, selectedElement = this) { @@ -10,6 +23,13 @@ Element.prototype.closest = : Element.prototype.closest(selector, selectedElement.parentElement); }; +/** + * Polyfill + * @what Element.matches + * @why In order to align browser features + * @browsers Internet Explorer 11 + * @see https://caniuse.com/#feat=mdn-api_element_matches + */ Element.prototype.matches = Element.prototype.matches || Element.prototype.matchesSelector || @@ -26,7 +46,15 @@ Element.prototype.matches = return i > -1; }; -// From the polyfill on MDN, https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove#Polyfill +/** + * Polyfill + * @what ChildNode.remove, Element.remove, CharacterData.remove, DocumentType.remove + * @why In order to align browser features + * @browsers Internet Explorer 11 + * @see https://caniuse.com/#feat=childnode-remove + * + * From the polyfill on MDN, https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove#Polyfill + */ (arr => { arr.forEach(item => { if (Object.prototype.hasOwnProperty.call(item, 'remove')) { diff --git a/app/assets/javascripts/commons/polyfills/event.js b/app/assets/javascripts/commons/polyfills/event.js index ff5b9a1982f..543dd5f9a93 100644 --- a/app/assets/javascripts/commons/polyfills/event.js +++ b/app/assets/javascripts/commons/polyfills/event.js @@ -1,6 +1,10 @@ /** - * Polyfill for IE11 support. - * new Event() is not supported by IE11. + * Polyfill: Event constructor + * @what new Event() + * @why To align browser support + * @browsers Internet Explorer 11 + * @see https://caniuse.com/#feat=mdn-api_event_event + * * Although `initEvent` is deprecated for modern browsers it is the one supported by IE */ if (typeof window.Event !== 'function') { diff --git a/app/assets/javascripts/commons/polyfills/nodelist.js b/app/assets/javascripts/commons/polyfills/nodelist.js index 3772c94b900..3a9111e64f8 100644 --- a/app/assets/javascripts/commons/polyfills/nodelist.js +++ b/app/assets/javascripts/commons/polyfills/nodelist.js @@ -1,3 +1,10 @@ +/** + * Polyfill + * @what NodeList.forEach + * @why To align browser support + * @browsers Internet Explorer 11 + * @see https://caniuse.com/#feat=mdn-api_nodelist_foreach + */ if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = function forEach(callback, thisArg = window) { for (let i = 0; i < this.length; i += 1) { diff --git a/app/assets/javascripts/commons/polyfills/request_idle_callback.js b/app/assets/javascripts/commons/polyfills/request_idle_callback.js index 2356569d06e..51dc82e593a 100644 --- a/app/assets/javascripts/commons/polyfills/request_idle_callback.js +++ b/app/assets/javascripts/commons/polyfills/request_idle_callback.js @@ -1,3 +1,10 @@ +/** + * Polyfill + * @what requestIdleCallback + * @why To align browser features + * @browsers Safari (all versions), Internet Explorer 11 + * @see https://caniuse.com/#feat=requestidlecallback + */ window.requestIdleCallback = window.requestIdleCallback || function requestShim(cb) { diff --git a/app/assets/javascripts/commons/polyfills/svg.js b/app/assets/javascripts/commons/polyfills/svg.js index 8648a568f6f..92a8b03fbb4 100644 --- a/app/assets/javascripts/commons/polyfills/svg.js +++ b/app/assets/javascripts/commons/polyfills/svg.js @@ -1,5 +1,11 @@ +/** + * polyfill support for external SVG file references via <use xlink:href> + * @what polyfill support for external SVG file references via <use xlink:href> + * @why This is used in our GitLab SVG icon library + * @browsers Internet Explorer 11 + * @see https://caniuse.com/#feat=mdn-svg_elements_use_external_uri + * @see https//css-tricks.com/svg-use-external-source/ + */ import svg4everybody from 'svg4everybody'; -// polyfill support for external SVG file references via <use xlink:href> -// @see https://css-tricks.com/svg-use-external-source/ svg4everybody(); |