vanilla-match-height - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,9 @@
+<a name="1.1.0"></a>
+# 1.1.0 (2023-12-12)
+
+### release summary
+
+- Code optimize
+- Update document
+
 <a name="1.0.6"></a>
@@ -2,0 +10,0 @@ # 1.0.6 (2023-12-11)

dist/vanilla-match-height.js

 /**
- * vanilla-match-height v1.0.6 by @mitera
+ * vanilla-match-height v1.1.0 by @mitera
  * Simone Miterangelis <[e-mail]>
@@ -67,3 +67,3 @@ * License: MIT
             window.addEventListener("DOMContentLoaded", this.bind, { once: true });
-            this._init(true);
+            this._init();
         }
@@ -361,3 +361,3 @@ }
         if (this._validateProperty(property)) {
-            $that.style.setProperty(property,  '');
+            $that.style.setProperty(property, '');
             if ($that.getAttribute('style') === '') $that.removeAttribute('style');
@@ -364,0 +364,0 @@ }

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"}if(this.settings.events){var $this=this;this.bind=function(){$this._applyAll($this)};window.addEventListener("DOMContentLoaded",this.bind,{once:true});this._init(true)}}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._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);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=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=>{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){$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.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")}}})();
+(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"}if(this.settings.events){var $this=this;this.bind=function(){$this._applyAll($this)};window.addEventListener("DOMContentLoaded",this.bind,{once:true});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._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);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=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=>{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){$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.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")}}})();

package.json

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

README.md

@@ -17,3 +17,3 @@ # vanilla-match-height.js #
 
-See the [vanilla-match-height.js demo](https://github.com/mitera/vanilla-match-height/archive/refs/heads/master.zip).
+See the [vanilla-match-height.js demo](https://codepen.io/mitera/pen/mdvaKBN).
 
@@ -45,2 +45,6 @@ [![vanilla-match-height.js screenshot](https://github.com/mitera/vanilla-match-height/blob/master/vanilla-match-height.jpg)](https://github.com/mitera/vanilla-match-height/archive/refs/heads/master.zip)
 
+CDN via jsDelivr
+
+    <script src="https://cdn.jsdelivr.net/npm/vanilla-match-height@latest/dist/vanilla-match-height.min.js" type="text/javascript"></script>
+
 Download [vanilla-match-height.js](https://github.com/mitera/vanilla-match-height/blob/master/vanilla-match-height.js) and include the script in your HTML file:
@@ -47,0 +51,0 @@

vanilla-match-height.js

 /**
- * vanilla-match-height v1.0.6 by @mitera
+ * vanilla-match-height v1.1.0 by @mitera
  * Simone Miterangelis <[e-mail]>
@@ -67,3 +67,3 @@ * License: MIT
             window.addEventListener("DOMContentLoaded", this.bind, { once: true });
-            this._init(true);
+            this._init();
         }
@@ -361,3 +361,3 @@ }
         if (this._validateProperty(property)) {
-            $that.style.setProperty(property,  '');
+            $that.style.setProperty(property, '');
             if ($that.getAttribute('style') === '') $that.removeAttribute('style');
@@ -364,0 +364,0 @@ }

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

174273

increased by0.13%

Number of lines in readme file

262

increased by1.55%

No dependency changes