matchheight 0.2.0 → 1.0.0

package/dist/match-height.d.ts

@@ -0,0 +1,9 @@
+declare class MatchHeight {
+    private _selector;
+    private _remains;
+    disconnect: () => void;
+    constructor(selector?: string);
+    update(): void;
+    private _process;
+}
+export default MatchHeight;

package/dist/match-height.js

@@ -0,0 +1,94 @@
+/*!
+ * @author yomotsu
+ * MatchHeight
+ * 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) => {
+	            return {
+	                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 paddingAndBorder = parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-top')) +
+	                parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-bottom')) +
+	                parseFloat(window.getComputedStyle(item.el).getPropertyValue('border-top-width')) +
+	                parseFloat(window.getComputedStyle(item.el).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;
+
+}));

package/dist/match-height.module.js

@@ -0,0 +1,86 @@
+/*!
+ * @author yomotsu
+ * MatchHeight
+ * https://github.com/yomotsu/MatchHeight
+ * Released under the MIT License.
+ */
+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) => {
+            return {
+                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 paddingAndBorder = parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-top')) +
+                parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-bottom')) +
+                parseFloat(window.getComputedStyle(item.el).getPropertyValue('border-top-width')) +
+                parseFloat(window.getComputedStyle(item.el).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();
+    }
+}
+
+export { MatchHeight as default };

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "matchheight",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "author": "Yomotsu",
   "license": "MIT",
-  "repository": "yomotsu/MatchHeight",
-  "main": "dist/MatchHeight.js",
-  "jsnext:main": "dist/MatchHeight.module.js",
-  "module": "dist/MatchHeight.module.js",
-  "types": "dist/MatchHeight.d.ts",
+  "repository": "yomotsu/matchheight",
+  "main": "dist/match-height.js",
+  "jsnext:main": "dist/match-height.module.js",
+  "module": "dist/match-height.module.js",
+  "types": "dist/match-height.d.ts",
   "devDependencies": {
-    "@rollup/plugin-typescript": "^11.0.0",
-    "rollup": "^3.16.0",
-    "terser": "^5.16.4",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.5"
+    "@rollup/plugin-typescript": "^11.1.2",
+    "rollup": "^3.28.0",
+    "terser": "^5.19.2",
+    "tslib": "^2.6.1",
+    "typescript": "^5.1.6"
   },
   "scripts": {
     "dev": "rollup --config --watch",

package/readme.md

@@ -13,9 +13,10 @@ No dependencies, Light weight, Makes elements equal height.
 
 ### Standalone
 
-Copy MatchHeight.js from `/dist/MatchHeight.js` and place it in your project.
+Copy MatchHeight.js from `/dist/MatchHeight.js` and place it in your project, then call `new MatchHeight()`.
 ```html
-<script src="./js/MatchHeight.js"></script>
+<script src="./js/match-height.js"></script>
+<script>new MatchHeight();</script>
 ```
 
 ### NPM
@@ -26,6 +27,7 @@ $ npm install --save matchheight
 then
 ```javascript
 import MatchHeight from 'matchheight';
+MatchHeight();
 ```
 
 for more info, see [the demo](https://yomotsu.github.io/MatchHeight/examples/).

package/rollup.config.mjs

@@ -10,7 +10,7 @@ const license = `/*!
  */`;
 
 export default {
-	input: './src/main.ts',
+	input: './src/match-height.ts',
 	output: [
 		{
 			format: 'umd',

package/src/match-height.ts

@@ -0,0 +1,111 @@
+import throttle from './throttle';
+
+type Item = {
+	el: HTMLElement;
+	top: number;
+	height: number;
+}
+
+const errorThreshold = 1; // in px
+
+class MatchHeight {
+
+	private _selector: string;
+	private _remains: Item[] = [];
+	disconnect: () => void;
+
+	constructor( selector: string = '[data-mh]' ) {
+
+		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: HTMLElement ): Item => {
+
+			return {
+				el,
+				top: 0,
+				height: 0,
+			};
+
+		} ) as Item[];
+		// remove all height before
+		this._remains.forEach( ( item ) => {
+
+			item.el.style.minHeight = '';
+
+		} );
+
+		this._process();
+
+	}
+
+	private _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 paddingAndBorder =
+				parseFloat( window.getComputedStyle( item.el ).getPropertyValue( 'padding-top' ) ) +
+				parseFloat( window.getComputedStyle( item.el ).getPropertyValue( 'padding-bottom' ) ) +
+				parseFloat( window.getComputedStyle( item.el ).getPropertyValue( 'border-top-width' ) ) +
+				parseFloat( window.getComputedStyle( item.el ).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();
+
+	}
+
+}
+
+export default MatchHeight;

package/tsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": "src",
     "outDir": "./dist",
     "declaration": true,
-    "target": "es5",
+    "target": "es2017",
     "strict": true,
     "removeComments": true,
     "experimentalDecorators": true,

package/dist/MatchHeight.d.ts

@@ -1,5 +0,0 @@
-declare const MatchHeight: {
-    init(): void;
-    update(): void;
-};
-export default MatchHeight;

package/dist/MatchHeight.js

@@ -1,97 +0,0 @@
-/*!
- * @author yomotsu
- * MatchHeight
- * 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) {
-	    var last, deferTimer;
-	    return function () {
-	        var now = Date.now();
-	        if (last && now < last + threshold) {
-	            clearTimeout(deferTimer);
-	            deferTimer = setTimeout(function () {
-	                last = now;
-	                fn();
-	            }, threshold);
-	        }
-	        else {
-	            last = now;
-	            fn();
-	        }
-	    };
-	}
-
-	var errorThreshold = 1;
-	var initialized = false;
-	var elements;
-	var remains;
-	var MatchHeight = {
-	    init: function () {
-	        initialized = true;
-	        elements = document.querySelectorAll('[data-mh]');
-	        MatchHeight.update();
-	    },
-	    update: function () {
-	        if (!initialized) {
-	            MatchHeight.init();
-	            return;
-	        }
-	        if (elements.length === 0)
-	            return;
-	        remains = Array.prototype.map.call(elements, function (el) {
-	            return {
-	                el: el,
-	                top: 0,
-	                height: 0,
-	            };
-	        });
-	        remains.forEach(function (item) {
-	            item.el.style.minHeight = '';
-	        });
-	        process();
-	    }
-	};
-	function process() {
-	    remains.forEach(function (item) {
-	        var bb = item.el.getBoundingClientRect();
-	        item.top = bb.top;
-	        item.height = bb.height;
-	    });
-	    remains.sort(function (a, b) { return a.top - b.top; });
-	    var processingTop = remains[0].top;
-	    var processingTargets = remains.filter(function (item) { return Math.abs(item.top - processingTop) <= errorThreshold; });
-	    var maxHeightInRow = Math.max.apply(Math, processingTargets.map(function (item) { return item.height; }));
-	    processingTargets.forEach(function (item) {
-	        var error = processingTop - item.top + errorThreshold;
-	        var paddingAndBorder = parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-top')) +
-	            parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-bottom')) +
-	            parseFloat(window.getComputedStyle(item.el).getPropertyValue('border-top-width')) +
-	            parseFloat(window.getComputedStyle(item.el).getPropertyValue('border-bottom-width'));
-	        item.el.style.minHeight = "".concat(maxHeightInRow - paddingAndBorder + error, "px");
-	    });
-	    remains.splice(0, processingTargets.length);
-	    if (0 < remains.length)
-	        process();
-	}
-
-	var throttledUpdate = throttle(MatchHeight.update, 200);
-	window.addEventListener('DOMContentLoaded', function onDomReady() {
-	    MatchHeight.init();
-	    window.removeEventListener('DOMContentLoaded', onDomReady);
-	});
-	window.addEventListener('load', function onLoad() {
-	    MatchHeight.update();
-	    window.removeEventListener('load', onLoad);
-	});
-	window.addEventListener('resize', throttledUpdate);
-
-	return MatchHeight;
-
-}));

package/dist/MatchHeight.min.js

@@ -1,7 +0,0 @@
-/*!
- * @author yomotsu
- * MatchHeight
- * 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){var last,deferTimer;return function(){var now=Date.now();if(last&&now<last+threshold){clearTimeout(deferTimer);deferTimer=setTimeout((function(){last=now;fn()}),threshold)}else{last=now;fn()}}}var errorThreshold=1;var initialized=false;var elements;var remains;var MatchHeight={init:function(){initialized=true;elements=document.querySelectorAll("[data-mh]");MatchHeight.update()},update:function(){if(!initialized){MatchHeight.init();return}if(elements.length===0)return;remains=Array.prototype.map.call(elements,(function(el){return{el:el,top:0,height:0}}));remains.forEach((function(item){item.el.style.minHeight=""}));process()}};function process(){remains.forEach((function(item){var bb=item.el.getBoundingClientRect();item.top=bb.top;item.height=bb.height}));remains.sort((function(a,b){return a.top-b.top}));var processingTop=remains[0].top;var processingTargets=remains.filter((function(item){return Math.abs(item.top-processingTop)<=errorThreshold}));var maxHeightInRow=Math.max.apply(Math,processingTargets.map((function(item){return item.height})));processingTargets.forEach((function(item){var error=processingTop-item.top+errorThreshold;var paddingAndBorder=parseFloat(window.getComputedStyle(item.el).getPropertyValue("padding-top"))+parseFloat(window.getComputedStyle(item.el).getPropertyValue("padding-bottom"))+parseFloat(window.getComputedStyle(item.el).getPropertyValue("border-top-width"))+parseFloat(window.getComputedStyle(item.el).getPropertyValue("border-bottom-width"));item.el.style.minHeight="".concat(maxHeightInRow-paddingAndBorder+error,"px")}));remains.splice(0,processingTargets.length);if(0<remains.length)process()}var throttledUpdate=throttle(MatchHeight.update,200);window.addEventListener("DOMContentLoaded",(function onDomReady(){MatchHeight.init();window.removeEventListener("DOMContentLoaded",onDomReady)}));window.addEventListener("load",(function onLoad(){MatchHeight.update();window.removeEventListener("load",onLoad)}));window.addEventListener("resize",throttledUpdate);return MatchHeight}));

package/dist/MatchHeight.module.js

@@ -1,89 +0,0 @@
-/*!
- * @author yomotsu
- * MatchHeight
- * https://github.com/yomotsu/MatchHeight
- * Released under the MIT License.
- */
-function throttle(fn, threshold) {
-    var last, deferTimer;
-    return function () {
-        var now = Date.now();
-        if (last && now < last + threshold) {
-            clearTimeout(deferTimer);
-            deferTimer = setTimeout(function () {
-                last = now;
-                fn();
-            }, threshold);
-        }
-        else {
-            last = now;
-            fn();
-        }
-    };
-}
-
-var errorThreshold = 1;
-var initialized = false;
-var elements;
-var remains;
-var MatchHeight = {
-    init: function () {
-        initialized = true;
-        elements = document.querySelectorAll('[data-mh]');
-        MatchHeight.update();
-    },
-    update: function () {
-        if (!initialized) {
-            MatchHeight.init();
-            return;
-        }
-        if (elements.length === 0)
-            return;
-        remains = Array.prototype.map.call(elements, function (el) {
-            return {
-                el: el,
-                top: 0,
-                height: 0,
-            };
-        });
-        remains.forEach(function (item) {
-            item.el.style.minHeight = '';
-        });
-        process();
-    }
-};
-function process() {
-    remains.forEach(function (item) {
-        var bb = item.el.getBoundingClientRect();
-        item.top = bb.top;
-        item.height = bb.height;
-    });
-    remains.sort(function (a, b) { return a.top - b.top; });
-    var processingTop = remains[0].top;
-    var processingTargets = remains.filter(function (item) { return Math.abs(item.top - processingTop) <= errorThreshold; });
-    var maxHeightInRow = Math.max.apply(Math, processingTargets.map(function (item) { return item.height; }));
-    processingTargets.forEach(function (item) {
-        var error = processingTop - item.top + errorThreshold;
-        var paddingAndBorder = parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-top')) +
-            parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-bottom')) +
-            parseFloat(window.getComputedStyle(item.el).getPropertyValue('border-top-width')) +
-            parseFloat(window.getComputedStyle(item.el).getPropertyValue('border-bottom-width'));
-        item.el.style.minHeight = "".concat(maxHeightInRow - paddingAndBorder + error, "px");
-    });
-    remains.splice(0, processingTargets.length);
-    if (0 < remains.length)
-        process();
-}
-
-var throttledUpdate = throttle(MatchHeight.update, 200);
-window.addEventListener('DOMContentLoaded', function onDomReady() {
-    MatchHeight.init();
-    window.removeEventListener('DOMContentLoaded', onDomReady);
-});
-window.addEventListener('load', function onLoad() {
-    MatchHeight.update();
-    window.removeEventListener('load', onLoad);
-});
-window.addEventListener('resize', throttledUpdate);
-
-export { MatchHeight as default };

package/dist/main.d.ts

@@ -1,2 +0,0 @@
-import MatchHeight from './MatchHeight.js';
-export default MatchHeight;

package/src/MatchHeight.ts

@@ -1,89 +0,0 @@
-type Item = {
-	el: HTMLElement;
-	top: number;
-	height: number;
-}
-
-const errorThreshold = 1; // in px
-let initialized = false;
-let elements: NodeListOf<HTMLElement>;
-let remains: Item[];
-
-const MatchHeight = {
-
-	init() {
-
-		initialized = true;
-		elements = document.querySelectorAll( '[data-mh]' );
-		MatchHeight.update();
-
-	},
-
-	update() {
-
-		if ( ! initialized ) {
-
-			MatchHeight.init();
-			return;
-
-		}
-
-		if ( elements.length === 0 ) return;
-
-		remains = Array.prototype.map.call( elements, ( el: HTMLElement ): Item => {
-
-			return {
-				el,
-				top: 0,
-				height: 0,
-			};
-
-		} ) as Item[];
-		// remove all height before
-		remains.forEach( ( item ) => {
-
-			item.el.style.minHeight = '';
-
-		} );
-		process();
-
-	}
-
-};
-
-function process() {
-
-	remains.forEach( ( item ) => {
-
-		const bb = item.el.getBoundingClientRect();
-
-		item.top    = bb.top;
-		item.height = bb.height;
-
-	} );
-
-	remains.sort( ( a, b ) => a.top - b.top );
-
-	const processingTop = remains[ 0 ].top;
-	const processingTargets = 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 paddingAndBorder =
-			parseFloat( window.getComputedStyle( item.el ).getPropertyValue( 'padding-top' ) ) +
-			parseFloat( window.getComputedStyle( item.el ).getPropertyValue( 'padding-bottom' ) ) +
-			parseFloat( window.getComputedStyle( item.el ).getPropertyValue( 'border-top-width' ) ) +
-			parseFloat( window.getComputedStyle( item.el ).getPropertyValue( 'border-bottom-width' ) );
-		item.el.style.minHeight = `${ maxHeightInRow - paddingAndBorder + error }px`;
-
-	} );
-
-	remains.splice( 0, processingTargets.length );
-
-	if ( 0 < remains.length ) process();
-
-}
-
-export default MatchHeight;

package/src/main.ts

@@ -1,21 +0,0 @@
-import throttle from './throttle.js';
-import MatchHeight from './MatchHeight.js';
-
-const throttledUpdate = throttle( MatchHeight.update, 200 );
-
-window.addEventListener( 'DOMContentLoaded', function onDomReady() {
-
-	MatchHeight.init();
-	window.removeEventListener( 'DOMContentLoaded', onDomReady );
-
-} );
-window.addEventListener( 'load', function onLoad() {
-
-	MatchHeight.update();
-	window.removeEventListener( 'load', onLoad );
-
-} );
-
-window.addEventListener( 'resize', throttledUpdate );
-
-export default MatchHeight;