|
1 /* |
|
2 * MyAMS extensions for notification messages |
|
3 * Version 0.1.2 |
|
4 * ©2014 Thierry Florac <tflorac@ulthar.net> |
|
5 */ |
|
6 |
|
7 |
|
8 (function ($) { |
|
9 |
|
10 $(document).ready(function () { |
|
11 $("body").append("<div id='divSmallBoxes'></div>") |
|
12 .append("<div id='divMiniIcons'></div>") |
|
13 .append("<div id='divBigBoxes'></div>"); |
|
14 }); |
|
15 |
|
16 |
|
17 function SmartUnLoading() { |
|
18 $(".divMessageBox").fadeOut(300, function () { |
|
19 $(this).remove(); |
|
20 }); |
|
21 $(".LoadingBoxContainer").fadeOut(300, function () { |
|
22 $(this).remove(); |
|
23 }) |
|
24 } |
|
25 |
|
26 var ExistMsg = 0, |
|
27 SmartMSGboxCount = 0, |
|
28 PrevTop = 0, |
|
29 BigBoxes = 0, |
|
30 SmallBoxes = 0, |
|
31 SmallCount = 0, |
|
32 SmallBoxesAnchos = 0; |
|
33 |
|
34 |
|
35 MyAMS.notify = { |
|
36 |
|
37 messageBox: function (options, callback) { |
|
38 |
|
39 var SmartMSG, |
|
40 Content, |
|
41 isIE8 = MyAMS.browser.isIE8orlower(); |
|
42 var defaults = { |
|
43 title: "", |
|
44 content: "", |
|
45 NormalButton: undefined, |
|
46 ActiveButton: undefined, |
|
47 buttons: undefined, |
|
48 input: undefined, |
|
49 placeholder: "", |
|
50 options: undefined, |
|
51 sound: undefined |
|
52 } |
|
53 var settings = $.extend({}, defaults, options); |
|
54 |
|
55 if (settings.sound && (isIE8 == 0)) { |
|
56 var audioElement = document.createElement("audio"); |
|
57 if (navigator.userAgent.match("Firefox/")) { |
|
58 audioElement.setAttribute("src", MyAMS.baseURL + '../sound/message.ogg'); |
|
59 } else { |
|
60 audioElement.setAttribute("src", MyAMS.baseURL + '../sound/message.mp3'); |
|
61 } |
|
62 $.get(); |
|
63 audioElement.addEventListener("load", function () { |
|
64 audioElement.play() |
|
65 }, true); |
|
66 audioElement.pause(); |
|
67 audioElement.play(); |
|
68 } |
|
69 SmartMSGboxCount = SmartMSGboxCount + 1; |
|
70 if (ExistMsg == 0) { |
|
71 ExistMsg = 1; |
|
72 SmartMSG = "<div class='MessageBox animated fadeIn fast' id='MsgBoxBack'></div>"; |
|
73 $("body").append(SmartMSG); |
|
74 if (MyAMS.browser.isIE8orlower() == 1) { |
|
75 $("#MsgBoxBack").addClass("MessageIE"); |
|
76 } |
|
77 } |
|
78 var InputType = ""; |
|
79 var HasInput = 0; |
|
80 var Name = ""; |
|
81 var NumButtons = 0; |
|
82 if (settings.input != undefined) { |
|
83 HasInput = 1; |
|
84 settings.input = settings.input.toLowerCase(); |
|
85 switch (settings.input) { |
|
86 case "text": |
|
87 InputType = "<input class='form-control' type='" + settings.input + "' id='txt" + SmartMSGboxCount + "' placeholder='" + settings.placeholder + "'/><br/><br/>"; |
|
88 break; |
|
89 case "password": |
|
90 InputType = "<input class='form-control' type='" + settings.input + "' id='txt" + SmartMSGboxCount + "' placeholder='" + settings.placeholder + "'/><br/><br/>"; |
|
91 break; |
|
92 case "select": |
|
93 if (settings.options == undefined) { |
|
94 alert("For this type of input, the options parameter is required."); |
|
95 } else { |
|
96 InputType = "<select class='form-control' id='txt" + SmartMSGboxCount + "'>"; |
|
97 for (var i = 0; i <= settings.options.length - 1; i++) { |
|
98 if (settings.options[i] == "[") { |
|
99 Name = ""; |
|
100 } else { |
|
101 if (settings.options[i] == "]") { |
|
102 NumButtons = NumButtons + 1; |
|
103 Name = "<option>" + Name + "</option>"; |
|
104 InputType += Name; |
|
105 } else { |
|
106 Name += settings.options[i]; |
|
107 } |
|
108 } |
|
109 } |
|
110 InputType += "</select>"; |
|
111 } |
|
112 break; |
|
113 default: |
|
114 alert("That type of input is not handled yet"); |
|
115 } |
|
116 } |
|
117 Content = "<div class='MessageBoxContainer animated fadeIn fast' id='Msg" + SmartMSGboxCount + "'>"; |
|
118 Content += "<div class='MessageBoxMiddle'>"; |
|
119 Content += "<span class='MsgTitle'>" + settings.title + "</span class='MsgTitle'>"; |
|
120 Content += "<p class='pText'>" + settings.content + "</p>"; |
|
121 Content += InputType; |
|
122 Content += "<div class='MessageBoxButtonSection'>"; |
|
123 if (settings.buttons == undefined) { |
|
124 settings.buttons = "[Accept]"; |
|
125 } |
|
126 settings.buttons = $.trim(settings.buttons); |
|
127 settings.buttons = settings.buttons.split(""); |
|
128 if (settings.NormalButton == undefined) { |
|
129 settings.NormalButton = "#232323"; |
|
130 } |
|
131 if (settings.ActiveButton == undefined) { |
|
132 settings.ActiveButton = "#ed145b"; |
|
133 } |
|
134 for (var i = 0; i <= settings.buttons.length - 1; i++) { |
|
135 if (settings.buttons[i] == "[") { |
|
136 Name = ""; |
|
137 } else { |
|
138 if (settings.buttons[i] == "]") { |
|
139 NumButtons = NumButtons + 1; |
|
140 Name = "<button id='bot" + NumButtons + "-Msg" + SmartMSGboxCount + "' class='btn btn-default btn-sm botTempo'> " + Name + "</button>"; |
|
141 Content += Name; |
|
142 } else { |
|
143 Name += settings.buttons[i]; |
|
144 } |
|
145 } |
|
146 } |
|
147 Content += "</div>"; |
|
148 Content += "</div>"; |
|
149 Content += "</div>"; |
|
150 if (SmartMSGboxCount > 1) { |
|
151 $(".MessageBoxContainer").hide(); |
|
152 $(".MessageBoxContainer").css("z-index", 99999); |
|
153 } |
|
154 $(".MessageBox").append(Content); |
|
155 if (HasInput == 1) { |
|
156 $("#txt" + SmartMSGboxCount).focus(); |
|
157 } |
|
158 $(".botTempo").hover(function () { |
|
159 var ThisID = $(this).attr("id"); |
|
160 }, function () { |
|
161 var ThisID = $(this).attr("id"); |
|
162 }); |
|
163 $(".botTempo").click(function () { |
|
164 var ThisID = $(this).attr("id"); |
|
165 var MsgBoxID = ThisID.substr(ThisID.indexOf("-") + 1); |
|
166 var Press = $.trim($(this).text()); |
|
167 if (HasInput == 1) { |
|
168 if (typeof callback == "function") { |
|
169 var IDNumber = MsgBoxID.replace("Msg", ""); |
|
170 var Value = $("#txt" + IDNumber).val(); |
|
171 if (callback) { |
|
172 callback(Press, Value); |
|
173 } |
|
174 } |
|
175 } else { |
|
176 if (typeof callback == "function") { |
|
177 if (callback) { |
|
178 callback(Press); |
|
179 } |
|
180 } |
|
181 } |
|
182 $("#" + MsgBoxID).addClass("animated fadeOut fast"); |
|
183 SmartMSGboxCount = SmartMSGboxCount - 1; |
|
184 if (SmartMSGboxCount == 0) { |
|
185 $("#MsgBoxBack").removeClass("fadeIn").addClass("fadeOut").delay(300).queue(function () { |
|
186 ExistMsg = 0; |
|
187 $(this).remove(); |
|
188 }) |
|
189 } |
|
190 }) |
|
191 }, |
|
192 |
|
193 bigBox: function (settings, callback) { |
|
194 var boxBig, content; |
|
195 settings = $.extend({ |
|
196 title: "", |
|
197 content: "", |
|
198 icon: undefined, |
|
199 number: undefined, |
|
200 color: undefined, |
|
201 sound: true, |
|
202 timeout: undefined, |
|
203 colortime: 1500, |
|
204 colors: undefined |
|
205 }, settings); |
|
206 if (settings.sound === true) { |
|
207 if (MyAMS.browser.isIE8orlower() == 0) { |
|
208 var audioElement = document.createElement("audio"); |
|
209 if (navigator.userAgent.match("Firefox/")) { |
|
210 audioElement.setAttribute("src", MyAMS.baseURL + '../snd/bigbox.ogg'); |
|
211 } else { |
|
212 audioElement.setAttribute("src", MyAMS.baseURL + '../snd/bigbox.mp3'); |
|
213 } |
|
214 $.get(); |
|
215 audioElement.addEventListener("load", function () { |
|
216 audioElement.play(); |
|
217 }, true); |
|
218 audioElement.pause(); |
|
219 audioElement.play(); |
|
220 } |
|
221 } |
|
222 BigBoxes = BigBoxes + 1; |
|
223 boxBig = "<div id='bigBox" + BigBoxes + "' class='BigBox animated fadeIn fast'><div id='bigBoxColor" + BigBoxes + "'><i class='btnClose fa fa-times' id='btnClose" + BigBoxes + "'></i>"; |
|
224 if (settings.icon == undefined) { |
|
225 settings.icon = "fa fa-cloud"; |
|
226 } |
|
227 boxBig += "<span><i class='" + settings.icon + "'></i> " + settings.title + "</span>"; |
|
228 boxBig += "<p>" + settings.content + "</p>"; |
|
229 boxBig += "<div class='bigboxnumber'>"; |
|
230 if (settings.number != undefined) { |
|
231 boxBig += settings.number; |
|
232 } |
|
233 boxBig += "</div></div>"; |
|
234 boxBig += "</div>"; |
|
235 $("#divBigBoxes").append(boxBig); |
|
236 if (settings.color == undefined) { |
|
237 settings.color = "#004d60"; |
|
238 } |
|
239 $("#bigBox" + BigBoxes).css("background-color", settings.color); |
|
240 $("#divMiniIcons").append("<div id='miniIcon" + BigBoxes + "' class='cajita animated fadeIn' style='background-color: " + settings.color + ";'><i class='" + settings.icon + "'/></i></div>"); |
|
241 $("#miniIcon" + BigBoxes).bind("click", function () { |
|
242 var FrontBox = $(this).attr("id"); |
|
243 var FrontBigBox = FrontBox.replace("miniIcon", "bigBox"); |
|
244 var FronBigBoxColor = FrontBox.replace("miniIcon", "bigBoxColor"); |
|
245 $(".cajita").each(function (index) { |
|
246 var BackBox = $(this).attr("id"); |
|
247 var BigBoxID = BackBox.replace("miniIcon", "bigBox"); |
|
248 $("#" + BigBoxID).css("z-index", 9998); |
|
249 }); |
|
250 $("#" + FrontBigBox).css("z-index", 9999); |
|
251 $("#" + FronBigBoxColor).removeClass("animated fadeIn").delay(1).queue(function () { |
|
252 $(this).show(); |
|
253 $(this).addClass("animated fadeIn"); |
|
254 $(this).clearQueue(); |
|
255 }) |
|
256 }); |
|
257 var ThisBigBoxCloseCross = $("#btnClose" + BigBoxes); |
|
258 var ThisBigBox = $("#bigBox" + BigBoxes); |
|
259 var ThisMiniIcon = $("#miniIcon" + BigBoxes); |
|
260 var ColorTimeInterval; |
|
261 if (settings.colors != undefined && settings.colors.length > 0) { |
|
262 ThisBigBoxCloseCross.attr("colorcount", "0"); |
|
263 ColorTimeInterval = setInterval(function () { |
|
264 var ColorIndex = ThisBigBoxCloseCross.attr("colorcount"); |
|
265 ThisBigBoxCloseCross.animate({ |
|
266 backgroundColor: settings.colors[ColorIndex].color |
|
267 }); |
|
268 ThisBigBox.animate({ |
|
269 backgroundColor: settings.colors[ColorIndex].color |
|
270 }); |
|
271 ThisMiniIcon.animate({ |
|
272 backgroundColor: settings.colors[ColorIndex].color |
|
273 }); |
|
274 if (ColorIndex < settings.colors.length - 1) { |
|
275 ThisBigBoxCloseCross.attr("colorcount", ((ColorIndex * 1) + 1)); |
|
276 } else { |
|
277 ThisBigBoxCloseCross.attr("colorcount", 0); |
|
278 } |
|
279 }, settings.colortime); |
|
280 } |
|
281 ThisBigBoxCloseCross.bind("click", function () { |
|
282 clearInterval(ColorTimeInterval); |
|
283 if (typeof callback == "function") { |
|
284 if (callback) { |
|
285 callback(); |
|
286 } |
|
287 } |
|
288 var FrontBox = $(this).attr("id"); |
|
289 var FrontBigBox = FrontBox.replace("btnClose", "bigBox"); |
|
290 var miniIcon = FrontBox.replace("btnClose", "miniIcon"); |
|
291 $("#" + FrontBigBox).removeClass("fadeIn fast"); |
|
292 $("#" + FrontBigBox).addClass("fadeOut fast").delay(300).queue(function () { |
|
293 $(this).clearQueue(); |
|
294 $(this).remove(); |
|
295 }); |
|
296 $("#" + miniIcon).removeClass("fadeIn fast"); |
|
297 $("#" + miniIcon).addClass("fadeOut fast").delay(300).queue(function () { |
|
298 $(this).clearQueue(); |
|
299 $(this).remove(); |
|
300 }) |
|
301 }); |
|
302 if (settings.timeout != undefined) { |
|
303 var TimedID = BigBoxes; |
|
304 setTimeout(function () { |
|
305 clearInterval(ColorTimeInterval); |
|
306 var box = $("#bigBox" + TimedID); |
|
307 box.removeClass("fadeIn fast"); |
|
308 box.addClass("fadeOut fast").delay(300).queue(function () { |
|
309 $(this).clearQueue(); |
|
310 $(this).remove(); |
|
311 }); |
|
312 var icon = $("#miniIcon" + TimedID); |
|
313 icon.removeClass("fadeIn fast"); |
|
314 icon.addClass("fadeOut fast").delay(300).queue(function () { |
|
315 $(this).clearQueue(); |
|
316 $(this).remove(); |
|
317 }) |
|
318 }, settings.timeout); |
|
319 } |
|
320 }, |
|
321 |
|
322 smallBox: function (settings, callback) { |
|
323 var BoxSmall, content; |
|
324 settings = $.extend({ |
|
325 title: "", |
|
326 content: "", |
|
327 icon: undefined, |
|
328 iconSmall: undefined, |
|
329 sound: true, |
|
330 color: undefined, |
|
331 timeout: undefined, |
|
332 colortime: 1500, |
|
333 colors: undefined |
|
334 }, settings); |
|
335 if (settings.sound === true) { |
|
336 if (MyAMS.browser.isIE8orlower() == 0) { |
|
337 var audioElement = document.createElement("audio"); |
|
338 if (navigator.userAgent.match("Firefox/")) { |
|
339 audioElement.setAttribute("src", MyAMS.baseURL + '../snd/smallbox.ogg'); |
|
340 } else { |
|
341 audioElement.setAttribute("src", MyAMS.baseURL + '../snd/smallbox.mp3'); |
|
342 } |
|
343 $.get(); |
|
344 audioElement.addEventListener("load", function () { |
|
345 audioElement.play(); |
|
346 }, true); |
|
347 audioElement.pause(); |
|
348 audioElement.play(); |
|
349 } |
|
350 } |
|
351 SmallBoxes = SmallBoxes + 1; |
|
352 BoxSmall = ""; |
|
353 var IconSection = "", |
|
354 CurrentIDSmallbox = "smallbox" + SmallBoxes; |
|
355 if (settings.iconSmall == undefined) { |
|
356 IconSection = "<div class='miniIcon'></div>"; |
|
357 } else { |
|
358 IconSection = "<div class='miniIcon'><i class='miniPic " + settings.iconSmall + "'></i></div>"; |
|
359 } if (settings.icon == undefined) { |
|
360 BoxSmall = "<div id='smallbox" + SmallBoxes + "' class='SmallBox animated fadeInRight fast'><div class='textoFull'><span>" + settings.title + "</span><p>" + settings.content + "</p></div>" + IconSection + "</div>"; |
|
361 } else { |
|
362 BoxSmall = "<div id='smallbox" + SmallBoxes + "' class='SmallBox animated fadeInRight fast'><div class='foto'><i class='" + settings.icon + "'></i></div><div class='textoFoto'><span>" + settings.title + "</span><p>" + settings.content + "</p></div>" + IconSection + "</div>"; |
|
363 } if (SmallBoxes == 1) { |
|
364 $("#divSmallBoxes").append(BoxSmall); |
|
365 SmallBoxesAnchos = $("#smallbox" + SmallBoxes).height() + 40; |
|
366 } else { |
|
367 var SmartExist = $(".SmallBox").size(); |
|
368 if (SmartExist == 0) { |
|
369 $("#divSmallBoxes").append(BoxSmall); |
|
370 SmallBoxesAnchos = $("#smallbox" + SmallBoxes).height() + 40; |
|
371 } else { |
|
372 $("#divSmallBoxes").append(BoxSmall); |
|
373 $("#smallbox" + SmallBoxes).css("top", SmallBoxesAnchos); |
|
374 SmallBoxesAnchos = SmallBoxesAnchos + $("#smallbox" + SmallBoxes).height() + 20; |
|
375 $(".SmallBox").each(function (index) { |
|
376 if (index == 0) { |
|
377 $(this).css("top", 20); |
|
378 heightPrev = $(this).height() + 40; |
|
379 SmallBoxesAnchos = $(this).height() + 40; |
|
380 } else { |
|
381 $(this).css("top", heightPrev); |
|
382 heightPrev = heightPrev + $(this).height() + 20; |
|
383 SmallBoxesAnchos = SmallBoxesAnchos + $(this).height() + 20; |
|
384 } |
|
385 }) |
|
386 } |
|
387 } |
|
388 var ThisSmallBox = $("#smallbox" + SmallBoxes); |
|
389 if (settings.color == undefined) { |
|
390 ThisSmallBox.css("background-color", "#004d60") |
|
391 } else { |
|
392 ThisSmallBox.css("background-color", settings.color) |
|
393 } |
|
394 var ColorTimeInterval; |
|
395 if (settings.colors != undefined && settings.colors.length > 0) { |
|
396 ThisSmallBox.attr("colorcount", "0"); |
|
397 ColorTimeInterval = setInterval(function () { |
|
398 var ColorIndex = ThisSmallBox.attr("colorcount"); |
|
399 ThisSmallBox.animate({ |
|
400 backgroundColor: settings.colors[ColorIndex].color |
|
401 }); |
|
402 if (ColorIndex < settings.colors.length - 1) { |
|
403 ThisSmallBox.attr("colorcount", ((ColorIndex * 1) + 1)); |
|
404 } else { |
|
405 ThisSmallBox.attr("colorcount", 0); |
|
406 } |
|
407 }, settings.colortime); |
|
408 } |
|
409 if (settings.timeout != undefined) { |
|
410 setTimeout(function () { |
|
411 clearInterval(ColorTimeInterval); |
|
412 var ThisHeight = $(this).height() + 20; |
|
413 var ID = CurrentIDSmallbox; |
|
414 var ThisTop = $("#" + CurrentIDSmallbox).css("top"); |
|
415 if ($("#" + CurrentIDSmallbox + ":hover").length != 0) { |
|
416 $("#" + CurrentIDSmallbox).on("mouseleave", function () { |
|
417 SmallBoxesAnchos = SmallBoxesAnchos - ThisHeight; |
|
418 $("#" + CurrentIDSmallbox).remove(); |
|
419 if (typeof callback == "function") { |
|
420 if (callback) { |
|
421 callback(); |
|
422 } |
|
423 } |
|
424 var Primero = 1; |
|
425 var heightPrev = 0; |
|
426 $(".SmallBox").each(function (index) { |
|
427 if (index == 0) { |
|
428 $(this).animate({ |
|
429 top: 20 |
|
430 }, 300); |
|
431 heightPrev = $(this).height() + 40; |
|
432 SmallBoxesAnchos = $(this).height() + 40; |
|
433 } else { |
|
434 $(this).animate({ |
|
435 top: heightPrev |
|
436 }, 350); |
|
437 heightPrev = heightPrev + $(this).height() + 20; |
|
438 SmallBoxesAnchos = SmallBoxesAnchos + $(this).height() + 20; |
|
439 } |
|
440 }) |
|
441 }) |
|
442 } else { |
|
443 clearInterval(ColorTimeInterval); |
|
444 SmallBoxesAnchos = SmallBoxesAnchos - ThisHeight; |
|
445 if (typeof callback == "function") { |
|
446 if (callback) { |
|
447 callback(); |
|
448 } |
|
449 } |
|
450 $("#" + CurrentIDSmallbox).removeClass().addClass("SmallBox").animate({ |
|
451 opacity: 0 |
|
452 }, 300, function () { |
|
453 $(this).remove(); |
|
454 var Primero = 1; |
|
455 var heightPrev = 0; |
|
456 $(".SmallBox").each(function (index) { |
|
457 if (index == 0) { |
|
458 $(this).animate({ |
|
459 top: 20 |
|
460 }, 300); |
|
461 heightPrev = $(this).height() + 40; |
|
462 SmallBoxesAnchos = $(this).height() + 40; |
|
463 } else { |
|
464 $(this).animate({ |
|
465 top: heightPrev |
|
466 }); |
|
467 heightPrev = heightPrev + $(this).height() + 20; |
|
468 SmallBoxesAnchos = SmallBoxesAnchos + $(this).height() + 20; |
|
469 } |
|
470 }) |
|
471 }); |
|
472 } |
|
473 }, settings.timeout) |
|
474 } |
|
475 $("#smallbox" + SmallBoxes).bind("click", function () { |
|
476 clearInterval(ColorTimeInterval); |
|
477 if (typeof callback == "function") { |
|
478 if (callback) { |
|
479 callback(); |
|
480 } |
|
481 } |
|
482 var ThisHeight = $(this).height() + 20; |
|
483 var ID = $(this).attr("id"); |
|
484 var ThisTop = $(this).css("top"); |
|
485 SmallBoxesAnchos = SmallBoxesAnchos - ThisHeight; |
|
486 $(this).removeClass().addClass("SmallBox").animate({ |
|
487 opacity: 0 |
|
488 }, 300, function () { |
|
489 $(this).remove(); |
|
490 var Primero = 1; |
|
491 var heightPrev = 0; |
|
492 $(".SmallBox").each(function (index) { |
|
493 if (index == 0) { |
|
494 $(this).animate({ |
|
495 top: 20 |
|
496 }, 300); |
|
497 heightPrev = $(this).height() + 40; |
|
498 SmallBoxesAnchos = $(this).height() + 40; |
|
499 } else { |
|
500 $(this).animate({ |
|
501 top: heightPrev |
|
502 }, 350); |
|
503 heightPrev = heightPrev + $(this).height() + 20; |
|
504 SmallBoxesAnchos = SmallBoxesAnchos + $(this).height() + 20; |
|
505 } |
|
506 }); |
|
507 }); |
|
508 }); |
|
509 } |
|
510 } |
|
511 |
|
512 })(jQuery); |