diff options
Diffstat (limited to 'includes/js/dojox/layout')
46 files changed, 5804 insertions, 0 deletions
diff --git a/includes/js/dojox/layout/BorderContainer.js b/includes/js/dojox/layout/BorderContainer.js new file mode 100644 index 0000000..7fa5393 --- /dev/null +++ b/includes/js/dojox/layout/BorderContainer.js @@ -0,0 +1,7 @@ +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"); + +console.error("dojox.layout.BorderContainer moved to dijit.layout.BorderContainer"); + +} diff --git a/includes/js/dojox/layout/ContentPane.js b/includes/js/dojox/layout/ContentPane.js new file mode 100644 index 0000000..d60202c --- /dev/null +++ b/includes/js/dojox/layout/ContentPane.js @@ -0,0 +1,479 @@ +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(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._scopeName + ".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)); + } + } + } +}); + +})(); + +} diff --git a/includes/js/dojox/layout/DragPane.js b/includes/js/dojox/layout/DragPane.js new file mode 100644 index 0000000..4dec5e4 --- /dev/null +++ b/includes/js/dojox/layout/DragPane.js @@ -0,0 +1,65 @@ +if(!dojo._hasResource["dojox.layout.DragPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.layout.DragPane"] = true; +dojo.provide("dojox.layout.DragPane"); + +dojo.require("dijit._Widget"); + +dojo.declare("dojox.layout.DragPane", + dijit._Widget, { + // + // summary: Makes a pane's content dragable by/within it's surface + // + // description: + // A small widget which takes a node with overflow:auto and + // allows dragging to position the content. Useful with images, + // or for just adding "something" to a overflow-able div. + // + // invert: Boolean + // Naturally, the behavior is to invert the axis of the drag. + // Setting invert:false will make the pane drag in the same + // direction as the mouse. + invert:true, + + postCreate: function(){ + + this.inherited(arguments); + this.connect(this.domNode,"onmousedown","_down"); + this.connect(this.domNode,"onmouseup","_up"); + }, + + _down: function(e){ + // summary: mousedown handler, start the dragging + var t = this.domNode; + dojo.style(t,"cursor","move"); + this._x = e.pageX; + this._y = e.pageY; + if ((this._x < t.offsetLeft + t.clientWidth) && + (this._y < t.offsetTop + t.clientHeight)) { + dojo.setSelectable(t,false); + this._mover = dojo.connect(t,"onmousemove",this,"_move"); + } + }, + + _up: function(e){ + // summary: mouseup handler, stop the dragging + + dojo.setSelectable(this.domNode,true); + dojo.style(this.domNode,"cursor","pointer"); + dojo.disconnect(this._mover); + }, + + _move: function(e){ + // summary: mousemove listener, offset the scroll amount by the delta + // since our last call. + + var mod = this.invert ? 1 : -1; + this.domNode.scrollTop += (this._y - e.pageY) * mod; + this.domNode.scrollLeft += (this._x - e.pageX) * mod; + this._x = e.pageX; + this._y = e.pageY; + + } + +}); + +} diff --git a/includes/js/dojox/layout/ExpandoPane.js b/includes/js/dojox/layout/ExpandoPane.js new file mode 100644 index 0000000..efa4b68 --- /dev/null +++ b/includes/js/dojox/layout/ExpandoPane.js @@ -0,0 +1,208 @@ +if(!dojo._hasResource["dojox.layout.ExpandoPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.layout.ExpandoPane"] = true; +dojo.provide("dojox.layout.ExpandoPane"); +dojo.experimental("dojox.layout.ExpandoPane"); // just to show it can be done? + +dojo.require("dijit.layout.ContentPane"); +dojo.require("dijit._Templated"); +dojo.require("dijit._Container"); + +dojo.declare("dojox.layout.ExpandoPane", + [dijit.layout.ContentPane, dijit._Templated, dijit._Contained], + { + // summary: An experimental expando-pane for dijit.layout.BorderContainer + // + // description: + // Works just like a ContentPane inside of a borderContainer. Will expand/collapse on + // command, and supports having Layout Children as direct descendants + // via a custom "attachParent" attribute on the child. + + maxHeight:"", + maxWidth:"", + splitter:"", + + tamplateString:null, + templateString:"<div class=\"dojoxExpandoPane\" dojoAttachEvent=\"ondblclick:toggle\" >\n\t<div dojoAttachPoint=\"titleWrapper\" class=\"dojoxExpandoTitle\">\n\t\t<div class=\"dojoxExpandoIcon\" dojoAttachPoint=\"iconNode\" dojoAttachEvent=\"onclick:toggle\"><span class=\"a11yNode\">X</span></div>\t\t\t\n\t\t<span class=\"dojoxExpandoTitleNode\" dojoAttachPoint=\"titleNode\">${title}</span>\n\t</div>\n\t<div class=\"dojoxExpandoWrapper\" dojoAttachPoint=\"cwrapper\" dojoAttachEvent=\"ondblclick:_trap\">\n\t\t<div class=\"dojoxExpandoContent\" dojoAttachPoint=\"containerNode\"></div>\n\t</div>\n</div>\n", + + _showing:true, + _titleHeight: 28, // FIXME: calculate + + // easeOut: String|Function + // easing function used to hide pane + easeOut:"dojo._DefaultEasing", + // easeIn: String|Function + // easing function use to show pane + easeIn:"dojo._DefaultEasing", + // duration: Integer + // duration to run show/hide animations + duration:420, + + postCreate:function(){ + + this.inherited(arguments); + this._animConnects = []; + + this._isHorizontal = true; + + this._container = this.getParent(); + this._closedSize = this._titleHeight = dojo.marginBox/*_getBorderBox*/(this.titleWrapper).h; + + if(typeof this.easeOut == "string"){ + this.easeOut = dojo.getObject(this.easeOut); + } + if(typeof this.easeIn == "string"){ + this.easeIn = dojo.getObject(this.easeIn); + } + + var thisClass = ""; + if(this.region){ + // FIXME: add suport for alternate region types? + switch(this.region){ + case "right" : + thisClass = "Right"; + break; + case "left" : + thisClass = "Left"; + break; + case "top" : + thisClass = "Top"; + break; + case "bottom" : + thisClass = "Bottom"; + break; + } + dojo.addClass(this.domNode,"dojoxExpando"+thisClass); + this._isHorizontal = /top|bottom/.test(this.region); + } + dojo.style(this.domNode,"overflow","hidden"); + }, + + startup: function(){ + this.inherited(arguments); + if(this.splitter){ + // find our splitter and tie into it's drag logic + var myid = this.id; + dijit.registry.filter(function(w){ + return w && w.child && w.child.id == myid; + }).forEach(dojo.hitch(this,function(w){ + this.connect(w,"_stopDrag","_afterResize"); + })); + } + this._currentSize = dojo.marginBox(this.domNode); + this._showSize = this._currentSize[(this._isHorizontal ? "h" : "w")]; + this._setupAnims(); + }, + + _afterResize: function(e){ + var tmp = this._currentSize; + this._currentSize = dojo.marginBox(this.domNode); + var n = this._currentSize[(this._isHorizontal ? "h" : "w")] + if(n> this._titleHeight){ + if(!this._showing){ + console.log('done being dragged:',e); + this._showing = !this._showing; + this._showEnd(); + } + this._showSize = n; + this._setupAnims(); + }else{ + this._showSize = tmp[(this._isHorizontal ? "h" : "w")]; + this._showing = false; + this._hideWrapper(); + this._hideAnim.gotoPercent(89,true); + } + + }, + + _setupAnims:function(){ + // summary: create the show and hide animations + dojo.forEach(this._animConnects,dojo.disconnect); + + var _common = { + node:this.domNode, + duration:this.duration + }; + + var isHorizontal = this._isHorizontal; + var showProps = {}; + var hideProps = {}; + + var dimension = isHorizontal ? "height" : "width"; + showProps[dimension] = { + end: this._showSize, + unit:"px" + }; + hideProps[dimension] = { + end: this._closedSize, + unit:"px" + }; + + this._showAnim = dojo.animateProperty(dojo.mixin(_common,{ + easing:this.easeIn, + properties: showProps + })); + this._hideAnim = dojo.animateProperty(dojo.mixin(_common,{ + easing:this.easeOut, + properties: hideProps + })); + + this._animConnects = [ + dojo.connect(this._showAnim,"onEnd",this,"_showEnd"), + dojo.connect(this._hideAnim,"onEnd",this,"_hideEnd") + ]; + }, + + toggle:function(e){ + // summary: toggle this pane's visibility + if(this._showing){ + this._hideWrapper(); + if(this._showAnim && this._showAnim.stop()){} + this._hideAnim.play(); + }else{ + if(this._hideAnim && this._hideAnim.stop()){} + this._showAnim.play(); + } + this._showing = !this._showing; + }, + + _hideWrapper:function(){ + dojo.style(this.cwrapper,{ + "visibility":"hidden", + "opacity":"0", + "overflow":"hidden" + }); + }, + + _showEnd: function(){ + // summary: common animation onEnd code + dojo.style(this.cwrapper,{ "opacity":"0", "visibility":"visible" }); + dojo.fadeIn({ node:this.cwrapper, duration:227 }).play(1); + dojo.removeClass(this.domNode,"dojoxExpandoClosed"); + setTimeout(dojo.hitch(this._container, "layout"), 15); + }, + + _hideEnd: function(){ + dojo.addClass(this.domNode,"dojoxExpandoClosed"); + setTimeout(dojo.hitch(this._container, "layout"), 15); + }, + + resize: function(){ + // summary: we aren't a layout widget, but need to act like one: + var size = dojo.marginBox(this.domNode); + // FIXME: do i even need to do this query/forEach? why not just set the containerHeight always + dojo.query("[attachParent]",this.domNode).forEach(function(n){ + if(dijit.byNode(n)){ + var h = size.h - this._titleHeight; + dojo.style(this.containerNode,"height", h +"px"); + } + },this); + this.inherited(arguments); + }, + + _trap: function(e){ + dojo.stopEvent(e); + } + +}); + +} diff --git a/includes/js/dojox/layout/FloatingPane.js b/includes/js/dojox/layout/FloatingPane.js new file mode 100644 index 0000000..6743767 --- /dev/null +++ b/includes/js/dojox/layout/FloatingPane.js @@ -0,0 +1,394 @@ +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.Moveable"); +dojo.require("dojox.layout.ResizeHandle"); + +dojo.declare("dojox.layout.FloatingPane", + [ dojox.layout.ContentPane, dijit._Templated ], + { + // summary: + // A non-modal Floating window. + // + // description: + // 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 if true + dockable: true, + + // resizable: Boolean + // Allow resizing of pane true if true + resizable: false, + + // maxable: Boolean + // Horrible param name for "Can you maximize this floating pane?" + maxable: false, + + // resizeAxis: String + // One of: x | xy | y to limit pane's sizing direction + resizeAxis: "xy", + + // title: String + // Title to use in the header + title: "", + + // dockTo: DomNode? + // if empty, will create private layout.Dock that scrolls with viewport + // on bottom span of viewport. + dockTo: "", + + // duration: Integer + // Time is MS to spend toggling in/out node + duration: 400, + + /*===== + // 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: String + // The className to give to the inner node which has the content + contentClass: "dojoxFloatingPaneContent", + + // animation holders for toggle + _showAnim: null, + _hideAnim: null, + // node in the dock (if docked) + _dockNode: null, + + // privates: + _restoreState: {}, + _allFPs: [], + _startZ: 100, + + 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", + + postCreate: function(){ + + this.setTitle(this.title); + this.inherited(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); + this.domNode.style.position = "absolute"; + }, + + startup: function(){ + if(this._started){ return; } + + this.inherited(arguments); + + if(this.resizable){ + if(dojo.isIE){ + this.canvas.style.overflow = "auto"; + }else{ + this.containerNode.style.overflow = "auto"; + } + + this._resizeHandle = new dojox.layout.ResizeHandle({ + targetId: this.id, + resizeAxis: this.resizeAxis + },this.resizeHandle); + + } + + if(this.dockable){ + // FIXME: argh. + var tmpName = this.dockTo; + + if(this.dockTo){ + this.dockTo = dijit.byId(this.dockTo); + }else{ + this.dockTo = dijit.byId('dojoxGlobalFloatingDock'); + } + + if(!this.dockTo){ + var tmpId; var tmpNode; + // 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){ + tmpId = tmpName; + tmpNode = dojo.byId(tmpName); + }else{ + tmpNode = document.createElement('div'); + dojo.body().appendChild(tmpNode); + dojo.addClass(tmpNode,"dojoxFloatingDockDefault"); + 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"); + + // Initial resize to give child the opportunity to lay itself out + this.resize(dojo.coords(this.domNode)); + + this._started = true; + }, + + setTitle: function(/* String */ title){ + // summary: Update the Title bar with a new string + this.titleNode.innerHTML = title; + this.title = title; + }, + + close: function(){ + // summary: Close and destroy this widget + if(!this.closable){ return; } + dojo.unsubscribe(this._listener); + this.hide(dojo.hitch(this,"destroyRecursive",arguments)); + }, + + hide: function(/* Function? */ callback){ + // summary: Close, but do not destroy this FloatingPane + 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.dockable){ + 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"; + if (this.dockTo && this.dockable) { 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 full-screen (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.dockable){ + this._dockNode = this.dockTo.addNode(this); + this._isDocked = true; + } + }, + + resize: function(/* Object */dim){ + // summary: Size the FloatingPane and place accordingly + this._currentState = dim; + + // From the ResizeHandle we only get width and height information + var dns = this.domNode.style; + if(dim.t){ dns.top = dim.t+"px"; } + if(dim.l){ dns.left = dim.l+"px"; } + dns.width = dim.w+"px"; + dns.height = dim.h+"px"; + + // Now resize canvas + var mbCanvas = { l: 0, t: 0, w: dim.w, h: (dim.h - this.focusNode.offsetHeight) }; + dojo.marginBox(this.canvas, mbCanvas); + + // If the single child can resize, forward resize event to it so it can + // fit itself properly into the content area + this._checkIfSingleChild(); + if(this._singleChild && this._singleChild.resize){ + this._singleChild.resize(mbCanvas); + } + }, + + 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); + if(this._resizeHandle){ + this._resizeHandle.destroy(); + } + this.inherited(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(){ + + 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){ + this.connect(this.domNode, "onresize", "_positionDock"); + } + } + this._positionDock(null); + this.inherited(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; + }), 125); + } + } + } + + +}); + +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(); + } + +}); + +} diff --git a/includes/js/dojox/layout/README b/includes/js/dojox/layout/README new file mode 100644 index 0000000..81cbe0d --- /dev/null +++ b/includes/js/dojox/layout/README @@ -0,0 +1,75 @@ +------------------------------------------------------------------------------- +dojox.layout +------------------------------------------------------------------------------- +Version 1.0 +Release date: 10/31/2007 +------------------------------------------------------------------------------- +Project state: +[experimental | 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.RadioGroup - a stack container with sliding or fading transitions + (and an internal button set to mimic a tab container, but fires on hover) + + dojox.layout.ScrollPane - a dynamically scrolling pane. Adjusts naturally sized content + to a "viewport" and scrolls based on relative mouse position. + + dojox.layout.DragPane - an experimental start of a simple Dragable pane + (drag larger content around inside of a sized pane) Does not support borderContainer + LayoutContainer resizing yet. + +------------------------------------------------------------------------------- +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> diff --git a/includes/js/dojox/layout/RadioGroup.js b/includes/js/dojox/layout/RadioGroup.js new file mode 100644 index 0000000..98317ee --- /dev/null +++ b/includes/js/dojox/layout/RadioGroup.js @@ -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"); + }); + } +}); + +} diff --git a/includes/js/dojox/layout/ResizeHandle.js b/includes/js/dojox/layout/ResizeHandle.js new file mode 100644 index 0000000..0441c98 --- /dev/null +++ b/includes/js/dojox/layout/ResizeHandle.js @@ -0,0 +1,271 @@ +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: A dragable handle used to resize an attached node. + // description: + // 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, + + templateString: '<div dojoAttachPoint="resizeHandle" class="dojoxResizeHandle"><div></div></div>', + + postCreate: function(){ + // summary: setup our one major listener upon creation + this.connect(this.resizeHandle, "onmousedown", "_beginSizing"); + if(!this.activeResize){ + // there shall be only a single resize rubberbox that at the top + // level so that we can overlay it on anything whenever the user + // resizes something. Since there is only one mouse pointer he + // can't at once resize multiple things interactively. + this._resizeHelper = dijit.byId('dojoxGlobalResizeHelper'); + + if (!this._resizeHelper){ + var tmpNode = document.createElement('div'); + tmpNode.style.display = "none"; + dojo.body().appendChild(tmpNode); + dojo.addClass(tmpNode,this.activeResizeClass); + this._resizeHelper = new dojox.layout._ResizeHelper({ + id: 'dojoxGlobalResizeHelper'},tmpNode); + this._resizeHelper.startup(); + } + }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); + + this.targetDomNode = this.targetWidget ? this.targetWidget.domNode : dojo.byId(this.targetId); + if (this.targetContainer) { this.targetDomNode = this.targetContainer; } + if (!this.targetDomNode){ return false; } + + if (!this.activeResize) { + var c = dojo.coords(this.targetDomNode, true); + this._resizeHelper.resize({l: c.x, t: c.y, w: c.w, h: c.h}); + this._resizeHelper.show(); + } + + 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._pconnects = []; + this._pconnects.push(dojo.connect(document,"onmousemove",this,"_updateSizing")); + this._pconnects.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; } + this._resizeHelper.resize(tmp); + } + e.preventDefault(); + }, + + _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 {w:newW, h: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(tmp); + }else{ + if(this.animateSizing){ + var anim = dojo.fx[this.animateMethod]([ + dojo.animateProperty({ + node: this.targetDomNode, + properties: { + width: { start: this.startSize.w, end: tmp.w, unit:'px' } + }, + duration: this.animateDuration + }), + dojo.animateProperty({ + node: this.targetDomNode, + properties: { + height: { start: this.startSize.h, end: tmp.h, unit:'px' } + }, + duration: this.animateDuration + }) + ]); + anim.play(); + }else{ + dojo.style(this.targetDomNode,"width",tmp.w+"px"); + dojo.style(this.targetDomNode,"height",tmp.h+"px"); + } + } + }, + + _endSizing: function(/*Event*/ e){ + // summary: disconnect listenrs and cleanup sizing + dojo.forEach(this._pconnects,dojo.disconnect); + if(!this.activeResize){ + this._resizeHelper.hide(); + this._changeSizing(e); + } + this._isSizing = false; + this.onResize(e); + }, + + onResize: function(e){ + // summary: Stub fired when sizing is done, for things like Grid + } + +}); + +dojo.declare("dojox.layout._ResizeHelper", + dijit._Widget, + { + // summary: A global private resize helper shared between any resizeHandle with activeSizing='false; + + startup: function(){ + if(this._started){ return; } + this.inherited(arguments); + }, + + show: function(){ + // summary: show helper to start resizing + dojo.fadeIn({ node: this.domNode, duration:120, + beforeBegin: dojo.hitch(this,function(){ + this.domNode.style.display=''; + }) + }).play(); + }, + + hide: function(){ + // summary: hide helper after resizing is complete + dojo.fadeOut({ node:this.domNode, duration:250, + onEnd: dojo.hitch(this,function(){ + this.domNode.style.display="none"; + }) + }).play(); + }, + + resize: function(/* Object */dim){ + // summary: size the widget and place accordingly + + // FIXME: this is off when padding present + dojo.marginBox(this.domNode, dim); + } +}); + +} diff --git a/includes/js/dojox/layout/ScrollPane.js b/includes/js/dojox/layout/ScrollPane.js new file mode 100644 index 0000000..5ae29bc --- /dev/null +++ b/includes/js/dojox/layout/ScrollPane.js @@ -0,0 +1,114 @@ +if(!dojo._hasResource["dojox.layout.ScrollPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.layout.ScrollPane"] = true; +dojo.provide("dojox.layout.ScrollPane"); +dojo.experimental("dojox.layout.ScrollPane"); + +dojo.require("dijit.layout._LayoutWidget"); +dojo.require("dijit._Templated"); + +dojo.declare("dojox.layout.ScrollPane", + [dijit.layout._LayoutWidget,dijit._Templated], + { + // summary: A pane that "scrolls" its content based on the mouse poisition inside + // + // description: + // A sizable container that takes it's content's natural size and creates + // a scroll effect based on the relative mouse position. It is an interesting + // way to display lists of data, or blocks of content, within a confined + // space. + // + // Horizontal scrolling is supported. Combination scrolling is not. + // + // FIXME: need to adust the _line somehow, it stops scrolling + // + // example: + // | <div dojoType="dojox.layout.ScrollPane" style="width:150px height:300px;"> + // | <!-- any height content --> + // | </div> + // + // _line: dojo._Line + // storage for our top and bottom most scrollpoints + _line: null, + + // _lo: the height of the visible pane + _lo: null, + + _offset: 15, + + // orientation: String + // either "horizontal" or "vertical" for scroll orientation. + orientation: "vertical", + + templateString:"<div class=\"dojoxScrollWindow\" dojoAttachEvent=\"onmouseenter: _enter, onmouseleave: _leave\">\n <div class=\"dojoxScrollWrapper\" style=\"${style}\" dojoAttachPoint=\"wrapper\" dojoAttachEvent=\"onmousemove: _calc\">\n\t<div class=\"dojoxScrollPane\" dojoAttachPoint=\"containerNode\"></div>\n </div>\n <div dojoAttachPoint=\"helper\" class=\"dojoxScrollHelper\"><span class=\"helperInner\">|</span></div>\n</div>\n", + + layout: function(){ + // summary: calculates required sizes. call this if we add/remove content manually, or reload the content. + + dojo.style(this.wrapper,this._dir,this.domNode.style[this._dir]); + this._lo = dojo.coords(this.wrapper,true); + this._size = Math.max(0,(this._vertical ? + (this.containerNode.scrollHeight - this._lo.h) : + (this.containerNode.scrollWidth - this._lo.w) + )); + this._line = new dojo._Line(0-this._offset,this._size+(this._offset*2)); + + // share a relative position w the scroll offset via a line + var u = this._lo[(this._vertical?"h":"w")] + var size = u * (u / Math.max(1,this._size)); + var center = Math.floor(u - size); + this._helpLine = new dojo._Line(0,center); + + // size the helper + dojo.style(this.helper,this._dir,Math.floor(size)+"px"); + + }, + + postCreate: function(){ + this.inherited(arguments); + + // for the helper + this._showAnim = dojo._fade({ node:this.helper, end:0.5, duration:350 }); + this._hideAnim = dojo.fadeOut({ node:this.helper, duration: 750 }); + + // orientation helper + this._vertical = (this.orientation == "vertical"); + if(!this._vertical){ + dojo.addClass(this.containerNode,"dijitInline"); + this._edge = "left"; + this._dir = "width"; + }else{ + this._dir = "height"; + this._edge = "top"; + } + + this._hideAnim.play(); + dojo.style(this.wrapper,"overflow","hidden"); + + }, + + _set: function(/* Float */n){ + // summary: set the pane's scroll offset, and position the virtual scroll helper + this.wrapper[(this._vertical ? "scrollTop" : "scrollLeft")] = Math.floor(this._line.getValue(n)); + dojo.style(this.helper,this._edge,Math.floor(this._helpLine.getValue(n))+"px"); + }, + + _calc: function(/* Event */e){ + // summary: calculate the relative offset of the cursor over the node, and call _set + this._set(this._vertical ? + ((e.pageY-(this._lo.y))/this._lo.h) : + ((e.pageX-(this._lo.x))/this._lo.w) + ); + }, + + _enter: function(e){ + if(this._hideAnim && this._hideAnim.status()=="playing"){ this._hideAnim.stop(); } + this._showAnim.play(); + }, + + _leave: function(e){ + this._hideAnim.play(); + } + +}); + +} diff --git a/includes/js/dojox/layout/resources/ExpandoPane.css b/includes/js/dojox/layout/resources/ExpandoPane.css new file mode 100644 index 0000000..b0183b7 --- /dev/null +++ b/includes/js/dojox/layout/resources/ExpandoPane.css @@ -0,0 +1,99 @@ +.dojoxExpandoPane { + overflow:hidden; + margin-top:1px; + border-top:1px solid #ccc; + z-index:440; + background:#fff; +} +.dojoxExpandoPane .dojoxExpandoWrapper { + overflow:hidden; +} +.dojoxExpandoIcon { + width:14px; + cursor:pointer; + background-position:-60px 0px; + height:14px; +} +.soria .dojoxExpandoIcon { + background: url('../../../dijit/themes/soria/images/spriteRoundedIconsSmall.png') no-repeat center center; +} +.tundra .dojoxExpandoLeft .dojoxExpandoIcon, +.nihilo .dojoxExpandoLeft .dojoxExpandoIcon { + + background: url('../../../dijit/themes/tundra/images/minusButton.gif') no-repeat; +} +.tundra .dojoxExpandoRight .dojoxExpandoIcon, +.nihilo .dojoxExpandoRight .dojoxExpandoIcon { + + background: url('../../../dijit/themes/tundra/images/minusButton.gif') no-repeat; +} +.tundra .dojoxExpandoClosed .dojoxExpandoIcon { + background: url('../../../dijit/themes/tundra/images/plusButton.gif') no-repeat; +} +.dojoxExpandoClosed .dojoxExpandoIcon { + background-position: 0px 0px; +} +.dojoxExpandoClosed .dojoxExpandoTitleNode { + visibility:hidden; +} +.dojoxExpandoTitleNode { + padding-right:6px; padding-left:6px; +} +.dojoxExpandoClosed .dijitContentPane { + overflow: hidden; +} +.dojoxExpandoIcon .a11yNode { + display:none; + visibility:hidden; +} +.dojoxExpandoBottom .dojoxExpandoIcon, +.dojoxExpandoTop .dojoxExpandoIcon, +.dojoxExpandoLeft .dojoxExpandoIcon { + float:right; +} +.dojoxExpandoRight .dojoxExpandoIcon { + float:left; +} +.nihilo .dojoxExpandoTitle { + height:18px; + font-size:0.9em; + font-weight:bold; + padding:3px; + padding-top:7px; + padding-bottom:7px; + background:#fafafa url("../../../dijit/themes/nihilo/images/tabStripe.gif") repeat-x left bottom; + +} +.nihilo .dojoxExpandoTop { + border-bottom:1px solid #ccc; + border-left:1px solid #ccc; + border-right:1px solid #ccc; +} +.soria .dojoxExpandoTop { + +} +.soria .dojoxExpandoTitle { + height:18px; + font-size:0.9em; + font-weight:bold; + padding:3px; + padding-top:7px; + padding-bottom:7px; + background:#f0f4fc url("../../../dijit/themes/soria/images/tabStripe.gif") repeat-x left bottom; +} +.tundra .dojoxExpandoTitle { + font-size: 0.9em; + font-weight: bold; + padding: 3px; + padding-top: 7px; + padding-bottom: 7px; + background: #fafafa url("../../../dijit/themes/tundra/images/accordionItemActive.gif") repeat-x scroll left bottom; +} +.tundra .dojoxExpandoClosed { + + background-color: #fafafa; +} +.tundra .dojoxExpandoClosed .dojoxExpandoTitle { + background-image: none; + background-color: transparent; +} diff --git a/includes/js/dojox/layout/resources/ExpandoPane.css.commented.css b/includes/js/dojox/layout/resources/ExpandoPane.css.commented.css new file mode 100644 index 0000000..4edd3f5 --- /dev/null +++ b/includes/js/dojox/layout/resources/ExpandoPane.css.commented.css @@ -0,0 +1,116 @@ +.dojoxExpandoPane { + overflow:hidden; + margin-top:1px; + border-top:1px solid #ccc; + z-index:440; + background:#fff; +} +.dojoxExpandoPane .dojoxExpandoWrapper { + overflow:hidden; +} +.dojoxExpandoIcon { + width:14px; + cursor:pointer; + background-position:-60px 0px; + height:14px; +} + +.soria .dojoxExpandoIcon { + background: url('../../../dijit/themes/soria/images/spriteRoundedIconsSmall.png') no-repeat center center; +} + +.tundra .dojoxExpandoLeft .dojoxExpandoIcon, +.nihilo .dojoxExpandoLeft .dojoxExpandoIcon { + /* + background: url('../../presentation/resources/icons/prev.png') no-repeat; + */ + background: url('../../../dijit/themes/tundra/images/minusButton.gif') no-repeat; +} + +.tundra .dojoxExpandoRight .dojoxExpandoIcon, +.nihilo .dojoxExpandoRight .dojoxExpandoIcon { + /* + background: url('../../presentation/resources/icons/next.png') no-repeat; + */ + background: url('../../../dijit/themes/tundra/images/minusButton.gif') no-repeat; +} + +.tundra .dojoxExpandoClosed .dojoxExpandoIcon { + background: url('../../../dijit/themes/tundra/images/plusButton.gif') no-repeat; +} + +.dojoxExpandoClosed .dojoxExpandoIcon { + background-position: 0px 0px; +} +.dojoxExpandoClosed .dojoxExpandoTitleNode { + visibility:hidden; +} +.dojoxExpandoTitleNode { + padding-right:6px; padding-left:6px; +} +.dojoxExpandoClosed .dijitContentPane { + overflow: hidden; +} +.dojoxExpandoIcon .a11yNode { + display:none; + visibility:hidden; +} +.dojoxExpandoBottom .dojoxExpandoIcon, +.dojoxExpandoTop .dojoxExpandoIcon, +.dojoxExpandoLeft .dojoxExpandoIcon { + float:right; +} +.dojoxExpandoRight .dojoxExpandoIcon { + float:left; +} + +.nihilo .dojoxExpandoTitle { + height:18px; + font-size:0.9em; + font-weight:bold; + padding:3px; + padding-top:7px; + padding-bottom:7px; + background:#fafafa url("../../../dijit/themes/nihilo/images/tabStripe.gif") repeat-x left bottom; + +} + +.nihilo .dojoxExpandoTop { + border-bottom:1px solid #ccc; + border-left:1px solid #ccc; + border-right:1px solid #ccc; +} + +.soria .dojoxExpandoTop { + +} + +.soria .dojoxExpandoTitle { + height:18px; + font-size:0.9em; + font-weight:bold; + padding:3px; + padding-top:7px; + padding-bottom:7px; + background:#f0f4fc url("../../../dijit/themes/soria/images/tabStripe.gif") repeat-x left bottom; +} + +.tundra .dojoxExpandoTitle { + font-size: 0.9em; + font-weight: bold; + padding: 3px; + padding-top: 7px; + padding-bottom: 7px; + background: #fafafa url("../../../dijit/themes/tundra/images/accordionItemActive.gif") repeat-x scroll left bottom; +} + +.tundra .dojoxExpandoClosed { + /* + background: #ececec url("../../grid/_grid/images/tabEnabled_rotated.png") repeat-y scroll left top !important; + */ + background-color: #fafafa; +} +.tundra .dojoxExpandoClosed .dojoxExpandoTitle { + background-image: none; + background-color: transparent; +} diff --git a/includes/js/dojox/layout/resources/ExpandoPane.html b/includes/js/dojox/layout/resources/ExpandoPane.html new file mode 100644 index 0000000..d28222e --- /dev/null +++ b/includes/js/dojox/layout/resources/ExpandoPane.html @@ -0,0 +1,9 @@ +<div class="dojoxExpandoPane" dojoAttachEvent="ondblclick:toggle" > + <div dojoAttachPoint="titleWrapper" class="dojoxExpandoTitle"> + <div class="dojoxExpandoIcon" dojoAttachPoint="iconNode" dojoAttachEvent="onclick:toggle"><span class="a11yNode">X</span></div> + <span class="dojoxExpandoTitleNode" dojoAttachPoint="titleNode">${title}</span> + </div> + <div class="dojoxExpandoWrapper" dojoAttachPoint="cwrapper" dojoAttachEvent="ondblclick:_trap"> + <div class="dojoxExpandoContent" dojoAttachPoint="containerNode"></div> + </div> +</div>
\ No newline at end of file diff --git a/includes/js/dojox/layout/resources/FloatingPane.css b/includes/js/dojox/layout/resources/FloatingPane.css new file mode 100644 index 0000000..db8a8c9 --- /dev/null +++ b/includes/js/dojox/layout/resources/FloatingPane.css @@ -0,0 +1,152 @@ +.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; +} +.dojoxFloatingPaneTitle { + background: #cccccc; + background:#fafafa repeat-x bottom left; + border:1px solid #bfbfbf; + padding:4px 4px 2px 4px; + cursor: pointer; + white-space: nowrap; +} +.soria .dojoxFloatingPaneTitle { + background:#fff url("../../../dijit/themes/soria/images/titleBar.png") repeat-x top left; + border:1px solid #b1badf; + font-size: 0.9em; + font-weight: bold; + line-height:1.2em; +} +.tundra .dojoxFloatingPaneTitle { + background:#fafafa url("../../../dijit/themes/tundra/images/titleBarBg.gif") repeat-x bottom left; + border:1px solid #bfbfbf; + color:#000; +} +.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; +} +.soria .dojoxFloatingMinimizeIcon { + background:url("../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png") no-repeat -15px top; +} +.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; +} +.soria .dojoxFloatingMaximizeIcon { + background:url("../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png") no-repeat -45px top; +} +.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:15px; + height:15px; + overflow:hidden; + float:right; + cursor:pointer; +} +.soria .dojoxFloatingCloseIcon { + background:url("../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png") no-repeat -60px top; +} +.tundra .dojoxFloatingCloseIcon { + background:url('../../../dijit/themes/tundra/images/tabClose.png') no-repeat center center; +} +.dojoxFloatingDockDefault { + position:absolute; + bottom:0px; + left:0px; + overflow:hidden; + margin:0; + margin-bottom:3px; + padding:0px; + width:100%; + z-index:99; + background:transparent; + +} +.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; +} +.soria .dojoxDockRestoreButton { + background:url("../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png") no-repeat -45px top; +} +.dojoxDockTitleNode { + overflow:hidden; +} +.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/titleBar.png") repeat-x; +} +.dojoxFloatingPaneContent { + overflow: auto; + background-color: #fff; + height: 100%; + width: 100%; +} +.dojoxFloatingPaneCanvas { + background-color:#fff; +} diff --git a/includes/js/dojox/layout/resources/FloatingPane.css.commented.css b/includes/js/dojox/layout/resources/FloatingPane.css.commented.css new file mode 100644 index 0000000..2880dd6 --- /dev/null +++ b/includes/js/dojox/layout/resources/FloatingPane.css.commented.css @@ -0,0 +1,183 @@ +.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 repeat-x bottom left; + border:1px solid #bfbfbf; + padding:4px 4px 2px 4px; + cursor: pointer; + white-space: nowrap; +} + +.soria .dojoxFloatingPaneTitle { + background:#fff url("../../../dijit/themes/soria/images/titleBar.png") repeat-x top left; + border:1px solid #b1badf; + font-size: 0.9em; + font-weight: bold; + line-height:1.2em; +} + + +.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; +} +.soria .dojoxFloatingMinimizeIcon { + background:url("../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png") no-repeat -15px top; + +} + +.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; +} +.soria .dojoxFloatingMaximizeIcon { + background:url("../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png") no-repeat -45px top; +} + +.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:15px; + height:15px; + overflow:hidden; + float:right; + cursor:pointer; +} + +.soria .dojoxFloatingCloseIcon { + background:url("../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png") no-repeat -60px top; +} + +.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; +} +.soria .dojoxDockRestoreButton { + background:url("../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png") no-repeat -45px top; +} + +.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/titleBar.png") repeat-x; +} + +.dojoxFloatingPaneContent { + overflow: auto; + background-color: #fff; + height: 100%; + width: 100%; +} + +.dojoxFloatingPaneCanvas { + background-color:#fff; +} diff --git a/includes/js/dojox/layout/resources/FloatingPane.html b/includes/js/dojox/layout/resources/FloatingPane.html new file mode 100644 index 0000000..de57d6c --- /dev/null +++ b/includes/js/dojox/layout/resources/FloatingPane.html @@ -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> diff --git a/includes/js/dojox/layout/resources/RadioGroup.css b/includes/js/dojox/layout/resources/RadioGroup.css new file mode 100644 index 0000000..684fa36 --- /dev/null +++ b/includes/js/dojox/layout/resources/RadioGroup.css @@ -0,0 +1,40 @@ + +.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%; +} diff --git a/includes/js/dojox/layout/resources/RadioGroup.css.commented.css b/includes/js/dojox/layout/resources/RadioGroup.css.commented.css new file mode 100644 index 0000000..ecd0266 --- /dev/null +++ b/includes/js/dojox/layout/resources/RadioGroup.css.commented.css @@ -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%; +} diff --git a/includes/js/dojox/layout/resources/ResizeHandle.css b/includes/js/dojox/layout/resources/ResizeHandle.css new file mode 100644 index 0000000..b68f2d4 --- /dev/null +++ b/includes/js/dojox/layout/resources/ResizeHandle.css @@ -0,0 +1,28 @@ +.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; + z-index:999; +} diff --git a/includes/js/dojox/layout/resources/ResizeHandle.css.commented.css b/includes/js/dojox/layout/resources/ResizeHandle.css.commented.css new file mode 100644 index 0000000..9e5b66d --- /dev/null +++ b/includes/js/dojox/layout/resources/ResizeHandle.css.commented.css @@ -0,0 +1,34 @@ +.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; + z-index:999; +} diff --git a/includes/js/dojox/layout/resources/ScrollPane.css b/includes/js/dojox/layout/resources/ScrollPane.css new file mode 100644 index 0000000..610687f --- /dev/null +++ b/includes/js/dojox/layout/resources/ScrollPane.css @@ -0,0 +1,21 @@ +.dojoxScrollWindow { + position:relative; +} +.dojoxScrollHelper .helperInner { + visibility: hidden; +} +.dojoxScrollHelper { + border:1px solid #b7b7b7; + width:4px; + background:#ededed; + height:4px; + position:absolute; + top:4px; + left:4px; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; +} +.dojoxScrollWrapper { + width:100%; +} diff --git a/includes/js/dojox/layout/resources/ScrollPane.css.commented.css b/includes/js/dojox/layout/resources/ScrollPane.css.commented.css new file mode 100644 index 0000000..c5d6914 --- /dev/null +++ b/includes/js/dojox/layout/resources/ScrollPane.css.commented.css @@ -0,0 +1,24 @@ +.dojoxScrollWindow { + position:relative; +} + +.dojoxScrollHelper .helperInner { + visibility: hidden; +} + +.dojoxScrollHelper { + border:1px solid #b7b7b7; + width:4px; + background:#ededed; + height:4px; + position:absolute; + top:4px; + left:4px; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; +} + +.dojoxScrollWrapper { + width:100%; +} diff --git a/includes/js/dojox/layout/resources/ScrollPane.html b/includes/js/dojox/layout/resources/ScrollPane.html new file mode 100644 index 0000000..4b3df77 --- /dev/null +++ b/includes/js/dojox/layout/resources/ScrollPane.html @@ -0,0 +1,6 @@ +<div class="dojoxScrollWindow" dojoAttachEvent="onmouseenter: _enter, onmouseleave: _leave"> + <div class="dojoxScrollWrapper" style="${style}" dojoAttachPoint="wrapper" dojoAttachEvent="onmousemove: _calc"> + <div class="dojoxScrollPane" dojoAttachPoint="containerNode"></div> + </div> + <div dojoAttachPoint="helper" class="dojoxScrollHelper"><span class="helperInner">|</span></div> +</div>
\ No newline at end of file diff --git a/includes/js/dojox/layout/resources/icons/resize.png b/includes/js/dojox/layout/resources/icons/resize.png Binary files differnew file mode 100644 index 0000000..17f39d0 --- /dev/null +++ b/includes/js/dojox/layout/resources/icons/resize.png diff --git a/includes/js/dojox/layout/tests/ContentPane.html b/includes/js/dojox/layout/tests/ContentPane.html new file mode 100644 index 0000000..cb3a9f6 --- /dev/null +++ b/includes/js/dojox/layout/tests/ContentPane.html @@ -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>
\ No newline at end of file diff --git a/includes/js/dojox/layout/tests/_bottomPane.html b/includes/js/dojox/layout/tests/_bottomPane.html new file mode 100644 index 0000000..8f5090a --- /dev/null +++ b/includes/js/dojox/layout/tests/_bottomPane.html @@ -0,0 +1,53 @@ +<div class="wrap"> + Bottom Pane Content: + <button dojoType="dijit.form.Button"> + Setup Toggler + <script type="dojo/method" event="onClick"> + // only do this once: + this.setAttribute('disabled',true); + var pane = dijit.getEnclosingWidget(this.domNode.parentNode); + + dijit.registry + .filter(function(n){ + // there is probably an easier way to get all the Splitters + return n.declaredClass == "dijit.layout._Splitter"; + }) + .forEach(function(n){ + // add some stuff to this instance: + dojo.mixin(n,{ + // toggle additions: + _hackSize:null, + _hackShowing:true, + /*_setHack:function(e){ + this._hackShowing = true; + },*/ + _tgl: function(e){ + if(this._hackShowing){ + this._hackSize = dojo.marginBox(this.child.domNode); + this.child.domNode.style.height = "1px"; + }else{ + this.child.domNode.style.height = this._hackSize.h + "px"; + } + // toggle state, and call layout() on parent + this._hackShowing = !this._hackShowing; + dijit.getEnclosingWidget(this.domNode.parentNode).layout(); + } + }); + // using it's internal connect method, setup the toggler + n.connect(n.domNode,"ondblclick","_tgl"); + //n.connect(n,"_cleanupHandlers","_setHack"); + }); + </script> + </button> + + <button dojoType="dijit.form.Button"> + Minimize + <script type="dojo/method" event="onClick"> + // simplified version of above: + var pane = dijit.getEnclosingWidget(this.domNode.parentNode); + pane.domNode.style.height = "1px"; + dijit.byId("bc").layout(); + </script> + </button> + +</div>
\ No newline at end of file diff --git a/includes/js/dojox/layout/tests/_expando.css b/includes/js/dojox/layout/tests/_expando.css new file mode 100644 index 0000000..8efd20e --- /dev/null +++ b/includes/js/dojox/layout/tests/_expando.css @@ -0,0 +1,477 @@ + +body, div, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { + margin: 0; + padding: 0; +} +fieldset, img { + border: 0 none; +} +address, caption, cite, code, dfn, th, var { + font-style: normal; + font-weight: normal; +} +caption, th { + text-align: left; +} +q:before, q:after { + content:""; +} +abbr, acronym { + border:0; +} +body { + font: 13px Myriad,Arial,Helvetica,clean,sans-serif; + *font-size: small; + *font: x-small; +} +h1 { + font-size: 1.5em; + font-weight: normal; + line-height: 1em; + margin-top: 1em; + margin-bottom:0; +} +h2 { + font-size: 1.1667em; + font-weight: bold; + line-height: 1.286em; + margin-top: 1.929em; + margin-bottom:0.643em; +} +h3, h4, h5, h6 { + font-size: 1em; + font-weight: bold; + line-height: 1.5em; + margin-top: 1.5em; + margin-bottom: 0; +} +p { + font-size: 1em; + margin-top: 1.5em; + margin-bottom: 1.5em; + line-height: 1.5em; +} +blockquote { + font-size: 0.916em; + margin-top: 3.272em; + margin-bottom: 3.272em; + line-height: 1.636em; + padding: 1.636em; + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; +} +ol li, ul li { + font-size: 1em; + line-height: 1.5em; + margin: 0; +} +pre, code { + font-size:115%; + *font-size:100%; + font-family: Courier, "Courier New"; + background-color: #efefef; + border: 1px solid #ccc; +} +pre { + border-width: 1px 0; + padding: 1.5em; +} +table { font-size:100%; } +table.dojoTabular { + border-collapse: collapse; + border-spacing: 0; + border: 1px solid #ccc; + margin: 0 1.5em; +} +.dojoTabular th { + text-align: center; + font-weight: bold; +} +table.dojoTabular thead, table.dojoTabular tfoot { + background-color: #efefef; + border: 1px solid #ccc; + border-width: 1px 0; +} +table.dojoTabular thead tr th, +table.dojoTabular thead tr td, +table.dojoTabular tbody tr td, +table.dojoTabular tfoot tr td { + padding: 0.25em 0.5em; +} +body { + background:#fff url(../../../dijit/tests/images/testsBodyBg.gif) repeat-x top left; + padding:2em 2em 2em 2em; +} +h1.testTitle { + font-size:2em; + margin:0 0 1em 0; +} +.plusIcon, .plusBlockIcon { + background-image: url(../../../dijit/tests/images/plus.gif); + background-repeat: no-repeat; + width: 16px; + height: 16px; +} +.plusBlockIcon { + display: block !important; +} +.noteIcon { + background-image: url(../../../dijit/tests/images/note.gif); + background-repeat: no-repeat; + width: 20px; + height: 20px; +} +.flatScreenIcon { + background-image: url(../../../dijit/tests/images/flatScreen.gif); + background-repeat: no-repeat; + width: 32px; + height: 32px; +} +.dijitTestNodeDialog { + position:absolute; + top:5px; + right:5px; + display:block; + width:200px; + visibility:hidden; + background-color:#fff !important; + color:#000 !important; + border:1px solid #000; + padding:5px; +} +.dijitTestNodeDialog table { + background-color:#fff !important; +} +.dijitTestNodeDialog td { + padding:3px; +} +.dijitTestNodeShowing { + visibility:visible; +} +.customFolderOpenedIcon, .customFolderClosedIcon { + background-image: url(../../../dijit/tests/../demos/mail/icons.png); + background-repeat: no-repeat; + width: 16px; + height: 16px; + text-align: center; + padding-right:4px; + background-position: -44px; +} +.dj_ie6 .customFolderOpenedIcon, .dj_ie6 .customFolderClosedIcon { + background-image: url(../../../dijit/tests/../demos/mail/icons.gif); +} +.customFolderClosedIcon { + background-position: -154px; +} +body .medium { + font-size: larger; +} +.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; +} +.dojoxFloatingPaneTitle { + background: #cccccc; + background:#fafafa repeat-x bottom left; + border:1px solid #bfbfbf; + padding:4px 4px 2px 4px; + cursor: pointer; + white-space: nowrap; +} +.soria .dojoxFloatingPaneTitle { + background:#fff url(../../../dijit/themes/soria/images/titleBar.png) repeat-x top left; + border:1px solid #b1badf; + font-size: 0.9em; + font-weight: bold; + line-height:1.2em; +} +.tundra .dojoxFloatingPaneTitle { + background:#fafafa url(../../../dijit/themes/tundra/images/titleBarBg.gif) repeat-x bottom left; + border:1px solid #bfbfbf; + color:#000; +} +.dojoxFloatingCloseIcon { + background:url(../resources/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; +} +.soria .dojoxFloatingMinimizeIcon { + background:url(../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png) no-repeat -15px top; +} +.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; +} +.soria .dojoxFloatingMaximizeIcon { + background:url(../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png) no-repeat -45px top; +} +.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(../resources/icons/resize.png) no-repeat bottom right; + position:absolute; + right:0; + bottom:0; + width:16px; + height:16px; + cursor:nw-resize; +} +.dojoxFloatingCloseIcon { + width:15px; + height:15px; + overflow:hidden; + float:right; + cursor:pointer; +} +.soria .dojoxFloatingCloseIcon { + background:url(../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png) no-repeat -60px top; +} +.tundra .dojoxFloatingCloseIcon { + background:url(../../../dijit/themes/tundra/images/tabClose.png) no-repeat center center; +} +.dojoxFloatingDockDefault { + position:absolute; + bottom:0px; + left:0px; + overflow:hidden; + margin:0; + margin-bottom:3px; + padding:0px; + width:100%; + z-index:99; + background:transparent; + +} +.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; +} +.soria .dojoxDockRestoreButton { + background:url(../../../dijit/themes/soria/images/spriteRoundedIconsSmallBl.png) no-repeat -45px top; +} +.dojoxDockTitleNode { + overflow:hidden; +} +.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(../resources/images/floatTitleBarBg.gif) repeat-x bottom left; +} +.soria .dojoxDockNode { + background:#b7cdee url(../../../dijit/themes/soria/images/titleBar.png) repeat-x; +} +.dojoxFloatingPaneContent { + overflow: auto; + background-color: #fff; + height: 100%; + width: 100%; +} +.dojoxFloatingPaneCanvas { + background-color:#fff; +} +.dojoxExpandoPane { + overflow:hidden; + margin-top:1px; + border-top:1px solid #ccc; + z-index:440; + background:#fff; +} +.dojoxExpandoPane .dojoxExpandoWrapper { + overflow:hidden; +} +.dojoxExpandoIcon { + width:14px; + cursor:pointer; + background-position:-60px 0px; + height:14px; +} +.soria .dojoxExpandoIcon { + background: url(../../../dijit/themes/soria/images/spriteRoundedIconsSmall.png) no-repeat center center; +} +.tundra .dojoxExpandoLeft .dojoxExpandoIcon, +.nihilo .dojoxExpandoLeft .dojoxExpandoIcon { + + background: url(../../../dijit/themes/tundra/images/minusButton.gif) no-repeat; +} +.tundra .dojoxExpandoRight .dojoxExpandoIcon, +.nihilo .dojoxExpandoRight .dojoxExpandoIcon { + + background: url(../../../dijit/themes/tundra/images/minusButton.gif) no-repeat; +} +.tundra .dojoxExpandoClosed .dojoxExpandoIcon { + background: url(../../../dijit/themes/tundra/images/plusButton.gif) no-repeat; +} +.dojoxExpandoClosed .dojoxExpandoIcon { + background-position: 0px 0px; +} +.dojoxExpandoClosed .dojoxExpandoTitleNode { + visibility:hidden; +} +.dojoxExpandoTitleNode { + padding-right:6px; padding-left:6px; +} +.dojoxExpandoClosed .dijitContentPane { + overflow: hidden; +} +.dojoxExpandoIcon .a11yNode { + display:none; + visibility:hidden; +} +.dojoxExpandoBottom .dojoxExpandoIcon, +.dojoxExpandoTop .dojoxExpandoIcon, +.dojoxExpandoLeft .dojoxExpandoIcon { + float:right; +} +.dojoxExpandoRight .dojoxExpandoIcon { + float:left; +} +.nihilo .dojoxExpandoTitle { + height:18px; + font-size:0.9em; + font-weight:bold; + padding:3px; + padding-top:7px; + padding-bottom:7px; + background:#fafafa url(../../../dijit/themes/nihilo/images/tabStripe.gif) repeat-x left bottom; + +} +.nihilo .dojoxExpandoTop { + border-bottom:1px solid #ccc; + border-left:1px solid #ccc; + border-right:1px solid #ccc; +} +.soria .dojoxExpandoTop { + +} +.soria .dojoxExpandoTitle { + height:18px; + font-size:0.9em; + font-weight:bold; + padding:3px; + padding-top:7px; + padding-bottom:7px; + background:#f0f4fc url(../../../dijit/themes/soria/images/tabStripe.gif) repeat-x left bottom; +} +.tundra .dojoxExpandoTitle { + font-size: 0.9em; + font-weight: bold; + padding: 3px; + padding-top: 7px; + padding-bottom: 7px; + background: #fafafa url(../../../dijit/themes/tundra/images/accordionItemActive.gif) repeat-x scroll left bottom; +} +.tundra .dojoxExpandoClosed { + + background-color: #fafafa; +} +.tundra .dojoxExpandoClosed .dojoxExpandoTitle { + background-image: none; + background-color: transparent; +} +body, html { + margin:0; + padding:0; + width:100%; + height:100%; + background: #fafafa; + overflow: hidden; +} +.wrap { + margin: 0; + padding: 15px; +} +.wrap h3 { + margin-top: 5px; +} +#header { + height:32px; +} +.searchBar { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 25px; + border-bottom: 1px solid #666; + background: #fafafa; +} +.searchBar p { + margin: 0; + padding: 2px; +} +.searchStuff { + position: absolute; + top: 25px; + margin: 0 auto; +} +.searchStuff ul { + width: auto; + margin: 0 auto; + padding: 0; +} +div.itty { + font-weight: normal; + font: 8pt Arial,sans-serif; + color:#666; + padding:5px; + padding-left:10px; +} +div.itty:hover { + color:#333; +} +.itemType { + font-style:italic; + font-size:12pt; +} +#runSearchIcon { + border:1px solid #000; +} diff --git a/includes/js/dojox/layout/tests/_expando.css.commented.css b/includes/js/dojox/layout/tests/_expando.css.commented.css new file mode 100644 index 0000000..2fd0636 --- /dev/null +++ b/includes/js/dojox/layout/tests/_expando.css.commented.css @@ -0,0 +1,64 @@ +@import "../../../dojo/resources/dojo.css"; +@import "../../../dijit/tests/css/dijitTests.css"; + +@import "../resources/FloatingPane.css"; +@import "../resources/ExpandoPane.css"; + +body, html { + margin:0; + padding:0; + width:100%; + height:100%; + background: #fafafa; + overflow: hidden; +} +.wrap { + margin: 0; + padding: 15px; +} +.wrap h3 { + margin-top: 5px; +} +#header { + height:32px; +} +.searchBar { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 25px; + border-bottom: 1px solid #666; + background: #fafafa; +} +.searchBar p { + margin: 0; + padding: 2px; +} +.searchStuff { + position: absolute; + top: 25px; + margin: 0 auto; +} +.searchStuff ul { + width: auto; + margin: 0 auto; + padding: 0; +} +div.itty { + font-weight: normal; + font: 8pt Arial,sans-serif; + color:#666; + padding:5px; + padding-left:10px; +} +div.itty:hover { + color:#333; +} +.itemType { + font-style:italic; + font-size:12pt; +} +#runSearchIcon { + border:1px solid #000; +} diff --git a/includes/js/dojox/layout/tests/_floating.html b/includes/js/dojox/layout/tests/_floating.html new file mode 100644 index 0000000..be5ece9 --- /dev/null +++ b/includes/js/dojox/layout/tests/_floating.html @@ -0,0 +1,48 @@ +<div class="wrap"> + <h3>I am FloatingPane</h3> + <p>Windows in the Browser is weird UI, but sometimes useful. Even more useful:<br> + <br> + <button dojoType="dijit.form.Button"> + Dock To Tab + <script type="dojo/method" event="onClick"> + this.setAttribute("disabled",true); + var c = dijit.getEnclosingWidget(this.domNode.parentNode); + dojo.style(c.focusNode,"display","none"); + dojo.style(c.domNode,{ + position:"relative", + top:"0", + left:"0" + }) + var tab = dijit.byId("centerPane"); + tab.addChild(c); + tab.selectChild(c); + </script> + </button> + <br> + <button dojoType="dijit.form.Button"> + Dock To Accordion + <script type="dojo/method" event="onClick"> + this.setAttribute("disabled",true); + var n = dijit.getEnclosingWidget(this.domNode.parentNode); + dojo.style(n.focusNode,"display","none"); + dojo.style(n.domNode,{ + position:"relative", + top:"0", + left:"0" + }) + var c = new dijit.layout.AccordionPane({ + title:n.title, + closable:n.closable + }); + c.startup(); + c.setContent(n.containerNode); + var accordion = dijit.byId("rightAccordion"); + accordion.addChild(c); + accordion.selectChild(c); + </script> + </button> + <br><br> + (both technically unsupported) + </p> + +</div>
\ No newline at end of file diff --git a/includes/js/dojox/layout/tests/_lorem.html b/includes/js/dojox/layout/tests/_lorem.html new file mode 100644 index 0000000..9e7aaef --- /dev/null +++ b/includes/js/dojox/layout/tests/_lorem.html @@ -0,0 +1,11 @@ +<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> diff --git a/includes/js/dojox/layout/tests/_script.html b/includes/js/dojox/layout/tests/_script.html new file mode 100644 index 0000000..64bcd0e --- /dev/null +++ b/includes/js/dojox/layout/tests/_script.html @@ -0,0 +1,9 @@ +<script type="text/javascript"> + console.log('foo - whenever'); + dojo.addOnLoad(function(){ + console.warn('foo - onload'); + }); +</script> +<p> + bar baz +</p> diff --git a/includes/js/dojox/layout/tests/doc0.html b/includes/js/dojox/layout/tests/doc0.html new file mode 100644 index 0000000..10fd03a --- /dev/null +++ b/includes/js/dojox/layout/tests/doc0.html @@ -0,0 +1,14 @@ +<h1>Document 0</h1> +This document has <a href="http://www.dojotoolkit.org/">a link</a>.<br /> +(to check we're copying children around properly).<br /> +Also it's got a widget, a combo box:<br> +<select dojoType="dijit.form.ComboBox"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> +</select> +And a button too: +<button dojoType="dijit.form.Button" onclick="dijit.byId('remotePane').setHref('doc0.html');">Reload Me!</button> +Here's some text that comes AFTER the button. +Okay textbox: +<input dojoType="dijit.form.TextBox" value="dndTest" /> diff --git a/includes/js/dojox/layout/tests/images/blank.gif b/includes/js/dojox/layout/tests/images/blank.gif Binary files differnew file mode 100644 index 0000000..e565824 --- /dev/null +++ b/includes/js/dojox/layout/tests/images/blank.gif diff --git a/includes/js/dojox/layout/tests/images/dojoLogo.png b/includes/js/dojox/layout/tests/images/dojoLogo.png Binary files differnew file mode 100644 index 0000000..1219de7 --- /dev/null +++ b/includes/js/dojox/layout/tests/images/dojoLogo.png diff --git a/includes/js/dojox/layout/tests/images/gridUnderlay.png b/includes/js/dojox/layout/tests/images/gridUnderlay.png Binary files differnew file mode 100644 index 0000000..016f129 --- /dev/null +++ b/includes/js/dojox/layout/tests/images/gridUnderlay.png diff --git a/includes/js/dojox/layout/tests/images/testImage.gif b/includes/js/dojox/layout/tests/images/testImage.gif Binary files differnew file mode 100644 index 0000000..4370d68 --- /dev/null +++ b/includes/js/dojox/layout/tests/images/testImage.gif diff --git a/includes/js/dojox/layout/tests/remote/getResponse.php b/includes/js/dojox/layout/tests/remote/getResponse.php new file mode 100644 index 0000000..0a37050 --- /dev/null +++ b/includes/js/dojox/layout/tests/remote/getResponse.php @@ -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']}"; + } + } +?>
\ No newline at end of file diff --git a/includes/js/dojox/layout/tests/test_DragPane.html b/includes/js/dojox/layout/tests/test_DragPane.html new file mode 100644 index 0000000..df38b7e --- /dev/null +++ b/includes/js/dojox/layout/tests/test_DragPane.html @@ -0,0 +1,93 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + + <title>DragPane layout widget Test</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../DragPane.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + </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"; + + .hasHand { cursor:pointer !important; } + .box { width:25px; height:25px; background:#000; position:absolute; } + #br { bottom:5px; right:5px; } + #bl { left:5px; bottom:5px; } + #tl { top:5px; left:5px; } + #tr { top:5px; right:5px; } + .hugetext { + font:22pt Arial,sans-serif; + font-weight:bold; + } + #container { + overflow:auto; + width:600px; + height:300px; + border:4px solid #ededed; + background:#ededed; + } + </style> + +</head> +<body class="tundra"> + <div class="hugetext" id="container" dojoType="dojox.layout.DragPane"> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> +</body> +</html> diff --git a/includes/js/dojox/layout/tests/test_ExpandoPane.html b/includes/js/dojox/layout/tests/test_ExpandoPane.html new file mode 100644 index 0000000..ceaad50 --- /dev/null +++ b/includes/js/dojox/layout/tests/test_ExpandoPane.html @@ -0,0 +1,307 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.layout.ExpandoPane</title> + <link rel="stylesheet" href="_expando.css" /> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script src="../ExpandoPane.js" type="text/javascript"></script> + <script type="text/javascript"> + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.Tree"); + dojo.require("dijit.layout.AccordionContainer"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dojox.layout.FloatingPane"); + dojo.require("dojox.fx.easing"); + dojo.require("dojox.rpc.Service"); + dojo.require("dojo.io.script"); + </script> + <script type="text/javascript"> + dojo.declare("demo.DemoPane",dijit.layout.ContentPane,{ + + startup: function(){ + this.inherited(arguments); + this.rpc.get({ name: this.title, + attributes:["summary","type","source","description","examples"] + }).addCallback(dojo.hitch(this,"_setSelf")); + }, + _setSelf:function(data){ + var out = ""; + dojo.forEach(data,function(d){ + console.log(d); + if(d.name){ + out += "<h2>" + d.name + " <span class='itemType'>" + d.type +"</span></h2>"; + } + if(d.summary){ + out += "<div class='summary'>" + d.summary + "</div>"; + } + }); + this.setContent(out); + + } + + }); + + var togglePane = function(e){ + + var lp = dijit.byId("leftPane"); + var sel = dojo.byId("easingSelect"); + var o = dojo.getObject("dojox.fx.easing."+sel.value); + + lp.easeIn = o; + lp.easeOut = o; + lp.duration = parseInt(dojo.byId("durationBox").value) || 1000; + lp._setupAnims(); + lp.toggle(); + }; + + var easeSelectionCode = function(){ + var sel = dojo.byId("easingSelect"); + dojo.connect(sel,"onchange",togglePane); + dojo.connect(dojo.byId("durationBox"),"onchange",togglePane); + var opt = dojo.query("#easingSelect option")[0]; + for(var i in dojox.fx.easing){ + var n = dojo.clone(opt); + n.value = i; + n.innerHTML = i; + sel.appendChild(n); + } + }; + + var _clearSearch = function(){ + dojo.query("li","searchResults").forEach(dojo._destroyElement); + }; + + var shifter = function(input){ + // convert an array to a object, just that deep + var last, output; + last = output = {}; + for(var i = 0; i < input.length; i++){ + if(i == input.length - 2){ + last[input[i]] = input[i + 1]; + break; + } + last = last[input[i]] = {}; + } + return output; + }; + + var makeTree = function(data){ + var undata = { + dojo:{}, dijit:{}, dojox:{} + }; + var items = []; + dojo.forEach(data,function(item){ + var foo = item.name.split("."); + foo.push("_meta"); + foo.push(item); + //var ns = foo.shift(); + var obj = shifter(foo); + items.push(obj); + }); + return items; + }; + + var runSearch = function(e){ + dijit.byId("centerPane").selectChild(dijit.byId("resultsPane")); + var val = dojo.byId("searchBox").value; + var li = dojo.doc.createElement('li'); + _clearSearch(); + li.appendChild(dojo.clone(dojo.query(".cloneNode")[0])); + dojo.byId("searchResults").appendChild(li); + searchHistory.push(val); + api.get({ name:val }).addCallback(function(data){ + var tree = makeTree(data); + + _clearSearch(); + + dojo.forEach(data,function(item){ + console.log(item); + var list = dojo.byId("") + var nli = dojo.doc.createElement('li'); + nli.innerHTML = "<div class='inner'>" + +"<a"+" hre"+"f='#"+ item.name +"'>"+item.name +"</a>" + +"- <span class='itemType'>"+ item.type +"</span>" + +"<div class='itty'>"+item.summary+"</div></div>"; + dojo.byId("searchResults").appendChild(nli); + }); + }) + }; + + var searchInteract = function(e){ + e.preventDefault(); + var v; + if((v = dojo.attr(e.target,"href"))){ + var tabs = dijit.byId("centerPane"); + v = v.replace(/#/g,""); + var cp = dijit.byId(v); + if(!cp){ + var cp = new demo.DemoPane({ + title:v, + closable:true, + id:v, + rpc:api + }); + cp.startup(); + tabs.addChild(cp); + } + tabs.selectChild(cp); + } + }; + + var searchHistory = []; + var rpc = null; + var apiData = {}; + var _clone = null; + var searchCode = function(){ + _clone = dojo.query(".cloneLoading")[0]; + api = new dojox.rpc.Service(dojo.moduleUrl("dojox.rpc", "documentation.smd")); + dojo.connect(dojo.byId("searchBox"),"onchange",runSearch); + dojo.connect(dojo.byId("runSearchIcon"),"onclick",runSearch); + dojo.connect(dojo.byId("searchResults"),"onclick",searchInteract); + } + + dojo.addOnLoad(easeSelectionCode); + dojo.addOnLoad(searchCode); + + </script> +</head> +<body> + <div id="bc" style="width:100%; height:100%;" dojoType="dijit.layout.BorderContainer"> + <div id="header" dojoType="dijit.layout.ContentPane" region="top">Dojo Expando Pane Test</div> + <div dojoType="dojox.layout.ExpandoPane" + splitter="true" + duration="125" + region="left" + title="Left Section" + id="leftPane" + maxWidth="275" + style="width: 275px; background: #fafafa;"> + <div dojoType="dijit.layout.TabContainer" attachParent="true" tabPosition="bottom"> + <div dojoType="dijit.layout.ContentPane" title="Search"> + <div class="searchBar"> + <p> + <span style="float: left;">Search:</span> + <input id="searchBox" name="searchBox" style="float: left;"> + <span id="runSearchIcon" style="border: none; floast: left; padding: 3px;"> + <img src="../../presentation/resources/icons/next.png" style="height:12px; width:12px;"> + </span> + </p> + </div> + + </div> + <div dojoType="dijit.layout.AccordionContainer" title="Panes" style="width:275px;" attachParent="true"> + <div dojoType="dijit.layout.AccordionPane" title="Dojo"> + <ul id="dojoList"></ul> + </div> + <div dojoType="dijit.layout.AccordionPane" title="Dijit"> + <ul id="dijitList"></ul> + </div> + <div dojoType="dijit.layout.AccordionPane" title="DojoX"> + <ul id="dojoxList"></ul> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" title="Tree View"> + <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" + url="../../../dijit/tests/_data/countries.json"></div> + <div dojoType="dijit.Tree" store="continentStore" query="{type:'continent'}" + labelAttr="name" typeAttr="type" label="Toolkit API"></div> + </div> + </div> + </div> + <div dojoType="dijit.layout.TabContainer" region="center" id="centerPane"> + <div dojoType="dijit.layout.ContentPane" title="tab 1">a</div> + <div dojoType="dijit.layout.ContentPane" title="tab 2">b</div> + <div dojoType="dijit.layout.ContentPane" title="Results" id="resultsPane"> + <div class="wrap"> + <div class="searchStuff"> + <ul id="searchResults"></ul> + </div> + </div> + </div> + </div> + <div dojoType="dojox.layout.ExpandoPane" + splitter="true" + title="Right Section" + region="right" + id="rightPane" + maxWidth="275" + style="background:#fafafa; width:275px" + easeIn="dojox.fx.easing.backOut" + easeOut="dojox.fx.easing.backInOut"> + + <div dojoType="dijit.layout.AccordionContainer" id="rightAccordion" style="width:275px;" attachParent="true"> + <div dojoType="dijit.layout.AccordionPane" title="Easing Selection"> + <div class="wrap"> + <p>This select modifies the left Expando's easing function. An Expando can have an easeIn and an easeOut parameter. This sets both.</p> + <select id="easingSelect" name="easingSelect"> + <option value="dojo._DefaultEasing">Default</option> + </select> + <p><label for="durationBox">Duration: </label> <input id="durationBox" name="durationBox" value="1000" /></p> + <p>Some easing functions break when used with width: (negative width? but how?). <em>Be warned.</em></p> + </div> + </div> + <div dojoType="dijit.layout.AccordionPane" title="Children"> + <div class="wrap"> + <p>This is a BorderContainer (the window). Each of the panes is set to one of + "left", "right", or "center". The left and right panes are ExpandoPanes (they collapse). + </p> + <p> + We can add other panes programatically: + <br> + <button dojoType="dijit.form.Button"> + Add "Bottom" + <script type="dojo/method" event="onClick"> + // create and startup a new ContentPane + var cp = new dijit.layout.ContentPane({ + region:"bottom", + style:"height:65px", + splitter:"true" + }); + cp.startup(); + this.setAttribute("disabled",true); + cp.setHref("_bottomPane.html"); + // add to our borderContainer + var bc = dijit.byId("bc"); + bc.addChild(cp); + </script> + </button> + </p> + <p>What does a FloatingPane look like here?<br> + <button dojoType="dijit.form.Button"> + Make Floater + <script type="dojo/method" event="onClick"> + var div = dojo.doc.createElement('div'); + dojo.body().appendChild(div); + var fp = new dojox.layout.FloatingPane({ + title:"A Winder.", + closeable:true, dockable:false, + href:"_floating.html" + },div); + dojo.style(fp.domNode,{ + width:"350px", + height:"255px", + top:"75px", left:"75px", + position:"absolute", + zIndex:"980" + }); + fp.startup(); + fp.show(); + </script> + </button> + </p> + </div> + </div> + <div dojoType="dijit.layout.AccordionPane" title="Acc 3">c</div> + </div> + </div> + </div> + + <div class="cloneNode">Loading <img style="width:17px; height:17px" src="../../image/resources/images/loading.gif" alt="progress" /></div> + +</body> +</html> diff --git a/includes/js/dojox/layout/tests/test_ExpandoPane_code.html b/includes/js/dojox/layout/tests/test_ExpandoPane_code.html new file mode 100644 index 0000000..2b71fcc --- /dev/null +++ b/includes/js/dojox/layout/tests/test_ExpandoPane_code.html @@ -0,0 +1,98 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.layout.ExpandoPane</title> + <link rel="stylesheet" href="_expando.css" /> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript"> + dojo.require("dijit.form.Button"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.BorderContainer"); + + var _clearPane = function(){ + var ch = dijit.byId("bc").getChildren(); + dojo.forEach(["pane0","pane1","pane2","pane3"],function(p){ + + dojo.byId("hidden").appendChild(dojo.byId(p)); + var dij = dijit.getEnclosingWidget(p.parentNode); + if(dij){ + console.log(dij); + dijit.byId("bc").removeChild(dij); + dij.destroy(); + } + + }); + }; + + </script> + <style type="text/css"> + #hidden { + position:absolute; + top:-999px; + left:-999px; + overflow:hidden; + width:500px; + height:500px; + visibility:hidden; + } + #pane0, #pane1, #pane2, #pane3 { + width:100%; + height:100%; + } + #pane1 { background:red; } + #pane2 { background:green; } + #pane3 { background:blue; } + #pane0 { background:yellow; } + </style> +</head> +<body> + <div id="bc" style="width:100%; height:100%;" dojoType="dijit.layout.BorderContainer"> + <div region="center" style="height:65px; border-bottom:1px solid #666"> + <button dojoType="dijit.form.Button"> + Set 3-pane + <script type="dojo/method" event="onClick"> + _clearPane(); + var bc = dijit.byId("bc"); + + var cp = new dijit.layout.ContentPane({ + region:"left", + style:"width:125px; height:100%", + splitter:true + }); + cp.domNode.appendChild(dojo.byId("pane1")); + cp.startup(); + bc.addChild(cp); + + var cp2 = new dijit.layout.ContentPane({ + region:"right", + style:"width:125px; height:100%", + splitter:true + }); + cp2.domNode.appendChild(dojo.byId("pane2")); + cp2.startup(); + bc.addChild(cp2); + + var cp3 = new dijit.layout.ContentPane({ + region:"center" + + }); + cp3.domNode.appendChild(dojo.byId("pane0")); + cp3.startup(); + bc.addChild(cp3); + + bc.layout(); + </script> + </button> + </div> + + </div> + <div id="hidden"> + <div id="pane0">pane 0 content</div> + <div id="pane1">pane 1 content</div> + <div id="pane2">pane 2 content</div> + <div id="pane3">pane 3 content</div> + </div> +</body> +</html> diff --git a/includes/js/dojox/layout/tests/test_ExpandoPane_more.html b/includes/js/dojox/layout/tests/test_ExpandoPane_more.html new file mode 100644 index 0000000..aed990e --- /dev/null +++ b/includes/js/dojox/layout/tests/test_ExpandoPane_more.html @@ -0,0 +1,114 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.layout.ExpandoPane</title> + + <style type="text/css"> + body, html { + height:100%; + } + </style> + <link rel="stylesheet" href="../resources/ExpandoPane.css" /> + <link rel="stylesheet" href="../../../dijit/tests/css/dijitTests.css" /> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + + <script src="../ExpandoPane.js" type="text/javascript"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.Tree"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dojox.fx.easing"); + </script> +</head> +<body> + + <h1>Basic ExpandoPane tests</h1> + + <h2>Left:</h2> + <div dojoType="dijit.layout.BorderContainer" style="height:275px"> + <div dojoType="dojox.layout.ExpandoPane" title="leftTest" region="left" maxWidth="175" style="width:175px; background:red"> + foo + </div> + <div dojoType="dijit.layout.TabContainer" region="center"> + <div dojoType="dijit.layout.ContentPane" title="tab 1" href="_lorem.html"></div> + <div dojoType="dijit.layout.ContentPane" title="tab 2" href="_lorem.html"></div> + </div> + </div> + + <h2>Right:</h2> + <div dojoType="dijit.layout.BorderContainer" style="height:275px"> + <div dojoType="dojox.layout.ExpandoPane" title="rightTest" region="right" maxWidth="175" style="width:175px; background:red"> + <div dojoType="dijit.layout.TabContainer" tabPosition="bottom" attachParent="true"> + <div dojoType="dijit.layout.ContentPane" attachParent="true" title="tab 1" href="_lorem.html"></div> + <div dojoType="dijit.layout.ContentPane" title="tab 2" href="_lorem.html"></div> + </div> + </div> + <div dojoType="dijit.layout.TabContainer" region="center"> + <div dojoType="dijit.layout.ContentPane" title="tab 1" href="_lorem.html"></div> + <div dojoType="dijit.layout.ContentPane" title="tab 2" href="_lorem.html"></div> + </div> + </div> + + <h2>Top (easeIn="dojox.fx.easing.bounceOut" duration="1200"):</h2> + <div dojoType="dijit.layout.BorderContainer" style="height:275px"> + <div easeIn="dojox.fx.easing.bounceOut" duration="1200" dojoType="dojox.layout.ExpandoPane" title="topTest" region="top" maxHeight="75" style="height:75px; background:red"> + foo + </div> + <div region="center" dojoType="dijit.layout.ContentPane" href="_lorem.html"></div> + </div> + + <h2>Bottom:</h2> + <div dojoType="dijit.layout.BorderContainer" style="height:375px; border:8px solid #333;"> + <div dojoType="dojox.layout.ExpandoPane" title="bottomTest" region="bottom" maxHeight="75" style="height:75px; width:100%; background:red;"> + foo + </div> + <div region="center" dojoType="dijit.layout.ContentPane" href="_lorem.html"></div> + </div> + + <h2>Bottom/Left:</h2> + <div dojoType="dijit.layout.BorderContainer" style="height:375px; border:8px solid #333;"> + <div dojoType="dojox.layout.ExpandoPane" title="leftTest" region="left" maxWidth="175" style="width:175px; background:red;"> + foo + </div> + <div dojoType="dojox.layout.ExpandoPane" title="bottomTest" region="bottom" maxHeight="75" style="height:75px; width:100%; background:red;"> + foo + </div> + <div region="center" dojoType="dijit.layout.ContentPane" href="_lorem.html"></div> + </div> + + <h2>Top/Left/Right</h2> + <div dojoType="dijit.layout.BorderContainer" style="height:375px; border:8px solid #333;"> + <div dojoType="dojox.layout.ExpandoPane" title="leftTest" region="left" maxWidth="175" style="width:175px; background:red;"> + foo + </div> + <div dojoType="dojox.layout.ExpandoPane" title="leftTest" region="right" maxWidth="175" style="width:175px; background:red;"> + foo + </div> + <div dojoType="dojox.layout.ExpandoPane" title="bottomTest" region="bottom" maxHeight="75" style="height:75px; width:100%; background:red;"> + foo + </div> + <div region="center" dojoType="dijit.layout.ContentPane" href="_lorem.html"></div> + </div> + + <h2>Top/Left/Right + splitters</h2> + <div dojoType="dijit.layout.BorderContainer" style="height:375px; border:8px solid #333;"> + <div splitter="true" dojoType="dojox.layout.ExpandoPane" title="leftTest" region="left" maxWidth="175" style="width:175px; background:red;"> + foo + </div> + <div splitter="true" dojoType="dojox.layout.ExpandoPane" title="leftTest" region="right" maxWidth="175" style="width:175px; background:red;"> + foo + </div> + <div splitter="true" dojoType="dojox.layout.ExpandoPane" title="bottomTest" region="bottom" maxHeight="75" style="height:75px; width:100%; background:red;"> + foo + </div> + <div region="center" dojoType="dijit.layout.ContentPane" href="_lorem.html"></div> + </div> + + +</body> +</html> diff --git a/includes/js/dojox/layout/tests/test_FloatingPane.html b/includes/js/dojox/layout/tests/test_FloatingPane.html new file mode 100644 index 0000000..016f8a6 --- /dev/null +++ b/includes/js/dojox/layout/tests/test_FloatingPane.html @@ -0,0 +1,167 @@ +<!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.layout.TabContainer"); + 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:125 }); + } + + 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="position:absolute; width:100px; height:100px; top:100px; left:0px; " 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; top:100px; left:100px;" 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:100px; height:100px; top:100px; left:300px;" 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; position:absolute; top:200px; left:0; position:absolute; " + 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:100px; height:100px; position:absolute; top:200px; left:100px;" 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:100px; 100px; top:200px; left:200px; position:absolute; " 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" id="remotePane" + title="Remote Pane" href="doc0.html" resizable="true" + style="width:250px; height:250px; background:#fff; position:absolute; top:300px; left:0px;" + ></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> + + <div dojotype="dojox.layout.FloatingPane" title="Child layout test" + style="width:400px; height:300px;" resizable="true"> + <div dojotype="dijit.layout.TabContainer"> + <div dojotype="dijit.layout.ContentPane" title="Tab 1"> + First Page + </div> + <div dojotype="dijit.layout.ContentPane" title="Tab 2"> + <div dojotype="dijit.layout.TabContainer"> + <div dojotype="dijit.layout.ContentPane" title="Sub-tab 1"> + Story of Paul. + </div> + <div dojotype="dijit.layout.ContentPane" title="Sub-tab 2"> + Story about Paul. + </div> + <div dojotype="dijit.layout.ContentPane" title="Sub-tab 3"> + Story about... guess who. + </div> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/includes/js/dojox/layout/tests/test_RadioGroup.html b/includes/js/dojox/layout/tests/test_RadioGroup.html new file mode 100644 index 0000000..d2c6ba0 --- /dev/null +++ b/includes/js/dojox/layout/tests/test_RadioGroup.html @@ -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> diff --git a/includes/js/dojox/layout/tests/test_ResizeHandle.html b/includes/js/dojox/layout/tests/test_ResizeHandle.html new file mode 100644 index 0000000..ed16473 --- /dev/null +++ b/includes/js/dojox/layout/tests/test_ResizeHandle.html @@ -0,0 +1,134 @@ +<!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("dijit.form.Button"); + // 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" + > + + <button dojoType='dijit.form.Button'> + kill handle + <script type="dojo/method" event="onClick"> + dijit.byId("hand1").destroy(); + </script> + </button> + Content Pane w/a resize handle. activeResize'ing only on layout Widgets? FIXME: :) + <div id="hand1" 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;" + > + <button dojoType='dijit.form.Button'> + kill handle + <script type="dojo/method" event="onClick"> + dijit.byId("hand2").destroy(); + </script> + </button> + Plain div w/a resize handle. All Default settings. + <div id="hand2" 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> diff --git a/includes/js/dojox/layout/tests/test_ScrollPane.html b/includes/js/dojox/layout/tests/test_ScrollPane.html new file mode 100644 index 0000000..53a4a26 --- /dev/null +++ b/includes/js/dojox/layout/tests/test_ScrollPane.html @@ -0,0 +1,129 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + + <title>ScrollPane layout widget Test</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:false, isDebug:true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../ScrollPane.js"></script> + <script language="JavaScript" type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dijit.layout.LayoutContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.addOnLoad(function(){ + var i; + var node = dojo.byId("cloneMe"); + dojo.query(".list").forEach(function(n){ + for(i = 0; i<42; i++){ + var b = n.appendChild(dojo.clone(node)); + } + }); + dojo.parser.parse(); + + // programatic example: + var widget = new dojox.layout.ScrollPane({ + orientation: "vertical", + style:"width:125px; height:300px; border:2px solid #ededed" + },"progExample"); + widget.startup(); + }); + </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/ScrollPane.css"; + + #altStyle .dojoxScrollHelper { + -moz-border-radius:3pt; + background:#b7cdee; + border:2px solid #333; + width:3px; + } + table.fooBar td { + width:50px; + border-right:2px solid #000; + padding:20px; + } + + #vertList li { + cursor:pointer; + } + .foo { float:left; } + </style> + +</head> +<body class="tundra"> + + + <h1 class='testTitle'>dojox.layout.ScrollPane</h1> + + <p>An intuitive UI for lists of data in a confined space. supports horizontal or vertical "scrolling", but not both</p> + + <h2>vertical:</h2> + <div style="float:left; padding-right:12px;"> + + <div dojoType="dojox.layout.ScrollPane" style="width:100px; height:300px; border:1px solid #b7b7b7"> + <ol class="list" id="vertList"> + <li id="cloneMe"><a href="#"><span>testItem</span></a></li> + </ol> + </div> + </div> + <div id="altStyle" style="float:left; padding-right:12px;"> + + <div dojoType="dojox.layout.ScrollPane" style="width:100px; height:300px; border:1px solid #b7b7b7"> + <ol class="list" id="vertList2"></ol> + </div> + + </div> + + <br style="clear:both;"> + + <h2>horizontal</h2> + <div dojoType="dojox.layout.ScrollPane" orientation="horizontal" style="width:600px; height:125px; border:1px solid #b7b7b7" id="horiz"> + <table class="fooBar"> + <tr> + <td style="padding-left:20px;">LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + <td>LOREM IPSUM</td> + </tr> + </table> + </div> + + <h2>In a layoutContainer:</h2> + + <div dojoType="dijit.layout.LayoutContainer" style="width:401px; height:400px; border:1px solid #b7b7b7;"> + <div dojoType="dojox.layout.ScrollPane" sizeShare="20" layoutAlign="left" style="width:100px; height:400px; border-right:1px solid #333"> + <ol class="list"></ol> + </div> + <div layoutAlign="right" dojoType="dijit.layout.ContentPane" style="width:300px"> + <p>Foo!</p> + </div> + </div> + + <h2>Programatically:<h2> + + <div id="progExample"> + <ol class="list"></ol> + </div> + +</body> +</html> diff --git a/includes/js/dojox/layout/tests/test_ScrollPaneSingle.html b/includes/js/dojox/layout/tests/test_ScrollPaneSingle.html new file mode 100644 index 0000000..3957fda --- /dev/null +++ b/includes/js/dojox/layout/tests/test_ScrollPaneSingle.html @@ -0,0 +1,71 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + + <title>ScrollPane layout widget Test</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:false, isDebug:true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../ScrollPane.js"></script> + <script language="JavaScript" type="text/javascript"> + dojo.require("dojo.parser"); + dojo.addOnLoad(function(){ + var i; + var n = dojo.byId("hold"); + var c = dojo.query(".clone")[0]; + for(i=0; i<12; i++){ + var b = dojo.clone(c); + n.appendChild(b); // dojo.clone(dojo.byId("clone"))); + } + dojo.parser.parse(); + dijit.byId("horiz").layout(); + }); + </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"; + + .dojoxScrollWindow { + position:relative; + } + .dojoxScrollHelper .helperInner { + visibility:hidden; + } + .dojoxScrollHelper { + border:1px solid #b7b7b7; + width:4px; + background:#ededed; + height:3px; + position:absolute; + bottom:2px; + left:4px; + } + #altStyle .dojoxScrollHelper { + -moz-border-radius:3pt; + background:#b7cdee; + border:2px solid #333; + width:3px; + } + + .container { width:602px; margin:0 auto; } + .example { padding:20px; margin:5px; border:1px dotted #b7b7b7; } + </style> + +</head> +<body class="tundra"> + +<div class="container"> + <h1 class='testTitle'>dojox.layout.ScrollPane</h1> + <h2>horizontal</h2> + <div dojoType="dojox.layout.ScrollPane" orientation="horizontal" style="width:600px; height:125px" id="horiz"> + <div class="dijitInline" id="hold"> + <div class="dijitInline clone example"> + <h2>Foo!</h2><p>text <ul><li>bar</li><li>bar</li></ul></p> + </div> + </div> + </div> +</div> +</body> +</html> diff --git a/includes/js/dojox/layout/tests/test_SizingPane.html b/includes/js/dojox/layout/tests/test_SizingPane.html new file mode 100644 index 0000000..372f396 --- /dev/null +++ b/includes/js/dojox/layout/tests/test_SizingPane.html @@ -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(function(){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> |
