+ // |

...

+ // |

This is some text

+ // || ... + // |

+ // + // duration: Integer + // Amount of time (in ms) it takes to slide panes + duration: 250, + + _verticalSpace: 0, + + postCreate: function(){ + this.domNode.style.overflow="hidden"; + this.inherited("postCreate",arguments); + dijit.setWaiRole(this.domNode, "tablist"); + dojo.addClass(this.domNode,"dijitAccordionContainer"); + }, + + startup: function(){ + if(this._started){ return; } + this.inherited("startup",arguments); + if(this.selectedChildWidget){ + var style = this.selectedChildWidget.containerNode.style; + style.display = ""; + style.overflow = "auto"; + this.selectedChildWidget._setSelectedState(true); + } + }, + + layout: function(){ + // summary: + // Set the height of the open pane based on what room remains + + // get cumulative height of all the title bars, and figure out which pane is open + var totalCollapsedHeight = 0; + var openPane = this.selectedChildWidget; + dojo.forEach(this.getChildren(), function(child){ + totalCollapsedHeight += child.getTitleHeight(); + }); + var mySize = this._contentBox; + this._verticalSpace = (mySize.h - totalCollapsedHeight); + if(openPane){ + openPane.containerNode.style.height = this._verticalSpace + "px"; +/*** +TODO: this is wrong. probably you wanted to call resize on the SplitContainer +inside the AccordionPane?? + if(openPane.resize){ + openPane.resize({h: this._verticalSpace}); + } +***/ + } + }, + + _setupChild: function(/*Widget*/ page){ + // Summary: prepare the given child + return page; + }, + + _transition: function(/*Widget?*/newWidget, /*Widget?*/oldWidget){ +//TODO: should be able to replace this with calls to slideIn/slideOut + if(this._inTransition){ return; } + this._inTransition = true; + var animations = []; + var paneHeight = this._verticalSpace; + if(newWidget){ + newWidget.setSelected(true); + var newContents = newWidget.containerNode; + newContents.style.display = ""; + + animations.push(dojo.animateProperty({ + node: newContents, + duration: this.duration, + properties: { + height: { start: "1", end: paneHeight } + }, + onEnd: function(){ + newContents.style.overflow = "auto"; + } + })); + } + if(oldWidget){ + oldWidget.setSelected(false); + var oldContents = oldWidget.containerNode; + oldContents.style.overflow = "hidden"; + animations.push(dojo.animateProperty({ + node: oldContents, + duration: this.duration, + properties: { + height: { start: paneHeight, end: "1" } + }, + onEnd: function(){ + oldContents.style.display = "none"; + } + })); + } + + this._inTransition = false; + + dojo.fx.combine(animations).play(); + }, + + // note: we are treating the container as controller here + _onKeyPress: function(/*Event*/ e){ + if(this.disabled || e.altKey || !(e._dijitWidget || e.ctrlKey)){ return; } + var k = dojo.keys; + var fromTitle = e._dijitWidget; + switch(e.keyCode){ + case k.LEFT_ARROW: + case k.UP_ARROW: + if (fromTitle){ + this._adjacent(false)._onTitleClick(); + dojo.stopEvent(e); + } + break; + case k.PAGE_UP: + if (e.ctrlKey){ + this._adjacent(false)._onTitleClick(); + dojo.stopEvent(e); + } + break; + case k.RIGHT_ARROW: + case k.DOWN_ARROW: + if (fromTitle){ + this._adjacent(true)._onTitleClick(); + dojo.stopEvent(e); + } + break; + case k.PAGE_DOWN: + if (e.ctrlKey){ + this._adjacent(true)._onTitleClick(); + dojo.stopEvent(e); + } + break; + default: + if(e.ctrlKey && e.keyCode == k.TAB){ + this._adjacent(e._dijitWidget, !e.shiftKey)._onTitleClick(); + dojo.stopEvent(e); + } + + } + } + } +); + +dojo.declare("dijit.layout.AccordionPane", + [dijit.layout.ContentPane, dijit._Templated, dijit._Contained], + { + // summary: + // AccordionPane is a ContentPane with a title that may contain another widget. + // Nested layout widgets, such as SplitContainer, are not supported at this time. + // example: + // | see dijit.layout.AccordionContainer + + templateString:"

▲

▼

${title}

\n", + + postCreate: function(){ + this.inherited("postCreate",arguments) + dojo.setSelectable(this.titleNode, false); + this.setSelected(this.selected); + }, + + getTitleHeight: function(){ + // summary: returns the height of the title dom node + return dojo.marginBox(this.titleNode).h; // Integer + }, + + _onTitleClick: function(){ + // summary: callback when someone clicks my title + var parent = this.getParent(); + if(!parent._inTransition){ + parent.selectChild(this); + dijit.focus(this.focusNode); + } + }, + + _onTitleKeyPress: function(/*Event*/ evt){ + evt._dijitWidget = this; + return this.getParent()._onKeyPress(evt); + }, + + _setSelectedState: function(/*Boolean*/ isSelected){ + this.selected = isSelected; + dojo[(isSelected ? "addClass" : "removeClass")](this.titleNode,"dijitAccordionTitle-selected"); + this.focusNode.setAttribute("tabIndex", isSelected ? "0" : "-1"); + }, + + _handleFocus: function(/*Event*/e){ + // summary: handle the blur and focus state of this widget + dojo[(e.type=="focus" ? "addClass" : "removeClass")](this.focusNode,"dijitAccordionFocused"); + }, + + setSelected: function(/*Boolean*/ isSelected){ + // summary: change the selected state on this pane + this._setSelectedState(isSelected); + if(isSelected){ + this.onSelected(); + this._loadCheck(true); // if href specified, trigger load + } + }, + + onSelected: function(){ + // summary: called when this pane is selected + } +}); + +} diff --git a/includes/js/dijit/layout/BorderContainer.js b/includes/js/dijit/layout/BorderContainer.js new file mode 100644 index 0000000..4419fe4 --- /dev/null +++ b/includes/js/dijit/layout/BorderContainer.js @@ -0,0 +1,515 @@ +if(!dojo._hasResource["dijit.layout.BorderContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.layout.BorderContainer"] = true; +dojo.provide("dijit.layout.BorderContainer"); + +dojo.require("dijit.layout._LayoutWidget"); +dojo.require("dojo.cookie"); + +dojo.declare( + "dijit.layout.BorderContainer", +// [dijit._Widget, dijit._Container, dijit._Contained], + dijit.layout._LayoutWidget, +{ + // summary: + // Provides layout in 5 regions, a center and borders along its 4 sides. + // + // description: + // A BorderContainer is a box with a specified size (like style="width: 500px; height: 500px;"), + // that contains a child widget marked region="center" and optionally children widgets marked + // region equal to "top", "bottom", "leading", "trailing", "left" or "right". + // Children along the edges will be laid out according to width or height dimensions. The remaining + // space is designated for the center region. + // The outer size must be specified on the BorderContainer node. Width must be specified for the sides + // and height for the top and bottom, respectively. No dimensions should be specified on the center; + // it will fill the remaining space. Regions named "leading" and "trailing" may be used just like + // "left" and "right" except that they will be reversed in right-to-left environments. + // Optional splitters may be specified on the edge widgets only to make them resizable by the user. + // + // example: + // | + // |

