diff --git a/layout/AccordionPane.js b/layout/AccordionPane.js deleted file mode 100644 index 51ce92172..000000000 --- a/layout/AccordionPane.js +++ /dev/null @@ -1,25 +0,0 @@ -define([ - "dojo/_base/declare", // declare - "dojo/_base/kernel", // kernel.deprecated - "./ContentPane" -], function(declare, kernel, ContentPane){ - - // module: - // dijit/layout/AccordionPane - - return declare("dijit.layout.AccordionPane", ContentPane, { - // summary: - // Deprecated widget. Use `dijit/layout/ContentPane` instead. - // tags: - // deprecated - - constructor: function(){ - kernel.deprecated("dijit.layout.AccordionPane deprecated, use ContentPane instead", "", "2.0"); - }, - - onSelected: function(){ - // summary: - // called when this pane is selected - } - }); -}); diff --git a/layout/LinkPane.js b/layout/LinkPane.js deleted file mode 100644 index cf624c010..000000000 --- a/layout/LinkPane.js +++ /dev/null @@ -1,44 +0,0 @@ -define([ - "./ContentPane", - "../_TemplatedMixin", - "dojo/_base/declare" // declare -], function(ContentPane, _TemplatedMixin, declare){ - - // module: - // dijit/layout/LinkPane - - - return declare("dijit.layout.LinkPane", [ContentPane, _TemplatedMixin], { - // summary: - // A ContentPane with an href where (when declared in markup) - // the title is specified as innerHTML rather than as a title attribute. - // description: - // LinkPane is just a ContentPane that is declared in markup similarly - // to an anchor. The anchor's body (the words between `` and ``) - // become the title of the widget (used for TabContainer, AccordionContainer, etc.) - // example: - // | my title - - // I'm using a template because the user may specify the input as - // title, in which case we need to get rid of the - // because we don't want a link. - templateString: '
', - - postMixInProperties: function(){ - // If user has specified node contents, they become the title - // (the link must be plain text) - if(this.srcNodeRef){ - this.title += this.srcNodeRef.innerHTML; - } - this.inherited(arguments); - }, - - _fillContent: function(){ - // Overrides _Templated._fillContent(). - - // _Templated._fillContent() relocates srcNodeRef innerHTML to templated container node, - // but in our case the srcNodeRef innerHTML is the title, so shouldn't be - // copied - } - }); -}); diff --git a/layout/SplitContainer.js b/layout/SplitContainer.js deleted file mode 100644 index 452fb8137..000000000 --- a/layout/SplitContainer.js +++ /dev/null @@ -1,591 +0,0 @@ -define([ - "dojo/_base/array", // array.forEach array.indexOf array.some - "dojo/cookie", // cookie - "dojo/_base/declare", // declare - "dojo/dom", // dom.setSelectable - "dojo/dom-class", // domClass.add - "dojo/dom-construct", // domConstruct.create domConstruct.destroy - "dojo/dom-geometry", // domGeometry.marginBox domGeometry.position - "dojo/dom-style", // domStyle.style - "dojo/_base/event", // event.stop - "dojo/_base/kernel", // kernel.deprecated - "dojo/_base/lang", // lang.extend lang.hitch - "dojo/on", - "dojo/sniff", // has("mozilla") - "../registry", // registry.getUniqueId() - "../_WidgetBase", - "./_LayoutWidget" -], function(array, cookie, declare, dom, domClass, domConstruct, domGeometry, domStyle, - event, kernel, lang, on, has, registry, _WidgetBase, _LayoutWidget){ - -// module: -// dijit/layout/SplitContainer - -// -// FIXME: make it prettier -// FIXME: active dragging upwards doesn't always shift other bars (direction calculation is wrong in this case) -// FIXME: sizeWidth should be a CSS attribute (at 7 because css wants it to be 7 until we fix to css) -// - -var SplitContainer = declare("dijit.layout.SplitContainer", _LayoutWidget, { - // summary: - // Deprecated. Use `dijit/layout/BorderContainer` instead. - // description: - // A Container widget with sizing handles in-between each child. - // 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. - // - // See `SplitContainer.ChildWidgetProperties` for details on the properties that can be set on - // children of a `SplitContainer`. - // tags: - // deprecated - - constructor: function(){ - kernel.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, - - // 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, - - baseClass: "dijitSplitContainer", - - postMixInProperties: function(){ - this.inherited("postMixInProperties",arguments); - this.isHorizontal = (this.orientation == 'horizontal'); - }, - - postCreate: function(){ - this.inherited(arguments); - this.sizers = []; - - // 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(has("mozilla")){ - 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.ownerDocument.createElement('div'); - this.virtualSizer = sizer; - 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); - dom.setSelectable(sizer, false); - }, - - destroy: function(){ - delete this.virtualSizer; - if(this._ownconnects){ - var h; - while(h = this._ownconnects.pop()){ h.remove(); } - } - this.inherited(arguments); - }, - startup: function(){ - if(this._started){ return; } - - array.forEach(this.getChildren(), function(child, i, children){ - // attach the children and create the draggers - this._setupChild(child); - - if(i < children.length-1){ - this._addSizer(); - } - }, this); - - if(this.persist){ - this._restoreState(); - } - - this.inherited(arguments); - }, - - _setupChild: function(/*dijit/_WidgetBase*/ child){ - this.inherited(arguments); - child.domNode.style.position = "absolute"; - domClass.add(child.domNode, "dijitSplitPane"); - }, - - _onSizerMouseDown: function(e){ - if(e.target.id){ - for(var i=0;i 1){ - this._addSizer(insertIndex); - } - - // 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; - array.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; - array.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; - } - - array.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){ - var box; - 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; - box = {w: size, h: this.paneHeight}; - if(panel.resize){ - panel.resize(box); - }else{ - domGeometry.setMarginBox(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'; - box = {w: this.paneWidth, h: size}; - if(panel.resize){ - panel.resize(box); - }else{ - domGeometry.setMarginBox(panel.domNode, box); - } - } - }, - - _moveSlider: function(slider, pos, size){ - if(this.isHorizontal){ - slider.style.left = pos + 'px'; - slider.style.top = 0; - domGeometry.setMarginBox(slider, { w: size, h: this.paneHeight }); - }else{ - slider.style.left = 0; - slider.style.top = pos + 'px'; - domGeometry.setMarginBox(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(); - - array.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; - - array.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; - array.forEach(list, function(child){ - growth = this._growPane(growth, child); - }, this); - } - }else{ - array.forEach(children, function(child){ - child.sizeActual = Math.round(totalSize * (child.sizeMin / totalMinSize)); - }); - } - }, - - beginSizing: function(e, i){ - // summary: - // Begin dragging the splitter between child[i] and child[i+1] - - var children = this.getChildren(); - - this.paneBefore = children[i]; - this.paneAfter = children[i+1]; - - this.paneBefore.sizeBeforeDrag = this.paneBefore.sizeActual; - this.paneAfter.sizeBeforeDrag = this.paneAfter.sizeActual; - this.paneAfter.positionBeforeDrag = this.paneAfter.position; - - this.isSizing = true; - this.sizingSplitter = this.sizers[i]; - this.sizingSplitter.positionBeforeDrag = domStyle.get(this.sizingSplitter,(this.isHorizontal ? "left" : "top")); - - if(!this.cover){ - this.cover = domConstruct.create('div', { - style: { - position:'absolute', - zIndex:5, - top: 0, - left: 0, - width: "100%", - height: "100%" - } - }, this.domNode); - }else{ - this.cover.style.zIndex = 5; - } - this.sizingSplitter.style.zIndex = 6; - - // startPoint is the e.pageX or e.pageY at start of drag - this.startPoint = this.lastPoint = (this.isHorizontal ? e.pageX : e.pageY); - - // Calculate maximum to the left or right that splitter is allowed to be dragged - // minDelta is negative to indicate left/upward drag where end.pageX < start.pageX. - this.maxDelta = this.paneAfter.sizeActual - this.paneAfter.sizeMin; - this.minDelta = -1 * (this.paneBefore.sizeActual - this.paneBefore.sizeMin); - - if(!this.activeSizing){ - this._showSizingLine(); - } - - // attach mouse events - this._ownconnects = [ - on(this.ownerDocument.documentElement, "mousemove", lang.hitch(this, "changeSizing")), - on(this.ownerDocument.documentElement, "mouseup", lang.hitch(this, "endSizing")) - ]; - - event.stop(e); - }, - - changeSizing: function(e){ - // summary: - // Called on mousemove while dragging the splitter - - if(!this.isSizing){ return; } - - // lastPoint is the most recent e.pageX or e.pageY during the drag - this.lastPoint = this.isHorizontal ? e.pageX : e.pageY; - var delta = Math.max(Math.min(this.lastPoint - this.startPoint, this.maxDelta), this.minDelta); - - if(this.activeSizing){ - this._updateSize(delta); - }else{ - this._moveSizingLine(delta); - } - event.stop(e); - }, - - endSizing: function(){ - if(!this.isSizing){ return; } - if(this.cover){ - this.cover.style.zIndex = -1; - } - if(!this.activeSizing){ - this._hideSizingLine(); - } - - var delta = Math.max(Math.min(this.lastPoint - this.startPoint, this.maxDelta), this.minDelta); - this._updateSize(delta); - - this.isSizing = false; - - if(this.persist){ - this._saveState(this); - } - - var h; - while(h = this._ownconnects.pop()){ h.remove(); } - }, - - _updateSize: function(/*Number*/ delta){ - // summary: - // Resets sizes of panes before and after splitter being dragged. - // Called during a drag, for active sizing, or at the end of a drag otherwise. - // delta: Number - // Change in slider position compared to start of drag. But note that - // this function may be called multiple times during drag. - - this.paneBefore.sizeActual = this.paneBefore.sizeBeforeDrag + delta; - this.paneAfter.position = this.paneAfter.positionBeforeDrag + delta; - this.paneAfter.sizeActual = this.paneAfter.sizeBeforeDrag - delta; - - array.forEach(this.getChildren(), function(child){ - child.sizeShare = child.sizeActual; - }); - - if(this._started){ - this.layout(); - } - }, - - _showSizingLine: function(){ - // summary: - // Show virtual splitter, for non-active resizing - - this._moveSizingLine(0); - - domGeometry.setMarginBox(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(/*Number*/ delta){ - // summary: - // Called for non-active resizing, to move the virtual splitter without adjusting the size of the panes - var pos = delta + this.sizingSplitter.positionBeforeDrag; - domStyle.set(this.virtualSizer,(this.isHorizontal ? "left" : "top"),pos+"px"); - }, - - _getCookieName: function(i){ - return this.id + "_" + i; - }, - - _restoreState: function(){ - array.forEach(this.getChildren(), function(child, i){ - var cookieName = this._getCookieName(i); - var cookieValue = cookie(cookieName); - if(cookieValue){ - var pos = parseInt(cookieValue); - if(typeof pos == "number"){ - child.sizeShare = pos; - } - } - }, this); - }, - - _saveState: function(){ - if(!this.persist){ - return; - } - array.forEach(this.getChildren(), function(child, i){ - cookie(this._getCookieName(i), child.sizeShare, {expires:365}); - }, this); - } -}); - -SplitContainer.ChildWidgetProperties = { - // summary: - // These properties can be specified for the children of a SplitContainer. - - // sizeMin: [deprecated] 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: [deprecated] 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 -}; - -// 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.) -// This is for the benefit of the parser. Remove for 2.0. Also, hide from doc viewer. -lang.extend(_WidgetBase, /*===== {} || =====*/ SplitContainer.ChildWidgetProperties); - -return SplitContainer; - -}); diff --git a/tests/layout/test_SplitContainer.html b/tests/layout/test_SplitContainer.html deleted file mode 100644 index c6c9d1faf..000000000 --- a/tests/layout/test_SplitContainer.html +++ /dev/null @@ -1,139 +0,0 @@ - - - - SplitContainer Widget Demo - - - - - - - - - - - - - - - -

Dijit Split Container Test - DEPRECATED!

-

dijit.layout.SplitContainer is deprecated use - BorderContainer with splitter instead -- will be removed in version: 2

-

HTML before

- -
-
- this box has three split panes -
-
- in vertical mode -
-
- without active resizing -
-
- - - - -

- -
-
- this box has two horizontal panes -
-
- with active resizing, a smaller sizer, different starting sizes and minimum sizes -
-
- -

HTML after

- -the following splitter contains two iframes, see whether the resizer works ok in this situation -
-
- -
-
- -
-
- -

Programatic Example:

-
- - -