From c956c8f550ae5cd3c765052b81a5d5120fb8c21e Mon Sep 17 00:00:00 2001 From: Bramus Date: Sun, 28 Jan 2024 12:06:23 +0100 Subject: [PATCH 1/2] Load JS and CSS polyfill individually --- src/index.js | 35 ++++++++++++++++++++++++----------- src/scroll-timeline-css.js | 13 +++++++++---- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/src/index.js b/src/index.js index 09f0d3ed..c679b42f 100644 --- a/src/index.js +++ b/src/index.js @@ -25,17 +25,10 @@ import { import { initCSSPolyfill } from "./scroll-timeline-css" -function initPolyfill() { - // initCSSPolyfill returns true iff the host browser supports SDA - if (initCSSPolyfill()) { - return; - } - - if ([...document.styleSheets].filter((s) => s.href !== null).length) { - console.warn( - 'Non-Inline StyleSheets detected: ScrollTimeline polyfill currently only' + - ' supports inline styles within style tags' - ); +function initJSPolyfill() { + // Don’t load if the browser already has support + if ((typeof window.ScrollTimeline) !== 'undefined') { + return false; } if ( @@ -73,6 +66,26 @@ function initPolyfill() { "Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to document" ); } + + return true; +} + +function initPolyfill() { + const jsPolyfillLoaded = initJSPolyfill(); + const cssPolyfillLoaded = initCSSPolyfill(); + + if (jsPolyfillLoaded || jsPolyfillLoaded) { + console.log('ScrollTimeline Polyfill loaded'); + } + + if (cssPolyfillLoaded) { + if ([...document.styleSheets].filter((s) => s.href !== null).length) { + console.warn( + 'Non-Inline StyleSheets detected: ScrollTimeline polyfill currently only' + + ' supports inline styles within style tags' + ); + } + } } initPolyfill(); diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js index d31f0c1f..41771db7 100644 --- a/src/scroll-timeline-css.js +++ b/src/scroll-timeline-css.js @@ -5,7 +5,7 @@ import { ScrollTimeline, ViewTimeline, getScrollParent, calculateRange, const parser = new StyleParser(); -function initMutationObserver() { +function monitorAndParseStyleSheets() { const sheetObserver = new MutationObserver((entries) => { for (const entry of entries) { for (const addedNode of entry.addedNodes) { @@ -59,7 +59,7 @@ function relativePosition(phase, container, target, axis, optionsInset, percent) return calculateRelativePosition(phaseRange, percent, coverRange); } -function createScrollTimeline(anim, animationName, target) { +export function createScrollTimeline(anim, animationName, target) { const animOptions = parser.getAnimationTimelineOptions(animationName, target); if(!animOptions) @@ -135,10 +135,11 @@ function updateKeyframesIfNecessary(anim, options) { export function initCSSPolyfill() { // Don't load if browser claims support if (CSS.supports("animation-timeline: --works")) { - return true; + return false; } - initMutationObserver(); + // Monitor and parse the Style Sheets + monitorAndParseStyleSheets(); // Override CSS.supports() to claim support for the CSS properties from now on const oldSupports = CSS.supports; @@ -163,7 +164,11 @@ export function initCSSPolyfill() { // invoke the set the timeline procedure on the existing animation. anim.timeline = result.timeline; } + } else { + console.info('Not a ScrollTimeline dinges'); } }); }); + + return true; } From 0dab2e704a4649a58c6ec0190db04c739a69b98a Mon Sep 17 00:00:00 2001 From: Bramus Date: Sun, 28 Jan 2024 12:06:35 +0100 Subject: [PATCH 2/2] Split off JS polyfill loading logic into its own file --- src/index.js | 57 +------------------------------- src/scroll-timeline-js.js | 69 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+), 56 deletions(-) create mode 100644 src/scroll-timeline-js.js diff --git a/src/index.js b/src/index.js index c679b42f..9f0f2bed 100644 --- a/src/index.js +++ b/src/index.js @@ -12,63 +12,8 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { - ScrollTimeline, - ViewTimeline, -} from "./scroll-timeline-base"; -import { - animate, - elementGetAnimations, - documentGetAnimations, - ProxyAnimation -} from "./proxy-animation.js"; - import { initCSSPolyfill } from "./scroll-timeline-css" - -function initJSPolyfill() { - // Don’t load if the browser already has support - if ((typeof window.ScrollTimeline) !== 'undefined') { - return false; - } - - if ( - !Reflect.defineProperty(window, 'ScrollTimeline', { value: ScrollTimeline }) - ) { - throw Error( - 'Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window' - ); - } - if ( - !Reflect.defineProperty(window, 'ViewTimeline', { value: ViewTimeline }) - ) { - throw Error( - 'Error installing ViewTimeline polyfill: could not attach ViewTimeline to window' - ); - } - - if ( - !Reflect.defineProperty(Element.prototype, 'animate', { value: animate }) - ) { - throw Error( - "Error installing ScrollTimeline polyfill: could not attach WAAPI's animate to DOM Element" - ); - } - if (!Reflect.defineProperty(window, 'Animation', { value: ProxyAnimation })) { - throw Error('Error installing Animation constructor.'); - } - if (!Reflect.defineProperty(Element.prototype, "getAnimations", { value: elementGetAnimations })) { - throw Error( - "Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to DOM Element" - ); - } - if (!Reflect.defineProperty(document, "getAnimations", { value: documentGetAnimations })) { - throw Error( - "Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to document" - ); - } - - return true; -} +import { initJSPolyfill } from "./scroll-timeline-js" function initPolyfill() { const jsPolyfillLoaded = initJSPolyfill(); diff --git a/src/scroll-timeline-js.js b/src/scroll-timeline-js.js new file mode 100644 index 00000000..14ae62b3 --- /dev/null +++ b/src/scroll-timeline-js.js @@ -0,0 +1,69 @@ +// Copyright 2019 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the 'License'); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// https://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an 'AS IS' BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { + ScrollTimeline, + ViewTimeline, +} from './scroll-timeline-base'; +import { + animate, + elementGetAnimations, + documentGetAnimations, + ProxyAnimation +} from './proxy-animation.js'; + +export function initJSPolyfill() { + // Don’t load if the browser already has support + if ((typeof window.ScrollTimeline) !== 'undefined') { + return false; + } + + if ( + !Reflect.defineProperty(window, 'ScrollTimeline', { value: ScrollTimeline }) + ) { + throw Error( + 'Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window' + ); + } + if ( + !Reflect.defineProperty(window, 'ViewTimeline', { value: ViewTimeline }) + ) { + throw Error( + 'Error installing ViewTimeline polyfill: could not attach ViewTimeline to window' + ); + } + + if ( + !Reflect.defineProperty(Element.prototype, 'animate', { value: animate }) + ) { + throw Error( + 'Error installing ScrollTimeline polyfill: could not attach WAAPI’s animate to DOM Element' + ); + } + if (!Reflect.defineProperty(window, 'Animation', { value: ProxyAnimation })) { + throw Error('Error installing Animation constructor.'); + } + if (!Reflect.defineProperty(Element.prototype, 'getAnimations', { value: elementGetAnimations })) { + throw Error( + 'Error installing ScrollTimeline polyfill: could not attach WAAPI’s getAnimations to DOM Element' + ); + } + if (!Reflect.defineProperty(document, 'getAnimations', { value: documentGetAnimations })) { + throw Error( + 'Error installing ScrollTimeline polyfill: could not attach WAAPI’s getAnimations to document' + ); + } + + return true; +} \ No newline at end of file