Skip to content

Commit

Permalink
feat(Polyfill): Remove outdated polyfill (#2002)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kotva006
kotva006 authored Apr 26, 2024
1 parent 9201296 commit d9737d4
Show file tree
Hide file tree
Showing 19 changed files with 32 additions and 442 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ The new face of https://www.mbta.com/.

## Supported browsers

We strive to support all users – but the variety of browsers, operating systems and devices available necessitates a more intentioned approach. Generally speaking, Dotcom supports the stable latest releases of all major web browsers (Chrome, Safari, Firefox, Microsoft Edge, and Internet Explorer 11) and platforms (Windows, MacOS, iOS, Android).
We strive to support all users – but the variety of browsers, operating systems and devices available necessitates a more intentioned approach. Generally speaking, Dotcom supports the stable latest releases of all major web browsers (Chrome, Safari, Firefox, Microsoft Edge) and platforms (Windows, MacOS, iOS, Android).
Other interfaces using the underlying engines of the aforementioned browsers – that's WebKit, Blink, Gecko – are not explicitly supported but are expected to function correctly.

From a development standpoint, polyfills and code transforms are implemented via [Babel](https://babeljs.io/docs/en/next/babel-preset-env.html#browserslist-integration) with the target browsers noted in [the site .browserslistrc](assets/.browserslistrc).
Expand Down
2 changes: 0 additions & 2 deletions assets/css/_customer-support.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,6 @@
margin-top: calc(#{$base-spacing} / 2);

img {
// Polyfill for IE object-fit support
font-family: 'object-fit: cover;';
object-fit: contain;
}

Expand Down
4 changes: 2 additions & 2 deletions assets/css/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,7 +387,7 @@ nav.m-menu--mobile {
}
}

@include focus-visible {
&:focus-visible {
background-color: $brand-primary-darkest;
outline: 2px solid $brand-secondary;
}
Expand All @@ -399,7 +399,7 @@ nav.m-menu--mobile {
}
}

@include focus-visible {
&:focus-visible {
background-color: $brand-primary;
}
}
Expand Down
19 changes: 0 additions & 19 deletions assets/css/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,22 +395,3 @@
display: flex;
}
}

// Currently, WebKit has spotty support for :focus-visible. We're using a
// polyfill to work around this, but WebKit also discards any "illegal"
// rules, including when they are comma'd together. Thus, we need to
// manually split the class-based polyfill solution from the
// :focus-visible state selector.
@mixin focus-visible {
&.focus-visible {
// Our CSS optimizer tries to merge any "redundant" rules into a
// single comma'd CSS declaration, thus we add this property to
// "break" the optimization. It shouldn't have any visible effect.
empty-cells: inherit;
@content;
}

&:focus-visible {
@content;
}
}
2 changes: 0 additions & 2 deletions assets/css/_people-grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
}

.people-grid-large img {
font-family: 'object-fit: cover;';
height: 180px;
object-fit: cover;
width: 140px;
Expand All @@ -26,7 +25,6 @@
}

.people-grid-small img {
font-family: 'object-fit: cover;';
height: 155px;
object-fit: cover;
width: 120px;
Expand Down
2 changes: 0 additions & 2 deletions assets/css/_photo-gallery.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

.c-photo-gallery__main-image {
font-family: 'object-fit: contain;'; // IE polyfill
height: 100%;
left: 0;
object-fit: contain;
Expand Down Expand Up @@ -60,7 +59,6 @@
}

.c-photo-gallery__thumbnail {
font-family: 'object-fit: cover;'; // IE polyfill
height: 100%;
left: 0;
object-fit: cover;
Expand Down
1 change: 0 additions & 1 deletion assets/css/_project.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
}

.featured-project-image {
font-family: 'object-fit: cover;'; // IE polyfill
height: 200px;
object-fit: cover;
width: 100%;
Expand Down
249 changes: 0 additions & 249 deletions assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import "bootstrap/dist/js/umd/collapse";
import "bootstrap/dist/js/umd/modal";
import "bootstrap/dist/js/umd/tooltip";
import "bootstrap/dist/js/umd/dropdown";
import objectFitImages from "object-fit-images";
import googleAnalytics from "./google-analytics";
import submitOnEvents from "./submit-on-events";
import collapse from "./collapse";
Expand Down Expand Up @@ -90,233 +89,6 @@ window.nextTick = function nextTick(f) {
window.setTimeout(f, 0);
};

window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(f) {
window.setTimeout(f, 15);
};

// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if (!("previousElementSibling" in document.documentElement)) {
Object.defineProperty(Element.prototype, "previousElementSibling", {
get() {
let e = this.previousSibling;
while (e && e.nodeType !== 1) {
e = e.previousSibling;
}
return e;
}
});
}

if (!("nextElementSibling" in document.documentElement)) {
Object.defineProperty(Element.prototype, "nextElementSibling", {
get() {
let e = this.nextSibling;
while (e && e.nodeType !== 1) {
e = e.nextSibling;
}
return e;
}
});
}

// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {
Array.prototype.map = function(callback /* , thisArg */) {
let T;
let A;
let k;
if (this == null) {
throw new TypeError("this is null or not defined");
}
const O = Object(this);
const len = O.length >>> 0;
if (typeof callback !== "function") {
throw new TypeError(`${callback} is not a function`);
}
if (arguments.length > 1) {
T = arguments[1];
}
A = new Array(len);
// 7. Let k be 0
while (k < len) {
var kValue;
var mappedValue;
if (k in O) {
kValue = O[k];
mappedValue = callback.call(T, kValue, k, O);
A[k] = mappedValue;
}
k++;
}
return A;
};
}

