vanilla-match-height
Advanced tools
Comparing version 1.1.2 to 1.2.0
@@ -0,1 +1,9 @@ | ||
<a name="1.2.0"></a> | ||
# 1.2.0 (2023-12-17) | ||
### release summary | ||
- Refactor to TypeScript | ||
- Update document | ||
<a name="1.1.2"></a> | ||
@@ -2,0 +10,0 @@ # 1.1.2 (2023-12-17) |
/** | ||
* vanilla-match-height v1.1.2 by @mitera | ||
* vanilla-match-height v1.2.0 by @mitera | ||
* Simone Miterangelis <simone@mite.it> | ||
@@ -7,3 +7,3 @@ * License: MIT | ||
interface HTMLElement { | ||
matchHeight(arg0: Settings): MatchHeight; | ||
matchHeight(settings: Settings): MatchHeight; | ||
} | ||
@@ -14,3 +14,3 @@ interface MatchHeight { | ||
_bind(): void; | ||
_merge(o1: any, o2: any): any; | ||
_merge(o1: Settings, o2: Settings): Settings; | ||
_init(): void; | ||
@@ -29,11 +29,11 @@ _unbind(): void; | ||
interface Settings { | ||
elements?: string; | ||
elements?: string | null; | ||
byRow: boolean; | ||
target?: HTMLElement; | ||
attributeName?: string; | ||
attributeValue?: string; | ||
property?: string; | ||
remove?: HTMLElement; | ||
target?: HTMLElement | null; | ||
attributeName?: string | null; | ||
attributeValue?: string | null; | ||
property?: string | null; | ||
remove?: HTMLElement | null; | ||
events: boolean; | ||
throttle: number; | ||
} |
"use strict"; | ||
/** | ||
* vanilla-match-height v1.1.2 by @mitera | ||
* vanilla-match-height v1.2.0 by @mitera | ||
* Simone Miterangelis <simone@mite.it> | ||
@@ -24,9 +24,9 @@ * License: MIT | ||
let default_settings = { | ||
elements: undefined, | ||
elements: null, | ||
byRow: true, | ||
target: undefined, | ||
attributeName: undefined, | ||
attributeValue: undefined, | ||
target: null, | ||
attributeName: null, | ||
attributeValue: null, | ||
property: 'height', | ||
remove: undefined, | ||
remove: null, | ||
events: true, | ||
@@ -70,5 +70,5 @@ throttle: 80 | ||
* | ||
* @param {Object} o1 Object 1 | ||
* @param {Object} o2 Object 2 | ||
* @return {Object} | ||
* @param {Settings} o1 Object 1 | ||
* @param {Settings} o2 Object 2 | ||
* @return {Settings} | ||
*/ | ||
@@ -78,3 +78,2 @@ MatchHeight.prototype._merge = function (o1, o2) { | ||
for (var i in o1) { | ||
// @ts-ignore | ||
o2[i] = o1[i]; | ||
@@ -81,0 +80,0 @@ } |
@@ -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:undefined,byRow:true,target:undefined,attributeName:undefined,attributeValue:undefined,property:"height",remove:undefined,events:true,throttle:80};if(settings!=null){this.settings=this._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});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};if(settings!=null){this.settings=this._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});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")}}})(); |
{ | ||
"name": "vanilla-match-height", | ||
"version": "1.1.2", | ||
"version": "1.2.0", | ||
"license": "MIT", | ||
@@ -5,0 +5,0 @@ "author": "Simone Miterangelis <simone@mite.it>", |
@@ -88,8 +88,8 @@ # vanilla-match-height.js # | ||
{ | ||
elements: undefined, | ||
elements: null, | ||
byRow: true, | ||
property: 'height', | ||
target: undefined, | ||
remove: undefined, | ||
attributeName: undefined, | ||
target: null, | ||
remove: null, | ||
attributeName: null, | ||
events: true, | ||
@@ -96,0 +96,0 @@ throttle: 80 |
/** | ||
* vanilla-match-height v1.1.2 by @mitera | ||
* vanilla-match-height v1.2.0 by @mitera | ||
* Simone Miterangelis <simone@mite.it> | ||
@@ -8,3 +8,3 @@ * License: MIT | ||
interface HTMLElement { | ||
matchHeight(arg0: Settings): MatchHeight; | ||
matchHeight(settings: Settings): MatchHeight; | ||
} | ||
@@ -16,3 +16,3 @@ | ||
_bind(): void; | ||
_merge(o1: any, o2: any): any; | ||
_merge(o1: Settings, o2: Settings): Settings; | ||
_init(): void; | ||
@@ -32,9 +32,9 @@ _unbind(): void; | ||
interface Settings { | ||
elements?: string, | ||
elements?: string | null, | ||
byRow: boolean, | ||
target?: HTMLElement, | ||
attributeName?: string, | ||
attributeValue?: string, | ||
property?: string, | ||
remove?: HTMLElement, | ||
target?: HTMLElement | null, | ||
attributeName?: string | null, | ||
attributeValue?: string | null, | ||
property?: string | null, | ||
remove?: HTMLElement | null, | ||
events: boolean, | ||
@@ -63,9 +63,9 @@ throttle: number | ||
let default_settings: Settings = { | ||
elements: undefined, | ||
elements: null, | ||
byRow: true, | ||
target: undefined, | ||
attributeName: undefined, | ||
attributeValue: undefined, | ||
target: null, | ||
attributeName: null, | ||
attributeValue: null, | ||
property: 'height', | ||
remove: undefined, | ||
remove: null, | ||
events: true, | ||
@@ -117,5 +117,5 @@ throttle: 80 | ||
* | ||
* @param {Object} o1 Object 1 | ||
* @param {Object} o2 Object 2 | ||
* @return {Object} | ||
* @param {Settings} o1 Object 1 | ||
* @param {Settings} o2 Object 2 | ||
* @return {Settings} | ||
*/ | ||
@@ -125,3 +125,2 @@ MatchHeight.prototype._merge = function(o1: any, o2: any) { | ||
for (var i in o1) { | ||
// @ts-ignore | ||
o2[i] = o1[i]; | ||
@@ -128,0 +127,0 @@ } |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
180595
0
1019