uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
3 lines (2 loc) • 2.14 kB
JavaScript
/*! UIkit 3.2.1 | http://www.getuikit.com | (c) 2014 - 2019 YOOtheme | MIT License */
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i(require("uikit-util")):"function"==typeof define&&define.amd?define("uikitnotification",["uikit-util"],i):(t=t||self).UIkitNotification=i(t.UIkit.util)}(this,function(n){"use strict";var t,o={},i={functional:!0,args:["message","status"],data:{message:"",status:"",timeout:5e3,group:null,pos:"top-center",clsClose:"uk-notification-close",clsMsg:"uk-notification-message"},install:function(e){e.notification.closeAll=function(s,o){n.apply(document.body,function(t){var i=e.getComponent(t,"notification");!i||s&&s!==i.group||i.close(o)})}},computed:{marginProp:function(t){var i=t.pos;return"margin"+(n.startsWith(i,"top")?"Top":"Bottom")},startProps:function(){var t;return(t={opacity:0})[this.marginProp]=-this.$el.offsetHeight,t}},created:function(){o[this.pos]||(o[this.pos]=n.append(this.$container,'<div class="uk-notification uk-notification-'+this.pos+'"></div>'));var t=n.css(o[this.pos],"display","block");this.$mount(n.append(t,'<div class="'+this.clsMsg+(this.status?" "+this.clsMsg+"-"+this.status:"")+'"> <a href="#" class="'+this.clsClose+'" data-uk-close></a> <div>'+this.message+"</div> </div>"))},connected:function(){var t,i=this,s=n.toFloat(n.css(this.$el,this.marginProp));n.Transition.start(n.css(this.$el,this.startProps),((t={opacity:1})[this.marginProp]=s,t)).then(function(){i.timeout&&(i.timer=setTimeout(i.close,i.timeout))})},events:(t={click:function(t){n.closest(t.target,'a[href="#"],a[href=""]')&&t.preventDefault(),this.close()}},t[n.pointerEnter]=function(){this.timer&&clearTimeout(this.timer)},t[n.pointerLeave]=function(){this.timeout&&(this.timer=setTimeout(this.close,this.timeout))},t),methods:{close:function(t){function i(){n.trigger(s.$el,"close",[s]),n.remove(s.$el),o[s.pos].children.length||n.css(o[s.pos],"display","none")}var s=this;this.timer&&clearTimeout(this.timer),t?i():n.Transition.start(this.$el,this.startProps).then(i)}}};return"undefined"!=typeof window&&window.UIkit&&window.UIkit.component("notification",i),i});