vanilla-match-height - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

CHANGELOG.md

@@ -6,2 +6,11 @@ <a name="0.0.4"></a>
 
+- Added _remove method
+- Removed empty style from elements
+- Fixed javascript link on test page
+
+<a name="0.0.4"></a>
+# 0.0.4 (2023-11-19)
+
+### release summary
+
 - update document and test
@@ -8,0 +17,0 @@

dist/vanilla-match-height.js

 /**
- * vanilla-match-height v0.0.4 by @mitera
+ * vanilla-match-height v0.0.5 by @mitera
  * Simone Miterangelis <[e-mail]>
@@ -177,2 +177,22 @@ * License: MIT
     /*
+    *  _remove
+    *  remove matchHeight to given elements
+    */
+    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');
+        });
+    }
+
+    /*
     *  _apply
@@ -220,2 +240,3 @@ *  apply matchHeight to given elements
                 $that.removeAttribute('style-cache');
+                if ($that.getAttribute('style') == '') $that.removeAttribute('style');
             });
@@ -276,2 +297,4 @@ }
                     }
+
+                    if ($that.getAttribute('style') == '') $that.removeAttribute('style');
                 });
@@ -309,2 +332,3 @@
                                 eval('$el.style.' + opts.property + ' = \'\';');
+                                if ($el.getAttribute('style') == '') $el.removeAttribute('style');
                             }
@@ -315,2 +339,3 @@ });
                             eval('$that.style.' + opts.property + ' = \'\';');
+                            if ($that.getAttribute('style') == '') $that.removeAttribute('style');
                         }
@@ -317,0 +342,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};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);this._init()}MatchHeight.prototype._init=function(){var $this=this;document.addEventListener("DOMContentLoaded",function(event){$this._apply();if($this._validateProperty($this.settings.attributeName)){$this._applyDataApi($this.settings.attributeName)}$this._applyDataApi("data-match-height");$this._applyDataApi("data-mh")});window.addEventListener("resize",function(event){$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._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")})}rows.forEach($row=>{var targetHeight=0;if(!opts.target){if(opts.byRow&&$row.length<=1){$row.forEach($that=>{eval("$that.style."+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=""}})}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){eval("$el.style."+opts.property+" = '';")}})}else{if($that===opts.remove){eval("$that.style."+opts.property+" = '';")}}}})})}})();
+(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};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);this._init()}MatchHeight.prototype._init=function(){var $this=this;document.addEventListener("DOMContentLoaded",function(event){$this._apply();if($this._validateProperty($this.settings.attributeName)){$this._applyDataApi($this.settings.attributeName)}$this._applyDataApi("data-match-height");$this._applyDataApi("data-mh")});window.addEventListener("resize",function(event){$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=>{eval("$that.style."+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){eval("$el.style."+opts.property+" = '';");if($el.getAttribute("style")=="")$el.removeAttribute("style")}})}else{if($that===opts.remove){eval("$that.style."+opts.property+" = '';");if($that.getAttribute("style")=="")$that.removeAttribute("style")}}}})})}})();

package.json

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

README.md

@@ -155,2 +155,8 @@ # vanilla-match-height.js #
 
+#### Remove match height from elements
+
+Reset inline style property
+
+    document.body.matchHeight({elements: '.item'})._remove();
+
 ### Known limitations
@@ -157,0 +163,0 @@

vanilla-match-height.js

 /**
- * vanilla-match-height v0.0.4 by @mitera
+ * vanilla-match-height v0.0.5 by @mitera
  * Simone Miterangelis <[e-mail]>
@@ -177,2 +177,22 @@ * License: MIT
     /*
+    *  _remove
+    *  remove matchHeight to given elements
+    */
+    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');
+        });
+    }
+
+    /*
     *  _apply
@@ -220,2 +240,3 @@ *  apply matchHeight to given elements
                 $that.removeAttribute('style-cache');
+                if ($that.getAttribute('style') == '') $that.removeAttribute('style');
             });
@@ -276,2 +297,4 @@ }
                     }
+
+                    if ($that.getAttribute('style') == '') $that.removeAttribute('style');
                 });
@@ -309,2 +332,3 @@
                                 eval('$el.style.' + opts.property + ' = \'\';');
+                                if ($el.getAttribute('style') == '') $el.removeAttribute('style');
                             }
@@ -315,2 +339,3 @@ });
                             eval('$that.style.' + opts.property + ' = \'\';');
+                            if ($that.getAttribute('style') == '') $that.removeAttribute('style');
                         }
@@ -317,0 +342,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

168573

increased by2.04%

Lines of code

842

increased by5.78%

Number of lines in readme file

177

increased by3.51%

No dependency changes