You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

218 lines
10 KiB

3 years ago
  1. /*
  2. * jQuery.splitter.js - two-pane splitter window plugin
  3. *
  4. * version 1.51 (2009/01/09)
  5. *
  6. * Dual licensed under the MIT and GPL licenses:
  7. * http://www.opensource.org/licenses/mit-license.php
  8. * http://www.gnu.org/licenses/gpl.html
  9. */
  10. /**
  11. * The splitter() plugin implements a two-pane resizable splitter window.
  12. * The selected elements in the jQuery object are converted to a splitter;
  13. * each selected element should have two child elements, used for the panes
  14. * of the splitter. The plugin adds a third child element for the splitbar.
  15. *
  16. * For more details see: http://methvin.com/splitter/
  17. *
  18. *
  19. * @example $('#MySplitter').splitter();
  20. * @desc Create a vertical splitter with default settings
  21. *
  22. * @example $('#MySplitter').splitter({type: 'h', accessKey: 'M'});
  23. * @desc Create a horizontal splitter resizable via Alt+Shift+M
  24. *
  25. * @name splitter
  26. * @type jQuery
  27. * @param Object options Options for the splitter (not required)
  28. * @cat Plugins/Splitter
  29. * @return jQuery
  30. * @author Dave Methvin (dave.methvin@gmail.com)
  31. */
  32. ;(function($){
  33. $.fn.splitter = function(args){
  34. args = args || {};
  35. return this.each(function() {
  36. var zombie; // left-behind splitbar for outline resizes
  37. function startSplitMouse(evt) {
  38. if ( opts.outline )
  39. zombie = zombie || bar.clone(false).insertAfter(A);
  40. panes.css("-webkit-user-select", "none"); // Safari selects A/B text on a move
  41. bar.addClass(opts.activeClass);
  42. $('<div class="splitterMask"></div>').insertAfter(bar);
  43. A._posSplit = A[0][opts.pxSplit] - evt[opts.eventPos];
  44. $(document)
  45. .bind("mousemove", doSplitMouse)
  46. .bind("mouseup", endSplitMouse);
  47. }
  48. function doSplitMouse(evt) {
  49. var newPos = A._posSplit+evt[opts.eventPos];
  50. if ( opts.outline ) {
  51. newPos = Math.max(0, Math.min(newPos, splitter._DA - bar._DA));
  52. bar.css(opts.origin, newPos);
  53. } else
  54. resplit(newPos);
  55. }
  56. function endSplitMouse(evt) {
  57. $('div.splitterMask').remove();
  58. bar.removeClass(opts.activeClass);
  59. var newPos = A._posSplit+evt[opts.eventPos];
  60. if ( opts.outline ) {
  61. zombie.remove(); zombie = null;
  62. resplit(newPos);
  63. }
  64. panes.css("-webkit-user-select", "text"); // let Safari select text again
  65. $(document)
  66. .unbind("mousemove", doSplitMouse)
  67. .unbind("mouseup", endSplitMouse);
  68. }
  69. function resplit(newPos) {
  70. // Constrain new splitbar position to fit pane size limits
  71. newPos = Math.max(A._min, splitter._DA - B._max,
  72. Math.min(newPos, A._max, splitter._DA - bar._DA - B._min));
  73. // Resize/position the two panes
  74. bar._DA = bar[0][opts.pxSplit]; // bar size may change during dock
  75. var posOffset = bar.is(':visible') ? bar._DA - 1 : 0;
  76. bar.css(opts.origin, newPos - posOffset).css(opts.fixed, splitter._DF);
  77. A.css(opts.origin, 0).css(opts.split, newPos).css(opts.fixed, splitter._DF);
  78. B.css(opts.origin, newPos + bar._DA - posOffset)
  79. .css(opts.split, splitter._DA-bar._DA-newPos).css(opts.fixed, splitter._DF);
  80. // IE fires resize for us; all others pay cash
  81. if ( !IE_10_AND_BELOW )
  82. panes.trigger("resize");
  83. }
  84. function dimSum(jq, dims) {
  85. // Opera returns -1 for missing min/max width, turn into 0
  86. var sum = 0;
  87. for ( var i=1; i < arguments.length; i++ )
  88. sum += Math.max(parseInt(jq.css(arguments[i])) || 0, 0);
  89. return sum;
  90. }
  91. // Determine settings based on incoming opts, element classes, and defaults
  92. var vh = (args.splitHorizontal? 'h' : args.splitVertical? 'v' : args.type) || 'v';
  93. var opts = $.extend({
  94. activeClass: 'active', // class name for active splitter
  95. pxPerKey: 8, // splitter px moved per keypress
  96. tabIndex: 0, // tab order indicator
  97. accessKey: '' // accessKey for splitbar
  98. },{
  99. v: { // Vertical splitters:
  100. keyLeft: 39, keyRight: 37, cursor: "col-resize",
  101. splitbarClass: "vsplitbar", outlineClass: "voutline",
  102. type: 'v', eventPos: "pageX", origin: "left",
  103. split: "width", pxSplit: "offsetWidth", side1: "Left", side2: "Right",
  104. fixed: "height", pxFixed: "offsetHeight", side3: "Top", side4: "Bottom"
  105. },
  106. h: { // Horizontal splitters:
  107. keyTop: 40, keyBottom: 38, cursor: "row-resize",
  108. splitbarClass: "hsplitbar", outlineClass: "houtline",
  109. type: 'h', eventPos: "pageY", origin: "top",
  110. split: "height", pxSplit: "offsetHeight", side1: "Top", side2: "Bottom",
  111. fixed: "width", pxFixed: "offsetWidth", side3: "Left", side4: "Right"
  112. }
  113. }[vh], args);
  114. // Create jQuery object closures for splitter and both panes
  115. var splitter = $(this).css({position: "relative"});
  116. var panes = $(">*", splitter[0]).css({
  117. position: "absolute", // positioned inside splitter container
  118. "z-index": "1", // splitbar is positioned above
  119. "-moz-outline-style": "none" // don't show dotted outline
  120. });
  121. var A = $(panes[0]); // left or top
  122. var B = $(panes[1]); // right or bottom
  123. // Focuser element, provides keyboard support; title is shown by Opera accessKeys
  124. var focuser = $('<a href="javascript:void(0)"></a>')
  125. .attr({accessKey: opts.accessKey, tabIndex: opts.tabIndex, title: opts.splitbarClass})
  126. //.bind($.browser.opera?"click":"focus", function(){ this.focus(); bar.addClass(opts.activeClass) })
  127. .bind("focus", function () { this.focus(); bar.addClass(opts.activeClass) })
  128. .bind("keydown", function(e){
  129. var key = e.which || e.keyCode;
  130. var dir = key==opts["key"+opts.side1]? 1 : key==opts["key"+opts.side2]? -1 : 0;
  131. if ( dir )
  132. resplit(A[0][opts.pxSplit]+dir*opts.pxPerKey, false);
  133. })
  134. .bind("blur", function(){ bar.removeClass(opts.activeClass) });
  135. // Splitbar element, can be already in the doc or we create one
  136. var bar = $(panes[2] || '<div></div>')
  137. .insertAfter(A).css("z-index", "100").append(focuser)
  138. .attr({"class": opts.splitbarClass, unselectable: "on"})
  139. .css({position: "absolute", "user-select": "none", "-webkit-user-select": "none",
  140. "-khtml-user-select": "none", "-moz-user-select": "none", "top": "0px"})
  141. .bind("mousedown", startSplitMouse);
  142. // Use our cursor unless the style specifies a non-default cursor
  143. if ( /^(auto|default|)$/.test(bar.css("cursor")) )
  144. bar.css("cursor", opts.cursor);
  145. // Cache several dimensions for speed, rather than re-querying constantly
  146. bar._DA = bar[0][opts.pxSplit];
  147. splitter._PBF = $.boxModel? dimSum(splitter, "border"+opts.side3+"Width", "border"+opts.side4+"Width") : 0;
  148. splitter._PBA = $.boxModel? dimSum(splitter, "border"+opts.side1+"Width", "border"+opts.side2+"Width") : 0;
  149. A._pane = opts.side1;
  150. B._pane = opts.side2;
  151. $.each([A,B], function(){
  152. this._min = opts["min"+this._pane] || dimSum(this, "min-"+opts.split);
  153. this._max = opts["max"+this._pane] || dimSum(this, "max-"+opts.split) || 9999;
  154. this._init = opts["size"+this._pane]===true ?
  155. parseInt($.curCSS(this[0],opts.split)) : opts["size"+this._pane];
  156. });
  157. // Determine initial position, get from cookie if specified
  158. var initPos = A._init;
  159. if ( !isNaN(B._init) ) // recalc initial B size as an offset from the top or left side
  160. initPos = splitter[0][opts.pxSplit] - splitter._PBA - B._init - bar._DA;
  161. if ( opts.cookie ) {
  162. if ( !$.cookie )
  163. alert('jQuery.splitter(): jQuery cookie plugin required');
  164. var ckpos = parseInt($.cookie(opts.cookie));
  165. if ( !isNaN(ckpos) )
  166. initPos = ckpos;
  167. $(window).bind("unload", function(){
  168. var state = String(bar.css(opts.origin)); // current location of splitbar
  169. $.cookie(opts.cookie, state, {expires: opts.cookieExpires || 365,
  170. path: opts.cookiePath || document.location.pathname});
  171. });
  172. }
  173. if ( isNaN(initPos) ) // King Solomon's algorithm
  174. initPos = Math.round((splitter[0][opts.pxSplit] - splitter._PBA - bar._DA)/2);
  175. // Resize event propagation and splitter sizing
  176. if ( opts.anchorToWindow ) {
  177. // Account for margin or border on the splitter container and enforce min height
  178. splitter._hadjust = dimSum(splitter, "borderTopWidth", "borderBottomWidth", "marginBottom");
  179. splitter._hmin = Math.max(dimSum(splitter, "minHeight"), 20);
  180. $(window).bind("resize", function(){
  181. var top = splitter.offset().top;
  182. var wh = $(window).height();
  183. splitter.css("height", Math.max(wh-top-splitter._hadjust, splitter._hmin)+"px");
  184. if ( !IE_10_AND_BELOW ) splitter.trigger("resize");
  185. }).trigger("resize");
  186. }
  187. else if ( opts.resizeToWidth && !IE_10_AND_BELOW )
  188. $(window).bind("resize", function(){
  189. splitter.trigger("resize");
  190. });
  191. // Resize event handler; triggered immediately to set initial position
  192. splitter.bind("resize", function(e, size){
  193. // Custom events bubble in jQuery 1.3; don't Yo Dawg
  194. if ( e.target != this ) return;
  195. // Determine new width/height of splitter container
  196. splitter._DF = splitter[0][opts.pxFixed] - splitter._PBF;
  197. splitter._DA = splitter[0][opts.pxSplit] - splitter._PBA;
  198. // Bail if splitter isn't visible or content isn't there yet
  199. if ( splitter._DF <= 0 || splitter._DA <= 0 ) return;
  200. // Re-divvy the adjustable dimension; maintain size of the preferred pane
  201. resplit(!isNaN(size)? size : (!(opts.sizeRight||opts.sizeBottom)? A[0][opts.pxSplit] :
  202. splitter._DA-B[0][opts.pxSplit]-bar._DA));
  203. }).trigger("resize" , [initPos]);
  204. });
  205. };
  206. })(jQuery);