From 547701aeebbf471b902b290f64c6ba470085eb9c Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 22 Jun 2026 13:30:25 -0600 Subject: [PATCH] Fix getComputedStyle polyfill, SVG className crash, deprecated getPropertyCSSValue, and add TypeScript --- dist/wow.d.ts | 21 +++++++++++++++++++++ dist/wow.js | 23 ++++++++++------------- package.json | 1 + 3 files changed, 32 insertions(+), 13 deletions(-) create mode 100644 dist/wow.d.ts diff --git a/dist/wow.d.ts b/dist/wow.d.ts new file mode 100644 index 0000000..df088c5 --- /dev/null +++ b/dist/wow.d.ts @@ -0,0 +1,21 @@ +interface WOWOptions { + boxClass?: string; + animateClass?: string; + offset?: number; + mobile?: boolean; + live?: boolean; + callback?: (box: HTMLElement) => void; + scrollContainer?: string | null; +} + +declare class WOW { + constructor(options?: WOWOptions); + init(): void; + start(): void; + stop(): void; + sync(element?: Node): void; + show(box: HTMLElement): HTMLElement; +} + +export default WOW; +export { WOW, WOWOptions }; diff --git a/dist/wow.js b/dist/wow.js index 1db78ea..44c37bb 100644 --- a/dist/wow.js +++ b/dist/wow.js @@ -139,8 +139,9 @@ })()); - getComputedStyle = this.getComputedStyle || function(el, pseudo) { - this.getPropertyValue = function(prop) { + getComputedStyle = (typeof window !== "undefined" && window.getComputedStyle) || function(el, pseudo) { + var obj = {}; + obj.getPropertyValue = function(prop) { var ref; if (prop === 'float') { prop = 'styleFloat'; @@ -152,7 +153,7 @@ } return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null; }; - return this; + return obj; }; getComputedStyleRX = /(\-([a-z]){1})/g; @@ -308,7 +309,7 @@ WOW.prototype.show = function(box) { this.applyStyle(box); - box.className = box.className + " " + this.config.animateClass; + box.classList.add(this.config.animateClass); if (this.config.callback != null) { this.config.callback(box); } @@ -359,7 +360,7 @@ var target; if (event.type.toLowerCase().indexOf('animationend') >= 0) { target = event.target || event.srcElement; - return target.className = target.className.replace(this.config.animateClass, '').trim(); + return target.classList.remove(this.config.animateClass); } }; @@ -414,22 +415,18 @@ WOW.prototype.vendorCSS = function(elem, property) { var j, len, ref, result, style, vendor; style = getComputedStyle(elem); - result = style.getPropertyCSSValue(property); + result = style.getPropertyValue(property); ref = this.vendors; for (j = 0, len = ref.length; j < len; j++) { vendor = ref[j]; - result = result || style.getPropertyCSSValue("-" + vendor + "-" + property); + result = result || style.getPropertyValue("-" + vendor + "-" + property); } return result; }; WOW.prototype.animationName = function(box) { - var animationName, error; - try { - animationName = this.vendorCSS(box, 'animation-name').cssText; - } catch (error) { - animationName = getComputedStyle(box).getPropertyValue('animation-name'); - } + var animationName; + animationName = this.vendorCSS(box, 'animation-name'); if (animationName === 'none') { return ''; } else { diff --git a/package.json b/package.json index f63ae2c..2a8f0c6 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "url" : "https://www.delac.io/" }, "main": "./dist/wow.js", + "types": "./dist/wow.d.ts", "repository" : { "type" : "git", "url" : "git://github.com/matthieua/WOW.git"