NotificationUI.js

define(function(require,exports,module){const WorkspaceManager=require("view/WorkspaceManager"),Mustache=require("thirdparty/mustache/mustache"),ToastPopupHtml=require("text!widgets/html/toast-popup.html"),Dialogs=require("widgets/Dialogs"),MainViewManager=require("view/MainViewManager"),NOTIFICATION_TYPE_ARROW="arrow",NOTIFICATION_TYPE_TOAST="toast",NOTIFICATION_STYLES_CSS_CLASS={INFO:"style-info",WARNING:"style-warning",SUCCESS:"style-success",ERROR:"style-error",DANGER:"style-danger"},CLOSE_REASON={TIMEOUT:"closeTimeout",CLICK_DISMISS:"clickDismiss",CLOSE_BTN_CLICK:"closeBtnClick"};function Notification($notification,type){this.$notification=$notification,this.type=type,this._result=new $.Deferred,this._promise=this._result.promise()}function _closeToastNotification($NotificationPopup,endCB){function cleanup(){$NotificationPopup.removeClass("animateClose"),$NotificationPopup.remove(),endCB&&endCB()}$NotificationPopup.removeClass("animateOpen"),$NotificationPopup.removeClass("instantOpen"),$NotificationPopup.addClass("animateClose").one("transitionend",cleanup).one("transitioncancel",cleanup)}function _closeArrowNotification($NotificationPopup,endCB){function cleanup(){$NotificationPopup.remove(),WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_UPDATE_LAYOUT,$NotificationPopup[0].update),endCB&&endCB()}$NotificationPopup.removeClass("notification-ui-visible").addClass("notification-ui-hidden").one("transitionend",cleanup).one("transitioncancel",cleanup)}function createFromTemplate(title,template,elementID,options={}){options.allowedPlacements=options.allowedPlacements||["top","bottom","left","right"],options.dismissOnClick=void 0===options.dismissOnClick||options.dismissOnClick,elementID||(elementID="notificationUIDefaultAnchor");const $tooltip=_createDomElementWithArrowElement(title,template,elementID,options);$tooltip.addClass("notification-ui-visible");let notification=new Notification($tooltip,NOTIFICATION_TYPE_ARROW);return options.autoCloseTimeS&&setTimeout(()=>{notification.close(CLOSE_REASON.TIMEOUT)},1e3*options.autoCloseTimeS),options.dismissOnClick&&$tooltip.click(()=>{notification.close(CLOSE_REASON.CLICK_DISMISS)}),$tooltip.find(".notification-popup-close-button").click(()=>{notification.close(CLOSE_REASON.CLICK_DISMISS)}),notification}Notification.prototype.close=function(closeType){let self=this,$notification=this.$notification;if(!$notification)return this;function doneCB(){self._result.resolve(closeType)}return this.$notification=null,this.type===NOTIFICATION_TYPE_TOAST?_closeToastNotification($notification,doneCB):_closeArrowNotification($notification,doneCB),this},Notification.prototype.done=function(callback){this._promise.done(callback)};let notificationWidgetCount=0;function _computePlacementWithArrowElement(tooltip,arrowElement,{x:x,y:y,placement:placement,middlewareData:middlewareData}){if(Object.assign(tooltip.style,{left:`${x}px`,top:`${y}px`}),arrowElement){const{x:arrowX,y:arrowY}=middlewareData.arrow,staticSide={top:"bottom",right:"left",bottom:"top",left:"right"}[placement.split("-")[0]];Object.assign(arrowElement.style,{left:null!=arrowX?`${arrowX}px`:"",top:null!=arrowY?`${arrowY}px`:"",right:"",bottom:"",[staticSide]:"-4px"})}}function _updatePositions(tooltip,onElement,arrowElement,options){let middleWare=[FloatingUIDOM.offset(6),FloatingUIDOM.autoPlacement({allowedPlacements:options.allowedPlacements}),FloatingUIDOM.shift({padding:5})];arrowElement&&middleWare.push(FloatingUIDOM.arrow({element:arrowElement})),tooltip.update=function(){FloatingUIDOM.computePosition(onElement,tooltip,{placement:"top",middleware:middleWare}).then(({x:x,y:y,placement:placement,middlewareData:middlewareData})=>{_computePlacementWithArrowElement(tooltip,arrowElement,{x:x,y:y,placement:placement,middlewareData:middlewareData})})},tooltip.update(),WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_UPDATE_LAYOUT,tooltip.update)}function _createDomElementWithArrowElement(title,domTemplate,elementID,options){notificationWidgetCount++;const onElement=document.getElementById(elementID);let arrowElement,widgetID=`notification-ui-widget-${notificationWidgetCount}`,arrowID=`notification-ui-arrow-${notificationWidgetCount}`,textTemplate=null;("string"==typeof domTemplate||domTemplate instanceof String)&&(textTemplate=domTemplate);const styleClass=NOTIFICATION_STYLES_CSS_CLASS[options.toastStyle]||options.toastStyle;let $floatingDom=$(`<div id="${widgetID}" class="notification-ui-tooltip ${styleClass}" role="tooltip">\n        <div>\n            <p class='notification-popup-close-button arrow'>×</p>\n        </div>\n        <div >\n            <p class="notification-dialog-title">${title}</p>\n        </div>\n        <div>\n            <p class="notification-dialog-content">${textTemplate||""}</p>\n        </div></div>`);return!textTemplate&&domTemplate&&$floatingDom.find(".notification-dialog-content").append($(domTemplate)),onElement&&(arrowElement=$(`<div id="${arrowID}" class="notification-ui-arrow ${NOTIFICATION_STYLES_CSS_CLASS[options.toastStyle]||""}"></div>`),$floatingDom.append(arrowElement)),$("body").append($floatingDom),_updatePositions($floatingDom[0],onElement,arrowElement[0],options),$floatingDom}function createToastFromTemplate(title,template,options={}){options.dismissOnClick=void 0===options.dismissOnClick||options.dismissOnClick,notificationWidgetCount++;const styleClass=NOTIFICATION_STYLES_CSS_CLASS[options.toastStyle]||options.toastStyle||NOTIFICATION_STYLES_CSS_CLASS.INFO,widgetID=`notification-toast-${notificationWidgetCount}`,$NotificationPopup=$(Mustache.render(ToastPopupHtml,{id:widgetID,title:title,containerStyle:styleClass}));$NotificationPopup.find(".notification-dialog-content").append($(template)),Dialogs.addLinkTooltips($NotificationPopup);let notification=new Notification($NotificationPopup,NOTIFICATION_TYPE_TOAST);return $NotificationPopup.appendTo("#toast-notification-container").hide().find(".notification-popup-close-button").click(function(){notification.close(CLOSE_REASON.CLOSE_BTN_CLICK),MainViewManager.focusActivePane()}),$NotificationPopup.show(),setTimeout(function(){$NotificationPopup.addClass(options.instantOpen?"instantOpen":"animateOpen")},0),options.autoCloseTimeS&&setTimeout(()=>{notification.close(CLOSE_REASON.TIMEOUT)},1e3*options.autoCloseTimeS),options.dismissOnClick&&$NotificationPopup.click(()=>{notification.close(CLOSE_REASON.CLICK_DISMISS)}),notification}function showToastOn(containerOrSelector,template,options={}){const autoCloseTimeS=void 0!==options.autoCloseTimeS?options.autoCloseTimeS:5,dismissOnClick=void 0===options.dismissOnClick||options.dismissOnClick,$container=$(containerOrSelector),$toast=$('<div class="inline-toast"></div>');"string"==typeof template?$toast.html(template):$toast.append($(template)),$container.append($toast);const notification=new Notification($toast,"inlineToast");function closeToast(reason){let cleaned=!1;function cleanup(){cleaned||(cleaned=!0,$toast.remove(),notification._result.resolve(reason))}$toast.removeClass("visible"),$toast.one("transitionend transitioncancel",cleanup),setTimeout(cleanup,500)}return requestAnimationFrame(function(){$toast.addClass("visible")}),notification.close=function(closeType){return this.$notification?(this.$notification=null,closeToast(closeType||CLOSE_REASON.CLICK_DISMISS),this):this},autoCloseTimeS&&setTimeout(function(){notification.$notification&&notification.close(CLOSE_REASON.TIMEOUT)},1e3*autoCloseTimeS),dismissOnClick&&$toast.on("click",function(){notification.close(CLOSE_REASON.CLICK_DISMISS)}),notification}let _activeHUD=null;function showHUD(iconClass,label,options={}){const autoCloseTimeS=void 0!==options.autoCloseTimeS?options.autoCloseTimeS:1;_activeHUD&&_activeHUD.$notification&&(_activeHUD.$notification.remove(),_activeHUD._result.resolve(CLOSE_REASON.TIMEOUT),_activeHUD.$notification=null);const $hud=$('<div class="hud-overlay"><i class="'+iconClass+'"></i><div class="hud-label">'+label+"</div></div>");$("body").append($hud);const notification=new Notification($hud,"hud");return _activeHUD=notification,notification.close=function(closeType){return this.$notification?(this.$notification=null,_activeHUD=null,$hud.remove(),this._result.resolve(closeType||CLOSE_REASON.CLICK_DISMISS),this):this},autoCloseTimeS&&setTimeout(function(){notification.$notification&&notification.close(CLOSE_REASON.TIMEOUT)},1e3*autoCloseTimeS),notification}exports.createFromTemplate=createFromTemplate,exports.createToastFromTemplate=createToastFromTemplate,exports.showToastOn=showToastOn,exports.showHUD=showHUD,exports.CLOSE_REASON=CLOSE_REASON,exports.NOTIFICATION_STYLES_CSS_CLASS=NOTIFICATION_STYLES_CSS_CLASS});