diff --git a/src/index.js b/src/index.js index 09f0d3e..9f0f2be 100644 --- a/src/index.js +++ b/src/index.js @@ -12,66 +12,24 @@ // 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" +import { initJSPolyfill } from "./scroll-timeline-js" 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' - ); - } + const jsPolyfillLoaded = initJSPolyfill(); + const cssPolyfillLoaded = initCSSPolyfill(); - 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 (jsPolyfillLoaded || jsPolyfillLoaded) { + console.log('ScrollTimeline Polyfill loaded'); } - 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" - ); + 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' + ); + } } } diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js index d31f0c1..41771db 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; } diff --git a/src/scroll-timeline-js.js b/src/scroll-timeline-js.js new file mode 100644 index 0000000..14ae62b --- /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