diff --git a/dist/xz-notify.js b/dist/xz-notify.js index ddad5f3..2fb1626 100644 --- a/dist/xz-notify.js +++ b/dist/xz-notify.js @@ -8,7 +8,7 @@ * * @author Dmitri Smirnov * @license MIT 2023 - * @version 3.0.2 + * @version 3.0.3 * @extends HTMLElement * * @property {number} [expire=10000] Time in milliseconds. How long the @@ -310,7 +310,7 @@ const _XZNotify = class extends HTMLElement { /** * Handler when closeable is true and clicked on the notification. */ - closeHandler(e) { + closeHandler() { this.forcedClose = true; } disconnectedCallback() { diff --git a/dist/xz-notify.min.js b/dist/xz-notify.min.js index 5c30a38..0935e8c 100644 --- a/dist/xz-notify.min.js +++ b/dist/xz-notify.min.js @@ -1,4 +1,4 @@ -//xz-notify.min.js,3.0.2,https://github.com/dknight/xz-notify +//xz-notify.min.js,3.0.3,https://github.com/dknight/xz-notify "use strict";const t=class extends HTMLElement{constructor(i,e,o=!1,s=t.defaults.GROUPED,a=t.positions.NE,n=t.defaults.EXPIRE,l=t.defaults.TYPE,h=!0,c){super(),this.root=i,this.styleElem=e,this.forcedClose=o,this.grouped=s,this.position=a,this.expire=n,this.type=l,this.closeable=h,this.heading=c,this.root=this.attachShadow({mode:"open"}),this.styleElem=document.createElement("style"),this.styleElem.textContent=`:host { --xz-notify-background-color: #f7f7f7; --xz-notify-heading-color: currentColor; @@ -79,5 +79,5 @@ } :host([type="error"]) { background: #ff4136; - }`}setPosition(){const i=this.grouped?0:this.findIndex(),[e,o]=this.calcBasePosition(),[s,a]=this.calcOffsetPosition(i);if(this.style.setProperty("--xz-notify-left",`calc(${e} - ${s}px)`),this.style.setProperty("--xz-notify-top",`calc(${o} + ${a}px)`),this.grouped){const n=t.collection[this.position].length;this.style.setProperty("--xz-notify-zIndex",String(1e4-n))}}findIndex(){return t.collection[this.position].findIndex(i=>i===this)}calcBasePosition(){switch(this.position){case t.positions.N:return["50%","0%"];default:case t.positions.NE:return["100%","0%"];case t.positions.E:return["100%","50%"];case t.positions.SE:return["100%","100%"];case t.positions.S:return["50%","100%"];case t.positions.SW:return["0%","100%"];case t.positions.W:return["0%","50%"];case t.positions.NW:return["0%","0%"]}}calcOffsetPosition(i){const e=this.getBoundingClientRect(),o=getComputedStyle(this),s=Number.parseInt(o.getPropertyValue("margin-top")),a=Number.parseInt(o.getPropertyValue("margin-right")),n=Number.parseInt(o.getPropertyValue("margin-bottom")),l=Number.parseInt(o.getPropertyValue("margin-left"));switch(this.position){case t.positions.N:return[e.width/2,i*(e.height+s)];default:case t.positions.NE:return[e.width+l+a,i*(e.height+s)];case t.positions.E:return[(i+1)*(e.width+l+a),-(e.height/2+s+n)];case t.positions.SE:return[e.width+l+a,-(i+1)*(e.height+s+n)];case t.positions.S:return[e.width/2,-(i+1)*(e.height+s+n)];case t.positions.SW:return[0,-(i+1)*(e.height+s+n)];case t.positions.W:return[i*-(e.width+l),-(e.height/2+s+n)];case t.positions.NW:return[0,i*(e.height+s)]}}setPositionAll(){Object.values(t.collection).forEach(i=>{i.forEach(e=>this.setPosition.call(e))})}connectedCallback(){this.reflectToProperties(),t.collection[this.position].push(this),this.dispatchEvent(t.events.OPEN),this.render(),this.hydrate()}reflectToProperties(){const i=this.getAttribute("type")||t.defaults.TYPE;this.type=i.toLowerCase(),this.position=(this.getAttribute("position")||t.positions.NE).toLowerCase();const e=this.getAttribute("expire");e===null||Number.isNaN(Number(e))?this.expire=t.defaults.EXPIRE:this.expire=Number(e),this.closeable=this.hasAttribute("closeable"),this.heading=this.getAttribute("heading"),this.grouped=this.hasAttribute("grouped")}render(){this.root.append(this.styleElem),this.heading&&this.root.appendChild(this.buildHeading()),this.root.append(...this.childNodes),this.setAttribute("role","alert")}buildHeading(){const i=document.createElement("h3");return this.heading&&(i.innerText=this.heading),i.classList.add("heading"),i}hydrate(){const i=Number.parseFloat(window.getComputedStyle(this).getPropertyValue("animation-duration"))>0;this.setPosition();let e;const o=s=>{if(e===void 0&&(e=s),s-e>=this.expire||this.forcedClose){this.dataset.closing="true",i?this.style.animationPlayState="running":this.close();return}requestAnimationFrame(o)};requestAnimationFrame(o),this.addEventListener("animationend",this.close),this.closeable&&this.addEventListener("click",this.closeHandler.bind(this))}close(){if(!this.dataset.closing){this.style.animationPlayState="paused";return}this.dispatchEvent(t.events.CLOSE),this.remove()}closeHandler(i){this.forcedClose=!0}disconnectedCallback(){t.collection[this.position]=t.collection[this.position].filter(i=>i!==this),this.setPositionAll()}};let r=t;r.TAG_NAME="xz-notify",r.observedAttributes=[],r.types={DEFAULT:"default",INFO:"info",WARNING:"warning",SUCCESS:"success",ERROR:"error"},r.events={OPEN:new CustomEvent("xz-notify:open",{bubbles:!0}),CLOSE:new CustomEvent("xz-notify:close",{bubbles:!0})},r.positions={N:"n",NE:"ne",E:"e",SE:"se",S:"s",SW:"sw",W:"w",NW:"nw"},r.collection={[t.positions.N]:[],[t.positions.NE]:[],[t.positions.E]:[],[t.positions.SE]:[],[t.positions.S]:[],[t.positions.SW]:[],[t.positions.W]:[],[t.positions.NW]:[]},r.defaults={EXPIRE:1e4,TYPE:t.types.INFO,POSITION:t.positions.NE,CLOSEABLE:!1,GROUPED:!1,HEADING:null},r.create=(i,e={},o=!1)=>{const s=document.createElement(t.TAG_NAME);return Object.entries(e).forEach(([a,n])=>{n===!1||n===null||s.setAttribute(a,String(n))}),s[o?"innerHTML":"textContent"]=i,s},window.customElements.define(r.TAG_NAME,r);export default r; + }`}setPosition(){const i=this.grouped?0:this.findIndex(),[e,o]=this.calcBasePosition(),[s,a]=this.calcOffsetPosition(i);if(this.style.setProperty("--xz-notify-left",`calc(${e} - ${s}px)`),this.style.setProperty("--xz-notify-top",`calc(${o} + ${a}px)`),this.grouped){const n=t.collection[this.position].length;this.style.setProperty("--xz-notify-zIndex",String(1e4-n))}}findIndex(){return t.collection[this.position].findIndex(i=>i===this)}calcBasePosition(){switch(this.position){case t.positions.N:return["50%","0%"];default:case t.positions.NE:return["100%","0%"];case t.positions.E:return["100%","50%"];case t.positions.SE:return["100%","100%"];case t.positions.S:return["50%","100%"];case t.positions.SW:return["0%","100%"];case t.positions.W:return["0%","50%"];case t.positions.NW:return["0%","0%"]}}calcOffsetPosition(i){const e=this.getBoundingClientRect(),o=getComputedStyle(this),s=Number.parseInt(o.getPropertyValue("margin-top")),a=Number.parseInt(o.getPropertyValue("margin-right")),n=Number.parseInt(o.getPropertyValue("margin-bottom")),l=Number.parseInt(o.getPropertyValue("margin-left"));switch(this.position){case t.positions.N:return[e.width/2,i*(e.height+s)];default:case t.positions.NE:return[e.width+l+a,i*(e.height+s)];case t.positions.E:return[(i+1)*(e.width+l+a),-(e.height/2+s+n)];case t.positions.SE:return[e.width+l+a,-(i+1)*(e.height+s+n)];case t.positions.S:return[e.width/2,-(i+1)*(e.height+s+n)];case t.positions.SW:return[0,-(i+1)*(e.height+s+n)];case t.positions.W:return[i*-(e.width+l),-(e.height/2+s+n)];case t.positions.NW:return[0,i*(e.height+s)]}}setPositionAll(){Object.values(t.collection).forEach(i=>{i.forEach(e=>this.setPosition.call(e))})}connectedCallback(){this.reflectToProperties(),t.collection[this.position].push(this),this.dispatchEvent(t.events.OPEN),this.render(),this.hydrate()}reflectToProperties(){const i=this.getAttribute("type")||t.defaults.TYPE;this.type=i.toLowerCase(),this.position=(this.getAttribute("position")||t.positions.NE).toLowerCase();const e=this.getAttribute("expire");e===null||Number.isNaN(Number(e))?this.expire=t.defaults.EXPIRE:this.expire=Number(e),this.closeable=this.hasAttribute("closeable"),this.heading=this.getAttribute("heading"),this.grouped=this.hasAttribute("grouped")}render(){this.root.append(this.styleElem),this.heading&&this.root.appendChild(this.buildHeading()),this.root.append(...this.childNodes),this.setAttribute("role","alert")}buildHeading(){const i=document.createElement("h3");return this.heading&&(i.innerText=this.heading),i.classList.add("heading"),i}hydrate(){const i=Number.parseFloat(window.getComputedStyle(this).getPropertyValue("animation-duration"))>0;this.setPosition();let e;const o=s=>{if(e===void 0&&(e=s),s-e>=this.expire||this.forcedClose){this.dataset.closing="true",i?this.style.animationPlayState="running":this.close();return}requestAnimationFrame(o)};requestAnimationFrame(o),this.addEventListener("animationend",this.close),this.closeable&&this.addEventListener("click",this.closeHandler.bind(this))}close(){if(!this.dataset.closing){this.style.animationPlayState="paused";return}this.dispatchEvent(t.events.CLOSE),this.remove()}closeHandler(){this.forcedClose=!0}disconnectedCallback(){t.collection[this.position]=t.collection[this.position].filter(i=>i!==this),this.setPositionAll()}};let r=t;r.TAG_NAME="xz-notify",r.observedAttributes=[],r.types={DEFAULT:"default",INFO:"info",WARNING:"warning",SUCCESS:"success",ERROR:"error"},r.events={OPEN:new CustomEvent("xz-notify:open",{bubbles:!0}),CLOSE:new CustomEvent("xz-notify:close",{bubbles:!0})},r.positions={N:"n",NE:"ne",E:"e",SE:"se",S:"s",SW:"sw",W:"w",NW:"nw"},r.collection={[t.positions.N]:[],[t.positions.NE]:[],[t.positions.E]:[],[t.positions.SE]:[],[t.positions.S]:[],[t.positions.SW]:[],[t.positions.W]:[],[t.positions.NW]:[]},r.defaults={EXPIRE:1e4,TYPE:t.types.INFO,POSITION:t.positions.NE,CLOSEABLE:!1,GROUPED:!1,HEADING:null},r.create=(i,e={},o=!1)=>{const s=document.createElement(t.TAG_NAME);return Object.entries(e).forEach(([a,n])=>{n===!1||n===null||s.setAttribute(a,String(n))}),s[o?"innerHTML":"textContent"]=i,s},window.customElements.define(r.TAG_NAME,r);export default r; //# sourceMappingURL=xz-notify.min.js.map diff --git a/dist/xz-notify.min.js.map b/dist/xz-notify.min.js.map index 0ed3319..657ab74 100644 --- a/dist/xz-notify.min.js.map +++ b/dist/xz-notify.min.js.map @@ -1,7 +1,7 @@ { "version": 3, "sources": ["xz-notify.js"], - "sourcesContent": ["\"use strict\";\n/**\n * XZNotify is a framework-agnostic web component to show floating\n * notifications. The component uses a first-in, first-out queue.data structure,\n * new notifications are automatically appended to the end of the queue.\n * Also, each appended component automatically computes its own position.\n * More details on https://www.github.com/dknight/xz-notify\n *\n * @author Dmitri Smirnov \n * @license MIT 2023\n * @version 3.0.2\n * @extends HTMLElement\n *\n * @property {number} [expire=10000] Time in milliseconds. How long the\n * notification will be displayed. If expire is zero or less, the notification\n * will be closed immediately. If the expiration value cannot be parsed into a\n * number then the default fallback is used.\n * @property {boolean} [closeable=false] If it is set, clicking on the\n * notification will close it.\n * @property {Positions} [position=\"ne\"] Position of the notification on the\n * screen. Position corresponds to a point of compass: n (north),\n * ne (north-east), s (south), etc.\n * @property {string} [heading] The heading of the notification. Creates h3\n * element inside the notification.\n * @property {boolean} [grouped=false] If grouped is set, then the offset\n * position is not recalculated and notifications are stacked.\n *\n * @fires XZNotify#open\n * @fires XZNotify#close\n *\n * @example\n * \n * Hello world!\n * @example\n * // Programmatic way\n * document.body.append(XZNotify.create('Hello world!', {\n * expire: 8000,\n * closeable: true,\n * }));\n */\nconst _XZNotify = class extends HTMLElement {\n /**\n * Constructor is always called before an instance of notification is\n * connected to the DOM.\n */\n constructor(root, styleElem, forcedClose = false, grouped = _XZNotify.defaults.GROUPED, position = _XZNotify.positions.NE, expire = _XZNotify.defaults.EXPIRE, type = _XZNotify.defaults.TYPE, closeable = true, heading) {\n super();\n this.root = root;\n this.styleElem = styleElem;\n this.forcedClose = forcedClose;\n this.grouped = grouped;\n this.position = position;\n this.expire = expire;\n this.type = type;\n this.closeable = closeable;\n this.heading = heading;\n this.root = this.attachShadow({ mode: \"open\" });\n this.styleElem = document.createElement(\"style\");\n this.styleElem.textContent = `:host {\n --xz-notify-background-color: #f7f7f7;\n --xz-notify-heading-color: currentColor;\n --xz-notify-zIndex: 1000;\n \n display: block;\n position: fixed;\n left: var(--xz-notify-left);\n top: var(--xz-notify-top);\n border-radius: 0;\n border: 0 solid;\n font-family: system-ui, -apple-system, Arial, sans-serif;\n font-size: 16px;\n font-weight: normal;\n line-height: normal;\n margin: .5em;\n padding: 1.5em;\n width: fit-content;\n max-width: 28em;\n min-width: 18em;\n height: auto;\n z-index: var(--xz-notify-zIndex);\n animation: xz-notify-toggle .25s ease-in;\n background:\n var(--xz-notify-background-color)\n linear-gradient(to right, var(--xz-notify-heading-color) .25em, transparent 0);\n border-color: transparent;\n color: #666;\n }\n \n :host([data-closing]) {\n animation-direction: reverse;\n animation-iteration-count: 2;\n }\n \n @keyframes xz-notify-toggle {\n from {opacity: 0;}\n to {opacity: 1;}\n }\n \n :host([closeable]) {\n cursor: pointer;\n }\n :host([closeable]:hover)::after {\n content: '';\n display: block;\n width: 100%; height: 100%;\n background: rgba(0,0,0,.05);\n position: absolute;\n top: 0; left: 0;\n pointer-events: none;\n }\n :host p {margin-top: 0}\n :host a {color: currentColor}\n :host .heading {\n color: var(--xz-notify-heading-color, currentColor);\n font-size: 125%;\n margin: 0 0 .5em;\n }\n \n /* Default theme */\n :host {\n color: #fff;\n padding: 1em;\n border-radius: 0;\n border-width: 0;\n background: #9c9c9c;\n --xz-notify-heading-color: currentColor;\n }\n :host([type=\"info\"]) {\n background: #5f9eb7;\n }\n :host([type=\"success\"]) {\n background: #2ecc40;\n }\n :host([type=\"warning\"]) {\n background: #ff851b;\n }\n :host([type=\"error\"]) {\n background: #ff4136;\n }`;\n }\n /**\n * Calculates and sets the position of the notification.\n */\n setPosition() {\n const i = this.grouped ? 0 : this.findIndex();\n const [x, y] = this.calcBasePosition();\n const [dx, dy] = this.calcOffsetPosition(i);\n this.style.setProperty(\"--xz-notify-left\", `calc(${x} - ${dx}px)`);\n this.style.setProperty(\"--xz-notify-top\", `calc(${y} + ${dy}px)`);\n if (this.grouped) {\n const c = _XZNotify.collection[this.position].length;\n this.style.setProperty(\"--xz-notify-zIndex\", String(1e4 - c));\n }\n }\n /**\n * Gets the index of the current notification in collection.\n */\n findIndex() {\n return _XZNotify.collection[this.position].findIndex((x) => x === this);\n }\n /**\n * Calculates base position.\n */\n calcBasePosition() {\n switch (this.position) {\n case _XZNotify.positions.N:\n return [\"50%\", \"0%\"];\n default:\n case _XZNotify.positions.NE:\n return [\"100%\", \"0%\"];\n case _XZNotify.positions.E:\n return [\"100%\", \"50%\"];\n case _XZNotify.positions.SE:\n return [\"100%\", \"100%\"];\n case _XZNotify.positions.S:\n return [\"50%\", \"100%\"];\n case _XZNotify.positions.SW:\n return [\"0%\", \"100%\"];\n case _XZNotify.positions.W:\n return [\"0%\", \"50%\"];\n case _XZNotify.positions.NW:\n return [\"0%\", \"0%\"];\n }\n }\n /**\n * Calculates offset position.\n */\n calcOffsetPosition(i) {\n const rect = this.getBoundingClientRect();\n const styles = getComputedStyle(this);\n const mt = Number.parseInt(styles.getPropertyValue(\"margin-top\"));\n const mr = Number.parseInt(styles.getPropertyValue(\"margin-right\"));\n const mb = Number.parseInt(styles.getPropertyValue(\"margin-bottom\"));\n const ml = Number.parseInt(styles.getPropertyValue(\"margin-left\"));\n switch (this.position) {\n case _XZNotify.positions.N:\n return [rect.width / 2, i * (rect.height + mt)];\n default:\n case _XZNotify.positions.NE:\n return [rect.width + ml + mr, i * (rect.height + mt)];\n case _XZNotify.positions.E:\n return [(i + 1) * (rect.width + ml + mr), -(rect.height / 2 + mt + mb)];\n case _XZNotify.positions.SE:\n return [rect.width + ml + mr, -(i + 1) * (rect.height + mt + mb)];\n case _XZNotify.positions.S:\n return [rect.width / 2, -(i + 1) * (rect.height + mt + mb)];\n case _XZNotify.positions.SW:\n return [0, -(i + 1) * (rect.height + mt + mb)];\n case _XZNotify.positions.W:\n return [i * -(rect.width + ml), -(rect.height / 2 + mt + mb)];\n case _XZNotify.positions.NW:\n return [0, i * (rect.height + mt)];\n }\n }\n /**\n * Re-position all elements.\n */\n setPositionAll() {\n Object.values(_XZNotify.collection).forEach((coll) => {\n coll.forEach((x) => this.setPosition.call(x));\n });\n }\n connectedCallback() {\n this.reflectToProperties();\n _XZNotify.collection[this.position].push(this);\n this.dispatchEvent(_XZNotify.events.OPEN);\n this.render();\n this.hydrate();\n }\n /**\n * Reflect attributes to properties for convenience.\n * Use default if no attribute set.\n */\n reflectToProperties() {\n const tmpType = this.getAttribute(\"type\") || _XZNotify.defaults.TYPE;\n this.type = tmpType.toLowerCase();\n this.position = (this.getAttribute(\"position\") || _XZNotify.positions.NE).toLowerCase();\n const expireTmp = this.getAttribute(\"expire\");\n if (expireTmp === null || Number.isNaN(Number(expireTmp))) {\n this.expire = _XZNotify.defaults.EXPIRE;\n } else {\n this.expire = Number(expireTmp);\n }\n this.closeable = this.hasAttribute(\"closeable\");\n this.heading = this.getAttribute(\"heading\");\n this.grouped = this.hasAttribute(\"grouped\");\n }\n /**\n * Renders element.\n */\n render() {\n this.root.append(this.styleElem);\n this.heading && this.root.appendChild(this.buildHeading());\n this.root.append(...this.childNodes);\n this.setAttribute(\"role\", \"alert\");\n }\n /**\n * Builds heading

element.\n */\n buildHeading() {\n const h = document.createElement(\"h3\");\n if (this.heading) {\n h.innerText = this.heading;\n }\n h.classList.add(\"heading\");\n return h;\n }\n /**\n * Added all interactivity here for potential SSR. But it can actually be\n * done in render() or connectedCallback().\n */\n hydrate() {\n const hasAnimation = Number.parseFloat(\n window.getComputedStyle(this).getPropertyValue(\"animation-duration\")\n ) > 0;\n this.setPosition();\n let start;\n const tick = (ts) => {\n if (start === void 0) {\n start = ts;\n }\n if (ts - start >= this.expire || this.forcedClose) {\n this.dataset.closing = \"true\";\n if (hasAnimation) {\n this.style.animationPlayState = \"running\";\n } else {\n this.close();\n }\n return;\n }\n requestAnimationFrame(tick);\n };\n requestAnimationFrame(tick);\n this.addEventListener(\"animationend\", this.close);\n if (this.closeable) {\n this.addEventListener(\"click\", this.closeHandler.bind(this));\n }\n }\n /**\n * Closes the notification.\n */\n close() {\n if (!this.dataset.closing) {\n this.style.animationPlayState = \"paused\";\n return;\n }\n this.dispatchEvent(_XZNotify.events.CLOSE);\n this.remove();\n }\n /**\n * Handler when closeable is true and clicked on the notification.\n */\n closeHandler(e) {\n this.forcedClose = true;\n }\n disconnectedCallback() {\n _XZNotify.collection[this.position] = _XZNotify.collection[this.position].filter((x) => x !== this);\n this.setPositionAll();\n }\n};\nlet XZNotify = _XZNotify;\n/**\n * XZNotify HTML tag name.\n */\nXZNotify.TAG_NAME = \"xz-notify\";\n/**\n * Observed attributes if required. Usually, a notification's life is very\n * short, and there is no point in observing attributes.\n */\nXZNotify.observedAttributes = [];\n/**\n * Notification's possible types.\n */\nXZNotify.types = {\n DEFAULT: \"default\",\n INFO: \"info\",\n WARNING: \"warning\",\n SUCCESS: \"success\",\n ERROR: \"error\"\n};\n/**\n * Events for the component.\n */\nXZNotify.events = {\n OPEN: new CustomEvent(\"xz-notify:open\", { bubbles: true }),\n CLOSE: new CustomEvent(\"xz-notify:close\", { bubbles: true })\n};\n/**\n * Positioning constants.\n */\nXZNotify.positions = {\n N: \"n\",\n NE: \"ne\",\n E: \"e\",\n SE: \"se\",\n S: \"s\",\n SW: \"sw\",\n W: \"w\",\n NW: \"nw\"\n};\n/**\n * Contains currently opened notifications.\n */\nXZNotify.collection = {\n [_XZNotify.positions.N]: [],\n [_XZNotify.positions.NE]: [],\n [_XZNotify.positions.E]: [],\n [_XZNotify.positions.SE]: [],\n [_XZNotify.positions.S]: [],\n [_XZNotify.positions.SW]: [],\n [_XZNotify.positions.W]: [],\n [_XZNotify.positions.NW]: []\n};\nXZNotify.defaults = {\n EXPIRE: 1e4,\n TYPE: _XZNotify.types.INFO,\n POSITION: _XZNotify.positions.NE,\n CLOSEABLE: false,\n GROUPED: false,\n HEADING: null\n};\n/**\n * Creates a new XZNotify element. Recommended to use when creating\n * notifications.\n */\nXZNotify.create = (content, props = {}, trusted = false) => {\n const elem = document.createElement(_XZNotify.TAG_NAME);\n Object.entries(props).forEach(\n ([k, v]) => {\n if (v === false || v === null) {\n return;\n }\n elem.setAttribute(k, String(v));\n }\n );\n elem[trusted ? \"innerHTML\" : \"textContent\"] = content;\n return elem;\n};\nwindow.customElements.define(XZNotify.TAG_NAME, XZNotify);\nexport default XZNotify;\n"], - "mappings": "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", - "names": ["_XZNotify", "root", "styleElem", "forcedClose", "grouped", "position", "expire", "type", "closeable", "heading", "x", "y", "dx", "dy", "c", "rect", "styles", "mt", "mr", "mb", "ml", "coll", "tmpType", "expireTmp", "h", "hasAnimation", "start", "tick", "ts", "e", "XZNotify", "content", "props", "trusted", "elem", "k", "v"] + "sourcesContent": ["\"use strict\";\n/**\n * XZNotify is a framework-agnostic web component to show floating\n * notifications. The component uses a first-in, first-out queue.data structure,\n * new notifications are automatically appended to the end of the queue.\n * Also, each appended component automatically computes its own position.\n * More details on https://www.github.com/dknight/xz-notify\n *\n * @author Dmitri Smirnov \n * @license MIT 2023\n * @version 3.0.3\n * @extends HTMLElement\n *\n * @property {number} [expire=10000] Time in milliseconds. How long the\n * notification will be displayed. If expire is zero or less, the notification\n * will be closed immediately. If the expiration value cannot be parsed into a\n * number then the default fallback is used.\n * @property {boolean} [closeable=false] If it is set, clicking on the\n * notification will close it.\n * @property {Positions} [position=\"ne\"] Position of the notification on the\n * screen. Position corresponds to a point of compass: n (north),\n * ne (north-east), s (south), etc.\n * @property {string} [heading] The heading of the notification. Creates h3\n * element inside the notification.\n * @property {boolean} [grouped=false] If grouped is set, then the offset\n * position is not recalculated and notifications are stacked.\n *\n * @fires XZNotify#open\n * @fires XZNotify#close\n *\n * @example\n * \n * Hello world!\n * @example\n * // Programmatic way\n * document.body.append(XZNotify.create('Hello world!', {\n * expire: 8000,\n * closeable: true,\n * }));\n */\nconst _XZNotify = class extends HTMLElement {\n /**\n * Constructor is always called before an instance of notification is\n * connected to the DOM.\n */\n constructor(root, styleElem, forcedClose = false, grouped = _XZNotify.defaults.GROUPED, position = _XZNotify.positions.NE, expire = _XZNotify.defaults.EXPIRE, type = _XZNotify.defaults.TYPE, closeable = true, heading) {\n super();\n this.root = root;\n this.styleElem = styleElem;\n this.forcedClose = forcedClose;\n this.grouped = grouped;\n this.position = position;\n this.expire = expire;\n this.type = type;\n this.closeable = closeable;\n this.heading = heading;\n this.root = this.attachShadow({ mode: \"open\" });\n this.styleElem = document.createElement(\"style\");\n this.styleElem.textContent = `:host {\n --xz-notify-background-color: #f7f7f7;\n --xz-notify-heading-color: currentColor;\n --xz-notify-zIndex: 1000;\n \n display: block;\n position: fixed;\n left: var(--xz-notify-left);\n top: var(--xz-notify-top);\n border-radius: 0;\n border: 0 solid;\n font-family: system-ui, -apple-system, Arial, sans-serif;\n font-size: 16px;\n font-weight: normal;\n line-height: normal;\n margin: .5em;\n padding: 1.5em;\n width: fit-content;\n max-width: 28em;\n min-width: 18em;\n height: auto;\n z-index: var(--xz-notify-zIndex);\n animation: xz-notify-toggle .25s ease-in;\n background:\n var(--xz-notify-background-color)\n linear-gradient(to right, var(--xz-notify-heading-color) .25em, transparent 0);\n border-color: transparent;\n color: #666;\n }\n \n :host([data-closing]) {\n animation-direction: reverse;\n animation-iteration-count: 2;\n }\n \n @keyframes xz-notify-toggle {\n from {opacity: 0;}\n to {opacity: 1;}\n }\n \n :host([closeable]) {\n cursor: pointer;\n }\n :host([closeable]:hover)::after {\n content: '';\n display: block;\n width: 100%; height: 100%;\n background: rgba(0,0,0,.05);\n position: absolute;\n top: 0; left: 0;\n pointer-events: none;\n }\n :host p {margin-top: 0}\n :host a {color: currentColor}\n :host .heading {\n color: var(--xz-notify-heading-color, currentColor);\n font-size: 125%;\n margin: 0 0 .5em;\n }\n \n /* Default theme */\n :host {\n color: #fff;\n padding: 1em;\n border-radius: 0;\n border-width: 0;\n background: #9c9c9c;\n --xz-notify-heading-color: currentColor;\n }\n :host([type=\"info\"]) {\n background: #5f9eb7;\n }\n :host([type=\"success\"]) {\n background: #2ecc40;\n }\n :host([type=\"warning\"]) {\n background: #ff851b;\n }\n :host([type=\"error\"]) {\n background: #ff4136;\n }`;\n }\n /**\n * Calculates and sets the position of the notification.\n */\n setPosition() {\n const i = this.grouped ? 0 : this.findIndex();\n const [x, y] = this.calcBasePosition();\n const [dx, dy] = this.calcOffsetPosition(i);\n this.style.setProperty(\"--xz-notify-left\", `calc(${x} - ${dx}px)`);\n this.style.setProperty(\"--xz-notify-top\", `calc(${y} + ${dy}px)`);\n if (this.grouped) {\n const c = _XZNotify.collection[this.position].length;\n this.style.setProperty(\"--xz-notify-zIndex\", String(1e4 - c));\n }\n }\n /**\n * Gets the index of the current notification in collection.\n */\n findIndex() {\n return _XZNotify.collection[this.position].findIndex((x) => x === this);\n }\n /**\n * Calculates base position.\n */\n calcBasePosition() {\n switch (this.position) {\n case _XZNotify.positions.N:\n return [\"50%\", \"0%\"];\n default:\n case _XZNotify.positions.NE:\n return [\"100%\", \"0%\"];\n case _XZNotify.positions.E:\n return [\"100%\", \"50%\"];\n case _XZNotify.positions.SE:\n return [\"100%\", \"100%\"];\n case _XZNotify.positions.S:\n return [\"50%\", \"100%\"];\n case _XZNotify.positions.SW:\n return [\"0%\", \"100%\"];\n case _XZNotify.positions.W:\n return [\"0%\", \"50%\"];\n case _XZNotify.positions.NW:\n return [\"0%\", \"0%\"];\n }\n }\n /**\n * Calculates offset position.\n */\n calcOffsetPosition(i) {\n const rect = this.getBoundingClientRect();\n const styles = getComputedStyle(this);\n const mt = Number.parseInt(styles.getPropertyValue(\"margin-top\"));\n const mr = Number.parseInt(styles.getPropertyValue(\"margin-right\"));\n const mb = Number.parseInt(styles.getPropertyValue(\"margin-bottom\"));\n const ml = Number.parseInt(styles.getPropertyValue(\"margin-left\"));\n switch (this.position) {\n case _XZNotify.positions.N:\n return [rect.width / 2, i * (rect.height + mt)];\n default:\n case _XZNotify.positions.NE:\n return [rect.width + ml + mr, i * (rect.height + mt)];\n case _XZNotify.positions.E:\n return [(i + 1) * (rect.width + ml + mr), -(rect.height / 2 + mt + mb)];\n case _XZNotify.positions.SE:\n return [rect.width + ml + mr, -(i + 1) * (rect.height + mt + mb)];\n case _XZNotify.positions.S:\n return [rect.width / 2, -(i + 1) * (rect.height + mt + mb)];\n case _XZNotify.positions.SW:\n return [0, -(i + 1) * (rect.height + mt + mb)];\n case _XZNotify.positions.W:\n return [i * -(rect.width + ml), -(rect.height / 2 + mt + mb)];\n case _XZNotify.positions.NW:\n return [0, i * (rect.height + mt)];\n }\n }\n /**\n * Re-position all elements.\n */\n setPositionAll() {\n Object.values(_XZNotify.collection).forEach((coll) => {\n coll.forEach((x) => this.setPosition.call(x));\n });\n }\n connectedCallback() {\n this.reflectToProperties();\n _XZNotify.collection[this.position].push(this);\n this.dispatchEvent(_XZNotify.events.OPEN);\n this.render();\n this.hydrate();\n }\n /**\n * Reflect attributes to properties for convenience.\n * Use default if no attribute set.\n */\n reflectToProperties() {\n const tmpType = this.getAttribute(\"type\") || _XZNotify.defaults.TYPE;\n this.type = tmpType.toLowerCase();\n this.position = (this.getAttribute(\"position\") || _XZNotify.positions.NE).toLowerCase();\n const expireTmp = this.getAttribute(\"expire\");\n if (expireTmp === null || Number.isNaN(Number(expireTmp))) {\n this.expire = _XZNotify.defaults.EXPIRE;\n } else {\n this.expire = Number(expireTmp);\n }\n this.closeable = this.hasAttribute(\"closeable\");\n this.heading = this.getAttribute(\"heading\");\n this.grouped = this.hasAttribute(\"grouped\");\n }\n /**\n * Renders element.\n */\n render() {\n this.root.append(this.styleElem);\n this.heading && this.root.appendChild(this.buildHeading());\n this.root.append(...this.childNodes);\n this.setAttribute(\"role\", \"alert\");\n }\n /**\n * Builds heading

element.\n */\n buildHeading() {\n const h = document.createElement(\"h3\");\n if (this.heading) {\n h.innerText = this.heading;\n }\n h.classList.add(\"heading\");\n return h;\n }\n /**\n * Added all interactivity here for potential SSR. But it can actually be\n * done in render() or connectedCallback().\n */\n hydrate() {\n const hasAnimation = Number.parseFloat(\n window.getComputedStyle(this).getPropertyValue(\"animation-duration\")\n ) > 0;\n this.setPosition();\n let start;\n const tick = (ts) => {\n if (start === void 0) {\n start = ts;\n }\n if (ts - start >= this.expire || this.forcedClose) {\n this.dataset.closing = \"true\";\n if (hasAnimation) {\n this.style.animationPlayState = \"running\";\n } else {\n this.close();\n }\n return;\n }\n requestAnimationFrame(tick);\n };\n requestAnimationFrame(tick);\n this.addEventListener(\"animationend\", this.close);\n if (this.closeable) {\n this.addEventListener(\"click\", this.closeHandler.bind(this));\n }\n }\n /**\n * Closes the notification.\n */\n close() {\n if (!this.dataset.closing) {\n this.style.animationPlayState = \"paused\";\n return;\n }\n this.dispatchEvent(_XZNotify.events.CLOSE);\n this.remove();\n }\n /**\n * Handler when closeable is true and clicked on the notification.\n */\n closeHandler() {\n this.forcedClose = true;\n }\n disconnectedCallback() {\n _XZNotify.collection[this.position] = _XZNotify.collection[this.position].filter((x) => x !== this);\n this.setPositionAll();\n }\n};\nlet XZNotify = _XZNotify;\n/**\n * XZNotify HTML tag name.\n */\nXZNotify.TAG_NAME = \"xz-notify\";\n/**\n * Observed attributes if required. Usually, a notification's life is very\n * short, and there is no point in observing attributes.\n */\nXZNotify.observedAttributes = [];\n/**\n * Notification's possible types.\n */\nXZNotify.types = {\n DEFAULT: \"default\",\n INFO: \"info\",\n WARNING: \"warning\",\n SUCCESS: \"success\",\n ERROR: \"error\"\n};\n/**\n * Events for the component.\n */\nXZNotify.events = {\n OPEN: new CustomEvent(\"xz-notify:open\", { bubbles: true }),\n CLOSE: new CustomEvent(\"xz-notify:close\", { bubbles: true })\n};\n/**\n * Positioning constants.\n */\nXZNotify.positions = {\n N: \"n\",\n NE: \"ne\",\n E: \"e\",\n SE: \"se\",\n S: \"s\",\n SW: \"sw\",\n W: \"w\",\n NW: \"nw\"\n};\n/**\n * Contains currently opened notifications.\n */\nXZNotify.collection = {\n [_XZNotify.positions.N]: [],\n [_XZNotify.positions.NE]: [],\n [_XZNotify.positions.E]: [],\n [_XZNotify.positions.SE]: [],\n [_XZNotify.positions.S]: [],\n [_XZNotify.positions.SW]: [],\n [_XZNotify.positions.W]: [],\n [_XZNotify.positions.NW]: []\n};\nXZNotify.defaults = {\n EXPIRE: 1e4,\n TYPE: _XZNotify.types.INFO,\n POSITION: _XZNotify.positions.NE,\n CLOSEABLE: false,\n GROUPED: false,\n HEADING: null\n};\n/**\n * Creates a new XZNotify element. Recommended to use when creating\n * notifications.\n */\nXZNotify.create = (content, props = {}, trusted = false) => {\n const elem = document.createElement(_XZNotify.TAG_NAME);\n Object.entries(props).forEach(\n ([k, v]) => {\n if (v === false || v === null) {\n return;\n }\n elem.setAttribute(k, String(v));\n }\n );\n elem[trusted ? \"innerHTML\" : \"textContent\"] = content;\n return elem;\n};\nwindow.customElements.define(XZNotify.TAG_NAME, XZNotify);\nexport default XZNotify;\n"], + "mappings": "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", + "names": ["_XZNotify", "root", "styleElem", "forcedClose", "grouped", "position", "expire", "type", "closeable", "heading", "x", "y", "dx", "dy", "c", "rect", "styles", "mt", "mr", "mb", "ml", "coll", "tmpType", "expireTmp", "h", "hasAnimation", "start", "tick", "ts", "XZNotify", "content", "props", "trusted", "elem", "k", "v"] } diff --git a/dist/xz-notify.mjs b/dist/xz-notify.mjs index ddad5f3..2fb1626 100644 --- a/dist/xz-notify.mjs +++ b/dist/xz-notify.mjs @@ -8,7 +8,7 @@ * * @author Dmitri Smirnov * @license MIT 2023 - * @version 3.0.2 + * @version 3.0.3 * @extends HTMLElement * * @property {number} [expire=10000] Time in milliseconds. How long the @@ -310,7 +310,7 @@ const _XZNotify = class extends HTMLElement { /** * Handler when closeable is true and clicked on the notification. */ - closeHandler(e) { + closeHandler() { this.forcedClose = true; } disconnectedCallback() {