Spotlight.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /*
  2. * Ext JS Library 2.1
  3. * Copyright(c) 2006-2008, Ext JS, LLC.
  4. * licensing@extjs.com
  5. *
  6. * http://extjs.com/license
  7. */
  8. Ext.Spotlight = function(config){
  9. Ext.apply(this, config);
  10. }
  11. Ext.Spotlight.prototype = {
  12. active : false,
  13. animate : true,
  14. animated : false,
  15. duration: .25,
  16. easing:'easeNone',
  17. createElements : function(){
  18. var bd = Ext.getBody();
  19. this.right = bd.createChild({cls:'x-spotlight'});
  20. this.left = bd.createChild({cls:'x-spotlight'});
  21. this.top = bd.createChild({cls:'x-spotlight'});
  22. this.bottom = bd.createChild({cls:'x-spotlight'});
  23. this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
  24. },
  25. show : function(el, callback, scope){
  26. if(this.animated){
  27. this.show.defer(50, this, [el, callback, scope]);
  28. return;
  29. }
  30. this.el = Ext.get(el);
  31. if(!this.right){
  32. this.createElements();
  33. }
  34. if(!this.active){
  35. this.all.setDisplayed('');
  36. this.applyBounds(true, false);
  37. this.active = true;
  38. Ext.EventManager.onWindowResize(this.syncSize, this);
  39. this.applyBounds(false, this.animate, false, callback, scope);
  40. }else{
  41. this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
  42. }
  43. },
  44. hide : function(callback, scope){
  45. if(this.animated){
  46. this.hide.defer(50, this, [callback, scope]);
  47. return;
  48. }
  49. Ext.EventManager.removeResizeListener(this.syncSize, this);
  50. this.applyBounds(true, this.animate, true, callback, scope);
  51. },
  52. doHide : function(){
  53. this.active = false;
  54. this.all.setDisplayed(false);
  55. },
  56. syncSize : function(){
  57. this.applyBounds(false, false);
  58. },
  59. applyBounds : function(basePts, anim, doHide, callback, scope){
  60. var rg = this.el.getRegion();
  61. var dw = Ext.lib.Dom.getViewWidth(true);
  62. var dh = Ext.lib.Dom.getViewHeight(true);
  63. var c = 0, cb = false;
  64. if(anim){
  65. cb = {
  66. callback: function(){
  67. c++;
  68. if(c == 4){
  69. this.animated = false;
  70. if(doHide){
  71. this.doHide();
  72. }
  73. Ext.callback(callback, scope, [this]);
  74. }
  75. },
  76. scope: this,
  77. duration: this.duration,
  78. easing: this.easing
  79. };
  80. this.animated = true;
  81. }
  82. this.right.setBounds(
  83. rg.right,
  84. basePts ? dh : rg.top,
  85. dw - rg.right,
  86. basePts ? 0 : (dh - rg.top),
  87. cb);
  88. this.left.setBounds(
  89. 0,
  90. 0,
  91. rg.left,
  92. basePts ? 0 : rg.bottom,
  93. cb);
  94. this.top.setBounds(
  95. basePts ? dw : rg.left,
  96. 0,
  97. basePts ? 0 : dw - rg.left,
  98. rg.top,
  99. cb);
  100. this.bottom.setBounds(
  101. 0,
  102. rg.bottom,
  103. basePts ? 0 : rg.right,
  104. dh - rg.bottom,
  105. cb);
  106. if(!anim){
  107. if(doHide){
  108. this.doHide();
  109. }
  110. if(callback){
  111. Ext.callback(callback, scope, [this]);
  112. }
  113. }
  114. },
  115. destroy : function(){
  116. this.doHide();
  117. Ext.destroy(
  118. this.right,
  119. this.left,
  120. this.top,
  121. this.bottom);
  122. delete this.el;
  123. delete this.all;
  124. }
  125. };