vanilla-match-height - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

CHANGELOG.md

@@ -0,1 +1,8 @@
+<a name="1.2.2"></a>
+# 1.2.2 (2024-01-17)
+
+### release summary
+
+- Change optional settings on TS definition
+
 <a name="1.2.1"></a>
@@ -2,0 +9,0 @@ # 1.2.1 (2023-12-18)

dist/vanilla-match-height.d.ts

 /**
- * vanilla-match-height v1.2.1 by @mitera
+ * vanilla-match-height v1.2.2 by @mitera
  * Simone Miterangelis <[e-mail]>
@@ -18,5 +18,5 @@ * License: MIT
     _applyAll($this: MatchHeight): void;
-    _validateProperty(value: string): RegExpMatchArray | null;
+    _validateProperty(value?: string | null): RegExpMatchArray | null;
     _parse(value: string): number;
-    _rows(elements: [HTMLElement]): HTMLElement[][];
+    _rows(elements: HTMLElement[]): HTMLElement[][];
     _applyDataApi(property: string): void;
@@ -29,3 +29,3 @@ _remove(): void;
     elements?: string | null;
-    byRow: boolean;
+    byRow?: boolean | null;
     target?: HTMLElement | null;
@@ -36,4 +36,4 @@ attributeName?: string | null;
     remove?: HTMLElement | null;
-    events: boolean;
-    throttle: number;
+    events?: boolean | null;
+    throttle?: number | null;
 }

dist/vanilla-match-height.js

 "use strict";
 /**
- * vanilla-match-height v1.2.1 by @mitera
+ * vanilla-match-height v1.2.2 by @mitera
  * Simone Miterangelis <[e-mail]>
@@ -47,3 +47,3 @@ * License: MIT
             }
-            if (this.settings.throttle > 0)
+            if (this.settings.throttle && this.settings.throttle > 0)
                 this._bind = this._throttle(this._bind, this.settings.throttle);
@@ -172,3 +172,3 @@ this._init();
         var $this = this;
-        var $row = this.wrapEl.querySelectorAll('[' + property + ']');
+        var $row = Array.from(this.wrapEl.querySelectorAll('[' + property + ']'));
         // generate groups by their groupId set by elements using data-match-height
@@ -189,7 +189,7 @@ $row.forEach(($el) => {
         if (opts.elements) {
-            $elements = this.wrapEl.querySelectorAll(opts.elements);
+            $elements = Array.from(this.wrapEl.querySelectorAll(opts.elements));
         }
         else {
             if (opts.attributeName && opts.attributeValue) {
-                $elements = this.wrapEl.querySelectorAll('[' + opts.attributeName + '="' + opts.attributeValue + '"]');
+                $elements = Array.from(this.wrapEl.querySelectorAll('[' + opts.attributeName + '="' + opts.attributeValue + '"]'));
             }
@@ -212,7 +212,7 @@ }
         if (opts.elements && opts.elements.trim() != '') {
-            $elements = this.wrapEl.querySelectorAll(opts.elements);
+            $elements = Array.from(this.wrapEl.querySelectorAll(opts.elements));
         }
         else {
             if (opts.attributeName && $this._validateProperty(opts.attributeName) && opts.attributeValue && opts.attributeValue.trim() != '') {
-                $elements = this.wrapEl.querySelectorAll('[' + opts.attributeName + '="' + opts.attributeValue + '"]');
+                $elements = Array.from(this.wrapEl.querySelectorAll('[' + opts.attributeName + '="' + opts.attributeValue + '"]'));
             }
@@ -319,3 +319,4 @@ }
                     if (opts.remove instanceof NodeList) {
-                        opts.remove.forEach(($el) => {
+                        var removedItems = Array.from(opts.remove);
+                        removedItems.forEach(($el) => {
                             if ($that === $el) {
@@ -322,0 +323,0 @@ $this._resetStyle($el, opts.property);

dist/vanilla-match-height.min.js

@@ -1,1 +0,1 @@
-"use strict";(function(){HTMLElement.prototype.matchHeight=function(settings){return new MatchHeight(this,settings)};function MatchHeight(wrapEl,settings){this.wrapEl=wrapEl;let default_settings={elements:null,byRow:true,target:null,attributeName:null,attributeValue:null,property:"height",remove:null,events:true,throttle:80};this.settings=Object.assign(Object.assign({},default_settings),settings);if(!this._validateProperty(this.settings.property)){this.settings.property="height"}if(this.settings.events){var $this=this;this._bind=function(){$this._applyAll($this)};if(document.readyState!=="loading"){this._bind()}else{document.addEventListener("DOMContentLoaded",this._bind,{once:true})}if(this.settings.throttle>0)this._bind=this._throttle(this._bind,this.settings.throttle);this._init()}}MatchHeight.prototype._init=function(){window.addEventListener("resize",this._bind);window.addEventListener("orientationchange",this._bind)};MatchHeight.prototype._unbind=function(){window.removeEventListener("resize",this._bind);window.removeEventListener("orientationchange",this._bind)};MatchHeight.prototype._merge=function(o1,o2){if(o1!=null){for(var i in o1){o2[i]=o1[i]}}return o2};MatchHeight.prototype._throttle=function(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()}}};MatchHeight.prototype._applyAll=function($this){if($this==null){$this=this}$this._apply();if($this.settings.attributeName&&$this._validateProperty($this.settings.attributeName)){$this._applyDataApi($this.settings.attributeName)}$this._applyDataApi("data-match-height");$this._applyDataApi("data-mh")};MatchHeight.prototype._validateProperty=function(value){return String(value).toLowerCase().match(/^([a-z-]{2,})$/)};MatchHeight.prototype._parse=function(value){return parseFloat(value)||0};MatchHeight.prototype._rows=function(elements){var $this=this;var tolerance=1,lastTop=-1,listRows=[],rows=[];elements.forEach($that=>{var top=$that.getBoundingClientRect().top-$this._parse(window.getComputedStyle($that).getPropertyValue("margin-top"));if(lastTop!=-1&&Math.floor(Math.abs(lastTop-top))>=tolerance){listRows.push(rows);rows=[];lastTop=-1}rows.push($that);lastTop=top});listRows.push(rows);return listRows};MatchHeight.prototype._applyDataApi=function(property){var $this=this;var $row=this.wrapEl.querySelectorAll("["+property+"]");$row.forEach($el=>{var groupId=$el.getAttribute(property);$this.settings=$this._merge({attributeName:property,attributeValue:groupId},$this.settings);$this._apply()})};MatchHeight.prototype._remove=function(){var $elements=[];var opts=this.settings;if(opts.elements){$elements=this.wrapEl.querySelectorAll(opts.elements)}else{if(opts.attributeName&&opts.attributeValue){$elements=this.wrapEl.querySelectorAll("["+opts.attributeName+'="'+opts.attributeValue+'"]')}}$elements.forEach(item=>{item.style.setProperty(opts.property,"");if(item.getAttribute("style")==="")item.removeAttribute("style")})};MatchHeight.prototype._apply=function(){var $this=this;var opts=$this.settings;var $elements=[];if(opts.elements&&opts.elements.trim()!=""){$elements=this.wrapEl.querySelectorAll(opts.elements)}else{if(opts.attributeName&&$this._validateProperty(opts.attributeName)&&opts.attributeValue&&opts.attributeValue.trim()!=""){$elements=this.wrapEl.querySelectorAll("["+opts.attributeName+'="'+opts.attributeValue+'"]')}}var rows=[$elements];if(opts.byRow&&!opts.target){$elements.forEach($that=>{var display=window.getComputedStyle($that).getPropertyValue("display");if(display&&(display!=="inline-block"&&display!=="flex"&&display!=="inline-flex")){display="display: block; "}$that.setAttribute("style-cache",$that.getAttribute("style")||"");$that.setAttribute("style",display+"padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-top-width: 0; border-bottom-width: 0; height: 100px; overflow: hidden;")});rows=this._rows($elements);$elements.forEach($that=>{$that.setAttribute("style",$that.getAttribute("style-cache")||"");$that.removeAttribute("style-cache");if($that.getAttribute("style")==="")$that.removeAttribute("style")})}rows.forEach($row=>{var targetHeight=0;if(!opts.target){if(opts.byRow&&$row.length<=1){$row.forEach($that=>{$this._resetStyle($that,opts.property)});return}$row.forEach($that=>{var style=$that.getAttribute("style")||"",display=window.getComputedStyle($that).getPropertyValue("display");if(display&&(display!=="inline-block"&&display!=="flex"&&display!=="inline-flex")){display="block"}$that.setAttribute("style","display: "+display+";");var isTarget=true;if(opts.remove){if(opts.remove instanceof NodeList){opts.remove.forEach($el=>{if($that===$el){isTarget=false}})}else{if($that===opts.remove){isTarget=false}}}if(isTarget){if($that.getBoundingClientRect().height>targetHeight){targetHeight=$that.getBoundingClientRect().height}}if(style){$that.setAttribute("style",style)}else{$that.style.setProperty("display","")}if($that.getAttribute("style")==="")$that.removeAttribute("style")})}else{targetHeight=opts.target.getBoundingClientRect().height}$row.forEach($that=>{var verticalPadding=0;if(opts.target&&$that===opts.target){return}verticalPadding=$this._parse(window.getComputedStyle($that).getPropertyValue("padding-top"))+$this._parse(window.getComputedStyle($that).getPropertyValue("padding-bottom"))+$this._parse(window.getComputedStyle($that).getPropertyValue("border-top-width"))+$this._parse(window.getComputedStyle($that).getPropertyValue("border-bottom-width"));$that.style.setProperty(opts.property,targetHeight-verticalPadding+"px");if($that.getBoundingClientRect().height<targetHeight){$that.style.setProperty(opts.property,targetHeight+"px")}if(opts.remove){if(opts.remove instanceof NodeList){opts.remove.forEach($el=>{if($that===$el){$this._resetStyle($el,opts.property)}})}else{if($that===opts.remove){$this._resetStyle($that,opts.property)}}}})})};MatchHeight.prototype._resetStyle=function($that,property){if(this._validateProperty(property)){$that.style.setProperty(property,"");if($that.getAttribute("style")==="")$that.removeAttribute("style")}}})();
+"use strict";(function(){HTMLElement.prototype.matchHeight=function(settings){return new MatchHeight(this,settings)};function MatchHeight(wrapEl,settings){this.wrapEl=wrapEl;let default_settings={elements:null,byRow:true,target:null,attributeName:null,attributeValue:null,property:"height",remove:null,events:true,throttle:80};this.settings=Object.assign(Object.assign({},default_settings),settings);if(!this._validateProperty(this.settings.property)){this.settings.property="height"}if(this.settings.events){var $this=this;this._bind=function(){$this._applyAll($this)};if(document.readyState!=="loading"){this._bind()}else{document.addEventListener("DOMContentLoaded",this._bind,{once:true})}if(this.settings.throttle&&this.settings.throttle>0)this._bind=this._throttle(this._bind,this.settings.throttle);this._init()}}MatchHeight.prototype._init=function(){window.addEventListener("resize",this._bind);window.addEventListener("orientationchange",this._bind)};MatchHeight.prototype._unbind=function(){window.removeEventListener("resize",this._bind);window.removeEventListener("orientationchange",this._bind)};MatchHeight.prototype._merge=function(o1,o2){if(o1!=null){for(var i in o1){o2[i]=o1[i]}}return o2};MatchHeight.prototype._throttle=function(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()}}};MatchHeight.prototype._applyAll=function($this){if($this==null){$this=this}$this._apply();if($this.settings.attributeName&&$this._validateProperty($this.settings.attributeName)){$this._applyDataApi($this.settings.attributeName)}$this._applyDataApi("data-match-height");$this._applyDataApi("data-mh")};MatchHeight.prototype._validateProperty=function(value){return String(value).toLowerCase().match(/^([a-z-]{2,})$/)};MatchHeight.prototype._parse=function(value){return parseFloat(value)||0};MatchHeight.prototype._rows=function(elements){var $this=this;var tolerance=1,lastTop=-1,listRows=[],rows=[];elements.forEach($that=>{var top=$that.getBoundingClientRect().top-$this._parse(window.getComputedStyle($that).getPropertyValue("margin-top"));if(lastTop!=-1&&Math.floor(Math.abs(lastTop-top))>=tolerance){listRows.push(rows);rows=[];lastTop=-1}rows.push($that);lastTop=top});listRows.push(rows);return listRows};MatchHeight.prototype._applyDataApi=function(property){var $this=this;var $row=Array.from(this.wrapEl.querySelectorAll("["+property+"]"));$row.forEach($el=>{var groupId=$el.getAttribute(property);$this.settings=$this._merge({attributeName:property,attributeValue:groupId},$this.settings);$this._apply()})};MatchHeight.prototype._remove=function(){var $elements=[];var opts=this.settings;if(opts.elements){$elements=Array.from(this.wrapEl.querySelectorAll(opts.elements))}else{if(opts.attributeName&&opts.attributeValue){$elements=Array.from(this.wrapEl.querySelectorAll("["+opts.attributeName+'="'+opts.attributeValue+'"]'))}}$elements.forEach(item=>{item.style.setProperty(opts.property,"");if(item.getAttribute("style")==="")item.removeAttribute("style")})};MatchHeight.prototype._apply=function(){var $this=this;var opts=$this.settings;var $elements=[];if(opts.elements&&opts.elements.trim()!=""){$elements=Array.from(this.wrapEl.querySelectorAll(opts.elements))}else{if(opts.attributeName&&$this._validateProperty(opts.attributeName)&&opts.attributeValue&&opts.attributeValue.trim()!=""){$elements=Array.from(this.wrapEl.querySelectorAll("["+opts.attributeName+'="'+opts.attributeValue+'"]'))}}var rows=[$elements];if(opts.byRow&&!opts.target){$elements.forEach($that=>{var display=window.getComputedStyle($that).getPropertyValue("display");if(display&&(display!=="inline-block"&&display!=="flex"&&display!=="inline-flex")){display="display: block; "}$that.setAttribute("style-cache",$that.getAttribute("style")||"");$that.setAttribute("style",display+"padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-top-width: 0; border-bottom-width: 0; height: 100px; overflow: hidden;")});rows=this._rows($elements);$elements.forEach($that=>{$that.setAttribute("style",$that.getAttribute("style-cache")||"");$that.removeAttribute("style-cache");if($that.getAttribute("style")==="")$that.removeAttribute("style")})}rows.forEach($row=>{var targetHeight=0;if(!opts.target){if(opts.byRow&&$row.length<=1){$row.forEach($that=>{$this._resetStyle($that,opts.property)});return}$row.forEach($that=>{var style=$that.getAttribute("style")||"",display=window.getComputedStyle($that).getPropertyValue("display");if(display&&(display!=="inline-block"&&display!=="flex"&&display!=="inline-flex")){display="block"}$that.setAttribute("style","display: "+display+";");var isTarget=true;if(opts.remove){if(opts.remove instanceof NodeList){opts.remove.forEach($el=>{if($that===$el){isTarget=false}})}else{if($that===opts.remove){isTarget=false}}}if(isTarget){if($that.getBoundingClientRect().height>targetHeight){targetHeight=$that.getBoundingClientRect().height}}if(style){$that.setAttribute("style",style)}else{$that.style.setProperty("display","")}if($that.getAttribute("style")==="")$that.removeAttribute("style")})}else{targetHeight=opts.target.getBoundingClientRect().height}$row.forEach($that=>{var verticalPadding=0;if(opts.target&&$that===opts.target){return}verticalPadding=$this._parse(window.getComputedStyle($that).getPropertyValue("padding-top"))+$this._parse(window.getComputedStyle($that).getPropertyValue("padding-bottom"))+$this._parse(window.getComputedStyle($that).getPropertyValue("border-top-width"))+$this._parse(window.getComputedStyle($that).getPropertyValue("border-bottom-width"));$that.style.setProperty(opts.property,targetHeight-verticalPadding+"px");if($that.getBoundingClientRect().height<targetHeight){$that.style.setProperty(opts.property,targetHeight+"px")}if(opts.remove){if(opts.remove instanceof NodeList){var removedItems=Array.from(opts.remove);removedItems.forEach($el=>{if($that===$el){$this._resetStyle($el,opts.property)}})}else{if($that===opts.remove){$this._resetStyle($that,opts.property)}}}})})};MatchHeight.prototype._resetStyle=function($that,property){if(this._validateProperty(property)){$that.style.setProperty(property,"");if($that.getAttribute("style")==="")$that.removeAttribute("style")}}})();

package.json

 {
   "name": "vanilla-match-height",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Simone Miterangelis <[e-mail]>",

README.md

 # vanilla-match-height.js #
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
-[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-JavaScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
 [![Socket Badge](https://socket.dev/api/badge/npm/package/vanilla-match-height)](https://socket.dev/npm/package/vanilla-match-height)
@@ -6,0 +6,0 @@ [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vanilla-match-height/badge)](https://www.jsdelivr.com/package/npm/vanilla-match-height)

src/vanilla-match-height.ts

 /**
- * vanilla-match-height v1.2.1 by @mitera
+ * vanilla-match-height v1.2.2 by @mitera
  * Simone Miterangelis <[e-mail]>
@@ -12,3 +12,3 @@ * License: MIT
 interface MatchHeight {
-    wrapEl: HTMLElement,
+    wrapEl: HTMLElement;
     settings: Settings;
@@ -21,5 +21,5 @@ _bind(): void;
     _applyAll($this: MatchHeight): void;
-    _validateProperty(value: string): RegExpMatchArray | null;
+    _validateProperty(value?: string | null): RegExpMatchArray | null;
     _parse(value: string): number;
-    _rows(elements: [HTMLElement]): HTMLElement[][];
+    _rows(elements: HTMLElement[]): HTMLElement[][];
     _applyDataApi(property: string): void;
@@ -32,11 +32,11 @@ _remove(): void;
 interface Settings {
-    elements?: string | null,
-    byRow: boolean,
-    target?: HTMLElement | null,
-    attributeName?: string | null,
-    attributeValue?: string | null,
-    property?: string | null,
-    remove?: HTMLElement | null,
-    events: boolean,
-    throttle: number
+    elements?: string | null;
+    byRow?: boolean | null;
+    target?: HTMLElement | null;
+    attributeName?: string | null;
+    attributeValue?: string | null;
+    property?: string | null;
+    remove?: HTMLElement | null;
+    events?: boolean | null;
+    throttle?: number | null;
 }
@@ -76,3 +76,3 @@
 
-        if (!this._validateProperty(<string>this.settings.property)) {
+        if (!this._validateProperty(this.settings.property)) {
             this.settings.property = 'height';
@@ -91,3 +91,3 @@ }
 
-            if (this.settings.throttle > 0) this._bind = this._throttle(this._bind, this.settings.throttle);
+            if (this.settings.throttle && this.settings.throttle > 0) this._bind = this._throttle(this._bind, this.settings.throttle);
             this._init();
@@ -169,4 +169,4 @@ }
         $this._apply();
-        if ($this.settings.attributeName && $this._validateProperty(<string>$this.settings.attributeName)) {
-            $this._applyDataApi(<string>$this.settings.attributeName);
+        if ($this.settings.attributeName && $this._validateProperty($this.settings.attributeName)) {
+            $this._applyDataApi($this.settings.attributeName);
         }
@@ -206,3 +206,3 @@ $this._applyDataApi('data-match-height');
      */
