Remove old browser polyfills

vanda · Aug 3, 2022 · d5707e8 · d5707e8
1 parent 9e6447a
commit d5707e8
Show file tree

Hide file tree

Showing 23 changed files with 12 additions and 118 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -3,8 +3,7 @@
     "browser": true
   },
   "globals": {
-    "document": false,
-    "Modernizr": false
+    "document": false
   },
   "extends": "airbnb-base",
   "rules": {

diff --git a/dist/css/vam-style.css b/dist/css/vam-style.css
diff --git a/dist/css/vam-style.css.map b/dist/css/vam-style.css.map
diff --git a/dist/scripts/modernizr.custom.min.js b/dist/scripts/modernizr.custom.min.js
diff --git a/dist/scripts/vamscript.js b/dist/scripts/vamscript.js
diff --git a/dist/scripts/vamscript.js.map b/dist/scripts/vamscript.js.map
diff --git a/src/assets/scripts/precompiled/modernizr.custom.min.js b/src/assets/scripts/precompiled/modernizr.custom.min.js
diff --git a/src/assets/scripts/vam-scripts.js b/src/assets/scripts/vam-scripts.js
@@ -4,7 +4,6 @@ import svg4everybody from 'svg4everybody';
 import oicInit from '../../components/blocks/object-image-overlay/_object-image-overlay';
 import contentWarningsInit from '../../components/blocks/object-card/_object-card';
 
-require('../../components/services/object_fit_polyfill/_poly-object-fit');
 require('../../components/blocks/background-video/_background-video');
 require('../../components/groups/block-grid/_grid-reveal-more');
 require('../../components/blocks/cookie-banner/_cookie-banner');

diff --git a/src/assets/styles/vam-style.scss b/src/assets/styles/vam-style.scss
@@ -22,7 +22,6 @@
 @import '../../components/services/svg_icon/svg_icon'; // Must come after colour and type
 @import '../../components/services/themed/themed'; // Must come after colour and type
 @import '../../components/services/lazyload/lazyload';
-@import '../../components/services/object_fit_polyfill/object_fit';
 @import '../../components/services/separated/separated';
 
 // Unit

diff --git a/src/components/_partials/_preview.html b/src/components/_partials/_preview.html
@@ -11,17 +11,11 @@
 
     <link rel="stylesheet" href="{{ '/assets/styles/vam-style.css' | path }}" />
     <link rel="stylesheet" href="{{ '/assets/styles/preview.css' | path }}" />
-
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Element.prototype.classList,es6,HTMLPictureElement,Element.prototype.remove,Element.prototype.dataset"></script>
-    <script src="{{ '/assets/scripts/modernizr.custom.min.js' | path }}"></script>
   </head>
 
   <body class="{% if _target.context.ignore_global_theme !== true %}theme-{{ global_theme_color }}{%- endif -%} {% if _target.context.previewClass %} {{ _target.context.previewClass }}{%- endif -%}">
     {{ yield | safe }}
 
-    <!--[if lte IE 8]>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
-    <![endif]-->
     <script src="{{ '/assets/scripts/vamscript.js' | path }}"></script>
   </body>
 </html>
diff --git a/src/components/blocks/collection-card/collection-card.html b/src/components/blocks/collection-card/collection-card.html
@@ -5,7 +5,7 @@
         <span class="b-collection-card__overlay-text">View collection</span>
       </div>
 
-      <div class="b-collection-card__media-inner js-object-fit-container">
+      <div class="b-collection-card__media-inner">
         <img srcset="{{ collectionImage[240] }} 240w,
                      {{ collectionImage[500] }} 500w"
             sizes="(max-width: 499px) calc(100vw - 24px),

diff --git a/src/components/blocks/event-feature/event-feature.html b/src/components/blocks/event-feature/event-feature.html
@@ -1,7 +1,7 @@
 <div class="b-event-feature{% for m in modifiers %} b-event-feature--{{ m }}{% endfor %}" itemscope itemprop="event" itemtype="http://schema.org/Event" aria-label="{{ eventTitle }}">
   <a class="b-event-feature__link" href="{{ eventUrl }}" itemprop="url" content="{{ eventUrl }}">
 
-    <div class="b-event-feature__media js-object-fit-container"
+    <div class="b-event-feature__media"
       itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
       <link itemprop="url" href="{{ eventImage[960] }}">
       <img alt="{{ eventTitle }}"

diff --git a/src/components/blocks/event-teaser/event-teaser.html b/src/components/blocks/event-teaser/event-teaser.html
@@ -6,7 +6,7 @@
     {%- render "@label-tag--book-soon" -%}
     {% endif %}
 
-    <div class="b-event-teaser__media js-object-fit-container">
+    <div class="b-event-teaser__media">
       <img alt="{{ eventTitle }}"
            class="b-event-teaser__media-image"
            itemprop="image"

diff --git a/src/components/blocks/promo/_promo.scss b/src/components/blocks/promo/_promo.scss
@@ -31,10 +31,6 @@
     @include bpMinMedium {
       min-height: 300px;
       width: 50%;
-
-      .no-flexbox & {
-        float: left;
-      }
     }
 
     &:last-of-type:nth-of-type(odd) {

diff --git a/src/components/blocks/promo/promo.html b/src/components/blocks/promo/promo.html
@@ -1,7 +1,7 @@
 {% if grouped !== true %}
 <section class="b-promo{% for m in modifiers %} b-promo--{{ m }}{% endfor %}">
 {% endif %}
-  <article class="b-promo__item js-object-fit-container">
+  <article class="b-promo__item">
 
     <img srcset="{{ image['320'] }} 320w, {{ image['640'] }} 640w, {{ image['960'] }} 960w, {{ image['1280'] }} 1280w, {{ image['1920'] }} 1920w, {{ image['2560'] }} 2560w"
          sizes="(min-width: 1200px) 1200px, 100vw"

diff --git a/src/components/blocks/shop-tout/_shop-tout.scss b/src/components/blocks/shop-tout/_shop-tout.scss
@@ -20,10 +20,6 @@
     @include bpMinSmall {
       flex-wrap: nowrap;
     }
-
-    .no-flexbox & {
-      text-align: center;
-    }
   }
 
   &__item {
@@ -40,20 +36,6 @@
       flex: 0 0 33.333333%;
     }
 
-    .no-flexbox & {
-      display: inline-block;
-      width: 100%;
-
-      @include bpMinXSmall {
-        width: 49%;
-      }
-
-      @include bpMinSmall {
-        width: 32%;
-      }
-
-    }
-
     > a:hover h2 {
       text-decoration: underline;
     }

diff --git a/src/components/blocks/venue-social-media/venue-social-media.html b/src/components/blocks/venue-social-media/venue-social-media.html
@@ -1,5 +1,5 @@
 <section class="b-venue-social-media b-promo b-promo--no-min-height">
-  <article class="b-promo__item js-object-fit-container">
+  <article class="b-promo__item">
 <!--
     later we plan to replace the image below and remove the background-color override style for b-promo__anchor below (in the scss)
     <img srcset="https://vanda-production-assets.s3.amazonaws.com/2016/07/27/10/04/membership_320.jpg 320w, https://vanda-production-assets.s3.amazonaws.com/2016/07/27/10/04/membership_640.jpg 640w, https://vanda-production-assets.s3.amazonaws.com/2016/07/27/10/04/membership_960.jpg 960w, https://vanda-production-assets.s3.amazonaws.com/2016/07/27/10/04/membership_1280.jpg 1280w, https://vanda-production-assets.s3.amazonaws.com/2016/07/27/10/04/membership_1920.jpg 1920w, https://vanda-production-assets.s3.amazonaws.com/2016/07/27/10/04/membership_2560.jpg 2560w" sizes="(min-width: 1200px) 1200px, 100vw" class="b-promo__image" src="https://vanda-production-assets.s3.amazonaws.com/2016/07/27/10/04/membership_960.jpg" alt="Membership">

diff --git a/src/components/mixins/tiles/_tiles.scss b/src/components/mixins/tiles/_tiles.scss
@@ -8,10 +8,6 @@ $gap: 12;
     display: flex;
     flex-wrap: wrap;
     margin: 0 -#{$gap}px;
-
-    .no-flexbox & {
-      overflow: hidden;
-    }
   }
 }
 
