/modules/mod_base/lib/js/modules/jquery.loadmask.js

https://code.google.com/p/zotonic/ · JavaScript · 128 lines · 76 code · 20 blank · 32 comment · 15 complexity · 327801aeea97483e2535ec924e0e9146 MD5 · raw file

  1. /**
  2. * Copyright (c) 2009 Sergiy Kovalchuk (serg472@gmail.com)
  3. *
  4. * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
  5. * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  6. *
  7. * Following code is based on Element.mask() implementation from ExtJS framework (http://extjs.com/)
  8. *
  9. */
  10. ;(function($){
  11. /**
  12. * Displays loading mask over selected element(s). Accepts both single and multiple selectors.
  13. *
  14. * @param label Text message that will be displayed on top of the mask besides a spinner (optional).
  15. * If not provided only mask will be displayed without a label or a spinner.
  16. * @param delay Delay in milliseconds before element is masked (optional). If unmask() is called
  17. * before the delay times out, no mask is displayed. This can be used to prevent unnecessary
  18. * mask display for quick processes.
  19. */
  20. $.fn.mask = function(label, delay){
  21. $(this).each(function() {
  22. if(delay !== undefined && delay > 0) {
  23. var element = $(this);
  24. element.data("_mask_timeout", setTimeout(function() { $.maskElement(element, label)}, delay));
  25. } else {
  26. $.maskElement($(this), label);
  27. }
  28. });
  29. };
  30. /**
  31. * Removes mask from the element(s). Accepts both single and multiple selectors.
  32. */
  33. $.fn.unmask = function(){
  34. $(this).each(function() {
  35. $.unmaskElement($(this));
  36. });
  37. };
  38. /**
  39. * Checks if a single element is masked. Returns false if mask is delayed or not displayed.
  40. */
  41. $.fn.isMasked = function(){
  42. return this.hasClass("masked");
  43. };
  44. /**
  45. * Show or update the upload progressbar
  46. */
  47. $.fn.maskProgress = function(value){
  48. $(this).each(function() {
  49. $.maskProgress($(this), value);
  50. });
  51. };
  52. $.maskElement = function(element, label){
  53. //if this element has delayed mask scheduled then remove it and display the new one
  54. if (element.data("_mask_timeout") !== undefined) {
  55. clearTimeout(element.data("_mask_timeout"));
  56. element.removeData("_mask_timeout");
  57. }
  58. if(element.isMasked()) {
  59. $.unmaskElement(element);
  60. }
  61. if(element.css("position") == "static") {
  62. element.addClass("masked-relative");
  63. }
  64. element.addClass("masked");
  65. var maskDiv = $('<div class="loadmask"></div>');
  66. //auto height fix for IE
  67. if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
  68. maskDiv.height(element.height() + parseInt(element.css("padding-top")) + parseInt(element.css("padding-bottom")));
  69. maskDiv.width(element.width() + parseInt(element.css("padding-left")) + parseInt(element.css("padding-right")));
  70. }
  71. //fix for z-index bug with selects in IE6
  72. if(navigator.userAgent.toLowerCase().indexOf("msie 6") > -1){
  73. element.find("select").addClass("masked-hidden");
  74. }
  75. element.append(maskDiv);
  76. if ($(element).progressbar != undefined) {
  77. var maskProgressDiv = $('<div class="loadmask-progress" style="display:none;"></div>');
  78. element.append(maskProgressDiv);
  79. element.find(".loadmask-progress").progressbar({value: 0});
  80. }
  81. if(label !== undefined) {
  82. var maskMsgDiv = $('<div class="loadmask-msg" style="display:none;"></div>');
  83. maskMsgDiv.append('<div>' + label + '</div>');
  84. element.append(maskMsgDiv);
  85. //calculate center position
  86. maskMsgDiv.css("top", Math.round(element.height() / 2 - (maskMsgDiv.height() - parseInt(maskMsgDiv.css("padding-top")) - parseInt(maskMsgDiv.css("padding-bottom"))) / 2)+"px");
  87. maskMsgDiv.css("left", Math.round(element.width() / 2 - (maskMsgDiv.width() - parseInt(maskMsgDiv.css("padding-left")) - parseInt(maskMsgDiv.css("padding-right"))) / 2)+"px");
  88. maskMsgDiv.show();
  89. }
  90. };
  91. $.maskProgress = function(element, value){
  92. if ($(element).progressbar != undefined) {
  93. element.find(".loadmask-progress").show().progressbar('option', 'value', value);
  94. element.find(".loadmask-msg").hide();
  95. }
  96. };
  97. $.unmaskElement = function(element){
  98. //if this element has delayed mask scheduled then remove it
  99. if (element.data("_mask_timeout") !== undefined) {
  100. clearTimeout(element.data("_mask_timeout"));
  101. element.removeData("_mask_timeout");
  102. }
  103. element.find(".loadmask-msg,.loadmask-progress,.loadmask").remove();
  104. element.removeClass("masked");
  105. element.removeClass("masked-relative");
  106. element.find("select").removeClass("masked-hidden");
  107. };
  108. })(jQuery);