Commit d8474a00e3140031fb697da868e955850cb26614
1 parent
d585b475
Modified jquery.pnotify.js plugin so that it could work with jQuery 1.3.2.
Changed rich:notify component namespace to http://richfaces.org/sandbox/notify.
Showing
3 changed files
with
529 additions
and
207 deletions
This diff could not be displayed because it is too large.
1 | 1 | /* |
2 | - * jQuery Pines Notify (pnotify) Plugin 1.0 | |
2 | + * jQuery Pines Notify (pnotify) Plugin 1.0.0 | |
3 | 3 | * |
4 | 4 | * Copyright (c) 2009 Hunter Perrin |
5 | 5 | * |
... | ... | @@ -8,10 +8,35 @@ |
8 | 8 | */ |
9 | 9 | |
10 | 10 | (function($) { |
11 | - var first_top, first_right, history_handle_top, timer; | |
11 | + var history_handle_top, timer; | |
12 | + var body; | |
13 | + var jwindow; | |
14 | + | |
15 | + function $14(element, options) { | |
16 | + var attrFn = { | |
17 | + val: true, | |
18 | + css: true, | |
19 | + html: true, | |
20 | + text: true, | |
21 | + data: true, | |
22 | + width: true, | |
23 | + height: true, | |
24 | + offset: true | |
25 | + }; | |
26 | + var o = jQuery(element); | |
27 | + for (var key in options) { | |
28 | + if (jQuery.isFunction(options[key])) { | |
29 | + o.bind(key, options[key]); | |
30 | + } else if(key in attrFn) { | |
31 | + o[key](options[key]); | |
32 | + } else { | |
33 | + o.attr(key, options[key]); | |
34 | + } | |
35 | + } | |
36 | + return o; | |
37 | + } | |
12 | 38 | $.extend({ |
13 | 39 | pnotify_remove_all: function () { |
14 | - var body = $("body"); | |
15 | 40 | var body_data = body.data("pnotify"); |
16 | 41 | /* POA: Added null-check */ |
17 | 42 | if (body_data && body_data.length) { |
... | ... | @@ -25,70 +50,167 @@ |
25 | 50 | if (timer) |
26 | 51 | clearTimeout(timer); |
27 | 52 | timer = null; |
28 | - var body = $("body"); | |
29 | - var nexttop = first_top; | |
30 | - var nextright = first_right; | |
31 | - var addwidth = 0; | |
32 | 53 | var body_data = body.data("pnotify"); |
33 | 54 | if (!body_data || !body_data.length) |
34 | 55 | return; |
35 | 56 | $.each(body_data, function(){ |
57 | + var s = this.opts.pnotify_stack; | |
58 | + if (!s) return; | |
59 | + if (!s.nextpos1) | |
60 | + s.nextpos1 = s.firstpos1; | |
61 | + if (!s.nextpos2) | |
62 | + s.nextpos2 = s.firstpos2; | |
63 | + if (!s.addpos2) | |
64 | + s.addpos2 = 0; | |
36 | 65 | if (this.css("display") != "none") { |
37 | - var postop, posright, animate = {}; | |
38 | - // Calculate the top value, disregarding the scroll, since position=fixed. | |
39 | - postop = this.offset().top - $(window).scrollTop(); | |
40 | - // Remember the topmost position, so the first visible notice goes there. | |
41 | - if (typeof first_top == "undefined") { | |
42 | - first_top = postop; | |
43 | - nexttop = first_top; | |
66 | + var curpos1, curpos2; | |
67 | + var animate = {}; | |
68 | + // Calculate the current pos1 value. | |
69 | + var csspos1; | |
70 | + switch (s.dir1) { | |
71 | + case "down": | |
72 | + csspos1 = "top"; | |
73 | + break; | |
74 | + case "up": | |
75 | + csspos1 = "bottom"; | |
76 | + break; | |
77 | + case "left": | |
78 | + csspos1 = "right"; | |
79 | + break; | |
80 | + case "right": | |
81 | + csspos1 = "left"; | |
82 | + break; | |
44 | 83 | } |
45 | - if (typeof window.innerHeight != "undefined") { | |
46 | - posright = parseInt(this.css("right")); | |
47 | - if (isNaN(posright)) | |
48 | - posright = 18; | |
49 | - // Remember the rightmost position, so the first visible notice goes there. | |
50 | - if (typeof first_right == "undefined") { | |
51 | - first_right = posright; | |
52 | - nextright = first_right; | |
53 | - } | |
54 | - // Check that we're not below the bottom of the page. | |
55 | - if (nexttop + this.height() > window.innerHeight) { | |
56 | - // If we are, we need to go back to the top, and over to the left. | |
57 | - nexttop = first_top; | |
58 | - nextright += addwidth + 10; | |
59 | - addwidth = 0; | |
60 | - } | |
61 | - // Animate if we're moving to the right. | |
62 | - if (nextright < posright) { | |
63 | - animate.right = nextright+"px"; | |
64 | - } else { | |
65 | - this.css("right", nextright+"px"); | |
66 | - } | |
67 | - // Keep track of the widest notice in the column, so we can push the next column. | |
68 | - if (this.outerWidth(true) > addwidth) | |
69 | - addwidth = this.width(); | |
84 | + curpos1 = parseInt(this.css(csspos1)); | |
85 | + if (isNaN(curpos1)) | |
86 | + curpos1 = 0; | |
87 | + // Remember the first pos1, so the first visible notice goes there. | |
88 | + if (typeof s.firstpos1 == "undefined") { | |
89 | + s.firstpos1 = curpos1; | |
90 | + s.nextpos1 = s.firstpos1; | |
91 | + } | |
92 | + // Calculate the current pos2 value. | |
93 | + var csspos2; | |
94 | + switch (s.dir2) { | |
95 | + case "down": | |
96 | + csspos2 = "top"; | |
97 | + break; | |
98 | + case "up": | |
99 | + csspos2 = "bottom"; | |
100 | + break; | |
101 | + case "left": | |
102 | + csspos2 = "right"; | |
103 | + break; | |
104 | + case "right": | |
105 | + csspos2 = "left"; | |
106 | + break; | |
70 | 107 | } |
71 | - if (nexttop) { | |
72 | - // Animate if we're moving up or to the right. | |
73 | - if (postop > nexttop || animate.right) { | |
74 | - animate.top = nexttop+"px"; | |
75 | - } else { | |
76 | - this.css("top", nexttop+"px"); | |
108 | + curpos2 = parseInt(this.css(csspos2)); | |
109 | + if (isNaN(curpos2)) | |
110 | + curpos2 = 0; | |
111 | + // Remember the first pos2, so the first visible notice goes there. | |
112 | + if (typeof s.firstpos2 == "undefined") { | |
113 | + s.firstpos2 = curpos2; | |
114 | + s.nextpos2 = s.firstpos2; | |
115 | + } | |
116 | + // Check that it's not beyond the viewport edge. | |
117 | + if ((s.dir1 == "down" && s.nextpos1 + this.height() > jwindow.height()) || | |
118 | + (s.dir1 == "up" && s.nextpos1 + this.height() > jwindow.height()) || | |
119 | + (s.dir1 == "left" && s.nextpos1 + this.width() > jwindow.width()) || | |
120 | + (s.dir1 == "right" && s.nextpos1 + this.width() > jwindow.width()) ) { | |
121 | + // If it is, it needs to go back to the first pos1, and over on pos2. | |
122 | + s.nextpos1 = s.firstpos1; | |
123 | + s.nextpos2 += s.addpos2 + 10; | |
124 | + s.addpos2 = 0; | |
125 | + } | |
126 | + // Animate if we're moving on dir2. | |
127 | + if (s.animation && s.nextpos2 < curpos2) { | |
128 | + switch (s.dir2) { | |
129 | + case "down": | |
130 | + animate.top = s.nextpos2+"px"; | |
131 | + break; | |
132 | + case "up": | |
133 | + animate.bottom = s.nextpos2+"px"; | |
134 | + break; | |
135 | + case "left": | |
136 | + animate.right = s.nextpos2+"px"; | |
137 | + break; | |
138 | + case "right": | |
139 | + animate.left = s.nextpos2+"px"; | |
140 | + break; | |
77 | 141 | } |
142 | + } else | |
143 | + this.css(csspos2, s.nextpos2+"px"); | |
144 | + // Keep track of the widest/tallest notice in the column/row, so we can push the next column/row. | |
145 | + switch (s.dir2) { | |
146 | + case "down": | |
147 | + case "up": | |
148 | + if (this.outerHeight(true) > s.addpos2) | |
149 | + s.addpos2 = this.height(); | |
150 | + break; | |
151 | + case "left": | |
152 | + case "right": | |
153 | + if (this.outerWidth(true) > s.addpos2) | |
154 | + s.addpos2 = this.width(); | |
155 | + break; | |
156 | + } | |
157 | + // Move the notice on dir1. | |
158 | + if (s.nextpos1) { | |
159 | + // Animate if we're moving toward the first pos. | |
160 | + if (s.animation && (curpos1 > s.nextpos1 || animate.top || animate.bottom || animate.right || animate.left)) { | |
161 | + switch (s.dir1) { | |
162 | + case "down": | |
163 | + animate.top = s.nextpos1+"px"; | |
164 | + break; | |
165 | + case "up": | |
166 | + animate.bottom = s.nextpos1+"px"; | |
167 | + break; | |
168 | + case "left": | |
169 | + animate.right = s.nextpos1+"px"; | |
170 | + break; | |
171 | + case "right": | |
172 | + animate.left = s.nextpos1+"px"; | |
173 | + break; | |
174 | + } | |
175 | + } else | |
176 | + this.css(csspos1, s.nextpos1+"px"); | |
78 | 177 | } |
79 | - if (animate.top || animate.right) | |
178 | + if (animate.top || animate.bottom || animate.right || animate.left) | |
80 | 179 | this.animate(animate, {duration: 500, queue: false}); |
81 | - nexttop += this.height() + 10; | |
180 | + // Calculate the next dir1 position. | |
181 | + switch (s.dir1) { | |
182 | + case "down": | |
183 | + case "up": | |
184 | + s.nextpos1 += this.height() + 10; | |
185 | + break; | |
186 | + case "left": | |
187 | + case "right": | |
188 | + s.nextpos1 += this.width() + 10; | |
189 | + break; | |
190 | + } | |
82 | 191 | } |
83 | 192 | }); |
193 | + // Reset the next position data. | |
194 | + $.each(body_data, function(){ | |
195 | + var s = this.opts.pnotify_stack; | |
196 | + if (!s) return; | |
197 | + s.nextpos1 = s.firstpos1; | |
198 | + s.nextpos2 = s.firstpos2; | |
199 | + s.addpos2 = 0; | |
200 | + s.animation = true; | |
201 | + }); | |
84 | 202 | }, |
85 | 203 | pnotify: function(options) { |
86 | - var body = $("body"); | |
87 | - var closer; | |
204 | + if (!body) | |
205 | + body = $("body"); | |
206 | + if (!jwindow) | |
207 | + jwindow = $(window); | |
208 | + | |
209 | + var animating; | |
88 | 210 | |
89 | 211 | // Build main options. |
90 | 212 | var opts; |
91 | - if (typeof options == "string") { | |
213 | + if (typeof options != "object") { | |
92 | 214 | opts = $.extend({}, $.pnotify.defaults); |
93 | 215 | opts.pnotify_text = options; |
94 | 216 | } else { |
... | ... | @@ -105,33 +227,143 @@ |
105 | 227 | if (opts.pnotify_before_init(opts) === false) |
106 | 228 | return null; |
107 | 229 | } |
108 | - | |
109 | - var pnotify = $("<div />").addClass("ui-widget ui-helper-clearfix ui-pnotify"); | |
230 | + | |
231 | + // This keeps track of the last element the mouse was over, so | |
232 | + // mouseleave, mouseenter, etc can be called. | |
233 | + var nonblock_last_elem; | |
234 | + // This is used to pass events through the notice if it is non-blocking. | |
235 | + var nonblock_pass = function(e, e_name){ | |
236 | + pnotify.css("display", "none"); | |
237 | + var element_below = document.elementFromPoint(e.clientX, e.clientY); | |
238 | + pnotify.css("display", "block"); | |
239 | + var jelement_below = $(element_below); | |
240 | + var cursor_style = jelement_below.css("cursor"); | |
241 | + pnotify.css("cursor", cursor_style != "auto" ? cursor_style : "default"); | |
242 | + // If the element changed, call mouseenter, mouseleave, etc. | |
243 | + if (!nonblock_last_elem || nonblock_last_elem.get(0) != element_below) { | |
244 | + if (nonblock_last_elem) { | |
245 | + dom_event.call(nonblock_last_elem.get(0), "mouseleave", e.originalEvent); | |
246 | + dom_event.call(nonblock_last_elem.get(0), "mouseout", e.originalEvent); | |
247 | + } | |
248 | + dom_event.call(element_below, "mouseenter", e.originalEvent); | |
249 | + dom_event.call(element_below, "mouseover", e.originalEvent); | |
250 | + } | |
251 | + dom_event.call(element_below, e_name, e.originalEvent); | |
252 | + // Remember the latest element the mouse was over. | |
253 | + nonblock_last_elem = jelement_below; | |
254 | + }; | |
255 | + | |
256 | + // Create our widget. | |
257 | + // Stop animation, reset the removal timer, and show the close | |
258 | + // button when the user mouses over. | |
259 | + var pnotify = $14("<div />", { | |
260 | + "class": "rf-ny "+opts.pnotify_addclass, | |
261 | + "css": {"display": "none"}, | |
262 | + "mouseenter": function(e){ | |
263 | + if (opts.pnotify_nonblock) e.stopPropagation(); | |
264 | + if (opts.pnotify_mouse_reset && animating == "out") { | |
265 | + // If it's animating out, animate back in really quick. | |
266 | + pnotify.stop(true); | |
267 | + pnotify.css("height", "auto").animate({"width": opts.pnotify_width, "opacity": opts.pnotify_nonblock ? opts.pnotify_nonblock_opacity : opts.pnotify_opacity}, "fast"); | |
268 | + } else if (opts.pnotify_nonblock && animating != "out") { | |
269 | + // If it's non-blocking, animate to the other opacity. | |
270 | + pnotify.animate({"opacity": opts.pnotify_nonblock_opacity}, "fast"); | |
271 | + } | |
272 | + if (opts.pnotify_hide && opts.pnotify_mouse_reset) pnotify.pnotify_cancel_remove(); | |
273 | + if (opts.pnotify_closer && !opts.pnotify_nonblock) pnotify.closer.show(); | |
274 | + }, | |
275 | + "mouseleave": function(e){ | |
276 | + if (opts.pnotify_nonblock) e.stopPropagation(); | |
277 | + nonblock_last_elem = null; | |
278 | + pnotify.css("cursor", "auto"); | |
279 | + if (opts.pnotify_nonblock && animating != "out") | |
280 | + pnotify.animate({"opacity": opts.pnotify_opacity}, "fast"); | |
281 | + if (opts.pnotify_hide && opts.pnotify_mouse_reset) pnotify.pnotify_queue_remove(); | |
282 | + pnotify.closer.hide(); | |
283 | + $.pnotify_position_all(); | |
284 | + }, | |
285 | + "mouseover": function(e){ | |
286 | + if (opts.pnotify_nonblock) e.stopPropagation(); | |
287 | + }, | |
288 | + "mouseout": function(e){ | |
289 | + if (opts.pnotify_nonblock) e.stopPropagation(); | |
290 | + }, | |
291 | + "mousemove": function(e){ | |
292 | + if (opts.pnotify_nonblock) { | |
293 | + e.stopPropagation(); | |
294 | + nonblock_pass(e, "onmousemove"); | |
295 | + } | |
296 | + }, | |
297 | + "mousedown": function(e){ | |
298 | + if (opts.pnotify_nonblock) { | |
299 | + e.stopPropagation(); | |
300 | + e.preventDefault(); | |
301 | + nonblock_pass(e, "onmousedown"); | |
302 | + } | |
303 | + }, | |
304 | + "mouseup": function(e){ | |
305 | + if (opts.pnotify_nonblock) { | |
306 | + e.stopPropagation(); | |
307 | + e.preventDefault(); | |
308 | + nonblock_pass(e, "onmouseup"); | |
309 | + } | |
310 | + }, | |
311 | + "click": function(e){ | |
312 | + if (opts.pnotify_nonblock) { | |
313 | + e.stopPropagation(); | |
314 | + nonblock_pass(e, "onclick"); | |
315 | + } | |
316 | + }, | |
317 | + "dblclick": function(e){ | |
318 | + if (opts.pnotify_nonblock) { | |
319 | + e.stopPropagation(); | |
320 | + nonblock_pass(e, "ondblclick"); | |
321 | + } | |
322 | + } | |
323 | + }); | |
110 | 324 | pnotify.opts = opts; |
111 | - pnotify.container = $("<div />").addClass("ui-corner-all ui-pnotify-container"); | |
112 | - pnotify.append(pnotify.container); | |
325 | + // Create a drop shadow. | |
326 | + if (opts.pnotify_shadow && !$.browser.msie) | |
327 | + pnotify.shadow_container = $14("<div />", {"class": "rf-ny-sh"}).prependTo(pnotify); | |
328 | + // Create a container for the notice contents. | |
329 | + pnotify.container = $14("<div />", {"class": "rf-ny-co"}) | |
330 | + .appendTo(pnotify); | |
113 | 331 | |
114 | 332 | pnotify.pnotify_version = "1.0.0"; |
115 | 333 | |
334 | + // This function is for updating the notice. | |
116 | 335 | pnotify.pnotify = function(options) { |
117 | 336 | // Update the notice. |
118 | 337 | var old_opts = opts; |
119 | - if (typeof options == "string") { | |
338 | + if (typeof options == "string") | |
120 | 339 | opts.pnotify_text = options; |
121 | - } else { | |
340 | + else | |
122 | 341 | opts = $.extend({}, opts, options); |
342 | + pnotify.opts = opts; | |
343 | + // Update the shadow. | |
344 | + if (opts.pnotify_shadow != old_opts.pnotify_shadow) { | |
345 | + if (opts.pnotify_shadow && !$.browser.msie) | |
346 | + pnotify.shadow_container = $14("<div />", {"class": "rf-ny-sh"}).prependTo(pnotify); | |
347 | + else | |
348 | + pnotify.children(".rf-ny-sh").remove(); | |
123 | 349 | } |
124 | - if (typeof opts.pnotify_title == "string") { | |
125 | - pnotify.title_container.html(opts.pnotify_title).show(200); | |
126 | - } else if (opts.pnotify_title === false) { | |
350 | + // Update the additional classes. | |
351 | + if (opts.pnotify_addclass === false) | |
352 | + pnotify.removeClass(old_opts.pnotify_addclass); | |
353 | + else if (opts.pnotify_addclass !== old_opts.pnotify_addclass) | |
354 | + pnotify.removeClass(old_opts.pnotify_addclass).addClass(opts.pnotify_addclass); | |
355 | + // Update the title. | |
356 | + if (opts.pnotify_title === false) | |
127 | 357 | pnotify.title_container.hide("fast"); |
128 | - } | |
129 | - if (typeof opts.pnotify_text == "string") { | |
358 | + else if (opts.pnotify_title !== old_opts.pnotify_title) | |
359 | + pnotify.title_container.html(opts.pnotify_title).show(200); | |
360 | + // Update the text. | |
361 | + if (opts.pnotify_text === false) { | |
362 | + pnotify.text_container.hide("fast"); | |
363 | + } else if (opts.pnotify_text !== old_opts.pnotify_text) { | |
130 | 364 | if (opts.pnotify_insert_brs) |
131 | - opts.pnotify_text = opts.pnotify_text.replace("\n", "<br />"); | |
365 | + opts.pnotify_text = opts.pnotify_text.replace(/\n/g, "<br />"); | |
132 | 366 | pnotify.text_container.html(opts.pnotify_text).show(200); |
133 | - } else if (opts.pnotify_text === false) { | |
134 | - pnotify.text_container.hide("fast"); | |
135 | 367 | } |
136 | 368 | pnotify.pnotify_history = opts.pnotify_history; |
137 | 369 | // Change the notice type. |
... | ... | @@ -142,95 +374,77 @@ |
142 | 374 | (opts.pnotify_type != old_opts.pnotify_type)) { |
143 | 375 | // Remove any old icon. |
144 | 376 | pnotify.container.find("div.rf-ny-ic").remove(); |
145 | - if ((opts.pnotify_notice_icon && opts.pnotify_type == "notice") || (opts.pnotify_error_icon && opts.pnotify_type == "error")) { | |
377 | +// if ((opts.pnotify_error_icon && opts.pnotify_type == "error") || (opts.pnotify_notice_icon)) { | |
146 | 378 | // Build the new icon. |
147 | - var icon = $("<div />").addClass("rf-ny-ic"); | |
148 | - icon.append($("<span />").addClass(opts.pnotify_type == "notice" ? opts.pnotify_notice_icon : opts.pnotify_error_icon)); | |
149 | - pnotify.container.prepend(icon); | |
150 | - } | |
379 | + $14("<div />", {"class": "rf-ny-ic"}) | |
380 | + .append($14("<span />", {"class": opts.pnotify_type == "error" ? opts.pnotify_error_icon : opts.pnotify_notice_icon})) | |
381 | + .prependTo(pnotify.container); | |
382 | +// } | |
151 | 383 | } |
152 | 384 | // Update the width. |
153 | - if (opts.pnotify_width != old_opts.pnotify_width && typeof opts.pnotify_width == "string") | |
385 | + if (opts.pnotify_width !== old_opts.pnotify_width) | |
154 | 386 | pnotify.animate({width: opts.pnotify_width}); |
155 | 387 | // Update the minimum height. |
156 | - if (opts.pnotify_min_height != old_opts.pnotify_min_height && typeof opts.pnotify_min_height == "string") | |
388 | + if (opts.pnotify_min_height !== old_opts.pnotify_min_height) | |
157 | 389 | pnotify.container.animate({minHeight: opts.pnotify_min_height}); |
158 | 390 | // Update the opacity. |
159 | - if (opts.pnotify_opacity != old_opts.pnotify_opacity) | |
391 | + if (opts.pnotify_opacity !== old_opts.pnotify_opacity) | |
160 | 392 | pnotify.fadeTo(opts.pnotify_animate_speed, opts.pnotify_opacity); |
161 | - if (!opts.pnotify_hide) { | |
393 | + if (!opts.pnotify_hide) | |
162 | 394 | pnotify.pnotify_cancel_remove(); |
163 | - } else if (!old_opts.pnotify_hide) { | |
395 | + else if (!old_opts.pnotify_hide) | |
164 | 396 | pnotify.pnotify_queue_remove(); |
165 | - } | |
166 | - pnotify.opts = opts; | |
167 | 397 | pnotify.pnotify_queue_position(); |
168 | 398 | return pnotify; |
169 | 399 | }; |
170 | 400 | |
171 | - pnotify.pnotify_init = function() { | |
172 | - body.append(pnotify); | |
173 | - | |
174 | - // Add events to stop fading when the user mouses over. | |
175 | - if (opts.pnotify_hide) { | |
176 | - pnotify.mouseenter(function(){ | |
177 | - pnotify.stop(); | |
178 | - pnotify.fadeTo("fast", opts.pnotify_opacity); | |
179 | - pnotify.pnotify_cancel_remove(); | |
180 | - }).mouseleave(function(){ | |
181 | - pnotify.pnotify_queue_remove(); | |
182 | - $.pnotify_position_all(); | |
183 | - }); | |
184 | - } | |
185 | - | |
186 | - if (opts.pnotify_closer) { | |
187 | - if (closer) closer.remove(); | |
188 | - closer = $("<div />").addClass("rf-ny-cl").css("cursor", "pointer"); | |
189 | - closer.append($("<span />").addClass("rf-ny-cl-ic")); | |
190 | - closer.click(function(){ | |
191 | - pnotify.pnotify_remove(); | |
192 | - }); | |
193 | - closer.hide(); | |
194 | - pnotify.container.prepend(closer); | |
195 | - pnotify.hover(function(){ | |
196 | - closer.show(); | |
197 | - }, function(){ | |
198 | - closer.hide(); | |
199 | - }); | |
200 | - } | |
201 | - }; | |
202 | - | |
401 | + // Queue the position function so it doesn't run repeatedly and use | |
402 | + // up resources. | |
203 | 403 | pnotify.pnotify_queue_position = function() { |
204 | 404 | if (timer) |
205 | 405 | clearTimeout(timer); |
206 | 406 | timer = setTimeout($.pnotify_position_all, 10); |
207 | 407 | }; |
208 | 408 | |
409 | + // Display the notice. | |
209 | 410 | pnotify.pnotify_display = function() { |
210 | - if (pnotify.parent().get()) | |
211 | - pnotify.pnotify_init(); | |
411 | + // If the notice is not in the DOM, append it. | |
412 | + if (!pnotify.parent().length) | |
413 | + pnotify.appendTo(body); | |
414 | + // Run callback. | |
212 | 415 | if (opts.pnotify_before_open) { |
213 | 416 | if (opts.pnotify_before_open(pnotify) === false) |
214 | 417 | return; |
215 | 418 | } |
216 | 419 | pnotify.pnotify_queue_position(); |
217 | 420 | // First show it, then set its opacity, then hide it. |
218 | - pnotify.show().fadeTo(0, opts.pnotify_opacity).hide(); | |
421 | + if (opts.pnotify_animation == "fade" || opts.pnotify_animation.effect_in == "fade") { | |
422 | + // If it's fading in, it should start at 0. | |
423 | + pnotify.show().fadeTo(0, 0).hide(); | |
424 | + } else { | |
425 | + // Or else it should be set to the opacity. | |
426 | + if (opts.pnotify_opacity != 1) | |
427 | + pnotify.show().fadeTo(0, opts.pnotify_opacity).hide(); | |
428 | + } | |
219 | 429 | pnotify.animate_in(function(){ |
220 | 430 | if (opts.pnotify_after_open) |
221 | 431 | opts.pnotify_after_open(pnotify); |
222 | - | |
432 | + | |
433 | + pnotify.pnotify_queue_position(); | |
434 | + | |
223 | 435 | // Now set it to hide. |
224 | 436 | if (opts.pnotify_hide) |
225 | 437 | pnotify.pnotify_queue_remove(); |
226 | 438 | }); |
227 | 439 | }; |
228 | 440 | |
441 | + // Remove the notice. | |
229 | 442 | pnotify.pnotify_remove = function() { |
230 | 443 | if (pnotify.timer) { |
231 | 444 | window.clearTimeout(pnotify.timer); |
232 | 445 | pnotify.timer = null; |
233 | 446 | } |
447 | + // Run callback. | |
234 | 448 | if (opts.pnotify_before_close) { |
235 | 449 | if (opts.pnotify_before_close(pnotify) === false) |
236 | 450 | return; |
... | ... | @@ -241,171 +455,273 @@ |
241 | 455 | return; |
242 | 456 | } |
243 | 457 | pnotify.pnotify_queue_position(); |
458 | + // If we're supposed to remove the notice from the DOM, do it. | |
244 | 459 | if (opts.pnotify_remove) |
245 | 460 | pnotify.remove(); |
246 | 461 | }); |
247 | 462 | }; |
248 | 463 | |
464 | + // Animate the notice in. | |
249 | 465 | pnotify.animate_in = function(callback){ |
466 | + // Declare that the notice is animating in. (Or has completed animating in.) | |
467 | + animating = "in"; | |
250 | 468 | var animation; |
251 | - if (typeof opts.pnotify_animation.effect_in != "undefined") { | |
469 | + if (typeof opts.pnotify_animation.effect_in != "undefined") | |
252 | 470 | animation = opts.pnotify_animation.effect_in; |
253 | - } else { | |
471 | + else | |
254 | 472 | animation = opts.pnotify_animation; |
255 | - } | |
256 | 473 | if (animation == "none") { |
257 | 474 | pnotify.show(); |
258 | 475 | callback(); |
259 | - } else if (animation == "show") { | |
476 | + } else if (animation == "show") | |
260 | 477 | pnotify.show(opts.pnotify_animate_speed, callback); |
261 | - } else if (animation == "fade") { | |
262 | - pnotify.show().fadeTo(0, 0).fadeTo(opts.pnotify_animate_speed, opts.pnotify_opacity, callback); | |
263 | - } else if (animation == "slide") { | |
478 | + else if (animation == "fade") | |
479 | + pnotify.show().fadeTo(opts.pnotify_animate_speed, opts.pnotify_opacity, callback); | |
480 | + else if (animation == "slide") | |
264 | 481 | pnotify.slideDown(opts.pnotify_animate_speed, callback); |
265 | - } else if (typeof animation == "function") { | |
482 | + else if (typeof animation == "function") | |
266 | 483 | animation("in", callback, pnotify); |
267 | - } else { | |
268 | - if (pnotify.effect) | |
269 | - pnotify.effect(animation, {}, opts.pnotify_animate_speed, callback); | |
270 | - } | |
484 | + else if (pnotify.effect) | |
485 | + pnotify.effect(animation, {}, opts.pnotify_animate_speed, callback); | |
271 | 486 | }; |
272 | 487 | |
488 | + // Animate the notice out. | |
273 | 489 | pnotify.animate_out = function(callback){ |
490 | + // Declare that the notice is animating out. (Or has completed animating out.) | |
491 | + animating = "out"; | |
274 | 492 | var animation; |
275 | - if (typeof opts.pnotify_animation.effect_out != "undefined") { | |
493 | + if (typeof opts.pnotify_animation.effect_out != "undefined") | |
276 | 494 | animation = opts.pnotify_animation.effect_out; |
277 | - } else { | |
495 | + else | |
278 | 496 | animation = opts.pnotify_animation; |
279 | - } | |
280 | 497 | if (animation == "none") { |
281 | 498 | pnotify.hide(); |
282 | 499 | callback(); |
283 | - } else if (animation == "show") { | |
500 | + } else if (animation == "show") | |
284 | 501 | pnotify.hide(opts.pnotify_animate_speed, callback); |
285 | - } else if (animation == "fade") { | |
502 | + else if (animation == "fade") | |
286 | 503 | pnotify.fadeOut(opts.pnotify_animate_speed, callback); |
287 | - } else if (animation == "slide") { | |
504 | + else if (animation == "slide") | |
288 | 505 | pnotify.slideUp(opts.pnotify_animate_speed, callback); |
289 | - } else if (typeof animation == "function") { | |
506 | + else if (typeof animation == "function") | |
290 | 507 | animation("out", callback, pnotify); |
291 | - } else { | |
292 | - if (pnotify.effect) | |
293 | - pnotify.effect(animation, {}, opts.pnotify_animate_speed, callback); | |
294 | - } | |
508 | + else if (pnotify.effect) | |
509 | + pnotify.effect(animation, {}, opts.pnotify_animate_speed, callback); | |
295 | 510 | }; |
296 | 511 | |
512 | + // Cancel any pending removal timer. | |
297 | 513 | pnotify.pnotify_cancel_remove = function() { |
298 | 514 | if (pnotify.timer) |
299 | 515 | window.clearTimeout(pnotify.timer); |
300 | 516 | }; |
301 | 517 | |
518 | + // Queue a removal timer. | |
302 | 519 | pnotify.pnotify_queue_remove = function() { |
520 | + // Cancel any current removal timer. | |
303 | 521 | pnotify.pnotify_cancel_remove(); |
304 | 522 | pnotify.timer = window.setTimeout(function(){ |
305 | 523 | pnotify.pnotify_remove(); |
306 | 524 | }, (isNaN(opts.pnotify_delay) ? 0 : opts.pnotify_delay)); |
307 | 525 | }; |
308 | 526 | |
309 | -// if (opts.pnotify_type == "error") { | |
310 | -// pnotify.container.addClass("ui-state-error"); | |
311 | -// } else if (opts.pnotify_type == "notice") { | |
312 | -// pnotify.container.addClass("ui-state-highlight"); | |
313 | -// } | |
527 | + // Provide a button to close the notice. | |
528 | + pnotify.closer = $14("<div />", { | |
529 | + "class": "rf-ny-cl", | |
530 | + "css": {"cursor": "pointer", "display": "none"}, | |
531 | + "click": function(){ | |
532 | + pnotify.pnotify_remove(); | |
533 | + pnotify.closer.hide(); | |
534 | + } | |
535 | + }) | |
536 | + .append($14("<span />", {"class": "rf-ny-cl-ic"})) | |
537 | + .appendTo(pnotify.container); | |
314 | 538 | |
315 | -// if ((opts.pnotify_notice_icon && opts.pnotify_type == "notice") || (opts.pnotify_error_icon && opts.pnotify_type == "error")) { | |
316 | - var icon = $("<div />").addClass("rf-ny-ic"); | |
317 | - icon.append($("<span />").addClass(opts.pnotify_type == "notice" ? opts.pnotify_notice_icon : opts.pnotify_error_icon)); | |
318 | - pnotify.container.append(icon); | |
539 | + // Add the appropriate icon. | |
540 | +// if ((opts.pnotify_error_icon && opts.pnotify_type == "error") || (opts.pnotify_notice_icon)) { | |
541 | + $14("<div />", {"class": "rf-ny-ic"}) | |
542 | + .append($14("<span />", {"class": opts.pnotify_type == "error" ? opts.pnotify_error_icon : opts.pnotify_notice_icon})) | |
543 | + .appendTo(pnotify.container); | |
319 | 544 | // } |
320 | 545 | |
321 | - pnotify.title_container = $("<span />").addClass("rf-ny-ti"); | |
322 | - pnotify.title_container.html(opts.pnotify_title); | |
323 | - pnotify.container.append(pnotify.title_container); | |
324 | - if (typeof opts.pnotify_title != "string") | |
546 | + // Add a title. | |
547 | + pnotify.title_container = $14("<div />", { | |
548 | + "class": "rf-ny-tl", | |
549 | + "html": opts.pnotify_title | |
550 | + }) | |
551 | + .appendTo(pnotify.container); | |
552 | + if (opts.pnotify_title === false) | |
325 | 553 | pnotify.title_container.hide(); |
326 | 554 | |
327 | - pnotify.text_container = $("<span />").addClass("rf-ny-te"); | |
555 | + // Replace new lines with HTML line breaks. | |
328 | 556 | if (opts.pnotify_insert_brs && typeof opts.pnotify_text == "string") |
329 | - opts.pnotify_text = opts.pnotify_text.replace("\n", "<br />"); | |
330 | - pnotify.text_container.html(opts.pnotify_text); | |
331 | - pnotify.container.append(pnotify.text_container); | |
332 | - if (typeof opts.pnotify_text != "string") | |
557 | + opts.pnotify_text = opts.pnotify_text.replace(/\n/g, "<br />"); | |
558 | + // Add text. | |
559 | + pnotify.text_container = $14("<div />", { | |
560 | + "class": "rf-ny-te", | |
561 | + "html": opts.pnotify_text | |
562 | + }) | |
563 | + .appendTo(pnotify.container); | |
564 | + if (opts.pnotify_text === false) | |
333 | 565 | pnotify.text_container.hide(); |
334 | 566 | |
567 | + // Set width and min height. | |
335 | 568 | if (typeof opts.pnotify_width == "string") |
336 | 569 | pnotify.css("width", opts.pnotify_width); |
337 | - | |
338 | 570 | if (typeof opts.pnotify_min_height == "string") |
339 | 571 | pnotify.container.css("min-height", opts.pnotify_min_height); |
340 | 572 | |
573 | + // The history variable controls whether the notice gets redisplayed | |
574 | + // by the history pull down. | |
341 | 575 | pnotify.pnotify_history = opts.pnotify_history; |
342 | 576 | |
343 | - pnotify.hide(); | |
344 | - | |
577 | + // Add the notice to the notice array. | |
345 | 578 | var body_data = body.data("pnotify"); |
346 | - if (typeof body_data != "object") | |
347 | - body_data = Array(); | |
348 | - body_data = $.merge(body_data, [pnotify]); | |
579 | + if (body_data == null || typeof body_data != "object") | |
580 | + body_data = []; | |
581 | + if (opts.pnotify_stack.push == "top") | |
582 | + body_data = $.merge([pnotify], body_data); | |
583 | + else | |
584 | + body_data = $.merge(body_data, [pnotify]); | |
349 | 585 | body.data("pnotify", body_data); |
350 | 586 | |
587 | + // Run callback. | |
351 | 588 | if (opts.pnotify_after_init) |
352 | 589 | opts.pnotify_after_init(pnotify); |
353 | 590 | |
354 | - pnotify.pnotify_display(); | |
355 | - | |
356 | 591 | if (opts.pnotify_history) { |
592 | + // If there isn't a history pull down, create one. | |
357 | 593 | var body_history = body.data("pnotify_history"); |
358 | 594 | if (typeof body_history == "undefined") { |
359 | - body_history = $("<div />").addClass("rf-ny-hc"); | |
360 | - body.append(body_history); | |
361 | - | |
362 | - body_history.append($("<div>Redisplay</div>").addClass("rf-ny-hh")); | |
363 | - body_history.append($("<button>All</button>").addClass("rf-ny-hh").hover(function(){ | |
364 | - $(this).addClass("ui-state-hover"); | |
365 | - }, function(){ | |
366 | - $(this).removeClass("ui-state-hover"); | |
367 | - }).click(function(){ | |
368 | - $.each(body_data, function(){ | |
369 | - if (this.pnotify_history && this.pnotify_display) | |
370 | - this.pnotify_display(); | |
371 | - }); | |
372 | - })); | |
373 | - body_history.append($("<button>Last</button>").addClass("rf-ny-hl").hover(function(){ | |
374 | - $(this).addClass("ui-state-hover"); | |
375 | - }, function(){ | |
376 | - $(this).removeClass("ui-state-hover"); | |
377 | - }).click(function(){ | |
378 | - var i = 1; | |
379 | - while (!body_data[body_data.length - i] || !body_data[body_data.length - i].pnotify_history) { | |
380 | - if (body_data.length - i === 0) | |
381 | - return; | |
382 | - i++; | |
595 | + body_history = $14("<div />", { | |
596 | + "class": "rf-ny-hc", | |
597 | + "mouseleave": function(){ | |
598 | + body_history.animate({top: "-"+history_handle_top+"px"}, {duration: 100, queue: false}); | |
383 | 599 | } |
384 | - if (body_data[body_data.length - i].pnotify_display) | |
385 | - body_data[body_data.length - i].pnotify_display(); | |
386 | - })); | |
387 | - | |
388 | - var handle = $("<span></span>").addClass("rf-ny-hp").mouseenter(function(){ | |
389 | - body_history.animate({top: "0"}, {duration: 100, queue: false}); | |
390 | - }); | |
391 | - body_history.append(handle); | |
392 | - history_handle_top = handle.offset().top + 2; | |
600 | + }) | |
601 | + .append($14("<div />", {"class": "rf-ny-hh", "text": "Redisplay"})) | |
602 | + .append($14("<button />", { | |
603 | + "class": "rf-ny-ha", | |
604 | + "text": "All", | |
605 | +// "mouseenter": function(){ | |
606 | +// $(this).addClass("ui-state-hover"); | |
607 | +// }, | |
608 | +// "mouseleave": function(){ | |
609 | +// $(this).removeClass("ui-state-hover"); | |
610 | +// }, | |
611 | + "click": function(){ | |
612 | + // Display all notices. (Disregarding non-history notices.) | |
613 | + $.each(body.data("pnotify"), function(){ | |
614 | + if (this.pnotify_history && this.pnotify_display) | |
615 | + this.pnotify_display(); | |
616 | + }); | |
617 | + return false; | |
618 | + } | |
619 | + })) | |
620 | + .append($14("<button />", { | |
621 | + "class": "rf-ny-hl", | |
622 | + "text": "Last", | |
623 | +// "mouseenter": function(){ | |
624 | +// $(this).addClass("ui-state-hover"); | |
625 | +// }, | |
626 | +// "mouseleave": function(){ | |
627 | +// $(this).removeClass("ui-state-hover"); | |
628 | +// }, | |
629 | + "click": function(){ | |
630 | + // Look up the last history notice, and display it. | |
631 | + var i = 1; | |
632 | + var body_data = body.data("pnotify"); | |
633 | + while (!body_data[body_data.length - i] || !body_data[body_data.length - i].pnotify_history || body_data[body_data.length - i].is(":visible")) { | |
634 | + if (body_data.length - i === 0) | |
635 | + return false; | |
636 | + i++; | |
637 | + } | |
638 | + var n = body_data[body_data.length - i]; | |
639 | + if (n.pnotify_display) | |
640 | + n.pnotify_display(); | |
641 | + return false; | |
642 | + } | |
643 | + })) | |
644 | + .appendTo(body); | |
393 | 645 | |
394 | - body_history.mouseleave(function(){ | |
395 | - body_history.animate({top: "-"+history_handle_top+"px"}, {duration: 100, queue: false}); | |
396 | - }); | |
397 | - body_history.css({top: "-"+history_handle_top+"px"}); | |
646 | + // Make a handle so the user can pull down the history pull down. | |
647 | + var handle = $14("<span />", { | |
648 | + "class": "rf-ny-hp", | |
649 | + "mouseenter": function(){ | |
650 | + body_history.animate({top: "0"}, {duration: 100, queue: false}); | |
651 | + } | |
652 | + }) | |
653 | + .appendTo(body_history); | |
398 | 654 | |
655 | + // Get the top of the handle. | |
656 | + history_handle_top = handle.offset().top + 2; | |
657 | + // Hide the history pull down up to the top of the handle. | |
658 | + body_history.css({top: "-"+history_handle_top+"px"}); | |
659 | + // Save the history pull down. | |
399 | 660 | body.data("pnotify_history", body_history); |
400 | 661 | } |
401 | 662 | } |
402 | 663 | |
664 | + // Mark the stack so it won't animate the new notice. | |
665 | + opts.pnotify_stack.animation = false; | |
666 | + | |
667 | + // Display the notice. | |
668 | + pnotify.pnotify_display(); | |
669 | + | |
403 | 670 | return pnotify; |
404 | 671 | } |
405 | 672 | }); |
406 | 673 | |
674 | + // Some useful regexes. | |
675 | + var re_on = /^on/; | |
676 | + var re_mouse_events = /^(dbl)?click$|^mouse(move|down|up|over|out|enter|leave)$|^contextmenu$/; | |
677 | + var re_ui_events = /^(focus|blur|select|change|reset)$|^key(press|down|up)$/; | |
678 | + var re_html_events = /^(scroll|resize|(un)?load|abort|error)$/; | |
679 | + // Fire a DOM event. | |
680 | + var dom_event = function(e, orig_e){ | |
681 | + var event_object; | |
682 | + e = e.toLowerCase(); | |
683 | + if (document.createEvent && this.dispatchEvent) { | |
684 | + // FireFox, Opera, Safari, Chrome | |
685 | + e = e.replace(re_on, ''); | |
686 | + if (e.match(re_mouse_events)) { | |
687 | + // This allows the click event to fire on the notice. There is | |
688 | + // probably a much better way to do it. | |
689 | + $(this).offset(); | |
690 | + event_object = document.createEvent("MouseEvents"); | |
691 | + event_object.initMouseEvent( | |
692 | + e, orig_e.bubbles, orig_e.cancelable, orig_e.view, orig_e.detail, | |
693 | + orig_e.screenX, orig_e.screenY, orig_e.clientX, orig_e.clientY, | |
694 | + orig_e.ctrlKey, orig_e.altKey, orig_e.shiftKey, orig_e.metaKey, orig_e.button, orig_e.relatedTarget | |
695 | + ); | |
696 | + } else if (e.match(re_ui_events)) { | |
697 | + event_object = document.createEvent("UIEvents"); | |
698 | + event_object.initUIEvent(e, orig_e.bubbles, orig_e.cancelable, orig_e.view, orig_e.detail); | |
699 | + } else if (e.match(re_html_events)) { | |
700 | + event_object = document.createEvent("HTMLEvents"); | |
701 | + event_object.initEvent(e, orig_e.bubbles, orig_e.cancelable); | |
702 | + } | |
703 | + if (!event_object) return; | |
704 | + this.dispatchEvent(event_object); | |
705 | + } else { | |
706 | + // Internet Explorer | |
707 | + if (!e.match(re_on)) e = "on"+e; | |
708 | + event_object = document.createEventObject(orig_e); | |
709 | + this.fireEvent(e, event_object); | |
710 | + } | |
711 | + }; | |
712 | + | |
407 | 713 | $.pnotify.defaults = { |
408 | - // Display a pull down menu to redisplay previous notices, and place this notice in the history. | |
714 | + // The notice's title. | |
715 | + pnotify_title: false, | |
716 | + // The notice's text. | |
717 | + pnotify_text: false, | |
718 | + // Additional classes to be added to the notice. (For custom styling.) | |
719 | + pnotify_addclass: "", | |
720 | + // Create a non-blocking notice. It lets the user click elements underneath it. | |
721 | + pnotify_nonblock: false, | |
722 | + // The opacity of the notice (if it's non-blocking) when the mouse is over it. | |
723 | + pnotify_nonblock_opacity: .2, | |
724 | + // Display a pull down menu to redisplay previous notices, and place the notice in the history. | |
409 | 725 | pnotify_history: true, |
410 | 726 | // Width of the notice. |
411 | 727 | pnotify_width: "300px", |
... | ... | @@ -419,19 +735,25 @@ |
419 | 735 | pnotify_error_icon: "", |
420 | 736 | // The animation to use when displaying and hiding the notice. "none", "show", "fade", and "slide" are built in to jQuery. Others require jQuery UI. Use an object with effect_in and effect_out to use different effects. |
421 | 737 | pnotify_animation: "fade", |
422 | - // Speed at which the notice fades or animates in and out. "slow", "def" or "normal", "fast" or number of milliseconds. | |
738 | + // Speed at which the notice animates in and out. "slow", "def" or "normal", "fast" or number of milliseconds. | |
423 | 739 | pnotify_animate_speed: "slow", |
424 | - // Opacity to fade to. | |
740 | + // Opacity of the notice. | |
425 | 741 | pnotify_opacity: 1, |
426 | - // Provide a button for the user to manually close a notice. | |
742 | + // Display a drop shadow. | |
743 | + pnotify_shadow: false, | |
744 | + // Provide a button for the user to manually close the notice. | |
427 | 745 | pnotify_closer: true, |
428 | - // After a delay, make the notice disappear. | |
746 | + // After a delay, remove the notice. | |
429 | 747 | pnotify_hide: true, |
430 | - // Delay in milliseconds before the notice disappears. | |
748 | + // Delay in milliseconds before the notice is removed. | |
431 | 749 | pnotify_delay: 8000, |
432 | - // Remove the notice from the DOM after it disappears. | |
750 | + // Reset the hide timer if the mouse moves over the notice. | |
751 | + pnotify_mouse_reset: true, | |
752 | + // Remove the notice's elements from the DOM after it is removed. | |
433 | 753 | pnotify_remove: true, |
434 | 754 | // Change new lines to br tags. |
435 | - pnotify_insert_brs: true | |
755 | + pnotify_insert_brs: true, | |
756 | + // The stack on which the notices will be placed. Also controls the direction the notices stack. | |
757 | + pnotify_stack: {"dir1": "down", "dir2": "left", "push": "bottom"} | |
436 | 758 | }; |
437 | 759 | })(jQuery); |
\ No newline at end of file | ... | ... |
Please
register
or
login
to post a comment