matchheight 0.1.1 → 0.2.0

package/dist/MatchHeight.d.ts

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

package/dist/MatchHeight.js

@@ -7,116 +7,91 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 	typeof define === 'function' && define.amd ? define(factory) :
-	(global.MatchHeight = factory());
-}(this, (function () { 'use strict';
-
-	function throttle(fn, threshhold) {
-
-		var last = void 0,
-		    deferTimer = void 0;
-
-		return function () {
-
-			var now = Date.now();
-
-			if (last && now < last + threshhold) {
-
-				clearTimeout(deferTimer);
-				deferTimer = setTimeout(function () {
-
-					last = now;
-					fn();
-				}, threshhold);
-			} else {
-
-				last = now;
-				fn();
-			}
-		};
+	(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 = void 0;
-	var remains = void 0;
-
-	var MatchHeight$1 = {
-		init: function init() {
-
-			initialized = true;
-			elements = document.querySelectorAll('[data-mh]');
-			this.update();
-		},
-		update: function update() {
-
-			if (!initialized) {
-
-				this.init();
-				return;
-			}
-
-			if (elements.length === 0) return;
-
-			remains = Array.prototype.map.call(elements, function (el) {
-
-				return { el: el };
-			});
-			// remove all height before
-			remains.forEach(function (item) {
-
-				item.el.style.minHeight = '';
-			});
-			process();
-		}
+	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 item.top === processingTop;
-		});
-		var maxHeightInRow = Math.max.apply(Math, processingTargets.map(function (item) {
-			return item.height;
-		}));
-
-		processingTargets.forEach(function (item) {
-
-			var paddingAndBorder = parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-top'), 10) + parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-bottom'), 10) + parseFloat(window.getComputedStyle(item.el).getPropertyValue('border-top-width'), 10) + parseFloat(window.getComputedStyle(item.el).getPropertyValue('border-bottom-width'), 10);
-			item.el.style.minHeight = maxHeightInRow - paddingAndBorder + 'px';
-		});
-
-		remains.splice(0, processingTargets.length);
-
-		if (0 < remains.length) 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$1.update, 200);
-
+	var throttledUpdate = throttle(MatchHeight.update, 200);
 	window.addEventListener('DOMContentLoaded', function onDomReady() {
-
-		MatchHeight$1.init();
-		window.removeEventListener('DOMContentLoaded', onDomReady);
+	    MatchHeight.init();
+	    window.removeEventListener('DOMContentLoaded', onDomReady);
 	});
 	window.addEventListener('load', function onLoad() {
-
-		MatchHeight$1.update();
-		window.removeEventListener('load', onLoad);
+	    MatchHeight.update();
+	    window.removeEventListener('load', onLoad);
 	});
-
 	window.addEventListener('resize', throttledUpdate);
 
-	return MatchHeight$1;
+	return MatchHeight;
 
-})));
+}));

package/dist/MatchHeight.min.js

