/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" |
+"<script type='text/javascript'>\n" |
+fixPngIE6.toString().replace(/\n\t?/g, "\n") |
+"\n</script>\n" |
+"<style type='text/css'>\n" |
+" .run_png_fix {\n" |
+" background-image:url(images/blank.gif);\n" |
+" behaviour: expression(fixPngIE6.call(this));\n" |
+" }\n" |
+"</style>\n\n...\n\nHtml feeded to ContentPane (or your main page):\n" |
+"<img src='images/dojoLogo.png' class='run_png_fix'/>\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; |
} |
}); |
} |