ViewportControl.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. /*
  2. * Copyright (C) 2013 Google Inc. All rights reserved.
  3. *
  4. * Redistribution and use in source and binary forms, with or without
  5. * modification, are permitted provided that the following conditions are
  6. * met:
  7. *
  8. * * Redistributions of source code must retain the above copyright
  9. * notice, this list of conditions and the following disclaimer.
  10. * * Redistributions in binary form must reproduce the above
  11. * copyright notice, this list of conditions and the following disclaimer
  12. * in the documentation and/or other materials provided with the
  13. * distribution.
  14. * * Neither the name of Google Inc. nor the names of its
  15. * contributors may be used to endorse or promote products derived from
  16. * this software without specific prior written permission.
  17. *
  18. * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19. * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20. * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21. * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22. * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23. * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24. * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25. * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26. * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27. * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28. * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29. */
  30. /**
  31. * @constructor
  32. * @param {WebInspector.ViewportControl.Provider} provider
  33. */
  34. WebInspector.ViewportControl = function(provider)
  35. {
  36. this.element = document.createElement("div");
  37. this.element.className = "fill";
  38. this.element.style.overflow = "auto";
  39. this._topGapElement = this.element.createChild("div");
  40. this._contentElement = this.element.createChild("div");
  41. this._bottomGapElement = this.element.createChild("div");
  42. this._provider = provider;
  43. this.element.addEventListener("scroll", this._onScroll.bind(this), false);
  44. this._firstVisibleIndex = 0;
  45. this._lastVisibleIndex = -1;
  46. }
  47. /**
  48. * @interface
  49. */
  50. WebInspector.ViewportControl.Provider = function()
  51. {
  52. }
  53. WebInspector.ViewportControl.Provider.prototype = {
  54. /**
  55. * @return {number}
  56. */
  57. itemCount: function() { return 0; },
  58. /**
  59. * @param {number} index
  60. * @return {Element}
  61. */
  62. itemElement: function(index) { return null; }
  63. }
  64. WebInspector.ViewportControl.prototype = {
  65. /**
  66. * @return {Element}
  67. */
  68. contentElement: function()
  69. {
  70. return this._contentElement;
  71. },
  72. refresh: function()
  73. {
  74. if (!this.element.clientHeight)
  75. return; // Do nothing for invisible controls.
  76. var itemCount = this._provider.itemCount();
  77. if (!itemCount)
  78. return;
  79. if (!this._rowHeight) {
  80. var firstElement = this._provider.itemElement(0);
  81. this._rowHeight = firstElement.measurePreferredSize(this._contentElement).height;
  82. }
  83. var visibleFrom = this.element.scrollTop;
  84. var visibleTo = visibleFrom + this.element.clientHeight;
  85. this._firstVisibleIndex = Math.floor(visibleFrom / this._rowHeight);
  86. this._lastVisibleIndex = Math.min(Math.ceil(visibleTo / this._rowHeight), itemCount) - 1;
  87. this._topGapElement.style.height = (this._rowHeight * this._firstVisibleIndex) + "px";
  88. this._bottomGapElement.style.height = (this._rowHeight * (itemCount - this._lastVisibleIndex - 1)) + "px";
  89. this._contentElement.removeChildren();
  90. for (var i = this._firstVisibleIndex; i <= this._lastVisibleIndex; ++i)
  91. this._contentElement.appendChild(this._provider.itemElement(i));
  92. },
  93. /**
  94. * @param {Event} event
  95. */
  96. _onScroll: function(event)
  97. {
  98. this.refresh();
  99. },
  100. /**
  101. * @return {number}
  102. */
  103. rowsPerViewport: function()
  104. {
  105. return Math.floor(this.element.clientHeight / this._rowHeight);
  106. },
  107. /**
  108. * @return {number}
  109. */
  110. firstVisibleIndex: function()
  111. {
  112. return this._firstVisibleIndex;
  113. },
  114. /**
  115. * @return {number}
  116. */
  117. lastVisibleIndex: function()
  118. {
  119. return this._lastVisibleIndex;
  120. },
  121. /**
  122. * @return {?Element}
  123. */
  124. renderedElementAt: function(index)
  125. {
  126. if (index < this._firstVisibleIndex)
  127. return null;
  128. if (index > this._lastVisibleIndex)
  129. return null;
  130. return this._contentElement.childNodes[index - this._firstVisibleIndex];
  131. },
  132. /**
  133. * @param {number} index
  134. * @param {boolean=} makeLast
  135. */
  136. scrollItemIntoView: function(index, makeLast)
  137. {
  138. if (index > this._firstVisibleIndex && index < this._lastVisibleIndex)
  139. return;
  140. if (makeLast)
  141. this.element.scrollTop = this._rowHeight * (index + 1) - this.element.clientHeight;
  142. else
  143. this.element.scrollTop = this._rowHeight * index;
  144. }
  145. }