Subversion Repositories Applications.papyrus

Compare Revisions

No changes between revisions

Ignore whitespace Rev 2149 → Rev 2150

/trunk/api/js/dojo1.0/dojox/layout/ContentPane.js
New file
0,0 → 1,478
if(!dojo._hasResource["dojox.layout.ContentPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.layout.ContentPane"] = true;
dojo.provide("dojox.layout.ContentPane");
 
dojo.require("dijit.layout.ContentPane");
 
(function(){ // private scope, sort of a namespace
 
// TODO: should these methods be moved to dojox.html.cssPathAdjust or something?
 
// css at-rules must be set before any css declarations according to CSS spec
// match:
// @import 'http://dojotoolkit.org/dojo.css';
// @import 'you/never/thought/' print;
// @import url("it/would/work") tv, screen;
// @import url(/did/you/now.css);
// but not:
// @namespace dojo "http://dojotoolkit.org/dojo.css"; /* namespace URL should always be a absolute URI */
// @charset 'utf-8';
// @media print{ #menuRoot {display:none;} }
 
// we adjust all paths that dont start on '/' or contains ':'
//(?![a-z]+:|\/)
 
if(dojo.isIE){
var alphaImageLoader = /(AlphaImageLoader\([^)]*?src=(['"]))(?![a-z]+:|\/)([^\r\n;}]+?)(\2[^)]*\)\s*[;}]?)/g;
}
 
var cssPaths = /(?:(?:@import\s*(['"])(?![a-z]+:|\/)([^\r\n;{]+?)\1)|url\(\s*(['"]?)(?![a-z]+:|\/)([^\r\n;]+?)\3\s*\))([a-z, \s]*[;}]?)/g;
 
function adjustCssPaths(cssUrl, cssText){
// summary:
// adjusts relative paths in cssText to be relative to cssUrl
// a path is considered relative if it doesn't start with '/' and not contains ':'
// description:
// Say we fetch a HTML page from level1/page.html
// It has some inline CSS:
// @import "css/page.css" tv, screen;
// ...
// background-image: url(images/aplhaimage.png);
//
// as we fetched this HTML and therefore this CSS
// from level1/page.html, these paths needs to be adjusted to:
// @import 'level1/css/page.css' tv, screen;
// ...
// background-image: url(level1/images/alphaimage.png);
//
// In IE it will also adjust relative paths in AlphaImageLoader()
// filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/alphaimage.png');
// will be adjusted to:
// filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='level1/images/alphaimage.png');
//
// Please note that any relative paths in AlphaImageLoader in external css files wont work, as
// the paths in AlphaImageLoader is MUST be declared relative to the HTML page,
// not relative to the CSS file that declares it
 
if(!cssText || !cssUrl){ return; }
 
// support the ImageAlphaFilter if it exists, most people use it in IE 6 for transparent PNGs
// We are NOT going to kill it in IE 7 just because the PNGs work there. Somebody might have
// other uses for it.
// If user want to disable css filter in IE6 he/she should
// unset filter in a declaration that just IE 6 doesn't understands
// like * > .myselector { filter:none; }
if(alphaImageLoader){
cssText = cssText.replace(alphaImageLoader, function(ignore, pre, delim, url, post){
return pre + (new dojo._Url(cssUrl, './'+url).toString()) + post;
});
}
 
return cssText.replace(cssPaths, function(ignore, delimStr, strUrl, delimUrl, urlUrl, media){
if(strUrl){
return '@import "' + (new dojo._Url(cssUrl, './'+strUrl).toString()) + '"' + media;
}else{
return 'url(' + (new dojo._Url(cssUrl, './'+urlUrl).toString()) + ')' + media;
}
});
}
 
// attributepaths one tag can have multiple paths, example:
// <input src="..." style="url(..)"/> or <a style="url(..)" href="..">
// <img style='filter:progid...AlphaImageLoader(src="noticeTheSrcHereRunsThroughHtmlSrc")' src="img">
var htmlAttrPaths = /(<[a-z][a-z0-9]*\s[^>]*)(?:(href|src)=(['"]?)([^>]*?)\3|style=(['"]?)([^>]*?)\5)([^>]*>)/gi;
 
function adjustHtmlPaths(htmlUrl, cont){
var url = htmlUrl || "./";
 
return cont.replace(htmlAttrPaths,
function(tag, start, name, delim, relUrl, delim2, cssText, end){
return start + (name ?
(name + '=' + delim + (new dojo._Url(url, relUrl).toString()) + delim)
: ('style=' + delim2 + adjustCssPaths(url, cssText) + delim2)
) + end;
}
);
}
 
function secureForInnerHtml(cont){
/********* remove <!DOCTYPE.. and <title>..</title> tag **********/
// khtml is picky about dom faults, you can't attach a <style> or <title> node as child of body
// must go into head, so we need to cut out those tags
return cont.replace(/(?:\s*<!DOCTYPE\s[^>]+>|<title[^>]*>[\s\S]*?<\/title>)/ig, "");
}
 
function snarfStyles(/*String*/cssUrl, /*String*/cont, /*Array*/styles){
/**************** cut out all <style> and <link rel="stylesheet" href=".."> **************/
// also return any attributes from this tag (might be a media attribute)
// if cssUrl is set it will adjust paths accordingly
styles.attributes = [];
 
return cont.replace(/(?:<style([^>]*)>([\s\S]*?)<\/style>|<link\s+(?=[^>]*rel=['"]?stylesheet)([^>]*?href=(['"])([^>]*?)\4[^>\/]*)\/?>)/gi,
function(ignore, styleAttr, cssText, linkAttr, delim, href){
// trim attribute
var i, attr = (styleAttr||linkAttr||"").replace(/^\s*([\s\S]*?)\s*$/i, "$1");
if(cssText){
i = styles.push(cssUrl ? adjustCssPaths(cssUrl, cssText) : cssText);
}else{
i = styles.push('@import "' + href + '";')
attr = attr.replace(/\s*(?:rel|href)=(['"])?[^\s]*\1\s*/gi, ""); // remove rel=... and href=...
}
if(attr){
attr = attr.split(/\s+/);// split on both "\n", "\t", " " etc
var atObj = {}, tmp;
for(var j = 0, e = attr.length; j < e; j++){
tmp = attr[j].split('=')// split name='value'
atObj[tmp[0]] = tmp[1].replace(/^\s*['"]?([\s\S]*?)['"]?\s*$/, "$1"); // trim and remove ''
}
styles.attributes[i - 1] = atObj;
}
return ""; // squelsh the <style> or <link>
}
);
}
 
function snarfScripts(cont, byRef){
// summary
// strips out script tags from cont
// invoke with
// byRef = {errBack:function(){/*add your download error code here*/, downloadRemote: true(default false)}}
// byRef will have {code: 'jscode'} when this scope leaves
byRef.code = "";
 
function download(src){
if(byRef.downloadRemote){
// console.debug('downloading',src);
dojo.xhrGet({
url: src,
sync: true,
load: function(code){
byRef.code += code+";";
},
error: byRef.errBack
});
}
}
// match <script>, <script type="text/..., but not <script type="dojo(/method)...
return cont.replace(/<script\s*(?![^>]*type=['"]?dojo)(?:[^>]*?(?:src=(['"]?)([^>]*?)\1[^>]*)?)*>([\s\S]*?)<\/script>/gi,
function(ignore, delim, src, code){
if(src){
download(src);
}else{
byRef.code += code;
}
return "";
}
);
}
 
function evalInGlobal(code, appendNode){
// we do our own eval here as dojo.eval doesn't eval in global crossbrowser
// This work X browser but but it relies on a DOM
// plus it doesn't return anything, thats unrelevant here but not for dojo core
appendNode = appendNode || dojo.doc.body;
var n = appendNode.ownerDocument.createElement('script');
n.type = "text/javascript";
appendNode.appendChild(n);
n.text = code; // DOM 1 says this should work
}
 
/*=====
dojox.layout.ContentPane.DeferredHandle = {
// cancel: Function
cancel: function(){
// summary: cancel a in flight download
},
 
addOnLoad: function(func){
// summary: add a callback to the onLoad chain
// func: Function
},
 
addOnUnload: function(func){
// summary: add a callback to the onUnload chain
// func: Function
}
}
=====*/
 
 
dojo.declare("dojox.layout.ContentPane", dijit.layout.ContentPane, {
// summary:
// An extended version of dijit.layout.ContentPane
// Supports infile scrips and external ones declared by <script src=''
// relative path adjustments (content fetched from a different folder)
// <style> and <link rel='stylesheet' href='..'> tags,
// css paths inside cssText is adjusted (if you set adjustPaths = true)
//
// NOTE that dojo.require in script in the fetched file isn't recommended
// Many widgets need to be required at page load to work properly
 
// adjustPaths: Boolean
// Adjust relative paths in html string content to point to this page
// Only usefull if you grab content from a another folder then the current one
adjustPaths: false,
 
// cleanContent: Boolean
// summary:
// cleans content to make it less likly to generate DOM/JS errors.
// description:
// usefull if you send contentpane a complete page, instead of a html fragment
// scans for
// style nodes, inserts in Document head
// title Node, remove
// DOCTYPE tag, remove
// <!-- *JS code here* -->
// <![CDATA[ *JS code here* ]]>
cleanContent: false,
 
// renderStyles: Boolean
// trigger/load styles in the content
renderStyles: false,
 
// executeScripts: Boolean
// Execute (eval) scripts that is found in the content
executeScripts: true,
 
// scriptHasHooks: Boolean
// replace keyword '_container_' in scripts with 'dijit.byId(this.id)'
// NOTE this name might change in the near future
scriptHasHooks: false,
 
/*======
// ioMethod: dojo.xhrGet|dojo.xhrPost
// reference to the method that should grab the content
ioMethod: dojo.xhrGet,
// ioArgs: Object
// makes it possible to add custom args to xhrGet, like ioArgs.headers['X-myHeader'] = 'true'
ioArgs: {},
 
// onLoadDeferred: dojo.Deferred
// callbackchain will start when onLoad occurs
onLoadDeferred: new dojo.Deferred(),
 
// onUnloadDeferred: dojo.Deferred
// callbackchain will start when onUnload occurs
onUnloadDeferred: new dojo.Deferred(),
 
setHref: function(url){
// summary: replace current content with url's content
return ;// dojox.layout.ContentPane.DeferredHandle
},
 
refresh: function(){
summary: force a re-download of content
return ;// dojox.layout.ContentPane.DeferredHandle
},
 
======*/
 
constructor: function(){
// init per instance properties, initializer doesn't work here because how things is hooked up in dijit._Widget
this.ioArgs = {};
this.ioMethod = dojo.xhrGet;
this.onLoadDeferred = new dojo.Deferred();
this.onUnloadDeferred = new dojo.Deferred();
},
 
postCreate: function(){
// override to support loadDeferred
this._setUpDeferreds();
 
dijit.layout.ContentPane.prototype.postCreate.apply(this, arguments);
},
 
onExecError: function(e){
// summary
// event callback, called on script error or on java handler error
// overide and return your own html string if you want a some text
// displayed within the ContentPane
},
 
setContent: function(data){
// summary: set data as new content, sort of like innerHTML
// data: String|DomNode|NodeList|dojo.NodeList
if(!this._isDownloaded){
var defObj = this._setUpDeferreds();
}
 
dijit.layout.ContentPane.prototype.setContent.apply(this, arguments);
return defObj; // dojox.layout.ContentPane.DeferredHandle
},
 
cancel: function(){
// summary: cancels a inflight download
if(this._xhrDfd && this._xhrDfd.fired == -1){
// we are still in flight, which means we should reset our DeferredHandle
// otherwise we will trigger onUnLoad chain of the canceled content,
// the canceled content have never gotten onLoad so it shouldn't get onUnload
this.onUnloadDeferred = null;
}
dijit.layout.ContentPane.prototype.cancel.apply(this, arguments);
},
 
_setUpDeferreds: function(){
var _t = this, cancel = function(){ _t.cancel(); }
var onLoad = (_t.onLoadDeferred = new dojo.Deferred());
var onUnload = (_t._nextUnloadDeferred = new dojo.Deferred());
return {
cancel: cancel,
addOnLoad: function(func){onLoad.addCallback(func);},
addOnUnload: function(func){onUnload.addCallback(func);}
};
},
 
_onLoadHandler: function(){
dijit.layout.ContentPane.prototype._onLoadHandler.apply(this, arguments);
if(this.onLoadDeferred){
this.onLoadDeferred.callback(true);
}
},
 
_onUnloadHandler: function(){
this.isLoaded = false;
this.cancel();// need to cancel so we don't get any inflight suprises
if(this.onUnloadDeferred){
this.onUnloadDeferred.callback(true);
}
 
dijit.layout.ContentPane.prototype._onUnloadHandler.apply(this, arguments);
 
if(this._nextUnloadDeferred){
this.onUnloadDeferred = this._nextUnloadDeferred;
}
},
 
_onError: function(type, err){
dijit.layout.ContentPane.prototype._onError.apply(this, arguments);
if(this.onLoadDeferred){
this.onLoadDeferred.errback(err);
}
},
 
_prepareLoad: function(forceLoad){
// sets up for a xhrLoad, load is deferred until widget is showing
var defObj = this._setUpDeferreds();
 
dijit.layout.ContentPane.prototype._prepareLoad.apply(this, arguments);
 
return defObj;
},
 
_setContent: function(cont){
// override dijit.layout.ContentPane._setContent, to enable path adjustments
var styles = [];// init vars
if(dojo.isString(cont)){
if(this.adjustPaths && this.href){
cont = adjustHtmlPaths(this.href, cont);
}
if(this.cleanContent){
cont = secureForInnerHtml(cont);
}
if(this.renderStyles || this.cleanContent){
cont = snarfStyles(this.href, cont, styles);
}
 
// because of a bug in IE, script tags that is first in html hierarchy doesnt make it into the DOM
// when content is innerHTML'ed, so we can't use dojo.query to retrieve scripts from DOM
if(this.executeScripts){
var _t = this, code, byRef = {
downloadRemote: true,
errBack:function(e){
_t._onError.call(_t, 'Exec', 'Error downloading remote script in "'+_t.id+'"', e);
}
};
cont = snarfScripts(cont, byRef);
code = byRef.code;
}
 
// rationale for this block:
// if containerNode/domNode is a table derivate tag, some browsers dont allow innerHTML on those
var node = (this.containerNode || this.domNode), pre = post = '', walk = 0;
switch(name = node.nodeName.toLowerCase()){
case 'tr':
pre = '<tr>'; post = '</tr>';
walk += 1;//fallthrough
case 'tbody': case 'thead':// children of THEAD is of same type as TBODY
pre = '<tbody>' + pre; post += '</tbody>';
walk += 1;// falltrough
case 'table':
pre = '<table>' + pre; post += '</table>';
walk += 1;
break;
}
if(walk){
var n = node.ownerDocument.createElement('div');
n.innerHTML = pre + cont + post;
do{
n = n.firstChild;
}while(--walk);
cont = n.childNodes;
}
}
 
// render the content
dijit.layout.ContentPane.prototype._setContent.call(this, cont);
 
// clear old stylenodes from the DOM
if(this._styleNodes && this._styleNodes.length){
while(this._styleNodes.length){
dojo._destroyElement(this._styleNodes.pop());
}
}
// render new style nodes
if(this.renderStyles && styles && styles.length){
this._renderStyles(styles);
}
 
if(this.executeScripts && code){
if(this.cleanContent){
// clean JS from html comments and other crap that browser
// parser takes care of in a normal page load
code = code.replace(/(<!--|(?:\/\/)?-->|<!\[CDATA\[|\]\]>)/g, '');
}
if(this.scriptHasHooks){
// replace _container_ with dijit.byId(this.id)
code = code.replace(/_container_(?!\s*=[^=])/g, "dijit.byId('"+this.id+"')");
}
try{
evalInGlobal(code, (this.containerNode || this.domNode));
}catch(e){
this._onError('Exec', 'Error eval script in '+this.id+', '+e.message, e);
}
}
},
 
_renderStyles: function(styles){
// insert css from content into document head
this._styleNodes = [];
var st, att, cssText, doc = this.domNode.ownerDocument;
var head = doc.getElementsByTagName('head')[0];
 
for(var i = 0, e = styles.length; i < e; i++){
cssText = styles[i]; att = styles.attributes[i];
st = doc.createElement('style');
st.setAttribute("type", "text/css"); // this is required in CSS spec!
 
for(var x in att){
st.setAttribute(x, att[x])
}
this._styleNodes.push(st);
head.appendChild(st); // must insert into DOM before setting cssText
 
if(st.styleSheet){ // IE
st.styleSheet.cssText = cssText;
}else{ // w3c
st.appendChild(doc.createTextNode(cssText));
}
}
}
});
 
})();
 
}
/trunk/api/js/dojo1.0/dojox/layout/resources/RadioGroup.css
New file
0,0 → 1,45
/* RadioGroup base Button styling: */
.dojoxRadioButtons {
margin:0; padding:4px;
width:100%;
outline:0;
}
 
.dojoxRadioButtons tbody {
margin:0; padding:0;
width:100%;
}
 
.dojoxRadioButton {
text-align:center;
cursor:pointer;
margin:0;
}
 
.dojoxRadioButtonSelected {
border:1px solid #ededed;
}
.tundra .dojoxRadioButtonSelected {
border:1px solid #a0a0a0;
background:#b7b7b7;
}
.soria .dojoxRadioButtonSelected {
background:#b7cdee url('../../../dijit/themes/soria/images/gradientTopBg.png') repeat-x top center;
}
 
.dojoxRadioButtonLabel {
padding:8px;
text-align:center;
display:block;
}
 
.dojoxRadioGroup {
overflow:hidden;
border:0;
margin:0; padding:0;
}
.dojoxRadioView {
position:relative;
overflow:hidden;
height:100%;
}
/trunk/api/js/dojo1.0/dojox/layout/resources/ResizeHandle.css
New file
0,0 → 1,32
.dojoxResizeHandle {
float: right;
position: absolute;
right: 2px;
bottom: 2px;
width: 13px;
height: 13px;
z-index: 20;
background-image: url('icons/resize.png');
line-height: 0px;
}
 
.dojoxResizeNW {
cursor: nw-resize;
}
 
.dojoxResizeNE {
cursor: ne-resize;
}
 
.dojoxResizeW {
cursor: w-resize;
}
 
.dojoxResizeN {
cursor: n-resize;
}
 
.dojoxResizeHandleClone {
position:absolute; top:0; left:0;
border:1px dashed #666;
}
/trunk/api/js/dojo1.0/dojox/layout/resources/FloatingPane.html
New file
0,0 → 1,14
<div class="dojoxFloatingPane" id="${id}">
<div tabindex="0" waiRole="button" class="dojoxFloatingPaneTitle" dojoAttachPoint="focusNode">
<span dojoAttachPoint="closeNode" dojoAttachEvent="onclick: close" class="dojoxFloatingCloseIcon"></span>
<span dojoAttachPoint="maxNode" dojoAttachEvent="onclick: maximize" class="dojoxFloatingMaximizeIcon"></span>
<span dojoAttachPoint="restoreNode" dojoAttachEvent="onclick: _restore" class="dojoxFloatingRestoreIcon"></span>
<span dojoAttachPoint="dockNode" dojoAttachEvent="onclick: minimize" class="dojoxFloatingMinimizeIcon"></span>
<span dojoAttachPoint="titleNode" class="dijitInline dijitTitleNode"></span>
</div>
<div dojoAttachPoint="canvas" class="dojoxFloatingPaneCanvas">
<div dojoAttachPoint="containerNode" waiRole="region" tabindex="-1" class="${contentClass}">
</div>
<span dojoAttachPoint="resizeHandle" class="dojoxFloatingResizeHandle"></span>
</div>
</div>
/trunk/api/js/dojo1.0/dojox/layout/resources/icons/resize.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/layout/resources/icons/resize.png
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/layout/resources/FloatingPane.css
New file
0,0 → 1,170
.dojoxFloatingPane {
background-color:#fff;
position:relative;
border: 1px solid #dedede;
overflow: hidden;
-webkit-box-shadow: 0px 5px 10px #adadad;
}
 
.dojoxFloatingPaneFg {
-webkit-box-shadow: 0px 8px 20px #525252;
}
 
/* titleNode */
.dojoxFloatingPaneTitle {
background: #cccccc;
background:#fafafa url("images/floatTitleBarBg.gif") repeat-x bottom left;
border:1px solid #bfbfbf;
padding:4px 4px 2px 4px;
cursor: pointer;
white-space: nowrap;
}
 
.soria .dojoxFloatingPaneTitle {
background:#4f8ced url("../../../dijit/themes/soria/images/gradientTopBg.png") repeat-x top left;
border:1px solid #6969FF;
background-position:0px -1px;
color:#fff; font-weight:bold;
}
.tundra .dojoxFloatingPaneTitle {
background:#fafafa url("../../../dijit/themes/tundra/images/titleBarBg.gif") repeat-x bottom left;
border:1px solid #bfbfbf;
color:#000;
}
 
 
/* Icons */
.dojoxFloatingCloseIcon {
background:url('icons/tabClose.png') no-repeat center center;
width:16px;
height:16px;
overflow:hidden;
float:right;
}
 
.dojoxFloatingMinimizeIcon {
background:url('../../../dijit/themes/tundra/images/arrowDown.png') no-repeat center center;
width:16px;
height:16px;
overflow:hidden;
float:right;
}
 
.floatingPaneMaximized .dojoxFloatingMaximizeIcon { display:none; }
.dojoxFloatingMaximizeIcon {
background:url('../../../dijit/themes/tundra/images/arrowUp.png') no-repeat center center;
width:16px;
height:16px;
overflow:hidden;
float:right;
}
 
.floatingPaneMaximized .dojoxFloatingRestoreIcon { display:inline; }
.dojoxFloatingRestoreIcon {
background:url('../../../dijit/themes/tundra/images/arrowDown.png') no-repeat center center;
width:16px; height:16px;
overflow:hidden;
float:right;
display:none;
}
 
.dojoxFloatingResizeHandle {
background:url('icons/resize.png') no-repeat bottom right;
position:absolute;
right:0;
bottom:0;
width:16px;
height:16px;
cursor:nw-resize;
}
 
.dojoxFloatingCloseIcon {
width:16px;
height:16px;
overflow:hidden;
float:right;
cursor:pointer;
}
.soria .dojoxFloatingCloseIcon {
background:url('../../../dijit/themes/soria/images/arrows.png') no-repeat center center;
background-position:-65px -1px;
}
.tundra .dojoxFloatingCloseIcon {
background:url('../../../dijit/themes/tundra/images/tabClose.png') no-repeat center center;
}
 
/* our un-used dock styles for now */
.dojoxFloatingDockDefault {
position:absolute;
bottom:0px;
left:0px;
overflow:hidden;
margin:0;
margin-bottom:3px;
padding:0px;
width:100%;
z-index:99; /* position the dock _just_ below the lowest pane */
 
background:transparent;
/* background-color:#fff;
border-top:1px solid #ccc;
*/
}
 
.dojoxDockList {
padding: 0px;
margin: 0px;
}
 
.dojoxDockRestoreButton {
background:url('../../../dijit/themes/tundra/images/arrowUp.png') no-repeat center center;
width:16px; height:16px;
overflow:hidden;
float:left;
margin-top:2px;
}
 
.dojoxDockTitleNode {
overflow:hidden;
}
 
/* Modifications */
 
.dojoxDock {
display: block;
border: 1px solid black;
position: absolute;
padding:0;
margin:0;
background:#fcfcfc;
}
 
.dojoxDockNode {
border: 1px solid #adadad;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 3px;
cursor:pointer;
list-style: none;
padding: 2px;
margin: 0px;
height: 16px;
width: auto;
float: left;
background: #fafafa url("images/floatTitleBarBg.gif") repeat-x bottom left;
}
.soria .dojoxDockNode {
background:#b7cdee url("../../../dijit/themes/soria/images/gradientTopBg.png") repeat-x;
}
 
.dojoxFloatingPaneContent {
overflow: auto;
background-color: #fff;
height: 100%;
width: 100%;
}
 
.dojoxFloatingPaneCanvas {
background-color:#fff;
}
/trunk/api/js/dojo1.0/dojox/layout/BorderContainer.js
New file
0,0 → 1,119
if(!dojo._hasResource["dojox.layout.BorderContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.layout.BorderContainer"] = true;
dojo.provide("dojox.layout.BorderContainer");
 
dojo.require("dijit.layout._LayoutWidget");
 
dojo.experimental("dojox.layout.BorderContainer");
 
dojo.declare(
"dojox.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.
//
// details
// A BorderContainer is a box with a specified size (like style="width: 500px; height: 500px;"),
// that contains children widgets marked with "position" of "top", "bottom", "left", "right", "center".
// It takes it's children marked as top/bottom/left/right, and lays them out along the edges of the center box,
// with "top" and "bottom" extending the full width of the container.
//
// usage
// <style>
// html, body{ height: 100%; width: 100%; }
// </style>
// <div dojoType="BorderContainer" style="width: 100%; height: 100%">
// <div dojoType="ContentPane" position="top">header text</div>
// <div dojoType="ContentPane" position="right" style="width: 200px;">table of contents</div>
// <div dojoType="ContentPane" position="center">client area</div>
// </div>
top: {},
bottom: {},
left: {}, // inside?
right: {}, // outside?
center: {},
 
layout: function(){
this._layoutChildren(this.domNode, this._contentBox, this.getChildren());
},
 
addChild: function(/*Widget*/ child, /*Integer?*/ insertIndex){
dijit._Container.prototype.addChild.apply(this, arguments);
if(this._started){
this._layoutChildren(this.domNode, this._contentBox, this.getChildren());
}
},
 
removeChild: function(/*Widget*/ widget){
dijit._Container.prototype.removeChild.apply(this, arguments);
if(this._started){
this._layoutChildren(this.domNode, this._contentBox, this.getChildren());
}
},
 
_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, position: "bottom" }, {domNode: bar, position: "client"} ]
*/
 
//TODO: what is dim and why doesn't it look right?
// copy dim because we are going to modify it
// dim = dojo.mixin({}, dim);
 
this.domNode.style.position = "relative";
 
//FIXME: do this once? somewhere else?
dojo.addClass(container, "dijitBorderContainer");
dojo.forEach(children, function(child){
var style = child.domNode.style;
style.position = "absolute";
if(child.position){
this[child.position] = child.domNode;
}
}, this);
 
var topStyle = this.top.style;
var rightStyle = this.right.style;
var leftStyle = this.left.style;
var centerStyle = this.center.style;
var bottomStyle = this.bottom.style;
var rightCoords = dojo.coords(this.right);
var leftCoords = dojo.coords(this.left);
var centerCoords = dojo.coords(this.center);
var bottomCoords = dojo.coords(this.bottom);
var topCoords = dojo.coords(this.top);
rightStyle.top = leftStyle.top = centerStyle.top = topCoords.h + "px";
topStyle.top = topStyle.left = topStyle.right = "0px";
bottomStyle.left = bottomStyle.bottom = bottomStyle.right = "0px";
leftStyle.left = rightStyle.right = "0px";
centerStyle.left = leftCoords.w + "px";
centerStyle.right = rightCoords.w + "px";
rightStyle.bottom = leftStyle.bottom = centerStyle.bottom = bottomCoords.h + "px";
},
 
resize: function(args){
this.layout();
}
});
 
// 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, {
// position: String
// "top", "bottom", "left", "right", "center".
// See the BorderContainer description for details on this parameter.
position: 'none'
});
 
}
/trunk/api/js/dojo1.0/dojox/layout/README
New file
0,0 → 1,72
-------------------------------------------------------------------------------
dojox.layout
-------------------------------------------------------------------------------
Version 1.0
Release date: 10/31/2007
-------------------------------------------------------------------------------
Project state:
[expermental | beta]
-------------------------------------------------------------------------------
Credits
Pete Higgins (dante)
Fredrik Johansson (fj.mumme@gmail.com)
Adam Peller (peller)
Bill Keese (bill)
-------------------------------------------------------------------------------
Project description
 
placeholder for dijit.layout extensions. Currently only:
dojox.layout.FloatingPane - an extension on TitlePane for drag/drop
operation, "docking" [minimize/maximize], and [soon] resizing.
 
dojox.layout.ResizeHandle - resize handle to attach to a domNode.
works well on normal domNodes, but will require adding a resizeTo(w,h)
method to any widget you wish to use it on. [experimental]
 
dojox.layout.ContentPane - an extension on dijit ContentPane.
Supports inline scripts, inline styles, relative path adjustments
and having a table tag as domNode.
 
dojox.layout.BorderContainer - an experimental replacement for dijit.layout.BorderLayout
using CSS for layout. Incomplete. [experimental]
 
dojox.layout.RadioGroup - a stack container with sliding or fading transitions
(and an internal button set to mimic a tab container, but fires on hover)
 
-------------------------------------------------------------------------------
Dependencies
 
require Dojo Core, Dojo Base (fx), and Dijit
 
-------------------------------------------------------------------------------
Installation:
 
checkout:
 
http://svn.dojotoolkit.org/dojo/dojox/layout/*
http://svn.dojotoolkit.org/dojo/dijit/*
 
and require via:
dojo.require("dojox.layout.FloatingPane");
or:
dojo.require("dojox.layout.ContentPane");
etc ...
 
-------------------------------------------------------------------------------
Basic Usage:
 
<div dojoType="dojox.layout.FloatingPane" title="my title">
Content To be Floated
</div>
 
<div dojoType="dojox.layout.ContentPane"
adjustPaths="true"
renderStyles="true"
executeScripts="true"
href="my/page/containing/scripts/and/styles/in/a/sub/folder.html"
>
Initial content, will be replace by href.
paths in folder.html will be adjusted to match this page
</div>
 
/trunk/api/js/dojo1.0/dojox/layout/FloatingPane.js
New file
0,0 → 1,361
if(!dojo._hasResource["dojox.layout.FloatingPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.layout.FloatingPane"] = true;
dojo.provide("dojox.layout.FloatingPane");
dojo.experimental("dojox.layout.FloatingPane");
 
dojo.require("dojox.layout.ContentPane");
dojo.require("dijit._Templated");
dojo.require("dijit._Widget");
dojo.require("dojo.dnd.move");
dojo.require("dojox.layout.ResizeHandle");
 
dojo.declare("dojox.layout.FloatingPane",
[ dojox.layout.ContentPane, dijit._Templated ],
{
// summary:
//
// Makes a dijit.ContentPane float and draggable by it's title [similar to TitlePane]
// and over-rides onClick to onDblClick for wipeIn/Out of containerNode
// provides minimize(dock) / show() and hide() methods, and resize [almost]
 
// closable: Boolean
// allow closure of this Node
closable: true,
 
// dockable: Boolean
// allow minimizing of pane true/false
dockable: true,
 
// resizable: Boolean
// allow resizing of pane true/false
resizable: false,
 
// maxable: Boolean
// horrible param name for "Can you maximize this floating pane"
maxable: false,
 
// resizeAxis: String
// x | xy | y to limit pane's sizing direction
resizeAxis: "xy",
 
// title: String
// title to put in titlebar
title: "",
 
// dockTo: DomNode || null
// if null, will create private layout.Dock that scrolls with viewport
// on bottom span of viewport.
dockTo: null,
 
// duration: Integer
// time is MS to spend toggling in/out node
duration: 400,
 
// animation holders for toggle
_showAnim: null,
_hideAnim: null,
// node in the dock (if docked)
_dockNode: null,
 
// iconSrc: String
// [not implemented yet] will be either icon in titlepane to left
// of Title, and/or icon show when docked in a fisheye-like dock
// or maybe dockIcon would be better?
iconSrc: null,
 
contentClass: "dojoxFloatingPaneContent",
templateString: null,
templateString:"<div class=\"dojoxFloatingPane\" id=\"${id}\">\n\t<div tabindex=\"0\" waiRole=\"button\" class=\"dojoxFloatingPaneTitle\" dojoAttachPoint=\"focusNode\">\n\t\t<span dojoAttachPoint=\"closeNode\" dojoAttachEvent=\"onclick: close\" class=\"dojoxFloatingCloseIcon\"></span>\n\t\t<span dojoAttachPoint=\"maxNode\" dojoAttachEvent=\"onclick: maximize\" class=\"dojoxFloatingMaximizeIcon\"></span>\n\t\t<span dojoAttachPoint=\"restoreNode\" dojoAttachEvent=\"onclick: _restore\" class=\"dojoxFloatingRestoreIcon\"></span>\t\n\t\t<span dojoAttachPoint=\"dockNode\" dojoAttachEvent=\"onclick: minimize\" class=\"dojoxFloatingMinimizeIcon\"></span>\n\t\t<span dojoAttachPoint=\"titleNode\" class=\"dijitInline dijitTitleNode\"></span>\n\t</div>\n\t<div dojoAttachPoint=\"canvas\" class=\"dojoxFloatingPaneCanvas\">\n\t\t<div dojoAttachPoint=\"containerNode\" waiRole=\"region\" tabindex=\"-1\" class=\"${contentClass}\">\n\t\t</div>\n\t\t<span dojoAttachPoint=\"resizeHandle\" class=\"dojoxFloatingResizeHandle\"></span>\n\t</div>\n</div>\n",
 
_restoreState: {},
_allFPs: [],
 
postCreate: function(){
// summary:
this.setTitle(this.title);
this.inherited("postCreate",arguments);
var move = new dojo.dnd.Moveable(this.domNode,{ handle: this.focusNode });
//this._listener = dojo.subscribe("/dnd/move/start",this,"bringToTop");
 
if(!this.dockable){ this.dockNode.style.display = "none"; }
if(!this.closable){ this.closeNode.style.display = "none"; }
if(!this.maxable){
this.maxNode.style.display = "none";
this.restoreNode.style.display = "none";
}
if(!this.resizable){
this.resizeHandle.style.display = "none";
}else{
var foo = dojo.marginBox(this.domNode);
this.domNode.style.width = foo.w+"px";
}
this._allFPs.push(this);
},
startup: function(){
this.inherited("startup",arguments);
 
if(this.resizable){
if(dojo.isIE){
this.canvas.style.overflow = "auto";
} else {
this.containerNode.style.overflow = "auto";
}
var tmp = new dojox.layout.ResizeHandle({
//targetContainer: this.containerNode,
targetId: this.id,
resizeAxis: this.resizeAxis
},this.resizeHandle);
}
 
if(this.dockable){
// FIXME: argh.
tmpName = this.dockTo;
 
if(this.dockTo){
this.dockTo = dijit.byId(this.dockTo);
}else{
this.dockTo = dijit.byId('dojoxGlobalFloatingDock');
}
 
if(!this.dockTo){
// we need to make our dock node, and position it against
// .dojoxDockDefault .. this is a lot. either dockto="node"
// and fail if node doesn't exist or make the global one
// once, and use it on empty OR invalid dockTo="" node?
if(tmpName){
var tmpId = tmpName;
var tmpNode = dojo.byId(tmpName);
}else{
var tmpNode = document.createElement('div');
dojo.body().appendChild(tmpNode);
dojo.addClass(tmpNode,"dojoxFloatingDockDefault");
var tmpId = 'dojoxGlobalFloatingDock';
}
this.dockTo = new dojox.layout.Dock({ id: tmpId, autoPosition: "south" },tmpNode);
this.dockTo.startup();
}
if((this.domNode.style.display == "none")||(this.domNode.style.visibility == "hidden")){
// If the FP is created dockable and non-visible, start up docked.
this.minimize();
}
}
this.connect(this.focusNode,"onmousedown","bringToTop");
this.connect(this.domNode, "onmousedown","bringToTop");
},
 
setTitle: function(/* String */ title){
// summary: Update the string in the titleNode
this.titleNode.innerHTML = title;
},
close: function(){
// summary: close and destroy this widget
if(!this.closable){ return; }
dojo.unsubscribe(this._listener);
this.hide(dojo.hitch(this,"destroy"));
},
 
hide: function(/* Function? */ callback){
// summary: close but do not destroy this widget
dojo.fadeOut({
node:this.domNode,
duration:this.duration,
onEnd: dojo.hitch(this,function() {
this.domNode.style.display = "none";
this.domNode.style.visibility = "hidden";
if(this.dockTo){
this.dockTo._positionDock(null);
}
if(callback){
callback();
}
})
}).play();
},
 
show: function(/* Function? */callback){
// summary: show the FloatingPane
var anim = dojo.fadeIn({node:this.domNode, duration:this.duration,
beforeBegin: dojo.hitch(this,function(){
this.domNode.style.display = "";
this.domNode.style.visibility = "visible";
this.dockTo._positionDock(null);
if (this.dockTo) { this.dockTo._positionDock(null); }
if (typeof callback == "function") { callback(); }
this._isDocked = false;
if (this._dockNode) {
this._dockNode.destroy();
this._dockNode = null;
}
})
}).play();
this.resize(dojo.coords(this.domNode));
},
 
minimize: function(){
// summary: hide and dock the FloatingPane
if(!this._isDocked){
this.hide(dojo.hitch(this,"_dock"));
}
},
 
maximize: function(){
// summary: Make this floatingpane fullscreen (viewport)
if(this._maximized){ return; }
this._naturalState = dojo.coords(this.domNode);
if(this._isDocked){
this.show();
setTimeout(dojo.hitch(this,"maximize"),this.duration);
}
dojo.addClass(this.focusNode,"floatingPaneMaximized");
this.resize(dijit.getViewport());
this._maximized = true;
},
 
_restore: function(){
if(this._maximized){
this.resize(this._naturalState);
dojo.removeClass(this.focusNode,"floatingPaneMaximized");
this._maximized = false;
}
},
 
_dock: function(){
if(!this._isDocked){
this._dockNode = this.dockTo.addNode(this);
this._isDocked = true;
}
},
resize: function(/* Object */dim){
// summary: size the widget and place accordingly
this._currentState = dim;
var dns = this.domNode.style;
 
dns.top = dim.t+"px";
dns.left = dim.l+"px";
 
dns.width = dim.w+"px";
this.canvas.style.width = dim.w+"px";
 
dns.height = dim.h+"px";
this.canvas.style.height = (dim.h - this.focusNode.offsetHeight)+"px";
},
_startZ: 100,
bringToTop: function(){
// summary: bring this FloatingPane above all other panes
var windows = dojo.filter(
this._allFPs,
function(i){
return i !== this;
},
this);
windows.sort(function(a, b){
return a.domNode.style.zIndex - b.domNode.style.zIndex;
});
windows.push(this);
dojo.forEach(windows, function(w, x){
w.domNode.style.zIndex = (this._startZ + x * 2);
dojo.removeClass(w.domNode, "dojoxFloatingPaneFg");
}, this);
dojo.addClass(this.domNode, "dojoxFloatingPaneFg");
},
destroy: function(){
// summary: Destroy this FloatingPane completely
this._allFPs.splice(dojo.indexOf(this._allFPs, this), 1);
this.inherited("destroy", arguments);
}
});
 
 
dojo.declare("dojox.layout.Dock", [dijit._Widget,dijit._Templated], {
// summary:
// a widget that attaches to a node and keeps track of incoming / outgoing FloatingPanes
// and handles layout
 
templateString: '<div class="dojoxDock"><ul dojoAttachPoint="containerNode" class="dojoxDockList"></ul></div>',
 
// private _docked: array of panes currently in our dock
_docked: [],
_inPositioning: false,
autoPosition: false,
addNode: function(refNode){
// summary: instert a dockNode refernce into the dock
var div = document.createElement('li');
this.containerNode.appendChild(div);
var node = new dojox.layout._DockNode({ title: refNode.title, paneRef: refNode },div);
node.startup();
return node;
},
 
startup: function(){
// summary: attaches some event listeners
if (this.id == "dojoxGlobalFloatingDock" || this.isFixedDock) {
// attach window.onScroll, and a position like in presentation/dialog
dojo.connect(window,'onresize',this,"_positionDock");
dojo.connect(window,'onscroll',this,"_positionDock");
if(dojo.isIE){
dojo.connect(this.domNode,'onresize', this,"_positionDock");
}
}
this._positionDock(null);
this.inherited("startup",arguments);
},
_positionDock: function(/* Event? */e){
if(!this._inPositioning){
if(this.autoPosition == "south"){
// Give some time for scrollbars to appear/disappear
setTimeout(dojo.hitch(this, function() {
this._inPositiononing = true;
var viewport = dijit.getViewport();
var s = this.domNode.style;
s.left = viewport.l + "px";
s.width = (viewport.w-2) + "px";
s.top = (viewport.h + viewport.t) - this.domNode.offsetHeight + "px";
this._inPositioning = false;
}), 500);
}
}
}
 
 
});
 
dojo.declare("dojox.layout._DockNode", [dijit._Widget,dijit._Templated], {
// summary:
// dojox.layout._DockNode is a private widget used to keep track of
// which pane is docked.
 
// title: String
// shown in dock icon. should read parent iconSrc?
title: "",
 
// paneRef: Widget
// reference to the FloatingPane we reprasent in any given dock
paneRef: null,
 
templateString: '<li dojoAttachEvent="onclick: restore" class="dojoxDockNode">'+
'<span dojoAttachPoint="restoreNode" class="dojoxDockRestoreButton" dojoAttachEvent="onclick: restore"></span>'+
'<span class="dojoxDockTitleNode" dojoAttachPoint="titleNode">${title}</span>'+
'</li>',
 
restore: function(){
// summary: remove this dock item from parent dock, and call show() on reffed floatingpane
this.paneRef.show();
this.paneRef.bringToTop();
this.destroy();
}
 
});
 
}
/trunk/api/js/dojo1.0/dojox/layout/tests/ContentPane.html
New file
0,0 → 1,1059
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.layout.ContentPane test</title>
<script >
function fixPngIE6(){
if(this.complete && dojo.isIE < 7){
var r = this.runtimeStyle;
if(/.png$/i.test(this.src)){
r.height = this.height;
r.width = this.width;
r.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"');";
this.src = this.currentStyle.backgroundImage.replace(/url\(\s*['"]?(.+?)['"]?\s*\)/, "$1");
}
this.className = this.className.replace('run_png_fix', "");
r.behaviour = 'none';
}
}
</script>
<style type='text/css'>
.run_png_fix {
background-image:url(images/blank.gif);
behaviour: expression(fixPngIE6.call(this));
}
</style>
<script src='../../../dojo/dojo.js' djConfig='isDebug:true, parseOnLoad:true'></script>
<script>
dojo.require('doh.runner');
dojo.require('dojox.layout.ContentPane');
dojo.require('dojo.parser');
dojo.require('dijit._Container');
dojo.require('dijit._Templated');
 
 
// create a do nothing, only for test widget
dojo.declare("dojox.TestWidget",
[dijit._Widget, dijit._Templated], {
templateString: "<span class='dojoxTestWidget'></span>"
});
 
// used to test if we fire scrips to document scope
function documentCallback(){
arguments.callee.reached = true;
//console.debug('reached');
}
var unTypedVarInDocScope; // a closure test to make sure we can reach this from evaled scripts
 
 
var pane1, pane2;
 
dojo.addOnLoad(function(){
 
pane1 = dijit.byId('parsedPane');
 
function ieTrimSpaceBetweenTags(str){
return str.replace(/(<[a-z]*[^>]*>)\s*/ig, "$1");
}
function testHandle(t, handle){
t.assertTrue(handle);
t.assertTrue(dojo.isFunction(handle.cancel));
t.assertTrue(dojo.isFunction(handle.addOnLoad));
t.assertTrue(dojo.isFunction(handle.addOnUnload));
}
 
 
doh.register("basicChecks", [
{
name: 'setContent',
runTest: function(t){
var msg = "Simple Test";
pane1.setContent(msg);
t.assertEqual(msg, pane1.domNode.innerHTML);
}
},
{
name: 'setHref',
timeout: 1800,
runTest: function(t){
var msg = "simple remote Test"
pane1.setHref(dojo.moduleUrl('dijit', 'tests/layout/getResponse.php?message='+encodeURI(msg)));
 
var d = new t.Deferred();
setTimeout(d.getTestCallback(function(){
t.assertEqual(msg, pane1.domNode.innerHTML)
}), 1500);
return d;
}
},
{
name: 'setContent_with_Widgets',
runTest: function(t){
var cont = "<div dojoType='dojox.TestWidget'>Test</div>";
pane1.setContent(cont);
t.assertFalse(cont.toLowerCase() == pane1.domNode.innerHTML.toLowerCase());
t.assertEqual(1, dijit._Container.prototype.getChildren.call(pane1).length);
}
},
{
name: 'changeContentTRHead',
runTest: function(t){
var trHead = dojo.query('table#tableTest > thead > tr')[0];
pane2 = new dojox.layout.ContentPane({} , trHead);
var html = "<td><div>This</div>Should<u>Work</u></td>";
pane2.setContent(html);
var res = ieTrimSpaceBetweenTags(pane2.domNode.innerHTML.toLowerCase());
t.assertEqual(html.toLowerCase(), res);
},
tearDown: function(){
pane2.destroy();
}
},
{
name: 'changeContentTHead',
runTest: function(t){
var tHead = dojo.query('table#tableTest > thead')[0];
pane2 = new dojox.layout.ContentPane({}, tHead);
var html = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
pane2.setContent(html);
var res = ieTrimSpaceBetweenTags(pane2.domNode.innerHTML.toLowerCase());
t.assertEqual(html.toLowerCase(), res);
},
tearDown: function(){
pane2.destroy();
}
},
{
name: 'changeContentTRBody',
runTest: function(t){
var trBody = dojo.query('table#tableTest > tbody > tr')[0];
pane2 = new dojox.layout.ContentPane({}, trBody);
var html = "<td><div>This</div>Should<u>Work</u></td>";
pane2.setContent(html);
var res = ieTrimSpaceBetweenTags(pane2.domNode.innerHTML.toLowerCase());
t.assertEqual(html.toLowerCase(), res);
},
tearDown: function(){
pane2.destroy();
}
},
{
name: 'changeContentTBody',
runTest: function(t){
var tBody = dojo.query('table#tableTest > tbody')[0];
pane2 = new dojox.layout.ContentPane({}, tBody);
var html = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
pane2.setContent(html);
var res = ieTrimSpaceBetweenTags(pane2.domNode.innerHTML.toLowerCase());
t.assertEqual(html.toLowerCase(), res);
},
tearDown: function(){
pane2.destroy();
}
},
{
name: 'changeContentTable',
runTest: function(t){
var table = dojo.query('table#tableTest')[0];
pane2 = new dojox.layout.ContentPane({}, table);
var html = "<tbody><tr><td><div>This</div>Should<u>Work</u></td></tr></tbody>";
pane2.setContent(html);
var res = ieTrimSpaceBetweenTags(pane2.domNode.innerHTML.toLowerCase());
t.assertEqual(html.toLowerCase(), res);
},
tearDown: function(){
pane2.destroy();
}
},
{
name: 'ioArgsSetSyncLoad',
timeout: 1500,
runTest: function(t){
pane1.ioArgs.sync = true;
pane1.setHref(dojo.moduleUrl('dijit', 'tests/layout/getResponse.php?delay=100&message=sync'));
 
// since it was a sync fetch it should be loaded here
t.assertEqual('sync', pane1.domNode.innerHTML);
},
tearDown: function(){
pane1.ioArgs = {}; // back to defaults
}
},
{
name: 'ioArgsSetsHeader',
timeout: 1800,
runTest: function(t){
// test if we can set a custom header on every request
pane1.ioArgs.headers = {'X-TestHeader': 'Testing'};
pane1.setHref('remote/getResponse.php?mode=bounceHeaders');
 
var d = new t.Deferred();
setTimeout(d.getTestCallback(function(){
var cont = pane1.domNode.innerHTML;
t.assertTrue(/X-TestHeader/i.test(cont));
t.assertTrue(/Testing/i.test(cont));
}), 1500);
 
return d;
},
tearDown: function(){
pane1.ioArgs = {}; // back to defaults
}
},
{
name: 'ioMethodPost',
timeout: 1800,
runTest: function(t){
// test to post some content on each request
pane1.ioMethod = dojo.xhrPost;
pane1.ioArgs.content = {test:'it should work'};
pane1.setHref('remote/getResponse.php?mode=bounceInput');
 
var d = new t.Deferred();
setTimeout(d.getTestCallback(function(){
t.assertEqual('test=it%20should%20work', pane1.domNode.innerHTML);
}), 1500);
return d;
},
tearDown: function(){
// back to defaults
pane1.ioMethod = dojo.xhrGet;
pane1.ioArgs = {};
}
},
{
name: 'handleFrom_setContent',
runTest: function(t){
var unLoadCalled, loadCalled;
var handle = pane1.setContent("test 'var handle = setContent()'");
testHandle(t, handle);
 
handle.addOnLoad(function(){
loadCalled = true;
});
 
t.assertTrue(loadCalled);
 
handle.addOnUnload(function(){
unLoadCalled = true;
});
 
// test unLoad callback above
handle = pane1.setContent("testing 'addOnUnload(callback)'");
t.assertTrue(unLoadCalled);
testHandle(t, handle);
}
},
{
name: 'handleFrom_setHref_and_refresh_and_cancelWorking',
timeout: 3400,
runTest: function(t){
var unloadCalled, loadCalled;
var r_unloadCalled, r_loadCalled;
var r_handle, href = dojo.moduleUrl('dijit', 'tests/layout/getResponse.php?delay=100&message=test');
 
var handle = pane1.setHref(href);
testHandle(t, handle);
handle.addOnLoad(function(){
loadCalled = 'loadCalled';
});
handle.addOnUnload(function(){
unloadCalled = 'unloadCalled';
});
 
handle.cancel();
 
setTimeout(function(){
pane1.href = href;
handle = pane1.refresh();
testHandle(t, handle); // might throw and kill rest of test, infact we rely on that
r_handle = 'refreshHandle ok';
handle.addOnLoad(function(){
r_loadCalled = 'refresh loadCalled';
pane1.setContent(); // trigger unload
});
handle.addOnUnload(function(){
r_unloadCalled = 'refresh unloadCalled';
});
}, 1500); // wait for page load in case cancel didn't work
 
var d = new t.Deferred();
 
setTimeout(d.getTestCallback(function(){
// load from the href (was canceled)
t.assertEqual(undefined, loadCalled);
t.assertEqual(undefined, unloadCalled);
 
// load from the refresh
t.assertEqual('refreshHandle ok', r_handle);
t.assertEqual('refresh loadCalled', r_loadCalled);
t.assertEqual('refresh unloadCalled', r_unloadCalled);
}), 3200);
 
return d;
}
},
{
name: 'onLoadDeferred|onUnloadDeferred_call_order',
timeout: 6200,
runTest: function(t){
pane1.preventCache = 1;
var count = {u: 0, l: 0}; // need a object for the ref in closures
var href = dojo.moduleUrl('dijit', 'tests/layout/getResponse.php?delay=100&message=test').toString();
 
function next(){
if(!isNaN(count.u) && !isNaN(count.l)){
if(count.u < 4 && count.l < 4){
pane1.setHref(href);
pane1.onLoadDeferred.addCallback(makeCallback('l', 'u', 1));
pane1.onUnloadDeferred.addCallback(makeCallback('u', 'l', 0));
}else{
pane1.setContent(); // unload to get even
}
}
}
 
function makeCallback(tryVar, compareVar, inc){
return function(){
//console.debug(tryVar, count[tryVar] + 1, count[compareVar] + inc)
if((++count[tryVar]) === (count[compareVar] + inc)){
count[tryVar];
if(tryVar == 'l'){
next(); // onload event, trigger new load
}
}else{
tryVar = 'failed '+(tryVar=='u'?'unload':'load')+' on '+count[tryVar]+' try';
}
}
}
next(); // starts the loop
var d = new t.Deferred();
setTimeout(d.getTestCallback(function(){
t.assertEqual(4, count.l);
t.assertEqual(4, count.u)
}), 6000); // 1.5 sec max on each load should be enough
return d;
},
tearDown: function(){
delete pane1.preventCache;
}
}
]
);
 
 
doh.register("pathAdjustments",
[
{
name: 'cssPathAdjustments',
runTest: function(t){
 
// we do this test as one big string to emulate as good as possible,
// but split it later to easily see where we failed
var cssText = ".easy{ background-image:url(images/image.png) }\n"
+".dontReplaceEasy{ background-image:url(images/images/image.png) }\n"
+".hardurl{background-image:url(\t \"../../source/~test/%20t'e(s)t.gif(\"1')?foo=bar11103&bar=baz-foo\" \t);}body{};\n"
+".file{background-image: url(file:///home/nobody/image.png);}\n"
+".http{background-image: url(http://dojotoolkit.org/image.png);}\n"
+".https{background-image: url(https://dojotoolkit.org/image.png);}\n"
+".nonRelative{background-image:url(/toplevelfolder/image.gif);}\n"
+'@import "css/main.css";' + "\n@import \t'css/Newbee Url.css'\t;\n"
+"@import 'http://dojotoolkit.org/dojo.css';\n"
+" @import 'you/never/thought/' print;\n"
+' @import url("it/would/work") tv, screen;'+"\n"
+' @import url(/did/you/now.css);'+"\n"
+' @import "yes.i.did";';
 
pane1.href = "deep/nested/file";
pane1.adjustPaths = 1;
pane1.renderStyles = 1;
var adjustedCss;
 
// hijack internals to snatch the styles before they are inserted to DOM (DOM messes formating)
var oldFunc = pane1._renderStyles;
return function(styles){
adjustedCss = styles.join();
}
pane1._setContent.call(pane1, '<style>'+cssText+'</style>');
pane1._renderStyles = oldFunc;
 
adjustedCss = adjustedCss.split("\n");
 
var expectedCss = (".easy{ background-image:url(deep/nested/images/image.png) }\n"
+".dontReplaceEasy{ background-image:url(deep/nested/images/images/image.png) }\n"
+".hardurl{background-image:url(source/~test/%20t'e(s)t.gif(\"1')?foo=bar11103&bar=baz-foo);}body{};\n"
+".file{background-image: url(file:///home/nobody/image.png);}\n"
+".http{background-image: url(http://dojotoolkit.org/image.png);}\n"
+".https{background-image: url(https://dojotoolkit.org/image.png);}\n"
+".nonRelative{background-image:url(/toplevelfolder/image.gif);}\n"
+"@import \"deep/nested/css/main.css\";\n@import \"deep/nested/css/Newbee Url.css\"\t;\n"
+"@import 'http://dojotoolkit.org/dojo.css';\n"
+" @import \"deep/nested/you/never/thought/\" print;\n"
+' @import url(deep/nested/it/would/work) tv, screen;'+"\n"
+' @import url(/did/you/now.css);'+"\n"
+' @import "deep/nested/yes.i.did";').split("\n");
 
// we split and loop to get a faster hint of where it failed
for(var i = 0; i < expectedCss.length; i++){
t.assertEqual(expectedCss[i], adjustedCss[i]);
}
},
tearDown: function(){
delete pane1.adjustPaths; // get back to defaults
delete pane1.renderStyles;
}
},
{
name: 'htmlPathAdjustments',
timeout: 1800,
runTest: function(t){
 
var d = new t.Deferred();
setTimeout(d.getTestCallback(
function(){
// check that images and styles have been applied
var cb = dojo.contentBox(dojo.byId('imgTest'));
//dojo.getComputedStyle(dojo.byId('imgTest'));
t.assertEqual(188, cb.w);
t.assertEqual(125, cb.h);
 
// make sure we didn't mess up the other inline styles
cb = dojo.contentBox(dojo.byId('inlineStyleTest'));
t.assertEqual(188, cb.w);
t.assertEqual(125, cb.h);
 
// make sure it is the correct image
var cs = dojo.getComputedStyle(dojo.byId('inlineStyleTest'));
var url = cs.backgroundImage;
//remove url(..)
url = url.replace(/^\s?url\(['"]?/, "").replace(/['"]?\);?\s?$/, "");
// compare image url to full path of this document
imageUrl = dojo.moduleUrl('dojox', 'layout/tests/images/testImage.gif');
t.assertEqual(new dojo._Url(document.location, imageUrl), url);
 
// make sure we loaded the <link rel='stylesheet' correctly
var mb = dojo.marginBox(dojo.byId('linkCssTest'));
t.assertEqual(112, mb.w); // 100px + 2px border + 4px margin = 112px
t.assertEqual(112, mb.h);
 
// make sure we loaded the <style>@import '...'; correctly
mb = dojo.marginBox(dojo.byId('importCssTest'));
t.assertEqual(110, mb.w); // 100px + 1px border + 4px margin = 110px
t.assertEqual(110, mb.h);
 
// make sure we didn't render the <link media='print' rel='stylesheet'
var mb = dojo.marginBox(dojo.byId('linkMediaTest'));
t.assertEqual(212, mb.w); // 100px + 2px border + 4px margin = 112px
t.assertEqual(212, mb.h);
 
// make sure we didn't render the <style media='print'>@import '...';
mb = dojo.marginBox(dojo.byId('importMediaTest'));
t.assertEqual(210, mb.w); // 100px + 1px border + 4px margin = 110px
t.assertEqual(210, mb.h);
}
), 1500);
 
pane1.adjustPaths = 1;pane1.renderStyles = 1;
pane1.setHref('remote/getResponse.php?mode=htmlPaths');
return d;
},
tearDown: function(){
delete pane1.adjustPaths; // get back to defaults
delete pane1.renderStyles;
}
},
{
name: 'renderStylesOfByDefaultAndOldDeleted',
timeout: 1800,
runTest: function(t){
var d = new t.Deferred();
 
setTimeout(d.getTestCallback(
function(){
// innerHTML'ing <link tags works in some browser (IE, moz), but not all
// we can't test if LINK was loaded this way
 
// make sure we didn't load the <link rel='stylesheet'
//var mb = dojo.marginBox(dojo.byId('linkCssTest'));
//t.assertFalse(112 == mb.w);
//t.assertFalse(112 == mb.h);
 
// make sure we didn't load the <style>@import '...';
var mb = dojo.marginBox(dojo.byId('importCssTest'));
t.assertFalse(110 == mb.w);
t.assertFalse(110 == mb.h);
}
), 1500);
pane1.adjustPaths = 1;
pane1.setHref('remote/getResponse.php?mode=htmlPaths');
return d;
},
tearDown: function(){
delete pane1.adjustPaths;
}
}
]
);
 
doh.register("scriptTests",
[
"t.assertTrue(pane1.executeScripts);",
{
name: 'leaveDojoMethodScriptsAsIs',
runTest: function(t){
pane1.setContent("<"
+"script type='dojo/method'>unTypedVarInDocScope = 'failure';<"
+"/script>");
 
var d = new t.Deferred();
// IE req to async this test
setTimeout(d.getTestCallback(function(){
t.assertEqual('undefined', typeof unTypedVarInDocScope);
t.assertFalse(unTypedVarInDocScope == 'failure');
}), 40);
 
return d;
}
},
{
name: 'scripts_evals_in_global_scope',
timeout: 1800, // grabing remote js, wait for that
runTest: function(t){
pane1.setContent("<"
+"script>function scriptsInGlobalClicked(){ documentCallback(); }<"
+"/script><"+"script src='remote/getResponse.php?mode=remoteJsTrue'></"
+"script>"+"<a href='javascript:scriptsInGlobalClicked()' "
+"onfocus='scriptsInGlobalClicked();' id='anchorTag'>test</a>");
 
var link = dojo.byId('anchorTag');
dojo.isFunction(link.click) ? /*others*/ link.click() : /*moz*/ link.focus();
var d = new t.Deferred();
setTimeout(d.getTestCallback(function(){
t.assertEqual('boolean', typeof documentCallback.reached);
t.assertTrue(documentCallback.reached);
t.assertTrue(unTypedVarInDocScope);
}), 40);
return d;
}
},
{
name:'scriptsEvalsInOrder',
timeout: 1800,// grabing remote js, wait for that
runTest: function(t){
pane1.setContent("<"
+"script src='remote/getResponse.php?mode=remoteJsFalse'><"
+"/script><"+"script>unTypedVarInDocScope = 1;<"
+"/script>"); // scripts only test
 
// we need to make this async because of IEs strange events loops
var d = new t.Deferred();
setTimeout(d.getTestCallback(function(){
t.assertEqual('number', typeof unTypedVarInDocScope);
t.assertEqual(1, unTypedVarInDocScope);
}), 40);
return d;
}
},
{
name: 'scriptsWithTypeTextJavascript',
runTest: function(t){
pane1.setContent("<"
+"script type='text/javascript'> unTypedVarInDocScope = 'text/javascript'; <"
+"/script>");
 
var d = new t.Deferred();
// IE needs async here
setTimeout(d.getTestCallback(function(){
t.assertEqual('text/javascript', unTypedVarInDocScope);
}), 40);
return d;
}
},
{
name:'scriptsWithHtmlComments',
runTest: function(t){
pane1.cleanContent = 1;
pane1.setContent("<"
+"script><!-- unTypedVarInDocScope = 2; --><"
+"/script>");
 
var d = new t.Deferred();
// IE need a async here
setTimeout(d.getTestCallback(function(){
t.assertEqual('number', typeof unTypedVarInDocScope);
t.assertEqual(2, unTypedVarInDocScope);
}), 40);
 
return d;
},
tearDown: function(){
delete pane1.cleanContent; // go back to default
}
},
{
name:'scriptsWithCData',
runTest: function(t){
pane1.cleanContent = 1;
pane1.setContent("<"
+"script><![CDATA[ unTypedVarInDocScope = 3; ]]><"
+"/script>");
 
var d = new t.Deferred();
// IE need a async here
setTimeout(d.getTestCallback(function(){
t.assertEqual('number', typeof unTypedVarInDocScope);
t.assertEqual(3, unTypedVarInDocScope);
}), 40);
 
return d;
},
tearDown: function(){
delete pane1.cleanContent; // go back to default
}
},
{
name: 'replace_container_with_dijit.byId()',
runTest: function(t){
unTypedVarInDocScope = 'failure';
pane1.scriptHasHooks = true;
pane1.setContent("<"
+"script>function testReplace(){"
+ "if(typeof _container_ != 'object'){return 'not replaced 1';}\n"
+ "if(_container_ != pane1){ return 'not replaced 2';}\n"
+ "if(!_container_ == pane1){ return 'not replaced 3';}\n"
+ "var tmp =_container_=dojo;\n"
+ "if(tmp != dojo){ return 'replaced when shouldnt 1';}\n"
+ "var tmp = _container_ \t \t = dojo;\n"
+ "if(tmp != dojo){ return 'replaced when shouldnt 2';}\n"
+ "return 'success';\n"
+"};\n"
+"unTypedVarInDocScope = testReplace();"
+"</"+"script>");
 
// let IE inhale here
var d = new t.Deferred();
setTimeout(d.getTestCallback(function(){
t.assertEqual('success', unTypedVarInDocScope);
}), 40);
return d;
},
tearDown: function(){
delete pane1.scriptHasHooks; // get back to default
}
},
{
name:'_container_onLoadDeferred|onUnloadDeferred',
runTest: function(t){
pane1.scriptHasHooks = true;
pane1.setContent("<"
+"script>"
+"var testConn;"
+"_container_.onLoadDeferred.addCallback(function(){"
+ "testConn = dojo.connect(dojo.byId('testForm'), 'onsubmit', null, function(){"
+ "unTypedVarInDocScope = dojo.byId('testInput').value;"
+ "});"
+ "dojo.byId('testButton').click();"
+"});"
+"_container_.onUnloadDeferred.addCallback(function(){"
+ "unTypedVarInDocScope = 'unloaded';"
+ "dojo.disconnect(testConn);"
+"});"
+"<"+"/script><form onsubmit='return false;' id='testForm'>"
+ "<input id='testInput' value='loaded'/>"
+ "<input type='submit' id='testButton'/>"
+"</form>");
 
var d = new t.Deferred();
// IE must breathe here
setTimeout(d.getTestCallback(function(){
t.assertEqual('loaded', unTypedVarInDocScope);
}), 40);
return d;
},
tearDown: function(){
delete pane1.scriptHasHooks; // get back to default
pane1.setContent();
}
},
"t.assertEqual('unloaded', unTypedVarInDocScope)"
]
);
 
 
doh.register('regexRegressionAndSpeedtest',[
{
name: 'cssPathAdjustments',
runTest: function(t){
// we do this test as one big string to emulate as good as possible,
// but split it later to easily see where we failed
var cssText = ".easy{ background-image:url(images/image.png) }\n"
+".dontReplaceEasy{ background-image:url(images/images/image.png) }\n"
+".hardurl{background-image:url(\t \"../../source/~test/%20t'e(s)t.gif(\"1')?foo=bar11103&bar=baz-foo\" \t);}body{};\n"
+".file{background-image: url(file:///home/nobody/image.png);}\n"
+".http{background-image: url(http://dojotoolkit.org/image.png);}\n"
+".https{background-image: url(https://dojotoolkit.org/image.png);}\n"
+".nonRelative{background-image:url(/toplevelfolder/image.gif);}\n"
+'@import "css/main.css";' + "\n@import \t'css/Newbee Url.css'\t;\n"
+"@import 'http://dojotoolkit.org/dojo.css';\n"
+" @import 'you/never/thought/' print;\n"
+' @import url("it/would/work") tv, screen;'+"\n"
+' @import url(/did/you/now.css);'+"\n"
+' @import "yes.i.did";';
 
var expectedCss = ".easy{ background-image:url(deep/nested/images/image.png) }\n"
+".dontReplaceEasy{ background-image:url(deep/nested/images/images/image.png) }\n"
+".hardurl{background-image:url(source/~test/%20t'e(s)t.gif(\"1')?foo=bar11103&bar=baz-foo);}body{};\n"
+".file{background-image: url(file:///home/nobody/image.png);}\n"
+".http{background-image: url(http://dojotoolkit.org/image.png);}\n"
+".https{background-image: url(https://dojotoolkit.org/image.png);}\n"
+".nonRelative{background-image:url(/toplevelfolder/image.gif);}\n"
+"@import \"deep/nested/css/main.css\";\n@import \"deep/nested/css/Newbee Url.css\"\t;\n"
+"@import 'http://dojotoolkit.org/dojo.css';\n"
+" @import \"deep/nested/you/never/thought/\" print;\n"
+' @import url(deep/nested/it/would/work) tv, screen;'+"\n"
+' @import url(/did/you/now.css);'+"\n"
+' @import "deep/nested/yes.i.did";';
 
for(var i = 0; i < 6; i++){
cssText += cssText;
expectedCss += expectedCss;
}
 
expectedCss = expectedCss.split("\n");
 
pane1.href = "deep/nested/file";
pane1.adjustPaths = 1;
pane1.renderStyles = 1;
var adjustedCss;
 
// hijack internals to snatch the styles before they are inserted to DOM (DOM messes formating)
var oldFunc = pane1._renderStyles;
pane1._renderStyles = function(styles){
adjustedCss = styles.join();
}
 
var start = new Date();
pane1._setContent.call(pane1, '<style>'+cssText+'</style>');
var end = new Date();
pane1._renderStyles = oldFunc;
 
adjustedCss = adjustedCss.split("\n");
console.info('Time used to regex scan css and adjust relative paths within css:'+
(end - start)+' ms on '+ cssText.split('\n').length
+' css rows, with '+ cssText.length+' characters (roughly '
+Math.round(cssText.length/1024)+ 'Kb) of infile css')
 
// we split and loop to get a faster hint of where it failed
for(var i = 0; i < expectedCss.length; i++){
t.assertEqual(expectedCss[i], adjustedCss[i]);
}
},
tearDown: function(){
delete pane1.adjustPaths; // get back to defaults
delete pane1.renderStyles;
pane1.href = "";
}
}
,
{
name:'htmlPathsSpeedTest',
runTest: function(t){
var htmlText = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n"
+"<title>should be removed</title>\n"
+"<img src=\"images/image.gif\"/>Testing\n"
+"<a href=\"../../topmost.html\">\n"
+" <img src=\"/siteroot/top.html\">\n"
+" <p style='background:url(\"images/back.png\")'>\n"
+" testing link\n"
+"</p></a>\n"
+"<style \ntype='text/css'>\n"
+" @import 'http://dojotoolkit.org/visible.css' tv, screen;\n"
+" @import \"./audio.css\" audio;\n"
+" @import url(/topsite/css/main.css);\n"
+" div.mywidget, #someId {\n"
+" background-color:url(../../css/main.css);"
+" display:none;\n"
+" background:url(../tmp/css)\n"
+" }\n"
+"</style>\n"
+"<link rel=\"stylesheet\" href=\"../../css/theme.css\" media=\"all\">\n"
+"<link media='print' type='text/css' rel='stylesheet' href='../../css/theme2.css'/>\n"
+"<a style='display:block; background:url(/topmost/css)' href='../above'>above</a>\n"
+"<sc"+"ript type=\"text/javascript\"\n src=\"..\\windows\\morons\"></scr"+"ipt>\n"
+"<scr"+"ipt type=\"dojo/method\" src=\"/dont/mess/with/this\"></scr"+"ipt>\n"
+"<scr"+"ipt src=\"/dont/mess/here/either\" type=\"dojo/method\"></scr"+"ipt>\n"
+"<scr"+"ipt event=\"/havent/you/listened\" type=\"dojo/method\"></scr"+"ipt>\n"
+"<scr"+"ipt>JS CODE</scr"+"ipt>\n"
+"<a href='javascript:void(0)'>void</a>";
 
 
pane1.href = 'deep/nested/file';
 
var expectedHtml = "\n\n<img src=\"deep/nested/images/image.gif\"/>Testing\n"
+"<a href=\"topmost.html\">\n"
+" <img src=\"/siteroot/top.html\">\n"
+" <p style='background:url(deep/nested/images/back.png)'>\n"
+" testing link\n"
+"</p></a>\n"
+"\n"
+"\n\n"
+"<a style='display:block; background:url(/topmost/css)' href='deep/above'>above</a>\n\n"
+"<scr"+"ipt type=\"dojo/method\" src=\"/dont/mess/with/this\"></scr"+"ipt>\n"
+"<scr"+"ipt src=\"/dont/mess/here/either\" type=\"dojo/method\"></scr"+"ipt>\n"
+"<scr"+"ipt event=\"/havent/you/listened\" type=\"dojo/method\"></scr"+"ipt>\n\n"
+"<a href='javascript:void(0)'>void</a>";
 
 
var expectedCss = [
"\n @import 'http://dojotoolkit.org/visible.css' tv, screen;\n"
+" @import \"deep/nested/audio.css\" audio;\n"
+" @import url(/topsite/css/main.css);\n"
+" div.mywidget, #someId {\n"
+" background-color:url(css/main.css);"
+" display:none;\n"
+" background:url(deep/tmp/css)\n"
+" }\n", "@import \"css/theme.css\";", "@import \"css/theme2.css\";"];
 
for(var i = 0; i < 6; i++){
htmlText += htmlText;
expectedHtml += expectedHtml;
expectedCss = expectedCss.concat(expectedCss);
}
 
 
pane1.href = "deep/nested/file";
pane1.adjustPaths = 1;
pane1.renderStyles = 1;
pane1.cleanContent = 1;
var adjustedCss, adjustedHtml;
 
// hijack internals to snatch the styles before they are inserted to DOM (DOM messes formating)
var oldFunc = pane1._renderStyles;
pane1._renderStyles = function(styles){
adjustedCss = styles;
pane1.executeScripts = 0;
}
 
var oldSetFunc = dijit.layout.ContentPane.prototype._setContent;
dijit.layout.ContentPane.prototype._setContent = function(html){
adjustedHtml = html;
}
 
var oldXhr = dojo.xhrGet;
dojo.xhrGet = function(){}; // kill script download
 
var start = new Date();
pane1._setContent.call(pane1, htmlText);
var end = new Date();
 
// reset back to the way it was
pane1._renderStyles = oldFunc;
dijit.layout.ContentPane.prototype._setContent = oldSetFunc;
dojo.xhrGet = oldXhr;
 
console.info('Time used to regex scan html/css and\n adjust relative paths (adjustPaths=true),\n copy scripts (executeScripts=true) and copy css innerText (renderStyles=true) and adjust paths in there \nTime:'+
(end - start)+' ms on '+ htmlText.split('\n').length
+' html rows, with '+ htmlText.length+' characters (roughly '
+Math.round(htmlText.length/1024)+ 'Kb)');
 
// we split and loop to get a faster hint of where it failed
adjustedHtml = adjustedHtml.split("\n");
expectedHtml = expectedHtml.split("\n");
 
for(var i = 0; i < expectedHtml.length; i++){
//console.debug(expectedHtml[i], i);
//console.debug(adjustedHtml[i], i);
t.assertEqual(expectedHtml[i], adjustedHtml[i]);
}
 
var exCssBlock, adjCssBlock;
for(var i = 0; i < expectedCss.length; i++){
t.assertEqual('string', typeof adjustedCss[i]);
 
exCssBlock = expectedCss[i].split('\n');
adjCssBlock = adjustedCss[i].split('\n');
 
for(var j = 0; j < exCssBlock.length;j++){
t.assertEqual(dojo.trim(exCssBlock[j]), dojo.trim(adjCssBlock[j]));
}
}
},
tearDown: function(){
delete pane1.cleanContent;
delete pane1.adjustPaths;
delete pane1.renderStyles;
delete pane1.executeScripts;
}
}
,
{
name:'IE_AlphaImageLoader_PathAdjustments',
runTest: function(t){
if(!dojo.isIE){
console.info('aborting test IE_AlphaImageLoader_PathAdjustments, you dont use IE');
return;
}
 
pane1.adjustPaths = 1;
pane1.renderStyles = 1;
 
pane1.href = "deep/";
 
var html = "<div style='width:10px;height:10px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\"scale\", src=\"images/alpha(1).png\", nextProperty=\"useless\");'><!-- \n"
+" alpha png in IE 6 --></div>\n"
+"<style>\n"
+" .ie_menu_png {"
+" filter: \t progid:\n"
+" DXImageTransform.Microsoft.AlphaImageLoader(\n"
+" src='../midlevel/alpha(2).png')\n"
+" }\n"
+" #my_transparent_png {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/alpha(3).png') }\n"
+" #my_transparent_png1 {filter: progid:DXImageTransform.Microsoft.AlhaImageLoader(src='http://no.se/images/alpha(4).png')}\n"
+"</style>\n";
 
 
var expectedHtml = "<div style='width:10px;height:10px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\"scale\", src=\"deep/images/alpha(1).png\", nextProperty=\"useless\");'><!-- \n"
+" alpha png in IE 6 --></div>\n\n";
 
var expectedCss = "\n"
+" .ie_menu_png {"
+" filter: \t progid:\n"
+" DXImageTransform.Microsoft.AlphaImageLoader(\n"
+" src='midlevel/alpha(2).png')\n"
+" }\n"
+" #my_transparent_png {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/images/alpha(3).png') }\n"
+" #my_transparent_png1 {filter: progid:DXImageTransform.Microsoft.AlhaImageLoader(src='http://no.se/images/alpha(4).png')}\n";
 
 
for(var i = 0; i < 7; i++){
html += html;
expectedHtml += expectedHtml;
expectedCss += expectedCss;
}
 
var adjustedHtml, adjustedCss;
 
// hijack internals to snatch the content
var oldRenderStyles = pane1._renderStyles;
var oldSetContent = dijit.layout.ContentPane.prototype._setContent;
pane1._renderStyles = function(styles){ adjustedCss = styles.join(''); };
dijit.layout.ContentPane.prototype._setContent = function(cont){ adjustedHtml = cont; }
 
var start = new Date();
pane1._setContent.call(pane1, html);
var end = new Date();
 
console.info('Time used to replace AlphaImageLoader(src="...") '
+(end - start) + "ms in HTML with "+html.length
+' characters (roughly '+(Math.round(html.length/1024))+'Kb)');
 
// reset hijacked
pane1._renderStyles = oldRenderStyles;
dijit.layout.ContentPane.prototype._setContent = oldSetContent;
 
 
// split on newline and run a check on each row to help debugging
expectedHtml = expectedHtml.split("\n");
adjustedHtml = adjustedHtml.split("\n");
for(var i = 0; i < expectedHtml.length; i++){
t.assertEqual(expectedHtml[i], adjustedHtml[i]);
}
 
expectedCss = expectedCss.split("\n");
adjustedCss = adjustedCss.split("\n");
for(var i = 0; i < expectedCss.length; i++){
t.assertEqual(expectedCss[i], adjustedCss[i]);
}
},
tearDown: function(){
delete pane1.renderStyles;
delete pane1.adjustPaths;
}
}
]);
 
doh.register("A_AlphaImageLoader_inAction", [{
name:"AlphaLoaderShowHow",
runTest:function(t){
// IE filter alphaimageloader paths must be relative to the page
// not to the cssFile that declares it
 
// demo a much better way of "Fixing" alpha png in IE6 than inlining in html
var html = "<img src='images/dojoLogo.png' class='run_png_fix'/>"
 
var showHowHtml = "<pre >\nCode used in IE transparent png example\n"
+"code (declared in main page, not through ContentPane)\n"
+"&lt;script type='text/javascript'&gt;\n"
+fixPngIE6.toString().replace(/\n\t?/g, "\n")
+"\n&lt;/script&gt;\n"
+"&lt;style type='text/css'&gt;\n"
+" .run_png_fix {\n"
+" background-image:url(images/blank.gif);\n"
+" behaviour: expression(fixPngIE6.call(this));\n"
+" }\n"
+"&lt;/style&gt;\n\n...\n\nHtml feeded to ContentPane (or your main page):\n"
+"&lt;img src='images/dojoLogo.png' class='run_png_fix'/&gt;\n</pre>";
 
pane1.executeScripts = 1;
pane1.renderStyles = 1;
pane1.setContent(html+showHowHtml);
 
}
}]);
 
doh.run();
});
</script>
<style>
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
 
.box {
border: 1px solid black;
height: 190px;
width: 80%;
overflow: auto;
}
 
.red {
color: red;
}
 
.dojoxTestWidget {
border: 1px dashed red;
background-color: #C0E209 ;
}
</style>
</head>
<body class='tundra'>
<h1>dojox.layout.ContentPane</h1>
<h3>As dojox ContentPane is derived from dijit ContentPane, make sure that the dijit test passes before running this test</h3>
<h3 class='red'>Test relies on a php page as backend, so you need php installed on your server</h3>
 
<div class='box' dojoType="dojox.layout.ContentPane" id='parsedPane'>
Initial value
</div>
 
<table id='tableTest' class='box'>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
<tbody>
</table>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/layout/tests/test_BorderContainer.html
New file
0,0 → 1,54
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.layout.BorderContainer Test</title>
 
 
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
 
<script type="text/javascript">
dojo.require("dojox.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
</style>
</head>
<body>
<h2>dojox.layout.BorderContainer tests</h2>
<p>Basic layout</p>
 
<div dojoType="dojox.layout.BorderContainer"
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
>
<div dojoType="dijit.layout.ContentPane" position="left" style="background-color: #acb386; width: 100px;">
left
</div>
<div dojoType="dijit.layout.ContentPane" position="right" style="background-color: #acb386; width: 100px;">
right
</div>
<div dojoType="dijit.layout.ContentPane" position="top" style="background-color: #b39b86; height: 100px;">
top bar
</div>
<div dojoType="dijit.layout.ContentPane" position="bottom" style="background-color: #b39b86; height: 100px;">
bottom bar
</div>
<div dojoType="dijit.layout.ContentPane" position="center" style="background-color: #f5ffbf; padding: 10px;">
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
(to check we're copying children around properly).<br />
<select dojoType="dijit.form.FilteringSelect">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">baz</option>
</select>
Here's some text that comes AFTER the combo box.
</div>
</div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/layout/tests/images/testImage.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/layout/tests/images/testImage.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/layout/tests/images/blank.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/layout/tests/images/blank.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/layout/tests/images/gridUnderlay.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/layout/tests/images/gridUnderlay.png
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/layout/tests/images/dojoLogo.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/layout/tests/images/dojoLogo.png
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/layout/tests/_script.html
New file
0,0 → 1,9
<script type="text/javascript">
console.log('foo - whenever');
dojo.addOnLoad(function(){
console.warn('foo - onload');
});
</script>
<p>
bar baz
</p>
/trunk/api/js/dojo1.0/dojox/layout/tests/test_FloatingPane.html
New file
0,0 → 1,144
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.layout.FloatPane - simplest extension on TitlePane ... ever.</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript" src="../FloatingPane.js"></script>
<script type="text/javascript">
// dojo.require("dojox.layout.FloatingPane");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // scan page for widgets
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../resources/FloatingPane.css";
@import "../resources/ResizeHandle.css";
 
/* body { background:url('gridUnderlay.png') top left; } */
 
.alternateDock {
position:absolute;
background-color:#ededed;
right:0px; top:0px;
border-left:1px solid #ccc;
height:100%;
}
#alternateDock ul.dojoxDockList { display:block; }
.testFixedSize {
width:300px;
height:200px;
padding:7px;
}
</style>
<script type="text/javascript">
 
function makeFloater() {
// programatically created FloatingPane with srcNode ref
var tmp = new dojox.layout.FloatingPane({
title: "dynamically created ...",
id:"floater3",
closeable:true,
resizable:true,
dockable: false
},"nonFloater");
tmp.startup();
}
 
var mi = 1;
function brandNewFloater(){
var node = document.createElement('div');
node.innerHTML = dojo.byId('contentHolder').innerHTML;
dojo.body().appendChild(node);
dojo.addClass(node,"testFixedSize");
var tmp = new dojox.layout.FloatingPane({
title:" New Floater #"+(mi++),
dockable: false,
maxable: true,
closable: true,
resizable: false
},node);
tmp.startup();
tmp.resize({ w:300, h:175 });
}
 
var vpx, vpy = null;
dojo.addOnLoad(makeFloater);
 
</script>
 
</head>
<body>
 
 
<a href="javascript:dijit.byId('floater1').hide()">hide first pane</a> |
<a href="javascript:dijit.byId('floater1').show()">show first pane</a> |
<a href="javascript:dijit.byId('floater1').minimize()">minimize 'uncloseable, dockable' pane pane</a> |
<a href="javascript:brandNewFloater()">new floater</a>
 
<div dojoType="dojox.layout.FloatingPane" title="Floater test ... " resizable="true" id="floater1" style="width:200px;" duration="300">
<p style="margin:0; padding:10px;">I am the content to be floated around</p>
</div>
 
<div dojoType="dojox.layout.FloatingPane" title="un-closable, dockable" style="width:200px; position:absolute; " closable="false" id="floater2">
<p style="padding:8px; margin:0;">
I am dockable, though I have no dockTo="" attribute. I will create or use an existing dock
on the bottom of the screen.
<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc
eleifend sagittis turpis. purus purus in nibh. Phasellus in nunc.
</p>
</div>
<div id="nonFloater" style="width:200px;" duration="750" >
<p style="padding:8x; margin:2px;">
I am made into a FloatingPane in dojo.addOnLoad();<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
sagittis turpis. purus purus in nibh. Phasellus in nunc.
</p>
</div>
 
<div title="Alt Dock 1" style="width:100px; height:100px; float:left;"
dojoType="dojox.layout.FloatingPane" duration="350" resizable="true"
dockTo="alternateDock" executeScripts="true" href="_script.html">
</div>
<div title="Alt Dock 2" dojoType="dojox.layout.FloatingPane" resizable="true" style="width:200px; float:left;" duration="350" dockTo="alternateDock">
<p style="color:#666; padding:8px; margin:0;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. Etiam mattis libero nec ante. Nam
porta lacus eu ligula. Cras mauris. Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
sagittis turpis. purus purus in nibh. Phasellus in nunc.
</p>
</div>
 
<div dojoType="dojox.layout.FloatingPane"
resizeable="false" style="width:200px; margin:0; background:#ccc; " title="foobar"
closable="false" dockable="false"><p style="padding:12px;">
This is just a pane. You cannot close me, you cannot resize me, you cannot minimize me.
</p>
</div>
 
<div dojoType="dojox.layout.FloatingPane"
title="remote pane" href="../../../dijit/tests/layout/doc0.html"
style="width:250px; height:250px; background:#fff; margin:0; "
></div>
 
<div dojoType="dojox.layout.Dock" id="alternateDock" class="alternateDock"></div>
 
<div style="display:none;" id="contentHolder"><p style="padding:13px; margin:0;">
I am content. I am hidden right now. This content is used to populate the newly created
node being attached to the DOM to insert a new FloatingPane without a srcNodeRef. This
node is not being manipulated, just having it's innerHTML read. For demonstration purposes.
</p>
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/layout/tests/test_SizingPane.html
New file
0,0 → 1,170
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.layout.SizingPane</title>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dojo.fx");
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
 
body { background:#ededed; color:#666; }
 
#nav {
position:absolute;
top:100px;
left:10px;
width:200px;
-moz-border-radius:8pt 8pt;
background:#fff;
border:2px solid #ccc;
}
 
#box1 {
overflow:hidden;
position:absolute;
display:block;
width:25px;
height:25px;
-moz-border-radius:8pt 8pt;
radius:8pt;
-webkit-border-radius:8pt 8pt;
background:#fff;
border:2px solid #ccc;
padding:7px;
}
 
</style>
<script>
var animationMethod = "chain"; // || combine
var _showing = false;
var animG, offsetW, offsetH = null;
var box1 = null;
var boxMixin = {
startWidth: 25,
startHeight: 25,
endWidth: 320,
endHeight: 320,
duration: 300
};
 
dojo.addOnLoad(function() {
box1 = dojo.byId('box1');
centerNode(box1);
dojo.connect(box1,"onmouseover",null,"show");
dojo.connect(box1,"onmouseout",null,"hideCheck");
//dojo.connect(box1,"onmouseout",null,"hideCheck");
//dojo.connect(but1,"onclick",null,"show");
});
 
function hideCheck(node) {
if (_showing) {
setTimeout("hide('box1')",125);
}
}
 
function centerNode(node) {
var viewport = dijit.getViewport();
var mb = dojo.marginBox(node);
var style = node.style;
offsetW = mb.w - style.width;
offsetH = mb.h - style.height;
style.left = (viewport.l + (viewport.w - mb.w)/2) + "px";
style.top = (viewport.t + (viewport.h - mb.h)/2) + "px";
}
 
function doUnderlay() {
console.debug('make underlay');
 
}
 
function show() {
if (_showing) { return; }
if (animG && animG.status == "playing") { animG.stop(); }
_showing = true;
var viewport = dijit.getViewport();
 
var newLeft = (viewport.l + (viewport.w - boxMixin.endWidth)/2);
var newTop = (viewport.t + (viewport.h - boxMixin.endHeight)/2);
 
var style = box1.style;
var anim1 = dojo.animateProperty({
node: box1,
duration: boxMixin.duration/2,
properties: {
width: { /* start: boxMixin.startWidth, */ end: boxMixin.endWidth, unit:"px" },
left: { end: newLeft, unit:"px" }
},
beforeBegin: doUnderlay()
});
var anim2 = dojo.animateProperty({
node: box1,
duration: boxMixin.duration/2,
properties: {
height: { /*start: boxMixin.startHeight, */ end: boxMixin.endHeight, unit:"px" },
top: { end: newTop, unit: "px" }
},
onEnd: function() { _showing = true; }
 
});
animG = dojo.fx[animationMethod]([anim1,anim2]).play();
// chain:
// animate width / left position
// animate height / top position
// onend: fadeIn content?
}
 
function hide(node) {
if (!_showing) return;
if (animG && animG.status() == "playing") { animG.stop(); }
var viewport = dijit.getViewport();
var newLeft = (viewport.l + (viewport.w - boxMixin.startWidth)/2);
var newTop = (viewport.t + (viewport.h - boxMixin.startHeight)/2);
 
var style = node.style;
var anim1 = dojo.animateProperty({
node: box1,
duration: boxMixin.duration/2,
properties: {
width: { end: boxMixin.startWidth, unit:"px" },
left: { end: newLeft, unit:"px" }
}
});
var anim2 = dojo.animateProperty({
node: box1,
duration: boxMixin.duration/2,
properties: {
height: { end: boxMixin.startHeight, unit:"px" },
top: { end: newTop, unit: "px" }
},
onEnd: function() { _showing = false; }
});
// if we chain, do anim2 first [because height/top is how anim2 in show() ends]
animG = dojo.fx[animationMethod]([anim2,anim1]).play();
}
</script>
 
</head>
<body class="tundra">
 
<h1 class="testTitle">dojox.layout.SizingPane</h1>
 
<p>This is simply a test / example. There is no <i>real</i> dojox.layout.SizingPane, but this code
should/might become part of a dojox.fx.toggle class ... it's just "neat", isn't it?</p>
 
<div id="box1">
lorem. lorem. lorem.
</div>
 
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/layout/tests/remote/getResponse.php
New file
0,0 → 1,108
<?php
// this file is just a bouncer for ContentPane.html test
error_reporting(E_ALL ^ E_NOTICE);
if(isset($_GET['mode'])){
switch($_GET['mode']){
case 'htmlPaths':
echo "<img src='../images/testImage.gif' id='imgTest'/>
<div id='inlineStyleTest' style='width:188px;height:125px;background-image:url(../images/testImage.gif)'></div>
<style>@import 'getResponse.php?mode=importCss';</style>
<link type='text/css' rel='stylesheet' href='getResponse.php?mode=linkCss'/>
<div id='importCssTest'></div>
<div id='linkCssTest'></div>
<div id='importMediaTest'></div>
<div id='linkMediaTest'></div>
<!-- these may download but not render -->
<style media='print'>@import 'getResponse.php?mode=importMediaPrint';</style>
<link media='print' type='text/css' rel='stylesheet' href='getResponse.php?mode=linkMediaPrint'/>
";
break;
case 'importCss':
header('Content-type: text/css; charset=utf-8');
echo "#importMediaTest {
margin: 4px;
border: 1px dashed red;
width: 200px;
height: 200px;
}
#importCssTest {
margin: 4px;
border: 1px solid blue;
width: 100px;
height: 100px;
}";
break;
case 'linkCss':
header('Content-type: text/css; charset=utf-8');
echo "#linkMediaTest {
margin: 4px;
border: 2px dashed red;
width: 200px;
height: 200px;
}
#linkCssTest {
margin: 4px;
border: 2px dashed red;
width: 100px;
height: 100px;
}";
break;
 
case 'importMediaPrint': // may download but not render
header('Content-type: text/css; charset=utf-8');
echo "#importMediaTest {
margin: 10px;
border: 5px dashed gray;
width: 100px;
height: 100px;
}";
break;
 
case 'linkMediaPrint': // may download but not render
header('Content-type: text/css; charset=utf-8');
echo "#linkMediaTest {
margin: 10px;
border: 5px dashed gray;
width: 100px;
height: 100px;
}";
break;
case 'remoteJsTrue':
header('Content-type: text/javascript; charset=utf-8');
echo "unTypedVarInDocScope = true;";
break;
case 'remoteJsFalse':
header('Content-type: text/javascript; charset=utf-8');
echo "unTypedVarInDocScope = false;";
break;
case 'bounceInput':
echo file_get_contents("php://input");
break;
case 'bounceHeaders';
if(function_exists("apache_request_headers")){
$headers = apache_request_headers();
foreach($headers as $header => $vlu){
echo "$header=$vlu\n<br/>";
}
}else{
// IIS, php as CGI etc gets here, messes formating, suboptimal
$headers = preg_grep('/HTTP_/i', array_keys($_SERVER));
foreach($headers as $header){
$vlu = preg_replace(array('/^HTTP_/', '/_/'), array('', '-'), $header);
echo "$vlu={$_SERVER[$header]}\n<br/>";
}
}
break;
default:
echo "unkown mode {$_GET['mode']}";
}
}
?>
/trunk/api/js/dojo1.0/dojox/layout/tests/test_RadioGroup.html
New file
0,0 → 1,61
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<title>RadioGroup Widget Test</title>
 
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript" src="../RadioGroup.js"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../resources/RadioGroup.css";
body { background:#a0a0a0 !important; }
 
.dojoPane {
background:#eee url('../../../util/resources/logo/positive/dojo.logo.png') no-repeat center center !important;
}
.dojoxPane {
background:#ededed url('../../../util/resources/logo/positive/dojox.logo.png') no-repeat center center !important;
}
.dijitPane {
background:#fefefe url('../../../util/resources/logo/positive/dijit.logo.png') no-repeat center center !important;
}
 
</style>
 
</head>
<body class="tundra">
 
<h1 class="testTitle">dojox.layout.RadioGroup test</h1>
 
<div style="width:915px; margin:0 auto; height:300px;">
<div dojoType="dojox.layout.RadioGroup" style="width:300px; height:300px; float:left;">
<div dojoType="dijit.layout.ContentPane" title="Dojo" class="dojoPane" style="width:300px; height:300px; "></div>
<div dojoType="dijit.layout.ContentPane" title="Dijit" class="dijitPane" style="width:300px; height:300px; "></div>
<div dojoType="dijit.layout.ContentPane" title="Dojox" class="dojoxPane" style="width:300px; height:300px; "></div>
</div>
<div dojoType="dojox.layout.RadioGroupFade" style="width:300px; height:300px; float:left">
<div dojoType="dijit.layout.ContentPane" title="Dojo" class="dojoPane" style="width:300px; height:300px; "></div>
<div dojoType="dijit.layout.ContentPane" title="Dijit" class="dijitPane" style="width:300px; height:300px; "></div>
<div dojoType="dijit.layout.ContentPane" title="Dojox" class="dojoxPane" style="width:300px; height:300px; "></div>
</div>
<div dojoType="dojox.layout.RadioGroupSlide" style="width:300px; height:300px;">
<div dojoType="dijit.layout.ContentPane" title="Dojo" class="dojoPane" style="width:300px; height:300px; "></div>
<div dojoType="dijit.layout.ContentPane" title="Dijit" class="dijitPane" style="width:300px; height:300px; "></div>
<div dojoType="dijit.layout.ContentPane" title="Dojox" class="dojoxPane" style="width:300px; height:300px; "></div>
</div>
</div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/layout/tests/test_ResizeHandle.html
New file
0,0 → 1,120
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<title>Resize Widget Test</title>
 
<script type="text/javascript">var djConfig = {isDebug: true, parseOnLoad: true };</script>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript" src="../ResizeHandle.js"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
// dojo.require("dojox.layout.ResizeHandle");
function makeNewSizer(){
var handle = document.createElement('div');
dojo.byId("programatic").appendChild(handle);
var resizer = new dojox.layout.ResizeHandle({
targetId: "programatic",
activeResize: true
},handle);
resizer.startup();
}
dojo.addOnLoad(makeNewSizer);
 
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../resources/ResizeHandle.css";
#programatic {
width:100px;
height:100px;
border:2px solid #333;
position:relative;
}
</style>
 
</head>
<body class="tundra">
 
<h1 class="testTitle">dojox.layout.ResizeHandle test</h1>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam facilisis enim.
Pellentesque in elit et lacus euismod dignissim. Aliquam dolor pede, convallis eget,
dictum a, blandit ac, urna. Pellentesque sed nunc ut justo volutpat egestas. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
In erat. Suspendisse potenti. Fusce faucibus nibh sed nisi. Phasellus faucibus, dui
a cursus dapibus, mauris nulla euismod velit, a lobortis turpis arcu vel dui. Pellentesque
fermentum ultrices pede. Donec auctor lectus eu arcu. Curabitur non orci eget est porta gravida.
Aliquam pretium orci id nisi. Duis faucibus, mi non adipiscing venenatis, erat urna aliquet elit,
eu fringilla lacus tellus quis erat. Nam tempus ornare lorem. Nullam feugiat.</p>
 
<p>Sed congue. Aenean blandit sollicitudin mi. Maecenas pellentesque. Vivamus ac urna. Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh. Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris, bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia ac, vehicula laoreet, elit. Sed interdum augue sit amet quam dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec quam.</p>
 
<!-- TODO: figure out a way to attach to non-containers, or make ResizeContainter
<div style="position:relative; height:188px; width:125px; margin:0; padding:0; " id="logo"><img src="images/dojoLogo.png" style="width:100%; height:100%">
<div dojoType="dojox.layout.ResizeHandle" activeSizing="true" targetId="logo"></div>
</div>
-->
 
<div id="programatic"> This is text!</div>
<br><br>
<div dojoType="dijit.layout.ContentPane"
title="Test window"
style="width: 300px; height: 200px; padding:10px; border: 1px solid #dedede; position: relative; background: white;"
id="testWindow"
>
Content Pane w/a resize handle. activeResize'ing only on layout Widgets? FIXME: :)
<div dojoType="dojox.layout.ResizeHandle" targetId="testWindow"></div>
</div>
 
<br>
 
<div id="plainDiv"
style="width: 300px; padding:3px; height: 200px; border:1px solid #666; position: relative; background: white;"
>
Plain div w/a resize handle. All Default settings.
<div dojoType="dojox.layout.ResizeHandle" targetId="plainDiv"></div>
</div>
 
<br><br>
 
<div id="plainDiv3"
style="margin:8px; float:left; width: 300px; height: 200px; border: solid red 5px; position: relative; background: white;"
>
Plain div w/a resize handle but resizeAxis="y", and activeResize="true"
<div dojoType="dojox.layout.ResizeHandle" resizeAxis="y" activeResize="true" targetId="plainDiv3" style="bottom: 0; right: 0; position: absolute;"></div>
</div>
 
 
<div id="plainDiv2"
style="margin:8px; float:left; width: 300px; height: 200px; border: solid red 5px; position: relative; background: white;"
>
Plain div w/a resize handle but resizeAxis="x" with animated sizing.
<div dojoType="dojox.layout.ResizeHandle" resizeAxis="x" targetId="plainDiv2" style="bottom: 2px; right: 2px; position: absolute;"></div>
</div>
 
<br><br>
<div id="plainDiv22"
style="margin:8px; padding:15px; float:left; width: 300px; height: 200px; border: solid red 5px; position: relative; background: white;"
>
Plain div w/a resize handle but resizeAxis="xy" with animated sizing (combine).
<div dojoType="dojox.layout.ResizeHandle" resizeAxis="xy" animateMethod="combine" targetId="plainDiv22" style="bottom: 2px; right: 2px; position: absolute;"></div>
</div>
 
<br><br>
 
<p>Sed arcu magna, molestie at, fringilla in, sodales eu, elit. Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus ut elit convallis eleifend. Fusce tincidunt, justo quis tempus euismod, magna nulla viverra libero, sit amet lacinia odio diam id risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, consequat quis, varius interdum, nulla. Donec neque tortor, sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean ut eros sit amet ante pharetra interdum.</p>
 
<p>Fusce rutrum pede eget quam. Praesent purus. Aenean at elit in sem volutpat facilisis. Nunc est augue, commodo at, pretium a, fermentum at, quam. Nam sit amet enim. Suspendisse potenti. Cras hendrerit rhoncus justo. Integer libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Sed adipiscing mi vel ipsum.</p>
 
<p>Sed aliquam, quam consectetuer condimentum bibendum, neque libero commodo metus, non consectetuer magna risus vitae eros. Pellentesque mollis augue id libero. Morbi nonummy hendrerit dui. Morbi nisi felis, fringilla ac, euismod vitae, dictum mollis, pede. Integer suscipit, est sed posuere ullamcorper, ipsum lectus interdum nunc, quis blandit erat eros hendrerit pede. Vestibulum varius, elit id mattis mattis, nulla est feugiat ante, eget vestibulum augue eros ut odio. Maecenas euismod purus quis felis. Ut hendrerit tincidunt est. Fusce euismod, nunc eu tempus tempor, purus ligula volutpat tellus, nec lacinia sapien enim id risus. Aliquam orci turpis, condimentum sed, sollicitudin vel, placerat in, purus. Proin tortor nisl, blandit quis, imperdiet quis, scelerisque at, nisl. Maecenas suscipit fringilla erat. Curabitur consequat, dui blandit suscipit dictum, felis lectus imperdiet tellus, sit amet ornare risus mauris non ipsum. Fusce a purus. Vestibulum sodales. Sed porta ultrices nibh. Vestibulum metus.</p>
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/layout/RadioGroup.js
New file
0,0 → 1,233
if(!dojo._hasResource["dojox.layout.RadioGroup"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.layout.RadioGroup"] = true;
dojo.provide("dojox.layout.RadioGroup");
dojo.experimental("dojox.layout.RadioGroup");
//
// dojox.layout.RadioGroup - an experimental (probably poorly named) Layout widget extending StackContainer
// that accepts ContentPanes as children, and applies aesthetically pleasing responsive transition animations
// attached to :hover of the Buttons created.
//
// FIXME: take the Buttons out of the root template, and allow layoutAlign or similar attrib to use a different
// template, or build the template dynamically?
//
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit._Container");
dojo.require("dijit.layout.StackContainer");
dojo.require("dojox.fx.easing");
 
dojo.declare("dojox.layout.RadioGroup",
[dijit.layout.StackContainer,dijit._Templated],
{
// summary: A Container that turns its Layout Children into a single Pane and transitions between states
// onHover of the button
//
 
// duration: Int
// used for Fade and Slide RadioGroup's, the duration to run the transition animation. does not affect anything
// in default RadioGroup
duration: 750,
 
// hasButtons: Boolean
// toggles internal button making on or off
hasButtons: true,
 
// templateString: String
// the template for our container
templateString: '<div class="dojoxRadioGroup">'
+' <div dojoAttachPoint="buttonHolder" style="display:none;">'
+' <table class="dojoxRadioButtons"><tbody><tr class="dojoxRadioButtonRow" dojoAttachPoint="buttonNode"></tr></tbody></table>'
+' </div>'
+' <div class="dojoxRadioView" dojoAttachPoint="containerNode"></div>'
+'</div>',
 
startup: function(){
// summary: scan the container for children, and make "tab buttons" for them
this.inherited("startup",arguments);
this._children = this.getChildren();
this._buttons = this._children.length;
this._size = dojo.coords(this.containerNode);
if(this.hasButtons){
dojo.style(this.buttonHolder,"display","block");
dojo.forEach(this._children,this._makeButton,this);
}
},
 
// private:
_makeButton: function(/* DomNode */n){
// summary: creates a hover button for a child node of the RadioGroup
dojo.style(n.domNode,"position","absolute");
var tmp = document.createElement('td');
this.buttonNode.appendChild(tmp);
var tmpt = tmp.appendChild(document.createElement('div'));
var tmpw = new dojox.layout._RadioButton({
label: n.title,
page: n
},tmpt);
tmpw.startup();
},
 
// FIXME: shouldn't have to rewriting these, need to take styling out of _showChild and _hideChild
// and use classes on the domNode in _transition or something similar (in StackContainer)
_transition: function(/*Widget*/newWidget, /*Widget*/oldWidget){
// summary: called when StackContainer receives a selectChild call, used to transition the panes.
this._showChild(newWidget);
if(oldWidget){
this._hideChild(oldWidget);
}
// Size the new widget, in case this is the first time it's being shown,
// or I have been resized since the last time it was shown.
// page must be visible for resizing to work
if(this.doLayout && newWidget.resize){
newWidget.resize(this._containerContentBox || this._contentBox);
}
},
 
_showChild: function(/*Widget*/ page){
// summary: show the selected child widget
var children = this.getChildren();
page.isFirstChild = (page == children[0]);
page.isLastChild = (page == children[children.length-1]);
page.selected = true;
 
page.domNode.style.display="";
 
if(page._loadCheck){
page._loadCheck(); // trigger load in ContentPane
}
if(page.onShow){
page.onShow();
}
},
 
_hideChild: function(/*Widget*/ page){
// summary: hide the specified child widget
page.selected=false;
page.domNode.style.display="none";
if(page.onHide){
page.onHide();
}
}
 
});
 
dojo.declare("dojox.layout.RadioGroupFade",
dojox.layout.RadioGroup,
{
// summary: An extension on a stock RadioGroup, that fades the panes.
 
_hideChild: function(page){
// summary: hide the specified child widget
dojo.fadeOut({
node:page.domNode,
duration:this.duration,
onEnd: this.inherited("_hideChild",arguments)
}).play();
},
 
_showChild: function(page){
// summary: show the specified child widget
this.inherited("_showChild",arguments);
dojo.style(page.domNode,"opacity",0);
dojo.fadeIn({
node:page.domNode,
duration:this.duration
}).play();
}
});
 
dojo.declare("dojox.layout.RadioGroupSlide",
dojox.layout.RadioGroup,
{
// summary: A Sliding Radio Group
// description:
// An extension on a stock RadioGroup widget, sliding the pane
// into view from being hidden. The entry direction is randomized
// on each view
//
 
// easing: dojo._Animation.easing
// A hook to override the default easing of the pane slides.
easing: dojox.fx.easing.easeOut,
 
startup: function(){
// summary: on startup, set each of the panes off-screen (_showChild is called later)
this.inherited("startup",arguments);
dojo.forEach(this._children,this._positionChild,this);
},
 
_positionChild: function(page){
// summary: randomly set the child out of view
// description:
var rA = Math.round(Math.random());
var rB = Math.round(Math.random());
dojo.style(page.domNode, rA? "top" : "left", (rB ? "-" : "") + this._size[rA?"h":"w"]+"px");
},
 
_showChild: function(page){
// summary: Slide in the selected child widget
this.inherited("_showChild",arguments);
if(this._anim && this._anim.status()=="playing"){
this._anim.gotoPercent(100,true);
}
this._anim = dojo.animateProperty({
node:page.domNode,
properties: {
// take a performance hit determinging one of these doesn't get modified
// but it's better this way than an extra call to mixin in think?
left: { end:0, unit:"px" },
top: { end:0, unit:"px" }
},
duration:this.duration,
easing:this.easing
});
this._anim.play();
},
 
_hideChild: function(page){
// summary: reset the position of the hidden pane out of sight
this.inherited("_hideChild",arguments);
this._positionChild(page);
}
});
 
dojo.declare("dojox.layout._RadioButton",
[dijit._Widget,dijit._Templated,dijit._Contained],
{
// summary: The Buttons for a RadioGroup
//
// description: A private widget used to manipulate the StackContainer (RadioGroup*). Don't create directly.
//
// label: String
// the Text Label of the button
label: "",
 
// domNode to tell parent to select
page: null,
 
templateString: '<div dojoAttachPoint="focusNode" class="dojoxRadioButton"><span dojoAttachPoint="titleNode" class="dojoxRadioButtonLabel">${label}</span></div>',
startup: function(){
// summary: start listening to mouseOver
this.connect(this.domNode,"onmouseover","_onMouse");
},
_onMouse: function(/* Event */e){
// summary: set the selected child on hover, and set our hover state class
this.getParent().selectChild(this.page);
this._clearSelected();
dojo.addClass(this.domNode,"dojoxRadioButtonSelected");
},
 
_clearSelected: function(){
// summary: remove hover state class from sibling Buttons. This is easier (and more reliable)
// than setting up an additional connection to onMouseOut
// FIXME: this relies on the template being [div][span]node[/span][/div]
dojo.query(".dojoxRadioButtonSelected",this.domNode.parentNode.parentNode).forEach(function(n){
dojo.removeClass(n,"dojoxRadioButtonSelected");
});
}
});
 
}
/trunk/api/js/dojo1.0/dojox/layout/ResizeHandle.js
New file
0,0 → 1,239
if(!dojo._hasResource["dojox.layout.ResizeHandle"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.layout.ResizeHandle"] = true;
dojo.provide("dojox.layout.ResizeHandle");
dojo.experimental("dojox.layout.ResizeHandle");
 
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.fx");
 
dojo.declare("dojox.layout.ResizeHandle", [dijit._Widget, dijit._Templated], {
// summary
// The handle on the bottom-right corner of FloatingPane or other widgets that allows
// the widget to be resized.
// Typically not used directly.
 
// targetId: String
// id of the Widget OR DomNode that I will size
targetId: '',
 
// targetContainer: DomNode
// over-ride targetId and attch this handle directly to a reference of a DomNode
targetContainer: null,
 
// resizeAxis: String
// one of: x|y|xy limit resizing to a single axis, default to xy ...
resizeAxis: "xy",
 
// activeResize: Boolean
// if true, node will size realtime with mouse movement,
// if false, node will create virtual node, and only resize target on mouseUp
activeResize: false,
// activeResizeClass: String
// css class applied to virtual resize node.
activeResizeClass: 'dojoxResizeHandleClone',
 
// animateSizing: Boolean
// only applicable if activeResize = false. onMouseup, animate the node to the
// new size
animateSizing: true,
// animateMethod: String
// one of "chain" or "combine" ... visual effect only. combine will "scale"
// node to size, "chain" will alter width, then height
animateMethod: 'chain',
 
// animateDuration: Integer
// time in MS to run sizing animation. if animateMethod="chain", total animation
// playtime is 2*animateDuration
animateDuration: 225,
 
// minHeight: Integer
// smallest height in px resized node can be
minHeight: 100,
 
// minWidth: Integer
// smallest width in px resize node can be
minWidth: 100,
 
// resize handle template, fairly easy to override:
templateString: '<div dojoAttachPoint="resizeHandle" class="dojoxResizeHandle"><div></div></div>',
 
// private propteries and holders
_isSizing: false,
_connects: [],
_activeResizeNode: null,
_activeResizeLastEvent: null,
// defaults to match default resizeAxis. set resizeAxis variable to modify.
_resizeX: true,
_resizeY: true,
 
 
postCreate: function(){
// summary: setup our one major listener upon creation
dojo.connect(this.resizeHandle, "onmousedown", this, "_beginSizing");
if(!this.activeResize){
this._activeResizeNode = document.createElement('div');
dojo.addClass(this._activeResizeNode,this.activeResizeClass);
}else{ this.animateSizing = false; }
 
if (!this.minSize) {
this.minSize = { w: this.minWidth, h: this.minHeight };
}
// should we modify the css for the cursor hover to n-resize nw-resize and w-resize?
this._resizeX = this._resizeY = false;
switch (this.resizeAxis.toLowerCase()) {
case "xy" :
this._resizeX = this._resizeY = true;
// FIXME: need logic to determine NW or NE class to see
// based on which [todo] corner is clicked
dojo.addClass(this.resizeHandle,"dojoxResizeNW");
break;
case "x" :
this._resizeX = true;
dojo.addClass(this.resizeHandle,"dojoxResizeW");
break;
case "y" :
this._resizeY = true;
dojo.addClass(this.resizeHandle,"dojoxResizeN");
break;
}
},
 
_beginSizing: function(/*Event*/ e){
// summary: setup movement listeners and calculate initial size
if (this._isSizing){ return false; }
 
this.targetWidget = dijit.byId(this.targetId);
 
// FIXME: resizing widgets does weird things, disable virtual resizing for now:
if (this.targetWidget) { this.activeResize = true; }
 
this.targetDomNode = this.targetWidget ? this.targetWidget.domNode : dojo.byId(this.targetId);
if (this.targetContainer) { this.targetDomNode = this.targetContainer; }
if (!this.targetDomNode){ return; }
 
if (!this.activeResize) {
this.targetDomNode.appendChild(this._activeResizeNode);
dojo.fadeIn({ node: this._activeResizeNode, duration:120,
beforeBegin: dojo.hitch(this,function(){
this._activeResizeNode.style.display='';
})
}).play();
}
 
this._isSizing = true;
this.startPoint = {'x':e.clientX, 'y':e.clientY};
 
// FIXME: this is funky: marginBox adds height, contentBox ignores padding (expected, but foo!)
var mb = (this.targetWidget) ? dojo.marginBox(this.targetDomNode) : dojo.contentBox(this.targetDomNode);
this.startSize = { 'w':mb.w, 'h':mb.h };
 
this._connects = [];
this._connects.push(dojo.connect(document,"onmousemove",this,"_updateSizing"));
this._connects.push(dojo.connect(document,"onmouseup", this, "_endSizing"));
 
e.preventDefault();
},
 
_updateSizing: function(/*Event*/ e){
// summary: called when moving the ResizeHandle ... determines
// new size based on settings/position and sets styles.
 
if(this.activeResize){
this._changeSizing(e);
}else{
var tmp = this._getNewCoords(e);
if(tmp === false){ return; }
dojo.style(this._activeResizeNode,"width",tmp.width+"px");
dojo.style(this._activeResizeNode,"height",tmp.height+"px");
this._activeResizeNode.style.display='';
}
},
 
_getNewCoords: function(/* Event */ e){
// On IE, if you move the mouse above/to the left of the object being resized,
// sometimes clientX/Y aren't set, apparently. Just ignore the event.
try{
if(!e.clientX || !e.clientY){ return false; }
}catch(e){
// sometimes you get an exception accessing above fields...
return false;
}
this._activeResizeLastEvent = e;
 
var dx = this.startPoint.x - e.clientX;
var dy = this.startPoint.y - e.clientY;
var newW = (this._resizeX) ? this.startSize.w - dx : this.startSize.w;
var newH = (this._resizeY) ? this.startSize.h - dy : this.startSize.h;
 
// minimum size check
if(this.minSize){
//var mb = dojo.marginBox(this.targetDomNode);
if(newW < this.minSize.w){
newW = this.minSize.w;
}
if(newH < this.minSize.h){
newH = this.minSize.h;
}
}
return {width:newW, height:newH}; // Object
},
_changeSizing: function(/*Event*/ e){
// summary: apply sizing information based on information in (e) to attached node
var tmp = this._getNewCoords(e);
if(tmp===false){ return; }
 
if(this.targetWidget && typeof this.targetWidget.resize == "function"){
this.targetWidget.resize({ w: tmp.width, h: tmp.height });
}else{
if(this.animateSizing){
var anim = dojo.fx[this.animateMethod]([
dojo.animateProperty({
node: this.targetDomNode,
properties: {
width: { start: this.startSize.w, end: tmp.width, unit:'px' }
},
duration: this.animateDuration
}),
dojo.animateProperty({
node: this.targetDomNode,
properties: {
height: { start: this.startSize.h, end: tmp.height, unit:'px' }
},
duration: this.animateDuration
})
]);
anim.play();
}else{
dojo.style(this.targetDomNode,"width",tmp.width+"px");
dojo.style(this.targetDomNode,"height",tmp.height+"px");
}
}
e.preventDefault();
},
 
_endSizing: function(/*Event*/ e){
// summary: disconnect listenrs and cleanup sizing
dojo.forEach(this._connects,function(c){
dojo.disconnect(c);
});
if(!this.activeResize){
dojo.fadeOut({ node:this._activeResizeNode, duration:250,
onEnd: dojo.hitch(this,function(){
this._activeResizeNode.style.display="none";
})
}).play();
this._changeSizing(e);
}
this._isSizing = false;
}
 
});
 
}