@@ -4,4 +4,4 @@
  * https://github.com/yomotsu/MatchHeight
  * Released under the MIT License.
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.MatchHeight=e()}(this,function(){"use strict";function t(){o.forEach(function(t){var e=t.el.getBoundingClientRect();t.top=e.top,t.height=e.height}),o.sort(function(t,e){return t.top-e.top});var e=o[0].top,n=o.filter(function(t){return t.top===e}),i=Math.max.apply(Math,n.map(function(t){return t.height}));n.forEach(function(t){var e=parseFloat(window.getComputedStyle(t.el).getPropertyValue("padding-top"),10)+parseFloat(window.getComputedStyle(t.el).getPropertyValue("padding-bottom"),10)+parseFloat(window.getComputedStyle(t.el).getPropertyValue("border-top-width"),10)+parseFloat(window.getComputedStyle(t.el).getPropertyValue("border-bottom-width"),10);t.el.style.minHeight=i-e+"px"}),o.splice(0,n.length),0<o.length&&t()}var e=!1,n=void 0,o=void 0,i={init:function(){e=!0,n=document.querySelectorAll("[data-mh]"),this.update()},update:function(){if(!e)return void this.init();0!==n.length&&(o=Array.prototype.map.call(n,function(t){return{el:t}}),o.forEach(function(t){t.el.style.minHeight=""}),t())}},r=function(t,e){var n=void 0,o=void 0;return function(){var i=Date.now();n&&i<n+e?(clearTimeout(o),o=setTimeout(function(){n=i,t()},e)):(n=i,t())}}(i.update,200);return window.addEventListener("DOMContentLoaded",function t(){i.init(),window.removeEventListener("DOMContentLoaded",t)}),window.addEventListener("load",function t(){i.update(),window.removeEventListener("load",t)}),window.addEventListener("resize",r),i});
+(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

@@ -4,111 +4,86 @@
  * https://github.com/yomotsu/MatchHeight
  * Released under the MIT License.
  */
-function throttle(fn, threshhold) {
-
-	var last = void 0,
-	    deferTimer = void 0;
-
-	return function () {
-
-		var now = Date.now();
-
-		if (last && now < last + threshhold) {
-
-			clearTimeout(deferTimer);
-			deferTimer = setTimeout(function () {
-
-				last = now;
-				fn();
-			}, threshhold);
-		} else {
-
-			last = now;
-			fn();
-		}
-	};
+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 = void 0;
-var remains = void 0;
-
-var MatchHeight$1 = {
-	init: function init() {
-
-		initialized = true;
-		elements = document.querySelectorAll('[data-mh]');
-		this.update();
-	},
-	update: function update() {
-
-		if (!initialized) {
-
-			this.init();
-			return;
-		}
-
-		if (elements.length === 0) return;
-
-		remains = Array.prototype.map.call(elements, function (el) {
-
-			return { el: el };
-		});
-		// remove all height before
-		remains.forEach(function (item) {
-
-			item.el.style.minHeight = '';
-		});
-		process();
-	}
+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 item.top === processingTop;
-	});
-	var maxHeightInRow = Math.max.apply(Math, processingTargets.map(function (item) {
-		return item.height;
-	}));
-
-	processingTargets.forEach(function (item) {
-
-		var paddingAndBorder = parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-top'), 10) + parseFloat(window.getComputedStyle(item.el).getPropertyValue('padding-bottom'), 10) + parseFloat(window.getComputedStyle(item.el).getPropertyValue('border-top-width'), 10) + parseFloat(window.getComputedStyle(item.el).getPropertyValue('border-bottom-width'), 10);
-		item.el.style.minHeight = maxHeightInRow - paddingAndBorder + 'px';
-	});
-
-	remains.splice(0, processingTargets.length);
-
-	if (0 < remains.length) 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$1.update, 200);
-
+var throttledUpdate = throttle(MatchHeight.update, 200);
 window.addEventListener('DOMContentLoaded', function onDomReady() {
-
-	MatchHeight$1.init();
-	window.removeEventListener('DOMContentLoaded', onDomReady);
+    MatchHeight.init();
+    window.removeEventListener('DOMContentLoaded', onDomReady);
 });
 window.addEventListener('load', function onLoad() {
-
-	MatchHeight$1.update();
-	window.removeEventListener('load', onLoad);
+    MatchHeight.update();
+    window.removeEventListener('load', onLoad);
 });
-
 window.addEventListener('resize', throttledUpdate);
 
-export default MatchHeight$1;
+export { MatchHeight as default };

package/dist/main.d.ts

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

package/dist/throttle.d.ts

@@ -0,0 +1,2 @@
+declare function throttle(fn: () => void, threshold: number): () => void;
+export default throttle;

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "matchheight",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "author": "Yomotsu",
   "license": "MIT",
-  "main": "dist/MatchHeight.js",
   "repository": "yomotsu/MatchHeight",
