diff options
Diffstat (limited to 'includes/js/dijit/layout/SplitContainer.js')
| -rw-r--r-- | includes/js/dijit/layout/SplitContainer.js | 553 |
1 files changed, 0 insertions, 553 deletions
diff --git a/includes/js/dijit/layout/SplitContainer.js b/includes/js/dijit/layout/SplitContainer.js deleted file mode 100644 index 671d1fc..0000000 --- a/includes/js/dijit/layout/SplitContainer.js +++ /dev/null @@ -1,553 +0,0 @@ -if(!dojo._hasResource["dijit.layout.SplitContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. -dojo._hasResource["dijit.layout.SplitContainer"] = true; -dojo.provide("dijit.layout.SplitContainer"); - -// -// FIXME: make it prettier -// FIXME: active dragging upwards doesn't always shift other bars (direction calculation is wrong in this case) -// - -dojo.require("dojo.cookie"); -dojo.require("dijit.layout._LayoutWidget"); - -dojo.declare("dijit.layout.SplitContainer", - dijit.layout._LayoutWidget, - { - // summary: - // A Container widget with sizing handles in-between each child - // description: - // Contains multiple children widgets, all of which are displayed side by side - // (either horizontally or vertically); there's a bar between each of the children, - // and you can adjust the relative size of each child by dragging the bars. - // - // You must specify a size (width and height) for the SplitContainer. - - constructor: function(){ - dojo.deprecated("dijit.layout.SplitContainer is deprecated", "use BorderContainer with splitter instead", 2.0); - }, - - // activeSizing: Boolean - // If true, the children's size changes as you drag the bar; - // otherwise, the sizes don't change until you drop the bar (by mouse-up) - activeSizing: false, - - // sizerWidth: Integer - // Size in pixels of the bar between each child - sizerWidth: 7, // FIXME: this should be a CSS attribute (at 7 because css wants it to be 7 until we fix to css) - - // orientation: String - // either 'horizontal' or vertical; indicates whether the children are - // arranged side-by-side or up/down. - orientation: 'horizontal', - - // persist: Boolean - // Save splitter positions in a cookie - persist: true, - - postMixInProperties: function(){ - this.inherited("postMixInProperties",arguments); - this.isHorizontal = (this.orientation == 'horizontal'); - }, - - postCreate: function(){ - this.inherited("postCreate",arguments); - this.sizers = []; - dojo.addClass(this.domNode, "dijitSplitContainer"); - // overflow has to be explicitly hidden for splitContainers using gekko (trac #1435) - // to keep other combined css classes from inadvertantly making the overflow visible - if(dojo.isMozilla){ - this.domNode.style.overflow = '-moz-scrollbars-none'; // hidden doesn't work - } - - // create the fake dragger - if(typeof this.sizerWidth == "object"){ - try{ //FIXME: do this without a try/catch - this.sizerWidth = parseInt(this.sizerWidth.toString()); - }catch(e){ this.sizerWidth = 7; } - } - var sizer = this.virtualSizer = dojo.doc.createElement('div'); - sizer.style.position = 'relative'; - - // #1681: work around the dreaded 'quirky percentages in IE' layout bug - // If the splitcontainer's dimensions are specified in percentages, it - // will be resized when the virtualsizer is displayed in _showSizingLine - // (typically expanding its bounds unnecessarily). This happens because - // we use position: relative for .dijitSplitContainer. - // The workaround: instead of changing the display style attribute, - // switch to changing the zIndex (bring to front/move to back) - - sizer.style.zIndex = 10; - sizer.className = this.isHorizontal ? 'dijitSplitContainerVirtualSizerH' : 'dijitSplitContainerVirtualSizerV'; - this.domNode.appendChild(sizer); - dojo.setSelectable(sizer, false); - }, - - destroy: function(){ - delete this.virtualSizer; - dojo.forEach(this._ownconnects, dojo.disconnect); - this.inherited(arguments); - }, - startup: function(){ - if(this._started){ return; } - - dojo.forEach(this.getChildren(), function(child, i, children){ - // attach the children and create the draggers - this._injectChild(child); - - if(i < children.length-1){ - this._addSizer(); - } - }, this); - - if(this.persist){ - this._restoreState(); - } - - this.inherited(arguments); - }, - - _injectChild: function(child){ - child.domNode.style.position = "absolute"; - dojo.addClass(child.domNode, "dijitSplitPane"); - }, - - _addSizer: function(){ - var i = this.sizers.length; - - // TODO: use a template for this!!! - var sizer = this.sizers[i] = dojo.doc.createElement('div'); - this.domNode.appendChild(sizer); - - sizer.className = this.isHorizontal ? 'dijitSplitContainerSizerH' : 'dijitSplitContainerSizerV'; - - // add the thumb div - var thumb = dojo.doc.createElement('div'); - thumb.className = 'thumb'; - sizer.appendChild(thumb); - - // FIXME: are you serious? why aren't we using mover start/stop combo? - var self = this; - var handler = (function(){ var sizer_i = i; return function(e){ self.beginSizing(e, sizer_i); } })(); - this.connect(sizer, "onmousedown", handler); - - dojo.setSelectable(sizer, false); - }, - - removeChild: function(widget){ - // summary: Remove sizer, but only if widget is really our child and - // we have at least one sizer to throw away - if(this.sizers.length){ - var i=dojo.indexOf(this.getChildren(), widget) - if(i != -1){ - if(i==this.sizers.length){ - i--; - } - dojo._destroyElement(this.sizers[i]); - this.sizers.splice(i,1); - } - } - - // Remove widget and repaint - this.inherited(arguments); - if(this._started){ - this.layout(); - } - }, - - addChild: function(/*Widget*/ child, /*Integer?*/ insertIndex){ - // summary: Add a child widget to the container - // child: a widget to add - // insertIndex: postion in the "stack" to add the child widget - - this.inherited("addChild",arguments); - - if(this._started){ - // Do the stuff that startup() does for each widget - this._injectChild(child); - var children = this.getChildren(); - if(children.length > 1){ - this._addSizer(); - } - - // and then reposition (ie, shrink) every pane to make room for the new guy - this.layout(); - } - }, - - layout: function(){ - // summary: - // Do layout of panels - - // base class defines this._contentBox on initial creation and also - // on resize - this.paneWidth = this._contentBox.w; - this.paneHeight = this._contentBox.h; - - var children = this.getChildren(); - if(!children.length){ return; } - - // - // calculate space - // - - var space = this.isHorizontal ? this.paneWidth : this.paneHeight; - if(children.length > 1){ - space -= this.sizerWidth * (children.length - 1); - } - - // - // calculate total of SizeShare values - // - var outOf = 0; - dojo.forEach(children, function(child){ - outOf += child.sizeShare; - }); - - // - // work out actual pixels per sizeshare unit - // - var pixPerUnit = space / outOf; - - // - // set the SizeActual member of each pane - // - var totalSize = 0; - dojo.forEach(children.slice(0, children.length - 1), function(child){ - var size = Math.round(pixPerUnit * child.sizeShare); - child.sizeActual = size; - totalSize += size; - }); - - children[children.length-1].sizeActual = space - totalSize; - - // - // make sure the sizes are ok - // - this._checkSizes(); - - // - // now loop, positioning each pane and letting children resize themselves - // - - var pos = 0; - var size = children[0].sizeActual; - this._movePanel(children[0], pos, size); - children[0].position = pos; - pos += size; - - // if we don't have any sizers, our layout method hasn't been called yet - // so bail until we are called..TODO: REVISIT: need to change the startup - // algorithm to guaranteed the ordering of calls to layout method - if(!this.sizers){ - return; - } - - dojo.some(children.slice(1), function(child, i){ - // error-checking - if(!this.sizers[i]){ - return true; - } - // first we position the sizing handle before this pane - this._moveSlider(this.sizers[i], pos, this.sizerWidth); - this.sizers[i].position = pos; - pos += this.sizerWidth; - - size = child.sizeActual; - this._movePanel(child, pos, size); - child.position = pos; - pos += size; - }, this); - }, - - _movePanel: function(panel, pos, size){ - if(this.isHorizontal){ - panel.domNode.style.left = pos + 'px'; // TODO: resize() takes l and t parameters too, don't need to set manually - panel.domNode.style.top = 0; - var box = {w: size, h: this.paneHeight}; - if(panel.resize){ - panel.resize(box); - }else{ - dojo.marginBox(panel.domNode, box); - } - }else{ - panel.domNode.style.left = 0; // TODO: resize() takes l and t parameters too, don't need to set manually - panel.domNode.style.top = pos + 'px'; - var box = {w: this.paneWidth, h: size}; - if(panel.resize){ - panel.resize(box); - }else{ - dojo.marginBox(panel.domNode, box); - } - } - }, - - _moveSlider: function(slider, pos, size){ - if(this.isHorizontal){ - slider.style.left = pos + 'px'; - slider.style.top = 0; - dojo.marginBox(slider, { w: size, h: this.paneHeight }); - }else{ - slider.style.left = 0; - slider.style.top = pos + 'px'; - dojo.marginBox(slider, { w: this.paneWidth, h: size }); - } - }, - - _growPane: function(growth, pane){ - if(growth > 0){ - if(pane.sizeActual > pane.sizeMin){ - if((pane.sizeActual - pane.sizeMin) > growth){ - - // stick all the growth in this pane - pane.sizeActual = pane.sizeActual - growth; - growth = 0; - }else{ - // put as much growth in here as we can - growth -= pane.sizeActual - pane.sizeMin; - pane.sizeActual = pane.sizeMin; - } - } - } - return growth; - }, - - _checkSizes: function(){ - - var totalMinSize = 0; - var totalSize = 0; - var children = this.getChildren(); - - dojo.forEach(children, function(child){ - totalSize += child.sizeActual; - totalMinSize += child.sizeMin; - }); - - // only make adjustments if we have enough space for all the minimums - - if(totalMinSize <= totalSize){ - - var growth = 0; - - dojo.forEach(children, function(child){ - if(child.sizeActual < child.sizeMin){ - growth += child.sizeMin - child.sizeActual; - child.sizeActual = child.sizeMin; - } - }); - - if(growth > 0){ - var list = this.isDraggingLeft ? children.reverse() : children; - dojo.forEach(list, function(child){ - growth = this._growPane(growth, child); - }, this); - } - }else{ - dojo.forEach(children, function(child){ - child.sizeActual = Math.round(totalSize * (child.sizeMin / totalMinSize)); - }); - } - }, - - beginSizing: function(e, i){ - var children = this.getChildren(); - this.paneBefore = children[i]; - this.paneAfter = children[i+1]; - - this.isSizing = true; - this.sizingSplitter = this.sizers[i]; - - if(!this.cover){ - this.cover = dojo.doc.createElement('div'); - this.domNode.appendChild(this.cover); - var s = this.cover.style; - s.position = 'absolute'; - s.zIndex = 1; - s.top = 0; - s.left = 0; - s.width = "100%"; - s.height = "100%"; - }else{ - this.cover.style.zIndex = 1; - } - this.sizingSplitter.style.zIndex = 2; - - // TODO: REVISIT - we want MARGIN_BOX and core hasn't exposed that yet (but can't we use it anyway if we pay attention? we do elsewhere.) - this.originPos = dojo.coords(children[0].domNode, true); - if(this.isHorizontal){ - var client = (e.layerX ? e.layerX : e.offsetX); - var screen = e.pageX; - this.originPos = this.originPos.x; - }else{ - var client = (e.layerY ? e.layerY : e.offsetY); - var screen = e.pageY; - this.originPos = this.originPos.y; - } - this.startPoint = this.lastPoint = screen; - this.screenToClientOffset = screen - client; - this.dragOffset = this.lastPoint - this.paneBefore.sizeActual - this.originPos - this.paneBefore.position; - - if(!this.activeSizing){ - this._showSizingLine(); - } - - // - // attach mouse events - // - this._ownconnects = []; - this._ownconnects.push(dojo.connect(dojo.doc.documentElement, "onmousemove", this, "changeSizing")); - this._ownconnects.push(dojo.connect(dojo.doc.documentElement, "onmouseup", this, "endSizing")); - - dojo.stopEvent(e); - }, - - changeSizing: function(e){ - if(!this.isSizing){ return; } - this.lastPoint = this.isHorizontal ? e.pageX : e.pageY; - this.movePoint(); - if(this.activeSizing){ - this._updateSize(); - }else{ - this._moveSizingLine(); - } - dojo.stopEvent(e); - }, - - endSizing: function(e){ - if(!this.isSizing){ return; } - if(this.cover){ - this.cover.style.zIndex = -1; - } - if(!this.activeSizing){ - this._hideSizingLine(); - } - - this._updateSize(); - - this.isSizing = false; - - if(this.persist){ - this._saveState(this); - } - - dojo.forEach(this._ownconnects,dojo.disconnect); - }, - - movePoint: function(){ - - // make sure lastPoint is a legal point to drag to - var p = this.lastPoint - this.screenToClientOffset; - - var a = p - this.dragOffset; - a = this.legaliseSplitPoint(a); - p = a + this.dragOffset; - - this.lastPoint = p + this.screenToClientOffset; - }, - - legaliseSplitPoint: function(a){ - - a += this.sizingSplitter.position; - - this.isDraggingLeft = !!(a > 0); - - if(!this.activeSizing){ - var min = this.paneBefore.position + this.paneBefore.sizeMin; - if(a < min){ - a = min; - } - - var max = this.paneAfter.position + (this.paneAfter.sizeActual - (this.sizerWidth + this.paneAfter.sizeMin)); - if(a > max){ - a = max; - } - } - - a -= this.sizingSplitter.position; - - this._checkSizes(); - - return a; - }, - - _updateSize: function(){ - //FIXME: sometimes this.lastPoint is NaN - var pos = this.lastPoint - this.dragOffset - this.originPos; - - var start_region = this.paneBefore.position; - var end_region = this.paneAfter.position + this.paneAfter.sizeActual; - - this.paneBefore.sizeActual = pos - start_region; - this.paneAfter.position = pos + this.sizerWidth; - this.paneAfter.sizeActual = end_region - this.paneAfter.position; - - dojo.forEach(this.getChildren(), function(child){ - child.sizeShare = child.sizeActual; - }); - - if(this._started){ - this.layout(); - } - }, - - _showSizingLine: function(){ - - this._moveSizingLine(); - - dojo.marginBox(this.virtualSizer, - this.isHorizontal ? { w: this.sizerWidth, h: this.paneHeight } : { w: this.paneWidth, h: this.sizerWidth }); - - this.virtualSizer.style.display = 'block'; - }, - - _hideSizingLine: function(){ - this.virtualSizer.style.display = 'none'; - }, - - _moveSizingLine: function(){ - var pos = (this.lastPoint - this.startPoint) + this.sizingSplitter.position; - dojo.style(this.virtualSizer,(this.isHorizontal ? "left" : "top"),pos+"px"); - // this.virtualSizer.style[ this.isHorizontal ? "left" : "top" ] = pos + 'px'; // FIXME: remove this line if the previous is better - }, - - _getCookieName: function(i){ - return this.id + "_" + i; - }, - - _restoreState: function(){ - dojo.forEach(this.getChildren(), function(child, i){ - var cookieName = this._getCookieName(i); - var cookieValue = dojo.cookie(cookieName); - if(cookieValue){ - var pos = parseInt(cookieValue); - if(typeof pos == "number"){ - child.sizeShare = pos; - } - } - }, this); - }, - - _saveState: function(){ - dojo.forEach(this.getChildren(), function(child, i){ - dojo.cookie(this._getCookieName(i), child.sizeShare); - }, this); - } -}); - -// These arguments can be specified for the children of a SplitContainer. -// Since any widget can be specified as a SplitContainer child, mix them -// into the base widget class. (This is a hack, but it's effective.) -dojo.extend(dijit._Widget, { - // sizeMin: Integer - // Minimum size (width or height) of a child of a SplitContainer. - // The value is relative to other children's sizeShare properties. - sizeMin: 10, - - // sizeShare: Integer - // Size (width or height) of a child of a SplitContainer. - // The value is relative to other children's sizeShare properties. - // For example, if there are two children and each has sizeShare=10, then - // each takes up 50% of the available space. - sizeShare: 10 -}); - -} |