Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite migration #27

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions .babelrc

This file was deleted.

6 changes: 1 addition & 5 deletions dist/src/index.d.ts → dist/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { TooltipContent, TooltipOptions } from '../types';
import { TooltipContent, TooltipOptions } from './types';
/**
*
* Tiny any beautiful tooltips module.
Expand Down Expand Up @@ -84,10 +84,6 @@ export default class Tooltip {
* Module Preparation method
*/
private prepare;
/**
* Append CSS file
*/
private loadStyles;
/**
* Calculates element coords and moves tooltip bottom of the element
*
Expand Down
11 changes: 0 additions & 11 deletions dist/tooltip.js

This file was deleted.

194 changes: 194 additions & 0 deletions dist/tooltip.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(`.ct{z-index:999;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;-webkit-transition:opacity 50ms ease-in,-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,transform 70ms cubic-bezier(.215,.61,.355,1),-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);will-change:opacity,top,left;-webkit-box-shadow:0 8px 12px 0 rgba(29,32,43,.17),0 4px 5px -3px rgba(5,6,12,.49);box-shadow:0 8px 12px #1d202b2b,0 4px 5px -3px #05060c7d;border-radius:9px}.ct,.ct:before{position:absolute;top:0;left:0}.ct:before{content:"";bottom:0;right:0;background-color:#1d202b;z-index:-1;border-radius:4px}@supports (-webkit-mask-box-image:url()){.ct:before{border-radius:0;-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M10.71 0h2.58c3.02 0 4.64.42 6.1 1.2a8.18 8.18 0 013.4 3.4C23.6 6.07 24 7.7 24 10.71v2.58c0 3.02-.42 4.64-1.2 6.1a8.18 8.18 0 01-3.4 3.4c-1.47.8-3.1 1.21-6.11 1.21H10.7c-3.02 0-4.64-.42-6.1-1.2a8.18 8.18 0 01-3.4-3.4C.4 17.93 0 16.3 0 13.29V10.7c0-3.02.42-4.64 1.2-6.1a8.18 8.18 0 013.4-3.4C6.07.4 7.7 0 10.71 0z"/></svg>') 48% 41% 37.9% 53.3%}}@media (--mobile){.ct{display:none}}.ct__content{padding:6px 10px;color:#cdd1e0;font-size:12px;text-align:center;letter-spacing:.02em;line-height:1em}.ct:after{content:"";width:8px;height:8px;position:absolute;background-color:#1d202b;z-index:-1}.ct--bottom{-webkit-transform:translateY(5px);transform:translateY(5px)}.ct--bottom:after{top:-3px;left:50%;-webkit-transform:translateX(-50%) rotate(-45deg);transform:translate(-50%) rotate(-45deg)}.ct--top{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.ct--top:after{top:auto;bottom:-3px;left:50%;-webkit-transform:translateX(-50%) rotate(-45deg);transform:translate(-50%) rotate(-45deg)}.ct--left{-webkit-transform:translateX(-5px);transform:translate(-5px)}.ct--left:after{top:50%;left:auto;right:0;-webkit-transform:translate(41.6%,-50%) rotate(-45deg);transform:translate(41.6%,-50%) rotate(-45deg)}.ct--right{-webkit-transform:translateX(5px);transform:translate(5px)}.ct--right:after{top:50%;left:0;-webkit-transform:translate(-41.6%,-50%) rotate(-45deg);transform:translate(-41.6%,-50%) rotate(-45deg)}.ct--shown{opacity:1;-webkit-transform:none;transform:none}`)),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
class h {
/**
* Module constructor
*/
constructor() {
this.nodes = {
wrapper: null,
content: null
}, this.showed = !1, this.offsetTop = 10, this.offsetLeft = 10, this.offsetRight = 10, this.hidingDelay = 0, this.handleWindowScroll = () => {
this.showed && this.hide(!0);
}, this.prepare(), window.addEventListener("scroll", this.handleWindowScroll, { passive: !0 });
}
/**
* Tooltip CSS classes
*/
get CSS() {
return {
tooltip: "ct",
tooltipContent: "ct__content",
tooltipShown: "ct--shown",
placement: {
left: "ct--left",
bottom: "ct--bottom",
right: "ct--right",
top: "ct--top"
}
};
}
/**
* Show Tooltip near passed element with specified HTML content
*
* @param {HTMLElement} element - target element to place Tooltip near that
* @param {TooltipContent} content — any HTML Element of String that will be used as content
* @param {TooltipOptions} options — Available options {@link TooltipOptions}
*/
show(t, e, i) {
this.nodes.wrapper || this.prepare(), this.hidingTimeout && clearTimeout(this.hidingTimeout);
const o = Object.assign({
placement: "bottom",
marginTop: 0,
marginLeft: 0,
marginRight: 0,
marginBottom: 0,
delay: 70,
hidingDelay: 0
}, i);
if (o.hidingDelay && (this.hidingDelay = o.hidingDelay), this.nodes.content.innerHTML = "", typeof e == "string")
this.nodes.content.appendChild(document.createTextNode(e));
else if (e instanceof Node)
this.nodes.content.appendChild(e);
else
throw Error("[CodeX Tooltip] Wrong type of «content» passed. It should be an instance of Node or String. But " + typeof e + " given.");
switch (this.nodes.wrapper.classList.remove(...Object.values(this.CSS.placement)), o.placement) {
case "top":
this.placeTop(t, o);
break;
case "left":
this.placeLeft(t, o);
break;
case "right":
this.placeRight(t, o);
break;
case "bottom":
default:
this.placeBottom(t, o);
break;
}
o && o.delay ? this.showingTimeout = setTimeout(() => {
this.nodes.wrapper.classList.add(this.CSS.tooltipShown), this.showed = !0;
}, o.delay) : (this.nodes.wrapper.classList.add(this.CSS.tooltipShown), this.showed = !0);
}
/**
* Hide toolbox tooltip and clean content
* @param {boolean} skipDelay - forces hiding immediately
*/
hide(t = !1) {
if (this.hidingDelay && !t) {
this.hidingTimeout && clearTimeout(this.hidingTimeout), this.hidingTimeout = setTimeout(() => {
this.hide(!0);
}, this.hidingDelay);
return;
}
this.nodes.wrapper.classList.remove(this.CSS.tooltipShown), this.showed = !1, this.showingTimeout && clearTimeout(this.showingTimeout);
}
/**
* Mouseover/Mouseleave decorator
*
* @param {HTMLElement} element - target element to place Tooltip near that
* @param {TooltipContent} content — any HTML Element of String that will be used as content
* @param {TooltipOptions} options — Available options {@link TooltipOptions}
*/
onHover(t, e, i) {
t.addEventListener("mouseenter", () => {
this.show(t, e, i);
}), t.addEventListener("mouseleave", () => {
this.hide();
});
}
/**
* Release DOM and event listeners
*/
destroy() {
this.nodes.wrapper.remove(), window.removeEventListener("scroll", this.handleWindowScroll);
}
/**
* Module Preparation method
*/
prepare() {
this.nodes.wrapper = this.make("div", this.CSS.tooltip), this.nodes.content = this.make("div", this.CSS.tooltipContent), this.append(this.nodes.wrapper, this.nodes.content), this.append(document.body, this.nodes.wrapper);
}
/**
* Calculates element coords and moves tooltip bottom of the element
*
* @param {HTMLElement} element
* @param {TooltipOptions} showingOptions
*/
placeBottom(t, e) {
const i = t.getBoundingClientRect(), s = i.left + t.clientWidth / 2 - this.nodes.wrapper.offsetWidth / 2, o = i.bottom + window.pageYOffset + this.offsetTop + e.marginTop;
this.applyPlacement("bottom", s, o);
}
/**
* Calculates element coords and moves tooltip top of the element
*
* @param {HTMLElement} element
* @param {TooltipOptions} showingOptions
*/
placeTop(t, e) {
const i = t.getBoundingClientRect(), s = i.left + t.clientWidth / 2 - this.nodes.wrapper.offsetWidth / 2, o = i.top + window.pageYOffset - this.nodes.wrapper.clientHeight - this.offsetTop;
this.applyPlacement("top", s, o);
}
/**
* Calculates element coords and moves tooltip left of the element
*
* @param {HTMLElement} element
* @param {TooltipOptions} showingOptions
*/
placeLeft(t, e) {
const i = t.getBoundingClientRect(), s = i.left - this.nodes.wrapper.offsetWidth - this.offsetLeft - e.marginLeft, o = i.top + window.pageYOffset + t.clientHeight / 2 - this.nodes.wrapper.offsetHeight / 2;
this.applyPlacement("left", s, o);
}
/**
* Calculates element coords and moves tooltip right of the element
*
* @param {HTMLElement} element
* @param {TooltipOptions} showingOptions
*/
placeRight(t, e) {
const i = t.getBoundingClientRect(), s = i.right + this.offsetRight + e.marginRight, o = i.top + window.pageYOffset + t.clientHeight / 2 - this.nodes.wrapper.offsetHeight / 2;
this.applyPlacement("right", s, o);
}
/**
* Set wrapper position
*/
applyPlacement(t, e, i) {
this.nodes.wrapper.classList.add(this.CSS.placement[t]), this.nodes.wrapper.style.left = `${e}px`, this.nodes.wrapper.style.top = `${i}px`;
}
/**
* Helper for making Elements with classname and attributes
*
* @param {string} tagName - new Element tag name
* @param {array|string} classNames - list or name of CSS classname(s)
* @param {Object} attributes - any attributes
* @return {HTMLElement}
*/
make(t, e = null, i = {}) {
const s = document.createElement(t);
Array.isArray(e) ? s.classList.add(...e) : e && s.classList.add(e);
for (const o in i)
i.hasOwnProperty(o) && (s[o] = i[o]);
return s;
}
/**
* Append one or several elements to the parent
*
* @param {Element|DocumentFragment} parent - where to append
* @param {Element|Element[]} elements - element or elements list
*/
append(t, e) {
Array.isArray(e) ? e.forEach((i) => t.appendChild(i)) : t.appendChild(e);
}
/**
* Append element or a couple to the beginning of the parent elements
*
* @param {Element} parent - where to append
* @param {Element|Element[]} elements - element or elements list
*/
prepend(t, e) {
Array.isArray(e) ? (e = e.reverse(), e.forEach((i) => t.prepend(i))) : t.prepend(e);
}
}
export {
h as default
};
Loading