diff options
Diffstat (limited to 'includes/js/dojox/layout/tests')
23 files changed, 3187 insertions, 0 deletions
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> |
