matchheight 1.1.2 → 1.2.0

package/dist/match-height.js

@@ -11,19 +11,20 @@
 })(this, (function () { 'use strict';
 
 	function throttle(fn, threshold) {
-	    let last, deferTimer;
-	    return function () {
+	    let last;
+	    let deferTimer;
+	    return function (...args) {
 	        const now = Date.now();
-	        if (last && now < last + threshold) {
+	        if (last !== undefined && now < last + threshold) {
 	            clearTimeout(deferTimer);
-	            deferTimer = setTimeout(function () {
+	            deferTimer = setTimeout(() => {
 	                last = now;
-	                fn();
+	                fn(...args);
 	            }, threshold);
 	        }
 	        else {
 	            last = now;
-	            fn();
+	            fn(...args);
 	        }
 	    };
 	}
@@ -38,7 +39,7 @@
 	        if (document.readyState === 'loading') {
 	            document.addEventListener('DOMContentLoaded', update, { once: true });
 	        }
-	        if (document.readyState === 'interactive') {
+	        else if (document.readyState === 'interactive') {
 	            document.addEventListener('load', update, { once: true });
 	        }
 	        else {
@@ -77,16 +78,16 @@
 	        const maxHeightInRow = Math.max(...processingTargets.map((item) => item.height));
 	        processingTargets.forEach((item) => {
 	            const error = processingTop - item.top + errorThreshold;
-	            const getPropertyValue = (value) => window.getComputedStyle(item.el).getPropertyValue(value);
-	            const isBorderBox = getPropertyValue('box-sizing') === 'border-box';
+	            const styles = window.getComputedStyle(item.el);
+	            const isBorderBox = styles.boxSizing === 'border-box';
 	            if (isBorderBox) {
 	                item.el.style.minHeight = `${maxHeightInRow + error}px`;
 	            }
 	            else {
-	                const paddingAndBorder = parseFloat(getPropertyValue('padding-top')) +
-	                    parseFloat(getPropertyValue('padding-bottom')) +
-	                    parseFloat(getPropertyValue('border-top-width')) +
-	                    parseFloat(getPropertyValue('border-bottom-width'));
+	                const paddingAndBorder = (parseFloat(styles.paddingTop) || 0) +
+	                    (parseFloat(styles.paddingBottom) || 0) +
+	                    (parseFloat(styles.borderTopWidth) || 0) +
+	                    (parseFloat(styles.borderBottomWidth) || 0);
 	                item.el.style.minHeight = `${maxHeightInRow - paddingAndBorder + error}px`;
 	            }
 	        });

package/dist/match-height.min.js

@@ -4,4 +4,4 @@
  * https://github.com/yomotsu/MatchHeight
  * Released under the MIT License.
  */
-(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):(global=typeof globalThis!=="undefined"?globalThis:global||self,global.MatchHeight=factory())})(this,(function(){"use strict";function throttle(fn,threshold){let last,deferTimer;return function(){const now=Date.now();if(last&&now<last+threshold){clearTimeout(deferTimer);deferTimer=setTimeout((function(){last=now;fn()}),threshold)}else{last=now;fn()}}}const errorThreshold=1;class MatchHeight{constructor(selector="[data-mh]"){this._remains=[];this._selector=selector;const update=this.update.bind(this);const throttledUpdate=throttle(update,200);if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",update,{once:true})}if(document.readyState==="interactive"){document.addEventListener("load",update,{once:true})}else{update()}window.addEventListener("resize",throttledUpdate);this.disconnect=()=>{window.removeEventListener("resize",throttledUpdate)}}update(){const elements=document.querySelectorAll(this._selector);if(elements.length===0)return;this._remains=Array.prototype.map.call(elements,(el=>({el:el,top:0,height:0})));this._remains.forEach((item=>{item.el.style.minHeight=""}));this._process()}_process(){this._remains.forEach((item=>{const bb=item.el.getBoundingClientRect();item.top=bb.top;item.height=bb.height}));this._remains.sort(((a,b)=>a.top-b.top));const processingTop=this._remains[0].top;const processingTargets=this._remains.filter((item=>Math.abs(item.top-processingTop)<=errorThreshold));const maxHeightInRow=Math.max(...processingTargets.map((item=>item.height)));processingTargets.forEach((item=>{const error=processingTop-item.top+errorThreshold;const getPropertyValue=value=>window.getComputedStyle(item.el).getPropertyValue(value);const isBorderBox=getPropertyValue("box-sizing")==="border-box";if(isBorderBox){item.el.style.minHeight=`${maxHeightInRow+error}px`}else{const paddingAndBorder=parseFloat(getPropertyValue("padding-top"))+parseFloat(getPropertyValue("padding-bottom"))+parseFloat(getPropertyValue("border-top-width"))+parseFloat(getPropertyValue("border-bottom-width"));item.el.style.minHeight=`${maxHeightInRow-paddingAndBorder+error}px`}}));this._remains.splice(0,processingTargets.length);if(0<this._remains.length)this._process()}}return MatchHeight}));
+(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):(global=typeof globalThis!=="undefined"?globalThis:global||self,global.MatchHeight=factory())})(this,function(){"use strict";function throttle(fn,threshold){let last;let deferTimer;return function(...args){const now=Date.now();if(last!==undefined&&now<last+threshold){clearTimeout(deferTimer);deferTimer=setTimeout(()=>{last=now;fn(...args)},threshold)}else{last=now;fn(...args)}}}const errorThreshold=1;class MatchHeight{constructor(selector="[data-mh]"){this._remains=[];this._selector=selector;const update=this.update.bind(this);const throttledUpdate=throttle(update,200);if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",update,{once:true})}else if(document.readyState==="interactive"){document.addEventListener("load",update,{once:true})}else{update()}window.addEventListener("resize",throttledUpdate);this.disconnect=()=>{window.removeEventListener("resize",throttledUpdate)}}update(){const elements=document.querySelectorAll(this._selector);if(elements.length===0)return;this._remains=Array.prototype.map.call(elements,el=>({el:el,top:0,height:0}));this._remains.forEach(item=>{item.el.style.minHeight=""});this._process()}_process(){this._remains.forEach(item=>{const bb=item.el.getBoundingClientRect();item.top=bb.top;item.height=bb.height});this._remains.sort((a,b)=>a.top-b.top);const processingTop=this._remains[0].top;const processingTargets=this._remains.filter(item=>Math.abs(item.top-processingTop)<=errorThreshold);const maxHeightInRow=Math.max(...processingTargets.map(item=>item.height));processingTargets.forEach(item=>{const error=processingTop-item.top+errorThreshold;const styles=window.getComputedStyle(item.el);const isBorderBox=styles.boxSizing==="border-box";if(isBorderBox){item.el.style.minHeight=`${maxHeightInRow+error}px`}else{const paddingAndBorder=(parseFloat(styles.paddingTop)||0)+(parseFloat(styles.paddingBottom)||0)+(parseFloat(styles.borderTopWidth)||0)+(parseFloat(styles.borderBottomWidth)||0);item.el.style.minHeight=`${maxHeightInRow-paddingAndBorder+error}px`}});this._remains.splice(0,processingTargets.length);if(0<this._remains.length)this._process()}}return MatchHeight});

package/dist/match-height.module.js

@@ -5,19 +5,20 @@
  * Released under the MIT License.
  */
 function throttle(fn, threshold) {
-    let last, deferTimer;
-    return function () {
+    let last;
+    let deferTimer;
+    return function (...args) {
         const now = Date.now();
-        if (last && now < last + threshold) {
+        if (last !== undefined && now < last + threshold) {
             clearTimeout(deferTimer);
-            deferTimer = setTimeout(function () {
+            deferTimer = setTimeout(() => {
                 last = now;
-                fn();
+                fn(...args);
             }, threshold);
         }
         else {
             last = now;
-            fn();
+            fn(...args);
         }
     };
 }
@@ -32,7 +33,7 @@ class MatchHeight {
         if (document.readyState === 'loading') {
             document.addEventListener('DOMContentLoaded', update, { once: true });
         }
-        if (document.readyState === 'interactive') {
+        else if (document.readyState === 'interactive') {
             document.addEventListener('load', update, { once: true });
         }
         else {
@@ -71,16 +72,16 @@ class MatchHeight {
         const maxHeightInRow = Math.max(...processingTargets.map((item) => item.height));
         processingTargets.forEach((item) => {
             const error = processingTop - item.top + errorThreshold;
-            const getPropertyValue = (value) => window.getComputedStyle(item.el).getPropertyValue(value);
-            const isBorderBox = getPropertyValue('box-sizing') === 'border-box';
+            const styles = window.getComputedStyle(item.el);
+            const isBorderBox = styles.boxSizing === 'border-box';
             if (isBorderBox) {
                 item.el.style.minHeight = `${maxHeightInRow + error}px`;
             }
             else {
-                const paddingAndBorder = parseFloat(getPropertyValue('padding-top')) +
-                    parseFloat(getPropertyValue('padding-bottom')) +
-                    parseFloat(getPropertyValue('border-top-width')) +
-                    parseFloat(getPropertyValue('border-bottom-width'));
+                const paddingAndBorder = (parseFloat(styles.paddingTop) || 0) +
+                    (parseFloat(styles.paddingBottom) || 0) +
+                    (parseFloat(styles.borderTopWidth) || 0) +
+                    (parseFloat(styles.borderBottomWidth) || 0);
                 item.el.style.minHeight = `${maxHeightInRow - paddingAndBorder + error}px`;
             }
         });

package/dist/throttle.d.ts

@@ -1,2 +1 @@
-declare function throttle(fn: () => void, threshold: number): () => void;
-export default throttle;
+export default function throttle<T extends (...args: any[]) => void>(fn: T, threshold: number): (...args: Parameters<T>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matchheight",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "author": "Yomotsu",
   "license": "MIT",
   "repository": "yomotsu/matchheight",
@@ -9,11 +9,11 @@
   "module": "dist/match-height.module.js",
   "types": "dist/match-height.d.ts",
   "devDependencies": {
-    "@rollup/plugin-typescript": "^11.1.6",
-    "rollup": "^4.14.3",
-    "terser": "^5.30.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.5"
+    "@rollup/plugin-typescript": "^12.3.0",
+    "rollup": "^4.54.0",
+    "terser": "^5.44.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
   },
   "scripts": {
     "dev": "rollup --config --watch",

package/rollup.config.mjs

@@ -1,7 +1,9 @@
-import pkg from './package.json' assert { type: "json" };
+import { readFileSync } from 'fs';
 import typescript from 'typescript';
 import rollupTypescript from '@rollup/plugin-typescript';
 
+const pkg = JSON.parse( readFileSync( './package.json', 'utf-8' ) );
+
 const license = `/*!
  * @author yomotsu
  * MatchHeight

package/src/match-height.ts

@@ -25,7 +25,7 @@ class MatchHeight {
 
 			document.addEventListener( 'DOMContentLoaded', update, { once: true } );
 
-		} if ( document.readyState === 'interactive' ) {
+		} else if ( document.readyState === 'interactive' ) {
 
 			document.addEventListener( 'load', update, { once: true } );
 
@@ -91,23 +91,22 @@ class MatchHeight {
 		processingTargets.forEach( ( item ) => {
 
 			const error = processingTop - item.top + errorThreshold;
-			const getPropertyValue = ( value: string ) => window.getComputedStyle( item.el ).getPropertyValue( value );
-			const isBorderBox = getPropertyValue( 'box-sizing' ) === 'border-box';
+			const styles = window.getComputedStyle( item.el );
+			const isBorderBox = styles.boxSizing === 'border-box';
 
 			if ( isBorderBox ) {
 
-				item.el.style.minHeight = `${ maxHeightInRow + error }px`;
+					item.el.style.minHeight = `${ maxHeightInRow + error }px`;
 
 			} else {
-
 				const paddingAndBorder =
-					parseFloat( getPropertyValue( 'padding-top' ) ) +
-					parseFloat( getPropertyValue( 'padding-bottom' ) ) +
-					parseFloat( getPropertyValue( 'border-top-width' ) ) +
-					parseFloat( getPropertyValue( 'border-bottom-width' ) );
+					( parseFloat( styles.paddingTop ) || 0 ) +
+					( parseFloat( styles.paddingBottom ) || 0 ) +
+					( parseFloat( styles.borderTopWidth ) || 0 ) +
+					( parseFloat( styles.borderBottomWidth ) || 0 );
 				item.el.style.minHeight = `${ maxHeightInRow - paddingAndBorder + error }px`;
-
 			}
+
 		} );
 
 		this._remains.splice( 0, processingTargets.length );

package/src/throttle.ts

@@ -1,30 +1,27 @@
-function throttle( fn: () => void, threshold: number ) {
+export default function throttle<T extends (...args: any[]) => void>( fn: T, threshold: number ) {
 
-	let last: number, deferTimer: number;
+	let last: number | undefined;
+	let deferTimer: ReturnType<typeof setTimeout> | undefined;
 
-	return function () {
+	return function ( ...args: Parameters<T> ) {
 
 		const now = Date.now();
 
-		if ( last && now < last + threshold ) {
+		if ( last !== undefined && now < last + threshold ) {
 
 			clearTimeout( deferTimer );
-			deferTimer = setTimeout( function () {
-
+			deferTimer = setTimeout( () => {
 				last = now;
-				fn();
-
+				fn( ...args );
 			}, threshold );
 
 		} else {
 
 			last = now;
-			fn();
+			fn( ...args );
 
 		}
 
 	};
 
 }
-
-export default throttle;