diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index bdb0cab..0000000 --- a/.gitattributes +++ /dev/null @@ -1,17 +0,0 @@ -# Auto detect text files and perform LF normalization -* text=auto - -# Custom for Visual Studio -*.cs diff=csharp - -# Standard to msysgit -*.doc diff=astextplain -*.DOC diff=astextplain -*.docx diff=astextplain -*.DOCX diff=astextplain -*.dot diff=astextplain -*.DOT diff=astextplain -*.pdf diff=astextplain -*.PDF diff=astextplain -*.rtf diff=astextplain -*.RTF diff=astextplain diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index b909d0a..0000000 --- a/.prettierrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "useTabs": false, - "printWidth": 80, - "tabWidth": 2, - "singleQuote": false, - "trailingComma": "es5", - "parser": "babylon", - "noSemi": false -} diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 5b7005d..0000000 --- a/.travis.yml +++ /dev/null @@ -1,12 +0,0 @@ -language: node_js -node_js: - - "8" -script: -- echo "skipping tests" -deploy: - skip_cleanup: true - provider: npm - email: $NPM_USERNAME - api_key: $NPM_TOKEN - on: - branch: master \ No newline at end of file diff --git a/README.md b/README.md index 1465ed4..4fcc564 100644 --- a/README.md +++ b/README.md @@ -74,11 +74,9 @@ And the script at the bottom of the page ## Documentation ```javascript -Toastify({ +Toast({ text: "This is a toast", duration: 3000, - destination: "https://github.com/apvarun/toastify-js", - newWindow: true, close: true, gravity: "top", // `top` or `bottom` position: "left", // `left`, `center` or `right` @@ -87,10 +85,10 @@ Toastify({ background: "linear-gradient(to right, #00b09b, #96c93d)", }, onClick: function(){} // Callback after click -}).showToast(); +}).show(); ``` -> Toast messages will be centered on devices with screen width less than 360px. +> Toast messages will be centered on devices with screen width less than 480px. * See the [changelog](https://github.com/apvarun/toastify-js/blob/master/CHANGELOG.md) @@ -99,33 +97,17 @@ Toastify({ If you want to use custom classes on the toast for customizing (like info or warning for example), you can do that as follows: ```javascript -Toastify({ +Toast({ text: "This is a toast", className: "info", style: { background: "linear-gradient(to right, #00b09b, #96c93d)", } -}).showToast(); +}).show(); ``` Multiple classes also can be assigned as a string, with spaces between class names. -### Add some offset - -If you want to add offset to the toast, you can do that as follows: - -```javascript -Toastify({ - text: "This is a toast with offset", - offset: { - x: 50, // horizontal axis - can be a number or a string indicating unity. eg: '2em' - y: 10 // vertical axis - can be a number or a string indicating unity. eg: '2em' - }, -}).showToast(); -``` - -Toast will be pushed 50px from right in x axis and 10px from top in y axis. - **Note:** If `position` is equals to `left`, it will be pushed from left. @@ -138,25 +120,17 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom. | text | string | Message to be displayed in the toast | "Hi there!" | | node | ELEMENT_NODE | Provide a node to be mounted inside the toast. `node` takes higher precedence over `text` | | | duration | number | Duration for which the toast should be displayed.
-1 for permanent toast | 3000 | -| selector | string \| ELEMENT_NODE | ShadowRoot | CSS Selector or Element Node on which the toast should be added | body | -| destination | URL string | URL to which the browser should be navigated on click of the toast | | -| newWindow | boolean | Decides whether the `destination` should be opened in a new window or not | false | | close | boolean | To show the close icon or not | false | | gravity | "top" or "bottom" | To show the toast from top or bottom | "top" | | position | "left" or "right" | To show the toast on left or right | "right" | -| backgroundColor | CSS background value | To be deprecated, use `style.background` option instead. Sets the background color of the toast | | -| avatar | URL string | Image/icon to be shown before text | | | className | string | Ability to provide custom class name for further customization | | | stopOnFocus | boolean | To stop timer when hovered over the toast (Only if duration is set) | true | -| callback | Function | Invoked when the toast is dismissed | | +| onClose | Function | Invoked when the toast is dismissed | | | onClick | Function | Invoked when the toast is clicked | | -| offset | Object | Ability to add some offset to axis | | -| escapeMarkup | boolean | Toggle the default behavior of escaping HTML markup | true | | style | object | Use the HTML DOM Style properties to add any style directly to toast | | | ariaLive | string | Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options | "polite" | | oldestFirst | boolean | Set the order in which toasts are stacked in page | true | -> Deprecated properties: `backgroundColor` - use `style.background` option instead ## Browsers support diff --git a/build/build.js b/build/build.js new file mode 100644 index 0000000..2fe5097 --- /dev/null +++ b/build/build.js @@ -0,0 +1,60 @@ +const root = process.cwd(); +import { join, parse } from 'path'; +import { readFileSync, existsSync, mkdirSync } from 'fs'; +import esbuild from 'esbuild'; +function mkdir(path) { + return existsSync(path) || mkdirSync(path) +} +const sourcePath = join(root, 'src'); +const packagePath = join(root, 'package.json'); +const tsconfigPath = join(root, 'tsconfig.json'); +const packageConfig = JSON.parse(readFileSync(packagePath, 'utf8')); +const tsConfig = JSON.parse(readFileSync(tsconfigPath, 'utf8')); +const distPath = parse(packageConfig.main).dir; +const mainPath = join(sourcePath, `${packageConfig.name}.ts`); +const cssPath = join(sourcePath, `${packageConfig.name}.css`); +mkdir(distPath); +esbuild.buildSync({ + allowOverwrite: true, + entryPoints: [mainPath], + outfile: join(distPath, `${packageConfig.name}.js`), + minify: false, + sourcemap: false, + platform: 'browser', + format: 'iife', + target: tsConfig.target, + charset: 'utf8' +}); +esbuild.buildSync({ + allowOverwrite: true, + entryPoints: [mainPath], + outfile: join(distPath, `${packageConfig.name}.min.js`), + minify: true, + sourcemap: true, + platform: 'browser', + format: 'iife', + target: tsConfig.target, + charset: 'utf8' +}); +esbuild.buildSync({ + allowOverwrite: true, + entryPoints: [cssPath], + outfile: join(distPath, `${packageConfig.name}.css`), + minify: false, + loader: { + '.css': 'css' + }, + platform: 'browser', + charset: 'utf8' +}); +esbuild.buildSync({ + allowOverwrite: true, + entryPoints: [cssPath], + outfile: join(distPath, `${packageConfig.name}.min.css`), + minify: true, + loader: { + '.css': 'css' + }, + platform: 'browser', + charset: 'utf8' +}); \ No newline at end of file diff --git a/dist/toastify.css b/dist/toastify.css new file mode 100644 index 0000000..c7b1077 --- /dev/null +++ b/dist/toastify.css @@ -0,0 +1,155 @@ +.toast-container { + isolation: isolate; + position: fixed; + z-index: 2147483647; + display: flex; + flex-direction: column; + max-width: 100%; + box-sizing: border-box; + transition: transform calc(0.6 * var(--toast-rate) * 1s) ease, opacity calc(0.6 * var(--toast-rate) * 1s) ease; +} +.toast-container.toast-top { + top: 0; +} +.toast-container.toast-bottom { + bottom: 0; +} +.toast-container.toast-left { + left: 0; + align-items: flex-start; +} +.toast-container.toast-center { + left: 50%; + transform: translateX(-50%); + align-items: center; +} +.toast-container.toast-right { + right: 0; + align-items: flex-end; +} +.toast { + --toast-rate: 1; + --toast-translate: 0; + --toast-scale: 1; + --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); + --ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56); + position: relative; + transition: transform calc(0.4s * var(--toast-rate)) var(--ease-out-back), opacity calc(0.3s * var(--toast-rate)) ease; + transform: translate3d(0, var(--toast-translate), 0) scale(var(--toast-scale)); + max-width: 480px; + will-change: transform, opacity; + backface-visibility: hidden; + contain: content; + border-radius: 6px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); +} +.toast-content { + border-radius: 6px; + padding: 14px 18px 14px 18px; + max-width: 100%; + box-sizing: border-box; + background: rgb(55, 208, 255); + color: white; +} +.toast:hover { + --toast-scale: 1.15; +} +.toast.toast-top.toast-left { + margin: 10px 0 0 10px; + transform-origin: left center; +} +.toast.toast-top.toast-center { + margin: 10px 0 0 0; + transform-origin: top; +} +.toast.toast-top.toast-right { + margin: 10px 10px 0 0; + transform-origin: right center; +} +.toast.toast-bottom.toast-left { + margin: 0 0 10px 10px; + transform-origin: left center; +} +.toast.toast-bottom.toast-center { + margin: 0 0 10px 0; + transform-origin: bottom; +} +.toast.toast-bottom.toast-right { + margin: 0 10px 10px 0; + transform-origin: right center; +} +.toast-container.toast-top .toast.show { + animation: toast-in-top calc(0.3 * var(--toast-rate) * 1s) ease-in-out forwards; +} +.toast-container.toast-bottom .toast.show { + animation: toast-in-bottom calc(0.3 * var(--toast-rate) * 1s) ease-in-out forwards; +} +.toast-container.toast-top .toast.hide { + animation: toast-out-top calc(0.3 * var(--toast-rate) * 1s) ease-in-out forwards; +} +.toast-container.toast-bottom .toast.hide { + animation: toast-out-bottom calc(0.3 * var(--toast-rate) * 1s) ease-in-out forwards; +} +@keyframes toast-in-top { + from { + opacity: 0; + max-height: 0; + --toast-translate: -100%; + } + to { + opacity: 1; + max-height: var(--toast-height); + } +} +@keyframes toast-in-bottom { + from { + opacity: 0; + max-height: 0; + --toast-translate: 100%; + } + to { + opacity: 1; + max-height: var(--toast-height); + } +} +@keyframes toast-out-top { + from { + opacity: 1; + max-height: var(--toast-height); + } + to { + opacity: 0; + max-height: 0; + --toast-translate: 100%; + } +} +@keyframes toast-out-bottom { + from { + opacity: 1; + max-height: var(--toast-height); + } + to { + opacity: 0; + max-height: 0; + --toast-translate: -100%; + } +} +.toast-close { + position: absolute; + color: white; + top: 5px; + right: 5px; + cursor: pointer; + font-size: 12px; + line-height: 12px; + transform-origin: center center; +} +@media (max-width: 480px) { + .toast-container { + width: 100%; + } + .toast { + max-width: 100%; + width: 100%; + } +} diff --git a/dist/toastify.js b/dist/toastify.js new file mode 100644 index 0000000..4938817 --- /dev/null +++ b/dist/toastify.js @@ -0,0 +1,226 @@ +"use strict"; +(() => { + class ToastManager { + static timeoutMap = /* @__PURE__ */ new Map(); + static containers = /* @__PURE__ */ new Map(); + static getContainer(gravity, position) { + const containerId = `toast-container-${gravity}-${position}`; + if (this.containers.has(containerId)) { + return this.containers.get(containerId); + } + return this.createContainer(containerId, gravity, position); + } + static createContainer(id, gravity, position) { + const container = document.createElement("div"); + container.classList.add("toast-container", id, `toast-${gravity}`, `toast-${position}`); + container.setAttribute("role", "region"); + document.body.appendChild(container); + this.containers.set(id, container); + return container; + } + static addTimeout(toast, duration, callback) { + this.delTimeout(toast); + const timeoutId = window.setTimeout(() => { + callback(); + this.delTimeout(toast); + }, duration); + this.timeoutMap.set(toast, timeoutId); + } + static delTimeout(toast) { + if (this.timeoutMap.has(toast)) { + clearTimeout(this.timeoutMap.get(toast)); + this.timeoutMap.delete(toast); + } + } + } + class Toast { + static defaults = { + gravity: "top", + position: "right", + stopOnFocus: true, + oldestFirst: true + }; + options; + duration; + element; + root; + gravity; + position; + close; + oldestFirst; + stopOnFocus; + onClick; + onClose; + contentElement; + closeButton; + mouseOverHandler; + mouseLeaveHandler; + clickHandler; + closeButtonHandler; + animationEndHandler; + /** + * Create a Toastify instance + * @param options User configuration options + */ + constructor(options) { + this.options = { + ...Toast.defaults, + ...options + }; + this.element = document.createElement("div"); + this.gravity = this.options.gravity; + this.position = this.options.position; + this.root = this.options.root ?? ToastManager.getContainer(this.gravity, this.position); + this.oldestFirst = this.options.oldestFirst; + this.stopOnFocus = this.options.stopOnFocus; + this.duration = this.options.duration ?? -1; + this.close = this.options.close ?? false; + this.onClick = this.options.onClick; + this.onClose = this.options.onClose; + this.applyBaseStyles().createContent().addCloseButton().measureDimensions().ensureCloseMethod().bindEvents(); + } + applyBaseStyles() { + this.element.classList.add("toast", `toast-${this.gravity}`, `toast-${this.position}`); + if (this.options.className) { + const classes = Array.isArray(this.options.className) ? this.options.className : [this.options.className]; + classes.forEach((cls) => this.element.classList.add(cls)); + } + return this; + } + createContent() { + this.contentElement = document.createElement("div"); + this.contentElement.classList.add("toast-content"); + if (this.options.text) { + this.contentElement.textContent = this.options.text; + } + if (this.options.node) { + this.contentElement.appendChild(this.options.node); + } + if (this.options.style) { + this.applyStyles(this.contentElement, this.options.style); + } + this.element.appendChild(this.contentElement); + return this; + } + addCloseButton() { + if (!this.close) return this; + this.closeButton = document.createElement("span"); + this.closeButton.ariaLabel = "Close"; + this.closeButton.className = "toast-close"; + this.closeButton.textContent = "πŸ—™"; + this.closeButtonHandler = () => this.hide(); + this.closeButton.addEventListener("click", this.closeButtonHandler); + this.element.appendChild(this.closeButton); + return this; + } + measureDimensions() { + const originalStyles = { + display: this.element.style.display, + visibility: this.element.style.visibility, + position: this.element.style.position + }; + this.applyStyles(this.element, { + display: "block", + visibility: "hidden", + position: "absolute" + }); + document.body.appendChild(this.element); + const { height, width } = this.element.getBoundingClientRect(); + this.element.style.setProperty("--toast-height", `${height}px`); + this.element.style.setProperty("--toast-width", `${width}px`); + document.body.removeChild(this.element); + this.applyStyles(this.element, originalStyles); + return this; + } + ensureCloseMethod() { + if (this.duration <= 0 && !this.close && !this.onClick) { + this.onClick = () => this.hide(); + } + return this; + } + bindEvents() { + if (this.stopOnFocus && this.duration > 0) { + this.mouseOverHandler = () => ToastManager.delTimeout(this); + this.mouseLeaveHandler = () => ToastManager.addTimeout(this, this.duration, () => this.hide()); + this.element.addEventListener("mouseover", this.mouseOverHandler); + this.element.addEventListener("mouseleave", this.mouseLeaveHandler); + } + if (this.onClick) { + this.clickHandler = (e) => { + this.onClick?.call(this, e); + }; + this.element.addEventListener("click", this.clickHandler); + } + return this; + } + applyStyles(element, styles) { + for (const key in styles) { + if (styles[key] === void 0) continue; + element.style[key] = styles[key]; + } + } + /** + * Display the Toast notification + * @returns this Instance for method chaining + */ + show() { + const elementToInsert = this.oldestFirst ? this.root.firstChild : this.root.lastChild; + this.root.insertBefore(this.element, elementToInsert); + if (!this.element.classList.replace("hide", "show")) { + this.element.classList.add("show"); + } + if (this.duration && this.duration > 0) { + ToastManager.addTimeout(this, this.duration, () => this.hide()); + } + return this; + } + /** + * @deprecated This function is deprecated. Use the show() instead. + */ + showToast() { + return this.show(); + } + /** + * Immediately hide the current Toast + * Triggers a CSS exit animation and removes the element after the animation completes + */ + hide() { + if (!this.element) return; + ToastManager.delTimeout(this); + if (this.mouseOverHandler) { + this.element.removeEventListener("mouseover", this.mouseOverHandler); + } + if (this.mouseLeaveHandler) { + this.element.removeEventListener("mouseleave", this.mouseLeaveHandler); + } + if (this.clickHandler) { + this.element.removeEventListener("click", this.clickHandler); + } + if (this.closeButton && this.closeButtonHandler) { + this.closeButton.removeEventListener("click", this.closeButtonHandler); + } + this.animationEndHandler = (e) => { + if (e.animationName.startsWith("toast-out")) { + this.element?.removeEventListener("animationend", this.animationEndHandler); + this.element?.remove(); + } + }; + this.element.addEventListener("animationend", this.animationEndHandler); + if (!this.element.classList.replace("show", "hide")) { + this.element.classList.add("hide"); + } + this.onClose?.(); + } + /** + * @deprecated This function is deprecated. Use the hide() instead. + */ + hideToast() { + this.hide(); + } + } + function createToast(options) { + return new Toast(options); + } + globalThis.Toast = createToast; + globalThis.Toastify = createToast; +})(); diff --git a/dist/toastify.min.css b/dist/toastify.min.css new file mode 100644 index 0000000..38e9150 --- /dev/null +++ b/dist/toastify.min.css @@ -0,0 +1 @@ +.toast-container{isolation:isolate;position:fixed;z-index:2147483647;display:flex;flex-direction:column;max-width:100%;box-sizing:border-box;transition:transform calc(.6 * var(--toast-rate) * 1s) ease,opacity calc(.6 * var(--toast-rate) * 1s) ease}.toast-container.toast-top{top:0}.toast-container.toast-bottom{bottom:0}.toast-container.toast-left{left:0;align-items:flex-start}.toast-container.toast-center{left:50%;transform:translate(-50%);align-items:center}.toast-container.toast-right{right:0;align-items:flex-end}.toast{--toast-rate: 1;--toast-translate: 0;--toast-scale: 1;--ease-out-back: cubic-bezier(.34, 1.56, .64, 1);--ease-in-back: cubic-bezier(.36, 0, .66, -.56);position:relative;transition:transform calc(.4s * var(--toast-rate)) var(--ease-out-back),opacity calc(.3s * var(--toast-rate)) ease;transform:translate3d(0,var(--toast-translate),0) scale(var(--toast-scale));max-width:480px;will-change:transform,opacity;backface-visibility:hidden;contain:content;border-radius:6px;box-shadow:0 4px 8px #00000040}.toast-content{border-radius:6px;padding:14px 18px;max-width:100%;box-sizing:border-box;background:#37d0ff;color:#fff}.toast:hover{--toast-scale: 1.15}.toast.toast-top.toast-left{margin:10px 0 0 10px;transform-origin:left center}.toast.toast-top.toast-center{margin:10px 0 0;transform-origin:top}.toast.toast-top.toast-right{margin:10px 10px 0 0;transform-origin:right center}.toast.toast-bottom.toast-left{margin:0 0 10px 10px;transform-origin:left center}.toast.toast-bottom.toast-center{margin:0 0 10px;transform-origin:bottom}.toast.toast-bottom.toast-right{margin:0 10px 10px 0;transform-origin:right center}.toast-container.toast-top .toast.show{animation:toast-in-top calc(.3 * var(--toast-rate) * 1s) ease-in-out forwards}.toast-container.toast-bottom .toast.show{animation:toast-in-bottom calc(.3 * var(--toast-rate) * 1s) ease-in-out forwards}.toast-container.toast-top .toast.hide{animation:toast-out-top calc(.3 * var(--toast-rate) * 1s) ease-in-out forwards}.toast-container.toast-bottom .toast.hide{animation:toast-out-bottom calc(.3 * var(--toast-rate) * 1s) ease-in-out forwards}@keyframes toast-in-top{0%{opacity:0;max-height:0;--toast-translate: -100%}to{opacity:1;max-height:var(--toast-height)}}@keyframes toast-in-bottom{0%{opacity:0;max-height:0;--toast-translate: 100%}to{opacity:1;max-height:var(--toast-height)}}@keyframes toast-out-top{0%{opacity:1;max-height:var(--toast-height)}to{opacity:0;max-height:0;--toast-translate: 100%}}@keyframes toast-out-bottom{0%{opacity:1;max-height:var(--toast-height)}to{opacity:0;max-height:0;--toast-translate: -100%}}.toast-close{position:absolute;color:#fff;top:5px;right:5px;cursor:pointer;font-size:12px;line-height:12px;transform-origin:center center}@media (max-width: 480px){.toast-container{width:100%}.toast{max-width:100%;width:100%}} diff --git a/dist/toastify.min.js b/dist/toastify.min.js new file mode 100644 index 0000000..71f04d3 --- /dev/null +++ b/dist/toastify.min.js @@ -0,0 +1,2 @@ +"use strict";(()=>{class o{static timeoutMap=new Map;static containers=new Map;static getContainer(t,e){const i=`toast-container-${t}-${e}`;return this.containers.has(i)?this.containers.get(i):this.createContainer(i,t,e)}static createContainer(t,e,i){const s=document.createElement("div");return s.classList.add("toast-container",t,`toast-${e}`,`toast-${i}`),s.setAttribute("role","region"),document.body.appendChild(s),this.containers.set(t,s),s}static addTimeout(t,e,i){this.delTimeout(t);const s=window.setTimeout(()=>{i(),this.delTimeout(t)},e);this.timeoutMap.set(t,s)}static delTimeout(t){this.timeoutMap.has(t)&&(clearTimeout(this.timeoutMap.get(t)),this.timeoutMap.delete(t))}}class n{static defaults={gravity:"top",position:"right",stopOnFocus:!0,oldestFirst:!0};options;duration;element;root;gravity;position;close;oldestFirst;stopOnFocus;onClick;onClose;contentElement;closeButton;mouseOverHandler;mouseLeaveHandler;clickHandler;closeButtonHandler;animationEndHandler;constructor(t){this.options={...n.defaults,...t},this.element=document.createElement("div"),this.gravity=this.options.gravity,this.position=this.options.position,this.root=this.options.root??o.getContainer(this.gravity,this.position),this.oldestFirst=this.options.oldestFirst,this.stopOnFocus=this.options.stopOnFocus,this.duration=this.options.duration??-1,this.close=this.options.close??!1,this.onClick=this.options.onClick,this.onClose=this.options.onClose,this.applyBaseStyles().createContent().addCloseButton().measureDimensions().ensureCloseMethod().bindEvents()}applyBaseStyles(){return this.element.classList.add("toast",`toast-${this.gravity}`,`toast-${this.position}`),this.options.className&&(Array.isArray(this.options.className)?this.options.className:[this.options.className]).forEach(e=>this.element.classList.add(e)),this}createContent(){return this.contentElement=document.createElement("div"),this.contentElement.classList.add("toast-content"),this.options.text&&(this.contentElement.textContent=this.options.text),this.options.node&&this.contentElement.appendChild(this.options.node),this.options.style&&this.applyStyles(this.contentElement,this.options.style),this.element.appendChild(this.contentElement),this}addCloseButton(){return this.close?(this.closeButton=document.createElement("span"),this.closeButton.ariaLabel="Close",this.closeButton.className="toast-close",this.closeButton.textContent="πŸ—™",this.closeButtonHandler=()=>this.hide(),this.closeButton.addEventListener("click",this.closeButtonHandler),this.element.appendChild(this.closeButton),this):this}measureDimensions(){const t={display:this.element.style.display,visibility:this.element.style.visibility,position:this.element.style.position};this.applyStyles(this.element,{display:"block",visibility:"hidden",position:"absolute"}),document.body.appendChild(this.element);const{height:e,width:i}=this.element.getBoundingClientRect();return this.element.style.setProperty("--toast-height",`${e}px`),this.element.style.setProperty("--toast-width",`${i}px`),document.body.removeChild(this.element),this.applyStyles(this.element,t),this}ensureCloseMethod(){return this.duration<=0&&!this.close&&!this.onClick&&(this.onClick=()=>this.hide()),this}bindEvents(){return this.stopOnFocus&&this.duration>0&&(this.mouseOverHandler=()=>o.delTimeout(this),this.mouseLeaveHandler=()=>o.addTimeout(this,this.duration,()=>this.hide()),this.element.addEventListener("mouseover",this.mouseOverHandler),this.element.addEventListener("mouseleave",this.mouseLeaveHandler)),this.onClick&&(this.clickHandler=t=>{this.onClick?.call(this,t)},this.element.addEventListener("click",this.clickHandler)),this}applyStyles(t,e){for(const i in e)e[i]!==void 0&&(t.style[i]=e[i])}show(){const t=this.oldestFirst?this.root.firstChild:this.root.lastChild;return this.root.insertBefore(this.element,t),this.element.classList.replace("hide","show")||this.element.classList.add("show"),this.duration&&this.duration>0&&o.addTimeout(this,this.duration,()=>this.hide()),this}showToast(){return this.show()}hide(){this.element&&(o.delTimeout(this),this.mouseOverHandler&&this.element.removeEventListener("mouseover",this.mouseOverHandler),this.mouseLeaveHandler&&this.element.removeEventListener("mouseleave",this.mouseLeaveHandler),this.clickHandler&&this.element.removeEventListener("click",this.clickHandler),this.closeButton&&this.closeButtonHandler&&this.closeButton.removeEventListener("click",this.closeButtonHandler),this.animationEndHandler=t=>{t.animationName.startsWith("toast-out")&&(this.element?.removeEventListener("animationend",this.animationEndHandler),this.element?.remove())},this.element.addEventListener("animationend",this.animationEndHandler),this.element.classList.replace("show","hide")||this.element.classList.add("hide"),this.onClose?.())}hideToast(){this.hide()}}function a(l){return new n(l)}globalThis.Toast=a;globalThis.Toastify=a;})(); +//# sourceMappingURL=toastify.min.js.map diff --git a/dist/toastify.min.js.map b/dist/toastify.min.js.map new file mode 100644 index 0000000..5d7e5fa --- /dev/null +++ b/dist/toastify.min.js.map @@ -0,0 +1,7 @@ +{ + "version": 3, + "sources": ["../src/toastify.ts"], + "sourcesContent": ["export type Gravity = \"top\" | \"bottom\";\r\nexport type Position = \"left\" | \"center\" | \"right\";\r\n\r\nexport interface ToastOptions {\r\n root?: Element;\r\n text?: string;\r\n node?: Node;\r\n duration?: number;\r\n close?: boolean;\r\n gravity?: Gravity;\r\n position?: Position;\r\n className?: string | string[];\r\n stopOnFocus?: boolean;\r\n onClose?: () => void;\r\n onClick?: (e: Event) => void;\r\n style?: Partial;\r\n oldestFirst?: boolean;\r\n}\r\n\r\nclass ToastManager {\r\n private static timeoutMap = new Map();\r\n private static containers = new Map();\r\n\r\n static getContainer(gravity: Gravity, position: Position): HTMLElement {\r\n const containerId = `toast-container-${gravity}-${position}`;\r\n if (this.containers.has(containerId)) {\r\n return this.containers.get(containerId)!;\r\n }\r\n return this.createContainer(containerId, gravity, position);\r\n }\r\n\r\n private static createContainer(id: string, gravity: Gravity, position: Position): HTMLElement {\r\n const container = document.createElement(\"div\");\r\n container.classList.add('toast-container', id, `toast-${gravity}`, `toast-${position}`);\r\n container.setAttribute('role', 'region');\r\n document.body.appendChild(container);\r\n this.containers.set(id, container);\r\n return container;\r\n }\r\n\r\n static addTimeout(toast: Toast, duration: number, callback: () => void) {\r\n this.delTimeout(toast);\r\n const timeoutId = window.setTimeout(() => {\r\n callback();\r\n this.delTimeout(toast);\r\n }, duration);\r\n this.timeoutMap.set(toast, timeoutId);\r\n }\r\n\r\n static delTimeout(toast: Toast) {\r\n if (this.timeoutMap.has(toast)) {\r\n clearTimeout(this.timeoutMap.get(toast)!);\r\n this.timeoutMap.delete(toast);\r\n }\r\n }\r\n}\r\n\r\n/**\r\n * Toast\r\n * @example\r\n * new Toast({ text: \"Hello World\" }).show();\r\n */\r\nexport class Toast {\r\n private static readonly defaults: ToastOptions = {\r\n gravity: \"top\",\r\n position: 'right',\r\n stopOnFocus: true,\r\n oldestFirst: true,\r\n };\r\n\r\n public options: ToastOptions;\r\n\r\n public duration: number;\r\n public element: HTMLElement;\r\n public root: Element;\r\n public gravity: Gravity;\r\n public position: Position;\r\n public close: boolean;\r\n public oldestFirst: boolean;\r\n public stopOnFocus: boolean;\r\n public onClick?: (e: Event) => void;\r\n public onClose?: () => void;\r\n \r\n private contentElement?: HTMLDivElement;\r\n private closeButton?: HTMLSpanElement;\r\n private mouseOverHandler?: () => void;\r\n private mouseLeaveHandler?: () => void;\r\n private clickHandler?: (e: Event) => void;\r\n private closeButtonHandler?: () => void;\r\n private animationEndHandler?: (e: AnimationEvent) => void;\r\n\r\n /**\r\n * Create a Toastify instance\r\n * @param options User configuration options\r\n */\r\n constructor(options: ToastOptions) {\r\n this.options = {\r\n ...Toast.defaults,\r\n ...options\r\n };\r\n\r\n this.element = document.createElement(\"div\");\r\n this.gravity = this.options.gravity!;\r\n this.position = this.options.position!;\r\n this.root = this.options.root ?? ToastManager.getContainer(this.gravity, this.position);\r\n this.oldestFirst = this.options.oldestFirst!;\r\n this.stopOnFocus = this.options.stopOnFocus!;\r\n this.duration = this.options.duration ?? -1;\r\n this.close = this.options.close ?? false;\r\n this.onClick = this.options.onClick;\r\n this.onClose = this.options.onClose;\r\n this.applyBaseStyles()\r\n .createContent()\r\n .addCloseButton()\r\n .measureDimensions()\r\n .ensureCloseMethod()\r\n .bindEvents();\r\n }\r\n\r\n private applyBaseStyles(): this {\r\n this.element.classList.add('toast', `toast-${this.gravity}`, `toast-${this.position}`);\r\n\r\n if (this.options.className) {\r\n const classes = Array.isArray(this.options.className)\r\n ? this.options.className\r\n : [this.options.className];\r\n classes.forEach(cls => this.element.classList.add(cls));\r\n }\r\n return this;\r\n }\r\n\r\n private createContent(): this {\r\n this.contentElement = document.createElement(\"div\");\r\n this.contentElement.classList.add('toast-content');\r\n\r\n if (this.options.text) {\r\n this.contentElement.textContent = this.options.text;\r\n }\r\n if (this.options.node) {\r\n this.contentElement.appendChild(this.options.node);\r\n }\r\n if (this.options.style) {\r\n this.applyStyles(this.contentElement, this.options.style);\r\n }\r\n\r\n this.element.appendChild(this.contentElement);\r\n return this;\r\n }\r\n\r\n private addCloseButton(): this {\r\n if (!this.close) return this;\r\n\r\n this.closeButton = document.createElement(\"span\");\r\n this.closeButton.ariaLabel = \"Close\";\r\n this.closeButton.className = \"toast-close\";\r\n this.closeButton.textContent = \"πŸ—™\";\r\n this.closeButtonHandler = () => this.hide();\r\n this.closeButton.addEventListener(\"click\", this.closeButtonHandler);\r\n\r\n this.element.appendChild(this.closeButton);\r\n return this;\r\n }\r\n\r\n private measureDimensions(): this {\r\n const originalStyles = {\r\n display: this.element.style.display,\r\n visibility: this.element.style.visibility,\r\n position: this.element.style.position\r\n };\r\n\r\n this.applyStyles(this.element, {\r\n display: 'block',\r\n visibility: 'hidden',\r\n position: 'absolute'\r\n });\r\n\r\n document.body.appendChild(this.element);\r\n const { height, width } = this.element.getBoundingClientRect();\r\n this.element.style.setProperty('--toast-height', `${height}px`);\r\n this.element.style.setProperty('--toast-width', `${width}px`);\r\n document.body.removeChild(this.element);\r\n\r\n this.applyStyles(this.element, originalStyles);\r\n return this;\r\n }\r\n\r\n private ensureCloseMethod(): this {\r\n if (this.duration <= 0 && !this.close && !this.onClick) {\r\n this.onClick = () => this.hide();\r\n }\r\n return this;\r\n }\r\n\r\n private bindEvents(): this {\r\n if (this.stopOnFocus && this.duration > 0) {\r\n this.mouseOverHandler = () => ToastManager.delTimeout(this);\r\n this.mouseLeaveHandler = () => ToastManager.addTimeout(this, this.duration, () => this.hide());\r\n this.element.addEventListener(\"mouseover\", this.mouseOverHandler);\r\n this.element.addEventListener(\"mouseleave\", this.mouseLeaveHandler);\r\n }\r\n \r\n if (this.onClick) {\r\n this.clickHandler = (e: Event) => {\r\n this.onClick?.call(this, e);\r\n };\r\n this.element.addEventListener(\"click\", this.clickHandler);\r\n }\r\n return this;\r\n }\r\n\r\n private applyStyles(element: HTMLElement, styles: Partial) {\r\n for (const key in styles) {\r\n if (styles[key] === undefined) continue;\r\n element.style[key] = styles[key];\r\n }\r\n }\r\n\r\n /**\r\n * Display the Toast notification\r\n * @returns this Instance for method chaining\r\n */\r\n public show(): this {\r\n const elementToInsert = this.oldestFirst ? this.root.firstChild : this.root.lastChild;\r\n this.root.insertBefore(this.element!, elementToInsert);\r\n if (!this.element.classList.replace('hide', 'show')) {\r\n this.element.classList.add('show')\r\n }\r\n if (this.duration && this.duration > 0) {\r\n ToastManager.addTimeout(this, this.duration!, () => this.hide());\r\n }\r\n return this;\r\n }\r\n\r\n /**\r\n * @deprecated This function is deprecated. Use the show() instead.\r\n */\r\n public showToast() {\r\n return this.show();\r\n }\r\n\r\n /**\r\n * Immediately hide the current Toast\r\n * Triggers a CSS exit animation and removes the element after the animation completes\r\n */\r\n public hide(): void {\r\n if (!this.element) return;\r\n ToastManager.delTimeout(this);\r\n \r\n // η§»ι™€ζ‰€ζœ‰δΊ‹δ»Άη›‘ε¬ε™¨\r\n if (this.mouseOverHandler) {\r\n this.element.removeEventListener('mouseover', this.mouseOverHandler);\r\n }\r\n if (this.mouseLeaveHandler) {\r\n this.element.removeEventListener('mouseleave', this.mouseLeaveHandler);\r\n }\r\n if (this.clickHandler) {\r\n this.element.removeEventListener('click', this.clickHandler);\r\n }\r\n if (this.closeButton && this.closeButtonHandler) {\r\n this.closeButton.removeEventListener('click', this.closeButtonHandler);\r\n }\r\n\r\n this.animationEndHandler = (e: AnimationEvent) => {\r\n if (e.animationName.startsWith('toast-out')) {\r\n this.element?.removeEventListener('animationend', this.animationEndHandler!);\r\n this.element?.remove();\r\n }\r\n };\r\n\r\n this.element.addEventListener('animationend', this.animationEndHandler);\r\n if (!this.element.classList.replace('show', 'hide')) {\r\n this.element.classList.add('hide');\r\n }\r\n this.onClose?.();\r\n }\r\n\r\n /**\r\n * @deprecated This function is deprecated. Use the hide() instead.\r\n */\r\n public hideToast(): void {\r\n this.hide();\r\n }\r\n}\r\n\r\nexport default function createToast(options: ToastOptions): Toast {\r\n return new Toast(options);\r\n}\r\n\r\ndeclare global {\r\n function Toast(options: ToastOptions): Toast;\r\n /**\r\n * @deprecated This function is deprecated. Use the Toast() instead.\r\n */\r\n function Toastify(options: ToastOptions): Toast;\r\n}\r\n\r\nglobalThis.Toast = createToast;\r\nglobalThis.Toastify = createToast;\r\n"], + "mappings": "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", + "names": ["ToastManager", "gravity", "position", "containerId", "id", "container", "toast", "duration", "callback", "timeoutId", "Toast", "options", "cls", "originalStyles", "height", "width", "e", "element", "styles", "key", "elementToInsert", "createToast"] +} diff --git a/example/script.js b/example/script.js index 8d290ff..a080897 100644 --- a/example/script.js +++ b/example/script.js @@ -1,36 +1,38 @@ var bgColors = [ - "linear-gradient(to right, #00b09b, #96c93d)", - "linear-gradient(to right, #ff5f6d, #ffc371)", - ], - i = 0; + "linear-gradient(to right, #00b09b, #96c93d)", + "linear-gradient(to right, #ff5f6d, #ffc371)", +]; +var gravity = ["top", "bottom"]; +var position = ["left", "center", "right"]; -Toastify({ +Toast({ text: "Hi", - duration: 4500, - destination: "https://github.com/apvarun/toastify-js", - newWindow: true, gravity: "top", position: 'left', -}).showToast(); + onClick(e) { + console.log(e); + window.open("https://github.com/apvarun/toastify-js"); + this.hide(); + } +}).show(); -setTimeout(function() { - Toastify({ +setTimeout(function () { + Toast({ text: "Simple JavaScript Toasts", gravity: "top", position: 'center', style: { background: '#0f3443' } - }).showToast(); + }).show(); }, 1000); // Options for the toast var options = { text: "Happy toasting!", duration: 2500, - callback: function() { + onClose() { console.log("Toast hidden"); - Toastify.reposition(); }, close: true, style: { @@ -39,15 +41,15 @@ var options = { }; // Initializing the toast -var myToast = Toastify(options); +var myToast = Toast(options); // Toast after delay -setTimeout(function() { - myToast.showToast(); +setTimeout(function () { + myToast.show(); }, 4500); -setTimeout(function() { - Toastify({ +setTimeout(function () { + Toast({ text: "Highly customizable", gravity: "bottom", position: 'left', @@ -55,18 +57,21 @@ setTimeout(function() { style: { background: "linear-gradient(to right, #ff5f6d, #ffc371)", } - }).showToast(); + }).show(); }, 3000); -// Displaying toast on manual action `Try` -document.getElementById("new-toast").addEventListener("click", function() { - Toastify({ - text: "I am a toast", + +document.getElementById("new-toast").addEventListener("click", function () { + let g = gravity.at(Math.floor(Math.random() * gravity.length)) + let p = position.at(Math.floor(Math.random() * position.length)) + Toast({ + text: `I am a ${g} ${p} toast`, duration: 3000, - close: i % 3 ? true : false, + gravity: g, + position: p, + close: Math.random() >= 0.5, style: { - background: bgColors[i % 2], + background: bgColors[Math.floor(Math.random() * bgColors.length)], } - }).showToast(); - i++; + }).show(); }); diff --git a/index.html b/index.html index 49174ee..daab23e 100644 --- a/index.html +++ b/index.html @@ -28,10 +28,10 @@

Toastify JS

Usage

-

Toastify({

+

Toast({

text: "This is a toast",

duration: 3000

-

}).showToast();

+

}).show();
@@ -42,7 +42,7 @@

Usage

- +