pnotify.buttons.js 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. // Buttons
  2. // Uses AMD or browser globals for jQuery.
  3. (function (factory) {
  4. if (typeof define === 'function' && define.amd) {
  5. // AMD. Register as a module.
  6. define('pnotify.buttons', ['jquery', 'pnotify'], factory);
  7. } else {
  8. // Browser globals
  9. factory(jQuery, PNotify);
  10. }
  11. }(function($, PNotify){
  12. PNotify.prototype.options.buttons = {
  13. // Provide a button for the user to manually close the notice.
  14. closer: true,
  15. // Only show the closer button on hover.
  16. closer_hover: true,
  17. // Provide a button for the user to manually stick the notice.
  18. sticker: true,
  19. // Only show the sticker button on hover.
  20. sticker_hover: true,
  21. // The various displayed text, helps facilitating internationalization.
  22. labels: {
  23. close: "Close",
  24. stick: "Stick"
  25. }
  26. };
  27. PNotify.prototype.modules.buttons = {
  28. // This lets us update the options available in the closures.
  29. myOptions: null,
  30. closer: null,
  31. sticker: null,
  32. init: function(notice, options){
  33. var that = this;
  34. this.myOptions = options;
  35. notice.elem.on({
  36. "mouseenter": function(e){
  37. // Show the buttons.
  38. if (that.myOptions.sticker && !(notice.options.nonblock && notice.options.nonblock.nonblock)) that.sticker.trigger("pnotify_icon").css("visibility", "visible");
  39. if (that.myOptions.closer && !(notice.options.nonblock && notice.options.nonblock.nonblock)) that.closer.css("visibility", "visible");
  40. },
  41. "mouseleave": function(e){
  42. // Hide the buttons.
  43. if (that.myOptions.sticker_hover)
  44. that.sticker.css("visibility", "hidden");
  45. if (that.myOptions.closer_hover)
  46. that.closer.css("visibility", "hidden");
  47. }
  48. });
  49. // Provide a button to stick the notice.
  50. this.sticker = $("<div />", {
  51. "class": "ui-pnotify-sticker",
  52. "css": {"cursor": "pointer", "visibility": options.sticker_hover ? "hidden" : "visible"},
  53. "click": function(){
  54. notice.options.hide = !notice.options.hide;
  55. if (notice.options.hide)
  56. notice.queueRemove();
  57. else
  58. notice.cancelRemove();
  59. $(this).trigger("pnotify_icon");
  60. }
  61. })
  62. .bind("pnotify_icon", function(){
  63. $(this).children().removeClass(notice.styles.pin_up+" "+notice.styles.pin_down).addClass(notice.options.hide ? notice.styles.pin_up : notice.styles.pin_down);
  64. })
  65. .append($("<span />", {"class": notice.styles.pin_up, "title": options.labels.stick}))
  66. .prependTo(notice.container);
  67. if (!options.sticker || (notice.options.nonblock && notice.options.nonblock.nonblock))
  68. this.sticker.css("display", "none");
  69. // Provide a button to close the notice.
  70. this.closer = $("<div />", {
  71. "class": "ui-pnotify-closer",
  72. "css": {"cursor": "pointer", "visibility": options.closer_hover ? "hidden" : "visible"},
  73. "click": function(){
  74. notice.remove(false);
  75. that.sticker.css("visibility", "hidden");
  76. that.closer.css("visibility", "hidden");
  77. }
  78. })
  79. .append($("<span />", {"class": notice.styles.closer, "title": options.labels.close}))
  80. .prependTo(notice.container);
  81. if (!options.closer || (notice.options.nonblock && notice.options.nonblock.nonblock))
  82. this.closer.css("display", "none");
  83. },
  84. update: function(notice, options){
  85. this.myOptions = options;
  86. // Update the sticker and closer buttons.
  87. if (!options.closer || (notice.options.nonblock && notice.options.nonblock.nonblock))
  88. this.closer.css("display", "none");
  89. else if (options.closer)
  90. this.closer.css("display", "block");
  91. if (!options.sticker || (notice.options.nonblock && notice.options.nonblock.nonblock))
  92. this.sticker.css("display", "none");
  93. else if (options.sticker)
  94. this.sticker.css("display", "block");
  95. // Update the sticker icon.
  96. this.sticker.trigger("pnotify_icon");
  97. // Update the hover status of the buttons.
  98. if (options.sticker_hover)
  99. this.sticker.css("visibility", "hidden");
  100. else if (!(notice.options.nonblock && notice.options.nonblock.nonblock))
  101. this.sticker.css("visibility", "visible");
  102. if (options.closer_hover)
  103. this.closer.css("visibility", "hidden");
  104. else if (!(notice.options.nonblock && notice.options.nonblock.nonblock))
  105. this.closer.css("visibility", "visible");
  106. }
  107. };
  108. $.extend(PNotify.styling.jqueryui, {
  109. closer: "ui-icon ui-icon-close",
  110. pin_up: "ui-icon ui-icon-pin-w",
  111. pin_down: "ui-icon ui-icon-pin-s"
  112. });
  113. $.extend(PNotify.styling.bootstrap2, {
  114. closer: "icon-remove",
  115. pin_up: "icon-pause",
  116. pin_down: "icon-play"
  117. });
  118. $.extend(PNotify.styling.bootstrap3, {
  119. closer: "glyphicon glyphicon-remove",
  120. pin_up: "glyphicon glyphicon-pause",
  121. pin_down: "glyphicon glyphicon-play"
  122. });
  123. $.extend(PNotify.styling.fontawesome, {
  124. closer: "fa fa-times",
  125. pin_up: "fa fa-pause",
  126. pin_down: "fa fa-play"
  127. });
  128. }));