jsgrid.load-indicator.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. (function(jsGrid, $, undefined) {
  2. function LoadIndicator(config) {
  3. this._init(config);
  4. }
  5. LoadIndicator.prototype = {
  6. container: "body",
  7. message: "Loading...",
  8. shading: true,
  9. zIndex: 1000,
  10. shaderClass: "jsgrid-load-shader",
  11. loadPanelClass: "jsgrid-load-panel",
  12. _init: function(config) {
  13. $.extend(true, this, config);
  14. this._initContainer();
  15. this._initShader();
  16. this._initLoadPanel();
  17. },
  18. _initContainer: function() {
  19. this._container = $(this.container);
  20. },
  21. _initShader: function() {
  22. if(!this.shading)
  23. return;
  24. this._shader = $("<div>").addClass(this.shaderClass)
  25. .hide()
  26. .css({
  27. position: "absolute",
  28. top: 0,
  29. right: 0,
  30. bottom: 0,
  31. left: 0,
  32. zIndex: this.zIndex
  33. })
  34. .appendTo(this._container);
  35. },
  36. _initLoadPanel: function() {
  37. this._loadPanel = $("<div>").addClass(this.loadPanelClass)
  38. .text(this.message)
  39. .hide()
  40. .css({
  41. position: "absolute",
  42. top: "50%",
  43. left: "50%",
  44. zIndex: this.zIndex
  45. })
  46. .appendTo(this._container);
  47. },
  48. show: function() {
  49. var $loadPanel = this._loadPanel.show();
  50. var actualWidth = $loadPanel.outerWidth();
  51. var actualHeight = $loadPanel.outerHeight();
  52. $loadPanel.css({
  53. marginTop: -actualHeight / 2,
  54. marginLeft: -actualWidth / 2
  55. });
  56. this._shader.show();
  57. },
  58. hide: function() {
  59. this._loadPanel.hide();
  60. this._shader.hide();
  61. }
  62. };
  63. jsGrid.LoadIndicator = LoadIndicator;
  64. }(jsGrid, jQuery));