8172 - Add gsap and scrolltrigger import to catalog page (#8178)

Co-authored-by: Pomax <pomax@nihongoresources.com>

env.default

@@ -52,7 +52,7 @@ CSP_FRAME_ANCESTORS=" 'none' "
 CSP_FRAME_SRC=" 'self' https://www.youtube.com https://comments.mozillafoundation.org/ https://airtable.com https://docs.google.com/ https://platform.twitter.com https://public.zenkit.com https://calendar.google.com https://www.youtube-nocookie.com https://form.typeform.com https://js.tito.io "
 CSP_IMG_SRC=" * data: "
 CSP_MEDIA_SRC=" 'self' data: https://s3.amazonaws.com/mofo-assets/foundation/video/ "
-CSP_SCRIPT_SRC=" 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://www.googletagmanager.com https://js.tito.io  https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"
+CSP_SCRIPT_SRC=" 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://www.googletagmanager.com https://js.tito.io"
 CSP_STYLE_SRC=" 'self' 'unsafe-inline' https://code.cdn.mozilla.net https://fonts.googleapis.com https://platform.twitter.com https://js.tito.io "
 
 

network-api/networkapi/wagtailpages/templates/buyersguide/catalog.html

@@ -149,7 +149,5 @@
     </style>
 </noscript>
 
-<script async src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script async src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="{% static "_js/bg-search.compiled.js" %}" async type="module"></script>
 {% endblock %}

package-lock.json

@@ -4972,9 +4972,9 @@
       "dev": true
     },
     "gsap": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.7.0.tgz",
-      "integrity": "sha512-8JI7pcFj0pgMzwqChARiHf7EIIZp1QrQBP74M2p2NpQLiAeIhQsrJWIRiwmA2JWkkNe0I2BiQF5ZhJvpyJVJDA=="
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.9.1.tgz",
+      "integrity": "sha512-JSGVYoC6da4pIjdF/yxFU6Rz8OojOIDkbooveZlfNg0+JIoFoRruyfWAEi6R/gUeNcuOiTqUIb0gi1nCNrHf8w=="
     },
     "hard-rejection": {
       "version": "2.1.0",

package.json

@@ -80,7 +80,7 @@
     "cssnano": "^5.0.8",
     "esbuild": "^0.12.24",
     "event-stream": "3.3.4",
-    "gsap": "^3.7.0",
+    "gsap": "^3.9.1",
     "moment": "^2.29.1",
     "npm-run-all": "^4.1.3",
     "postcss": "^8.4.5",

source/js/buyers-guide/search/search-filter.js

@@ -1,9 +1,10 @@
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { Utils } from "./utils.js";
 import { CreepUtils } from "./creep-utils.js";
 import { markScrollStart } from "./slider-area.js";
 import { setupHistoryManagement, applyHistory } from "./history.js";
 import { setupNavLinks, setupGoBackToAll } from "./member-functions.js";
-
 /**
  * ...
  */

source/js/buyers-guide/search/utils.js

@@ -1,3 +1,5 @@
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 const SORTS = [`name`, `company`, `blurb`];
 const FILTERS = [`company`, `name`, `blurb`, `worst-case`];
 const ALL_PRODUCTS = document.querySelectorAll(`figure.product-box`);