-    MatchHeight.prototype._rows = function(elements: [HTMLElement]) {
+    MatchHeight.prototype._rows = function(elements: HTMLElement[]) {
         var $this = this;
@@ -243,3 +243,3 @@ var tolerance: number = 1,
 
-        var $row: HTMLElement[] = this.wrapEl.querySelectorAll('[' + property + ']');
+        var $row: HTMLElement[] = Array.from(this.wrapEl.querySelectorAll('[' + property + ']'));
         // generate groups by their groupId set by elements using data-match-height
@@ -261,6 +261,6 @@ $row.forEach(($el) => {
         if (opts.elements) {
-            $elements = this.wrapEl.querySelectorAll(opts.elements);
+            $elements = Array.from(this.wrapEl.querySelectorAll(opts.elements));
         } else {
             if (opts.attributeName && opts.attributeValue) {
-                $elements = this.wrapEl.querySelectorAll('[' + opts.attributeName + '="' + opts.attributeValue + '"]');
+                $elements = Array.from(this.wrapEl.querySelectorAll('[' + opts.attributeName + '="' + opts.attributeValue + '"]'));
             }
@@ -284,6 +284,6 @@ }
         if (opts.elements && opts.elements.trim() != '') {
-            $elements = this.wrapEl.querySelectorAll(opts.elements);
+            $elements = Array.from(this.wrapEl.querySelectorAll(opts.elements));
         } else {
             if (opts.attributeName && $this._validateProperty(opts.attributeName) && opts.attributeValue && opts.attributeValue.trim() != '') {
-                $elements = this.wrapEl.querySelectorAll('[' + opts.attributeName + '="' + opts.attributeValue + '"]');
+                $elements = Array.from(this.wrapEl.querySelectorAll('[' + opts.attributeName + '="' + opts.attributeValue + '"]'));
             }
@@ -407,3 +407,4 @@ }
                     if (opts.remove instanceof NodeList) {
-                        opts.remove.forEach(($el: HTMLElement) => {
+                        var removedItems: HTMLElement[] = Array.from(opts.remove);
+                        removedItems.forEach(($el: HTMLElement) => {
                             if ($that === $el) {
@@ -410,0 +411,0 @@ $this._resetStyle($el, opts.property);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

181414

increased by0.15%

Lines of code

1021

increased by0.2%

No dependency changes