-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathsmart.toast.js
6 lines (4 loc) · 10.1 KB
/
smart.toast.js
1
2
3
4
5
6
/* Smart UI v15.2.0 (2023-04-20)
Copyright (c) 2011-2023 jQWidgets.
License: https://htmlelements.com/license/ */ //
Smart("smart-toast-item",class extends Smart.ContentElement{static get properties(){return{showCloseButton:{value:!1,type:"boolean"},iconClass:{value:null,type:"string?"},itemClass:{value:null,type:"string?"},opened:{value:!1,type:"boolean"}}}static get styleUrls(){return["smart.toast.css"]}template(){return'<div id="container" role="presentation">\n <div class="smart-toast-item-header">\n <span class="smart-toast-item-close-button" role="button" aria-label="Close"></span>\n </div>\n <div class="smart-toast-item-container" id="itemContainer">\n <span class="smart-toast-item-icon" role="presentation"></span>\n <span class="smart-toast-item-content" id="itemContent" inner-h-t-m-l="[[innerHTML]]">\n <content></content>\n </span>\n </div>\n </div>'}propertyChangedHandler(e,t,n){super.propertyChangedHandler(e,t,n)}render(){const e=this,t=e.iconClass;e.setAttribute("role","alert"),e.itemClass&&(e.className+=" "+e.itemClass),e.$.itemContainer.firstElementChild.className+=" "+(t||"default"),super.render()}appendChild(e){const t=this;if(e){if(!t.isCompleted||e instanceof HTMLElement&&e.classList.contains("smart-resize-trigger-container")){const e=Array.prototype.slice.call(arguments,2);return HTMLElement.prototype.appendChild.apply(t,e.concat(Array.prototype.slice.call(arguments)))}t.$.itemContent.appendChild(e)}else t.error(t.localize("invalidNode",{elementType:t.nodeName.toLowerCase(),method:"appendChild",node:"node"}))}refresh(){}insertBefore(e,t){const n=this;if(e){if(!n.isCompleted||e instanceof HTMLElement&&e.classList.contains("smart-resize-trigger-container")){const e=Array.prototype.slice.call(arguments,2);return HTMLElement.prototype.insertBefore.apply(n,e.concat(Array.prototype.slice.call(arguments)))}n.$.itemContent.insertBefore(e,t||null)}else n.error(n.localize("invalidNode",{elementType:n.nodeName.toLowerCase(),method:"insertBefore",node:"node"}))}removeChild(e){const t=this;if(e){if(!t.isCompleted||e instanceof HTMLElement&&e.classList.contains("smart-resize-trigger-container")){const e=Array.prototype.slice.call(arguments,2);return HTMLElement.prototype.appendChild.apply(t,e.concat(Array.prototype.slice.call(arguments)))}t.$.itemContent.removeChild(e)}else t.error(t.localize("invalidNode",{elementType:t.nodeName.toLowerCase(),method:"removeChild",node:"node"}))}}),Smart("smart-toast",class extends Smart.ContentElement{static get properties(){return{appendTo:{value:null,type:"any"},autoClose:{value:!1,type:"boolean"},autoCloseDelay:{value:3e3,type:"number"},autoOpen:{value:!1,type:"boolean"},iconClass:{value:null,type:"string?"},itemClass:{value:null,type:"string?"},itemTemplate:{value:null,type:"string?"},modal:{value:!1,type:"boolean"},position:{allowedValues:["top-left","top-right","bottom-left","bottom-right"],value:"top-right",type:"string"},showCloseButton:{value:!1,type:"boolean"},type:{allowedValues:["info","warning","success","error","mail","time",null],value:"info",type:"string?"},value:{value:"",type:"any"}}}get enableShadowDOM(){return!1}template(){return""}propertyChangedHandler(e,t,n){const s=this;switch(e){case"value":{const e=s._instances[s._instances.length-1];e&&(n instanceof HTMLElement?e.appendChild(n):s.itemTemplate?e.innerHTML=s._handleItemTemplate(n)||n:(e.shadowRoot?e.shadowRoot:e).querySelector(".smart-toast-item-content").innerHTML=n);break}case"itemTemplate":{const e=s._instances[s._instances.length-1];e&&s.itemTemplate&&(e.innerHTML=s._handleItemTemplate(s.value)||s.value);break}case"appendTo":case"modal":case"position":s._handleContainers();break;case"rightToLeft":case"showCloseButton":case"type":s._instances&&s._instances.forEach((t=>{if(t[e]=n,"type"===e&&n){const e=t.querySelector(".smart-toast-item-icon");["info","warning","success","error","mail","time"].forEach((e=>{t.classList.remove(e)})),t.classList.add(n),e&&e.setAttribute("aria-label",n+" icon")}}));break;default:super.propertyChangedHandler(e,t,n)}}attached(){super.attached();const e=this,t=["TopLeft","TopRight","BottomLeft","BottomRight","Custom","Modal"];for(let n=0;n<t.length;n++){const s=e.$["toastContainer"+t[n]];s&&s.children.length&&("Custom"===t[n]?e._appendTo.appendChild(e._container):e.getShadowRootOrBody().appendChild(s))}}detached(){super.detached();const e=this,t=["TopLeft","TopRight","BottomLeft","BottomRight","Custom","Modal"];for(let n=0;n<t.length;n++){const s=e.$["toastContainer"+t[n]];s&&(e._removeContainerListeners(s),s.remove()),e.closeAll()}}ready(){super.ready()}render(){const e=this;if(!e.value||e.value instanceof HTMLElement){const t=e.querySelectorAll(".smart-element");if(t.length>0){for(let e=0;e<t.length;e++){const n=t[e],s=document.createElement(n.nodeName+"-clone");s.innerHTML=n.innerHTML,s.className=n.className,n.parentElement.insertBefore(s,n),n.remove()}const n=document.createElement("div");for(;e.childNodes.length;)n.appendChild(e.firstChild);e.value=n.innerHTML.replace(/-clone/gi,"")}else e.value=e.innerHTML}else e.innerHTML=e.value;e._instances=[],e.autoOpen&&e.open(),super.render()}closeAll(){const e=this,t=e._instances;if(t&&t.length)for(var n=e._instances.length-1;n>-1;n--)e._close(e._instances[n])}closeItem(e){const t=this;e&&0!==t._instances.length&&("string"==typeof e?e=document.getElementById(e):e instanceof HTMLElement&&(e=e.closest("smart-toast-item")),e&&-1!==t._instances.indexOf(e)&&t._close(e))}closeLast(){const e=this;e._instances.length>0&&e._close(e._instances[e._instances.length-1])}get items(){const e=this._instances;return this.isReady&&e&&e.length?e.slice():[]}toggle(){const e=this;void 0===e.opened&&(e.opened=!1,e.autoOpen&&(e.opened=!0)),e.opened=!e.opened,e.opened?e.open():e.closeAll()}open(e,t){const n=this;if(n.disabled)return;void 0===e&&(e=n.value),t||(t=n.type),n._handleContainers();let s=document.createElement("smart-toast-item");s.iconClass=n.iconClass,s.itemClass=n.itemClass,e instanceof HTMLElement?s.appendChild(e):s.innerHTML=n._handleItemTemplate(e)||e,s.rightToLeft=n.rightToLeft,s.theme=n.theme,s.animation=n.animation,s.showCloseButton=n.showCloseButton;for(let e=0;e<n.classList.length;e++)n.classList[e].indexOf("smart-")<0&&s.classList.add(n.classList[e]);if(n._container.appendChild(s),t){const e=s.querySelector(".smart-toast-item-icon");s.classList.add(t),e&&e.setAttribute("aria-label",t+" icon")}return s._parent=n._container,n._instances.push(s),n.hasAttribute("smart-blazor")?n.$.fireEvent("open",{instance:s.id||""}):n.$.fireEvent("open",{instance:s}),setTimeout((function(){s.opened=!0}),10),n.autoClose&&(s._autoCloseTimeout=setTimeout((function(){n._close(s)}),n.autoCloseDelay)),s}_containerClickHandler(e){const t=this,n=e.target.shadowRoot?e.composedPath()[0]:e.target,s=n.closest(".smart-toast-item-close-button"),o=(n.getRootNode().host||n).closest("smart-toast-item");n.closest('[data-dismiss="toast"]')&&(t.opened=!1,t._close(o)),s||o?(t.hasAttribute("smart-blazor")?t.$.fireEvent("itemClick",{instance:o.id||"",target:n.id||""}):t.$.fireEvent("itemClick",{instance:o,target:n}),s&&t._close(o)):t.modal&&t.closeAll()}_close(e){const t=this;function n(){clearTimeout(e._autoCloseTimeout),t.hasAttribute("smart-blazor")?t.$.fireEvent("close",{instance:e.id||""}):t.$.fireEvent("close",{instance:e}),e.parentNode&&e.parentNode.removeChild(e);const n=e._parent;n&&!n.children.length&&n.parentElement&&(t._removeContainerListeners(n),n.parentElement.removeChild(n))}if(t._instances.indexOf(e)>-1){const s=window.getComputedStyle(e,null).getPropertyValue("transition-duration");let o=s.indexOf("ms")>-1?parseInt(s):1e3*parseFloat(s);isNaN(o)&&(o=0),e.opened=!1,t._instances.splice(t._instances.indexOf(e),1),o?setTimeout(n,o):n()}}_handleContainers(){const e=this;let t;if("string"==typeof e.appendTo?t=document.getElementById(e.appendTo):e.appendTo instanceof HTMLElement&&(t=e.appendTo),e._container=e._getToastContainer(t),t)return e._appendTo=t,void(e._container.parentElement||(e._addContainerListeners(e._container),e._appendTo.appendChild(e._container)));t||!e.$.toastContainerCustom||e.$.toastContainerCustom.children.length||(e._removeContainerListeners(e.$.toastContainerCustom),e.$.toastContainerCustom.parentElement&&e.$.toastContainerCustom.parentElement.removeChild(e.$.toastContainerCustom)),e._container.parentElement||(e._addContainerListeners(e._container),e.getShadowRootOrBody().appendChild(e._container))}_addContainerListeners(e){const t=this;if(!e)return;const n=t["$"+e.getAttribute("smart-id")];n&&(n.listen("click",t._containerClickHandler.bind(t)),n.listen("swipeleft",t._swipeHandler.bind(t)),n.listen("swiperight",t._swipeHandler.bind(t)),n.listen("swipetop",t._swipeHandler.bind(t)),n.listen("swipebottom",t._swipeHandler.bind(t)))}_removeContainerListeners(e){if(!e)return;const t=this["$"+e.getAttribute("smart-id")];t&&(t.unlisten("click"),t.unlisten("swipeleft"),t.unlisten("swiperight"),t.unlisten("swipetop"),t.unlisten("swipebottom"))}_getToastContainer(e){const t=this;let n;e?n="Custom":t.modal?n="Modal":(n=Smart.Utilities.Core.toCamelCase(t.position),n=n.charAt(0).toUpperCase()+n.slice(1));const s="toastContainer"+n;if(!t.$[s]){let e=document.createElement("div");e.setAttribute("smart-id",s),e.classList.add("smart-toast-container"),e.classList.add("smart-toast-container-"+Smart.Utilities.Core.toDash(n)),t.$["toastContainer"+n]=e,t["$toastContainer"+n]=Smart.Utilities.Extend(e)}return t.$[s]}_handleItemTemplate(e){const t=this;let n=t.itemTemplate;if("content"in document.createElement("template")){if(e||(e=t.value),!n)return e;if(n=document.getElementById(n),null!==n&&"content"in n)return n.innerHTML.replace(/{{\w+}}/g,e);t.error(t.localize("invalidTemplate",{elementType:t.nodeName.toLowerCase(),property:"template"}))}else t.error(t.localize("htmlTemplateNotSuported",{elementType:t.nodeName.toLowerCase()}))}_swipeHandler(e){const t=this,n=e.originalEvent.target.closest("smart-toast-item");e.stopPropagation(),n&&(t.hasAttribute("smart-blazor")?t.$.fireEvent(e.type,{instance:n.id||""}):t.$.fireEvent(e.type,{instance:n}))}});