// Production steps of ECMA-262, Edition 6, 22.1.2.1
// Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
if (!Array.from) {
Array.from = (function() {
const toStr = Object.prototype.toString;
const isCallable = function(fn) {
return typeof fn === "function" || toStr.call(fn) === "[object Function]";
};
const toInteger = function(value) {
const number = Number(value);
if (isNaN(number)) {
return 0;
}
if (number === 0 || !isFinite(number)) {
return number;
}
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
};
const maxSafeInteger = Math.pow(2, 53) - 1;
const toLength = function(value) {
const len = toInteger(value);
return Math.min(Math.max(len, 0), maxSafeInteger);
};

// The length property of the from method is 1.
return function from(arrayLike /* , mapFn, thisArg */) {
// 1. Let C be the this value.
const C = this;

// 2. Let items be ToObject(arrayLike).
const items = Object(arrayLike);

// 3. ReturnIfAbrupt(items).
if (arrayLike == null) {
throw new TypeError(
"Array.from requires an array-like object - not null or undefined"
);
}

// 4. If mapfn is undefined, then let mapping be false.
const mapFn = arguments.length > 1 ? arguments[1] : void undefined;
let T;
if (typeof mapFn !== "undefined") {
// 5. else
// 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
if (!isCallable(mapFn)) {
throw new TypeError(
"Array.from: when provided, the second argument must be a function"
);
}

// 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
if (arguments.length > 2) {
T = arguments[2];
}
}

// 10. Let lenValue be Get(items, "length").
// 11. Let len be ToLength(lenValue).
const len = toLength(items.length);

// 13. If IsConstructor(C) is true, then
// 13. a. Let A be the result of calling the [[Construct]] internal method
// of C with an argument list containing the single item len.
// 14. a. Else, Let A be ArrayCreate(len).
const A = isCallable(C) ? Object(new C(len)) : new Array(len);

// 16. Let k be 0.
let k = 0;
// 17. Repeat, while k < len… (also steps a - h)
let kValue;
while (k < len) {
kValue = items[k];
if (mapFn) {
A[k] =
typeof T === "undefined"
? mapFn(kValue, k)
: mapFn.call(T, kValue, k);
} else {
A[k] = kValue;
}
k += 1;
}
// 18. Let putStatus be Put(A, "length", len, true).
A.length = len;
// 20. Return A.
return A;
};
})();
}

// https://tc39.github.io/ecma262/#sec-array.prototype.find
// Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, "find", {
value(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}

const o = Object(this);

// 2. Let len be ? ToLength(? Get(O, "length")).
const len = o.length >>> 0;

// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== "function") {
throw new TypeError("predicate must be a function");
}

// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
const thisArg = arguments[1];

// 5. Let k be 0.
let k = 0;

// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return kValue.
const kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}

// 7. Return undefined.
return undefined;
}
});
}

// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
(function(arr) {
arr.forEach(item => {
if (item.hasOwnProperty("nextElementSibling")) {
return;
}
Object.defineProperty(item, "nextElementSibling", {
configurable: true,
enumerable: true,
get() {
let el = this;
while ((el = el.nextSibling)) {
if (el.nodeType === 1) {
return el;
}
}
return null;
},
set: undefined
});
});
})([Element.prototype, CharacterData.prototype]);

if ("outerHTML" in SVGElement.prototype) {
Object.defineProperty(SVGElement.prototype, "outerHTML", {
get() {
Expand All @@ -329,26 +101,6 @@ if ("outerHTML" in SVGElement.prototype) {
});
}

// Element.closest() support for older browsers
// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this;

do {
if (el.matches(s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}

// breakpoints defined in assets/css/_variables.scss
const breakpoints = { xs: 0, sm: 544, md: 800, lg: 1088, xxl: 1344 };

Expand All @@ -360,7 +112,6 @@ alertItemLoad();
modal();
supportForm();
fixedsticky();
objectFitImages(); // Polyfill for IE object-fit support
inputFocus();
geoLocation();
addressSearch();
Expand Down
Loading

0 comments on commit d9737d4

Please sign in to comment.