https://fimatcon.com/uikit/js/components/notify.js

1/*! UIkit 2.26.2 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2(function(addon) {
3
4    var component;
5
6    if (window.UIkit) {
7        component = addon(UIkit);
8    }
9
10    if (typeof define == "function" && define.amd) {
11        define("uikit-notify", ["uikit"], function(){
12            return component || addon(UIkit);
13        });
14    }
15
16})(function(UI){
17
18    "use strict";
19
20    var containers = {},
21        messages   = {},
22
23        notify     =  function(options){
24
25            if (UI.$.type(options) == 'string') {
26                options = { message: options };
27            }
28
29            if (arguments[1]) {
30                options = UI.$.extend(options, UI.$.type(arguments[1]) == 'string' ? {status:arguments[1]} : arguments[1]);
31            }
32
33            return (new Message(options)).show();
34        },
35        closeAll  = function(group, instantly){
36
37            var id;
38
39            if (group) {
40                for(id in messages) { if(group===messages[id].group) messages[id].close(instantly); }
41            } else {
42                for(id in messages) { messages[id].close(instantly); }
43            }
44        };
45
46    var Message = function(options){
47
48        this.options = UI.$.extend({}, Message.defaults, options);
49
50        this.uuid    = UI.Utils.uid("notifymsg");
51        this.element = UI.$([
52
53            '<div class="uk-notify-message">',
54                '<a class="uk-close"></a>',
55                '<div></div>',
56            '</div>'
57
58        ].join('')).data("notifyMessage", this);
59
60        this.content(this.options.message);
61
62        // status
63        if (this.options.status) {
64            this.element.addClass('uk-notify-message-'+this.options.status);
65            this.currentstatus = this.options.status;
66        }
67
68        this.group = this.options.group;
69
70        messages[this.uuid] = this;
71
72        if(!containers[this.options.pos]) {
73            containers[this.options.pos] = UI.$('<div class="uk-notify uk-notify-'+this.options.pos+'"></div>').appendTo('body').on("click", ".uk-notify-message", function(){
74
75                var message = UI.$(this).data("notifyMessage");
76
77                message.element.trigger('manualclose.uk.notify', [message]);
78                message.close();
79            });
80        }
81    };
82
83
84    UI.$.extend(Message.prototype, {
85
86        uuid: false,
87        element: false,
88        timout: false,
89        currentstatus: "",
90        group: false,
91
92        show: function() {
93
94            if (this.element.is(":visible")) return;
95
96            var $this = this;
97
98            containers[this.options.pos].show().prepend(this.element);
99
100            var marginbottom = parseInt(this.element.css("margin-bottom"), 10);
101
102            this.element.css({"opacity":0, "margin-top": -1*this.element.outerHeight(), "margin-bottom":0}).animate({"opacity":1, "margin-top": 0, "margin-bottom":marginbottom}, function(){
103
104                if ($this.options.timeout) {
105
106                    var closefn = function(){ $this.close(); };
107
108                    $this.timeout = setTimeout(closefn, $this.options.timeout);
109
110                    $this.element.hover(
111                        function() { clearTimeout($this.timeout); },
112                        function() { $this.timeout = setTimeout(closefn, $this.options.timeout);  }
113                    );
114                }
115
116            });
117
118            return this;
119        },
120
121        close: function(instantly) {
122
123            var $this    = this,
124                finalize = function(){
125                    $this.element.remove();
126
127                    if (!containers[$this.options.pos].children().length) {
128                        containers[$this.options.pos].hide();
129                    }
130
131                    $this.options.onClose.apply($this, []);
132                    $this.element.trigger('close.uk.notify', [$this]);
133
134                    delete messages[$this.uuid];
135                };
136
137            if (this.timeout) clearTimeout(this.timeout);
138
139            if (instantly) {
140                finalize();
141            } else {
142                this.element.animate({"opacity":0, "margin-top": -1* this.element.outerHeight(), "margin-bottom":0}, function(){
143                    finalize();
144                });
145            }
146        },
147
148        content: function(html){
149
150            var container = this.element.find(">div");
151
152            if(!html) {
153                return container.html();
154            }
155
156            container.html(html);
157
158            return this;
159        },
160
161        status: function(status) {
162
163            if (!status) {
164                return this.currentstatus;
165            }
166
167            this.element.removeClass('uk-notify-message-'+this.currentstatus).addClass('uk-notify-message-'+status);
168
169            this.currentstatus = status;
170
171            return this;
172        }
173    });
174
175    Message.defaults = {
176        message: "",
177        status: "",
178        timeout: 5000,
179        group: null,
180        pos: 'top-center',
181        onClose: function() {}
182    };
183
184    UI.notify          = notify;
185    UI.notify.message  = Message;
186    UI.notify.closeAll = closeAll;
187
188    return notify;
189});