SidebarOverlay.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. /*
  2. * Copyright (C) 2012 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.View} view
  33. * @param {string} widthSettingName
  34. * @param {number} minimalWidth
  35. */
  36. WebInspector.SidebarOverlay = function(view, widthSettingName, minimalWidth)
  37. {
  38. this.element = document.createElement("div");
  39. this.element.className = "sidebar-overlay";
  40. this._view = view;
  41. this._widthSettingName = widthSettingName;
  42. this._minimalWidth = minimalWidth;
  43. this._savedWidth = minimalWidth || 300;
  44. if (this._widthSettingName)
  45. WebInspector.settings[this._widthSettingName] = WebInspector.settings.createSetting(this._widthSettingName, undefined);
  46. this._resizerElement = document.createElement("div");
  47. this._resizerElement.className = "sidebar-overlay-resizer";
  48. this._installResizer(this._resizerElement);
  49. }
  50. WebInspector.SidebarOverlay.prototype = {
  51. /**
  52. * @param {Element} relativeToElement
  53. */
  54. show: function(relativeToElement)
  55. {
  56. relativeToElement.appendChild(this.element);
  57. relativeToElement.addStyleClass("sidebar-overlay-shown");
  58. this._view.show(this.element);
  59. this.element.appendChild(this._resizerElement);
  60. if (this._resizerWidgetElement)
  61. this.element.appendChild(this._resizerWidgetElement);
  62. this.position(relativeToElement);
  63. },
  64. /**
  65. * @param {Element} relativeToElement
  66. */
  67. position: function(relativeToElement)
  68. {
  69. this._totalWidth = relativeToElement.offsetWidth;
  70. this._setWidth(this._preferredWidth());
  71. },
  72. focus: function()
  73. {
  74. WebInspector.setCurrentFocusElement(this._view.element);
  75. },
  76. hide: function()
  77. {
  78. var element = this.element.parentElement;
  79. if (!element)
  80. return;
  81. this._view.detach();
  82. element.removeChild(this.element);
  83. element.removeStyleClass("sidebar-overlay-shown");
  84. this.element.removeChild(this._resizerElement);
  85. if (this._resizerWidgetElement)
  86. this.element.removeChild(this._resizerWidgetElement);
  87. },
  88. /**
  89. * @param {number} newWidth
  90. */
  91. _setWidth: function(newWidth)
  92. {
  93. var width = Number.constrain(newWidth, this._minimalWidth, this._totalWidth);
  94. if (this._width === width)
  95. return;
  96. this.element.style.width = width + "px";
  97. this._resizerElement.style.left = (width - 3) + "px";
  98. this._width = width;
  99. this._view.doResize();
  100. this._saveWidth();
  101. },
  102. /**
  103. * @return {number}
  104. */
  105. _preferredWidth: function()
  106. {
  107. if (!this._widthSettingName)
  108. return this._savedWidth;
  109. return WebInspector.settings[this._widthSettingName].get() || this._savedWidth;
  110. },
  111. _saveWidth: function()
  112. {
  113. this._savedWidth = this._width;
  114. if (!this._widthSettingName)
  115. return;
  116. WebInspector.settings[this._widthSettingName].set(this._width);
  117. },
  118. /**
  119. * @param {Event} event
  120. * @return {boolean}
  121. */
  122. _startResizerDragging: function(event)
  123. {
  124. var width = this._width;
  125. this._dragOffset = width - event.pageX;
  126. return true;
  127. },
  128. /**
  129. * @param {Event} event
  130. */
  131. _resizerDragging: function(event)
  132. {
  133. var width = event.pageX + this._dragOffset;
  134. this._setWidth(width);
  135. event.preventDefault();
  136. },
  137. /**
  138. * @param {Event} event
  139. */
  140. _endResizerDragging: function(event)
  141. {
  142. delete this._dragOffset;
  143. },
  144. /**
  145. * @param {Element} resizerElement
  146. */
  147. _installResizer: function(resizerElement)
  148. {
  149. WebInspector.installDragHandle(resizerElement, this._startResizerDragging.bind(this), this._resizerDragging.bind(this), this._endResizerDragging.bind(this), "ew-resize");
  150. },
  151. /**
  152. * @type {Element}
  153. */
  154. set resizerWidgetElement(resizerWidgetElement)
  155. {
  156. this._resizerWidgetElement = resizerWidgetElement;
  157. this._installResizer(resizerWidgetElement);
  158. }
  159. }