vanilla-match-height - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

CHANGELOG.md

@@ -0,1 +1,10 @@
+<a name="1.0.4"></a>
+# 1.0.4 (2023-12-03)
+
+### release summary
+
+- Read computed style of elements
+- DOMContentLoaded with once option true 
+- Update document and test
+
 <a name="1.0.3"></a>
@@ -2,0 +11,0 @@ # 1.0.3 (2023-12-03)

dist/vanilla-match-height.js

 /**
- * vanilla-match-height v1.0.3 by @mitera
+ * vanilla-match-height v1.0.4 by @mitera
  * Simone Miterangelis <[e-mail]>
@@ -68,3 +68,3 @@ * License: MIT
             this.bind = function(){ $this._applyAll($this); };
-            this._init();
+            this._init(true);
         }
@@ -75,6 +75,7 @@ }
      * Initialize the application
+     @param {boolean} DOMContentLoaded
      */
-    MatchHeight.prototype._init = function() {
+    MatchHeight.prototype._init = function(DOMContentLoaded) {
 
-        window.addEventListener("DOMContentLoaded", this.bind);
+        if (DOMContentLoaded) window.addEventListener("DOMContentLoaded", this.bind, { once: true });
 
@@ -91,4 +92,2 @@ window.addEventListener("resize", this.bind);
 
-        window.removeEventListener("DOMContentLoaded", this.bind);
-
         window.removeEventListener("resize", this.bind);
@@ -158,3 +157,3 @@
 
-            var top = $that.getBoundingClientRect().top - $this._parse($that.style.marginTop);
+            var top = $that.getBoundingClientRect().top - $this._parse(window.getComputedStyle($that).getPropertyValue('margin-top'));
 
@@ -250,3 +249,3 @@ // if the row top is the same, add to the row group
             $elements.forEach(($that) => {
-                var display = $that.style.display;
+                var display = window.getComputedStyle($that).getPropertyValue('display');
 
@@ -290,3 +289,3 @@ // temporarily force a usable display value
                     var style = $that.getAttribute('style') || '',
-                        display = $that.style.display;
+                        display = window.getComputedStyle($that).getPropertyValue('display');
 
@@ -347,4 +346,6 @@ // temporarily force a usable display value
                 // handle padding and border correctly (required when not using border-box)
-                verticalPadding += $this._parse($that.style.borderTopWidth) + $this._parse($that.style.borderBottomWidth);
-                verticalPadding += $this._parse($that.style.paddingTop) + $this._parse($that.style.paddingBottom);
+                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'));
 
@@ -351,0 +352,0 @@ // set the height (accounting for padding and border)

dist/vanilla-match-height.min.js

@@ -1,1 +0,1 @@
-(function(){"use strict";Element.prototype.matchHeight=function(settings){return new MatchHeight(this,settings)};if(typeof Object.merge!="function"){Object.merge=function(o1,o2){for(var i in o1){o2[i]=o1[i]}return o2}}function MatchHeight(wrapEl,settings){this.wrapEl=wrapEl;let default_settings={elements:"",byRow:true,target:null,attributeName:null,attributeValue:null,property:"height",remove:null,events:true};if(settings!=null){this.settings=Object.merge(settings,default_settings)}else{this.settings=default_settings}if(!this._validateProperty(this.settings.property)){this.settings.property="height"}this.settings.property=this._dashToCamel(this.settings.property);if(this.settings.events){var $this=this;this.bind=function(){$this._applyAll($this)};this._init()}}MatchHeight.prototype._init=function(){window.addEventListener("DOMContentLoaded",this.bind);window.addEventListener("resize",this.bind);window.addEventListener("orientationchange",this.bind)};MatchHeight.prototype._unbind=function(){window.removeEventListener("DOMContentLoaded",this.bind);window.removeEventListener("resize",this.bind);window.removeEventListener("orientationchange",this.bind)};MatchHeight.prototype._applyAll=function($this){if($this==null){$this=this}$this._apply();if($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=null,listRows=[],rows=[];elements.forEach($that=>{var top=$that.getBoundingClientRect().top-$this._parse($that.style.marginTop);if(lastTop!=null&&Math.floor(Math.abs(lastTop-top))>=tolerance){listRows.push(rows);rows=[];lastTop=null;rows.push($that)}else{rows.push($that)}lastTop=top});listRows.push(rows);return listRows};MatchHeight.prototype._dashToCamel=function(input){return input.toLowerCase().replace(/-(.)/g,function(match,group1){return group1.toUpperCase()})};MatchHeight.prototype._applyDataApi=function(property){var $this=this;var $row=this.wrapEl.querySelectorAll("["+property+"]");$row.forEach($el=>{var groupId=$el.getAttribute(property);$this.settings=Object.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=>{eval("item.style."+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){$elements=this.wrapEl.querySelectorAll(opts.elements)}else{if(opts.attributeName&&opts.attributeValue){$elements=this.wrapEl.querySelectorAll("["+opts.attributeName+'="'+opts.attributeValue+'"]')}}var rows=[$elements];if(opts.byRow&&!opts.target){$elements.forEach($that=>{var display=$that.style.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=$that.style.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.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($that.style.borderTopWidth)+$this._parse($that.style.borderBottomWidth);verticalPadding+=$this._parse($that.style.paddingTop)+$this._parse($that.style.paddingBottom);eval("$that.style."+opts.property+" = '"+(targetHeight-verticalPadding)+"px'");if($that.getBoundingClientRect().height<targetHeight){eval("$that.style."+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)){eval("$that.style."+property+" = '';");if($that.getAttribute("style")==="")$that.removeAttribute("style")}}})();
+(function(){"use strict";Element.prototype.matchHeight=function(settings){return new MatchHeight(this,settings)};if(typeof Object.merge!="function"){Object.merge=function(o1,o2){for(var i in o1){o2[i]=o1[i]}return o2}}function MatchHeight(wrapEl,settings){this.wrapEl=wrapEl;let default_settings={elements:"",byRow:true,target:null,attributeName:null,attributeValue:null,property:"height",remove:null,events:true};if(settings!=null){this.settings=Object.merge(settings,default_settings)}else{this.settings=default_settings}if(!this._validateProperty(this.settings.property)){this.settings.property="height"}this.settings.property=this._dashToCamel(this.settings.property);if(this.settings.events){var $this=this;this.bind=function(){$this._applyAll($this)};this._init(true)}}MatchHeight.prototype._init=function(DOMContentLoaded){if(DOMContentLoaded)window.addEventListener("DOMContentLoaded",this.bind,{once:true});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._applyAll=function($this){if($this==null){$this=this}$this._apply();if($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=null,listRows=[],rows=[];elements.forEach($that=>{var top=$that.getBoundingClientRect().top-$this._parse(window.getComputedStyle($that).getPropertyValue("margin-top"));if(lastTop!=null&&Math.floor(Math.abs(lastTop-top))>=tolerance){listRows.push(rows);rows=[];lastTop=null;rows.push($that)}else{rows.push($that)}lastTop=top});listRows.push(rows);return listRows};MatchHeight.prototype._dashToCamel=function(input){return input.toLowerCase().replace(/-(.)/g,function(match,group1){return group1.toUpperCase()})};MatchHeight.prototype._applyDataApi=function(property){var $this=this;var $row=this.wrapEl.querySelectorAll("["+property+"]");$row.forEach($el=>{var groupId=$el.getAttribute(property);$this.settings=Object.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=>{eval("item.style."+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){$elements=this.wrapEl.querySelectorAll(opts.elements)}else{if(opts.attributeName&&opts.attributeValue){$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.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"));eval("$that.style."+opts.property+" = '"+(targetHeight-verticalPadding)+"px'");if($that.getBoundingClientRect().height<targetHeight){eval("$that.style."+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)){eval("$that.style."+property+" = '';");if($that.getAttribute("style")==="")$that.removeAttribute("style")}}})();

package.json

 {
   "name": "vanilla-match-height",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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/)
+[![Socket Badge](https://socket.dev/api/badge/npm/package/vanilla-match-height)](https://socket.dev/npm/package/vanilla-match-height)
+[![npm](https://img.shields.io/npm/v/vanilla-match-height.svg?logo=npm&logoColor=fff&label=npm)](https://www.npmjs.com/package/multiple-select-vanilla)
+
 ## *Inspired by:* jquery-match-height
+
 > *matchHeight:* makes the height of all selected elements exactly equal
@@ -4,0 +11,0 @@

vanilla-match-height.js

 /**
- * vanilla-match-height v1.0.3 by @mitera
+ * vanilla-match-height v1.0.4 by @mitera
  * Simone Miterangelis <[e-mail]>
@@ -68,3 +68,3 @@ * License: MIT
             this.bind = function(){ $this._applyAll($this); };
-            this._init();
+            this._init(true);
         }
@@ -75,6 +75,7 @@ }
      * Initialize the application
+     @param {boolean} DOMContentLoaded
      */
-    MatchHeight.prototype._init = function() {
+    MatchHeight.prototype._init = function(DOMContentLoaded) {
 
-        window.addEventListener("DOMContentLoaded", this.bind);
+        if (DOMContentLoaded) window.addEventListener("DOMContentLoaded", this.bind, { once: true });
 
@@ -91,4 +92,2 @@ window.addEventListener("resize", this.bind);
 
-        window.removeEventListener("DOMContentLoaded", this.bind);
-
         window.removeEventListener("resize", this.bind);
@@ -158,3 +157,3 @@
 
-            var top = $that.getBoundingClientRect().top - $this._parse($that.style.marginTop);
+            var top = $that.getBoundingClientRect().top - $this._parse(window.getComputedStyle($that).getPropertyValue('margin-top'));
 
@@ -250,3 +249,3 @@ // if the row top is the same, add to the row group
             $elements.forEach(($that) => {
-                var display = $that.style.display;
+                var display = window.getComputedStyle($that).getPropertyValue('display');
 
@@ -290,3 +289,3 @@ // temporarily force a usable display value
                     var style = $that.getAttribute('style') || '',
-                        display = $that.style.display;
+                        display = window.getComputedStyle($that).getPropertyValue('display');
 
@@ -347,4 +346,6 @@ // temporarily force a usable display value
                 // handle padding and border correctly (required when not using border-box)
-                verticalPadding += $this._parse($that.style.borderTopWidth) + $this._parse($that.style.borderBottomWidth);
-                verticalPadding += $this._parse($that.style.paddingTop) + $this._parse($that.style.paddingBottom);
+                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'));
 
@@ -351,0 +352,0 @@ // set the height (accounting for padding and border)

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

175333

increased by0.93%

Lines of code

904

increased by0.44%

Number of lines in readme file

258

increased by2.79%

No dependency changes