@@ -20,28 +16,16 @@ $gap: 12;
   flex: 0 1 auto;
   margin-bottom: 16px;
 
-  .no-flexbox & {
-    float: left;
-  }
-
   @include bpMinXSmall {
     flex-basis: 50%;
     margin-bottom: 23px;
     max-width: 50%;
     padding: 0 #{$gap}px;
-
-    .no-flexbox & {
-      width: 50%;
-    }
   }
 
   @include bpMinMedium {
     flex-basis: percentage(1 / $columns);
     margin-bottom: 16px;
     max-width: percentage(1 / $columns);
-
-    .no-flexbox & {
-      width: percentage(1 / $columns);
-    }
   }
 }
diff --git a/src/components/services/object_fit_polyfill/_object_fit.scss b/src/components/services/object_fit_polyfill/_object_fit.scss
diff --git a/src/components/services/object_fit_polyfill/_poly-object-fit.js b/src/components/services/object_fit_polyfill/_poly-object-fit.js
diff --git a/src/components/services/object_fit_polyfill/object_fit_polyfill.html b/src/components/services/object_fit_polyfill/object_fit_polyfill.html
diff --git a/src/components/services/object_fit_polyfill/readme.md b/src/components/services/object_fit_polyfill/readme.md
diff --git a/src/docs/04-js.md b/src/docs/04-js.md
@@ -5,17 +5,11 @@ label: Javascript
 
 ## Browsers...
 
-We're aiming to have function Javascript working down to Internet Explorer 9. We use services and tools like Modernizr and Polyfill.io to enable this to happen.
+Javascript support is all modern browsers and for the MS stack Edge upwards but no legacy versions of Internet Explorer are now supported. 
 
 ## Including on a site
 
-Obviously you need to include the core `vamscript.js` file. However don't forget to also include polyfill.io, and conditionally include Modernizr and Respond.js. Eg:
-
-```
-<!--[if lte IE 8]>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
-<![endif]-->
-```
+Obviously you need to include the core `vamscript.js` file.
 
 Have a look at `components/_partials/_preview.html` within Fractal as an example.
 
@@ -25,6 +19,4 @@ Javascript is linted via  ESLint using a modified version of the Airbnb ruleset.
 
 ## References
 
-- [Polyfill.io](https://polyfill.io/)
-- [Modernizr](https://modernizr.com/download?flexbox-objectfit-dontmin-setclasses)
 - [ESLint](http://eslint.org/)