+ // |

header text

+ // |

table of contents

+ // |

client area

+ // |

+ // + // design: String + // choose which design is used for the layout: "headline" (default) where the top and bottom extend + // the full width of the container, or "sidebar" where the left and right sides extend from top to bottom. + design: "headline", + + // liveSplitters: Boolean + // specifies whether splitters resize as you drag (true) or only upon mouseup (false) + liveSplitters: true, + + // persist: Boolean + // Save splitter positions in a cookie. + persist: false, // Boolean + + // _splitterClass: String + // Optional hook to override the default Splitter widget used by BorderContainer + _splitterClass: "dijit.layout._Splitter", + + postCreate: function(){ + this.inherited(arguments); + + this._splitters = {}; + this._splitterThickness = {}; + dojo.addClass(this.domNode, "dijitBorderContainer"); + }, + + startup: function(){ + if(this._started){ return; } + dojo.forEach(this.getChildren(), this._setupChild, this); + this.inherited(arguments); + }, + + _setupChild: function(/*Widget*/child){ + var region = child.region; + if(region){ +// dojo.addClass(child.domNode, "dijitBorderContainerPane"); + child.domNode.style.position = "absolute"; // bill says not to set this in CSS, since we can't keep others + // from destroying the class list + + var ltr = this.isLeftToRight(); + if(region == "leading"){ region = ltr ? "left" : "right"; } + if(region == "trailing"){ region = ltr ? "right" : "left"; } + + this["_"+region] = child.domNode; + this["_"+region+"Widget"] = child; + + if(child.splitter){ + var _Splitter = dojo.getObject(this._splitterClass); + var flip = {left:'right', right:'left', top:'bottom', bottom:'top', leading:'trailing', trailing:'leading'}; + var oppNodeList = dojo.query('[region=' + flip[child.region] + ']', this.domNode); + var splitter = new _Splitter({ container: this, child: child, region: region, + oppNode: oppNodeList[0], live: this.liveSplitters }); + this._splitters[region] = splitter.domNode; + dojo.place(splitter.domNode, child.domNode, "after"); + this._computeSplitterThickness(region); + } + child.region = region; + } + }, + + _computeSplitterThickness: function(region){ + var re = new RegExp("top|bottom"); + this._splitterThickness[region] = + dojo.marginBox(this._splitters[region])[(re.test(region) ? 'h' : 'w')]; + }, + + layout: function(){ + this._layoutChildren(); + }, + + addChild: function(/*Widget*/ child, /*Integer?*/ insertIndex){ + this.inherited(arguments); + this._setupChild(child); + if(this._started){ + this._layoutChildren(); //OPT + } + }, + + removeChild: function(/*Widget*/ child){ + var region = child.region; + var splitter = this._splitters[region]; + if(splitter){ + dijit.byNode(splitter).destroy(); + delete this._splitters[region]; + delete this._splitterThickness[region]; + } + this.inherited(arguments); + delete this["_"+region]; + delete this["_" +region+"Widget"]; + if(this._started){ + this._layoutChildren(child.region); + } + }, + + _layoutChildren: function(/*String?*/changedRegion){ + var sidebarLayout = (this.design == "sidebar"); + var topHeight = 0, bottomHeight = 0, leftWidth = 0, rightWidth = 0; + var topStyle = {}, leftStyle = {}, rightStyle = {}, bottomStyle = {}, + centerStyle = (this._center && this._center.style) || {}; + + var changedSide = /left|right/.test(changedRegion); + + var layoutSides = !changedRegion || (!changedSide && !sidebarLayout); + var layoutTopBottom = !changedRegion || (changedSide && sidebarLayout); + if(this._top){ + topStyle = layoutTopBottom && this._top.style; + topHeight = dojo.marginBox(this._top).h; + } + if(this._left){ + leftStyle = layoutSides && this._left.style; + leftWidth = dojo.marginBox(this._left).w; + } + if(this._right){ + rightStyle = layoutSides && this._right.style; + rightWidth = dojo.marginBox(this._right).w; + } + if(this._bottom){ + bottomStyle = layoutTopBottom && this._bottom.style; + bottomHeight = dojo.marginBox(this._bottom).h; + } + + var splitters = this._splitters; + var topSplitter = splitters.top; + var bottomSplitter = splitters.bottom; + var leftSplitter = splitters.left; + var rightSplitter = splitters.right; + var splitterThickness = this._splitterThickness; + var topSplitterThickness = splitterThickness.top || 0; + var leftSplitterThickness = splitterThickness.left || 0; + var rightSplitterThickness = splitterThickness.right || 0; + var bottomSplitterThickness = splitterThickness.bottom || 0; + + // Check for race condition where CSS hasn't finished loading, so + // the splitter width == the viewport width (#5824) + if(leftSplitterThickness > 50 || rightSplitterThickness > 50){ + setTimeout(dojo.hitch(this, function(){ + for(var region in this._splitters){ + this._computeSplitterThickness(region); + } + this._layoutChildren(); + }), 50); + return false; + } + + var splitterBounds = { + left: (sidebarLayout ? leftWidth + leftSplitterThickness: "0") + "px", + right: (sidebarLayout ? rightWidth + rightSplitterThickness: "0") + "px" + }; + + if(topSplitter){ + dojo.mixin(topSplitter.style, splitterBounds); + topSplitter.style.top = topHeight + "px"; + } + + if(bottomSplitter){ + dojo.mixin(bottomSplitter.style, splitterBounds); + bottomSplitter.style.bottom = bottomHeight + "px"; + } + + splitterBounds = { + top: (sidebarLayout ? "0" : topHeight + topSplitterThickness) + "px", + bottom: (sidebarLayout ? "0" : bottomHeight + bottomSplitterThickness) + "px" + }; + + if(leftSplitter){ + dojo.mixin(leftSplitter.style, splitterBounds); + leftSplitter.style.left = leftWidth + "px"; + } + + if(rightSplitter){ + dojo.mixin(rightSplitter.style, splitterBounds); + rightSplitter.style.right = rightWidth + "px"; + } + + dojo.mixin(centerStyle, { + top: topHeight + topSplitterThickness + "px", + left: leftWidth + leftSplitterThickness + "px", + right: rightWidth + rightSplitterThickness + "px", + bottom: bottomHeight + bottomSplitterThickness + "px" + }); + + var bounds = { + top: sidebarLayout ? "0" : centerStyle.top, + bottom: sidebarLayout ? "0" : centerStyle.bottom + }; + dojo.mixin(leftStyle, bounds); + dojo.mixin(rightStyle, bounds); + leftStyle.left = rightStyle.right = topStyle.top = bottomStyle.bottom = "0"; + if(sidebarLayout){ + topStyle.left = bottomStyle.left = leftWidth + (this.isLeftToRight() ? leftSplitterThickness : 0) + "px"; + topStyle.right = bottomStyle.right = rightWidth + (this.isLeftToRight() ? 0 : rightSplitterThickness) + "px"; + }else{ + topStyle.left = topStyle.right = bottomStyle.left = bottomStyle.right = "0"; + } + + // Nodes in IE respond to t/l/b/r, and TEXTAREA doesn't respond in any browser + var janky = dojo.isIE || dojo.some(this.getChildren(), function(child){ + return child.domNode.tagName == "TEXTAREA"; + }); + if(janky){ + // Set the size of the children the old fashioned way, by calling + // childNode.resize({h: int, w: int}) for each child node) + + var borderBox = function(n, b){ + n=dojo.byId(n); + var s = dojo.getComputedStyle(n); + if(!b){ return dojo._getBorderBox(n, s); } + var me = dojo._getMarginExtents(n, s); + dojo._setMarginBox(n, b.l, b.t, b.w + me.w, b.h + me.h, s); + return null; + }; + + var resizeWidget = function(widget, dim){ + if(widget){ + widget.resize ? widget.resize(dim) : dojo.marginBox(widget.domNode, dim); + } + }; + + // TODO: use dim passed in to resize() (see _LayoutWidget.js resize()) + // Then can make borderBox setBorderBox(), since no longer need to ever get the borderBox() size + var thisBorderBox = borderBox(this.domNode); + + var containerHeight = thisBorderBox.h; + var middleHeight = containerHeight; + if(this._top){ middleHeight -= topHeight; } + if(this._bottom){ middleHeight -= bottomHeight; } + if(topSplitter){ middleHeight -= topSplitterThickness; } + if(bottomSplitter){ middleHeight -= bottomSplitterThickness; } + var centerDim = { h: middleHeight }; + + var sidebarHeight = sidebarLayout ? containerHeight : middleHeight; + if(leftSplitter){ leftSplitter.style.height = sidebarHeight; } + if(rightSplitter){ rightSplitter.style.height = sidebarHeight; } + resizeWidget(this._leftWidget, {h: sidebarHeight}); + resizeWidget(this._rightWidget, {h: sidebarHeight}); + + var containerWidth = thisBorderBox.w; + var middleWidth = containerWidth; + if(this._left){ middleWidth -= leftWidth; } + if(this._right){ middleWidth -= rightWidth; } + if(leftSplitter){ middleWidth -= leftSplitterThickness; } + if(rightSplitter){ middleWidth -= rightSplitterThickness; } + centerDim.w = middleWidth; + + var sidebarWidth = sidebarLayout ? middleWidth : containerWidth; + if(topSplitter){ topSplitter.style.width = sidebarWidth; } + if(bottomSplitter){ bottomSplitter.style.width = sidebarWidth; } + resizeWidget(this._topWidget, {w: sidebarWidth}); + resizeWidget(this._bottomWidget, {w: sidebarWidth}); + + resizeWidget(this._centerWidget, centerDim); + }else{ + + // We've already sized the children by setting style.top/bottom/left/right... + // Now just need to call resize() on those children so they can re-layout themselves + + // TODO: calling child.resize() without an argument is bad, because it forces + // the child to query it's own size (even though this function already knows + // the size), plus which querying the size of a node right after setting it + // is known to cause problems (incorrect answer or an exception). + // This is a setback from older layout widgets, which + // don't do that. See #3399, #2678, #3624 and #2955, #1988 + + var resizeList = {}; + if(changedRegion){ + resizeList[changedRegion] = resizeList.center = true; + if(/top|bottom/.test(changedRegion) && this.design != "sidebar"){ + resizeList.left = resizeList.right = true; + }else if(/left|right/.test(changedRegion) && this.design == "sidebar"){ + resizeList.top = resizeList.bottom = true; + } + } + + dojo.forEach(this.getChildren(), function(child){ + if(child.resize && (!changedRegion || child.region in resizeList)){ + // console.log(this.id, ": resizing child id=" + child.id + " (region=" + child.region + "), style before resize is " + + // "{ t: " + child.domNode.style.top + + // ", b: " + child.domNode.style.bottom + + // ", l: " + child.domNode.style.left + + // ", r: " + child.domNode.style.right + + // ", w: " + child.domNode.style.width + + // ", h: " + child.domNode.style.height + + // "}" + // ); + child.resize(); + // console.log(this.id, ": after resize of child id=" + child.id + " (region=" + child.region + ") " + + // "{ t: " + child.domNode.style.top + + // ", b: " + child.domNode.style.bottom + + // ", l: " + child.domNode.style.left + + // ", r: " + child.domNode.style.right + + // ", w: " + child.domNode.style.width + + // ", h: " + child.domNode.style.height + + // "}" + // ); + } + }, this); + } + } +}); + +// This argument can be specified for the children of a BorderContainer. +// Since any widget can be specified as a LayoutContainer child, mix it +// into the base widget class. (This is a hack, but it's effective.) +dojo.extend(dijit._Widget, { + // region: String + // "top", "bottom", "leading", "trailing", "left", "right", "center". + // See the BorderContainer description for details on this parameter. + region: '', + + // splitter: Boolean + splitter: false, + + // minSize: Number + minSize: 0, + + // maxSize: Number + maxSize: Infinity +}); + +dojo.require("dijit._Templated"); + +dojo.declare("dijit.layout._Splitter", [ dijit._Widget, dijit._Templated ], +{ +/*===== + container: null, + child: null, + region: null, +=====*/ + + // live: Boolean + // If true, the child's size changes and the child widget is redrawn as you drag the splitter; + // otherwise, the size doesn't change until you drop the splitter (by mouse-up) + live: true, + + // summary: A draggable spacer between two items in a BorderContainer + templateString: '

