@gullerya/tooltip - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/tooltip.js

@@ -113,7 +113,3 @@ const
 					});
-					c.addEventListener('mouseleave', event => {
-						if (this.disabled) {
-							return;
-						}
-
+					c.addEventListener('mouseleave', () => {
 						if (this.classList.contains('shown')) {
@@ -120,0 +116,0 @@ this.hide();

dist/tooltip.min.js

@@ -1,1 +0,1 @@
-const t=Symbol("calc.target.rect"),e=Symbol("calc.position"),n=Symbol("position.key"),s=Symbol("show.delay.key"),o=Symbol("future.show.key"),i=Object.freeze({far:"far",near:"near",below:"below",above:"above"}),a=Object.freeze([i.below,i.above,i.far,i.near]);let h=a;export{i as POSITIONS,l as tooltip,r as setPositionFallbacks};function l(t){const e=document.createElement("tool-tip");return document.body.appendChild(e),e}function r(...t){(h=t.filter(t=>t in i)).push(...a.filter(t=>h.indexOf(t)<0))}const d=document.createElement("template");d.innerHTML="\n\t<style>\n\t\t:host {\n\t\t\tposition: fixed;\n\t\t\tpadding: 12px;\n\t\t\tdisplay: none;\n\t\t\tz-index: 9999;\n\t\t\toverflow: hidden;\n\t\t\tborder-radius: 8px;\n\t\t\tfont-family: sans-serif;\n\t\t\tfont-size: 0.8em;\n\t\t\ttransition: opacity 333ms, transform 333ms;\n\t\t\tcolor: #fff;\n\t\t\tbackground-color: #000;\n\t\t}\n\n\t\t:host(.pre-shown) {\n\t\t\tdisplay: block;\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.96);\n\t\t}\n\n\t\t:host(.shown) {\n\t\t\tdisplay: block;\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t}\n\n\t\t:host(.light) {\n\t\t\tcolor: #000;\n\t\t\tbackground-color: #fff;\n\t\t\tbox-shadow: 0 0 6px rgba(100,100,100,0.5);\n\t\t}\n\t</style>\n\n\t<slot></slot>\n",customElements.define("tool-tip",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).appendChild(d.content.cloneNode(!0))}connectedCallback(){this[n]||(this[n]=this.dataset.position||h[0]),this[s]||(this[s]=this.dataset.showDelay||375);const t=this.dataset.targetId,e=this.dataset.targetClass;if(t||e){const n=this.getRootNode().querySelectorAll(t?"#"+t:"."+e);n.length?n.forEach(t=>{t.addEventListener("mouseenter",t=>{if(this.disabled)return;const e=t.target;this[o]||(this[o]=setTimeout(()=>{this[o]=null,this.show(e)},this.showDelay))}),t.addEventListener("mouseleave",t=>{this.disabled||(this.classList.contains("shown")?this.hide():this[o]&&(clearTimeout(this[o]),this[o]=null))})}):console.warn('failed to match any target element by id "'+t+'", JS driven mode')}else console.info("tooltip has nor target-id neither target-class defined, JS driven mode")}show(n,s){this.classList.remove("shown"),this.classList.add("pre-shown"),s&&("string"==typeof s?this.innerHTML=s:s.nodeType===Node.ELEMENT_NODE||s.nodeType===Node.DOCUMENT_FRAGMENT_NODE||s.nodeType===Node.TEXT_NODE?(this.innerHTML="",this.appendChild(s)):console.warn('invalid content "'+s+'" (nor "string" neither "Element"), ingnoring it'));const o=this[t](n),i=this[e](o);Object.assign(this.style,i),this.classList.replace("pre-shown","shown")}hide(){this.classList.remove("shown")}remove(){this.hide(),this.parentElement.removeChild(this)}get position(){return this[n]}set position(t){t in i&&this[n]!==t&&(this[n]=t)}get showDelay(){return this[s]}set showDelay(t){"number"!=typeof t||isNaN(t)||this[s]===t||(this[s]=t)}get disabled(){return this.hasAttribute("disabled")||this.classList.contains("disabled")}[t](t){return t.getBoundingClientRect()}[e](t){const e=[this.position];e.push(...h.filter(t=>e.indexOf(t)<0));const n=this.offsetWidth,s=this.offsetHeight,o=document.documentElement.clientWidth,a=document.documentElement.clientHeight,l={},r="rtl"===getComputedStyle(document.body).direction;return e.some(e=>{if(e===i.below&&s<=a-t.bottom-12){let e=t.x+t.width/2-n/2;e=Math.max(12,e),e=Math.min(o-n-12,e),l.top=t.bottom+12+"px",l.left=e+"px"}else if(e===i.above&&s<=t.y-12){let e=t.x+t.width/2-n/2;e=Math.max(12,e),e=Math.min(o-n-12,e),l.top=t.y-s-12+"px",l.left=e+"px"}else if((e===i.far&&r||e===i.near&&!r)&&n<=t.x-12){let e=t.y+t.height/2-s/2;e=Math.max(12,e),e=Math.min(a-s-12,e),l.top=e+"px",l.left=t.x-n-12+"px"}else if((e===i.near&&r||e===i.far&&!r)&&n<=o-t.right-12){let e=t.y+t.height/2-s/2;e=Math.max(12,e),e=Math.min(a-s-12,e),l.top=e+"px",l.left=t.right+12+"px"}return l.top&&l.left}),l}});
+const t=Symbol("calc.target.rect"),e=Symbol("calc.position"),n=Symbol("position.key"),s=Symbol("show.delay.key"),o=Symbol("future.show.key"),i=Object.freeze({far:"far",near:"near",below:"below",above:"above"}),a=Object.freeze([i.below,i.above,i.far,i.near]);let h=a;export{i as POSITIONS,l as tooltip,r as setPositionFallbacks};function l(t){const e=document.createElement("tool-tip");return document.body.appendChild(e),e}function r(...t){(h=t.filter(t=>t in i)).push(...a.filter(t=>h.indexOf(t)<0))}const d=document.createElement("template");d.innerHTML="\n\t<style>\n\t\t:host {\n\t\t\tposition: fixed;\n\t\t\tpadding: 12px;\n\t\t\tdisplay: none;\n\t\t\tz-index: 9999;\n\t\t\toverflow: hidden;\n\t\t\tborder-radius: 8px;\n\t\t\tfont-family: sans-serif;\n\t\t\tfont-size: 0.8em;\n\t\t\ttransition: opacity 333ms, transform 333ms;\n\t\t\tcolor: #fff;\n\t\t\tbackground-color: #000;\n\t\t}\n\n\t\t:host(.pre-shown) {\n\t\t\tdisplay: block;\n\t\t\topacity: 0;\n\t\t\ttransform: scale(0.96);\n\t\t}\n\n\t\t:host(.shown) {\n\t\t\tdisplay: block;\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t}\n\n\t\t:host(.light) {\n\t\t\tcolor: #000;\n\t\t\tbackground-color: #fff;\n\t\t\tbox-shadow: 0 0 6px rgba(100,100,100,0.5);\n\t\t}\n\t</style>\n\n\t<slot></slot>\n",customElements.define("tool-tip",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).appendChild(d.content.cloneNode(!0))}connectedCallback(){this[n]||(this[n]=this.dataset.position||h[0]),this[s]||(this[s]=this.dataset.showDelay||375);const t=this.dataset.targetId,e=this.dataset.targetClass;if(t||e){const n=this.getRootNode().querySelectorAll(t?"#"+t:"."+e);n.length?n.forEach(t=>{t.addEventListener("mouseenter",t=>{if(this.disabled)return;const e=t.target;this[o]||(this[o]=setTimeout(()=>{this[o]=null,this.show(e)},this.showDelay))}),t.addEventListener("mouseleave",()=>{this.classList.contains("shown")?this.hide():this[o]&&(clearTimeout(this[o]),this[o]=null)})}):console.warn('failed to match any target element by id "'+t+'", JS driven mode')}else console.info("tooltip has nor target-id neither target-class defined, JS driven mode")}show(n,s){this.classList.remove("shown"),this.classList.add("pre-shown"),s&&("string"==typeof s?this.innerHTML=s:s.nodeType===Node.ELEMENT_NODE||s.nodeType===Node.DOCUMENT_FRAGMENT_NODE||s.nodeType===Node.TEXT_NODE?(this.innerHTML="",this.appendChild(s)):console.warn('invalid content "'+s+'" (nor "string" neither "Element"), ingnoring it'));const o=this[t](n),i=this[e](o);Object.assign(this.style,i),this.classList.replace("pre-shown","shown")}hide(){this.classList.remove("shown")}remove(){this.hide(),this.parentElement.removeChild(this)}get position(){return this[n]}set position(t){t in i&&this[n]!==t&&(this[n]=t)}get showDelay(){return this[s]}set showDelay(t){"number"!=typeof t||isNaN(t)||this[s]===t||(this[s]=t)}get disabled(){return this.hasAttribute("disabled")||this.classList.contains("disabled")}[t](t){return t.getBoundingClientRect()}[e](t){const e=[this.position];e.push(...h.filter(t=>e.indexOf(t)<0));const n=this.offsetWidth,s=this.offsetHeight,o=document.documentElement.clientWidth,a=document.documentElement.clientHeight,l={},r="rtl"===getComputedStyle(document.body).direction;return e.some(e=>{if(e===i.below&&s<=a-t.bottom-12){let e=t.x+t.width/2-n/2;e=Math.max(12,e),e=Math.min(o-n-12,e),l.top=t.bottom+12+"px",l.left=e+"px"}else if(e===i.above&&s<=t.y-12){let e=t.x+t.width/2-n/2;e=Math.max(12,e),e=Math.min(o-n-12,e),l.top=t.y-s-12+"px",l.left=e+"px"}else if((e===i.far&&r||e===i.near&&!r)&&n<=t.x-12){let e=t.y+t.height/2-s/2;e=Math.max(12,e),e=Math.min(a-s-12,e),l.top=e+"px",l.left=t.x-n-12+"px"}else if((e===i.near&&r||e===i.far&&!r)&&n<=o-t.right-12){let e=t.y+t.height/2-s/2;e=Math.max(12,e),e=Math.min(a-s-12,e),l.top=e+"px",l.left=t.right+12+"px"}return l.top&&l.left}),l}});

package.json

 {
   "name": "@gullerya/tooltip",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "tooltip component & services",
@@ -5,0 +5,0 @@ "keywords": [

readme.md

@@ -13,3 +13,3 @@ [![GitHub](https://img.shields.io/github/license/gullerya/tooltip.svg)](https://github.com/gullerya/tooltip)
 
-* __1.0.0__
+* __1.0.1__
   * implemented [Issue #3](https://github.com/gullerya/tooltip/issues/2) - support `disabled` functionality
@@ -16,0 +16,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

Worsened metrics

Total package byte prevSize

13797

decreased by-0.53%

Lines of code

203

decreased by-1.46%

No dependency changes