splitter.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  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("keydown", function(e){
  128. var key = e.which || e.keyCode;
  129. var dir = key==opts["key"+opts.side1]? 1 : key==opts["key"+opts.side2]? -1 : 0;
  130. if ( dir )
  131. resplit(A[0][opts.pxSplit]+dir*opts.pxPerKey, false);
  132. })
  133. .bind("blur", function(){ bar.removeClass(opts.activeClass) });
  134. // Splitbar element, can be already in the doc or we create one
  135. var bar = $(panes[2] || '<div></div>')
  136. .insertAfter(A).css("z-index", "100").append(focuser)
  137. .attr({"class": opts.splitbarClass, unselectable: "on"})
  138. .css({position: "absolute", "user-select": "none", "-webkit-user-select": "none",
  139. "-khtml-user-select": "none", "-moz-user-select": "none", "top": "0px"})
  140. .bind("mousedown", startSplitMouse);
  141. // Use our cursor unless the style specifies a non-default cursor
  142. if ( /^(auto|default|)$/.test(bar.css("cursor")) )
  143. bar.css("cursor", opts.cursor);
  144. // Cache several dimensions for speed, rather than re-querying constantly
  145. bar._DA = bar[0][opts.pxSplit];
  146. splitter._PBF = $.boxModel? dimSum(splitter, "border"+opts.side3+"Width", "border"+opts.side4+"Width") : 0;
  147. splitter._PBA = $.boxModel? dimSum(splitter, "border"+opts.side1+"Width", "border"+opts.side2+"Width") : 0;
  148. A._pane = opts.side1;
  149. B._pane = opts.side2;
  150. $.each([A,B], function(){
  151. this._min = opts["min"+this._pane] || dimSum(this, "min-"+opts.split);
  152. this._max = opts["max"+this._pane] || dimSum(this, "max-"+opts.split) || 9999;
  153. this._init = opts["size"+this._pane]===true ?
  154. parseInt($.curCSS(this[0],opts.split)) : opts["size"+this._pane];
  155. });
  156. // Determine initial position, get from cookie if specified
  157. var initPos = A._init;
  158. if ( !isNaN(B._init) ) // recalc initial B size as an offset from the top or left side
  159. initPos = splitter[0][opts.pxSplit] - splitter._PBA - B._init - bar._DA;
  160. if ( opts.cookie ) {
  161. if ( !$.cookie )
  162. alert('jQuery.splitter(): jQuery cookie plugin required');
  163. var ckpos = parseInt($.cookie(opts.cookie));
  164. if ( !isNaN(ckpos) )
  165. initPos = ckpos;
  166. $(window).bind("unload", function(){
  167. var state = String(bar.css(opts.origin)); // current location of splitbar
  168. $.cookie(opts.cookie, state, {expires: opts.cookieExpires || 365,
  169. path: opts.cookiePath || document.location.pathname});
  170. });
  171. }
  172. if ( isNaN(initPos) ) // King Solomon's algorithm
  173. initPos = Math.round((splitter[0][opts.pxSplit] - splitter._PBA - bar._DA)/2);
  174. // Resize event propagation and splitter sizing
  175. if ( opts.anchorToWindow ) {
  176. // Account for margin or border on the splitter container and enforce min height
  177. splitter._hadjust = dimSum(splitter, "borderTopWidth", "borderBottomWidth", "marginBottom");
  178. splitter._hmin = Math.max(dimSum(splitter, "minHeight"), 20);
  179. $(window).bind("resize", function(){
  180. var top = splitter.offset().top;
  181. var wh = $(window).height();
  182. splitter.css("height", Math.max(wh-top-splitter._hadjust, splitter._hmin)+"px");
  183. if ( !IE_10_AND_BELOW ) splitter.trigger("resize");
  184. }).trigger("resize");
  185. }
  186. else if ( opts.resizeToWidth && !IE_10_AND_BELOW )
  187. $(window).bind("resize", function(){
  188. splitter.trigger("resize");
  189. });
  190. // Resize event handler; triggered immediately to set initial position
  191. splitter.bind("resize", function(e, size){
  192. // Custom events bubble in jQuery 1.3; don't Yo Dawg
  193. if ( e.target != this ) return;
  194. // Determine new width/height of splitter container
  195. splitter._DF = splitter[0][opts.pxFixed] - splitter._PBF;
  196. splitter._DA = splitter[0][opts.pxSplit] - splitter._PBA;
  197. // Bail if splitter isn't visible or content isn't there yet
  198. if ( splitter._DF <= 0 || splitter._DA <= 0 ) return;
  199. // Re-divvy the adjustable dimension; maintain size of the preferred pane
  200. resplit(!isNaN(size)? size : (!(opts.sizeRight||opts.sizeBottom)? A[0][opts.pxSplit] :
  201. splitter._DA-B[0][opts.pxSplit]-bar._DA));
  202. }).trigger("resize" , [initPos]);
  203. });
  204. };
  205. })(jQuery);