+  "main": "dist/MatchHeight.js",
   "jsnext:main": "dist/MatchHeight.module.js",
   "module": "dist/MatchHeight.module.js",
+  "types": "dist/MatchHeight.d.ts",
   "devDependencies": {
-    "babel-preset-env": "1.2.2",
-    "rollup": "^0.41.4",
-    "rollup-plugin-babel": "2.7.1",
-    "rollup-watch": "^3.2.2",
-    "uglify-js": "^2.6.0"
+    "@rollup/plugin-typescript": "^11.0.0",
+    "rollup": "^3.16.0",
+    "terser": "^5.16.4",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "dev": "rollup --config --watch",
-    "build": "rollup --config",
-    "release": "rollup --config && uglifyjs dist/MatchHeight.js -cm --preamble \"/*!\n * @author yomotsu\n * MatchHeight\n * https://github.com/yomotsu/MatchHeight\n * Released under the MIT License.\n */\" > dist/MatchHeight.min.js"
+    "build": "rollup --config && terser dist/MatchHeight.js -o dist/MatchHeight.min.js --comments '/^!/'"
   },
   "keywords": [
     "matchHeight",

package/rollup.config.mjs

@@ -0,0 +1,32 @@
+import pkg from './package.json' assert { type: "json" };
+import typescript from 'typescript';
+import rollupTypescript from '@rollup/plugin-typescript';
+
+const license = `/*!
+ * @author yomotsu
+ * MatchHeight
+ * https://github.com/yomotsu/MatchHeight
+ * Released under the MIT License.
+ */`;
+
+export default {
+	input: './src/main.ts',
+	output: [
+		{
+			format: 'umd',
+			name: 'MatchHeight',
+			file: pkg.main,
+			banner: license,
+			indent: '\t',
+		},
+		{
+			format: 'es',
+			file: pkg.module,
+			banner: license,
+			indent: '\t',
+		}
+	],
+	plugins: [
+		rollupTypescript( { typescript } ),
+	],
+};

package/src/{MatchHeight.js → MatchHeight.ts}

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

package/src/{throttle.js → throttle.ts}

@@ -1,12 +1,12 @@
-function throttle( fn, threshhold ) {
+function throttle( fn: () => void, threshold: number ) {
 
-	let last, deferTimer;
+	let last: number, deferTimer: number;
 
 	return function () {
 
 		const now = Date.now();
 
-		if ( last && now < last + threshhold ) {
+		if ( last && now < last + threshold ) {
 
 			clearTimeout( deferTimer );
 			deferTimer = setTimeout( function () {
@@ -14,7 +14,7 @@ function throttle( fn, threshhold ) {
 				last = now;
 				fn();
 
-			}, threshhold );
+			}, threshold );
 
 		} else {
 

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "outDir": "./dist",
+    "declaration": true,
+    "target": "es5",
+    "strict": true,
+    "removeComments": true,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

package/rollup.config.js

@@ -1,44 +0,0 @@
-import babel from 'rollup-plugin-babel'
-
-const license = `/*!
- * @author yomotsu
- * MatchHeight
- * https://github.com/yomotsu/MatchHeight
- * Released under the MIT License.
- */`
-
-export default {
-	entry: './src/main.js',
-	indent: '\t',
-	sourceMap: false,
-	plugins: [
-		babel( {
-			exclude: 'node_modules/**',
-			presets: [
-				[ 'env', {
-					targets: {
-						browsers: [
-							'last 2 versions',
-							'ie >= 9'
-						]
-					},
-					loose: true,
-					modules: false
-				} ]
-			]
-		} )
-	],
-	targets: [
-		{
-			format: 'umd',
-			moduleName: 'MatchHeight',
-			dest: 'dist/MatchHeight.js',
-			banner: license
-		},
-		{
-			format: 'es',
-			dest: 'dist/MatchHeight.module.js',
-			banner: license
-		}
-	]
-};