', + + postCreate: function(){ + this.inherited(arguments); + this.horizontal = /top|bottom/.test(this.region); + dojo.addClass(this.domNode, "dijitSplitter" + (this.horizontal ? "H" : "V")); +// dojo.addClass(this.child.domNode, "dijitSplitterPane"); +// dojo.setSelectable(this.domNode, false); //TODO is this necessary? + + this._factor = /top|left/.test(this.region) ? 1 : -1; + this._minSize = this.child.minSize; + + this._computeMaxSize(); + //TODO: might be more accurate to recompute constraints on resize? + this.connect(this.container, "layout", dojo.hitch(this, this._computeMaxSize)); + + this._cookieName = this.container.id + "_" + this.region; + if(this.container.persist){ + // restore old size + var persistSize = dojo.cookie(this._cookieName); + if(persistSize){ + this.child.domNode.style[this.horizontal ? "height" : "width"] = persistSize; + } + } + }, + + _computeMaxSize: function(){ + var dim = this.horizontal ? 'h' : 'w'; + var available = dojo.contentBox(this.container.domNode)[dim] - (this.oppNode ? dojo.marginBox(this.oppNode)[dim] : 0); + this._maxSize = Math.min(this.child.maxSize, available); + }, + + _startDrag: function(e){ + if(!this.cover){ + this.cover = dojo.doc.createElement('div'); + dojo.addClass(this.cover, "dijitSplitterCover"); + dojo.place(this.cover, this.child.domNode, "after"); + }else{ + this.cover.style.zIndex = 1; + } + + // Safeguard in case the stop event was missed. Shouldn't be necessary if we always get the mouse up. + if(this.fake){ dojo._destroyElement(this.fake); } + if(!(this._resize = this.live)){ //TODO: disable live for IE6? + // create fake splitter to display at old position while we drag + (this.fake = this.domNode.cloneNode(true)).removeAttribute("id"); + dojo.addClass(this.domNode, "dijitSplitterShadow"); + dojo.place(this.fake, this.domNode, "after"); + } + dojo.addClass(this.domNode, "dijitSplitterActive"); + + //Performance: load data info local vars for onmousevent function closure + var factor = this._factor, + max = this._maxSize, + min = this._minSize || 10; + var axis = this.horizontal ? "pageY" : "pageX"; + var pageStart = e[axis]; + var splitterStyle = this.domNode.style; + var dim = this.horizontal ? 'h' : 'w'; + var childStart = dojo.marginBox(this.child.domNode)[dim]; + var splitterStart = parseInt(this.domNode.style[this.region]); + var resize = this._resize; + var region = this.region; + var mb = {}; + var childNode = this.child.domNode; + var layoutFunc = dojo.hitch(this.container, this.container._layoutChildren); + + var de = dojo.doc.body; + this._handlers = (this._handlers || []).concat([ + dojo.connect(de, "onmousemove", this._drag = function(e, forceResize){ + var delta = e[axis] - pageStart, + childSize = factor * delta + childStart, + boundChildSize = Math.max(Math.min(childSize, max), min); + + if(resize || forceResize){ + mb[dim] = boundChildSize; + // TODO: inefficient; we set the marginBox here and then immediately layoutFunc() needs to query it + dojo.marginBox(childNode, mb); + layoutFunc(region); + } + splitterStyle[region] = factor * delta + splitterStart + (boundChildSize - childSize) + "px"; + }), + dojo.connect(de, "onmouseup", this, "_stopDrag") + ]); + dojo.stopEvent(e); + }, + + _stopDrag: function(e){ + try{ + if(this.cover){ this.cover.style.zIndex = -1; } + if(this.fake){ dojo._destroyElement(this.fake); } + dojo.removeClass(this.domNode, "dijitSplitterActive"); + dojo.removeClass(this.domNode, "dijitSplitterShadow"); + this._drag(e); //TODO: redundant with onmousemove? + this._drag(e, true); + }finally{ + this._cleanupHandlers(); + delete this._drag; + } + + if(this.container.persist){ + dojo.cookie(this._cookieName, this.child.domNode.style[this.horizontal ? "height" : "width"]); + } + }, + + _cleanupHandlers: function(){ + dojo.forEach(this._handlers, dojo.disconnect); + delete this._handlers; + }, + + _onKeyPress: function(/*Event*/ e){ + // should we apply typematic to this? + this._resize = true; + var horizontal = this.horizontal; + var tick = 1; + var dk = dojo.keys; + switch(e.keyCode){ + case horizontal ? dk.UP_ARROW : dk.LEFT_ARROW: + tick *= -1; + break; + case horizontal ? dk.DOWN_ARROW : dk.RIGHT_ARROW: + break; + default: +// this.inherited(arguments); + return; + } + var childSize = dojo.marginBox(this.child.domNode)[ horizontal ? 'h' : 'w' ] + this._factor * tick; + var mb = {}; + mb[ this.horizontal ? "h" : "w"] = Math.max(Math.min(childSize, this._maxSize), this._minSize); + dojo.marginBox(this.child.domNode, mb); + this.container._layoutChildren(this.region); + dojo.stopEvent(e); + }, + + destroy: function(){ + this._cleanupHandlers(); + delete this.child; + delete this.container; + delete this.fake; + this.inherited(arguments); + } +}); + +} diff --git a/includes/js/dijit/layout/ContentPane.js b/includes/js/dijit/layout/ContentPane.js new file mode 100644 index 0000000..c3a4ca4 --- /dev/null +++ b/includes/js/dijit/layout/ContentPane.js @@ -0,0 +1,445 @@ +if(!dojo._hasResource["dijit.layout.ContentPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.layout.ContentPane"] = true; +dojo.provide("dijit.layout.ContentPane"); + +dojo.require("dijit._Widget"); +dojo.require("dijit.layout._LayoutWidget"); + +dojo.require("dojo.parser"); +dojo.require("dojo.string"); +dojo.requireLocalization("dijit", "loading", null, "zh,pt,da,tr,ru,ROOT,de,sv,ja,he,fi,nb,el,ar,pt-pt,cs,fr,es,ko,nl,zh-tw,pl,it,hu"); + +dojo.declare( + "dijit.layout.ContentPane", + dijit._Widget, +{ + // summary: + // A widget that acts as a Container for other widgets, and includes a ajax interface + // description: + // A widget that can be used as a standalone widget + // or as a baseclass for other widgets + // Handles replacement of document fragment using either external uri or javascript + // generated markup or DOM content, instantiating widgets within that content. + // Don't confuse it with an iframe, it only needs/wants document fragments. + // It's useful as a child of LayoutContainer, SplitContainer, or TabContainer. + // But note that those classes can contain any widget as a child. + // example: + // Some quick samples: + // To change the innerHTML use .setContent('new content') + // + // Or you can send it a NodeList, .setContent(dojo.query('div [class=selected]', userSelection)) + // please note that the nodes in NodeList will copied, not moved + // + // To do a ajax update use .setHref('url') + // + // href: String + // The href of the content that displays now. + // Set this at construction if you want to load data externally when the + // pane is shown. (Set preload=true to load it immediately.) + // Changing href after creation doesn't have any effect; see setHref(); + href: "", + + // extractContent: Boolean + // Extract visible content from inside of .... + extractContent: false, + + // parseOnLoad: Boolean + // parse content and create the widgets, if any + parseOnLoad: true, + + // preventCache: Boolean + // Cache content retreived externally + preventCache: false, + + // preload: Boolean + // Force load of data even if pane is hidden. + preload: false, + + // refreshOnShow: Boolean + // Refresh (re-download) content when pane goes from hidden to shown + refreshOnShow: false, + + // loadingMessage: String + // Message that shows while downloading + loadingMessage: "${loadingState}", + + // errorMessage: String + // Message that shows if an error occurs + errorMessage: "${errorState}", + + // isLoaded: Boolean + // Tells loading status see onLoad|onUnload for event hooks + isLoaded: false, + + // class: String + // Class name to apply to ContentPane dom nodes + // TODO: this should be called "baseClass" like in the other widgets + "class": "dijitContentPane", + + // doLayout: String/Boolean + // false - don't adjust size of children + // true - looks for the first sizable child widget (ie, having resize() method) and sets it's size to + // however big the ContentPane is (TODO: implement) + // auto - if there is a single sizable child widget (ie, having resize() method), set it's size to + // however big the ContentPane is + doLayout: "auto", + + postCreate: function(){ + // remove the title attribute so it doesn't show up when i hover + // over a node + this.domNode.title = ""; + + if(!this.containerNode){ + // make getDescendants() work + this.containerNode = this.domNode; + } + + if(this.preload){ + this._loadCheck(); + } + + var messages = dojo.i18n.getLocalization("dijit", "loading", this.lang); + this.loadingMessage = dojo.string.substitute(this.loadingMessage, messages); + this.errorMessage = dojo.string.substitute(this.errorMessage, messages); + var curRole = dijit.getWaiRole(this.domNode); + if (!curRole){ + dijit.setWaiRole(this.domNode, "group"); + } + + // for programatically created ContentPane (with tag), need to muck w/CSS + // or it's as though overflow:visible is set + dojo.addClass(this.domNode, this["class"]); + }, + + startup: function(){ + if(this._started){ return; } + if(this.doLayout != "false" && this.doLayout !== false){ + this._checkIfSingleChild(); + if(this._singleChild){ + this._singleChild.startup(); + } + } + this._loadCheck(); + this.inherited(arguments); + }, + + _checkIfSingleChild: function(){ + // summary: + // Test if we have exactly one widget as a child, and if so assume that we are a container for that widget, + // and should propogate startup() and resize() calls to it. + + // TODO: if there are two child widgets (a data store and a TabContainer, for example), + // should still find the TabContainer + var childNodes = dojo.query(">", this.containerNode || this.domNode), + childWidgets = childNodes.filter("[widgetId]"); + + if(childNodes.length == 1 && childWidgets.length == 1){ + this.isContainer = true; + this._singleChild = dijit.byNode(childWidgets[0]); + }else{ + delete this.isContainer; + delete this._singleChild; + } + }, + + refresh: function(){ + // summary: + // Force a refresh (re-download) of content, be sure to turn off cache + + // we return result of _prepareLoad here to avoid code dup. in dojox.layout.ContentPane + return this._prepareLoad(true); + }, + + setHref: function(/*String|Uri*/ href){ + // summary: + // Reset the (external defined) content of this pane and replace with new url + // Note: It delays the download until widget is shown if preload is false + // href: + // url to the page you want to get, must be within the same domain as your mainpage + this.href = href; + + // we return result of _prepareLoad here to avoid code dup. in dojox.layout.ContentPane + return this._prepareLoad(); + }, + + setContent: function(/*String|DomNode|Nodelist*/data){ + // summary: + // Replaces old content with data content, include style classes from old content + // data: + // the new Content may be String, DomNode or NodeList + // + // if data is a NodeList (or an array of nodes) nodes are copied + // so you can import nodes from another document implicitly + + // clear href so we cant run refresh and clear content + // refresh should only work if we downloaded the content + if(!this._isDownloaded){ + this.href = ""; + this._onUnloadHandler(); + } + + this._setContent(data || ""); + + this._isDownloaded = false; // must be set after _setContent(..), pathadjust in dojox.layout.ContentPane + + if(this.parseOnLoad){ + this._createSubWidgets(); + } + + if(this.doLayout != "false" && this.doLayout !== false){ + this._checkIfSingleChild(); + if(this._singleChild && this._singleChild.resize){ + this._singleChild.startup(); + this._singleChild.resize(this._contentBox || dojo.contentBox(this.containerNode || this.domNode)); + } + } + + this._onLoadHandler(); + }, + + cancel: function(){ + // summary: + // Cancels a inflight download of content + if(this._xhrDfd && (this._xhrDfd.fired == -1)){ + this._xhrDfd.cancel(); + } + delete this._xhrDfd; // garbage collect + }, + + destroy: function(){ + // if we have multiple controllers destroying us, bail after the first + if(this._beingDestroyed){ + return; + } + // make sure we call onUnload + this._onUnloadHandler(); + this._beingDestroyed = true; + this.inherited("destroy",arguments); + }, + + resize: function(size){ + dojo.marginBox(this.domNode, size); + + // Compute content box size in case we [later] need to size child + // If either height or width wasn't specified by the user, then query node for it. + // But note that setting the margin box and then immediately querying dimensions may return + // inaccurate results, so try not to depend on it. + var node = this.containerNode || this.domNode, + mb = dojo.mixin(dojo.marginBox(node), size||{}); + + this._contentBox = dijit.layout.marginBox2contentBox(node, mb); + + // If we have a single widget child then size it to fit snugly within my borders + if(this._singleChild && this._singleChild.resize){ + this._singleChild.resize(this._contentBox); + } + }, + + _prepareLoad: function(forceLoad){ + // sets up for a xhrLoad, load is deferred until widget onShow + // cancels a inflight download + this.cancel(); + this.isLoaded = false; + this._loadCheck(forceLoad); + }, + + _isShown: function(){ + // summary: returns true if the content is currently shown + if("open" in this){ + return this.open; // for TitlePane, etc. + }else{ + var node = this.domNode; + return (node.style.display != 'none') && (node.style.visibility != 'hidden'); + } + }, + + _loadCheck: function(/*Boolean*/ forceLoad){ + // call this when you change onShow (onSelected) status when selected in parent container + // it's used as a trigger for href download when this.domNode.display != 'none' + + // sequence: + // if no href -> bail + // forceLoad -> always load + // this.preload -> load when download not in progress, domNode display doesn't matter + // this.refreshOnShow -> load when download in progress bails, domNode display !='none' AND + // this.open !== false (undefined is ok), isLoaded doesn't matter + // else -> load when download not in progress, if this.open !== false (undefined is ok) AND + // domNode display != 'none', isLoaded must be false + + var displayState = this._isShown(); + + if(this.href && + (forceLoad || + (this.preload && !this._xhrDfd) || + (this.refreshOnShow && displayState && !this._xhrDfd) || + (!this.isLoaded && displayState && !this._xhrDfd) + ) + ){ + this._downloadExternalContent(); + } + }, + + _downloadExternalContent: function(){ + this._onUnloadHandler(); + + // display loading message + this._setContent( + this.onDownloadStart.call(this) + ); + + var self = this; + var getArgs = { + preventCache: (this.preventCache || this.refreshOnShow), + url: this.href, + handleAs: "text" + }; + if(dojo.isObject(this.ioArgs)){ + dojo.mixin(getArgs, this.ioArgs); + } + + var hand = this._xhrDfd = (this.ioMethod || dojo.xhrGet)(getArgs); + + hand.addCallback(function(html){ + try{ + self.onDownloadEnd.call(self); + self._isDownloaded = true; + self.setContent.call(self, html); // onload event is called from here + }catch(err){ + self._onError.call(self, 'Content', err); // onContentError + } + delete self._xhrDfd; + return html; + }); + + hand.addErrback(function(err){ + if(!hand.cancelled){ + // show error message in the pane + self._onError.call(self, 'Download', err); // onDownloadError + } + delete self._xhrDfd; + return err; + }); + }, + + _onLoadHandler: function(){ + this.isLoaded = true; + try{ + this.onLoad.call(this); + }catch(e){ + console.error('Error '+this.widgetId+' running custom onLoad code'); + } + }, + + _onUnloadHandler: function(){ + this.isLoaded = false; + this.cancel(); + try{ + this.onUnload.call(this); + }catch(e){ + console.error('Error '+this.widgetId+' running custom onUnload code'); + } + }, + + _setContent: function(cont){ + this.destroyDescendants(); + + try{ + var node = this.containerNode || this.domNode; + while(node.firstChild){ + dojo._destroyElement(node.firstChild); + } + if(typeof cont == "string"){ + // dijit.ContentPane does only minimal fixes, + // No pathAdjustments, script retrieval, style clean etc + // some of these should be available in the dojox.layout.ContentPane + if(this.extractContent){ + match = cont.match(/]*>\s*([\s\S]+)\s*<\/body>/im); + if(match){ cont = match[1]; } + } + node.innerHTML = cont; + }else{ + // domNode or NodeList + if(cont.nodeType){ // domNode (htmlNode 1 or textNode 3) + node.appendChild(cont); + }else{// nodelist or array such as dojo.Nodelist + dojo.forEach(cont, function(n){ + node.appendChild(n.cloneNode(true)); + }); + } + } + }catch(e){ + // check if a domfault occurs when we are appending this.errorMessage + // like for instance if domNode is a UL and we try append a DIV + var errMess = this.onContentError(e); + try{ + node.innerHTML = errMess; + }catch(e){ + console.error('Fatal '+this.id+' could not change content due to '+e.message, e); + } + } + }, + + _onError: function(type, err, consoleText){ + // shows user the string that is returned by on[type]Error + // overide on[type]Error and return your own string to customize + var errText = this['on' + type + 'Error'].call(this, err); + if(consoleText){ + console.error(consoleText, err); + }else if(errText){// a empty string won't change current content + this._setContent.call(this, errText); + } + }, + + _createSubWidgets: function(){ + // summary: scan my contents and create subwidgets + var rootNode = this.containerNode || this.domNode; + try{ + dojo.parser.parse(rootNode, true); + }catch(e){ + this._onError('Content', e, "Couldn't create widgets in "+this.id + +(this.href ? " from "+this.href : "")); + } + }, + + // EVENT's, should be overide-able + onLoad: function(e){ + // summary: + // Event hook, is called after everything is loaded and widgetified + }, + + onUnload: function(e){ + // summary: + // Event hook, is called before old content is cleared + }, + + onDownloadStart: function(){ + // summary: + // called before download starts + // the string returned by this function will be the html + // that tells the user we are loading something + // override with your own function if you want to change text + return this.loadingMessage; + }, + + onContentError: function(/*Error*/ error){ + // summary: + // called on DOM faults, require fault etc in content + // default is to display errormessage inside pane + }, + + onDownloadError: function(/*Error*/ error){ + // summary: + // Called when download error occurs, default is to display + // errormessage inside pane. Overide function to change that. + // The string returned by this function will be the html + // that tells the user a error happend + return this.errorMessage; + }, + + onDownloadEnd: function(){ + // summary: + // called when download is finished + } +}); + +} diff --git a/includes/js/dijit/layout/LayoutContainer.js b/includes/js/dijit/layout/LayoutContainer.js new file mode 100644 index 0000000..11b8c9f --- /dev/null +++ b/includes/js/dijit/layout/LayoutContainer.js @@ -0,0 +1,74 @@ +if(!dojo._hasResource["dijit.layout.LayoutContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.layout.LayoutContainer"] = true; +dojo.provide("dijit.layout.LayoutContainer"); + +dojo.require("dijit.layout._LayoutWidget"); + +dojo.declare("dijit.layout.LayoutContainer", + dijit.layout._LayoutWidget, + { + // summary: + // Provides Delphi-style panel layout semantics. + // + // description: + // A LayoutContainer is a box with a specified size (like style="width: 500px; height: 500px;"), + // that contains children widgets marked with "layoutAlign" of "left", "right", "bottom", "top", and "client". + // It takes it's children marked as left/top/bottom/right, and lays them out along the edges of the box, + // and then it takes the child marked "client" and puts it into the remaining space in the middle. + // + // Left/right positioning is similar to CSS's "float: left" and "float: right", + // and top/bottom positioning would be similar to "float: top" and "float: bottom", if there were such + // CSS. + // + // Note that there can only be one client element, but there can be multiple left, right, top, + // or bottom elements. + // + // example: + // | + // |

+ // |

header text

+ // |

table of contents

+ // |

client area

+ // |

+ // | + // | Lays out each child in the natural order the children occur in. + // | Basically each child is laid out into the "remaining space", where "remaining space" is initially + // | the content area of this widget, but is reduced to a smaller rectangle each time a child is added. + // + + constructor: function(){ + dojo.deprecated("dijit.layout.LayoutContainer is deprecated", "use BorderContainer instead", 2.0); + }, + + layout: function(){ + dijit.layout.layoutChildren(this.domNode, this._contentBox, this.getChildren()); + }, + + addChild: function(/*Widget*/ child, /*Integer?*/ insertIndex){ + dijit._Container.prototype.addChild.apply(this, arguments); + if(this._started){ + dijit.layout.layoutChildren(this.domNode, this._contentBox, this.getChildren()); + } + }, + + removeChild: function(/*Widget*/ widget){ + dijit._Container.prototype.removeChild.apply(this, arguments); + if(this._started){ + dijit.layout.layoutChildren(this.domNode, this._contentBox, this.getChildren()); + } + } +}); + +// This argument can be specified for the children of a LayoutContainer. +// Since any widget can be specified as a LayoutContainer child, mix it +// into the base widget class. (This is a hack, but it's effective.) +dojo.extend(dijit._Widget, { + // layoutAlign: String + // "none", "left", "right", "bottom", "top", and "client". + // See the LayoutContainer description for details on this parameter. + layoutAlign: 'none' +}); + +} diff --git a/includes/js/dijit/layout/LinkPane.js b/includes/js/dijit/layout/LinkPane.js new file mode 100644 index 0000000..cddaaee --- /dev/null +++ b/includes/js/dijit/layout/LinkPane.js @@ -0,0 +1,36 @@ +if(!dojo._hasResource["dijit.layout.LinkPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.layout.LinkPane"] = true; +dojo.provide("dijit.layout.LinkPane"); + +dojo.require("dijit.layout.ContentPane"); +dojo.require("dijit._Templated"); + +dojo.declare("dijit.layout.LinkPane", + [dijit.layout.ContentPane, dijit._Templated], + { + // summary: + // A ContentPane that loads data remotely + // description: + // LinkPane is just a ContentPane that loads data remotely (via the href attribute), + // and has markup similar 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: '

\n\t

\n", + + // _controllerWidget: String + // An optional parameter to overrider the default TabContainer controller used. + _controllerWidget: "dijit.layout.TabController", + + postCreate: function(){ + this.inherited(arguments); + // create the tab list that will have a tab (a.k.a. tab button) for each tab panel + var TabController = dojo.getObject(this._controllerWidget); + this.tablist = new TabController({ + id: this.id + "_tablist", + tabPosition: this.tabPosition, + doLayout: this.doLayout, + containerId: this.id + }, this.tablistNode); + }, + + _setupChild: function(/* Widget */tab){ + dojo.addClass(tab.domNode, "dijitTabPane"); + this.inherited(arguments); + return tab; // Widget + }, + + startup: function(){ + if(this._started){ return; } + + // wire up the tablist and its tabs + this.tablist.startup(); + this.inherited(arguments); + + if(dojo.isSafari){ + // sometimes safari 3.0.3 miscalculates the height of the tab labels, see #4058 + setTimeout(dojo.hitch(this, "layout"), 0); + } + + if(dojo.isIE && !this.isLeftToRight() && this.tabPosition == "right-h" && + this.tablist && this.tablist.pane2button){ + //need rectify non-closable tab in IE, only for "right-h" mode + for(var pane in this.tablist.pane2button){ + var tabButton = this.tablist.pane2button[pane]; + if(!tabButton.closeButton){ continue; } + tabButtonStyle = tabButton.closeButtonNode.style; + tabButtonStyle.position ="absolute"; + if(dojo.isIE < 7){ + tabButtonStyle.left = tabButton.domNode.offsetWidth + "px"; + }else{ + tabButtonStyle.padding = "0px"; + } + } + } + }, + + layout: function(){ + // Summary: Configure the content pane to take up all the space except for where the tabs are + if(!this.doLayout){ return; } + + // position and size the titles and the container node + var titleAlign = this.tabPosition.replace(/-h/,""); + var children = [ + { domNode: this.tablist.domNode, layoutAlign: titleAlign }, + { domNode: this.containerNode, layoutAlign: "client" } + ]; + dijit.layout.layoutChildren(this.domNode, this._contentBox, children); + + // Compute size to make each of my children. + // children[1] is the margin-box size of this.containerNode, set by layoutChildren() call above + this._containerContentBox = dijit.layout.marginBox2contentBox(this.containerNode, children[1]); + + if(this.selectedChildWidget){ + this._showChild(this.selectedChildWidget); + if(this.doLayout && this.selectedChildWidget.resize){ + this.selectedChildWidget.resize(this._containerContentBox); + } + } + }, + + destroy: function(){ + if(this.tablist){ + this.tablist.destroy(); + } + this.inherited(arguments); + } +}); + +//TODO: make private? +dojo.declare("dijit.layout.TabController", + dijit.layout.StackController, + { + // summary: + // Set of tabs (the things with titles and a close button, that you click to show a tab panel). + // description: + // Lets the user select the currently shown pane in a TabContainer or StackContainer. + // TabController also monitors the TabContainer, and whenever a pane is + // added or deleted updates itself accordingly. + + templateString: "

", + + // tabPosition: String + // Defines where tabs go relative to the content. + // "top", "bottom", "left-h", "right-h" + tabPosition: "top", + + // doLayout: Boolean + // TODOC: deprecate doLayout? not sure. + doLayout: true, + + // buttonWidget: String + // The name of the tab widget to create to correspond to each page + buttonWidget: "dijit.layout._TabButton", + + postMixInProperties: function(){ + this["class"] = "dijitTabLabels-" + this.tabPosition + (this.doLayout ? "" : " dijitTabNoLayout"); + this.inherited(arguments); + }, + +//TODO: can this be accomplished in CSS? + _rectifyRtlTabList: function(){ + //Summary: Rectify the length of all tabs in rtl, otherwise the tab lengths are different in IE + if(0 >= this.tabPosition.indexOf('-h')){ return; } + if(!this.pane2button){ return; } + + var maxLen = 0; + for(var pane in this.pane2button){ + maxLen = Math.max(maxLen, dojo.marginBox(this.pane2button[pane].innerDiv).w); + } + //unify the length of all the tabs + for(pane in this.pane2button){ + this.pane2button[pane].innerDiv.style.width = maxLen + 'px'; + } + } +}); + +dojo.declare("dijit.layout._TabButton", + dijit.layout._StackButton, + { + // summary: + // A tab (the thing you click to select a pane). + // description: + // Contains the title of the pane, and optionally a close-button to destroy the pane. + // This is an internal widget and should not be instantiated directly. + + baseClass: "dijitTab", + + templateString:"

\n\t ${!label}\n\t \n\t x\n\t \n

\n", + + postCreate: function(){ + if(this.closeButton){ + dojo.addClass(this.innerDiv, "dijitClosable"); + }else{ + this.closeButtonNode.style.display="none"; + } + this.inherited(arguments); + dojo.setSelectable(this.containerNode, false); + } +}); + +} diff --git a/includes/js/dijit/layout/_LayoutWidget.js b/includes/js/dijit/layout/_LayoutWidget.js new file mode 100644 index 0000000..3877802 --- /dev/null +++ b/includes/js/dijit/layout/_LayoutWidget.js @@ -0,0 +1,188 @@ +if(!dojo._hasResource["dijit.layout._LayoutWidget"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.layout._LayoutWidget"] = true; +dojo.provide("dijit.layout._LayoutWidget"); + +dojo.require("dijit._Widget"); +dojo.require("dijit._Container"); + +dojo.declare("dijit.layout._LayoutWidget", + [dijit._Widget, dijit._Container, dijit._Contained], + { + // summary + // Mixin for widgets that contain a list of children like SplitContainer. + // Widgets which mixin this code must define layout() to lay out the children + + isLayoutContainer: true, + + postCreate: function(){ + dojo.addClass(this.domNode, "dijitContainer"); + }, + + startup: function(){ + // summary: + // Called after all the widgets have been instantiated and their + // dom nodes have been inserted somewhere under dojo.doc.body. + // + // Widgets should override this method to do any initialization + // dependent on other widgets existing, and then call + // this superclass method to finish things off. + // + // startup() in subclasses shouldn't do anything + // size related because the size of the widget hasn't been set yet. + + if(this._started){ return; } + + dojo.forEach(this.getChildren(), function(child){ child.startup(); }); + + // If I am a top level widget + if(!this.getParent || !this.getParent()){ + // Do recursive sizing and layout of all my descendants + // (passing in no argument to resize means that it has to glean the size itself) + this.resize(); + + // since my parent isn't a layout container, and my style is width=height=100% (or something similar), + // then I need to watch when the window resizes, and size myself accordingly + // (passing in no argument to resize means that it has to glean the size itself) + this.connect(window, 'onresize', function(){this.resize();}); + } + + this.inherited(arguments); + }, + + resize: function(args){ + // summary: + // Explicitly set this widget's size (in pixels), + // and then call layout() to resize contents (and maybe adjust child widgets) + // + // args: Object? + // {w: int, h: int, l: int, t: int} + + var node = this.domNode; + + // set margin box size, unless it wasn't specified, in which case use current size + if(args){ + dojo.marginBox(node, args); + + // set offset of the node + if(args.t){ node.style.top = args.t + "px"; } + if(args.l){ node.style.left = args.l + "px"; } + } + // If either height or width wasn't specified by the user, then query node for it. + // But note that setting the margin box and then immediately querying dimensions may return + // inaccurate results, so try not to depend on it. + var mb = dojo.mixin(dojo.marginBox(node), args||{}); + +// console.log(this, ": setting size to ", mb); + + // Save the size of my content box. + this._contentBox = dijit.layout.marginBox2contentBox(node, mb); + + // Callback for widget to adjust size of it's children + this.layout(); + }, + + layout: function(){ + // summary + // Widgets override this method to size & position their contents/children. + // When this is called this._contentBox is guaranteed to be set (see resize()). + // + // This is called after startup(), and also when the widget's size has been + // changed. + } + } +); + +dijit.layout.marginBox2contentBox = function(/*DomNode*/ node, /*Object*/ mb){ + // summary: + // Given the margin-box size of a node, return it's content box size. + // Functions like dojo.contentBox() but is more reliable since it doesn't have + // to wait for the browser to compute sizes. + var cs = dojo.getComputedStyle(node); + var me=dojo._getMarginExtents(node, cs); + var pb=dojo._getPadBorderExtents(node, cs); + return { + l: dojo._toPixelValue(node, cs.paddingLeft), + t: dojo._toPixelValue(node, cs.paddingTop), + w: mb.w - (me.w + pb.w), + h: mb.h - (me.h + pb.h) + }; +}; + +(function(){ + var capitalize = function(word){ + return word.substring(0,1).toUpperCase() + word.substring(1); + }; + + var size = function(widget, dim){ + // size the child + widget.resize ? widget.resize(dim) : dojo.marginBox(widget.domNode, dim); + + // record child's size, but favor our own numbers when we have them. + // the browser lies sometimes + dojo.mixin(widget, dojo.marginBox(widget.domNode)); + dojo.mixin(widget, dim); + }; + + dijit.layout.layoutChildren = function(/*DomNode*/ container, /*Object*/ dim, /*Object[]*/ children){ + /** + * summary + * Layout a bunch of child dom nodes within a parent dom node + * container: + * parent node + * dim: + * {l, t, w, h} object specifying dimensions of container into which to place children + * children: + * an array like [ {domNode: foo, layoutAlign: "bottom" }, {domNode: bar, layoutAlign: "client"} ] + */ + + // copy dim because we are going to modify it + dim = dojo.mixin({}, dim); + + dojo.addClass(container, "dijitLayoutContainer"); + + // Move "client" elements to the end of the array for layout. a11y dictates that the author + // needs to be able to put them in the document in tab-order, but this algorithm requires that + // client be last. + children = dojo.filter(children, function(item){ return item.layoutAlign != "client"; }) + .concat(dojo.filter(children, function(item){ return item.layoutAlign == "client"; })); + + // set positions/sizes + dojo.forEach(children, function(child){ + var elm = child.domNode, + pos = child.layoutAlign; + + // set elem to upper left corner of unused space; may move it later + var elmStyle = elm.style; + elmStyle.left = dim.l+"px"; + elmStyle.top = dim.t+"px"; + elmStyle.bottom = elmStyle.right = "auto"; + + dojo.addClass(elm, "dijitAlign" + capitalize(pos)); + + // set size && adjust record of remaining space. + // note that setting the width of a

may affect it's height. + if(pos=="top" || pos=="bottom"){ + size(child, { w: dim.w }); + dim.h -= child.h; + if(pos=="top"){ + dim.t += child.h; + }else{ + elmStyle.top = dim.t + dim.h + "px"; + } + }else if(pos=="left" || pos=="right"){ + size(child, { h: dim.h }); + dim.w -= child.w; + if(pos=="left"){ + dim.l += child.w; + }else{ + elmStyle.left = dim.l + dim.w + "px"; + } + }else if(pos=="client"){ + size(child, dim); + } + }); + }; + +})(); + +} diff --git a/includes/js/dijit/layout/templates/AccordionPane.html b/includes/js/dijit/layout/templates/AccordionPane.html new file mode 100644 index 0000000..a675d3a --- /dev/null +++ b/includes/js/dijit/layout/templates/AccordionPane.html @@ -0,0 +1,11 @@ +

▲

▼

${title}

diff --git a/includes/js/dijit/layout/templates/TabContainer.html b/includes/js/dijit/layout/templates/TabContainer.html new file mode 100644 index 0000000..105e8c6 --- /dev/null +++ b/includes/js/dijit/layout/templates/TabContainer.html @@ -0,0 +1,4 @@ +

diff --git a/includes/js/dijit/layout/templates/TooltipDialog.html b/includes/js/dijit/layout/templates/TooltipDialog.html new file mode 100644 index 0000000..5925500 --- /dev/null +++ b/includes/js/dijit/layout/templates/TooltipDialog.html @@ -0,0 +1,6 @@ +

diff --git a/includes/js/dijit/layout/templates/_TabButton.html b/includes/js/dijit/layout/templates/_TabButton.html new file mode 100644 index 0000000..b7b37ac --- /dev/null +++ b/includes/js/dijit/layout/templates/_TabButton.html @@ -0,0 +1,10 @@ +

+ ${!label} + + x + +

-- cgit v1.2.3