splitter.js.orig 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  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. bar.css(opts.origin, newPos).css(opts.fixed, splitter._DF);
  76. A.css(opts.origin, 0).css(opts.split, newPos).css(opts.fixed, splitter._DF);
  77. B.css(opts.origin, newPos+bar._DA)
  78. .css(opts.split, splitter._DA-bar._DA-newPos).css(opts.fixed, splitter._DF);
  79. // IE fires resize for us; all others pay cash
  80. if ( !$.browser.msie )
  81. panes.trigger("resize");
  82. }
  83. function dimSum(jq, dims) {
  84. // Opera returns -1 for missing min/max width, turn into 0
  85. var sum = 0;
  86. for ( var i=1; i < arguments.length; i++ )
  87. sum += Math.max(parseInt(jq.css(arguments[i])) || 0, 0);
  88. return sum;
  89. }
  90. // Determine settings based on incoming opts, element classes, and defaults
  91. var vh = (args.splitHorizontal? 'h' : args.splitVertical? 'v' : args.type) || 'v';
  92. var opts = $.extend({
  93. activeClass: 'active', // class name for active splitter
  94. pxPerKey: 8, // splitter px moved per keypress
  95. tabIndex: 0, // tab order indicator
  96. accessKey: '' // accessKey for splitbar
  97. },{
  98. v: { // Vertical splitters:
  99. keyLeft: 39, keyRight: 37, cursor: "col-resize",
  100. splitbarClass: "vsplitbar", outlineClass: "voutline",
  101. type: 'v', eventPos: "pageX", origin: "left",
  102. split: "width", pxSplit: "offsetWidth", side1: "Left", side2: "Right",
  103. fixed: "height", pxFixed: "offsetHeight", side3: "Top", side4: "Bottom"
  104. },
  105. h: { // Horizontal splitters:
  106. keyTop: 40, keyBottom: 38, cursor: "row-resize",
  107. splitbarClass: "hsplitbar", outlineClass: "houtline",
  108. type: 'h', eventPos: "pageY", origin: "top",
  109. split: "height", pxSplit: "offsetHeight", side1: "Top", side2: "Bottom",
  110. fixed: "width", pxFixed: "offsetWidth", side3: "Left", side4: "Right"
  111. }
  112. }[vh], args);
  113. // Create jQuery object closures for splitter and both panes
  114. var splitter = $(this).css({position: "relative"});
  115. var panes = $(">*", splitter[0]).css({
  116. position: "absolute", // positioned inside splitter container
  117. "z-index": "1", // splitbar is positioned above
  118. "-moz-outline-style": "none" // don't show dotted outline
  119. });
  120. var A = $(panes[0]); // left or top
  121. var B = $(panes[1]); // right or bottom
  122. // Focuser element, provides keyboard support; title is shown by Opera accessKeys
  123. var focuser = $('<a href="javascript:void(0)"></a>')
  124. .attr({accessKey: opts.accessKey, tabIndex: opts.tabIndex, title: opts.splitbarClass})
  125. .bind($.browser.opera?"click":"focus", function(){ this.focus(); bar.addClass(opts.activeClass) })
  126. .bind("keydown", function(e){
  127. var key = e.which || e.keyCode;
  128. var dir = key==opts["key"+opts.side1]? 1 : key==opts["key"+opts.side2]? -1 : 0;
  129. if ( dir )
  130. resplit(A[0][opts.pxSplit]+dir*opts.pxPerKey, false);
  131. })
  132. .bind("blur", function(){ bar.removeClass(opts.activeClass) });
  133. // Splitbar element, can be already in the doc or we create one
  134. var bar = $(panes[2] || '<div></div>')
  135. .insertAfter(A).css("z-index", "100").append(focuser)
  136. .attr({"class": opts.splitbarClass, unselectable: "on"})
  137. .css({position: "absolute", "user-select": "none", "-webkit-user-select": "none",
  138. "-khtml-user-select": "none", "-moz-user-select": "none", "top": "0px"})
  139. .bind("mousedown", startSplitMouse);
  140. // Use our cursor unless the style specifies a non-default cursor
  141. if ( /^(auto|default|)$/.test(bar.css("cursor")) )
  142. bar.css("cursor", opts.cursor);
  143. // Cache several dimensions for speed, rather than re-querying constantly
  144. bar._DA = bar[0][opts.pxSplit];
  145. splitter._PBF = $.boxModel? dimSum(splitter, "border"+opts.side3+"Width", "border"+opts.side4+"Width") : 0;
  146. splitter._PBA = $.boxModel? dimSum(splitter, "border"+opts.side1+"Width", "border"+opts.side2+"Width") : 0;
  147. A._pane = opts.side1;
  148. B._pane = opts.side2;
  149. $.each([A,B], function(){
  150. this._min = opts["min"+this._pane] || dimSum(this, "min-"+opts.split);
  151. this._max = opts["max"+this._pane] || dimSum(this, "max-"+opts.split) || 9999;
  152. this._init = opts["size"+this._pane]===true ?
  153. parseInt($.curCSS(this[0],opts.split)) : opts["size"+this._pane];
  154. });
  155. // Determine initial position, get from cookie if specified
  156. var initPos = A._init;
  157. if ( !isNaN(B._init) ) // recalc initial B size as an offset from the top or left side
  158. initPos = splitter[0][opts.pxSplit] - splitter._PBA - B._init - bar._DA;
  159. if ( opts.cookie ) {
  160. if ( !$.cookie )
  161. alert('jQuery.splitter(): jQuery cookie plugin required');
  162. var ckpos = parseInt($.cookie(opts.cookie));
  163. if ( !isNaN(ckpos) )
  164. initPos = ckpos;
  165. $(window).bind("unload", function(){
  166. var state = String(bar.css(opts.origin)); // current location of splitbar
  167. $.cookie(opts.cookie, state, {expires: opts.cookieExpires || 365,
  168. path: opts.cookiePath || document.location.pathname});
  169. });
  170. }
  171. if ( isNaN(initPos) ) // King Solomon's algorithm
  172. initPos = Math.round((splitter[0][opts.pxSplit] - splitter._PBA - bar._DA)/2);
  173. // Resize event propagation and splitter sizing
  174. if ( opts.anchorToWindow ) {
  175. // Account for margin or border on the splitter container and enforce min height
  176. splitter._hadjust = dimSum(splitter, "borderTopWidth", "borderBottomWidth", "marginBottom");
  177. splitter._hmin = Math.max(dimSum(splitter, "minHeight"), 20);
  178. $(window).bind("resize", function(){
  179. var top = splitter.offset().top;
  180. var wh = $(window).height();
  181. splitter.css("height", Math.max(wh-top-splitter._hadjust, splitter._hmin)+"px");
  182. if ( !$.browser.msie ) splitter.trigger("resize");
  183. }).trigger("resize");
  184. }
  185. else if ( opts.resizeToWidth && !$.browser.msie )
  186. $(window).bind("resize", function(){
  187. splitter.trigger("resize");
  188. });
  189. // Resize event handler; triggered immediately to set initial position
  190. splitter.bind("resize", function(e, size){
  191. // Custom events bubble in jQuery 1.3; don't Yo Dawg
  192. if ( e.target != this ) return;
  193. // Determine new width/height of splitter container
  194. splitter._DF = splitter[0][opts.pxFixed] - splitter._PBF;
  195. splitter._DA = splitter[0][opts.pxSplit] - splitter._PBA;
  196. // Bail if splitter isn't visible or content isn't there yet
  197. if ( splitter._DF <= 0 || splitter._DA <= 0 ) return;
  198. // Re-divvy the adjustable dimension; maintain size of the preferred pane
  199. resplit(!isNaN(size)? size : (!(opts.sizeRight||opts.sizeBottom)? A[0][opts.pxSplit] :
  200. splitter._DA-B[0][opts.pxSplit]-bar._DA));
  201. }).trigger("resize" , [initPos]);
  202. });
  203. };
  204. })(jQuery);