PageRenderTime 54ms CodeModel.GetById 21ms RepoModel.GetById 1ms app.codeStats 0ms

/Golang/Diagnostics/public/Examples/assets/js/bootstrap-notify.js

https://gitlab.com/caroliina/ITX8540-backendAPI
JavaScript | 404 lines | 337 code | 36 blank | 31 comment | 53 complexity | 1956a5a2aa078e277c90d2d236f5a4b7 MD5 | raw file
  1. /*
  2. Creative Tim Modifications
  3. Lines: 239, 240 was changed from top: 5px to top: 50% and we added margin-top: -13px. In this way the close button will be aligned vertically
  4. Line:242 - modified when the icon is set, we add the class "alert-with-icon", so there will be enough space for the icon.
  5. */
  6. /*
  7. * Project: Bootstrap Notify = v3.1.5
  8. * Description: Turns standard Bootstrap alerts into "Growl-like" notifications.
  9. * Author: Mouse0270 aka Robert McIntosh
  10. * License: MIT License
  11. * Website: https://github.com/mouse0270/bootstrap-growl
  12. */
  13. /* global define:false, require: false, jQuery:false */
  14. (function (factory) {
  15. if (typeof define === 'function' && define.amd) {
  16. // AMD. Register as an anonymous module.
  17. define(['jquery'], factory);
  18. } else if (typeof exports === 'object') {
  19. // Node/CommonJS
  20. factory(require('jquery'));
  21. } else {
  22. // Browser globals
  23. factory(jQuery);
  24. }
  25. }(function ($) {
  26. // Create the defaults once
  27. var defaults = {
  28. element: 'body',
  29. position: null,
  30. type: "info",
  31. allow_dismiss: true,
  32. allow_duplicates: true,
  33. newest_on_top: false,
  34. showProgressbar: false,
  35. placement: {
  36. from: "top",
  37. align: "right"
  38. },
  39. offset: 20,
  40. spacing: 10,
  41. z_index: 1031,
  42. delay: 5000,
  43. timer: 1000,
  44. url_target: '_blank',
  45. mouse_over: null,
  46. animate: {
  47. enter: 'animated fadeInDown',
  48. exit: 'animated fadeOutUp'
  49. },
  50. onShow: null,
  51. onShown: null,
  52. onClose: null,
  53. onClosed: null,
  54. icon_type: 'class',
  55. template: '<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">&times;</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
  56. };
  57. String.format = function () {
  58. var str = arguments[0];
  59. for (var i = 1; i < arguments.length; i++) {
  60. str = str.replace(RegExp("\\{" + (i - 1) + "\\}", "gm"), arguments[i]);
  61. }
  62. return str;
  63. };
  64. function isDuplicateNotification(notification) {
  65. var isDupe = false;
  66. $('[data-notify="container"]').each(function (i, el) {
  67. var $el = $(el);
  68. var title = $el.find('[data-notify="title"]').text().trim();
  69. var message = $el.find('[data-notify="message"]').html().trim();
  70. // The input string might be different than the actual parsed HTML string!
  71. // (<br> vs <br /> for example)
  72. // So we have to force-parse this as HTML here!
  73. var isSameTitle = title === $("<div>" + notification.settings.content.title + "</div>").html().trim();
  74. var isSameMsg = message === $("<div>" + notification.settings.content.message + "</div>").html().trim();
  75. var isSameType = $el.hasClass('alert-' + notification.settings.type);
  76. if (isSameTitle && isSameMsg && isSameType) {
  77. //we found the dupe. Set the var and stop checking.
  78. isDupe = true;
  79. }
  80. return !isDupe;
  81. });
  82. return isDupe;
  83. }
  84. function Notify(element, content, options) {
  85. // Setup Content of Notify
  86. var contentObj = {
  87. content: {
  88. message: typeof content === 'object' ? content.message : content,
  89. title: content.title ? content.title : '',
  90. icon: content.icon ? content.icon : '',
  91. url: content.url ? content.url : '#',
  92. target: content.target ? content.target : '-'
  93. }
  94. };
  95. options = $.extend(true, {}, contentObj, options);
  96. this.settings = $.extend(true, {}, defaults, options);
  97. this._defaults = defaults;
  98. if (this.settings.content.target === "-") {
  99. this.settings.content.target = this.settings.url_target;
  100. }
  101. this.animations = {
  102. start: 'webkitAnimationStart oanimationstart MSAnimationStart animationstart',
  103. end: 'webkitAnimationEnd oanimationend MSAnimationEnd animationend'
  104. };
  105. if (typeof this.settings.offset === 'number') {
  106. this.settings.offset = {
  107. x: this.settings.offset,
  108. y: this.settings.offset
  109. };
  110. }
  111. //if duplicate messages are not allowed, then only continue if this new message is not a duplicate of one that it already showing
  112. if (this.settings.allow_duplicates || (!this.settings.allow_duplicates && !isDuplicateNotification(this))) {
  113. this.init();
  114. }
  115. }
  116. $.extend(Notify.prototype, {
  117. init: function () {
  118. var self = this;
  119. this.buildNotify();
  120. if (this.settings.content.icon) {
  121. this.setIcon();
  122. }
  123. if (this.settings.content.url != "#") {
  124. this.styleURL();
  125. }
  126. this.styleDismiss();
  127. this.placement();
  128. this.bind();
  129. this.notify = {
  130. $ele: this.$ele,
  131. update: function (command, update) {
  132. var commands = {};
  133. if (typeof command === "string") {
  134. commands[command] = update;
  135. } else {
  136. commands = command;
  137. }
  138. for (var cmd in commands) {
  139. switch (cmd) {
  140. case "type":
  141. this.$ele.removeClass('alert-' + self.settings.type);
  142. this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass('progress-bar-' + self.settings.type);
  143. self.settings.type = commands[cmd];
  144. this.$ele.addClass('alert-' + commands[cmd]).find('[data-notify="progressbar"] > .progress-bar').addClass('progress-bar-' + commands[cmd]);
  145. break;
  146. case "icon":
  147. var $icon = this.$ele.find('[data-notify="icon"]');
  148. if (self.settings.icon_type.toLowerCase() === 'class') {
  149. $icon.removeClass(self.settings.content.icon).addClass(commands[cmd]);
  150. } else {
  151. if (!$icon.is('img')) {
  152. $icon.find('img');
  153. }
  154. $icon.attr('src', commands[cmd]);
  155. }
  156. break;
  157. case "progress":
  158. var newDelay = self.settings.delay - (self.settings.delay * (commands[cmd] / 100));
  159. this.$ele.data('notify-delay', newDelay);
  160. this.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', commands[cmd]).css('width', commands[cmd] + '%');
  161. break;
  162. case "url":
  163. this.$ele.find('[data-notify="url"]').attr('href', commands[cmd]);
  164. break;
  165. case "target":
  166. this.$ele.find('[data-notify="url"]').attr('target', commands[cmd]);
  167. break;
  168. default:
  169. this.$ele.find('[data-notify="' + cmd + '"]').html(commands[cmd]);
  170. }
  171. }
  172. var posX = this.$ele.outerHeight() + parseInt(self.settings.spacing) + parseInt(self.settings.offset.y);
  173. self.reposition(posX);
  174. },
  175. close: function () {
  176. self.close();
  177. }
  178. };
  179. },
  180. buildNotify: function () {
  181. var content = this.settings.content;
  182. this.$ele = $(String.format(this.settings.template, this.settings.type, content.title, content.message, content.url, content.target));
  183. this.$ele.attr('data-notify-position', this.settings.placement.from + '-' + this.settings.placement.align);
  184. if (!this.settings.allow_dismiss) {
  185. this.$ele.find('[data-notify="dismiss"]').css('display', 'none');
  186. }
  187. if ((this.settings.delay <= 0 && !this.settings.showProgressbar) || !this.settings.showProgressbar) {
  188. this.$ele.find('[data-notify="progressbar"]').remove();
  189. }
  190. },
  191. setIcon: function () {
  192. this.$ele.addClass('alert-with-icon');
  193. if (this.settings.icon_type.toLowerCase() === 'class') {
  194. this.$ele.find('[data-notify="icon"]').addClass(this.settings.content.icon);
  195. } else {
  196. if (this.$ele.find('[data-notify="icon"]').is('img')) {
  197. this.$ele.find('[data-notify="icon"]').attr('src', this.settings.content.icon);
  198. } else {
  199. this.$ele.find('[data-notify="icon"]').append('<img src="' + this.settings.content.icon + '" alt="Notify Icon" />');
  200. }
  201. }
  202. },
  203. styleDismiss: function () {
  204. this.$ele.find('[data-notify="dismiss"]').css({
  205. position: 'absolute',
  206. right: '10px',
  207. top: '50%',
  208. marginTop: '-13px',
  209. zIndex: this.settings.z_index + 2
  210. });
  211. },
  212. styleURL: function () {
  213. this.$ele.find('[data-notify="url"]').css({
  214. backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
  215. height: '100%',
  216. left: 0,
  217. position: 'absolute',
  218. top: 0,
  219. width: '100%',
  220. zIndex: this.settings.z_index + 1
  221. });
  222. },
  223. placement: function () {
  224. var self = this,
  225. offsetAmt = this.settings.offset.y,
  226. css = {
  227. display: 'inline-block',
  228. margin: '0px auto',
  229. position: this.settings.position ? this.settings.position : (this.settings.element === 'body' ? 'fixed' : 'absolute'),
  230. transition: 'all .5s ease-in-out',
  231. zIndex: this.settings.z_index
  232. },
  233. hasAnimation = false,
  234. settings = this.settings;
  235. $('[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])').each(function () {
  236. offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + parseInt($(this).outerHeight()) + parseInt(settings.spacing));
  237. });
  238. if (this.settings.newest_on_top === true) {
  239. offsetAmt = this.settings.offset.y;
  240. }
  241. css[this.settings.placement.from] = offsetAmt + 'px';
  242. switch (this.settings.placement.align) {
  243. case "left":
  244. case "right":
  245. css[this.settings.placement.align] = this.settings.offset.x + 'px';
  246. break;
  247. case "center":
  248. css.left = 0;
  249. css.right = 0;
  250. break;
  251. }
  252. this.$ele.css(css).addClass(this.settings.animate.enter);
  253. $.each(Array('webkit-', 'moz-', 'o-', 'ms-', ''), function (index, prefix) {
  254. self.$ele[0].style[prefix + 'AnimationIterationCount'] = 1;
  255. });
  256. $(this.settings.element).append(this.$ele);
  257. if (this.settings.newest_on_top === true) {
  258. offsetAmt = (parseInt(offsetAmt) + parseInt(this.settings.spacing)) + this.$ele.outerHeight();
  259. this.reposition(offsetAmt);
  260. }
  261. if ($.isFunction(self.settings.onShow)) {
  262. self.settings.onShow.call(this.$ele);
  263. }
  264. this.$ele.one(this.animations.start, function () {
  265. hasAnimation = true;
  266. }).one(this.animations.end, function () {
  267. if ($.isFunction(self.settings.onShown)) {
  268. self.settings.onShown.call(this);
  269. }
  270. });
  271. setTimeout(function () {
  272. if (!hasAnimation) {
  273. if ($.isFunction(self.settings.onShown)) {
  274. self.settings.onShown.call(this);
  275. }
  276. }
  277. }, 600);
  278. },
  279. bind: function () {
  280. var self = this;
  281. this.$ele.find('[data-notify="dismiss"]').on('click', function () {
  282. self.close();
  283. });
  284. this.$ele.mouseover(function () {
  285. $(this).data('data-hover', "true");
  286. }).mouseout(function () {
  287. $(this).data('data-hover', "false");
  288. });
  289. this.$ele.data('data-hover', "false");
  290. if (this.settings.delay > 0) {
  291. self.$ele.data('notify-delay', self.settings.delay);
  292. var timer = setInterval(function () {
  293. var delay = parseInt(self.$ele.data('notify-delay')) - self.settings.timer;
  294. if ((self.$ele.data('data-hover') === 'false' && self.settings.mouse_over === "pause") || self.settings.mouse_over != "pause") {
  295. var percent = ((self.settings.delay - delay) / self.settings.delay) * 100;
  296. self.$ele.data('notify-delay', delay);
  297. self.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', percent).css('width', percent + '%');
  298. }
  299. if (delay <= -(self.settings.timer)) {
  300. clearInterval(timer);
  301. self.close();
  302. }
  303. }, self.settings.timer);
  304. }
  305. },
  306. close: function () {
  307. var self = this,
  308. posX = parseInt(this.$ele.css(this.settings.placement.from)),
  309. hasAnimation = false;
  310. this.$ele.data('closing', 'true').addClass(this.settings.animate.exit);
  311. self.reposition(posX);
  312. if ($.isFunction(self.settings.onClose)) {
  313. self.settings.onClose.call(this.$ele);
  314. }
  315. this.$ele.one(this.animations.start, function () {
  316. hasAnimation = true;
  317. }).one(this.animations.end, function () {
  318. $(this).remove();
  319. if ($.isFunction(self.settings.onClosed)) {
  320. self.settings.onClosed.call(this);
  321. }
  322. });
  323. setTimeout(function () {
  324. if (!hasAnimation) {
  325. self.$ele.remove();
  326. if (self.settings.onClosed) {
  327. self.settings.onClosed(self.$ele);
  328. }
  329. }
  330. }, 600);
  331. },
  332. reposition: function (posX) {
  333. var self = this,
  334. notifies = '[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])',
  335. $elements = this.$ele.nextAll(notifies);
  336. if (this.settings.newest_on_top === true) {
  337. $elements = this.$ele.prevAll(notifies);
  338. }
  339. $elements.each(function () {
  340. $(this).css(self.settings.placement.from, posX);
  341. posX = (parseInt(posX) + parseInt(self.settings.spacing)) + $(this).outerHeight();
  342. });
  343. }
  344. });
  345. $.notify = function (content, options) {
  346. var plugin = new Notify(this, content, options);
  347. return plugin.notify;
  348. };
  349. $.notifyDefaults = function (options) {
  350. defaults = $.extend(true, {}, defaults, options);
  351. return defaults;
  352. };
  353. $.notifyClose = function (command) {
  354. if (typeof command === "undefined" || command === "all") {
  355. $('[data-notify]').find('[data-notify="dismiss"]').trigger('click');
  356. } else {
  357. $('[data-notify-position="' + command + '"]').find('[data-notify="dismiss"]').trigger('click');
  358. }
  359. };
  360. }));