diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dijit/tests')
123 files changed, 13868 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/Container.html b/includes/js/dijit/tests/Container.html new file mode 100644 index 0000000..64dd5d4 --- /dev/null +++ b/includes/js/dijit/tests/Container.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + + <title>Container</title> + + <script type="text/javascript" src="../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("doh.runner"); + dojo.require("dijit._Widget"); + dojo.require("dijit._Container"); + + dojo.declare("dijit.TestContainer", + [dijit._Widget, dijit._Container], { } + ); + + dojo.require("dojo.parser"); + + dojo.addOnLoad(function(){ + doh.register("t", + [ + { + name: "getChildren", + runTest: function(t){ + var c = dijit.byId("container"); + var children = c.getChildren(); + t.is(3, children.length); + t.is("zero", children[0].id); + t.is("one", children[1].id); + t.is("two", children[2].id); + } + }, + { + name: "_getSiblingOfChild", + runTest: function(t){ + var c = dijit.byId("container"); + var children = c.getChildren(); + t.is("one", c._getSiblingOfChild(children[0], 1).id); + t.is("two", c._getSiblingOfChild(children[1], 1).id); + t.is(null, c._getSiblingOfChild(children[2], 1)); + t.is(null, c._getSiblingOfChild(children[0], -1)); + t.is("zero", c._getSiblingOfChild(children[1], -1).id); + t.is("one", c._getSiblingOfChild(children[2], -1).id); + } + } + ] + ); + doh.run(); + }); + + </script> +</head> +<body class="tundra"> + + <div id="container" dojoType="dijit.TestContainer"> + <div id="zero" dojoType="dijit._Widget"></div> + <div id="one" dojoType="dijit._Widget"></div> + <div id="two" dojoType="dijit._Widget"></div> + </div> + +</body> +</html> diff --git a/includes/js/dijit/tests/Container.js b/includes/js/dijit/tests/Container.js new file mode 100644 index 0000000..0e9360c --- /dev/null +++ b/includes/js/dijit/tests/Container.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests.Container"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.Container"] = true; +dojo.provide("dijit.tests.Container"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests.Container", dojo.moduleUrl("dijit", "tests/Container.html")); +} + +} diff --git a/includes/js/dijit/tests/_Templated.html b/includes/js/dijit/tests/_Templated.html new file mode 100644 index 0000000..de6dc59 --- /dev/null +++ b/includes/js/dijit/tests/_Templated.html @@ -0,0 +1,164 @@ +<html> + <head> + <title>_Templated tests</title> + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript"> + dojo.require("doh.runner"); + + dojo.require("dijit._Widget"); + dojo.require("dijit._Templated"); + + function getOuterHTML(/*DomNode*/ node){ + var wrapper = dojo.doc.createElement("div"); + wrapper.appendChild(node); + return wrapper.innerHTML.toLowerCase(); // IE prints <BUTTON> rather than <button>; normalize it. + } + + dojo.addOnLoad(function(){ + // Template with no variables (should be cached as a DOM tree) + dojo.declare("SimpleTemplate", [dijit._Widget, dijit._Templated], { + attributeMap: {}, + id: "test1", + templateString: "<button><span>hello > world</span></button>" + }); + + // Template with variables + dojo.declare("VariableTemplate", [dijit._Widget, dijit._Templated], { + attributeMap: {}, + id: "test2", + num: 5, + text: "hello ><\"' world", + + templateString: "<button><span num=\"${num}\">${text}</span></button>" + }); + + // Template that starts with special node (has to be constructed inside a <tbody>) + dojo.declare("TableRowTemplate", [dijit._Widget, dijit._Templated], { + attributeMap: {}, + id: "test3", + text: "bar", + templateString: "<tr><td>${text}</td></tr>" + }); + + // Illegal subsitition variable name + dojo.declare("IllegalSubstitution", [dijit._Widget, dijit._Templated], { + templateString: "<tr><td>${fake}</td></tr>" + }); + + // dojoAttachPoint + dojo.declare("AttachPoint", [dijit._Widget, dijit._Templated], { + attributeMap: {foo: "", style: "", bar: "buttonNode"}, + templateString: "<div style='border: 1px solid red'>" + + "<button dojoAttachPoint='buttonNode,focusNode'>hi</button>" + + '<span><input dojoAttachPoint="inputNode" value="input"></span>' + + "<span dojoAttachPoint='containerNode'></span>" + + "</div>" + }); + + // dojoAttachEvent + dojo.declare("AttachEvent", [dijit._Widget, dijit._Templated], { + click: function(){ this.clickCalled=true; }, + onfocus: function(){ this.focusCalled=true; }, + focus2: function(){ this.focus2Called=true; }, + templateString: "<table style='border: 1px solid blue'><tr>" + + "<td><button dojoAttachPoint='left' dojoAttachEvent='onclick: click, onfocus'>left</button></td>" + + "<td><button dojoAttachPoint='right' dojoAttachEvent='onclick: click, onfocus: focus2'>right</button></td>" + + "</tr></table>" + }); + + // TODO: + // TemplatePath + + var testW; + doh.register("dijit.tests._Templated.html", + [ + function simple(t){ + var widget=new SimpleTemplate(); + var wrapper=dojo.byId("simpleWrapper"); + wrapper.appendChild(widget.domNode); + t.is('<button widgetid=\"test1\"><span>hello > world</span></button>', wrapper.innerHTML.toLowerCase()); + }, + function variables(t){ + var widget=new VariableTemplate(); + var wrapper=dojo.byId("variables1Wrapper"); + wrapper.appendChild(widget.domNode); + t.is('<button widgetid=\"test2\"><span num="5">hello ><"\' world</span></button>', wrapper.innerHTML.toLowerCase()); + }, + + function variables2(t){ + var widget = new VariableTemplate({id: "myid", num: -5, text: ""}); + var wrapper=dojo.byId("variables2Wrapper"); + wrapper.appendChild(widget.domNode); + t.is('<button widgetid=\"myid\"><span num="-5"></span></button>', wrapper.innerHTML.toLowerCase()); + }, + function table(t){ + var widget=new TableRowTemplate({text: "hello"}); + var wrapper = dojo.byId("trWrapper"); + wrapper.appendChild(widget.domNode); + var actual = wrapper.innerHTML.toLowerCase().replace(/\r/g, "").replace(/\n/g, ""); + t.is('<tr widgetid="test3"><td>hello</td></tr>', actual); + }, + function illegal(t){ + var hadException=false; + try{ + var widget=new IllegalSubstitution(); + }catch(e){ + console.log(e); + hadException=true; + } + t.t(hadException); + }, + function attachPoint(t){ + var widget=new AttachPoint(); + var wrapper = dojo.byId("attachPointWrapper"); + wrapper.appendChild(widget.domNode); + t.is(widget.containerNode.tagName.toLowerCase(), "span"); + t.is(widget.buttonNode.tagName.toLowerCase(), "button"); + t.is(widget.focusNode.tagName.toLowerCase(), "button"); + t.is(widget.inputNode.tagName.toLowerCase(), "input"); + }, + function attributeMap(t){ + var widget=new AttachPoint({foo:"value1", bar:"value2", style:"color: blue"}); + var wrapper = dojo.byId("attributeMapWrapper"); + wrapper.appendChild(widget.domNode); + t.is("value1", widget.domNode.getAttribute("foo")); + t.is("value2", widget.buttonNode.getAttribute("bar")); + // TODO: this is() check is unreliable, IE returns a string like + // border-right: red 1px solid; border-top: red 1px solid; border-left: red 1px solid; color: blue; border-bottom: red 1px solid + // t.is("border: 1px solid red; color: blue;", widget.domNode.style.cssText.toLowerCase()); + }, + function attachEvent(t){ + var deferred = new doh.Deferred(); + var widget=new AttachEvent(); + var wrapper = dojo.byId("attachEventWrapper"); + wrapper.appendChild(widget.domNode); + widget.left.focus(); + widget.right.focus(); + setTimeout(function(){ + t.t(widget.focusCalled); + t.t(widget.focus2Called); + deferred.callback(true); + }, 0); + return deferred; + } + ] + ); + doh.run(); + }); + </script> + <style type="text/css"> + @import "../themes/tundra/tundra.css"; + </style> + </head> + <body> + <h1>_Templated test</h1> + <div id="simpleWrapper"></div> + <div id="variables1Wrapper"></div> + <div id="variables2Wrapper"></div> + <table><tbody id="trWrapper"></tbody></table> + <div id="attachPointWrapper"></div> + <div id="attributeMapWrapper"></div> + <div id="attachEventWrapper"></div> + </body> +</html> diff --git a/includes/js/dijit/tests/_Templated.js b/includes/js/dijit/tests/_Templated.js new file mode 100644 index 0000000..ea4e059 --- /dev/null +++ b/includes/js/dijit/tests/_Templated.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests._Templated"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests._Templated"] = true; +dojo.provide("dijit.tests._Templated"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests._Templated", dojo.moduleUrl("dijit", "tests/_Templated.html")); +} + +} diff --git a/includes/js/dijit/tests/_altCalendar.html b/includes/js/dijit/tests/_altCalendar.html new file mode 100644 index 0000000..57e9548 --- /dev/null +++ b/includes/js/dijit/tests/_altCalendar.html @@ -0,0 +1,36 @@ +<table cellspacing="0" cellpadding="0" class="dijitCalendarContainer"> + <thead> + <tr class="dijitReset dijitCalendarMonthContainer" valign="top"> + <th><span class='dijitReset' dojoAttachPoint="decrementMonth"> + <span class="dijitInline dijitCalendarIncrementControl dijitCalendarDecrease"><span dojoAttachPoint="decreaseArrowNode" class="dijitA11ySideArrow dijitCalendarIncrementControl dijitCalendarDecreaseInner">-</span></span> + </span> + <span class='dijitReset' dojoAttachEvent="onclick:goToToday">▪</span> + <span class='dijitReset' dojoAttachPoint="incrementMonth"> + <div class="dijitInline dijitCalendarIncrementControl dijitCalendarIncrease"><span dojoAttachPoint="increaseArrowNode" class="dijitA11ySideArrow dijitCalendarIncrementControl dijitCalendarIncreaseInner">+</span></div> + </span></th> + <th class='dijitReset' colspan="6"> + <div dojoAttachPoint="monthLabelSpacer" class="dijitCalendarMonthLabelSpacer"></div> + <div dojoAttachPoint="monthLabelNode" class="dijitCalendarMonth"></div> + </th> + </tr> + <tr> + <th class="dijitReset dijitCalendarDayLabelTemplate"><span class="dijitCalendarDayLabel"></span></th> + </tr> + </thead> + <tbody dojoAttachEvent="onclick: _onDayClick" class="dijitReset dijitCalendarBodyContainer"> + <tr class="dijitReset dijitCalendarWeekTemplate"> + <td class="dijitReset dijitCalendarDateTemplate"><span class="dijitCalendarDateLabel"></span><span class="dijitCalendarDateDescription"></span></td> + </tr> + </tbody> + <tfoot class="dijitReset dijitCalendarYearContainer"> + <tr> + <td class='dijitReset' valign="top" colspan="7"> + <h3 class="dijitCalendarYearLabel"> + <span dojoAttachPoint="previousYearLabelNode" class="dijitInline dijitCalendarPreviousYear"></span> + «<span dojoAttachPoint="currentYearLabelNode" class="dijitInline dijitCalendarSelectedYear"></span>» + <span dojoAttachPoint="nextYearLabelNode" class="dijitInline dijitCalendarNextYear"></span> + </h3> + </td> + </tr> + </tfoot> +</table> diff --git a/includes/js/dijit/tests/_base/manager.html b/includes/js/dijit/tests/_base/manager.html new file mode 100644 index 0000000..3ca3349 --- /dev/null +++ b/includes/js/dijit/tests/_base/manager.html @@ -0,0 +1,322 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dijit manager unit test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("doh.runner"); + dojo.require("dijit.dijit"); + + dojo.declare("foo", dijit._Widget, { + name: "", + attr1: 0, + attr2: 0 + }); + + dojo.declare("bar", dijit._Widget, { + name: "", + attr1: 0, + attr2: 0 + }); + + dojo.addOnLoad(function(){ + doh.register("dijit._base.manager", + [ + function forEachTest(t){ + var names=[]; + dijit.registry.forEach(function(widget){ names.push(widget.name); }); + t.is(names.join(" "), "bob is your uncle"); + }, + function filterTest(t){ + var names=[]; + dijit.registry. + filter(function(widget){ return widget.attr1==10; }). + forEach(function(widget){ names.push(widget.name); }); + t.is(names.join(" "), "bob uncle"); + }, + function byId(t){ + t.is(dijit.byId("three").name, "your"); + }, + function byClass(t){ + var names=[]; + dijit.registry. + byClass("bar"). + forEach(function(widget){ names.push(widget.name); }); + t.is(names.join(" "), "your uncle"); + }, + function deleteTest(t){ + var names=[]; + dijit.byId("two").destroy(); + dijit.byId("four").destroy(); + var names=[]; + dijit.registry.forEach(function(widget){ names.push(widget.name); }); + t.is(names.join(" "), "bob your"); + }, + function getEnclosingWidgetTest(t){ + t.is(dijit.getEnclosingWidget(dojo.byId("not-a-widget")), null); + t.is(dijit.getEnclosingWidget(dojo.byId("three")).name, "your"); + t.is(dijit.getEnclosingWidget(dojo.byId("three.one")).name, "your"); + t.is(dijit.getEnclosingWidget(dojo.byId("three.one.one")).name, "your"); + }, + function isTabNavigable(t){ + t.t(dijit.isTabNavigable(dojo.byId("a-with-href"))); + t.f(dijit.isTabNavigable(dojo.byId("a-without-href"))); + t.t(dijit.isTabNavigable(dojo.byId("area"))); + t.t(dijit.isTabNavigable(dojo.byId("button"))); + t.t(dijit.isTabNavigable(dojo.byId("input"))); + t.t(dijit.isTabNavigable(dojo.byId("object"))); + t.t(dijit.isTabNavigable(dojo.byId("select"))); + t.t(dijit.isTabNavigable(dojo.byId("textarea"))); + t.f(dijit.isTabNavigable(dojo.byId("empty"))); + t.t(dijit.isTabNavigable(dojo.byId("zero-tabindex-div"))); + }, + function findTabNullOnEmpty(t){ + t.is(null, dijit.getFirstInTabbingOrder("empty")); + t.is(null, dijit.getLastInTabbingOrder("empty")); + }, + function findTabElements(t){ + t.is(null, dijit.getFirstInTabbingOrder("div-container")); + t.is(null, dijit.getFirstInTabbingOrder("a-without-href-container")); + t.is("a-with-href", dijit.getFirstInTabbingOrder("a-with-href-container").id); + + // in Safari area elements are not in the tab order + // and their display style property is "none"; + // therefore it is expected that this test will fail + if(!dojo.isSafari){ + t.is("area", dijit.getFirstInTabbingOrder("area-map").id); + } + + t.is("button", dijit.getFirstInTabbingOrder("button-container").id); + t.is("input", dijit.getFirstInTabbingOrder("input-container").id); + t.is("object", dijit.getFirstInTabbingOrder("object-container").id); + t.is("select", dijit.getFirstInTabbingOrder("select-container").id); + t.is("textarea", dijit.getFirstInTabbingOrder("textarea-container").id); + t.is(null, dijit.getLastInTabbingOrder("div-container")); + t.is(null, dijit.getLastInTabbingOrder("a-without-href-container")); + t.is("a-with-href", dijit.getLastInTabbingOrder("a-with-href-container").id); + + // in Safari area elements are not in the tab order + // and their display style property is "none"; + // therefore it is expected that this test will fail + if(!dojo.isSafari){ + t.is("area", dijit.getLastInTabbingOrder("area-map").id); + } + + t.is("button", dijit.getLastInTabbingOrder("button-container").id); + t.is("input", dijit.getLastInTabbingOrder("input-container").id); + t.is("object", dijit.getLastInTabbingOrder("object-container").id); + t.is("select", dijit.getLastInTabbingOrder("select-container").id); + t.is("textarea", dijit.getLastInTabbingOrder("textarea-container").id); + }, + function findTabOnElementRatherThanString(t){ + t.is("a-with-href", dijit.getFirstInTabbingOrder(dojo.byId("a-with-href-container")).id); + t.is("a-with-href", dijit.getLastInTabbingOrder(dojo.byId("a-with-href-container")).id); + }, + function findTabSkipDisabled(t){ + t.is("not-disabled-input", dijit.getFirstInTabbingOrder("skip-disabled").id); + t.is("not-disabled-input", dijit.getLastInTabbingOrder("skip-disabled").id); + }, + function findTabZeroTabindex(t){ + t.is("zero-tabindex-div", dijit.getFirstInTabbingOrder("zero-tabindex-div-container").id); + t.is("zero-tabindex-input", dijit.getFirstInTabbingOrder("zero-tabindex-input-container").id); + t.is("zero-tabindex-div", dijit.getLastInTabbingOrder("zero-tabindex-div-container").id); + t.is("zero-tabindex-input", dijit.getLastInTabbingOrder("zero-tabindex-input-container").id); + }, + function findTabPositiveTabindex(t){ + t.is("positive-tabindex-input1a", dijit.getFirstInTabbingOrder("positive-tabindex-mixed-with-no-tabindex").id); + t.is("positive-tabindex-input3a", dijit.getFirstInTabbingOrder("positive-tabindex").id); + t.is("no-tabindex-input2", dijit.getLastInTabbingOrder("positive-tabindex-mixed-with-no-tabindex").id); + t.is("positive-tabindex-input4b", dijit.getLastInTabbingOrder("positive-tabindex").id); + }, + function findTabSkipMinusOneTabindex(t){ + t.is("not-minus-one-input", dijit.getFirstInTabbingOrder("skip-minus-one").id); + t.is("not-minus-one-input", dijit.getLastInTabbingOrder("skip-minus-one").id); + }, + function findTabDescend(t){ + t.is("child-input1", dijit.getFirstInTabbingOrder("descend").id); + t.is("child-input2", dijit.getLastInTabbingOrder("descend").id); + }, + function findTabOuterInner(t){ + t.is("outer1", dijit.getFirstInTabbingOrder("outer-inner-container").id); + t.is("inner2", dijit.getLastInTabbingOrder("outer-inner-container").id); + }, + function skipNotShown(t){ + t.is(null, dijit.getFirstInTabbingOrder("hidden-element-container")); + t.is(null, dijit.getFirstInTabbingOrder("hidden-container-tabindex-zero")); + t.is(null, dijit.getFirstInTabbingOrder("hidden-container-no-tabindex")); + t.is(null, dijit.getFirstInTabbingOrder("container-with-hidden-containers")); + + t.is(null, dijit.getFirstInTabbingOrder("display-none-element-container")); + t.is(null, dijit.getFirstInTabbingOrder("display-none-container-tabindex-zero")); + t.is(null, dijit.getFirstInTabbingOrder("display-none-container-no-tabindex")); + t.is(null, dijit.getFirstInTabbingOrder("container-with-display-none-containers")); + } + ] + ); + doh.run(); + }); + + </script> +</head> +<body> + <h1>Dijit Manager Unit Test</h1> + <div dojoType="foo" id="one" name="bob" attr1="10" attr2="10"></div> + <div dojoType="foo" id="two" name="is" attr1="5" attr2="10"></div> + <div dojoType="bar" id="three" name="your" attr1="5" attr2="5"> + <div id="three.one"> + <div id="three.one.one"></div> + </div> + </div> + <div dojoType="bar" id="four" name="uncle" attr1="10" attr2="5"></div> + <div id="not-a-widget"></div> + + <div id="empty"></div> + + <div id="div-container"> + <div id="div"></div> + </div> + <div id="a-without-href-container"> + <a id="a-without-href" name="named-link-anchor"></a> + </div> + <div id="a-with-href-container"> + <a id="a-with-href" href="#named-link-anchor"></a> + </div> + + <div><img src="../images/flatScreen.gif" alt="picture of a flat-screen monitor" usemap="#area-map"></div> + <map id="area-map" name="area-map"> + <area id="area" href="#" alt="example area" shape="rect" coords="0,0,8,8"> + </map> + + <div id="button-container"> + <button id="button"></button> + </div> + <div id="input-container"> + <input id="input"> + </div> + <div id="object-container"> + <object id="object"></object> + </div> + <div id="select-container"> + <select id="select"></select> + </div> + <div id="textarea-container"> + <textarea id="textarea"></textarea> + </div> + + <div id="skip-disabled"> + <input id="disabled-input1" disabled="disabled"> + <input id="not-disabled-input"> + <input id="disabled-input2" disabled="disabled"> + </div> + + <div id="zero-tabindex-div-container"> + <div id="zero-tabindex-div" tabindex="0"></div> + </div> + + <div id="zero-tabindex-input-container"> + <input id="zero-tabindex-input" tabindex="0"> + </div> + + <div id="positive-tabindex-mixed-with-no-tabindex"> + <input id="no-tabindex-input1"> + <input id="no-tabindex-input2"> + <input id="positive-tabindex-input1a" tabindex="1"> + <input id="positive-tabindex-input1b" tabindex="1"> + <input id="positive-tabindex-input2a" tabindex="2"> + <input id="positive-tabindex-input2b" tabindex="2"> + </div> + + <div id="positive-tabindex"> + <input id="positive-tabindex-input3a" tabindex="3"> + <input id="positive-tabindex-input3b" tabindex="3"> + <input id="positive-tabindex-input4a" tabindex="4"> + <input id="positive-tabindex-input4b" tabindex="4"> + </div> + + <div id="skip-minus-one"> + <input id="minus-one-input1" tabindex="-1"> + <input id="not-minus-one-input"> + <input id="minus-one-input2" tabindex="-1"> + </div> + + <div id="descend"> + <input disabled="disabled"> + <div> + <input disabled="disabled"> + <div> + <input disabled="disabled"> + </div> + </div> + <div> + <input disabled="disabled"> + <div> + <input disabled="disabled"> + </div> + <div> + <input id="child-input1"> + </div> + <div> + <input id="child-input2"> + </div> + </div> + <div> + <div> + <input disabled="disabled"> + </div> + <input disabled="disabled"> + </div> + <input disabled="disabled"> + </div> + + <div id="outer-inner-container"> + <div id="outer1" tabindex="0"> + <div id="inner1" tabindex="0"></div> + </div> + <div id="outer2" tabindex="0"> + <div id="inner2" tabindex="0"></div> + </div> + </div> + + <div id="hidden-element-container"> + <div id="hidden-element" tabindex="0" style="visibility: hidden;"> + </div> + </div> + + <div id="container-with-hidden-containers"> + <div id="hidden-container-tabindex-zero" tabindex="0" style="visibility: hidden;"> + <div id="inside-hidden-container-tabindex-zero" tabindex="0"> + </div> + </div> + + <div id="hidden-container-no-tabindex" style="visibility: hidden;"> + <div id="inside-hidden-container-no-tabindex" tabindex="0"> + </div> + </div> + </div> + + <div id="display-none-element-container"> + <div id="display-none-element" tabindex="0" style="display: none;"> + </div> + </div> + + <div id="container-with-display-none-containers"> + <div id="display-none-container-tabindex-zero" tabindex="0" style="display: none;"> + <div id="inside-display-none-container-tabindex-zero" tabindex="0"> + </div> + </div> + + <div id="display-none-container-no-tabindex" style="display: none;"> + <div id="inside-display-none-container-no-tabindex" tabindex="0"> + </div> + </div> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/_base/manager.js b/includes/js/dijit/tests/_base/manager.js new file mode 100644 index 0000000..667a763 --- /dev/null +++ b/includes/js/dijit/tests/_base/manager.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests._base.manager"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests._base.manager"] = true; +dojo.provide("dijit.tests._base.manager"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests._base.manager", dojo.moduleUrl("dijit", "tests/_base/manager.html")); +} + +} diff --git a/includes/js/dijit/tests/_base/test_FocusManager.html b/includes/js/dijit/tests/_base/test_FocusManager.html new file mode 100644 index 0000000..1d6a707 --- /dev/null +++ b/includes/js/dijit/tests/_base/test_FocusManager.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.focus Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true"></script> + <script type="text/javascript"> + dojo.require("dijit._base.focus"); + var savedFocus; + dojo.addOnLoad(function(){ + fakeWidget = { domNode: dojo.byId("save") }; + dojo.subscribe("focusNode", function(node){ console.log("focused on " + (node?(node.id||node.tagName):"nothing"));}); + }); + function save(){ + savedFocus = dijit.getFocus(fakeWidget); + console.debug("saved focus: ", savedFocus); + + } + function restore(){ + dijit.focus(savedFocus); + } + </script> +</head> +<body style="background-color: #fff; color: black; padding: 0; margin: 0" class="tundra"> + + <h3>Focus/Selection Save/Restore Test</h3> + <p>This is for testing whether focus and selection are restored by the focus manager</p> + <form style="border: 2px solid blue;"> + <input id=input1 value=tom><br> + <input id=input2 value=jones><br> + <textarea id=textarea>hello there!</textarea><br> + <button id=button>push me</button> + </form> + + <button id="save" onclick="save();" tabIndex="1">Save focus/selection state</button> + <button onclick="restore();">Restore focus/selection state</button> + +</body> +</html> diff --git a/includes/js/dijit/tests/_base/test_focusWidget.html b/includes/js/dijit/tests/_base/test_focusWidget.html new file mode 100644 index 0000000..edc01c1 --- /dev/null +++ b/includes/js/dijit/tests/_base/test_focusWidget.html @@ -0,0 +1,130 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.focus Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.form.NumberSpinner"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.Menu"); + dojo.require("dijit.layout.ContentPane"); + + var queue=[]; + var animation; + function animateBorderColor(widget, color, startWidth, endWidth){ + if(animation){ + queue.push(arguments); + return; + } + with(widget.domNode.style){ + borderStyle="solid"; + outlineStyle="solid"; + + } + animation = dojo.animateProperty({ + node: widget.domNode, + duration: 400, + properties: { + // depending on browser and node type, sometimes border or outline is ineffective. + // doing both seems to work in all cases though (for at least one of them) + borderColor: { end: color }, + borderWidth: { start: startWidth, end: endWidth }, + outlineColor: { end: color }, + outlineWidth: { start: startWidth, end: endWidth } + }, + onEnd: function(){ + animation=null; + if(queue.length){ + animateBorderColor.apply(null, queue.shift()); + } + } + }); + animation.play(); + } + + dojo.addOnLoad(function(){ + dojo.subscribe("widgetFocus", function(widget){ + console.log("focused on widget " + (widget?widget:"nothing")); + animateBorderColor(widget, "#ff0000", 2, 5); + }); + dojo.subscribe("widgetBlur", function(widget){ + console.log("blurred widget " + (widget?widget:"nothing")); + animateBorderColor(widget, "#0000ff", 5, 2); + }); + dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));}); + }); + </script> + <style> + div, fieldset, form, input { + padding: 10px; + margin: 10px; + border: 2px solid blue; + } + </style> +</head> +<body style="background-color: #fff; color: black; padding: 0; margin: 0" class="tundra"> + + <h3>Widget Focus Test</h3> + <p> + This is for testing code to detect onBlur and onFocus on a widget level.<br> + Focused widgets' borders will turn red.<br> + Also, heck the console log for focus and blur events on widgets. + </p> + + <label for="fieldset1">a form ContentPane widget:</label><br> + <form dojoType="dijit.layout.ContentPane"> + <label for="first">simple input: </label><input id=first><br> + + <label for="fieldset1">a fieldset ContentPane widget:</label><br> + <fieldset id=fieldset1 dojoType="dijit.layout.ContentPane"> + <label for="select">a ComboBox widget:</label> + <select id=select dojoType="dijit.form.ComboBox"> + <option>this</option> + <option>is</option> + <option>a</option> + <option>list</option> + </select> + <label for="plain">a plain input:</label> + <input id=plain value=plain> + </fieldset> + <br> + <label for="fieldset1">another fieldset ContentPane:</label><br> + <fieldset id=fieldset2 dojoType="dijit.layout.ContentPane"> + <label for="date">a DateTextBox widget:</label> + <input id=date dojoType="dijit.form.DateTextBox"><br> + + <label for="textarea">a plain textarea:</label><br> + <textarea id=textarea>hello there!</textarea><br> + + <label for="spinner">a Spinner widget:</label> + <input id=spinner dojoType="dijit.form.NumberSpinner" value=100><br> + + <label for="button">a Combobutton widget:</label> + <div id=button dojoType="dijit.form.ComboButton" tabIndex=0> + <span>push me</span> + <div id=menu dojoType="dijit.Menu"> + <div id=mi1 dojoType="dijit.MenuItem">menu item 1</div> + <div id=mi2 dojoType="dijit.MenuItem">menu item 2</div> + <div id=popupMenuItem dojoType="dijit.PopupMenuItem"> + <span>submenu</span> + <div id=submenu dojoType="dijit.Menu"> + <div id=smi1 dojoType="dijit.MenuItem">submenu item 1</div> + <div id=smi2 dojoType="dijit.MenuItem">submenu item 2</div> + </div> + </div> + </div> + </div> + </fieldset> + </form> +</body> +</html> diff --git a/includes/js/dijit/tests/_base/test_placeStrict.html b/includes/js/dijit/tests/_base/test_placeStrict.html new file mode 100644 index 0000000..c40325c --- /dev/null +++ b/includes/js/dijit/tests/_base/test_placeStrict.html @@ -0,0 +1,400 @@ +<?xml version="1.0" encoding="UTF-8"?> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> + <head> + <title>dijit.place tests</title> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, extraLocale: ['de-de', 'en-us']"></script> + <script type="text/javascript"> + dojo.require("dijit.dijit"); + </script> + <script> + dojo.addOnLoad(function(){ + var vp = dijit.getViewport(); + alert("viewport w="+vp.w + ", h=" + vp.h); + }); + </script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + + body { + padding: 1em; + } + .formQuestion { + background-color:#d0e3f5; + padding:0.3em; + font-weight:900; + font-family:Verdana, Arial, sans-serif; + font-size:0.8em; + color:#5a5a5a; + } + .formAnswer { + background-color:#f5eede; + padding:0.3em; + margin-bottom:1em; + } + .pageSubContentTitle { + color:#8e8e8e; + font-size:1em; + font-family:Verdana, Arial, sans-serif; + margin-bottom:0.75em; + } + .small { + width: 2.5em; + } + .medium { + width: 10em; + } + .long { + width: 20em; + } + + .dojoValidationTextBoxMessage { + display: inline; + margin-left: 1em; + font-weight: bold; + font-style: italic; + font-family: Arial, Verdana, sans-serif; + color: #f66; + font-size: 0.9em; + } + + .noticeMessage { + font-weight: normal; + font-family:Arial, Verdana, sans-serif; + color:#663; + font-size:0.9em; + } + </style> + </head> + + <body class=tundra> + <h2 class="pageSubContentTitle">Test dijit.place</h2> + <p>Currently this just tests getViewport(). Change the size of your browser window and then reload, + and see if it reports the browser window size correctly.<br> + <p>All the text below is just filler text...<br> + <!-- to test form submission, you'll need to create an action handler similar to + http://www.utexas.edu/teamweb/cgi-bin/generic.cgi --> + <form id="form1" action="" name="example" method="post"> + + <div class="formQuestion"> + <span class="emphasize"><label for="q01">First Name: </label></span> + <span class="noticeMessage"> TextBox class, <b>tabIndex=2</b>, Attributes: {trim: true, ucFirst: true, class: 'medium'}, First letter of each word is upper case.</span> + </div> + <div class="formAnswer"> + <input id="q01" type="text" name="firstname" value="testing testing" class="medium" tabIndex=2 + dojoType="dijit.form.TextBox" + trim="true" + ucfirst="true" /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q02">Last Name: </label></span> + <span class="noticeMessage"> TextBox class, Attributes: {trim: true, uppercase: true, class: 'medium'}, all letters converted to upper case. </span> + </div> + <div class="formAnswer"> + <input id="q02" type="text" name="lastname" value="testing testing" class="medium" + dojoType="dijit.form.TextBox" + trim="true" + uppercase="true" /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q03">Age: </label></span> + <span class="noticeMessage"> TextBox class, <b>tabIndex=1</b>, Attributes: {trim: true, digit: true, class: 'small'}, all but digits extracted.</span> + </div> + <div class="formAnswer"> + <input id="q03" type="text" name="age" value="38" class="small" tabIndex=1 + dojoType="dijit.form.NumberTextBox" + promptMessage="(optional) Enter an age between 0 and 120" + constraints={places:0,min:0,max:120} + onChange="console.debug('onChange fired for widget id = ' + this.id + ' with value = ' + arguments[0]);" + digit="true" + trim="true" + /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q04">Occupation: </label></span> + <span class="noticeMessage">ValidationTextBox class, + Attributes: {lowercase: true, required: true}. Displays a prompt message if field is missing. </span> + </div> + <div class="formAnswer"> + <input id="q04" type="text" name="occupation" class="medium" + dojoType="dijit.form.ValidationTextBox" + lowercase="true" + required="true" + promptMessage="Enter an occupation" /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q05">Elevation: </label></span> + <span class="noticeMessage">IntegerTextBox class, + Attributes: {required: true, min:-20000, max:+20000 }, Enter feet above sea level with a sign.</span> + </div> + <div class="formAnswer"> + <input id="q05" class="medium"/> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q08">Annual Income: </label></span> + <span class="noticeMessage">CurrencyTextBox class, + Attributes: {fractional: true}. Enter whole and cents. Currency symbol is optional.</span> + </div> + <div class="formAnswer"> + <input id="q08" type="text" name="income1" class="medium" value="54775.53" + dojoType="dijit.form.CurrencyTextBox" + required="true" + currency="USD" + invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Example: $12,000.00" />USD + </div> + + <div class="formAnswer"> + <input id="q08eur" type="text" name="income2" class="medium" value="54775.53" + dojoType="dijit.form.CurrencyTextBox" + required="true" + currency="EUR" + invalidMessage="Invalid amount. Include euro sign, commas, and cents. Example: €12,000.00" />EUR + </div> +<!-- + <div class="formQuestion"> + <span class="emphasize"><label for="q08a">Annual Income: </label></span> + <span class="noticeMessage">Old regexp currency textbox, + Attributes: {fractional: true}. Enter dollars and cents.</span> + </div> + <div class="formAnswer"> + <input id="q08a" type="text" name="income3" class="medium" value="$54,775.53" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.currency" + trim="true" + required="true" + constraints={fractional:true} + invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Example: $12,000.00" /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q09">IPv4 Address: </label></span> + <span class="noticeMessage">IpAddressTextBox class, + Attributes: {allowIPv6: false, allowHybrid: false}. Also Dotted Hex works, 0x18.0x11.0x9b.0x28</span> + </div> + <div class="formAnswer"> + <input id="q09" type="text" name="ipv4" class="medium" value="24.17.155.40" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.ipAddress" + trim="true" + required="true" + constraints={allowIPv6:false,allowHybrid:false} + invalidMessage="Invalid IPv4 address." /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q10"> IPv6 Address: </label></span> + <span class="noticeMessage">IpAddressTextBox class, + Attributes: {allowDottedDecimal: false, allowDottedHex: false}. + Also hybrid works, x:x:x:x:x:x:d.d.d.d</span> + </div> + <div class="formAnswer"> + <input id="q10" type="text" name="ipv6" class="long" value="0000:0000:0000:0000:0000:0000:0000:0000" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.ipAddress" + trim="true" + uppercase = "true" + required="true" + constraints={allowDottedDecimal:false, allowDottedHex:false, allowDottedOctal:false} + invalidMessage="Invalid IPv6 address, please enter eight groups of four hexadecimal digits. x:x:x:x:x:x:x:x" /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q11"> URL: </label></span> + <span class="noticeMessage">UrlTextBox class, + Attributes: {required: true, trim: true, scheme: true}. </span> + </div> + <div class="formAnswer"> + <input id="q11" type="text" name="url" class="long" value="http://www.xyz.com/a/b/c?x=2#p3" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.url" + trim="true" + required="true" + constraints={scheme:true} + invalidMessage="Invalid URL. Be sure to include the scheme, http://..." /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q12"> Email Address </label></span> + <span class="noticeMessage">EmailTextBox class, + Attributes: {required: true, trim: true}. </span> + </div> + <div class="formAnswer"> + <input id="q12" type="text" name="email" class="long" value="fred&barney@stonehenge.com" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.emailAddress" + trim="true" + required="true" + invalidMessage="Invalid Email Address." /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q13"> Email Address List </label></span> + <span class="noticeMessage">EmailListTextBox class, + Attributes: {required: true, trim: true}. </span> + </div> + <div class="formAnswer"> + <input id="q13" type="text" name="email" class="long" value="a@xyz.com; b@xyz.com; c@xyz.com; " + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.emailAddressList" + trim="true" + required="true" + invalidMessage="Invalid Email Address List." /> + </div> +--> + + <div class="formQuestion"> + <span class="emphasize"><label for="q14"> Date (American format) </label></span> + <span class="noticeMessage">DateTextBox class, + Attributes: {locale: "en-us", required: true}. Works for leap years</span> + </div> + <div class="formAnswer"> + <input id="q14" type="text" name="date1" class="medium" value="2005-12-30" + dojoType="dijit.form.DateTextBox" + constraints={locale:'en-us'} + required="true" + promptMessage="mm/dd/yyyy" + invalidMessage="Invalid date. Use mm/dd/yyyy format." /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q15"> Date (German format) </label></span> + <span class="noticeMessage">DateTextBox class, + Attributes: {locale: "de-de", min:2006-01-01, max:2006-12-31}. Works for leap years</span> + </div> + <div class="formAnswer"> + <input id="q15" class="medium"/> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q16"> 12 Hour Time </label></span> + <span class="noticeMessage">TimeTextBox class, + Attributes: {formatLength: "medium", required: true, trim: true}</span> + </div> + <div class="formAnswer"> + <input id="q16" type="text" name="time1" class="medium" value="5:45:00 pm" + dojoType="dijit.form.ValidationTextBox" + validator="dojo.date.local.parse" + constraints={formatLength:'medium',selector:'time'} + trim="true" + required="true" + invalidMessage="Invalid time." /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q17"> 24 Hour Time</label></span> + <span class="noticeMessage">TimeTextBox class, + Attributes: {displayFormat:"HH:mm:ss", required: true, trim: true}</span> + </div> + <div class="formAnswer"> + <input id="q17" type="text" name="time2" class="medium" value="17:45:00" + dojoType="dijit.form.ValidationTextBox" + validator="dojo.date.local.parse" + constraints={formatLength:'short',selector:'time',timePattern:'HH:mm:ss'} + trim="true" + required="true" + invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours." /> + </div> + +<!-- + <div class="formQuestion"> + <span class="emphasize"><label for="q18"> US State 2 letter abbr. </label></span> + <span class="noticeMessage">UsStateTextBox class, + Attributes: {required: true, trim: true, uppercase: true}</span> + </div> + <div class="formAnswer"> + <input id="q18" type="text" name="state" class="small" value="CA" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.us.state" + constraints={allowTerritories:false} + trim="true" + uppercase="true" + required="true" + invalidMessage="Invalid US state abbr." /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q19"> US Zip Code </label></span> + <span class="noticeMessage">UsZipTextBox class, + Attributes: {required: true, trim: true} Five digit Zip code or 5 + 4.</span> + </div> + <div class="formAnswer"> + <input id="q19" type="text" name="zip" class="medium" value="98225-1649" + dojoType="dijit.form.ValidationTextBox" + validator="dojo.validate.us.isZipCode" + trim="true" + required="true" + invalidMessage="Invalid US Zip Code." /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q20"> US Social Security Number </label></span> + <span class="noticeMessage">UsSocialSecurityNumberTextBox class, + Attributes: {required: true, trim: true} </span> + </div> + <div class="formAnswer"> + <input id="q20" type="text" name="ssn" class="medium" value="123-45-6789" + dojoType="dijit.form.ValidationTextBox" + validator="dojo.validate.us.isSocialSecurityNumber" + trim="true" + required="true" + invalidMessage="Invalid US Social Security Number." /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q21"> 10-digit US Phone Number </label></span> + <span class="noticeMessage">UsPhoneNumberTextBox class, + Attributes: {required: true, trim: true} </span> + </div> + <div class="formAnswer"> + <input id="q21" type="text" name="phone" class="medium" value="(123) 456-7890" + dojoType="dijit.form.ValidationTextBox" + validator="dojo.validate.us.isPhoneNumber" + trim="true" + required="true" + invalidMessage="Invalid US Phone Number." /> + </div> + --> + <div class="formQuestion"> + <span class="emphasize"><label for="q22"> Regular Expression </label></span> + <span class="noticeMessage">RegexpTextBox class, + Attributes: {required: true} </span> + </div> + <div class="formAnswer"> + <input id="q22" type="text" name="phone" class="medium" value="someTestString" + dojoType="dijit.form.ValidationTextBox" + regExp="[\w]+" + required="true" + invalidMessage="Invalid Non-Space Text." /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="q23"> Password </label></span> + <span class="noticeMessage">(just a test that type attribute is obeyed) </span> + </div> + <div class="formAnswer"> + <input id="q23" type="password" name="password" class="medium" + dojoType="dijit.form.TextBox" /> + </div> + + <div class="formQuestion"> + <span class="emphasize"><label for="ticket1651">Trac ticket 1651: </label></span> + <span class="noticeMessage">value: null should show up as empty</span> + </div> + <div class="formAnswer"> + <input id="ticket1651" class="medium" value="not null"/> + </div> + + <button name="button" onclick="displayData(); return false;">view data</button> + <input type="submit" name="submit" /> + </form> + </body> +</html> diff --git a/includes/js/dijit/tests/_base/test_typematic.html b/includes/js/dijit/tests/_base/test_typematic.html new file mode 100644 index 0000000..4a85027 --- /dev/null +++ b/includes/js/dijit/tests/_base/test_typematic.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Typematic Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, debugAtAllCosts: true"></script> + <script type="text/javascript"> + dojo.require("dijit._base.typematic"); + + var lastCount = 0; + function typematicCallBack(count, node, evt){ + var inputNode = dojo.byId('typematicInput'); + if (node == inputNode){ + key = "a"; + }else{ + key = "b"; + } + if(-1 == count){ + console.debug((lastCount+1) + ' ' + key + ' events'); + }else{ + lastCount = count; + inputNode.value += key; + } + inputNode.focus(); + } + dojo.addOnLoad(function(){ + var keyNode = dojo.byId('typematicInput'); + var mouseNode = dojo.byId('typematicButton'); + dijit.typematic.addKeyListener(keyNode, + { + keyCode:dojo.keys.F10, + ctrlKey:true + }, + this, typematicCallBack, 200, 200); + dijit.typematic.addMouseListener(mouseNode, + this, typematicCallBack, 0.9, 200); + keyNode.focus(); // make it easier to type + }); + </script> +</head> +<body class="tundra"> + + <h2>Dijit typematic tests</h2> + Press and hold the <b>ctrl+F10</b> keys to see a's typed (constant rate) in the input field,<br> + or left-mouse click the button and hold down to see b's typed (increasing rate) in the input field.<br> + <input id="typematicInput" size="500"><button id="typematicButton">to B or not to B</button> + +</body> +</html> diff --git a/includes/js/dijit/tests/_base/viewport.html b/includes/js/dijit/tests/_base/viewport.html new file mode 100644 index 0000000..2b8454a --- /dev/null +++ b/includes/js/dijit/tests/_base/viewport.html @@ -0,0 +1,79 @@ +<html> +<head> + <title>dijit.getViewport() test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + html, body { margin: 0px; padding: 0px; } + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: false, parseOnLoad: false"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("doh.runner"); + dojo.require("dijit.dijit"); + + function compute(){ + var d = dojo.marginBox(dojo.byId("documentBorder")), + v = dijit.getViewport(); + dojo.byId("results").innerHTML += + "Document is " + d.w + "px x " + d.h + "px" + + ", viewport is " + v.w + "px x " + v.h + "px" + + ", with scroll offset of (" + v.l + ", " + v.t + ")<br>"; + } + + function addText(){ + dojo.byId("results").innerHTML += "Adding text...<br><br>"; + var text=""; + for(var i=0;i<100;i++){ + text += "<span style='white-space: nowrap'>"; + for(var j=0;j<3;j++){ text += "Now is the time for all good men to come to the aid of their country."; } + text += "</span><br>"; + } + dojo.byId("documentBorder").innerHTML += text; + } + + dojo.addOnLoad(function(){ + doh.register("dijit._base.manager", + [ + function initial(t){ + console.log("calling compute"); + compute(); + console.log("called compute"); + var d = dojo.marginBox(dojo.byId("documentBorder")), + v = dijit.getViewport(); + doh.t(v.h > d.h); + }, + function expand(t){ + var v = dijit.getViewport(); + addText(); + compute(); + var v2 = dijit.getViewport(); + doh.t(v2.h <= v.h); + doh.t(v2.h+20 >= v.h); + } + ] + ); + doh.run(); + }); + + </script> +</head> +<body> + <div id="documentBorder" style="border: solid red 2px;"> + <h1>dijit.getViewport() test</h1> + <div style="padding: 10px; border: solid blue 1px;">padding div</div> + <button onclick="addText(); compute();">add text and compute size</button> + <button onclick="compute();">recompute size</button> + <ol> + <li>check results div below to see that before adding text, document is smaller than viewport + <li>after adding text, document should be bigger than viewport,and check that viewport size hasn't changed, + except maybe being a little bit smaller (about 15px) because of the size of the scrollbars + <li>resize browser window and click the "recompute size" button; reported viewport size should change + <li>scroll the window and click "recompute size" to see that the scroll position is taken into effect + </ol> + <div id=results style="border: 5px solid blue;"> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/_base/viewport.js b/includes/js/dijit/tests/_base/viewport.js new file mode 100644 index 0000000..8cee9c4 --- /dev/null +++ b/includes/js/dijit/tests/_base/viewport.js @@ -0,0 +1,10 @@ +if(!dojo._hasResource["dijit.tests._base.viewport"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests._base.viewport"] = true; +dojo.provide("dijit.tests._base.viewport"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests._base.viewport", dojo.moduleUrl("dijit", "tests/_base/viewport.html")); + doh.registerUrl("dijit.tests._base.viewportStrict", dojo.moduleUrl("dijit", "tests/_base/viewportStrict.html")); +} + +} diff --git a/includes/js/dijit/tests/_base/viewportStrict.html b/includes/js/dijit/tests/_base/viewportStrict.html new file mode 100644 index 0000000..812c796 --- /dev/null +++ b/includes/js/dijit/tests/_base/viewportStrict.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.getViewport() test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + html, body { margin: 0px; padding: 0px; } + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: false, parseOnLoad: false"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("doh.runner"); + dojo.require("dijit.dijit"); + + function compute(){ + var d = dojo.marginBox(dojo.byId("documentBorder")), + v = dijit.getViewport(); + dojo.byId("results").innerHTML += + "Document is " + d.w + "px x " + d.h + "px" + + ", viewport is " + v.w + "px x " + v.h + "px" + + ", with scroll offset of (" + v.l + ", " + v.t + ")<br>"; + } + + function addText(){ + dojo.byId("results").innerHTML += "Adding text...<br><br>"; + var text=""; + for(var i=0;i<100;i++){ + text += "<span style='white-space: nowrap'>"; + for(var j=0;j<3;j++){ text += "Now is the time for all good men to come to the aid of their country."; } + text += "</span><br>"; + } + dojo.byId("documentBorder").innerHTML += text; + } + + dojo.addOnLoad(function(){ + doh.register("dijit._base.manager", + [ + function initial(t){ + console.log("calling compute"); + compute(); + console.log("called compute"); + var d = dojo.marginBox(dojo.byId("documentBorder")), + v = dijit.getViewport(); + doh.t(v.h > d.h); + }, + function expand(t){ + var v = dijit.getViewport(); + addText(); + compute(); + var v2 = dijit.getViewport(); + doh.t(v2.h <= v.h); + doh.t(v2.h+20 >= v.h); + } + ] + ); + doh.run(); + }); + + </script> +</head> +<body> + <div id="documentBorder" style="border: solid red 2px;"> + <h1>dijit.getViewport() test</h1> + <div style="padding: 10px; border: solid blue 1px;">padding div</div> + <button onclick="addText(); compute();">add text and compute size</button> + <button onclick="compute();">recompute size</button> + <ol> + <li>check results div below to see that before adding text, document is smaller than viewport + <li>after adding text, document should be bigger than viewport,and check that viewport size hasn't changed, + except maybe being a little bit smaller (about 15px) because of the size of the scrollbars + <li>resize browser window and click the "recompute size" button; reported viewport size should change + <li>scroll the window and click "recompute size" to see that the scroll position is taken into effect + </ol> + <div id=results style="border: 5px solid blue;"> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/_base/wai.html b/includes/js/dijit/tests/_base/wai.html new file mode 100644 index 0000000..50ab8ca --- /dev/null +++ b/includes/js/dijit/tests/_base/wai.html @@ -0,0 +1,115 @@ +<html>
+<head>
+ <title>Dijit wai unit test</title>
+ <script type="text/javascript" src="../../../dojo/dojo.js"
+ djConfig="isDebug: true"></script>
+ <script type="text/javascript">
+ dojo.require("doh.runner");
+ dojo.require("dijit.dijit");
+
+ dojo.addOnLoad(function(){
+ doh.register("dijit.tests._base.wai",
+ [
+ function getWaiRoleOnElementWithNoRole(){
+ var elem = dojo.byId("no-role-or-states");
+ doh.assertFalse(dijit.hasWaiRole(elem));
+ doh.assertEqual("", dijit.getWaiRole(elem));
+ },
+
+ function getEmptyWairoleRole(){
+ var elem = dojo.byId("empty-wairole");
+ doh.assertTrue(dijit.hasWaiRole(elem));
+ doh.assertEqual("", dijit.getWaiRole(elem));
+ },
+
+ function getWairoleRole(){
+ var elem = dojo.byId("wairole");
+ doh.assertTrue(dijit.hasWaiRole(elem));
+ doh.assertEqual("menuitem", dijit.getWaiRole(elem));
+ },
+
+ function getUnprefixedRole(){
+ var elem = dojo.byId("unprefixed-role");
+ doh.assertTrue(dijit.hasWaiRole(elem));
+ doh.assertEqual("menuitem", dijit.getWaiRole(elem));
+ },
+
+ function setWaiRole(){
+ var div = document.createElement("div");
+ dijit.setWaiRole(div, "menuitem");
+ if(dojo.isFF && dojo.isFF < 3){
+ doh.assertEqual("wairole:menuitem",
+ div.getAttribute("role"));
+ }else{
+ doh.assertEqual("menuitem",
+ div.getAttribute("role"));
+ }
+ },
+
+ function removeWaiRole(){
+ var div = document.createElement("div");
+ dijit.setWaiRole(div, "menuitem");
+ dijit.removeWaiRole(div);
+ if(div.hasAttribute){
+ doh.assertFalse(div.hasAttribute("role"));
+ }else{
+ doh.assertTrue(div.getAttribute("role") == null
+ || div.getAttribute("role") == "");
+ }
+ },
+
+ function getWaiStateOnElementWithNoState(){
+ var elem = dojo.byId("no-role-or-states");
+ doh.assertFalse(dijit.hasWaiState(elem, "checked"));
+ doh.assertEqual("", dijit.getWaiState(elem, "checked"));
+ },
+
+ function getWaiState(){
+ if(dojo.isFF && dojo.isFF < 3){
+ var div = document.createElement("div");
+ div.setAttributeNS("http://www.w3.org/2005/07/aaa",
+ "aaa:checked", "true");
+ doh.assertTrue(dijit.hasWaiState(div, "checked"));
+ doh.assertEqual("true",
+ dijit.getWaiState(div, "checked"));
+ }else{
+ var elem = dojo.byId("checked");
+ doh.assertTrue(dijit.hasWaiState(elem, "checked"));
+ doh.assertEqual("true",
+ dijit.getWaiState(elem, "checked"));
+ }
+ },
+
+ function setWaiState(){
+ var div = document.createElement("div");
+ dijit.setWaiState(div, "checked", "true");
+ if(dojo.isFF && dojo.isFF < 3){
+ doh.assertEqual("true",
+ div.getAttributeNS("http://www.w3.org/2005/07/aaa",
+ "checked"));
+ }else{
+ doh.assertEqual("true",
+ div.getAttribute("aria-checked"));
+ }
+ },
+
+ function removeWaiState(){
+ var div = document.createElement("div");
+ dijit.setWaiState(div, "checked", "true");
+ dijit.removeWaiState(div, "checked");
+ doh.assertEqual("", dijit.getWaiState(div, "checked"));
+ }
+ ]
+ );
+ doh.run();
+ });
+ </script>
+</head>
+<body>
+ <div id="no-role-or-states"></div>
+ <div id="empty-wairole" role="wairole:"></div>
+ <div id="wairole" role="wairole:menuitem"></div>
+ <div id="unprefixed-role" role="menuitem"></div>
+ <div id="checked" aria-checked="true"></div>
+</body>
+</html>
diff --git a/includes/js/dijit/tests/_base/wai.js b/includes/js/dijit/tests/_base/wai.js new file mode 100644 index 0000000..3bd299a --- /dev/null +++ b/includes/js/dijit/tests/_base/wai.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests._base.wai"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests._base.wai"] = true; +dojo.provide("dijit.tests._base.wai"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests._base.wai", dojo.moduleUrl("dijit", "tests/_base/wai.html")); +} + +} diff --git a/includes/js/dijit/tests/_data/categories.json b/includes/js/dijit/tests/_data/categories.json new file mode 100644 index 0000000..3717e1e --- /dev/null +++ b/includes/js/dijit/tests/_data/categories.json @@ -0,0 +1,12 @@ +{ + identifier: 'id', + label: 'name', + items: [ + { id: '0', name:'Foods', numberOfItems:1, children:[ {_reference: '1'}, {_reference: '2'}, {_reference: '3'} ] }, + { id: '1', name:'Fruits', numberOfItems:1, children:[ {_reference: '4'} ] }, + { id: '4',name:'Citrus', numberOfItems:1, items:[ {_reference: '5'} ] }, + { id: '5', name:'Orange'}, + { id: '2', name:'Vegetables', numberOfItems:0}, + { id: '3', name:'Cereals', numberOfItems:0} + ] +} diff --git a/includes/js/dijit/tests/_data/categoriesNested.json b/includes/js/dijit/tests/_data/categoriesNested.json new file mode 100644 index 0000000..05fb89c --- /dev/null +++ b/includes/js/dijit/tests/_data/categoriesNested.json @@ -0,0 +1,13 @@ +{ + identifier: 'id', + label: 'name', + items: [ + { id: '0', name:'Fruits', numberOfItems:1, children:[ + { id: '1',name:'Citrus', numberOfItems:1, items:[ + { id: '4', name:'Orange'} + ]} + ]}, + { id: '2', name:'Vegetables', numberOfItems:0}, + { id: '3', name:'Cereals', numberOfItems:0} + ] +} diff --git a/includes/js/dijit/tests/_data/countries.json b/includes/js/dijit/tests/_data/countries.json new file mode 100644 index 0000000..3f16d0b --- /dev/null +++ b/includes/js/dijit/tests/_data/countries.json @@ -0,0 +1,45 @@ +{ identifier: 'name', + label: 'name', + items: [ + { name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km', + timezone: '-1 UTC to +4 UTC', + children:[{_reference:'Egypt'}, {_reference:'Kenya'}, {_reference:'Sudan'}] }, + { name:'Egypt', type:'country' }, + { name:'Kenya', type:'country', + children:[{_reference:'Nairobi'}, {_reference:'Mombasa'}] }, + { name:'Nairobi', type:'city' }, + { name:'Mombasa', type:'city' }, + { name:'Sudan', type:'country', + children:{_reference:'Khartoum'} }, + { name:'Khartoum', type:'city' }, + { name:'Asia', type:'continent', + children:[{_reference:'China'}, {_reference:'India'}, {_reference:'Russia'}, {_reference:'Mongolia'}] }, + { name:'China', type:'country' }, + { name:'India', type:'country' }, + { name:'Russia', type:'country' }, + { name:'Mongolia', type:'country' }, + { name:'Australia', type:'continent', population:'21 million', + children:{_reference:'Commonwealth of Australia'}}, + { name:'Commonwealth of Australia', type:'country', population:'21 million'}, + { name:'Europe', type:'continent', + children:[{_reference:'Germany'}, {_reference:'France'}, {_reference:'Spain'}, {_reference:'Italy'}] }, + { name:'Germany', type:'country' }, + { name:'France', type:'country' }, + { name:'Spain', type:'country' }, + { name:'Italy', type:'country' }, + { name:'North America', type:'continent', + children:[{_reference:'Mexico'}, {_reference:'Canada'}, {_reference:'United States of America'}] }, + { name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km', + children:[{_reference:'Mexico City'}, {_reference:'Guadalajara'}] }, + { name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC'}, + { name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC' }, + { name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km', + children:[{_reference:'Ottawa'}, {_reference:'Toronto'}] }, + { name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC'}, + { name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC' }, + { name:'United States of America', type:'country' }, + { name:'South America', type:'continent', + children:[{_reference:'Brazil'}, {_reference:'Argentina'}] }, + { name:'Brazil', type:'country', population:'186 million' }, + { name:'Argentina', type:'country', population:'40 million' } +]} diff --git a/includes/js/dijit/tests/_data/dijits.json b/includes/js/dijit/tests/_data/dijits.json new file mode 100644 index 0000000..160581b --- /dev/null +++ b/includes/js/dijit/tests/_data/dijits.json @@ -0,0 +1 @@ +{"timestamp":1193692111,"items":[{"namespace":"dijit","className":"dijit.ColorPalette","summary":"Grid showing various colors, so the user can pick a certain color","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Declaration","summary":"The Declaration widget allows a user to declare new widget\nclasses directly from a snippet of markup.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.DialogUnderlay","summary":"the thing that grays out the screen behind the dialog\n\nTemplate has two divs; outer div is used for fade-in\/fade-out, and also to hold background iframe.\nInner div has opacity specified in CSS file.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Dialog","summary":"Pops up a modal dialog window, blocking access to the screen\nand also graying out the screen Dialog is extended from\nContentPane so it supports all the same parameters (href, etc.)","description":null,"examples":null},{"namespace":"dijit","className":"dijit.TooltipDialog","summary":"Pops up a dialog that appears like a Tooltip","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Editor","summary":"A rich-text Editing widget","description":null,"examples":null},{"namespace":"dijit","className":"dijit.InlineEditBox","summary":"Behavior for an existing node (<p>, <div>, <span>, etc.) so that\nwhen you click it, an editor shows up in place of the original\ntext. Optionally, Save and Cancel button are displayed below the edit widget.\nWhen Save is clicked, the text is pulled from the edit\nwidget and redisplayed and the edit widget is again hidden.\nBy default a plain Textarea widget is used as the editor (or for\ninline values a TextBox), but you can specify an editor such as\ndijit.Editor (for editing HTML) or a Slider (for adjusting a number).\nAn edit widget must support the following API to be used:\nString getDisplayedValue() OR String getValue()\nvoid setDisplayedValue(String) OR void setValue(String)\nvoid focus()","description":null,"examples":null},{"namespace":"dijit","className":"dijit._InlineEditor","summary":"internal widget used by InlineEditBox, displayed when in editing mode\nto display the editor and maybe save\/cancel buttons. Calling code should\nconnect to save\/cancel methods to detect when editing is finished\n\nHas mainly the same parameters as InlineEditBox, plus these values:\n\nstyle: Object\nSet of CSS attributes of display node, to replicate in editor\n\nvalue: String\nValue as an HTML string or plain text string, depending on renderAsHTML flag","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Menu","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.MenuItem","summary":"A line item in a Menu2\n\nMake 3 columns\nicon, label, and expand arrow (BiDi-dependent) indicating sub-menu","description":null,"examples":null},{"namespace":"dijit","className":"dijit.PopupMenuItem","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.MenuSeparator","summary":"A line between two menu items","description":null,"examples":null},{"namespace":"dijit","className":"dijit.ProgressBar","summary":"a progress widget\n\nusage:\n<div dojoType=\"ProgressBar\"","description":null,"examples":null},{"namespace":"dijit","className":"dijit.TitlePane","summary":"A pane with a title on top, that can be opened or collapsed.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Toolbar","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.ToolbarSeparator","summary":"A line between two menu items","description":null,"examples":null},{"namespace":"dijit","className":"dijit._MasterTooltip","summary":"Internal widget that holds the actual tooltip markup,\nwhich occurs once per page.\nCalled by Tooltip widgets which are just containers to hold\nthe markup","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Tooltip","summary":"Pops up a tooltip (a help message) when you hover over a node.","description":null,"examples":null},{"namespace":"dijit","className":"dijit._TreeNode","summary":"Single node within a tree","description":null,"examples":null},{"namespace":"dijit","className":"dijit.Tree","summary":"This widget displays hierarchical data from a store. A query is specified\nto get the \"top level children\" from a data store, and then those items are\nqueried for their children and so on (but lazily, as the user clicks the expand node).\n\nThus in the default mode of operation this widget is technically a forest, not a tree,\nin that there can be multiple \"top level children\". However, if you specify label,\nthen a special top level node (not corresponding to any item in the datastore) is\ncreated, to father all the top level children.","description":null,"examples":null},{"namespace":"dijit","className":"dijit._Calendar","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit._Contained","summary":"Mixin for widgets that are children of a container widget","description":null,"examples":null},{"namespace":"dijit","className":"dijit._Container","summary":"Mixin for widgets that contain a list of children like SplitContainer","description":null,"examples":null},{"namespace":"dijit","className":"dijit._KeyNavContainer","summary":"A _Container with keyboard navigation of its children.\nTo use this mixin, call connectKeyNavHandlers() in\npostCreate() and call connectKeyNavChildren() in startup().","description":null,"examples":null},{"namespace":"dijit","className":"dijit._Templated","summary":"mixin for widgets that are instantiated from a template","description":null,"examples":null},{"namespace":"dijit","className":"dijit._TimePicker","summary":"A graphical time picker that TimeTextBox pops up\nIt is functionally modeled after the Java applet at http:\/\/java.arcadevillage.com\/applets\/timepica.htm\nSee ticket #599","description":null,"examples":null},{"namespace":"dijit","className":"dijit._Widget","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.WidgetSet","summary":"A set of widgets indexed by id","description":null,"examples":null},{"namespace":"dijit","className":"dijit.BackgroundIframe","summary":"For IE z-index schenanigans. id attribute is required.","description":"new dijit.BackgroundIframe(node)\nMakes a background iframe as a child of node, that fills\narea (and position) of node","examples":null},{"namespace":"dijit","className":"dijit._editor.RichText","summary":"dijit._editor.RichText is the core of the WYSIWYG editor in dojo, which\nprovides the basic editing features. It also encapsulates the differences\nof different js engines for various browsers","description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor._Plugin","summary":"only allow updates every two tenths of a second","description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.AlwaysShowToolbar","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.EnterKeyHandling","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.FontChoice","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.DualStateDropDownButton","summary":"a DropDownButton but button can be displayed in two states (checked or unchecked)","description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.UrlTextBox","summary":"the URL input box we use in our dialog\n\nregular expression for URLs, generated from dojo.regexp.url()","description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.LinkDialog","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit._editor.plugins.TextColor","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.range.W3CRange","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.demos.chat.Room","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.Button","summary":"Basically the same thing as a normal HTML button, but with special styling.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.DropDownButton","summary":"push the button and a menu shows up","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.ComboButton","summary":"left side is normal button, right side displays menu","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.ToggleButton","summary":"A button that can be in two states (checked or not).\nCan be base class for things like tabs or checkbox or radio buttons","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.CheckBox","summary":"Same as an HTML checkbox, but with fancy styling.","description":"Value of \"type\" attribute for <input>","examples":null},{"namespace":"dijit","className":"dijit.form.RadioButton","summary":"Same as an HTML radio, but with fancy styling.","description":"This shared object keeps track of all widgets, grouped by name","examples":null},{"namespace":"dijit","className":"dijit.form.ComboBoxMixin","summary":"Auto-completing text box, and base class for FilteringSelect widget.\n\nThe drop down box's values are populated from an class called\na data provider, which returns a list of values based on the characters\nthat the user has typed into the input box.\n\nSome of the options to the ComboBox are actually arguments to the data\nprovider.\n\nYou can assume that all the form widgets (and thus anything that mixes\nin ComboBoxMixin) will inherit from _FormWidget and thus the \"this\"\nreference will also \"be a\" _FormWidget.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form._ComboBoxMenu","summary":"these functions are called in showResultList","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.ComboBox","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.CurrencyTextBox","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.DateTextBox","summary":"A validating, serializable, range-bound date text box.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.FilteringSelect","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form._FormMixin","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.Form","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.InlineEditBox","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.NumberSpinner","summary":"Number Spinner","description":"This widget is the same as NumberTextBox but with up\/down arrows added","examples":null},{"namespace":"dijit","className":"dijit.form.NumberTextBoxMixin","summary":"A mixin for all number textboxes","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.NumberTextBox","summary":"A validating, serializable, range-bound text box.\nconstraints object: min, max, places","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.HorizontalSlider","summary":"A form widget that allows one to select a value with a horizontally draggable image","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.VerticalSlider","summary":"A form widget that allows one to select a value with a vertically draggable image","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form._SliderMover","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.HorizontalRule","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.VerticalRule","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.HorizontalRuleLabels","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.VerticalRuleLabels","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.TextBox","summary":"A generic textbox field.\nServes as a base class to derive more specialized functionality in subclasses.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.Textarea","summary":"event handlers, you can over-ride these in your own subclasses","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.TimeTextBox","summary":"NaN\nNaN","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.ValidationTextBox","summary":"default values for new subclass properties","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.MappedTextBox","summary":"A subclass of ValidationTextBox.\nProvides a hidden input field and a serialize method to override","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form.RangeBoundTextBox","summary":"A subclass of MappedTextBox.\nTests for a value out-of-range","description":null,"examples":null},{"namespace":"dijit","className":"dijit.form._FormWidget","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.form._Spinner","summary":"Mixin for validation widgets with a spinner","description":"This class basically (conceptually) extends dijit.form.ValidationTextBox.\nIt modifies the template to have up\/down arrows, and provides related handling code.","examples":null},{"namespace":"dijit","className":"dijit.layout.AccordionContainer","summary":"Holds a set of panes where every pane's title is visible, but only one pane's content is visible at a time,\nand switching between panes is visualized by sliding the other panes up\/down.\nusage:\n<div dojoType=\"dijit.layout.AccordionContainer\">\n<div dojoType=\"dijit.layout.AccordionPane\" title=\"pane 1\">\n<div dojoType=\"dijit.layout.ContentPane\">...<\/div>\n<\/div>\n<div dojoType=\"dijit.layout.AccordionPane\" title=\"pane 2\">\n<p>This is some text<\/p>\n...\n<\/div>","description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout.AccordionPane","summary":"AccordionPane is a ContentPane with a title that may contain another widget.\nNested layout widgets, such as SplitContainer, are not supported at this time.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout.ContentPane","summary":"A widget that acts as a Container for other widgets, and includes a ajax interface","description":"A widget that can be used as a standalone widget\nor as a baseclass for other widgets\nHandles replacement of document fragment using either external uri or javascript\ngenerated markup or DOM content, instantiating widgets within that content.\nDon't confuse it with an iframe, it only needs\/wants document fragments.\nIt's useful as a child of LayoutContainer, SplitContainer, or TabContainer.\nBut note that those classes can contain any widget as a child.\nexample:\nSome quick samples:\nTo change the innerHTML use .setContent('<b>new content<\/b>')\n\nOr you can send it a NodeList, .setContent(dojo.query('div [class=selected]', userSelection))\nplease note that the nodes in NodeList will copied, not moved\n\nTo do a ajax update use .setHref('url')","examples":null},{"namespace":"dijit","className":"dijit.layout.LayoutContainer","summary":"Provides Delphi-style panel layout semantics.\n\ndetails\nA LayoutContainer is a box with a specified size (like style=\"width: 500px; height: 500px;\"),\nthat contains children widgets marked with \"layoutAlign\" of \"left\", \"right\", \"bottom\", \"top\", and \"client\".\nIt takes it's children marked as left\/top\/bottom\/right, and lays them out along the edges of the box,\nand then it takes the child marked \"client\" and puts it into the remaining space in the middle.\n\nLeft\/right positioning is similar to CSS's \"float: left\" and \"float: right\",\nand top\/bottom positioning would be similar to \"float: top\" and \"float: bottom\", if there were such\nCSS.\n\nNote that there can only be one client element, but there can be multiple left, right, top,\nor bottom elements.\n\nusage\n<style>\nhtml, body{ height: 100%; width: 100%; }\n<\/style>\n<div dojoType=\"dijit.layout.LayoutContainer\" style=\"width: 100%; height: 100%\">\n<div dojoType=\"dijit.layout.ContentPane\" layoutAlign=\"top\">header text<\/div>\n<div dojoType=\"dijit.layout.ContentPane\" layoutAlign=\"left\" style=\"width: 200px;\">table of contents<\/div>\n<div dojoType=\"dijit.layout.ContentPane\" layoutAlign=\"client\">client area<\/div>\n<\/div>\n\nLays out each child in the natural order the children occur in.\nBasically each child is laid out into the \"remaining space\", where \"remaining space\" is initially\nthe content area of this widget, but is reduced to a smaller rectangle each time a child is added.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout.LinkPane","summary":"A ContentPane that loads data remotely","description":"LinkPane is just a ContentPane that loads data remotely (via the href attribute),\nand has markup similar to an anchor. The anchor's body (the words between <a> and <\/a>)\nbecome the title of the widget (used for TabContainer, AccordionContainer, etc.)\nexample:\n<a href=\"foo.html\">my title<\/a>\n\nI'm using a template because the user may specify the input as\n<a href=\"foo.html\">title<\/a>, in which case we need to get rid of the\n<a> because we don't want a link.","examples":null},{"namespace":"dijit","className":"dijit.layout.SplitContainer","summary":"A Container widget with sizing handles in-between each child","description":"Contains multiple children widgets, all of which are displayed side by side\n(either horizontally or vertically); there's a bar between each of the children,\nand you can adjust the relative size of each child by dragging the bars.\n\nYou must specify a size (width and height) for the SplitContainer.","examples":null},{"namespace":"dijit","className":"dijit.layout.StackContainer","summary":null,"description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout.StackController","summary":"Set of buttons to select a page in a page list.\nMonitors the specified StackContainer, and whenever a page is\nadded, deleted, or selected, updates itself accordingly.","description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout._StackButton","summary":"StackContainer buttons are not in the tab order by default","description":null,"examples":null},{"namespace":"dijit","className":"dijit.layout.TabContainer","summary":"A Container with Title Tabs, each one pointing at a pane in the container.","description":"A TabContainer is a container that has multiple panes, but shows only\none pane at a time. There are a set of tabs corresponding to each pane,\nwhere each tab has the title (aka title) of the pane, and optionally a close button.\n\nPublishes topics <widgetId>-addChild, <widgetId>-removeChild, and <widgetId>-selectChild\n(where <widgetId> is the id of the TabContainer itself.","examples":null},{"namespace":"dijit","className":"dijit.layout.TabController","summary":"Set of tabs (the things with titles and a close button, that you click to show a tab panel).","description":"Lets the user select the currently shown pane in a TabContainer or StackContainer.\nTabController also monitors the TabContainer, and whenever a pane is\nadded or deleted updates itself accordingly.","examples":null},{"namespace":"dijit","className":"dijit.layout._TabButton","summary":"A tab (the thing you click to select a pane).","description":"Contains the title of the pane, and optionally a close-button to destroy the pane.\nThis is an internal widget and should not be instantiated directly.","examples":null},{"namespace":"dijit","className":"dijit.layout._LayoutWidget","summary":"Mixin for widgets that contain a list of children like SplitContainer.\nWidgets which mixin this code must define layout() to lay out the children","description":null,"examples":null}],"identifier":"className","label":"className"}
\ No newline at end of file diff --git a/includes/js/dijit/tests/_data/states.json b/includes/js/dijit/tests/_data/states.json new file mode 100644 index 0000000..d870dfa --- /dev/null +++ b/includes/js/dijit/tests/_data/states.json @@ -0,0 +1,64 @@ +{identifier:"abbreviation",
+items: [
+ {name:"Alabama", label:"<img width='97px' height='127px' src='images/Alabama.jpg'/>Alabama",abbreviation:"AL"},
+ {name:"Alaska", label:"Alaska",abbreviation:"AK"},
+ {name:"American Samoa", label:"American Samoa",abbreviation:"AS"},
+ {name:"Arizona", label:"Arizona",abbreviation:"AZ"},
+ {name:"Arkansas", label:"Arkansas",abbreviation:"AR"},
+ {name:"Armed Forces Europe", label:"Armed Forces Europe",abbreviation:"AE"},
+ {name:"Armed Forces Pacific", label:"Armed Forces Pacific",abbreviation:"AP"},
+ {name:"Armed Forces the Americas", label:"Armed Forces the Americas",abbreviation:"AA"},
+ {name:"California", label:"California",abbreviation:"CA"},
+ {name:"Colorado", label:"Colorado",abbreviation:"CO"},
+ {name:"Connecticut", label:"Connecticut",abbreviation:"CT"},
+ {name:"Delaware", label:"Delaware",abbreviation:"DE"},
+ {name:"District of Columbia", label:"District of Columbia",abbreviation:"DC"},
+ {name:"Federated States of Micronesia", label:"Federated States of Micronesia",abbreviation:"FM"},
+ {name:"Florida", label:"Florida",abbreviation:"FL"},
+ {name:"Georgia", label:"Georgia",abbreviation:"GA"},
+ {name:"Guam", label:"Guam",abbreviation:"GU"},
+ {name:"Hawaii", label:"Hawaii",abbreviation:"HI"},
+ {name:"Idaho", label:"Idaho",abbreviation:"ID"},
+ {name:"Illinois", label:"Illinois",abbreviation:"IL"},
+ {name:"Indiana", label:"Indiana",abbreviation:"IN"},
+ {name:"Iowa", label:"Iowa",abbreviation:"IA"},
+ {name:"Kansas", label:"Kansas",abbreviation:"KS"},
+ {name:"Kentucky", label:"Kentucky",abbreviation:"KY"},
+ {name:"Louisiana", label:"Louisiana",abbreviation:"LA"},
+ {name:"Maine", label:"Maine",abbreviation:"ME"},
+ {name:"Marshall Islands", label:"Marshall Islands",abbreviation:"MH"},
+ {name:"Maryland", label:"Maryland",abbreviation:"MD"},
+ {name:"Massachusetts", label:"Massachusetts",abbreviation:"MA"},
+ {name:"Michigan", label:"Michigan",abbreviation:"MI"},
+ {name:"Minnesota", label:"Minnesota",abbreviation:"MN"},
+ {name:"Mississippi", label:"Mississippi",abbreviation:"MS"},
+ {name:"Missouri", label:"Missouri",abbreviation:"MO"},
+ {name:"Montana", label:"Montana",abbreviation:"MT"},
+ {name:"Nebraska", label:"Nebraska",abbreviation:"NE"},
+ {name:"Nevada", label:"Nevada",abbreviation:"NV"},
+ {name:"New Hampshire", label:"New Hampshire",abbreviation:"NH"},
+ {name:"New Jersey", label:"New Jersey",abbreviation:"NJ"},
+ {name:"New Mexico", label:"New Mexico",abbreviation:"NM"},
+ {name:"New York", label:"New York",abbreviation:"NY"},
+ {name:"North Carolina", label:"North Carolina",abbreviation:"NC"},
+ {name:"North Dakota", label:"North Dakota",abbreviation:"ND"},
+ {name:"Northern Mariana Islands", label:"Northern Mariana Islands",abbreviation:"MP"},
+ {name:"Ohio", label:"Ohio",abbreviation:"OH"},
+ {name:"Oklahoma", label:"Oklahoma",abbreviation:"OK"},
+ {name:"Oregon", label:"Oregon",abbreviation:"OR"},
+ {name:"Pennsylvania", label:"Pennsylvania",abbreviation:"PA"},
+ {name:"Puerto Rico", label:"Puerto Rico",abbreviation:"PR"},
+ {name:"Rhode Island", label:"Rhode Island",abbreviation:"RI"},
+ {name:"South Carolina", label:"South Carolina",abbreviation:"SC"},
+ {name:"South Dakota", label:"South Dakota",abbreviation:"SD"},
+ {name:"Tennessee", label:"Tennessee",abbreviation:"TN"},
+ {name:"Texas", label:"Texas",abbreviation:"TX"},
+ {name:"Utah", label:"Utah",abbreviation:"UT"},
+ {name:"Vermont", label:"Vermont",abbreviation:"VT"},
+ {name: "Virgin Islands, U.S.",label:"Virgin Islands, U.S.",abbreviation:"VI"},
+ {name:"Virginia", label:"Virginia",abbreviation:"VA"},
+ {name:"Washington", label:"Washington",abbreviation:"WA"},
+ {name:"West Virginia", label:"West Virginia",abbreviation:"WV"},
+ {name:"Wisconsin", label:"Wisconsin",abbreviation:"WI"},
+ {name:"Wyoming", label:"Wyoming",abbreviation:"WY"}
+]}
\ No newline at end of file diff --git a/includes/js/dijit/tests/_data/treeTest.json b/includes/js/dijit/tests/_data/treeTest.json new file mode 100644 index 0000000..c90a110 --- /dev/null +++ b/includes/js/dijit/tests/_data/treeTest.json @@ -0,0 +1,22 @@ +{ + identifier: 'id', + label: 'name', + items: [ + { id: 'root', name:'root', someProperty:'root property', children: [ + {_reference:'node1'}, + {_reference:'node2'}, + {_reference:'node3'}, + {_reference:'node4'}, + {_reference:'node5'} + ]}, + { id: 'node1', name:'node1', someProperty:'somePropertyA', children: [ + {_reference:'node1.1'}, {_reference:'node1.2'} + ]}, + { id: 'node1.1',name:'node1.1', someProperty:'somePropertyA1'}, + { id: 'node1.2',name:'node1.2', someProperty:'somePropertyA2'}, + { id: 'node2', name:'node2', someProperty:'somePropertyB'}, + { id: 'node3', name:'node3', someProperty:'somePropertyC'}, + { id: 'node4', name:'node4', someProperty:'somePropertyA'}, + { id: 'node5', name:'node5', someProperty:'somePropertyB'} + ] +} diff --git a/includes/js/dijit/tests/_editor/test_6112.html b/includes/js/dijit/tests/_editor/test_6112.html new file mode 100644 index 0000000..785cd55 --- /dev/null +++ b/includes/js/dijit/tests/_editor/test_6112.html @@ -0,0 +1,745 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + + <title>Rich Text System Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript" src="../../_editor/selection.js"></script> + <script type="text/javascript" src="../../_editor/RichText.js"></script> + <script language="JavaScript" type="text/javascript"> + dojo.require("dijit._editor.RichText"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + +</head> +<body> + + <h1 class="testTitle">Rich Text Test</h1> + + <div style="border: 1px dotted black;"> + <h3>test case for bug #6112</h3> + <textarea dojoType="dijit._editor.RichText" id="editor1" + styleSheets="../../../dojo/resources/dojo.css"> +<p> +The Project Gutenberg EBook of Faust, by Goethe +</p> +<p> +This eBook is for the use of anyone anywhere at no cost and with +almost no restrictions whatsoever. You may copy it, give it away or +re-use it under the terms of the Project Gutenberg License included +with this eBook or online at www.gutenberg.net + +</p> +<p> + +Title: Faust + +</p> +<p> +Author: Goethe + +</p> +<p> +Release Date: December 25, 2004 [EBook #14460] + +</p> +<p> +Language: English + +</p> +<p> +Character set encoding: ISO-8859-1 + +</p> +<p> +*** START OF THIS PROJECT GUTENBERG EBOOK FAUST *** +</p> +<p> +Produced by Juliet Sutherland, Charles Bidwell and the PG Online +Distributed Proofreading Team + +</p> +<p> +<h1> FAUST </h1> +<h2>A TRAGEDY</h2> + +<h5> +TRANSLATED FROM THE GERMAN +<br> +OF +<br> +GOETHE + +<br> + +WITH NOTES + +<br> +BY + +<br> +CHARLES T BROOKS + +<br> + +SEVENTH EDITION. + +<br> +BOSTON +<br> +TICKNOR AND FIELDS + +<br> +MDCCCLXVIII. +</h5> + + + +<p> + +Entered according to Act of Congress, in the year 1856, +by CHARLES T. BROOKS, +In the Clerk's Office of the District Court +of the District of Rhode Island. + +</p> +<p> +UNIVERSITY PRESS: +WELCH, BIGELOW, AND COMPANY, +CAMBRIDGE. + +</p> +<p> + + + +TRANSLATOR'S PREFACE. + +</p> +<p> + +Perhaps some apology ought to be given to English scholars, that is, those +who do not know German, (to those, at least, who do not know what sort of +a thing Faust is in the original,) for offering another translation to the +public, of a poem which has been already translated, not only in a literal +prose form, but also, twenty or thirty times, in metre, and sometimes with +great spirit, beauty, and power. +</p> +<p> + +The author of the present version, then, has no knowledge that a rendering +of this wonderful poem into the exact and ever-changing metre of the +original has, until now, been so much as attempted. To name only one +defect, the very best versions which he has seen neglect to follow the +exquisite artist in the evidently planned and orderly intermixing of +_male_ and _female_ rhymes, _i.e._ rhymes which fall on the last syllable +and those which fall on the last but one. Now, every careful student of +the versification of Faust must feel and see that Goethe did not +intersperse the one kind of rhyme with the other, at random, as those +translators do; who, also, give the female rhyme (on which the vivacity of +dialogue and description often so much depends,) in so small a proportion. + +</p> +<p> +A similar criticism might be made of their liberty in neglecting Goethe's +method of alternating different measures with each other. + +</p> +<p> +It seems as if, in respect to metre, at least, they had asked themselves, +how would Goethe have written or shaped this in English, had that been his +native language, instead of seeking _con amore_ (and _con fidelità_) as +they should have done, to reproduce, both in spirit and in form, the +movement, so free and yet orderly, of the singularly endowed and +accomplished poet whom they undertook to represent. + +</p> +<p> +As to the objections which Hayward and some of his reviewers have +instituted in advance against the possibility of a good and faithful +metrical translation of a poem like Faust, they seem to the present +translator full of paradox and sophistry. For instance, take this +assertion of one of the reviewers: "The sacred and mysterious union of +thought with verse, twin-born and immortally wedded from the moment of +their common birth, can never be understood by those who desire verse +translations of good poetry." If the last part of this statement had read +"by those who can be contented with _prose_ translations of good poetry," +the position would have been nearer the truth. This much we might well +admit, that, if the alternative were either to have a poem like Faust in a +metre different and glaringly different from the original, or to have it +in simple and strong prose, then the latter alternative would be the one +every tasteful and feeling scholar would prefer; but surely to every one +who can read the original or wants to know how this great song _sung +itself_ (as Carlyle says) out of Goethe's soul, a mere prose rendering +must be, comparatively, a _corpus mortuum._ + +</p> +<p> +The translator most heartily dissents from Hayward's assertion that a +translator of Faust "must sacrifice either metre or meaning." At least he +flatters himself that he has made, in the main, (not a compromise between +meaning and melody, though in certain instances he may have fallen into +that, but) a combination of the meaning with the melody, which latter is +so important, so vital a part of the lyric poem's meaning, in any worthy +sense. "No poetic translation," says Hayward's reviewer, already quoted, +"can give the rhythm and rhyme of the original; it can only substitute the +rhythm and rhyme of the translator." One might just as well say "no +_prose_ translation can give the _sense and spirit_ of the original; it +can only substitute the _sense and spirit of the words and phrases of the +translator's language_;" and then, these two assertions balancing each +other, there will remain in the metrical translator's favor, that he may +come as near to giving both the letter and the spirit, as the effects of +the Babel dispersion will allow. + +</p> +<p> +As to the original creation, which he has attempted here to reproduce, the +translator might say something, but prefers leaving his readers to the +poet himself, as revealed in the poem, and to the various commentaries of +which we have some accounts, at least, in English. A French translator of +the poem speaks in his introduction as follows: "This Faust, conceived by +him in his youth, completed in ripe age, the idea of which he carried with +him through all the commotions of his life, as Camoens bore his poem with +him through the waves, this Faust contains him entire. The thirst for +knowledge and the martyrdom of doubt, had they not tormented his early +years? Whence came to him the thought of taking refuge in a supernatural +realm, of appealing to invisible powers, which plunged him, for a +considerable time, into the dreams of Illuminati and made him even invent +a religion? This irony of Mephistopheles, who carries on so audacious a +game with the weakness and the desires of man, is it not the mocking, +scornful side of the poet's spirit, a leaning to sullenness, which can be +traced even into the earliest years of his life, a bitter leaven thrown +into a strong soul forever by early satiety? The character of Faust +especially, the man whose burning, untiring heart can neither enjoy +fortune nor do without it, who gives himself unconditionally and watches +himself with mistrust, who unites the enthusiasm of passion and the +dejectedness of despair, is not this an eloquent opening up of the most +secret and tumultuous part of the poet's soul? And now, to complete the +image of his inner life, he has added the transcendingly sweet person of +Margaret, an exalted reminiscence of a young girl, by whom, at the age of +fourteen, he thought himself beloved, whose image ever floated round him, +and has contributed some traits to each of his heroines. This heavenly +surrender of a simple, good, and tender heart contrasts wonderfully with +the sensual and gloomy passion of the lover, who, in the midst of his +love-dreams, is persecuted by the phantoms of his imagination and by the +nightmares of thought, with those sorrows of a soul, which is crushed, but +not extinguished, which is tormented by the invincible want of happiness +and the bitter feeling, how hard a thing it is to receive or to bestow." + +</p> +<p> + + + +DEDICATION.[1] + +</p> +<p> +Once more ye waver dreamily before me, +Forms that so early cheered my troubled eyes! +To hold you fast doth still my heart implore me? +Still bid me clutch the charm that lures and flies? +Ye crowd around! come, then, hold empire o'er me, +As from the mist and haze of thought ye rise; +The magic atmosphere, your train enwreathing, +Through my thrilled bosom youthful bliss is breathing. + +</p> +<p> +Ye bring with you the forms of hours Elysian, +And shades of dear ones rise to meet my gaze; +First Love and Friendship steal upon my vision +Like an old tale of legendary days; +Sorrow renewed, in mournful repetition, +Runs through life's devious, labyrinthine ways; +And, sighing, names the good (by Fortune cheated +Of blissful hours!) who have before me fleeted. + +</p> +<p> +These later songs of mine, alas! will never +Sound in their ears to whom the first were sung! +Scattered like dust, the friendly throng forever! +Mute the first echo that so grateful rung! +To the strange crowd I sing, whose very favor +Like chilling sadness on my heart is flung; +And all that kindled at those earlier numbers +Roams the wide earth or in its bosom slumbers. + +</p> +<p> +And now I feel a long-unwonted yearning +For that calm, pensive spirit-realm, to-day; +Like an Aeolian lyre, (the breeze returning,) +Floats in uncertain tones my lisping lay; +Strange awe comes o'er me, tear on tear falls burning, +The rigid heart to milder mood gives way! +What I possess I see afar off lying, +And what I lost is real and undying. + +</p> +<p> + + + +PRELUDE + +</p> +<p> +IN THE THEATRE. + + +</p> +<p> + _Manager. Dramatic Poet. Merry Person._ + +</p> +<p> +_Manager_. You who in trouble and distress +Have both held fast your old allegiance, +What think ye? here in German regions +Our enterprise may hope success? +To please the crowd my purpose has been steady, +Because they live and let one live at least. +The posts are set, the boards are laid already, +And every one is looking for a feast. +They sit, with lifted brows, composed looks wearing, +Expecting something that shall set them staring. +I know the public palate, that's confest; +Yet never pined so for a sound suggestion; +True, they are not accustomed to the best, +But they have read a dreadful deal, past question. +How shall we work to make all fresh and new, +Acceptable and profitable, too? +For sure I love to see the torrent boiling, +When towards our booth they crowd to find a place, +Now rolling on a space and then recoiling, +Then squeezing through the narrow door of grace: +Long before dark each one his hard-fought station +In sight of the box-office window takes, +And as, round bakers' doors men crowd to escape starvation, +For tickets here they almost break their necks. +This wonder, on so mixed a mass, the Poet +Alone can work; to-day, my friend, O, show it! + +</p> +<p> +_Poet_. Oh speak not to me of that motley ocean, +Whose roar and greed the shuddering spirit chill! +Hide from my sight that billowy commotion +That draws us down the whirlpool 'gainst our will. +No, lead me to that nook of calm devotion, +Where blooms pure joy upon the Muses' hill; +Where love and friendship aye create and cherish, +With hand divine, heart-joys that never perish. +Ah! what, from feeling's deepest fountain springing, +Scarce from the stammering lips had faintly passed, +Now, hopeful, venturing forth, now shyly clinging, +To the wild moment's cry a prey is cast. +Oft when for years the brain had heard it ringing +It comes in full and rounded shape at last. +What shines, is born but for the moment's pleasure; +The genuine leaves posterity a treasure. + +</p> +<p> +_Merry Person_. Posterity! I'm sick of hearing of it; +Supposing I the future age would profit, +Who then would furnish ours with fun? +For it must have it, ripe and mellow; +The presence of a fine young fellow, +Is cheering, too, methinks, to any one. +Whoso can pleasantly communicate, +Will not make war with popular caprices, +For, as the circle waxes great, +The power his word shall wield increases. +Come, then, and let us now a model see, +Let Phantasy with all her various choir, +Sense, reason, passion, sensibility, +But, mark me, folly too! the scene inspire. + +</p> +<p> +_Manager_. But the great point is action! Every one +Comes as spectator, and the show's the fun. +Let but the plot be spun off fast and thickly, +So that the crowd shall gape in broad surprise, +Then have you made a wide impression quickly, +You are the man they'll idolize. +The mass can only be impressed by masses; +Then each at last picks out his proper part. +Give much, and then to each one something passes, +And each one leaves the house with happy heart. +Have you a piece, give it at once in pieces! +Such a ragout your fame increases; +It costs as little pains to play as to invent. +But what is gained, if you a whole present? +Your public picks it presently to pieces. + +</p> +<p> +_Poet_. You do not feel how mean a trade like that must be! +In the true Artist's eyes how false and hollow! +Our genteel botchers, well I see, +Have given the maxims that you follow. + +</p> +<p> +_Manager_. Such charges pass me like the idle wind; +A man who has right work in mind +Must choose the instruments most fitting. +Consider what soft wood you have for splitting, +And keep in view for whom you write! +If this one from _ennui_ seeks flight, +That other comes full from the groaning table, +Or, the worst case of all to cite, +From reading journals is for thought unable. +Vacant and giddy, all agog for wonder, +As to a masquerade they wing their way; +The ladies give themselves and all their precious plunder +And without wages help us play. +On your poetic heights what dream comes o'er you? +What glads a crowded house? Behold +Your patrons in array before you! +One half are raw, the other cold. +One, after this play, hopes to play at cards, +One a wild night to spend beside his doxy chooses, +Poor fools, why court ye the regards, +For such a set, of the chaste muses? +I tell you, give them more and ever more and more, +And then your mark you'll hardly stray from ever; +To mystify be your endeavor, +To satisfy is labor sore.... +What ails you? Are you pleased or pained? What notion---- + +</p> +<p> +_Poet_. Go to, and find thyself another slave! +What! and the lofty birthright Nature gave, +The noblest talent Heaven to man has lent, +Thou bid'st the Poet fling to folly's ocean! +How does he stir each deep emotion? +How does he conquer every element? +But by the tide of song that from his bosom springs, +And draws into his heart all living things? +When Nature's hand, in endless iteration, +The thread across the whizzing spindle flings, +When the complex, monotonous creation +Jangles with all its million strings: +Who, then, the long, dull series animating, +Breaks into rhythmic march the soulless round? +And, to the law of All each member consecrating, +Bids one majestic harmony resound? +Who bids the tempest rage with passion's power? +The earnest soul with evening-redness glow? +Who scatters vernal bud and summer flower +Along the path where loved ones go? +Who weaves each green leaf in the wind that trembles +To form the wreath that merit's brow shall crown? +Who makes Olympus fast? the gods assembles? +The power of manhood in the Poet shown. + +</p> +<p> +_Merry Person_. Come, then, put forth these noble powers, +And, Poet, let thy path of flowers +Follow a love-adventure's winding ways. +One comes and sees by chance, one burns, one stays, +And feels the gradual, sweet entangling! +The pleasure grows, then comes a sudden jangling, +Then rapture, then distress an arrow plants, +And ere one dreams of it, lo! _there_ is a romance. +Give us a drama in this fashion! +Plunge into human life's full sea of passion! +Each lives it, few its meaning ever guessed, +Touch where you will, 'tis full of interest. +Bright shadows fleeting o'er a mirror, +A spark of truth and clouds of error, +By means like these a drink is brewed +To cheer and edify the multitude. +The fairest flower of the youth sit listening +Before your play, and wait the revelation; +Each melancholy heart, with soft eyes glistening, +Draws sad, sweet nourishment from your creation; +This passion now, now that is stirred, by turns, +And each one sees what in his bosom burns. +Open alike, as yet, to weeping and to laughter, +They still admire the flights, they still enjoy the show; +Him who is formed, can nothing suit thereafter; +The yet unformed with thanks will ever glow. + +</p> +<p> +_Poet_. Ay, give me back the joyous hours, +When I myself was ripening, too, +When song, the fount, flung up its showers +Of beauty ever fresh and new. +When a soft haze the world was veiling, +Each bud a miracle bespoke, +And from their stems a thousand flowers I broke, +Their fragrance through the vales exhaling. +I nothing and yet all possessed, +Yearning for truth and in illusion blest. +Give me the freedom of that hour, +The tear of joy, the pleasing pain, +Of hate and love the thrilling power, +Oh, give me back my youth again! + +</p> +<p> +_Merry Person_. Youth, my good friend, thou needest certainly +When ambushed foes are on thee springing, +When loveliest maidens witchingly +Their white arms round thy neck are flinging, +When the far garland meets thy glance, +High on the race-ground's goal suspended, +When after many a mazy dance +In drink and song the night is ended. +But with a free and graceful soul +To strike the old familiar lyre, +And to a self-appointed goal +Sweep lightly o'er the trembling wire, +There lies, old gentlemen, to-day +Your task; fear not, no vulgar error blinds us. +Age does not make us childish, as they say, +But we are still true children when it finds us. + +</p> +<p> +_Manager_. Come, words enough you two have bandied, +Now let us see some deeds at last; +While you toss compliments full-handed, +The time for useful work flies fast. +Why talk of being in the humor? +Who hesitates will never be. +If you are poets (so says rumor) +Now then command your poetry. +You know full well our need and pleasure, +We want strong drink in brimming measure; +Brew at it now without delay! +To-morrow will not do what is not done to-day. +Let not a day be lost in dallying, +But seize the possibility +Right by the forelock, courage rallying, +And forth with fearless spirit sallying,-- +Once in the yoke and you are free. + Upon our German boards, you know it, +What any one would try, he may; +Then stint me not, I beg, to-day, +In scenery or machinery, Poet. +With great and lesser heavenly lights make free, +Spend starlight just as you desire; +No want of water, rocks or fire +Or birds or beasts to you shall be. +So, in this narrow wooden house's bound, +Stride through the whole creation's round, +And with considerate swiftness wander +From heaven, through this world, to the world down yonder. + + +</p> +<p> + + + PROLOGUE + +</p> +<p> + + IN HEAVEN. + +</p> +<p> + +[THE LORD. THE HEAVENLY HOSTS _afterward_ MEPHISTOPHELES. +_The three archangels_, RAPHAEL, GABRIEL, _and_ MICHAEL, _come forward_.] + +</p> +<p> +_Raphael_. The sun, in ancient wise, is sounding, + With brother-spheres, in rival song; +And, his appointed journey rounding, + With thunderous movement rolls along. +His look, new strength to angels lending, + No creature fathom can for aye; +The lofty works, past comprehending, + Stand lordly, as on time's first day. + +</p> +<p> +_Gabriel_. And swift, with wondrous swiftness fleeting, + The pomp of earth turns round and round, +The glow of Eden alternating + With shuddering midnight's gloom profound; +Up o'er the rocks the foaming ocean + Heaves from its old, primeval bed, +And rocks and seas, with endless motion, + On in the spheral sweep are sped. + +</p> +<p> +_Michael_. And tempests roar, glad warfare waging, + From sea to land, from land to sea, +And bind round all, amidst their raging, + A chain of giant energy. +There, lurid desolation, blazing, + Foreruns the volleyed thunder's way: +Yet, Lord, thy messengers[2] are praising + The mild procession of thy day. + +</p> +<p> +_All Three_. The sight new strength to angels lendeth, + For none thy being fathom may, +The works, no angel comprehendeth, + Stand lordly as on time's first day. + +</p> +<p> +_Mephistopheles_. Since, Lord, thou drawest near us once again, +And how we do, dost graciously inquire, +And to be pleased to see me once didst deign, +I too among thy household venture nigher. +Pardon, high words I cannot labor after, +Though the whole court should look on me with scorn; +My pathos certainly would stir thy laughter, +Hadst thou not laughter long since quite forsworn. +Of sun and worlds I've nought to tell worth mention, +How men torment themselves takes my attention. +The little God o' the world jogs on the same old way +And is as singular as on the world's first day. +A pity 'tis thou shouldst have given +The fool, to make him worse, a gleam of light from heaven; +He calls it reason, using it +To be more beast than ever beast was yet. +He seems to me, (your grace the word will pardon,) +Like a long-legg'd grasshopper in the garden, +Forever on the wing, and hops and sings +The same old song, as in the grass he springs; +Would he but stay there! no; he needs must muddle +His prying nose in every puddle. + +</p> +<p> +_The Lord_. Hast nothing for our edification? +Still thy old work of accusation? +Will things on earth be never right for thee? + +</p> +<p> +_Mephistopheles_. No, Lord! I find them still as bad as bad can be. +Poor souls! their miseries seem so much to please 'em, +I scarce can find it in my heart to tease 'em. + +</p> +<p> +_The Lord_. Knowest thou Faust? + +</p> +<p> +_Mephistopheles_. The Doctor? + +</p> +<p> +_The Lord_. Ay, my servant! + +</p> +<p> +_Mephistopheles_. He! +Forsooth! he serves you in a famous fashion; +No earthly meat or drink can feed his passion; +Its grasping greed no space can measure; +Half-conscious and half-crazed, he finds no rest; +The fairest stars of heaven must swell his treasure. +Each highest joy of earth must yield its zest, +Not all the world--the boundless azure-- +Can fill the void within his craving breast. + +</p> +<p> +_The Lord_. He serves me somewhat darkly, now, I grant, +Yet will he soon attain the light of reason. +Sees not the gardener, in the green young plant, +That bloom and fruit shall deck its coming season? + +</p> +<p> +_Mephistopheles_. What will you bet? You'll surely lose your wager! +If you will give me leave henceforth, +To lead him softly on, like an old stager. + +</p> +<p> +_The Lord_. So long as he shall live on earth, +Do with him all that you desire. +Man errs and staggers from his birth. + +</p> +<p> +_Mephistopheles_. Thank you; I never did aspire +To have with dead folk much transaction. +In full fresh cheeks I take the greatest satisfaction. +A corpse will never find me in the house; +I love to play as puss does with the mouse. + +</p> +<p> +_The Lord_. All right, I give thee full permission! +Draw down this spirit from its source, +And, canst thou catch him, to perdition +Carry him with thee in thy course, +But stand abashed, if thou must needs confess, +That a good man, though passion blur his vision, +Has of the right way still a consciousness. + +</p> +<p> +_Mephistopheles_. Good! but I'll make it a short story. +About my wager I'm by no means sorry. +And if I gain my end with glory +Allow me to exult from a full breast. +Dust shall he eat and that with zest, +Like my old aunt, the snake, whose fame is hoary. +</p> +<p> + +_The Lord_. Well, go and come, and make thy trial; +The like of thee I never yet did hate. +Of all the spirits of denial +The scamp is he I best can tolerate. +Man is too prone, at best, to seek the way that's easy, +He soon grows fond of unconditioned rest; +And therefore such a comrade suits him best, +Who spurs and works, true devil, always busy. +But you, true sons of God, in growing measure, +Enjoy rich beauty's living stores of pleasure! +The Word[3] divine that lives and works for aye, +Fold you in boundless love's embrace alluring, +And what in floating vision glides away, +That seize ye and make fast with thoughts enduring. +</p> +<p> +[_Heaven closes, the archangels disperse._] + +</p> +<p> +_Mephistopheles. [Alone.]_ I like at times to exchange with him a word, +And take care not to break with him. 'Tis civil +In the old fellow[4] and so great a Lord +To talk so kindly with the very devil. + +</p> + + </textarea> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/_editor/test_CustomPlugin.html b/includes/js/dijit/tests/_editor/test_CustomPlugin.html new file mode 100644 index 0000000..eb8f650 --- /dev/null +++ b/includes/js/dijit/tests/_editor/test_CustomPlugin.html @@ -0,0 +1,151 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Editor Custom Plugin Test/Tutorial</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.Editor"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + + dojo.require("dijit._Widget"); + dojo.require("dijit._Templated"); + dojo.require("dijit._editor._Plugin"); + dojo.require("dijit.Dialog"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.ValidationTextBox"); + dojo.require("dojo.i18n"); + dojo.require("dojo.string"); + dojo.requireLocalization("dijit._editor", "LinkDialog"); + + dojo.declare("myPlugin", + dijit._editor._Plugin, + { + buttonClass: dijit.form.DropDownButton, + useDefaultCommand: false, + urlRegExp: "((https?|ftps?)\\://|)(([0-9a-zA-Z]([-0-9a-zA-Z]{0,61}[0-9a-zA-Z])?\\.)+(arpa|aero|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|xxx|jobs|mobi|post|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|eu|es|et|fi|fj|fk|fm|fo|fr|ga|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sk|sl|sm|sn|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)|(((\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])|(0[xX]0*[\\da-fA-F]?[\\da-fA-F]\\.){3}0[xX]0*[\\da-fA-F]?[\\da-fA-F]|(0+[0-3][0-7][0-7]\\.){3}0+[0-3][0-7][0-7]|(0|[1-9]\\d{0,8}|[1-3]\\d{9}|4[01]\\d{8}|42[0-8]\\d{7}|429[0-3]\\d{6}|4294[0-8]\\d{5}|42949[0-5]\\d{4}|429496[0-6]\\d{3}|4294967[01]\\d{2}|42949672[0-8]\\d|429496729[0-5])|0[xX]0*[\\da-fA-F]{1,8}|([\\da-fA-F]{1,4}\\:){7}[\\da-fA-F]{1,4}|([\\da-fA-F]{1,4}\\:){6}((\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])))(\\:(0|[1-9]\\d*))?(/([^?#\\s/]+/)*)?([^?#\\s/]+(\\?[^?#\\s/]*)?(#[A-Za-z][\\w.:-]*)?)?", + linkDialogTemplate: [ + "<table><tr><td>", + "<label for='${id}_urlInput'>${url}</label>", + "</td><td>", + "<input dojoType='dijit.form.ValidationTextBox' regExp='${urlRegExp}' required='true' id='${id}_urlInput' name='urlInput'>", + "</td></tr><tr><td>", + "<label for='${id}_textInput'>${text}</label>", + "</td><td>", + "<input dojoType='dijit.form.ValidationTextBox' required='true' id='${id}_textInput' name='textInput'>", + "</td></tr><tr><td colspan='2'>", + "<button dojoType='dijit.form.Button' type='submit'>${set}</button>", + "</td></tr></table>" + ].join(""), + + constructor: function(){ + var _this = this; + this.tag = this.command == 'insertImage' ? 'img' : 'a'; + var messages = dojo.i18n.getLocalization("dijit._editor", "LinkDialog", this.lang); + var dropDown = (this.dropDown = new dijit.TooltipDialog({ + title: messages[this.command + "Title"], + execute: dojo.hitch(this, "setValue"), + onOpen: function(){ + _this._onOpenDialog(); + dijit.TooltipDialog.prototype.onOpen.apply(this, arguments); + }, + onCancel: function(){ + setTimeout(dojo.hitch(_this, "_onCloseDialog"),0); + }, + onClose: dojo.hitch(this, "_onCloseDialog") + })); + + this.button = new this.buttonClass({ + label: "my plugin button", + showLabel: true, + iconClass: "", + dropDown: this.dropDown, + tabIndex: "-1" + }); + + messages.urlRegExp = this.urlRegExp; + messages.id = dijit.getUniqueId(this.declaredClass.replace(/\./g,"_")); + dropDown.setContent(dropDown.title + "<hr>" + dojo.string.substitute(this.linkDialogTemplate, messages)); + dropDown.startup(); + }, + + setValue: function(args){ + // summary: callback from the dialog when user hits "set" button + //TODO: prevent closing popup if the text is empty + this._onCloseDialog(); + if(dojo.isIE){ //see #4151 + var a = dojo.withGlobal(this.editor.window, "getAncestorElement", dijit._editor.selection, [this.tag]); + if(a){ + dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [a]); + } + } + args.tag = this.tag; + args.refAttr = this.tag == 'img' ? 'src' : 'href'; + //TODO: textInput should be formatted by escapeXml + var template = "<${tag} ${refAttr}='${urlInput}' _djrealurl='${urlInput}'" + + (args.tag == 'img' ? " alt='${textInput}'>" : ">${textInput}") + + "</${tag}>"; + this.editor.execCommand('inserthtml', dojo.string.substitute(template, args)); + }, + + _onCloseDialog: function(){ + // FIXME: IE is really messed up here!! + if(dojo.isIE){ + if("_savedSelection" in this){ + var b = this._savedSelection; + delete this._savedSelection; + this.editor.focus(); + var range = this.editor.document.selection.createRange(); + range.moveToBookmark(b); + range.select(); + } + }else{ + this.editor.focus(); + } + }, + + _onOpenDialog: function(){ + var a = dojo.withGlobal(this.editor.window, "getAncestorElement", dijit._editor.selection, [this.tag]); + var url, text; + if(a){ + url = a.getAttribute('_djrealurl'); + text = this.tag == 'img' ? a.getAttribute('alt') : a.textContent || a.innerText; + dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [a, true]); + }else{ + text = dojo.withGlobal(this.editor.window, dijit._editor.selection.getSelectedText); + } + // FIXME: IE is *really* b0rken + if(dojo.isIE){ + this._savedSelection = this.editor.document.selection.createRange().getBookmark(); + } + this.dropDown.reset(); + this.dropDown.setValues({urlInput: url || '', textInput: text || ''}); + //dijit.focus(this.urlInput); + } + } + ); + + /* the following code registers my plugin */ + dojo.subscribe(dijit._scopeName + ".Editor.getPlugin",null,function(o){ + if(o.plugin){ return; } + if(o.args.name == "myPlugin"){ + return new myPlugin({}); + } + }); + </script> +</head> +<body> + <div dojoType="dijit.Editor" id="editor1" extraPlugins="['myPlugin']"><p> + This editor should have my custom create link plugin + </p></div> +</body> +</html>
\ No newline at end of file diff --git a/includes/js/dijit/tests/_editor/test_RichText.html b/includes/js/dijit/tests/_editor/test_RichText.html new file mode 100644 index 0000000..0428edf --- /dev/null +++ b/includes/js/dijit/tests/_editor/test_RichText.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + + <title>Rich Text System Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript" src="../../_editor/selection.js"></script> + <script type="text/javascript" src="../../_editor/RichText.js"></script> + <script language="JavaScript" type="text/javascript"> + dojo.require("dijit._editor.RichText"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + +</head> +<body> + + <h1 class="testTitle">Rich Text Test</h1> + + <div style="border: 1px dotted black;"> + <h3>thud</h3> + <textarea dojoType="dijit._editor.RichText" id="editor1" + styleSheets="../../../dojo/resources/dojo.css"> + <h1>header one</h1> + <ul> + <li>Right click on the client area of the page (ctrl-click for Macintosh). Menu should open.</li> + <li>Right click on each of the form controls above. Menu should open.</li> + <li>Right click near the righthand window border. Menu should open to the left of the pointer.</li> + <li>Right click near the bottom window border. Menu should open above the pointer.</li> + </ul> + </textarea> + <button onclick="dijit.byId('editor1').addStyleSheet('test_richtext.css')">add stylesheet</button> + <button onclick="dijit.byId('editor1').removeStyleSheet('test_richtext.css')">remove stylesheet</button> + </div> + + <div style="border: 1px dotted black;"> + <h3>blah</h3> + <div dojoType="dijit._editor.RichText" + styleSheets="../../dojo/resources/dojo.css"> + <ul> + <li>Right click on the client area of the page (ctrl-click for Macintosh). Menu should open.</li> + <li>Right click on each of the form controls above. Menu should open.</li> + <li>Right click near the righthand window border. Menu should open to the left of the pointer.</li> + <li>Right click near the bottom window border. Menu should open above the pointer.</li> + </ul> + </div> + <h3>..after</h3> + </div> + +</body> +</html> diff --git a/includes/js/dijit/tests/_editor/test_ToggleDir.html b/includes/js/dijit/tests/_editor/test_ToggleDir.html new file mode 100644 index 0000000..ec66c75 --- /dev/null +++ b/includes/js/dijit/tests/_editor/test_ToggleDir.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Editor Test2</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.Editor"); + dojo.require("dijit._editor.plugins.ToggleDir"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> +<!-- + <script type="text/javascript" src="../../_editor/plugins/ToggleDir.js"></script> + <script type="text/javascript" src="../../Editor.js"></script> + <script type="text/javascript" src="../../_editor/_Plugin.js"></script> +--> +</head> +<body> + <div style="border: 1px dotted black;"> + <textarea dojoType="dijit.Editor" + extraPlugins="['toggleDir','|','dijit._editor.plugins.ToggleDir','|',{name:'dijit._editor.plugins.ToggleDir'}]"> + <ol> + <li>the toggleDir plugin provides an extra button on the toolbar to switch text direction (BiDi) of the + edited document. Useful when right-to-left languages like Hebrew and Arabic are combined with + left-to-right languages like English.</li> + </ol> + </textarea> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/_editor/test_richtext.css b/includes/js/dijit/tests/_editor/test_richtext.css new file mode 100644 index 0000000..933acb8 --- /dev/null +++ b/includes/js/dijit/tests/_editor/test_richtext.css @@ -0,0 +1,4 @@ +h1 { + border: 1px solid black; + background-color:red; +} diff --git a/includes/js/dijit/tests/_editor/test_richtext.css.commented.css b/includes/js/dijit/tests/_editor/test_richtext.css.commented.css new file mode 100644 index 0000000..933acb8 --- /dev/null +++ b/includes/js/dijit/tests/_editor/test_richtext.css.commented.css @@ -0,0 +1,4 @@ +h1 { + border: 1px solid black; + background-color:red; +} diff --git a/includes/js/dijit/tests/_programaticTest.html b/includes/js/dijit/tests/_programaticTest.html new file mode 100644 index 0000000..41b1815 --- /dev/null +++ b/includes/js/dijit/tests/_programaticTest.html @@ -0,0 +1,109 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dijit raw programatic test suite | The Dojo Toolkit</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + body, html { width:100%; height:100%; margin:0; padding:0; background:#fff !important; } + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script language="JavaScript" type="text/javascript"> + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.dijit-all"); + + var randomParams = function(){ + // need better params to test passing + return { "length" : 20 }; + }; + + var inspectClass = function(fullClassName){ + var newDijit, newDijitDom, newDijitParam = null; + var createdWidgets = []; + className = eval(fullClassName); // + + // just try to make the class: + try{ + newDijit = new className({}); + createdWidgets.push(newDijit); + }catch(e){ + console.warn('new only: ',fullClassName,e); + } + + // try starting this widget + try{ + if (newDijit && newDijit.startup){ newDijit.startup(); } + }catch(e){ + console.warn('call startup: ',fullClassName,e); + } + + // try with a div in the dom + try{ + var tmpDiv = dojo.body().appendChild(document.createElement('div')); + newDijitDom = new className({},tmpDiv); + createdWidgets.push(newDijitDom); + }catch(e){ + console.warn('attached to div: ',fullClassName,e); + } + + // lets pass random parameters + try{ + var tmpDiv = dojo.body().appendChild(document.createElement('div')); + newDijitParam = new className(randomParams(),tmpDiv); + createdWidgets.push(newDijitParam); + }catch(e){ + console.warn('random param test: ',fullClassName,e); + } + // add more tests ... + + // cleanup after ourselves + dojo.forEach(createdWidgets,function(byeWidget){ + try{ + if(byeWidget.destroy){ byeWidget.destroy(); } + }catch(e){ + console.warn('destroying: ',byeWidget.declaredClass,e,byeWidget); + } + }); + + }; + + var storeError = function(e,request){ + console.warn(e,request); + }; + + var storeReady = function(items,request){ + dojo.forEach(items,function(item){ + var testClass = theStore.getValue(item,"className"); + try{ + inspectClass(testClass); + }catch(e){ + console.warn(e); + } + }); + }; + + var init = function(){ + var request = { + query: { }, + onComplete: storeReady, + onError: storeError + }; + theStore.fetch(request); + }; + dojo.addOnLoad(init); + + </script> + +</head> +<body> + <div dojoType="dojo.data.ItemFileReadStore" jsId="theStore" + url="../tests/_data/dijits.json"></div> + +</body> +</html> diff --git a/includes/js/dijit/tests/_testCommon.js b/includes/js/dijit/tests/_testCommon.js new file mode 100644 index 0000000..519675f --- /dev/null +++ b/includes/js/dijit/tests/_testCommon.js @@ -0,0 +1,103 @@ +/* + _testCommon.js - a simple module to be included in dijit test pages to allow + for easy switching between the many many points of the test-matrix. + + in your test browser, provides a way to switch between available themes, + and optionally enable RTL (right to left) mode, and/or dijit_a11y (high- + constrast/image off emulation) ... probably not a genuine test for a11y. + + usage: on any dijit test_* page, press ctrl-f9 to popup links. + + there are currently (2 themes * 4 tests) * (10 variations of supported browsers) + not including testing individual locale-strings + + you should not be using this in a production enviroment. include + your css and set your classes manually. for test purposes only ... +*/ + +(function(){ + var d = dojo; + var theme = false; var testMode; + if(window.location.href.indexOf("?") > -1){ + var str = window.location.href.substr(window.location.href.indexOf("?")+1).split(/#/); + var ary = str[0].split(/&/); + for(var i=0; i<ary.length; i++){ + var split = ary[i].split(/=/), + key = split[0], + value = split[1]; + switch(key){ + case "locale": + // locale string | null + dojo.config.locale = locale = value; + break; + case "dir": + // rtl | null + document.getElementsByTagName("html")[0].dir = value; + break; + case "theme": + // tundra | soria | noir | squid | nihilo | null + theme = value; + break; + case "a11y": + if(value){ testMode = "dijit_a11y"; } + } + } + } + + // always include the default theme files: + if(!theme){ theme = dojo.config.defaultTestTheme || 'tundra'; } + var themeCss = d.moduleUrl("dijit.themes",theme+"/"+theme+".css"); + var themeCssRtl = d.moduleUrl("dijit.themes",theme+"/"+theme+"_rtl.css"); + document.write('<link rel="stylesheet" type="text/css" href="'+themeCss+'"/>'); + document.write('<link rel="stylesheet" type="text/css" href="'+themeCssRtl+'"/>'); + + if(dojo.config.parseOnLoad){ + dojo.config.parseOnLoad = false; + dojo.config._deferParsing = true; + } + + d.addOnLoad(function(){ + + // set the classes + if(!d.hasClass(d.body(),theme)){ d.addClass(d.body(),theme); } + if(testMode){ d.addClass(d.body(),testMode); } + + // test-link matrix code: + var node = document.createElement('div'); + node.id = "testNodeDialog"; + d.addClass(node,"dijitTestNodeDialog"); + d.body().appendChild(node); + + _populateTestDialog(node); + + d.connect(document,"onkeypress", function _testNodeShow(/* Event */evt){ + var key = (evt.charCode == d.keys.SPACE ? d.keys.SPACE : evt.keyCode); + if(evt.ctrlKey && (key == d.keys.F9)){ // F9 is generic enough? + d.style('testNodeDialog',"top",(dijit.getViewport().t + 4) +"px"); + d.toggleClass('testNodeDialog',"dijitTestNodeShowing"); + } + }); + + if(dojo.config._deferParsing){ d.parser.parse(d.body()); } + + }); + + var _populateTestDialog = function(/* DomNode */node){ + // pseudo-function to populate our test-martix-link pop-up + var base = window.location.pathname; + var str = ""; + var themes = ["tundra",/*"noir", */ "soria", "nihilo" /* ,"squid" */ ]; + str += "<b>Tests:</b><br><table>"; + d.forEach(themes,function(t){ + str += '<tr><td><a hr'+'ef="'+base+'?theme='+t+'">'+t+'</'+'a></td>'+ + '<td><a hr'+'ef="'+base+'?theme='+t+'&dir=rtl">rtl</'+'a></td>'+ + '<td><a hr'+'ef="'+base+'?theme='+t+'&a11y=true">a11y</'+'a></td>'+ + '<td><a hr'+'ef="'+base+'?theme='+t+'&a11y=true&dir=rtl">a11y+rtl</'+'a></td>'+ + // too many potential locales to list, use &locale=[lang] to set + '</tr>'; + }); + str += '<tr><td colspan="4">jump to: <a hr'+'ef="'+(d.moduleUrl("dijit.themes","themeTester.html"))+'">themeTester</'+'a></td></tr>'; + str += '<tr><td colspan="4">or: <a hr'+'ef="'+(d.moduleUrl("dijit.tests"))+'">tests folder</'+'a></td></tr>'; + node.innerHTML = str + "</table>"; + } +})(); diff --git a/includes/js/dijit/tests/css/dijitTests.css b/includes/js/dijit/tests/css/dijitTests.css new file mode 100644 index 0000000..cc2f7e4 --- /dev/null +++ b/includes/js/dijit/tests/css/dijitTests.css @@ -0,0 +1,69 @@ + +body { + background:#fff url("../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(../images/plus.gif); + background-repeat: no-repeat; + width: 16px; + height: 16px; +} +.plusBlockIcon { + display: block !important; +} +.noteIcon { + background-image: url(../images/note.gif); + background-repeat: no-repeat; + width: 20px; + height: 20px; +} +.flatScreenIcon { + background-image: url(../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('../../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('../../demos/mail/icons.gif'); +} +.customFolderClosedIcon { + background-position: -154px; +} +body .medium { + font-size: larger; +} diff --git a/includes/js/dijit/tests/css/dijitTests.css.commented.css b/includes/js/dijit/tests/css/dijitTests.css.commented.css new file mode 100644 index 0000000..dc91d16 --- /dev/null +++ b/includes/js/dijit/tests/css/dijitTests.css.commented.css @@ -0,0 +1,78 @@ +/* Test file styles for Dijit widgets */ + +body { + background:#fff url("../images/testsBodyBg.gif") repeat-x top left; + padding:2em 2em 2em 2em; +} + +h1.testTitle { + font-size:2em; + margin:0 0 1em 0; +} + +/* Icons used in the tests */ + +.plusIcon, .plusBlockIcon { + background-image: url(../images/plus.gif); + background-repeat: no-repeat; + width: 16px; + height: 16px; +} +.plusBlockIcon { + display: block !important; +} +.noteIcon { + background-image: url(../images/note.gif); + background-repeat: no-repeat; + width: 20px; + height: 20px; +} +.flatScreenIcon { + background-image: url(../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('../../demos/mail/icons.png'); /* mail icons sprite image */ + 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('../../demos/mail/icons.gif'); +} + +.customFolderClosedIcon { + background-position: -154px; +} + +body .medium { + font-size: larger; /* help test widget sizing */ +} diff --git a/includes/js/dijit/tests/form/Form.html b/includes/js/dijit/tests/form/Form.html new file mode 100644 index 0000000..312399a --- /dev/null +++ b/includes/js/dijit/tests/form/Form.html @@ -0,0 +1,354 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+
+ <title>Form unit test</title>
+ <style type="text/css">
+ @import "../../../dojo/resources/dojo.css";
+ @import "../css/dijitTests.css";
+ </style>
+ <script type="text/javascript" src="../../../dojo/dojo.js"
+ djConfig="isDebug: true, parseOnLoad: true"></script>
+ <script type="text/javascript" src="../_testCommon.js"></script>
+
+ <script type="text/javascript">
+ dojo.require("doh.runner");
+ dojo.require("dojo.date");
+ dojo.require("dijit.form.Form");
+ dojo.require("dijit.layout.LayoutContainer");
+ dojo.require("dijit.layout.ContentPane");
+ dojo.require("dijit.form.ComboBox");
+ dojo.require("dijit.form.CheckBox");
+ dojo.require("dijit.form.DateTextBox");
+ dojo.require("dijit.form.Button");
+ dojo.require("dijit.form.MultiSelect");
+ dojo.require("dijit.form.Textarea");
+ dojo.require("dijit.form.SimpleTextarea");
+ dojo.require("dijit.Editor");
+
+ var obj;
+ function getValues(){
+ obj = dijit.byId('myForm').getValues();
+ console.log("Object is: " + dojo.toJson(obj, true));
+ }
+
+ function setValues(){
+ if(!obj){
+ obj = {testF: 'testi'};
+ }
+ console.log("Object is: " + dojo.toJson(obj, true));
+ dijit.byId('myForm').setValues(obj);
+ }
+
+ // make dojo.toJson() print dates correctly (this feels a bit dirty)
+ Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};
+
+ var d = dojo.date.stamp.fromISOString;
+
+ // These are the values assigned to the widgets in the page's HTML
+ var original = {
+ foo: {bar: {baz: {quux: d("2007-12-30")} } },
+ available: {from: d("2005-01-02"), to: d("2006-01-02")},
+ plop: {combo: "one"},
+ cb2: ["2", "3"],
+ r2: "2",
+ ms1: ["VA", "WA"],
+ h1: "hidden",
+ t1: "line 1\nline 2",
+ st1: "simple line 1\nsimple line 2",
+ richtext: "<h1>original</h1><p>This is the default content</p>",
+ filename: ""
+ };
+
+ // we change the form to these values
+ var changed = {
+ foo: {bar: {baz: {quux: d("2005-01-01")} } },
+ available: {from: d("2005-11-02"), to: d("2006-11-02")},
+ plop: {combo: "three"},
+ cb2: ["4"],
+ r2: "1",
+ ms1: ["FL", "CA"],
+ h1: "still hidden",
+ t1: "new line 1\nnew line 2",
+ st1: "new simple line 1\nnew simple line 2",
+ richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>",
+ filename: ""
+ };
+ // we reset the form to these values
+ var reset = {
+ foo: {bar: {baz: {quux: d("2007-12-30")} } },
+ available: {from: d("2005-01-02"), to: d("2006-01-02")},
+ plop: {combo: "one"},
+ cb2: ["2", "3"],
+ r2: "2",
+ ms1: ["VA", "WA"],
+ h1: "hidden",
+ t1: "line 1\nline 2",
+ st1: "simple line 1\nsimple line 2",
+ richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>", // not a form element, so not reset
+ filename: ""
+ };
+
+ dojo.addOnLoad(function(){
+ doh.register("dijit.form.Form",
+ [
+ function getValues(){
+ var values = dijit.byId("myForm").getValues();
+
+ // FF3 sticks in some tabs and newlines that mess up the equality check
+ // Need better way to compare two HTML trees but for now do this.
+ values.richtext = values.richtext.replace(/[\n\t]/, "", "g");
+
+ doh.is( dojo.toJson(original), dojo.toJson(values) );
+ },
+ function setValues(){
+ dijit.byId("myForm").setValues(changed);
+ doh.is( dojo.toJson(changed), dojo.toJson(dijit.byId("myForm").getValues()) );
+ },
+ function nameAttributeSurvived(){ // ticket:4753
+ var radios = dojo.query(".RadioButton", dijit.byId("radio-cells")).forEach(
+ function(r) {
+ doh.is( r.inputNode.name, "r2" );
+ });
+
+ },
+ function resetTest(){
+ dijit.byId("myForm").reset();
+ doh.is( dojo.toJson(reset), dojo.toJson(dijit.byId("myForm").getValues()) );
+ }
+ ]
+ );
+ doh.run();
+ });
+
+ </script>
+</head>
+<body>
+ <h1>Form Widget Unit Test</h1>
+ <p>
+ The form widget takes data in a form and serializes/deserializes it, so
+ it can be submitted as a JSON string of nested objects.
+ </p>
+ <div style="color:red">Currently only widgets are supported, not raw elements.</div>
+ <!-- to test form submission, you'll need to create an action handler similar to
+ http://www.utexas.edu/teamweb/cgi-bin/generic.cgi
+ http://www.tipjar.com/cgi-bin/test -->
+ <form dojoType="dijit.form.Form" id="myForm"
+ encType="multipart/form-data" action="" method="">
+ <script type="dojo/method" event="onReset">
+ return confirm('Press OK to reset widget values');
+ </script>
+ <script type="dojo/method" event="onSubmit">
+ console.debug('Attempting to submit form w/values:\n',
+ dojo.toJson(this.getValues(),true)
+ );
+ if(this.validate()){
+ return confirm('Form is valid, press OK to submit');
+ }else{
+ alert('Form contains invalid data. Please correct first');
+ return false;
+ }
+ return true;
+ </script>
+ <script type="dojo/method" event="onReset">
+ return confirm('reset Form?');
+ </script>
+ <p>Just HTML text</p>
+ <table style="border: 1px solid #9f9f9f;" cellspacing="10">
+ <thead>
+ <tr>
+ <th>Description</th>
+ <th>Name</th>
+ <th>Form node/widget</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!--
+ <tr><td>text</td><td>testF</td><td><input type="text" name="testF" value="bar1" /></td></tr>
+ <tr><td>password</td><td>passwordF</td><td><input type="password" name="passwordF" value="bar4" /></td></tr>
+ <tr><td>hidden</td><td>hiddenF</td><td><input type="hidden" name="hiddenF" value="bar4" /></td></tr>
+ <tr><td>select</td><td>plop.noncombo</td><td>
+ <div class="group">
+ <select name="plop.noncombo">
+ <option value="1">one</option>
+ <option value="2">two</option>
+ <option value="3">three</option>
+ </select>
+ </div>
+
+ </td></tr>
+ -->
+
+ <tr>
+ <td>DateTextBox inside contentpane</td>
+ <td>foo.bar.baz.quux</td>
+ <td>
+ <div dojoType="dijit.layout.ContentPane">
+ <input type="text" name="foo.bar.baz.quux" dojoType="dijit.form.DateTextBox" value="2007-12-30" />
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Layoutcontainer</td>
+ <td>
+ <div dojoType="dijit.layout.LayoutContainer"></div>
+ </td>
+ </tr>
+ <tr>
+ <td>DateTextBox 1</td>
+ <td>available.from</td>
+ <td>
+ <input type="text" name="available.from" dojoType="dijit.form.DateTextBox" value="2005-01-02" />
+ </td>
+ </tr>
+ <tr>
+ <td>DateTextBox 2</td>
+ <td>available.to</td>
+ <td>
+ <input type="text" name="available.to" dojoType="dijit.form.DateTextBox" value="2006-01-02" />
+ </td>
+ </tr>
+ <tr>
+ <td>ComboBox</td>
+ <td>plop.combo</td>
+ <td>
+ <select name="plop.combo" dojoType="dijit.form.ComboBox">
+ <option value="one">one</option>
+ <option value="two">two</option>
+ <option value="three">three</option>
+ </select>
+ </td>
+ </tr>
+
+ <!--
+ <tr>
+ <td>textarea</td>
+ <td>myTextArea</td>
+ <td>
+ <textarea name="myTextArea">
+ text text text """ \\\/
+ </textarea>
+ </td>
+ </tr>
+ -->
+
+ <!--
+ <tr>
+ <td>CheckBox</td>
+ <td>cb1</td>
+ <td>
+ <input type="checkbox" name="cb1" value="1" /> 1
+ <input type="checkbox" name="cb1" value="2" checked="checked" /> 2
+ <input type="checkbox" name="cb1" value="3" checked="checked" /> 3
+ <input type="checkbox" name="cb1" value="4" /> 4
+ </td>
+ </tr>
+ -->
+
+ <tr>
+ <td>CheckBox widget</td>
+ <td>cb2</td>
+ <td>
+ <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="1" /> 1
+ <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="2" checked="checked" /> 2
+ <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="3" checked="checked" /> 3
+ <input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="4" /> 4
+ </td>
+ </tr>
+
+ <!--
+ <tr>
+ <td>radio</td>
+ <td>r1</td>
+ <td>
+ <input type="radio" name="r1" value="1" /> 1
+ <input type="radio" name="r1" value="2" /> 2
+ <input type="radio" name="r1" value="3" /> 3
+ <input type="radio" name="r1" value="4" /> 4
+ </td>
+ </tr>
+ -->
+
+ <tr>
+ <td>Radio widget</td><td>r2</td>
+ <td id="radio-cells">
+ <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="1" /> 1
+ <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="2" checked="checked" /> 2
+ <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="3"/> 3
+ <input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="4" /> 4
+ </td>
+ </tr>
+
+ <tr>
+ <td>Multi-select</td><td>ms1</td>
+ <td>
+ <select id="ms1" multiple="true" name="ms1"
+ dojoType="dijit.form.MultiSelect"
+ style="height:100px; width:175px; border:5px solid #ededed;">
+
+ <option value="TN">Tennessee</option>
+ <option value="VA" selected="true">Virginia</option>
+ <option value="WA" selected="true">Washington</option>
+ <option value="FL">Florida</option>
+ <option value="CA">California</option>
+
+ </select>
+ </td>
+ </tr>
+
+ <tr>
+ <td>Hidden input</td>
+ <td>h1</td>
+ <td>
+ <input id="h1" name="h1" dojoType="dijit.form.TextBox" type="hidden" value="hidden">
+ </td>
+ </tr>
+
+ <tr>
+ <td>Auto-sizing textarea</td>
+ <td>t1</td>
+ <td>
+ <textarea id="t1" name="t1"
+ dojoType="dijit.form.Textarea">line 1
+line 2</textarea>
+ </td>
+ </tr>
+
+ <tr>
+ <td>Fixed size textarea</td>
+ <td>st1</td>
+ <td>
+ <textarea id="st1" name="st1" dojoType="dijit.form.SimpleTextarea" rows=5 cols=50>
+simple line 1
+simple line 2</textarea>
+ </td>
+ </tr>
+
+ <tr>
+ <td>Editor widget</td>
+ <td>richtext</td>
+ <td>
+ <textarea dojoType="dijit.Editor" name="richtext" pluginsConfig="[{items:['bold','italic']}]"><h1>original</h1><p>This is the default content</p></textarea>
+ </td>
+ </tr>
+
+ <tr>
+ <td>File upload</td>
+ <td>filename</td>
+ <td>
+ <input dojoType="dijit.form.TextBox" name="filename" type="file">
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <button dojoType=dijit.form.Button onClick="getValues();">Get Values from form!</button>
+ <button dojoType=dijit.form.Button onClick="setValues();">Set Values to form!</button>
+ <button dojoType=dijit.form.Button type="submit">Submit</button>
+ <button dojoType=dijit.form.Button type="reset">Reset</button>
+ </form>
+
+
+</body>
+</html>
diff --git a/includes/js/dijit/tests/form/Form.js b/includes/js/dijit/tests/form/Form.js new file mode 100644 index 0000000..f0f6d8d --- /dev/null +++ b/includes/js/dijit/tests/form/Form.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests.form.Form"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.form.Form"] = true; +dojo.provide("dijit.tests.form.Form"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests.form.Form", dojo.moduleUrl("dijit", "tests/form/Form.html")); +} + +} diff --git a/includes/js/dijit/tests/form/images/Alabama.jpg b/includes/js/dijit/tests/form/images/Alabama.jpg Binary files differnew file mode 100644 index 0000000..f2018e6 --- /dev/null +++ b/includes/js/dijit/tests/form/images/Alabama.jpg diff --git a/includes/js/dijit/tests/form/test_Button.html b/includes/js/dijit/tests/form/test_Button.html new file mode 100644 index 0000000..7c04f50 --- /dev/null +++ b/includes/js/dijit/tests/form/test_Button.html @@ -0,0 +1,286 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <title>Dojo Button Widget Test</title>
+
+ <style type="text/css">
+ @import "../../../dojo/resources/dojo.css";
+ @import "../css/dijitTests.css";
+
+ /* group multiple buttons in a row */
+ .box {
+ display: block;
+ text-align: center;
+ }
+ .box .dijit {
+ margin-right: 10px;
+ }
+ </style>
+
+ <script type="text/javascript" src="../../../dojo/dojo.js"
+ djConfig="isDebug: true, parseOnLoad: true"></script>
+ <script type="text/javascript" src="../_testCommon.js"></script>
+
+ <script type="text/javascript">
+ dojo.require("dijit.ColorPalette");
+ dojo.require("dijit.Menu");
+ dojo.require("dijit.Tooltip");
+ dojo.require("dijit.form.Button");
+ dojo.require("dojo.parser");
+ </script>
+ </head>
+<body>
+ <h1 class="testTitle">Dijit Button Test</h1>
+ <h2>Simple, drop down & combo buttons</h2>
+ <p>
+ Buttons can do an action, display a menu, or both:
+ </p>
+ <div class="box">
+ <button id="1465" dojoType="dijit.form.Button" onClick='console.log("clicked simple")' iconClass="plusIcon">
+ Create
+ </button>
+ <span dojoType="dijit.Tooltip" connectId="1465">tooltip on button</span>
+ <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
+ <span>Edit<b>!</b></span>
+ <div dojoType="dijit.Menu">
+ <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
+ onClick="console.log('not actually cutting anything, just a test!')">Cut</div>
+ <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
+ onClick="console.log('not actually copying anything, just a test!')">Copy</div>
+ <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
+ onClick="console.log('not actually pasting anything, just a test!')">Paste</div>
+ <div dojoType="dijit.MenuSeparator"></div>
+ <div dojoType="dijit.PopupMenuItem">
+ <span>Submenu</span>
+ <div dojoType="dijit.Menu" id="submenu2">
+ <div dojoType="dijit.MenuItem" onClick="console.log('Submenu 1!')">Submenu Item One</div>
+ <div dojoType="dijit.MenuItem" onClick="console.log('Submenu 2!')">Submenu Item Two</div>
+ <div dojoType="dijit.PopupMenuItem">
+ <span>Deeper Submenu</span>
+ <div dojoType="dijit.Menu" id="submenu4">
+ <div dojoType="dijit.MenuItem" onClick="console.log('Sub-submenu 1!')">Sub-sub-menu Item One</div>
+ <div dojoType="dijit.MenuItem" onClick="console.log('Sub-submenu 2!')">Sub-sub-menu Item Two</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
+ <span>Color</span>
+ <div dojoType="dijit.ColorPalette" id="colorPalette" style="display: none" palette="3x4"
+ onChange="console.log(this.value);"></div>
+ </div>
+ <div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'
+ iconClass="plusBlockIcon">
+ <span>Save</span>
+ <div dojoType="dijit.Menu" id="saveMenu" style="display: none;">
+ <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"
+ onClick="console.log('not actually saving anything, just a test!')">Save</div>
+ <div dojoType="dijit.MenuItem"
+ onClick="console.log('not actually saving anything, just a test!')">Save As</div>
+ </div>
+ </div>
+ <button dojoType="dijit.form.Button" onClick='console.log("clicked simple")' disabled='true' iconClass="plusIcon">
+ Disabled
+ </button>
+ </div>
+ <br clear=both>
+ <h2>Buttons with no text label</h2>
+ <p>Buttons have showLabel=false so text is not displayed. Should have title attribute displayed on mouse over</p>
+ <div class="box">
+ <button id="1466" dojoType="dijit.form.Button" onClick='console.log("clicked simple button with no text label")'
+ iconClass="plusIcon" showLabel="false">
+ <span><b>Rich</b><i> Text</i> Test!</span>
+ </button>
+ <div dojoType="dijit.form.DropDownButton" iconClass="noteIcon" showLabel="false">
+ <span>Color</span>
+ <div dojoType="dijit.ColorPalette" id="colorPalette2" style="display: none" palette="3x4"
+ onChange="console.log(this.value);">
+ </div>
+ </div>
+ <div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'
+ iconClass="plusBlockIcon" showLabel="false">
+ <span>Save</span>
+ <div dojoType="dijit.Menu" id="saveMenu2" style="display: none;">
+ <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave"
+ onClick="console.log('not actually saving anything, just a test!')">Save</div>
+ <div dojoType="dijit.MenuItem"
+ onClick="console.log('not actually saving anything, just a test!')">Save As</div>
+ </div>
+ </div>
+ </div>
+ <br clear=both>
+ <h2>Toggle buttons</h2>
+ <p>The button CSS as well as the icon CSS can change on toggle </p>
+ <div class="box">
+ <button dojoType="dijit.form.ToggleButton" checked onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitCheckBoxIcon">
+ Toggle me
+ </button>
+ <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitRadioIcon">
+ Toggle me
+ </button>
+ </div>
+ <br clear=both>
+ <h2>Sizing</h2>
+ <p>Short button, tall buttons, big buttons, small buttons...
+ These buttons size to their content (just like <button>).</p>
+ <div class="box">
+ <button dojoType="dijit.form.Button" onclick='console.log("big");' iconClass="flatScreenIcon">
+ <span style="font-size:xx-large">big</span>
+ </button>
+ <button id="smallButton1" dojoType="dijit.form.Button" onclick='console.log("small");'>
+ <img src="../images/arrowSmall.gif" width="15" height="5">
+ <span style="font-size:x-small">small</span>
+ </button>
+ <button dojoType="dijit.form.Button" onclick='console.log("long");'>
+ <img src="../images/tube.gif" width="150" height="16">
+ long
+ </button>
+ <button dojoType="dijit.form.Button" onclick='console.log("tall");' width2height="0.1">
+ <img src="../images/tubeTall.gif" height="75" width="35"><br>
+ <span style="font-size:medium">tall</span>
+ </button>
+ <div style="clear: both;"></div>
+ </div>
+ <br clear=both>
+ <h2>Customized buttons</h2>
+ <p>Dojo users can customize styles. Here's an example:</p>
+ <style>
+ .acmeButton .dijitButtonNode {
+ background: rgb(96,96,96) !important;
+ color: white !important;
+ padding: 10px !important;
+ font-size: x-large !important;
+ padding-top: 10px !important;
+ padding-bottom: 10px !important;
+ border: 2px inset rgb(96,96,96);
+ }
+ .acmeButtonHover .dijitButtonNode {
+ background-color: rgb(89,94,111) !important;
+ color: cyan !important;
+ }
+ .acmeButtonFocused .dijitButtonNode {
+ border: yellow inset 2px;
+ }
+ .acmeButtonActive .dijitButtonNode {
+ background-color: white !important;
+ color: black !important;
+ border: 2px solid black !important;
+ }
+ </style>
+ <div class="box">
+ <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("short");'>
+ short
+ </button>
+ <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer");'>
+ bit longer
+ </button>
+ <button baseClass="acmeButton" dojoType="dijit.form.Button" onclick='console.log("longer yet");'>
+ ridiculously long
+ </button>
+ <div style="clear: both;"></div>
+ </div>
+ <h2>Toggling the display test</h2>
+ <p>
+ (Ticket <a href="http://trac.dojotoolkit.org/ticket/403">#403</a>)
+ </p>
+ <div class="box">
+ <button dojoType="dijit.form.Button" onclick='dojo.byId("hiddenNode").style.display="inline";'>
+ Show Hidden Buttons
+ </button>
+ </div>
+ <div class="box" style="display:none;" id="hiddenNode">
+ <button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">
+ Create
+ </button>
+ <button dojoType="dijit.form.Button" onclick='console.log("clicked simple")' iconClass="plusIcon">
+ Create
+ </button>
+ </div>
+ <div style="clear: both;"></div>
+ <h2>Programatically changing buttons</h2>
+ <p>clicking the buttons below will change the buttons above</p>
+ <script type="text/javascript">
+ // FIXME: doesn't the manager have a function for filtering by type?
+ function forEachButton(func){
+ dijit.registry.filter(function(widget){ return widget instanceof dijit.form.Button; }).forEach(func);
+ }
+ var disabled=false;
+ function toggleDisabled(){
+ disabled=!disabled;
+ forEachButton(function(widget){ widget.setAttribute('disabled',disabled); });
+ dojo.byId("toggle").innerHTML= disabled ? "Enable all" : "Disable all";
+ }
+ var labels=["<img src='../images/note.gif' width='20' height='20'>All", "<i>work</i>", "and no", "<h1>play</h1>",
+ "<span style='color: red'>makes</span>", "Jack", "<h3>a</h3>", "dull",
+ "<img src='../images/plus.gif' width='16' height='16'>boy"];
+ var idx=0;
+ function changeLabels(){
+ forEachButton(function(widget){
+ widget.setLabel( labels[idx++ % labels.length]);
+ });
+ }
+ </script>
+ <div>
+ <button id="toggle" onclick='toggleDisabled()'>Disable all</button>
+ <button onclick='changeLabels()'>Change labels</button>
+ <button onclick='location.reload()'>Revert</button>
+ </div>
+ <h3>Button instantiated via javacript:</h3>
+ <div id="buttonContainer"></div>
+ <script type="text/javascript">
+ // See if we can make a button in script and attach it to the DOM ourselves.
+ dojo.addOnLoad(function(){
+ var params = {
+ label: "hello!",
+ name: "programmatic"
+ };
+ var widget = new dijit.form.Button(params, document.getElementById("buttonContainer"));
+ });
+ </script>
+ <h3>DropDownButton instantiated via javacript:</h3>
+ <div id="dropdownButtonContainer"></div>
+ <script type="text/javascript">
+ // See if we can make a drop down button in script and attach it to the DOM ourselves.
+ function createButton(){
+ var menu = new dijit.Menu({ });
+ menu.domNode.style.display="none";
+ var menuItem1 = new dijit.MenuItem({
+ label: "Save",
+ iconClass:"dijitEditorIcon dijitEditorIconSave",
+ onClick: function(){ alert('save'); }
+ });
+ menu.addChild(menuItem1);
+
+ var menuItem2 = new dijit.MenuItem({
+ label: "Cut",
+ iconClass:"dijitEditorIcon dijitEditorIconCut",
+ onClick: function(){ alert('cut'); }
+ });
+ menu.addChild(menuItem2);
+
+ var params = {
+ label: "hello!",
+ name: "programmatic2",
+ dropDown: menu,
+ id: "progButton"
+ };
+ var widget = new dijit.form.DropDownButton(params);
+ dojo.byId("dropdownButtonContainer").appendChild(widget.domNode);
+ dojo.byId("createButton").disabled = true;
+ dojo.byId("destroyButton").disabled = false;
+ }
+ function destroyButton(){
+ var button = dijit.byId("progButton");
+ button.destroyRecursive();
+ dojo.byId("createButton").disabled = false;
+ dojo.byId("destroyButton").disabled = true;
+ }
+ </script>
+ <button id="createButton" onclick="createButton();">create dropdown button</button>
+ <button id="destroyButton" onclick="destroyButton();">destroy dropdown button</button>
+
+</body>
+</html>
diff --git a/includes/js/dijit/tests/form/test_CheckBox.html b/includes/js/dijit/tests/form/test_CheckBox.html new file mode 100644 index 0000000..4358270 --- /dev/null +++ b/includes/js/dijit/tests/form/test_CheckBox.html @@ -0,0 +1,127 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>CheckBox Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + label { margin-right: 0.80em; } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.CheckBox"); + dojo.require("dojo.parser"); // find widgets + + function outputValues(form){ + var str = ""; + for(var i=0;i<form.elements.length;i++){ + var e = form.elements[i]; + if(e.type=="submit") break; + if(e.checked){ + str += "submit: name="+e.name+" id="+e.id+" value="+e.value+ "<br>"; + } + } + dojo.byId("result").innerHTML = str; + return false; + } + + function reportChecked(checked) { + dojo.byId("oncheckedoutput").innerHTML = checked; + } + + function reportValueChanged(value) { + dojo.byId("onvaluechangedoutput").innerHTML = value; + } + + dojo.addOnLoad(function(){ + var params = {id: "cb6", name: "cb6"}; + var widget = new dijit.form.CheckBox(params, dojo.byId("checkboxContainer")); + widget.setAttribute('checked', true); + }); + </script> +</head> +<body> + <h1 class="testTitle">Dijit CheckBox Test</h1> + <p> + Here are some checkboxes. Try clicking, and hovering, tabbing, and using the space bar to select: + </p> + <!-- <form onSubmit="return outputValues(this);"> --> + <!-- to test form submission, you'll need to create an action handler similar to + http://www.utexas.edu/teamweb/cgi-bin/generic.cgi --> + <form> + <input type="checkbox" name="cb0" id="cb0" /> + <label for="cb0">cb0: Vanilla (non-dojo) checkbox (for comparison purposes)</label> + <br> + <input type="checkbox" name="cb1" id="cb1" value="foo" dojoType="dijit.form.CheckBox" onClick="console.log('clicked cb1')"> + <label for="cb1">cb1: normal checkbox, with value=foo, clicking generates console log messages</label> + <br> + <input onChange="reportChecked" type="checkbox" name="cb2" id="cb2" dojoType="dijit.form.CheckBox" checked="checked"/> + <label for="cb2">cb2: normal checkbox, initially turned on.</label> + <span>"onChange" handler updates: [<span id="oncheckedoutput"></span>]</span> + <br> + <input type="checkbox" name="cb3" id="cb3" dojoType="dijit.form.CheckBox" disabled="disabled"> + <label for="cb3">cb3: disabled checkbox</label> + <br> + <input type="checkbox" name="cb4" id="cb4" dojoType="dijit.form.CheckBox" disabled="disabled" checked="checked"/> + <label for="cb4">cb4: disabled checkbox, turned on</label> + <br> + <input type="checkbox" name="cb5" id="cb5" /> + <label for="cb5">cb5: Vanilla (non-dojo) checkbox (for comparison purposes)</label> + <br> + <div id="checkboxContainer"></div> + <label for="cb6">cb6: instantiated from script</label> + <br> + <input onChange="reportValueChanged" type="checkbox" name="cb7" id="cb7" dojoType="dijit.form.CheckBox"> + <label for="cb7">cb7: normal checkbox.</label> + <input type="button" onclick='dijit.byId("cb7").setAttribute("disabled",true);' value="disable" /> + <input type="button" onclick='dijit.byId("cb7").setAttribute("disabled",false);' value="enable" /> + <input type="button" onclick='dijit.byId("cb7").setValue("fish");' value='set value to "fish"' /> + <input type="button" onclick='dijit.byId("cb7").reset();' value='Reset value+checked' /> + <span>"onChange" handler updates: [<span id="onvaluechangedoutput"></span>]</span> + <br> + <p> + Here are some radio buttons. Try clicking, and hovering, tabbing, and arrowing + </p> + <p> + <span>Radio group #1:</span> + <input type="radio" name="g1" id="g1rb1" value="news" dojoType="dijit.form.RadioButton"> + <label for="g1rb1">news</label> + <input type="radio" name="g1" id="g1rb2" value="talk" dojoType="dijit.form.RadioButton" checked="checked"/> + <label for="g1rb2">talk</label> + <input type="radio" name="g1" id="g1rb3" value="weather" dojoType="dijit.form.RadioButton" disabled="disabled"/> + <label for="g1rb3">weather</label> + </p> + <p> + <span>Radio group #2: (no default value, and has breaks)</span><br> + <input type="radio" name="g2" id="g2rb1" value="top40" dojoType="dijit.form.RadioButton"/> + <label for="g2rb1">top 40</label><br> + <input type="radio" name="g2" id="g2rb2" value="oldies" dojoType="dijit.form.RadioButton"/> + <label for="g2rb2">oldies</label><br> + <input type="radio" name="g2" id="g2rb3" value="country" dojoType="dijit.form.RadioButton"/> + <label for="g2rb3">country</label><br> + (Note if using keyboard: tab to navigate, and use arrow or space to select) + </p> + <p> + <span>Radio group #3 (native radio buttons):</span> + <input type="radio" name="g3" id="g3rb1" value="rock"/> + <label for="g3rb1">rock</label> + <input type="radio" name="g3" id="g3rb2" value="jazz" disabled="disabled"/> + <label for="g3rb2">jazz</label> + <input type="radio" name="g3" id="g3rb3" value="classical" checked="checked"/> + <label for="g3rb3">classical</label> + </p> + <input type="submit" /> + </form> + + <!-- <p>Submitted data:</p> + <div id="result"></div> + --> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_ComboBox.html b/includes/js/dijit/tests/form/test_ComboBox.html new file mode 100644 index 0000000..895a968 --- /dev/null +++ b/includes/js/dijit/tests/form/test_ComboBox.html @@ -0,0 +1,289 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo ComboBox Widget Test</title> + + <style> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + .dj_ie INPUT#setvaluetest { font-family: Courier; } /* help IE with font inheritance + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function setVal1(val){ + dojo.byId('value1').value=val; + } + function setVal2(val){ + dojo.byId('value2').value=val; + console.debug("Value changed to ["+val+"] in second ComboBox (#1652)"); + } + function setVal3(val){ + dojo.byId('value3').value=val; + } + function setVal4(val){ + dojo.byId('value4').value=val; + } + var combo; + function init(){ + var store = new dojo.data.ItemFileReadStore({url: '../_data/states.json'}); + combo = new dijit.form.ComboBox({ + name:"prog", + autoComplete:false, + store: store, + searchAttr:"name" + }, dojo.byId("progCombo")); + + var store2 = new dojo.data.ItemFileReadStore({url: '../../demos/i18n/data.json'}); + combo = new dijit.form.ComboBox({ + name:"prog2", + autoComplete:false, + store:store2, + query:{type:'country'}, + searchAttr:"name" + }, dojo.byId("progCombo2")); + } + dojo.addOnLoad(init); + + function toggleDisabled(button, widget){ + widget = dijit.byId(widget); + button = dojo.byId(button); + widget.setAttribute('disabled',!widget.disabled); + button.innerHTML= widget.disabled ? "Enable" : "Disable"; + } + </script> +</head> + +<body> +<h1>Dojo ComboBox Widget Test</h1> +<p> +A ComboBox is like a text <input> field (ie, you can input any value you want), +but it also has a list of suggested values that you can choose from. +The drop down list is filtered by the data you have already typed in. +</p> +<form action="#" method="GET"> + + <p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p> + <label for="setvaluetest">US State test 1</label> (200% Courier font): + <select id="setvaluetest" + name="state1" + dojoType="dijit.form.ComboBox" + class="medium" + style="width:50%;font-size:200%;font-family:Courier;" + name="foo.bar1" + autoComplete="false" + onChange="dojo.byId('oc1').value=arguments[0]" + pageSize="30" + > + <option></option> + <option>Alabama</option> + <option>Alaska</option> + <option>American Samoa</option> + <option>Arizona</option> + <option>Arkansas</option> + <option>Armed Forces Europe</option> + <option>Armed Forces Pacific</option> + <option>Armed Forces the Americas</option> + <option>California</option> + <option>Colorado</option> + <option>Connecticut</option> + <option>Delaware</option> + <option>District of Columbia</option> + <option>Federated States of Micronesia</option> + <option>Florida</option> + <option>Georgia</option> + <option>Guam</option> + <option>Hawaii</option> + <option>Idaho</option> + <option>Illinois</option> + <option>Indiana</option> + <option selected>Iowa</option> + <option>Kansas</option> + <option>Kentucky</option> + <option>Louisiana</option> + <option>Maine</option> + <option>Marshall Islands</option> + <option>Maryland</option> + <option>Massachusetts</option> + <option>Michigan</option> + <option>Minnesota</option> + <option>Mississippi</option> + <option>Missouri</option> + <option>Montana</option> + <option>Nebraska</option> + <option>Nevada</option> + <option>New Hampshire</option> + <option>New Jersey</option> + <option>New Mexico</option> + <option>New York</option> + <option>North Carolina</option> + <option>North Dakota</option> + <option>Northern Mariana Islands</option> + <option>Ohio</option> + <option>Oklahoma</option> + <option>Oregon</option> + <option>Pennsylvania</option> + <option>Puerto Rico</option> + <option>Rhode Island</option> + <option>South Carolina</option> + <option>South Dakota</option> + <option>Tennessee</option> + <option>Texas</option> + <option>Utah</option> + <option>Vermont</option> + <option>Virgin Islands, U.S.</option> + <option>Virginia</option> + <option>Washington</option> + <option>West Virginia</option> + <option>Wisconsin</option> + <option>Wyoming</option> + </select> + <br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> + <input type="button" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').setDisplayedValue('Kentucky')"> + <input type="button" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').setDisplayedValue('Canada')"> + + <hr> + + <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" + url="../_data/states.json"></div> + + <div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore" + url="../_data/dijits.json"></div> + + <p>ComboBox #2: url, autoComplete=true:</p> + <label for="datatest">US State test 2</label> (8pt font): + <input dojoType="dijit.form.ComboBox" + value="California" + class="medium" + store="stateStore" + searchAttr="name" + style="width: 200px; font-size: 8pt;" + name="state2" + onChange="setVal2" + id="datatest" + > + <span>Value: <input id="value2" disabled value="California"></span> + <hr> + <label for="datatestDijit">Dijit List test #1</label> (150% font): + <input dojoType="dijit.form.ComboBox" + value="dijit.Editor" + class="medium" + store="dijitStore" + searchAttr="className" + style="width: 200px; font-size: 150%;" + name="dijitList1" + id="datatestDijit" + > + <span>Hey look, this one is kind of useful.</span> + <hr> + + <p>ComboBox #3: initially disabled, url, autoComplete=false:</p> + <label for="combo3">US State test 3: </label> + <input id="combo3" + dojoType="dijit.form.ComboBox" + value="California" + class="medium" + store="stateStore" + searchAttr="name" + style="width: 300px;" + name="state3" + autoComplete="false" + onChange="setVal3" + disabled + > + <span>Value: <input id="value3" disabled></span> + <div> + <button id="but" onclick='toggleDisabled("but", "combo3"); return false;'>Enable</button> + </div> + <hr> + <p>ComboBox #4: url, autoComplete=false required=true:</p> + <label for="combobox4">US State test 4: </label> + <input dojoType="dijit.form.ComboBox" + value="" + class="medium" + store="stateStore" + searchAttr="name" + style="width: 300px;" + name="state4" + onChange="setVal4" + autoComplete="false" + id="combobox4" + required="true" + > + <span>Value: <input id="value4" disabled></span> + <hr> + <p>A ComboBox with no arrow</p> + <input dojoType="dijit.form.ComboBox" + value="California" + store="stateStore" + searchAttr="name" + name="state5" + autoComplete="false" + hasDownArrow="false" + > + <hr> + <p>A combo created by createWidget</p> + <input id="progCombo"> + <hr> + <p>A ComboBox with an initial query. (Limits list to items with type = country.)</p> + <input id="progCombo2"> + <hr> + <input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input> + <input type="submit"> + +</form> +<p> +This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned. +also: adding a simple combo box to test IE bleed through problem: +</p> + +<select> + <option>test for</option> + <option>IE bleed through</option> + <option>problem</option> +</select> +<h3>Some tests:</h3> +<ol> +<li>Type in D - dropdown shows Delaware and District of columbia. [Would be nice if it bolded the D's in the dropdown list!]</li> +<li>Type in DX - input box shows DX and no dropdown.</li> +<li>Open dropdown, click an item, it selects and closes dropdown.</li> +<li>Click triangle icon - dropdown shows. Click it again - dropdown goes.</li> +<li>Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama</li> +<li>Tab into the combo works, list should not apear.</li> +<li>Tab out of the combo works - closes dropdown and goes to next control (focus should not go to the dropdown because tabindex="-1").</li> +<li>Do the dropdown and click outside of it - the dropdown disappears.</li> +<li>Javascript disabled -> fallback to old style combo?</li> +<li>Can you paste in the start of a match? [no]</li> +<li>Backspace to start - dropdown shows all all items</li> +<li>Backspace deselects last character [Borked: currently you have to backspace twice]</li> +<li>Press down key to open dropdown</li> +<li>Down and up keys select previous/next in dropdown.</li> +<li>Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.</li> +<li>Press down arrow to highlight an item, pressing enter selects it and closes dropdown.</li> +<li>Press down arrow to highlight an item, pressing space selects it and closes dropdown.</li> +<li>Check that pressing escape undoes the previous action and closes the dropdown</li> +<li>Check that pressing escape again clears the input box.</li> +<li>In IE, mouse scroll wheel scrolls through the list. Scrolls by 1 item per click even if user has set mouse to scroll more than 1 in mouse settings. Only scrolls if text input has focus (page scrolling works as normal otherwise)</li> +<li>In IE, dropdown list does not go behind the second combo (special code to manage this).</li> +<li>Check dropdown is aligned correctly with bottom of the text input</li> +<li>Probably should try the combo in a relative div or absolute div and see where the dropdown ends up. (Strongly suspect problems in this area in IE - boo)</li> +<li>Try repeatably droppingdown and closing the dropdown. Shouldnt get hung [sometimes flicks closed just after opening due to timers, but not a biggie]</li> +<li>Check that default selection of the text makes sense. e.g. text is selected after picking an item, on tabbing in to text input etc)</li> +<li>Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]</li> +<li>Clear the field. Type in A and then tab *very quickly* and see if the results make sense (the dropdown is on a timer - searchTimer)</li> +<li>Clear the field and enter an invalid entry and tab out e.g. Qualude. Does that make sense given the combobox setup options?</li> +<li>(Add any other tests here)</li> +</ol> +<div id="debugbox"></div> +<!-- maintain state of combo box if user presses back/forward button --> +<form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_ComboBox_destroy.html b/includes/js/dijit/tests/form/test_ComboBox_destroy.html new file mode 100644 index 0000000..0713b19 --- /dev/null +++ b/includes/js/dijit/tests/form/test_ComboBox_destroy.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo ComboBox Widget Destruction Issue</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.ComboBox"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + dojo.addOnLoad(function(){ + dojo.connect(dojo.byId("killit"), "onclick", function(){ + dijit.byId("combo_01").destroy(true); + }); + }); + </script> + </head> + <body> + <h1>Dojo ComboBox Widget Destruction Issue</h1> + <p> + <tt>ComboBox</tt> does not destroy itself properly, leading to a + JavaScript error. Could it have something to do with not disconnecting + events? + </p> + <p></p> + Steps: + <ol> + <li>Pick a state from the combo box below.</li> + <li>Click the "killit" button, which calls <tt>destroy</tt> on the widget.</li> + <li>Observe the JavaScript error.</li> + </ol> + <p></p> + <form action="#" method="GET"> + <input type="button" id="killit" name="killit" value="killit" /> + <select name="state" searchField="name" keyField="abbreviation" + id="combo_01" dojoType="dijit.form.ComboBox" style="width: 300px;" + name="foo.bar1" autoComplete="false"> + <option value="AL">Alabama</option> + + <option value="AK">Alaska</option> + <option value="AS">American Samoa</option> + <option value="AZ">Arizona</option> + <option value="AR">Arkansas</option> + <option value="AE">Armed Forces Europe</option> + <option value="AP">Armed Forces Pacific</option> + </select> + </form> + </body> +</html> diff --git a/includes/js/dijit/tests/form/test_DateTextBox.html b/includes/js/dijit/tests/form/test_DateTextBox.html new file mode 100644 index 0000000..d36ac73 --- /dev/null +++ b/includes/js/dijit/tests/form/test_DateTextBox.html @@ -0,0 +1,156 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Test DateTextBox Widget</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + .testExample { + background-color:#fbfbfb; + padding:1em; + margin-bottom:1em; + border:1px solid #bfbfbf; + } + + body .medium { + width: 10em; + } + + .noticeMessage { + color:#093669; + font-size:0.95em; + margin-left:0.5em; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.Form"); + dojo.require("dojo.date.locale"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + </head> + + <body> + <h1 class="testTitle">Test DateTextBox Widget</h1> + <!-- to test form submission, you'll need to create an action handler similar to + http://www.utexas.edu/teamweb/cgi-bin/generic.cgi --> + <form id="form1" dojoType='dijit.form.Form' action="" name="example" method=""> + <div class="dojoTitlePaneLabel"> + <label for="q1"> Date (local format) </label> + <span class="noticeMessage">DateTextBox class, no attributes</span> + </div> + <div class="testExample"> + <input id="q1" name="noDOMvalue" type="text" dojoType="dijit.form.DateTextBox" + onChange="dojo.byId('oc1').value=arguments[0]" + > + onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off"> + </div> + <div class="dojoTitlePaneLabel"> + <label for="q2"> Date (local format - long) </label> + <span class="noticeMessage">DateTextBox class, + Attributes: required="true", trim="true", constraints={min:'2004-01-01',max:'2006-12-31',formatLength:'long'}. Works for leap years</span> + </div> + <div class="testExample"> + <input id="q2" type="text" name="date1" class="medium" value="2005-12-30" + dojoType="dijit.form.DateTextBox" + constraints="{min:'2004-01-01',max:'2006-12-31',formatLength:'long'}" + required="true" + trim="true" + onChange="dojo.byId('oc2').value=arguments[0]" + invalidMessage="Invalid date." /> + onChange:<input id="oc2" size="34" disabled value="not fired yet!" autocomplete="off"> + <input type="button" value="Destroy" onClick="dijit.byId('q2').destroy(); return false;"> + <input type="button" value="set max to 2007-12-31" onClick="dijit.byId('q2').constraints.max = new Date(2007,11,31); return false;"> + </div> + <div class="dojoTitlePaneLabel"> + <label for="q3"> Date (American format) </label> + <span class="noticeMessage">DateTextBox class, + Attributes: lang="en-us", required="true", constraints={min:'2004-01-01',max:'2006-12-31'}. Works for leap years</span> + </div> + <div class="testExample"> + <input id="q3" type="text" name="date2" class="medium" value="2005-12-30" + dojoType="dijit.form.DateTextBox" + constraints="{min:'2004-01-01',max:'2006-12-31'}" + lang="en-us" + required="true" + promptMessage="mm/dd/yyyy" + invalidMessage="Invalid date. Use mm/dd/yyyy format." /> + </div> + <div class="dojoTitlePaneLabel"> + <label for="q4"> Date (German format) </label> + <span class="noticeMessage">DateTextBox class, + Attributes: lang="de-de", constraints={min:2004-01-01, max:2006-12-31}. Works for leap years</span> + </div> + <div class="testExample"> + <input id="q4" class="medium"/> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q5"> Date, overriding pattern</label> + <span class="noticeMessage">Date, overriding pattern with dd-MM-yyyy</span> + </div> + <div class="testExample"> + <input id="q5" name="noDOMvalue" type="text" dojoType="dijit.form.DateTextBox" constraints="{datePattern:'dd-MM-yyyy', strict:true}"> + </div> + + <script> + // See if we can make a widget in script and attach it to the DOM ourselves. + dojo.addOnLoad(function(){ + var props = { + name: "date4", + value: new Date(2006,10,29), + constraints: {min:new Date(2004,0,1),max:new Date(2006,11,31)}, + lang: "de-de", + promptMessage: "dd.mm.yy", + rangeMessage: "Enter a date in the year range 2004-2006.", + invalidMessage: "Invalid date. Use dd.mm.yy format." + }; + var w = new dijit.form.DateTextBox(props, "q4"); + }); + </script> + + <script> + function displayData() { + var f = document.getElementById("form1"); + var s = ""; + for (var i = 0; i < f.elements.length; i++) { + var elem = f.elements[i]; + if (elem.name == "button") { continue; } + s += elem.name + ": " + elem.value + "\n"; + } + alert(s); + } + </script> + + <div class="dojoTitlePaneLabel"> + <label for="fromDate"> Date pairs, to/from</label> + </div> + <div class="testExample"> + From: <input id="fromDate" type="text" name="fromDate" dojoType="dijit.form.DateTextBox" + required="true" + onChange="dijit.byId('toDate').constraints.min = this.getValue();" /> + To: <input id="toDate" type="text" name="toDate" dojoType="dijit.form.DateTextBox" + required="true" + onChange="dijit.byId('fromDate').constraints.max = this.getValue();" /> + </div> + + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + <input type="submit" name="submit" /> + <input type="reset" name="reset" /> + </div> + </form> + </body> +</html> diff --git a/includes/js/dijit/tests/form/test_FilteringSelect.html b/includes/js/dijit/tests/form/test_FilteringSelect.html new file mode 100644 index 0000000..d40af13 --- /dev/null +++ b/includes/js/dijit/tests/form/test_FilteringSelect.html @@ -0,0 +1,296 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo FilteringSelect Widget Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.form.FilteringSelect"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function setValue(id, val){ + dojo.byId(id).value=val; + } + + function myLabelFunc(item, store){ + var label=store.getValue(item, 'name'); + // DEMO: uncomment to chop off a character + //label=label.substr(0, label.length-1); + // DEMO: uncomment to set to lower case + label = label.toLowerCase(); + return label; + } + </script> +</head> + +<body> + <h1 class="testTitle">Dojo FilteringSelect Widget Test</h1> + <div dojoType="dojo.data.ItemFileReadStore" jsId="myStore" + url="../_data/states.json"></div> + <div dojoType="dojo.data.ItemFileReadStore" jsId="myStore2" + url="../_data/countries.json"></div> + <p>The FilteringSelect widget is an enhanced version of HTML's <select> tag.</p> + <p>Similar features:</p> + <ul> + <li>There is a drop down list of possible values.</li> + <li>You can only enter a value from the drop down list. (You can't enter an arbitrary value.)</li> + <li>The value submitted with the form is the hidden value (ex: CA),</li> + <li>not the displayed value a.k.a. label (ex: California)</li> + </ul> + <p></p> + + + <p>Enhancements over plain HTML version:</p> + <ul> + <li>If you type in some text then it will filter down the list of possible values in the drop down list.</li> + <li>List can be specified either as a static list or via a javascript function (that can get the list from a server)</li> + </ul> + <p></p> + + <hr> + + <form action="#" method="GET"> + <p>FilteringSelect #1: inlined data, autoComplete=false:</p> + <label for="setvaluetest2">state list 1:</label> + <select dojoType="dijit.form.FilteringSelect" + id="setvaluetest2" + name="state1" + autoComplete="false" + invalidMessage="Invalid state name" + onChange="dojo.byId('oc1').value=arguments[0]" + onFocus="console.log('user focus handler')" + onBlur="console.log('user blur handler')" + > + <option value="blank"></option> + <option value="AL">Alabama</option> + <option value="AK">Alaska</option> + <option value="AS">American Samoa</option> + <option value="AZ">Arizona</option> + <option value="AR">Arkansas</option> + <option value="AE">Armed Forces Europe</option> + <option value="AP">Armed Forces Pacific</option> + <option value="AA">Armed Forces the Americas</option> + <option value="CA" selected>California</option> + <option value="CO">Colorado</option> + <option value="CT">Connecticut</option> + <option value="DE">Delaware</option> + <option value="DC">District of Columbia</option> + <option value="FM">Federated States of Micronesia</option> + <option value="FL">Florida</option> + <option value="GA">Georgia</option> + <option value="GU">Guam</option> + <option value="HI">Hawaii</option> + <option value="ID">Idaho</option> + <option value="IL">Illinois</option> + <option value="IN">Indiana</option> + <option value="IA">Iowa</option> + <option value="KS">Kansas</option> + <option value="KY">Kentucky</option> + <option value="LA">Louisiana</option> + <option value="ME">Maine</option> + <option value="MH">Marshall Islands</option> + <option value="MD">Maryland</option> + <option value="MA">Massachusetts</option> + <option value="MI">Michigan</option> + <option value="MN">Minnesota</option> + <option value="MS">Mississippi</option> + <option value="MO">Missouri</option> + <option value="MT">Montana</option> + <option value="NE">Nebraska</option> + <option value="NV">Nevada</option> + <option value="NH">New Hampshire</option> + <option value="NJ">New Jersey</option> + <option value="NM">New Mexico</option> + <option value="NY">New York</option> + <option value="NC">North Carolina</option> + <option value="ND">North Dakota</option> + <option value="MP">Northern Mariana Islands</option> + <option value="OH">Ohio</option> + <option value="OK">Oklahoma</option> + <option value="OR">Oregon</option> + <option value="PA">Pennsylvania</option> + <option value="PR">Puerto Rico</option> + <option value="RI">Rhode Island</option> + <option value="SC">South Carolina</option> + <option value="SD">South Dakota</option> + <option value="TN">Tennessee</option> + <option value="TX">Texas</option> + <option value="UT">Utah</option> + <option value="VT">Vermont</option> + <option value="VI">Virgin Islands, U.S.</option> + <option value="VA">Virginia</option> + <option value="WA">Washington</option> + <option value="WV">West Virginia</option> + <option value="WI">Wisconsin</option> + <option value="WY">Wyoming</option> + </select> + onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> + <input type="button" value="Set displayed value to Kentucky (valid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Kentucky')"> + <input type="button" value="Set displayed value to Canada (invalid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Canada')"> + <hr> + + <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" + url="../_data/states.json"></div> + + <p>FilteringSelect #2: url, autoComplete=true:</p> + <label for="setvaluetest">state list 2:</label> + <input searchAttr="name" + id="setvaluetest" + dojoType="dijit.form.FilteringSelect" + store="stateStore" + name="state2" + autoComplete="true" + onChange="setValue('value2', arguments[0]);" + invalidMessage="Invalid state name" + > + <span>Value: <input id="value2" disabled></span> + + <p>FilteringSelect #3: url, autoComplete=false:</p> + <label for="state3">state list 3:</label> + <input searchAttr="name" + id="state3" + dojoType="dijit.form.FilteringSelect" + value="VI" + store="stateStore" + name="state3" + autoComplete="false" + onChange="setValue('value3', arguments[0]);" + invalidMessage="Invalid state name." + > + <span>Value: <input id="value3" disabled value="VI"></span> + <hr> + <p>FilteringSelect #5: custom labelFunc (value in textbox should be lower case when onChange is called), autoComplete=true:</p> + <label for="state5">state list 5:</label> + <input searchAttr="name" + id="state5" + dojoType="dijit.form.FilteringSelect" + value="OR" + labelFunc="myLabelFunc" + store="stateStore" + name="state5" + autoComplete="true" + labelAttr="label" + labelType="html" + dataProviderClass="dojo.data.ItemFileReadStore" + promptMessage="Please enter a state" + invalidMessage="Invalid state name." + > + <br> + <hr> + + <p>FilteringSelect #7: Input method editor Chinese characters</p> + <p>Using an input method editor (see <a href="http://www.microsoft.com/windows/ie/ie6/downloads/recommended/ime/default.mspx">IME</a> for Windows) try typing 阿 (a) or 把 (ba).</p> + <label for="state7">Chinese list:</label> + <select dojoType="dijit.form.FilteringSelect" + name="state7" + id="state7" + > + <option value="a" selected>阿</option> + <option value="ba">把</option> + </select> + <br> + <hr> + <p>FilteringSelect #8: Japanese</p> + <p>Try typing 東、西、北、南 (north, south, east west) and a few choices will pop up.</p> + <label for="state8">Japanese list:</label> + <select name="state8" id="state8" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false" + onChange="setValue('value8', arguments[0]);"> + <option value="nanboku">南北</option> + <option value="touzai">東西</option> + <option value="toukyou">東京</option> + <option value="higashiguchi">東口</option> + <option value="nishiguchi">西口</option> + <option value="minamiguchi">南口</option> + <option value="kitaguchi">北口</option> + <option value="higashiku">東区</option> + <option value="nishiku">西区</option> + <option value="minamiku">南区</option> + <option value="kitaku">北区</option> + </select> + <span>Value: <input id="value8" disabled value="nanboku"></span> + <hr> + <p>FilteringSelect #9: No data</p> + <p>This FilteringSelect has no options to choose from. It should still load.</p> + <label for="state9">empty list:</label> + <select name="state9" id="state9" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false"> + </select> + <br> + <hr> + <p>FilteringSelect #10: hasDownArrow=false:</p> + <label for="state10">no arrow list:</label> + <input searchAttr="name" + dojoType="dijit.form.FilteringSelect" + value="AL" + name="state10" + id="state10" + autoComplete="false" + store="myStore" + invalidMessage="Invalid state name." + hasDownArrow="false" + > + <br> + <hr> + <div > + <p>FilteringSelect #11: deep data, initial query of type=country:</p> + <label for="state11">query list:</label> + <input searchAttr="name" + dojoType="dijit.form.FilteringSelect" + query={type:'country'} + value="United States of America" + name="state11" + id="state11" + autoComplete="false" + store="myStore2" + invalidMessage="Choose a country from the list." + hasDownArrow="false" + > + <br> + <hr> + <p>FilteringSelect #12: special characters</p> + <p>The drop down list should be:</p> + <ul> + <li>sticks & stones + <li>rags --> riches + <li>more\less + <li>3 * 5 + </ul> + <label for="filter12">Special chars:</label> + <select dojoType="dijit.form.FilteringSelect" + name="filter12" + id="filter12" + > + <option value="sticks" selected>sticks & stones</option> + <option value="rags">rags --> riches</option> + <option value="more">more\less</option> + <option value="times">3 * 5</option> + </select> + <br> + <hr> + <input type="submit"> + </form> + <p> + this is some text below the combo boxes. It shouldn't get pushed out of + the way when search results get returned. also: adding a simple combo + box to test IE bleed through problem: + </p> + + <select> + <option>test for</option> + <option">IE bleed through</option> + <option>problem</option> + </select> + + <!-- maintain state of select if user presses back/forward button --> + <form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_Form_onsubmit.html b/includes/js/dijit/tests/form/test_Form_onsubmit.html new file mode 100644 index 0000000..d8b43fa --- /dev/null +++ b/includes/js/dijit/tests/form/test_Form_onsubmit.html @@ -0,0 +1,87 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + + <title>Form unit test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + <script type="text/javascript"> + dojo.require("dojo.date"); + dojo.require("dijit.form.Form"); + dojo.require("dijit.layout.LayoutContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.form.CheckBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.MultiSelect"); + dojo.require("dijit.form.Textarea"); + dojo.require("dijit.form.SimpleTextarea"); + dojo.require("dijit.Editor"); + </script> +</head> +<body> + <h1>Form Widget Unit Test</h1> + <form dojoType="dijit.form.Form" id="myForm1" + encType="multipart/form-data" action="" method="GET" + onSubmit="dojo.stopEvent(arguments[0]);" + onReset="dojo.stopEvent(arguments[0]);"> + <h3>This form shouldn't submit, nor reset</h3> + <select name="plop.combo" dojoType="dijit.form.ComboBox"> + <option value="one">one</option> + <option value="two">two</option> + <option value="three">three</option> + </select> + <button dojoType=dijit.form.Button type="submit">Submit</button> + <button dojoType=dijit.form.Button type="reset">Reset</button> + </form> + + <form dojoType="dijit.form.Form" id="myForm2" + encType="multipart/form-data" action="" method="GET" + onSubmit="return false;" + onReset="return false;"> + <h3>This form shouldn't submit, nor reset</h3> + <select name="plop.combo" dojoType="dijit.form.ComboBox"> + <option value="one">one</option> + <option value="two">two</option> + <option value="three">three</option> + </select> + <button dojoType=dijit.form.Button type="submit">Submit</button> + <button dojoType=dijit.form.Button type="reset">Reset</button> + </form> + + <form dojoType="dijit.form.Form" id="myForm3" + encType="multipart/form-data" action="" method="GET" + onSubmit="return true;" + onReset="return true;"> + <h3>This form <em>should</em> submit and reset</h3> + <select name="plop.combo" dojoType="dijit.form.ComboBox"> + <option value="one">one</option> + <option value="two">two</option> + <option value="three">three</option> + </select> + <button dojoType=dijit.form.Button type="submit">Submit</button> + <button dojoType=dijit.form.Button type="reset">Reset</button> + </form> + + <form dojoType="dijit.form.Form" id="myForm4" + encType="multipart/form-data" action="" method="GET" + onSubmit="void(0)" + onReset="void(0)"> + <h3>This form <em>should</em> submit and reset</h3> + <select name="plop.combo" dojoType="dijit.form.ComboBox"> + <option value="one">one</option> + <option value="two">two</option> + <option value="three">three</option> + </select> + <button dojoType=dijit.form.Button type="submit">Submit</button> + <button dojoType=dijit.form.Button type="reset">Reset</button> + </form> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_MultiSelect.html b/includes/js/dijit/tests/form/test_MultiSelect.html new file mode 100644 index 0000000..9f03d80 --- /dev/null +++ b/includes/js/dijit/tests/form/test_MultiSelect.html @@ -0,0 +1,138 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> + <title>Testing MultiSelect form widget | The Dojo Toolkit</title> + + <link rel="stylesheet" type="text/css" media="screen" + href="../../../dijit/themes/tundra/tundra.css"> + + <style type="text/css"> + @import "../../../dijit/tests/css/dijitTests.css"; + #select, #select2 { + width:255px; + height:300px; + overflow:auto; + } + </style> + + <script type="text/javascript" djConfig="isDebug:true, parseOnLoad: true" + src="../../../dojo/dojo.js"></script> + + <script type="text/javascript"> + var globalVals = null; + + dojo.require("dijit.form.MultiSelect"); + + // needed for tests: + dojo.require("dijit.form.Form"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.layout.SplitContainer"); + + dojo.addOnLoad(function(){ + + // ref a clonable node, then split it between two selects + var c = dojo.query(".clone")[0]; + var l = -1; + opt = function(){ + return dojo.byId((++l%2 == 0 ? "select":"select2" )); + } + // based on the the 'dijit' object + for(var i in dijit){ + var n = opt().appendChild(dojo.clone(c)); + n.value = n.innerHTML = i; + } + + // turn any non-dojoType selects into widgets programatically: + dojo.query("select").forEach(function(n){ + if(!dijit.byNode(n)){ + var foo = new dijit.form.MultiSelect({ + },n); + } + }); + + // listen to the "move items" buttons + dojo.query("button.switch") + .connect("onclick",function(e){ + switch(e.target.id.toString()){ + case "left" : dijit.byId("select").addSelected(dijit.byId("select2")); break; + case "right" : dijit.byId("select2").addSelected(dijit.byId("select")); break; + } + }); + + // listen to the invert buttons + dojo.query("button.invert") + .connect("onclick",function(e){ + switch(e.target.id.toString()){ + case "i1" : dijit.byId("select").invertSelection(); break; + case "i2" : dijit.byId("select2").invertSelection(); break; + case "i3" : dijit.byId("select3").invertSelection(); break; + } + }); + + // there is only one debug button + dojo.query(".debug").connect("onclick",function(e){ + console.log('select getValue:',dijit.byId("select").getValue()); + console.log('select2 getValue:',dijit.byId("select2").getValue()); + console.log('select3 getValue:',dijit.byId("select3").getValue()); + }); + + // natural form reaction: + dojo.connect(dojo.byId("test"),"onsubmit",function(e){ + e.preventDefault(); + }); + dojo.connect(dojo.byId("formSubmit"),"onclick",function(e){ + // see what the real form says about our widgets: + var vals = dojo.formToJson("test"); + console.log(vals); + }); + }); + </script> +</head> +<body class="tundra" style="padding:20px"> + + <h1 class="testTitle">dijit.form.MultiSelect:</h1> + + <form action="null.html" method="get" id="test"> + + <select id="select" multiple="true" size="7" name="easing"> + <option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option> + </select> + + <span> + <button class="switch" id="left"><</button> + <button class="switch" id="right">></button> + </span> + + <select id="select2" multiple="true" size="7" name="second"> + </select> + + <br><br> + + <button class='invert' id="i1">invert first list</button> + <button class="invert" id="i2">invert second list</button> + <button id="formSubmit">Submit</button> + + </form> + + <button class="debug">call getValue()</button> + + <h3>markup:</h3> + + <select id="select3" multiple="true" name="select3" + dojoType="dijit.form.MultiSelect" + style="height:200px; width:175px; border:5px solid #ededed;"> + + <option value="TN" selected="true">Tennessee</option> + <option value="VA">Virginia</option> + <option value="WA">Washington</option> + <option value="FL">Florida</option> + <option value="CA">California</option> + + </select> + + <br><br> + <button class='invert' id="i3">invert markup list</button> + <button class='set' id="s1" onclick="dijit.byId('select3').setValue(['VA', 'WA']);">set markup list to [VA, WA]</button> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_SimpleTextarea.html b/includes/js/dijit/tests/form/test_SimpleTextarea.html new file mode 100644 index 0000000..9462447 --- /dev/null +++ b/includes/js/dijit/tests/form/test_SimpleTextarea.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> + <title>Testing SimpleTextArea | The Dojo Toolkit</title> + + <link rel="stylesheet" type="text/css" media="screen" + href="../../../dijit/themes/tundra/tundra.css"> + + <style type="text/css"> + @import "../../../dijit/tests/css/dijitTests.css"; + </style> + + <script type="text/javascript" djConfig="isDebug:true, parseOnLoad: true" + src="../../../dojo/dojo.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.SimpleTextarea"); + + // needed for tests + dojo.require("dijit.layout.BorderContainer"); + </script> +</head> + +<body class="tundra" style="padding:20px"> + + <h1 class="testTitle">SimpleTextarea</h1> + + <p> + This is a simple text area that doesn't automatically size itself according to it's content. + It can be used inside layout containers. + </p> + + <h2>Plain textarea (rows=5, cols=50)</h2> + <textarea dojoType="dijit.form.SimpleTextarea" name="ta2" rows=5 cols=50 + onFocus="console.log('user focus handler')" + onBlur="console.log('user blur handler')" + > + shichashaw, textarea text baw. + </textarea> + + <h2>In a BorderContainer</h2> + + <div id="container" dojoType="dijit.layout.BorderContainer" style="width:500px; height:400px; border: inset gray 3px;"> + <textarea name="textAreaN3" dojoType="dijit.form.SimpleTextarea" region="top" splitter="true" style="height: 100px;"> + This is just some text in the top region. + </textarea> + <textarea name="textAreaN3" dojoType="dijit.form.SimpleTextarea" region="left" splitter="true" style="width: 200px;"> + This is just some text in the left region. + </textarea> + <textarea name="textAreaN3" dojoType="dijit.form.SimpleTextarea" region="center"> + This is just some text in the center region. + </textarea> + <textarea name="textAreaN3" dojoType="dijit.form.SimpleTextarea" region="right" splitter="true" style="width: 200px;"> + This is just some text in the left region. + </textarea> + <textarea name="textAreaN3" dojoType="dijit.form.SimpleTextarea" region="bottom" splitter="true" style="height: 100px;"> + This is just some text in the left region. + </textarea> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/form/test_Slider.html b/includes/js/dijit/tests/form/test_Slider.html new file mode 100644 index 0000000..f1d0442 --- /dev/null +++ b/includes/js/dijit/tests/form/test_Slider.html @@ -0,0 +1,208 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo Slider Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + #slider2 .dijitButtonNode { + width:12px; + height:12px; + border: none; + font-size:11px; + padding:0px; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Slider"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets + + // programatic vertical slider and labels + var programaticExample = function(){ + + var node = dojo.byId("programaticSlider"); + // or var node = dojo.body().appendChild(document.createElement('div')); + + // our rules are to be children of the slider + var rulesNode = document.createElement('div'); + node.appendChild(rulesNode); + + // setup the rules + var sliderRules = new dijit.form.VerticalRule({ + count:11, + style:"width:5px" + },rulesNode); + + // and setup the slider + var theSlider = new dijit.form.VerticalSlider({ + value:1400, + onChange: function(){ + console.log(arguments); + }, + name:"programaticSlider", + slideDuration:0, + onChange:function(val){ dojo.byId('sliderProgInput').value=val; }, + style:"height:165px", + minimum:1000, + maximum:3000, + discreteValues:11, + intermediateChanges:"true", + showButtons:"true" + },node); + + // and start them both + theSlider.startup(); + sliderRules.startup(); + + }; + dojo.addOnLoad(programaticExample); + + dojo.addOnLoad(function(){ + dijit.byId("sliderH2").setAttribute('disabled',true); + }); + </script> + </head> + + <body> + <h1 class="testTitle">Slider</h1> + Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider. + <br> + <!-- to test form submission, you'll need to create an action handler similar to + http://www.utexas.edu/teamweb/cgi-bin/generic.cgi --> + <form id="form1" action="" name="example" method="post"> + <br>initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br> + + <div dojoType="dijit.form.HorizontalSlider" name="horizontal1" + onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});" + value="10" + maximum="100" + minimum="0" + pageIncrement="100" + showButtons="false" + intermediateChanges="true" + style="width:50%; height: 20px;" + id="slider1"> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="6" numericMargin="1"></ol> + <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=6 style="height:5px;"></div> + <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> + <li>lowest</li> + <li>normal</li> + <li>highest</li> + </ol> + </div> + + Slider1 Value:<input readonly id="slider1input" size="4" value="10.0%"> + <br> + <button id="disableButton" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setAttribute('disabled', true);dijit.byId('disableButton').setAttribute('disabled',true);dijit.byId('enableButton').setAttribute('disabled',false);">Disable previous slider</button> + <button id="enableButton" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setAttribute('disabled',false);dijit.byId('disableButton').setAttribute('disabled',false);dijit.byId('enableButton').setAttribute('disabled', true);" disabled>Enable previous slider</button> + <br> + <br>initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br> + <div dojoType="dijit.form.VerticalSlider" name="vertical1" + onChange="dojo.byId('slider2input').value=arguments[0];" + value="10" + maximum="100" + minimum="0" + discreteValues="11" + style="height:300px;" + id="slider2"> + <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;color:gray;" labelStyle="right:0px;"> + <li>0</li> + <li>100</li> + </ol> + <div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div> + <div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div> + <ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration" style="width:2em;color:gray;" count="6" numericMargin="1" maximum="100" constraints={pattern:'#'}></ol> + </div> + Slider2 Value:<input readonly id="slider2input" size="3" value="10"> + <h1>Fancy HTML labels (no slide animation):</h1> + <div dojoType="dijit.form.HorizontalSlider" name="horizontal2" + minimum="1" + value="2" + maximum="3" + discreteValues="3" + showButtons="false" + intermediateChanges="true" + slideDuration="0" + style="width:300px; height: 40px;" + id="slider3"> + <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> + <li><img width=10 height=10 src="../images/note.gif"><br><span style="font-size: small">small</span></li> + <li><img width=15 height=15 src="../images/note.gif"><br><span style="font-size: medium">medium</span></li> + <li><img width=20 height=20 src="../images/note.gif"><br><span style="font-size: large">large</span></li> + </ol> + </div> + + <p></p><h1>Standalone ruler example:</h1><p></p> + + <div style="width:2in;border-top:1px solid black;"> + <div dojoType="dijit.form.HorizontalRule" count=17 style="height:.4em;"></div> + <div dojoType="dijit.form.HorizontalRule" count=9 style="height:.4em;"></div> + <div dojoType="dijit.form.HorizontalRule" count=5 style="height:.4em;"></div> + <div dojoType="dijit.form.HorizontalRule" count=3 style="height:.4em;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" labelStyle="font-style:monospace;font-size:.7em;margin:-1em 0px 0px -.35em;"> + <li></li> + <li>1</li> + <li>2</li> + </ol> + </div> + + <h1>horizontal, with buttons, disabled (to show styling):</h1> + + <div dojoType="dijit.form.HorizontalSlider" name="horizontalH2" + onChange="dojo.byId('slider1input').value=arguments[0];" + value="10" + maximum="100" + minimum="0" + disabled="true" + showButtons="true" + intermediateChanges="true" + style="width:50%; height: 20px;" + id="sliderH2"> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="7" constraints="{pattern:'#.00%'}"></ol> + <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=7 style="height:5px;"></div> + <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> + <li>lowest</li> + <li>normal</li> + <li>highest</li> + </ol> + </div> + + + <h2>Completely Programatic VerticalSlider and VerticalRule</h2> + <h3>min:1000, max:3000, 11 discrete values, no animation</h3> + + <div id="programaticSlider"></div> + Programmatic Value:<input readonly id="sliderProgInput" size="5" value="1400"> + + <script> + function displayData() { + var f = document.getElementById("form1"); + var s = ""; + for (var i = 0; i < f.elements.length; i++) { + var elem = f.elements[i]; + if (elem.name == "button") { continue; } + s += elem.name + ": " + elem.value + "\n"; + } + alert(s); + } + </script> + + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + <input type="submit" name="submit" /> + </div> + + </form> + </body> +</html> diff --git a/includes/js/dijit/tests/form/test_Spinner.html b/includes/js/dijit/tests/form/test_Spinner.html new file mode 100644 index 0000000..e9af53c --- /dev/null +++ b/includes/js/dijit/tests/form/test_Spinner.html @@ -0,0 +1,92 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo Spinner Widget Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + .dj_ie INPUT#integerspinner2 { font-family: Courier; } /* help IE with font inheritance */ + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.NumberSpinner"); + dojo.require("dojo.parser"); // scan page for widgets + </script> + </head> + + <body> + <h1 class="testTitle">Dijit Spinner Test</h1> + Try typing values, and use the up/down arrow keys and/or the arrow push + buttons to spin + <br> + <form id="form1" action="" name="example" method="post"> + <h1>number spinner</h1> + <br> + initial value=900, no delta specified, no min specified, max=1550, onChange captured<br> + <label for="integerspinner1">Spinbox #1: </label><br> + <input dojoType="dijit.form.NumberSpinner" + onChange="dojo.byId('oc1').value=arguments[0]" + value="900" + class="medium" + constraints="{max:1550,places:0}" + name="integerspinner1" + id="integerspinner1"> + onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> + <br> + <br> + initial value=1000, delta=10, min=9 max=1550<br> + <label for="integerspinner2">Spinbox with custom styling (width=50%, 200% Courier font): </label> + <input dojoType="dijit.form.NumberSpinner" + style="font-size:200%;font-family:Courier;border:1px solid blue;width:50%;" + value="1000" + smallDelta="10" + constraints="{min:9,max:1550,places:0}" + name="integerspinner2" + id="integerspinner2"> + <br> + <br> + <label for="integertextbox3">Spinner line break test: </label>initial value not specified, delta not specified, min not specified, max not specified, signed not specified, separator not specified<br> + [verify no line break just after this text] + <input dojoType="dijit.form.NumberSpinner" name="integertextbox3" id="integertextbox3"> + [verify no line break just before this text] + <br> + <br> + Move the cursor left and right within the input field to see the effect on the spinner. + <br> + initial value=+1.0, delta=0.1, min=-10.9, max=155, places=1, maxLength=20<br> + <label for="realspinner1">Real Number Spinbox #1: </label><br> + <input dojoType="dijit.form.NumberSpinner" + value="1.0" + smallDelta="0.1" + constraints={min:-10.9,max:155,places:1,round:true} + maxLength="20" + name="realspinner1" + id="realspinner1"> + <br> + +<script> + function displayData() { + var f = document.getElementById("form1"); + var s = ""; + for (var i = 0; i < f.elements.length; i++) { + var elem = f.elements[i]; + if (elem.name == "button") { continue; } + s += elem.name + ": " + elem.value + "\n"; + } + alert(s); + } +</script> + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + <input type="submit" name="submit" /> + </div> + + </form> + </body> +</html> diff --git a/includes/js/dijit/tests/form/test_Textarea.html b/includes/js/dijit/tests/form/test_Textarea.html new file mode 100644 index 0000000..c885aa6 --- /dev/null +++ b/includes/js/dijit/tests/form/test_Textarea.html @@ -0,0 +1,106 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo Textarea Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Textarea"); + dojo.require("dojo.parser"); + </script> + </head> + <body> + <h2 class="pageSubContentTitle">Test Auto-sizing Textarea Widget</h2> + + <!-- to test form submission, you'll need to create an action handler similar to + http://www.utexas.edu/teamweb/cgi-bin/generic.cgi --> + <form id="form1" action="" name="example" method="post"> + <label for="plain">HTML textarea: </label><textarea name="plainTextArea" id="plain" rows=5> + this is a plain text area + for comparison + </textarea> + <br><label for="programmatic">programmatically created:</label> <textarea id="programmatic"></textarea> + <script type="text/javascript"> + // See if we can make a widget in script + dojo.addOnLoad(function(){ + var w = new dijit.form.Textarea({ + name: "programmaticTextArea", + style: "width:400px;", + value: "test value" + }, "programmatic"); + w.setValue('we will create this one programatically'); + }); + </script> + <br><label for="simple">Inline:</label><div name="simpleTextArea" dojoType="dijit.form.Textarea" id="simple" style="width:33%;border:20px solid red;" + onChange="dojo.byId('ocSimple').value=arguments[0]" + onFocus="console.log('user focus handler')" + onBlur="console.log('user blur handler')" + >this is a very simple resizable text area</div> + onChange:<textarea id="ocSimple" readOnly>not fired yet!</textarea> + <br> + <input type="button" onclick="dijit.byId('simple').setAttribute('readOnly',false);" value="Remove readOnly"> + <input type="button" onclick="dijit.byId('simple').setAttribute('readOnly',true);" value="Set readOnly"> + <input type="button" onclick="dijit.byId('simple').setAttribute('disabled',true);" value="Disable"> + <input type="button" onclick="dijit.byId('simple').setAttribute('disabled',false);" value="Enable"> + <br> + <textarea dojoType="dijit.form.Textarea" name="largeTextArea"> +this is a textarea with a LOT of content + + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + </textarea> + <script type="text/javascript"> + function displayData() { + var f = dojo.byId("form1"); + var s = ""; + for(var i = 0; i < f.elements.length; i++){ + var elem = f.elements[i]; + if(elem.name == "button" || !dojo.isString(elem.value)){ continue; } + s += elem.name + ":[" + elem.value + "]\n"; + } + alert(s); + } + </script> + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + <input type="submit" name="submit" /> + </div> + + </form> + </body> +</html> diff --git a/includes/js/dijit/tests/form/test_TimeTextBox.html b/includes/js/dijit/tests/form/test_TimeTextBox.html new file mode 100644 index 0000000..f68a28d --- /dev/null +++ b/includes/js/dijit/tests/form/test_TimeTextBox.html @@ -0,0 +1,143 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Test TimeTextBox Widget</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + .testExample { + background-color:#fbfbfb; + padding:1em; + margin-bottom:1em; + border:1px solid #bfbfbf; + } + + body .medium { + width: 10em; + } + + .noticeMessage { + color:#093669; + font-size:0.95em; + margin-left:0.5em; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.TextBox"); + dojo.require("dijit.form.ValidationTextBox"); + dojo.require("dijit.form.NumberTextBox"); + dojo.require("dijit.form.CurrencyTextBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.TimeTextBox"); + dojo.require("dojo.currency"); + dojo.require("dojo.date.locale"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + </head> + + <body> + <h1 class="testTitle">Test TimeTextBox Widget</h1> + <!-- to test form submission, you'll need to create an action handler similar to + http://www.utexas.edu/teamweb/cgi-bin/generic.cgi --> + <form id="form1" action="" name="example" method=""> + + <div class="dojoTitlePaneLabel"> + <label for="q1">Time using local conventions with seconds</label> + <span class="noticeMessage">TimeTextBox class, + Attributes: {formatLength:'medium'}</span> + </div> + <div class="testExample"> + <input id="q1" type="text" name="time1" class="medium" value="T17:45:00" + dojoType="dijit.form.TimeTextBox" + constraints="{formatLength:'medium'}" + required="true" + onChange="dojo.byId('oc1').value=arguments[0]" + invalidMessage="Invalid time." /> + onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off"> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q2">Time using local conventions without seconds, required, no invalid message tooltip</label> + <span class="noticeMessage">TimeTextBox class, + Attributes: {formatLength:'short'}</span> + </div> + <div class="testExample"> + <input id="q2" type="text" name="time1a" class="medium" value="T17:45:00" + dojoType="dijit.form.TimeTextBox" + constraints="{formatLength:'short'}" + required="true" + invalidMessage="" /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q3"> 12 Hour Time </label> + <span class="noticeMessage">TimeTextBox class, + Attributes: {timePattern:'h:mm:ss a'}</span> + </div> + <div class="testExample"> + <input id="q3" type="text" name="time1b" class="medium" value="T17:45:00" + dojoType="dijit.form.TimeTextBox" + constraints="{timePattern:'h:mm:ss a'}" + required="true" + invalidMessage="Invalid time." /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q4"> 24 Hour Time</label> + <span class="noticeMessage">TimeTextBox class, + Attributes: {timePattern:'HH:mm:ss'}</span> + </div> + <div class="testExample"> + <input id="q4" type="text" name="time2" class="medium" value="T17:45:00" + dojoType="dijit.form.TimeTextBox" + constraints="{timePattern:'HH:mm:ss'}" + required="true" + invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours."> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q5">24 Hour Time with 1 Hour TimePicker</label> + <span class="noticeMessage">TimeTextBox class, + Attributes: {timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}</span> + </div> + <div class="testExample"> + <input id="q5" type="text" name="time2" class="medium" value="T17:45:00" + dojoType="dijit.form.TimeTextBox" + constraints="{timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}" + required="true" + invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours."> + </div> + + <script> + function displayData() { + var f = document.getElementById("form1"); + var s = ""; + for (var i = 0; i < f.elements.length; i++) { + var elem = f.elements[i]; + if (elem.name == "button") { continue; } + s += elem.name + ": " + elem.value + "\n"; + } + alert(s); + } + </script> + + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + <input type="submit" name="submit" /> + </div> + + </form> + </body> +</html> diff --git a/includes/js/dijit/tests/form/test_validate.html b/includes/js/dijit/tests/form/test_validate.html new file mode 100644 index 0000000..f6d1cde --- /dev/null +++ b/includes/js/dijit/tests/form/test_validate.html @@ -0,0 +1,428 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Test TextBox Validation Widgets</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + .testExample { + background-color:#fbfbfb; + padding:1em; + margin-bottom:1em; + border:1px solid #bfbfbf; + } + + body .small { + width: 3em; + } + body .medium { + width: 10em; + } + body .long { + width: 20em; + } + body .verylong { + width: 90%; + } + + .noticeMessage { + color:#093669; + font-size:0.95em; + margin-left:0.5em; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.TextBox"); + dojo.require("dijit.form.ValidationTextBox"); + dojo.require("dijit.form.NumberTextBox"); + dojo.require("dijit.form.CurrencyTextBox"); + dojo.require("dojo.currency"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + </head> + + <body> + <h1 class="testTitle">Dijit Validation Widgets</h1> + <!-- to test form submission, you'll need to create an action handler similar to + http://www.utexas.edu/teamweb/cgi-bin/generic.cgi --> + <form id="form1" action="" name="example" method=""> + + <div class="dojoTitlePaneLabel"> + <label for="q01">First Name: </label> + <span class="noticeMessage"> TextBox class, <b>tabIndex=2</b>, Attributes: {trim: true, propercase: true, style: 'width:700px'}, First letter of each word is upper case.</span> + </div> + <div class="testExample"> + <input id="q01" type="text" name="firstname" value="testing testing" style="width: 700px;" tabIndex=2 + dojoType="dijit.form.TextBox" + trim="true" + onfocus="console.log('user onfocus handler')" + onblur="console.log('user onblur handler')" + onChange="dojo.byId('oc1').value=arguments[0]" + propercase="true" /> + <br>onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off"> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q02">Last Name: </label> + <span class="noticeMessage"> TextBox class, Attributes: {trim: true, uppercase: true, class: 'verylong'}, all letters converted to upper case. </span> + </div> + <div class="testExample"> + <input id="q02" type="text" name="lastname" value="testing testing" class="verylong" + dojoType="dijit.form.TextBox" + trim="true" + uppercase="true" /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q03">Age: </label> + <span class="noticeMessage"> NumberTextBox class, <b>tabIndex=1</b>, Attributes: {trim: true}, no initial value specified, tooltipPosition=[above, below]</span> + </div> + <div class="testExample"> + <input id="q03" type="text" name="age" tabIndex=1 + dojoType="dijit.form.NumberTextBox" + promptMessage="(optional) Enter an age between 0 and 120" + maxLength="3" + class="small" + constraints="{places:0,min:0,max:120}" + onChange="console.debug('onChange fired for widget id = ' + this.id + ' with value = ' + arguments[0]);" + tooltipPosition="above, below" + /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q04">Occupation: </label> + <span class="noticeMessage">ValidationTextBox class, + Attributes: {lowercase: true, required: true, class: verylong, style: font-size: 15pt;}. Displays a prompt message if field is missing.</span> + </div> + <div class="testExample"> + <input id="q04" type="text" name="occupation" class="verylong" style="font-size:15pt;" + dojoType="dijit.form.ValidationTextBox" + lowercase="true" + required="true" + promptMessage="Enter an occupation" /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q05">Elevation: </label> + <span class="noticeMessage">IntegerTextBox class, + Attributes: {required: true, min:-20000, max:+20000 }, Enter feet above sea level with a sign.</span> + </div> + <div class="testExample"> + <input id="q05" class="small"/> + onChange:<input id="oc5" size="10" disabled value="not fired yet!" autocomplete="off"> + </div> +<script> + // See if we can make a widget in script and attach it to the DOM ourselves. + dojo.addOnLoad(function(){ + var props = { + name: "elevation", + value: 3000, + constraints: {min:-20000,max:20000,places:0}, + promptMessage: "Enter a value between -20000 and +20000", + required: "true" , + invalidMessage: "Invalid elevation.", + onChange: function(){dojo.byId('oc5').value=arguments[0]}, + "class": "medium" + }; + var w = new dijit.form.NumberTextBox(props, "q05"); + }); +</script> +<!-- + <div class="dojoTitlePaneLabel"> + <label for="attach-here">Population: </label> + <span class="noticeMessage">IntegerTextBox class, + Attributes: {trim: true, required: true, signed: false, separator: ","}. <br><b> This widget was added in script, not markup. </b> </span> + </div> + <div class="testExample" > + <input id="attach-here" type="text" name="population" class="medium" value="1500000"/> + </div> + + <script> + // See if we can make a widget in script and attach it to the DOM ourselves. + dojo.addOnLoad(function(){ + var props = { + name: "population", + value: "1,500,000", + trim: "true", + required: "true", + regExpGen: dojo.regexp.integer, + constraints: {signed:false, separator: ","}, + invalidMessage: "Invalid population. Be sure to use commas." + }; + var w = new dijit.form.ValidationTextBox(props, "attach-here"); + }); + </script> + + <div class="dojoTitlePaneLabel"> + <label for="q06">Real Number: </label> + <span class="noticeMessage">RealNumberTextBox class, + Attributes: {trim: true, required: true}. Enter any sort of real number.</span> + </div> + <div class="testExample"> + <input id="q06" type="text" name="real1" class="medium" value="+0.1234" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.realNumber" + trim="true" + required="true" + invalidMessage="This is not a valid real number." /> + </div> + <div class="dojoTitlePaneLabel"> + <label for="q07">Exponential Notation: </label> + <span class="noticeMessage">RealNumberTextBox class, + Attributes: {exponent: true}. Enter a real number in exponential notation.</span> + </div> + <div class="testExample"> + <input id="q07" type="text" name="real2" class="medium" value="+0.12" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.realNumber" + trim="true" + required="true" + constraints={exponent:true} + invalidMessage="Number must be in exponential notation. Example +5E-28" /> + </div> + --> + + <div class="dojoTitlePaneLabel"> + <label for="q08">Annual Income: </label> + <span class="noticeMessage">CurrencyTextBox class, + Attributes: {fractional: true}. Enter whole and cents. Currency symbol is optional.</span> + </div> + + <div class="testExample"> + <input id="q08" type="text" name="income1" class="medium" value="54775.53" + dojoType="dijit.form.CurrencyTextBox" + required="true" + constraints="{fractional:true}" + currency="USD" + onChange="dojo.byId('oc8').value=arguments[0]" + invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Cents are mandatory." />USD + onChange:<input id="oc8" size="15" disabled value="not fired yet!" autocomplete="off"> + </div> + + <div class="testExample"> + euro currency (local format) fractional part is optional: + <input id="q08eur" type="text" name="income2" + class="medium" value="54775.53" + dojoType="dijit.form.CurrencyTextBox" + required="true" + currency="EUR" + invalidMessage="Invalid amount. Include dollar sign, commas, and cents." />EUR + <button onclick="dijit.byId('q08eur').setAttribute('disabled',true);return false">Disable</button> + <button onclick="dijit.byId('q08eur').setAttribute('disabled',false);return false">Enable</button> + <button onclick="dijit.byId('q08eur').reset();return false">Reset</button> + </div> + + <!-- + It is unusual to override the lang properties on individual + widgets. Usually it should be the user's default or set on + a page basis by the server. This is for testing purposes + --> + <div class="testExample"> + euro currency (fixed lang: de-de) programmatically created, fractional part is optional: <input id="q08eurde" class="medium"/>EUR + </div> + + <script> + // See if we can make a widget in script and attach it + // to the DOM ourselves. + dojo.addOnLoad(function(){ + var example = dojo.currency.format(54775.53, {locale: 'de-de', currency: "EUR"}); + var props = { + name: "income3", + value: 54775.53, + lang: 'de-de', + required: "true", + currency: "EUR", + invalidMessage: "Invalid amount. Example: " + example + }; + var w = new dijit.form.CurrencyTextBox(props, "q08eurde"); + }); + </script> + + <!-- + <div class="dojoTitlePaneLabel"> + <label for="q08a">Annual Income: </label> + <span class="noticeMessage">Old regexp currency textbox, + Attributes: {fractional: true}. Enter dollars and cents.</span> + </div> + <div class="testExample"> + <input id="q08a" type="text" name="income3" class="medium" value="$54,775.53" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.currency" + trim="true" + required="true" + constraints={fractional:true} + invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Example: $12,000.00" /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q09">IPv4 Address: </label> + <span class="noticeMessage">IpAddressTextBox class, + Attributes: {allowIPv6: false, allowHybrid: false}. Also Dotted Hex works, 0x18.0x11.0x9b.0x28</span> + </div> + <div class="testExample"> + <input id="q09" type="text" name="ipv4" class="medium" value="24.17.155.40" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.ipAddress" + trim="true" + required="true" + constraints={allowIPv6:false,allowHybrid:false} + invalidMessage="Invalid IPv4 address."> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q10"> IPv6 Address: </label> + <span class="noticeMessage">IpAddressTextBox class, + Attributes: {allowDottedDecimal: false, allowDottedHex: false}. + Also hybrid works, x:x:x:x:x:x:d.d.d.d</span> + </div> + <div class="testExample"> + <input id="q10" type="text" name="ipv6" class="long" value="0000:0000:0000:0000:0000:0000:0000:0000" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.ipAddress" + trim="true" + uppercase = "true" + required="true" + constraints={allowDottedDecimal:false, allowDottedHex:false, allowDottedOctal:false} + invalidMessage="Invalid IPv6 address, please enter eight groups of four hexadecimal digits. x:x:x:x:x:x:x:x"> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q11"> URL: </label> + <span class="noticeMessage">UrlTextBox class, + Attributes: {required: true, trim: true, scheme: true}. </span> + </div> + + <div class="testExample"> + <input id="q11" type="text" name="url" class="long" value="http://www.xyz.com/a/b/c?x=2#p3" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.url" + trim="true" + required="true" + constraints={scheme:true} + invalidMessage="Invalid URL. Be sure to include the scheme, http://..." /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q12"> Email Address </label> + <span class="noticeMessage">EmailTextBox class, + Attributes: {required: true, trim: true}. </span> + </div> + + <div class="testExample"> + <input id="q12" type="text" name="email" class="long" value="fred&barney@stonehenge.com" + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.emailAddress" + trim="true" + required="true" + invalidMessage="Invalid Email Address." /> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q13"> Email Address List </label> + <span class="noticeMessage">EmailListTextBox class, + Attributes: {required: true, trim: true}. </span> + </div> + + <div class="testExample"> + <input id="q13" type="text" name="email" class="long" value="a@xyz.com; b@xyz.com; c@xyz.com; " + dojoType="dijit.form.ValidationTextBox" + regExpGen="dojo.regexp.emailAddressList" + trim="true" + required="true" + invalidMessage="Invalid Email Address List." /> + </div> + --> + <div class="dojoTitlePaneLabel"> + <label for="q22">Regular Expression </label> + <span class="noticeMessage">RegexpTextBox class, + Attributes: {required: true} </span> + </div> + <div class="testExample"> + <input id="q22" type="text" name="phone" class="medium" value="someTestString" + dojoType="dijit.form.ValidationTextBox" + regExp="[\w]+" + required="true" + invalidMessage="Invalid Non-Space Text."> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="q23"> Password </label> + <span class="noticeMessage">(just a test that type attribute is obeyed) </span> + </div> + <div class="testExample"> + <input id="q23" type="password" name="password" class="medium" + dojoType="dijit.form.TextBox"> + </div> + + <div class="dojoTitlePaneLabel"> + <label for="ticket1651">Trac ticket 1651: </label> + <span class="noticeMessage">value: null should show up as empty</span> + </div> + <div class="testExample"> + <input id="ticket1651" class="medium" value="not null"/> + </div> + + <script> + // See if we can make a widget in script and attach it to the DOM ourselves. + dojo.addOnLoad(function(){ + var props = { + name: "ticket1651", + id: "mname", + value: null + }; + var w = new dijit.form.TextBox(props, "ticket1651"); + }); + </script> + + <div class="dojoTitlePaneLabel"> + <label for="q24">readOnly test</label> + <span class="noticeMessage">a test that readOnly is understood</span> + </div> + <div class="testExample"> + <input id="q24" type="text" name="readOnly" class="medium" readOnly value="cannot type here" + dojoType="dijit.form.TextBox"> + <input type="button" onclick="dijit.byId('q24').setAttribute('readOnly',false);" value="Remove readOnly"> + <input type="button" onclick="dijit.byId('q24').setAttribute('readOnly',true);" value="Set readOnly"> + </div> + + <script> + function displayData() { + var f = document.getElementById("form1"); + var s = ""; + for (var i = 0; i < f.elements.length; i++) { + var elem = f.elements[i]; + if (elem.name == "button") { continue; } + s += elem.name+(elem.name && elem.disabled?' (disabled)':'') + ": " + elem.value + "\n"; + } + alert(s); + } + </script> + + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + <input type="submit" name="submit" /> + </div> + + </form> + <h2>Tooltip positioning</h2> + <p> + These buttons switch the positions searched to try to place the validation error tooltips. + Note that setting tooltip positioning to "above" or "below" is dangerous if + you have a node with a dropdown, but the drop down might overlap the tooltip. + </p> + <button onclick="dijit.Tooltip.defaultPosition=['above', 'below'];">above, below</button> + <button onclick="dijit.Tooltip.defaultPosition=['after', 'before'];">after, before (default)</button> + </body> +</html> diff --git a/includes/js/dijit/tests/i18n/README b/includes/js/dijit/tests/i18n/README new file mode 100644 index 0000000..a6516b6 --- /dev/null +++ b/includes/js/dijit/tests/i18n/README @@ -0,0 +1,4 @@ +Global Verification Tests (GVT) + +In order to run these tests, you will need full locale support in Dojo. Dojo only ships with a small subset by default. +See util/buildscripts/cldr for an ant-based build script. diff --git a/includes/js/dijit/tests/i18n/currency.html b/includes/js/dijit/tests/i18n/currency.html new file mode 100644 index 0000000..62108b2 --- /dev/null +++ b/includes/js/dijit/tests/i18n/currency.html @@ -0,0 +1,210 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Test CurrencyTextBox</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr','ja-jp']"></script> + <script type="text/javascript" src="../../../dojo/currency.js"></script> + <script type="text/javascript" src="../../../dojo/number.js"></script> + <script type="text/javascript"> + dojo.require("dijit.form.NumberTextBox"); + dojo.require("dijit.form.CurrencyTextBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.ValidationTextBox"); + dojo.require("dojo.date.locale"); + dojo.require("dojo.date.stamp"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + dojo.require("doh.runner"); + </script> + <script src="test_i18n.js"></script> + <script type="text/javascript"> + dojo.addOnLoad(function(){ + doh.register("t", getAllTestCases()); + doh.run(); + }); + </script> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + + .title { + background-color:#ddd; + } + + .hint { + background-color:#eee; + } + + .testExample { + background-color:#fbfbfb; + padding:1em; + margin-bottom:1em; + border:1px solid #bfbfbf; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + + td {white-space:nowrap} + </style> + </head> + + <body class="tundra"> + <h1 class="testTitle">Dijit TextBox Globalization Test for Currency</h1> + +<!-- <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2> + <button id="startButton" onclick="startTest()">Start Test</button> --> + <p> + Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "zh-cn", "fr-fr", and "ja-jp" + and currencies CNY, EGP, EUR, JPY. If not, convert these CLDR data and put them there. + </p> + + <script> + (function() { + genFormatTestCases("Currency Format", "dijit.form.CurrencyTextBox", [ + + { attrs: {Currency: "CNY", lang: "zh-cn"}, + desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>", + value: "123456789.46", + expValue: "￥123,456,789.46", + comment: "" + }, + { attrs: {Currency: "CNY", lang: "zh-cn"}, + desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>", + value: "-123456789.46", + expValue: "-￥123,456,789.46", + comment: "" + }, + + { attrs: {Currency: "EUR", lang: "fr-fr"}, + desc: "Locale: <b>fr_FR</b> Currency: <b>EUR</b>", + value: "123456789.46", + expValue: "123 456 789,46 €", + comment: "" + }, + { attrs: {Currency: "EUR", lang: "fr-fr"}, + desc: "Locale: <b>zh_CN</b> Currency: <b>EUR</b>", + value: "-123456789.46", + expValue: "-123 456 789,46 €", + comment: "" + }, + + { attrs: {Currency: "JPY", lang: "ja-jp"}, + desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>", + value: "123456789.46", + expValue: "￥123,456,789", + comment: "" + }, + { attrs: {Currency: "JPY", lang: "ja-jp"}, + desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>", + value: "-123456789.46", + expValue: "-￥123,456,789", + comment: "" + } + ]); + + genValidateTestCases("Currency Validate", "dijit.form.CurrencyTextBox", [ + + { attrs: {Currency: "CNY", lang: "zh-cn"}, + desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>", + value: 123456789.46, + expValue: "￥123,456,789.46", + comment: "" + }, + { attrs: {Currency: "CNY", lang: "zh-cn"}, + desc: "Locale: <b>zh_CN</b> Currency: <b>CNY</b>", + value: -123456789.46, + expValue: "-￥123,456,789.46", + comment: "" + }, + + { attrs: {Currency: "EUR", lang: "fr-fr"}, + desc: "Locale: <b>fr_FR</b> Currency: <b>EUR</b>", + value: 123456789.46, + expValue: "123 456 789,46 €", + comment: "" + }, + { attrs: {Currency: "EUR", lang: "fr-fr"}, + desc: "Locale: <b>zh_CN</b> Currency: <b>EUR</b>", + value: -123456789.46, + expValue: "-123 456 789,46 €", + comment: "" + }, + + { attrs: {Currency: "JPY", lang: "ja-jp"}, + desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>", + value: 123456789, + expValue: "￥123,456,789", + comment: "" + }, + { attrs: {Currency: "JPY", lang: "ja-jp"}, + desc: "Locale: <b>ja_JP</b> Currency: <b>JPY</b>", + value: -123456789, + expValue: "-￥123,456,789", + comment: "" + } + ]); + + dojo.parser.parse(); + + })(); + + </script> + + <h2 class="testTitle">Issues & Comments</h2> + <h3 class="testTitle"><a name="cmt_1">Issue #1<sup style="color:blue">Fixed</sup></a></h3> + <p> + Some browsers like FireFox have a bug on the non-breaking space character (U+00A0, <b>&nbsp;</b> or <b>&#160;</b> or + <b>&#xA0;</b> in HTML). + They always convert the NBSP character to a normal space (U+0020, <b>&#x20;</b> in HTML) automatically in the following circumstances: + </p> + <ul> + <li>Copy text from the page</li> + <li>Use <b>innerHTML</b> to get the content of a certain element</li> + <li>Use <b>value</b> to get an <b>INPUT</b> element's value</li> + </ul> + + <p> + You cannot read a real NBSP character from an <b>INPUT</b> element on these browsers. It causes issues when some formatting data in CLDR + contains an NBSP character. For example, + </p> + <ul> + <li>Many locales like French use an NBSP character as a group separator in numbers</li> + <li>French and Finnish use NBSP characters in their percentage and currency format patterns respectively</li> + </ul> + + <p> + So Dojo may generate formatted data with NBSP characters in it but cannot read NBSP charaters from user's input in some browser. + </p> + + <h3 class="testTitle"><a name="cmt_2">Issue #2<sup style="color:blue">Fixed: the CLDR data generator should be fixed by adding code to convert U+200F to "\u200F" in nls JS files.</sup></a></h3> + <p> + Most Bidi currency symbols contain an LTR-MARK (U+200F) character at the very beginning. + But Firefox ignores it when it is not in any escaping form. This should be a bug of Firefox. + For example, click <a href="javascript:alert(''.indexOf('\u200F'))"><code>alert(''.indexOf('\u+200F'))</code></a> (there is a U+200F in the empty-looking string): + </p> + <ul> + <li>In Firefox, shows "-1" -- no U+200F found</li> + <li>In IE & Opera, shows "0" -- the U+200F is found</li> + </ul> + <p> + But if the U+200F is in some escaping form, Firefox will work as well as other browsers. + Click <a href="javascript:alert('\u200F'.indexOf('\u200F'))"><code>alert('\u200F'.indexOf('\u+200F'))</code></a> to see the same result both in Firefox and IE: + </p> + + + <h3 class="testTitle"><a name="cmt_3">Issue #3<sup style="color:blue">Fixed: added a "localeDigit" to the options</sup></a></h3> + <p> + Strictly speaking, the data conversion must support non-European number characters in some locales like Arabic and Hindi. + For example, ICU formats a number data into Indic number characters by default in the Arabic locale. + However, currently Dojo does not support this feature (Dojo uses the default number conversion of the browser). + </p> + + </body> +</html> diff --git a/includes/js/dijit/tests/i18n/date.html b/includes/js/dijit/tests/i18n/date.html new file mode 100644 index 0000000..b4aa4cd --- /dev/null +++ b/includes/js/dijit/tests/i18n/date.html @@ -0,0 +1,155 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Test DateTextBox</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr','ja-jp','ru-ru','en-us','de-de','es-es','it-it','pt-br','ko-kr','zh-tw']"></script> + <script type="text/javascript" src="../../../dojo/currency.js"></script> + <script type="text/javascript" src="../../../dojo/number.js"></script> + <script type="text/javascript"> + dojo.require("dijit.form.NumberTextBox"); + dojo.require("dijit.form.CurrencyTextBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.ValidationTextBox"); + dojo.require("dojo.date.locale"); + dojo.require("dojo.date.stamp"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + dojo.require("doh.runner"); + </script> + <script src="test_i18n.js"></script> + <script type="text/javascript"> + dojo.addOnLoad(function(){ + doh.register("t", getAllTestCases()); + doh.run(); + }); + </script> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + + .title { + background-color:#ddd; + } + + .hint { + background-color:#eee; + } + + .testExample { + background-color:#fbfbfb; + padding:1em; + margin-bottom:1em; + border:1px solid #bfbfbf; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + + td {white-space:nowrap} + </style> + <script> + function gen4DateFormat(testCases, language, locale, date, short, shortCmt, medium, mediumCmt, long, longCmt, full, fullCmt) { + testCases.push({ + attrs: {constraints: "{formatLength:'short'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Short</b>", + value: date, + expValue: short, + comment: shortCmt + }); + testCases.push({ + attrs: {constraints: "{formatLength:'medium'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Medium</b>", + value: date, + expValue: medium, + comment: mediumCmt + }); + testCases.push({ + attrs: {constraints: "{formatLength:'long'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Long</b>", + value: date, + expValue: long, + comment: longCmt + }); + testCases.push({ + attrs: {constraints: "{formatLength:'full'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Full</b>", + value: date, + expValue: full, + comment: fullCmt + }); + } + </script> + </head> + + <body class="tundra"> + <h1 class="testTitle">Dijit TextBox Globalization Test for Date</h1> + +<!-- <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2> + <button id="startButton" onclick="startTest()">Start Test</button>--> + <p> + Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "zh-cn", "fr-fr", "ja-jp", "ru-ru", "hi-in", "en-us" and "ar-eg". If not, convert these CLDR data and put them there. + </p> + + <script> + (function() { + var testCases = []; + gen4DateFormat(testCases, "ru-ru", "ru_RU", "2005-07-31", + "31.07.05", "", "31.07.2005", "", "31 июля 2005 г.", "Failed in Firefox. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>", "31 июля 2005 г.", "Failed in Firefox. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>"); + gen4DateFormat(testCases, "zh-cn", "zh_CN", "2005-07-31", + "05-7-31", "", "2005-7-31", "", "2005年7月31日", "", "2005年7月31日星期日", ""); + gen4DateFormat(testCases, "en-us", "en_US", "2005-07-31", + "7/31/05", "", "Jul 31, 2005", "", "July 31, 2005", "", "Sunday, July 31, 2005", ""); + gen4DateFormat(testCases, "fr-fr", "fr_FR", "2005-07-31", + "31/07/05", "", "31 juil. 2005", "", "31 juillet 2005", "", "dimanche 31 juillet 2005", ""); + gen4DateFormat(testCases, "ja-jp", "ja_JP", "2005-07-31", + "05/07/31", "", "2005/07/31", "", "2005年7月31日", "", "2005年7月31日日曜日", ""); + gen4DateFormat(testCases, "de-de", "de_DE", "2005-07-31", + "31.07.05", "", "31.07.2005", "", "31. Juli 2005", "", "Sonntag, 31. Juli 2005", ""); + gen4DateFormat(testCases, "es-es", "es_ES", "2005-07-31", + "31/07/05", "", "31/07/2005", "", "31 de julio de 2005", "", "domingo 31 de julio de 2005", ""); + gen4DateFormat(testCases, "pt-br", "pt-BR", "2005-07-31", + "31/07/05", "", "31/07/2005", "", "31 de julho de 2005", "", "domingo, 31 de julho de 2005", ""); + gen4DateFormat(testCases, "it-it", "it-IT", "2005-07-31", + "31/07/05", "", "31/lug/2005", "", "31 luglio 2005", "", "domenica 31 luglio 2005", ""); + gen4DateFormat(testCases, "ko-kr", "ko-KR", "2005-07-31", + "05. 7. 31.", "", "2005. 7. 31.", "", "2005년 7월 31일", "", "2005년 7월 31일 일요일", ""); + gen4DateFormat(testCases, "zh-tw", "zh-TW", "2005-07-31", + "2005/7/31", "", "2005/7/31", "", "2005年7月31日", "", "2005年7月31日星期日", ""); + genFormatTestCases("Date Format", "dijit.form.DateTextBox", testCases); + + testCases = []; + gen4DateFormat(testCases, "ru-ru", "ru_RU", new Date(2005, 6, 31), + "31.07.05", "", "31.07.2005", "", "31 июля 2005 г.", "Failed in Firefox. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>", "31 июля 2005 г.", "Failed in Firefox. <a href='currency.html#cmt_1'>See #1 (currency.html).</a>"); + gen4DateFormat(testCases, "zh-cn", "zh_CN", new Date(2005, 6, 31), + "05-7-31", "", "2005-7-31", "", "2005年7月31日", "", "2005年7月31日星期日", ""); + gen4DateFormat(testCases, "en-us", "en_US", new Date(2005, 6, 31), + "7/31/05", "", "Jul 31, 2005", "", "July 31, 2005", "", "Sunday, July 31, 2005", ""); + gen4DateFormat(testCases, "fr-fr", "fr_FR", new Date(2005, 6, 31), + "31/07/05", "", "31 juil. 2005", "", "31 juillet 2005", "", "dimanche 31 juillet 2005", ""); + gen4DateFormat(testCases, "ja-jp", "ja_JP", new Date(2005, 6, 31), + "05/07/31", "", "2005/07/31", "", "2005年7月31日", "", "2005年7月31日日曜日", ""); + gen4DateFormat(testCases, "de-de", "de_DE", new Date(2005, 6, 31), + "31.07.05", "", "31.07.2005", "", "31. Juli 2005", "", "Sonntag, 31. Juli 2005", ""); + gen4DateFormat(testCases, "es-es", "es_ES", new Date(2005, 6, 31), + "31/07/05", "", "31/07/2005", "", "31 de julio de 2005", "", "domingo 31 de julio de 2005", ""); + gen4DateFormat(testCases, "pt-br", "pt-BR", new Date(2005, 6, 31), + "31/07/05", "", "31/07/2005", "", "31 de julho de 2005", "", "domingo, 31 de julho de 2005", ""); + gen4DateFormat(testCases, "it-it", "it-IT", new Date(2005, 6, 31), + "31/07/05", "", "31/lug/2005", "", "31 luglio 2005", "", "domenica 31 luglio 2005", ""); + gen4DateFormat(testCases, "ko-kr", "ko-KR", new Date(2005, 6, 31), + "05. 7. 31.", "", "2005. 7. 31.", "", "2005년 7월 31일", "", "2005년 7월 31일 일요일", ""); + gen4DateFormat(testCases, "zh-tw", "zh-TW", new Date(2005, 6, 31), + "2005/7/31", "", "2005/7/31", "", "2005年7月31日", "", "2005年7月31日星期日", ""); + genValidateTestCases("Date Validate", "dijit.form.DateTextBox", testCases); + + dojo.parser.parse(); + })(); + </script> + </body> +</html> diff --git a/includes/js/dijit/tests/i18n/digit.html b/includes/js/dijit/tests/i18n/digit.html new file mode 100644 index 0000000..dc3ed7a --- /dev/null +++ b/includes/js/dijit/tests/i18n/digit.html @@ -0,0 +1,294 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Test Hindi/Arabic numerals</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, extraLocale: ['ar-eg','hi-in']"></script> + <script type="text/javascript" src="../../../dojo/currency.js"></script> + <script type="text/javascript" src="../../../dojo/number.js"></script> + <script type="text/javascript"> + dojo.require("dijit.form.NumberTextBox"); + dojo.require("dijit.form.CurrencyTextBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.ValidationTextBox"); + dojo.require("dojo.date.locale"); + dojo.require("dojo.date.stamp"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + dojo.require("doh.runner"); + </script> + <script src="test_i18n.js"></script> + <script type="text/javascript"> + dojo.addOnLoad(function(){ + doh.register("t", getAllTestCases()); + doh.run(); + }); + </script> + + <script> + function gen4DateFormat(testCases, language, locale, date, short, shortCmt, medium, mediumCmt, long, longCmt, full, fullCmt) { + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'short', localeDigit: true}" : "{formatLength:'short'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Short</b>", + value: date, + expValue: short, + comment: shortCmt + }); + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'medium', localeDigit: true}" : "{formatLength:'medium'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Medium</b>", + value: date, + expValue: medium, + comment: mediumCmt + }); + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'long', localeDigit: true}" : "{formatLength:'long'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Long</b>", + value: date, + expValue: long, + comment: longCmt + }); + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'full', localeDigit: true}" : "{formatLength:'full'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Full</b>", + value: date, + expValue: full, + comment: fullCmt + }); + } + </script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + + .title { + background-color:#ddd; + } + + .hint { + background-color:#eee; + } + + .testExample { + background-color:#fbfbfb; + padding:1em; + margin-bottom:1em; + border:1px solid #bfbfbf; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + + td {white-space:nowrap} + </style> + </head> + + <body class="tundra"> + <h1 class="testTitle">Dijit TextBox Globalization Test for Number</h1> + +<!-- <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2> + <button id="startButton" onclick="startTest()">Start Test</button>--> + <p> + Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "ar-eg" and "hi-in". If not, convert these CLDR data and put them there. + </p> + + <script> + (function() { + + genFormatTestCases("Number Format", "dijit.form.NumberTextBox", [ + { attrs: {lang: "ar-eg"}, + desc: "Locale: ar_EG", + value: "12345.067", + expValue: "12٬345٫067", + comment: "" + }, + { attrs: {lang: "ar-eg"}, + desc: "Locale: ar_EG", + value: "-12345.067", + expValue: "12٬345٫067-", + comment: "" + }, + + { attrs: {lang: "ar-eg", constraints: "{localeDigit: true}"}, + desc: "Locale: ar_EG", + value: "12345.067", + expValue: "١٢\u066C٣٤٥\u066B٠٦٧", + comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>" + }, + { attrs: {lang: "ar-eg", constraints: "{localeDigit: true}"}, + desc: "Locale: ar_EG", + value: "-12345.067", + expValue: "١٢\u066C٣٤٥\u066B٠٦٧-", + comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>" + }, + + { attrs: {lang: "hi-in", constraints: "{localeDigit: true}"}, + desc: "Locale: hi_IN", + value: "123456789.068", + expValue: "१२,३४,५६,७८९.०६८", + comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>" + }, + { attrs: {lang: "hi-in", constraints: "{localeDigit: true}"}, + desc: "Locale: hi_IN", + value: "-123456789.068", + expValue: "-१२,३४,५६,७८९.०६८", + comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>" + } + ]); + + genValidateTestCases("Number Validate", "dijit.form.NumberTextBox", [ + + { attrs: {lang: "ar-eg"}, + desc: "Locale: ar_EG", + value: 12345.067, + expValue: "12٬345٫067", + comment: "" + }, + { attrs: {lang: "ar-eg"}, + desc: "Locale: ar_EG", + value: -12345.067, + expValue: "12٬345٫067-", + comment: "" + }, + + { attrs: {lang: "ar-eg", constraints: "{localeDigit: true}"}, + desc: "Locale: ar_EG", + value: 12345.067, + expValue: "١٢\u066C٣٤٥\u066B٠٦٧", + comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>" + }, + { attrs: {lang: "ar-eg", constraints: "{localeDigit: true}"}, + desc: "Locale: ar_EG", + value: -12345.067, + expValue: "١٢\u066C٣٤٥\u066B٠٦٧-", + comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>" + }, + + { attrs: {lang: "hi-in", constraints: "{localeDigit: true}"}, + desc: "Locale: hi_IN", + value: 123456789.068, + expValue: "१२,३४,५६,७८९.०६८", + comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>" + }, + { attrs: {lang: "hi-in", constraints: "{localeDigit: true}"}, + desc: "Locale: hi_IN", + value: -123456789.068, + expValue: "-१२,३४,५६,७८९.०६८", + comment: "<a href='currency.html#cmt_2'>See #2 (currency.html).</a>" + } + ]); + + genFormatTestCases("Currency Format", "dijit.form.CurrencyTextBox", [ + + { attrs: {Currency: "EGP", lang: "ar-eg"}, + desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>", + value: "123456789.46", + expValue: "ج.م.\u200F 123٬456٬789٫46", + comment: "" + }, + { attrs: {Currency: "EGP", lang: "ar-eg"}, + desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>", + value: "-123456789.46", + expValue: "ج.م.\u200F 123٬456٬789٫46-", + comment: "" + }, + + { attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"}, + desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>", + value: "123456789.46", + expValue: "ج.م.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦", + comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>" + }, + { attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"}, + desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>", + value: "-123456789.46", + expValue: "ج.م.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦-", + comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>" + } + ]); + + genValidateTestCases("Currency Validate", "dijit.form.CurrencyTextBox", [ + + { attrs: {Currency: "EGP", lang: "ar-eg"}, + desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>", + value: 123456789.46, + expValue: "ج.م.\u200F 123٬456٬789٫46", + comment: "Failed in Firefox. <a href='#cmt_2'>See #2.</a>" + }, + { attrs: {Currency: "EGP", lang: "ar-eg"}, + desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>", + value: -123456789.46, + expValue: "ج.م.\u200F 123٬456٬789٫46-", + comment: "Failed in Firefox. <a href='#cmt_2'>See #2.</a>" + }, + + { attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"}, + desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>", + value: 123456789.46, + expValue: "ج.م.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦", + comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>" + }, + { attrs: {Currency: "EGP", lang: "ar-eg", constraints: "{localeDigit: true}"}, + desc: "Locale: <b>ar_EG</b> Currency: <b>EGP</b>", + value: -123456789.46, + expValue: "ج.م.\u200F ١٢٣\u066C٤٥٦\u066C٧٨٩\u066B٤٦-", + comment: "<a href='#cmt_3'>See #3.</a> Failed in Firefox. <a href='#cmt_2'>See #2.</a>" + } + ]); + + var testCases = []; + gen4DateFormat(testCases, "ar-eg", "ar_EG", "2005-07-31", + "31/7/2005", "", "31/07/2005", "", "31 يوليو, 2005", "", "الأحد, 31 يوليو, 2005", ""); + gen4DateFormat(testCases, "hi-in", "hi_IN", "2005-07-31", + "२००५-०७-३१", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "२००५ जुलाई ३१", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "२००५ जुलाई ३१", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "रविवार, २००५ जुलाई ३१", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>"); + genFormatTestCases("Date Format", "dijit.form.DateTextBox", testCases); + + testCases = []; + gen4DateFormat(testCases, "ar-eg", "ar_EG", new Date(2005, 6, 31), + "31/7/2005", "", "31/07/2005", "", "31 يوليو, 2005", "", "الأحد, 31 يوليو, 2005", ""); + gen4DateFormat(testCases, "hi-in", "hi_IN", new Date(2005, 6, 31), + "२००५-०७-३१", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "२००५ जुलाई ३१", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "२००५ जुलाई ३१", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>", "रविवार, २००५ जुलाई ३१", "<a href='currency.html#cmt_3'>See #3 (currency.html).</a>"); + genValidateTestCases("Date Validate", "dijit.form.DateTextBox", testCases); + + dojo.parser.parse(); + + })(); + + </script> + </body> +</html> + +<!-- + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'short', localeDigit: true}" : "{formatLength:'short'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Short</b>", + value: date, + expValue: short, + comment: shortCmt + }); + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'medium', localeDigit: true}" : "{formatLength:'medium'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Medium</b>", + value: date, + expValue: medium, + comment: mediumCmt + }); + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'long', localeDigit: true}" : "{formatLength:'long'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Long</b>", + value: date, + expValue: long, + comment: longCmt + }); + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'full', localeDigit: true}" : "{formatLength:'full'}", lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Full</b>", + value: date, + expValue: full, + comment: fullCmt +--> + diff --git a/includes/js/dijit/tests/i18n/module.js b/includes/js/dijit/tests/i18n/module.js new file mode 100644 index 0000000..b484737 --- /dev/null +++ b/includes/js/dijit/tests/i18n/module.js @@ -0,0 +1,18 @@ +if(!dojo._hasResource["dijit.tests.i18n.module"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.i18n.module"] = true; +dojo.provide("dijit.tests.i18n.module"); + +try{ + if(dojo.isBrowser){ + doh.registerUrl("dijit.tests.i18n.currency", dojo.moduleUrl("dijit", "tests/i18n/currency.html")); + doh.registerUrl("dijit.tests.i18n.date", dojo.moduleUrl("dijit", "tests/i18n/date.html")); + doh.registerUrl("dijit.tests.i18n.number", dojo.moduleUrl("dijit", "tests/i18n/number.html")); + doh.registerUrl("dijit.tests.i18n.textbox", dojo.moduleUrl("dijit", "tests/i18n/textbox.html")); + doh.registerUrl("dijit.tests.i18n.time", dojo.moduleUrl("dijit", "tests/i18n/time.html")); + doh.registerUrl("dijit.tests.i18n.digit", dojo.moduleUrl("dijit", "tests/i18n/digit.html")); + } +}catch(e){ + doh.debug(e); +} + +} diff --git a/includes/js/dijit/tests/i18n/number.html b/includes/js/dijit/tests/i18n/number.html new file mode 100644 index 0000000..0a1b717 --- /dev/null +++ b/includes/js/dijit/tests/i18n/number.html @@ -0,0 +1,136 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Test NumberTextBox</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr']"></script> + <script type="text/javascript" src="../../../dojo/currency.js"></script> + <script type="text/javascript" src="../../../dojo/number.js"></script> + <script type="text/javascript"> + dojo.require("dijit.form.NumberTextBox"); + dojo.require("dijit.form.CurrencyTextBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.ValidationTextBox"); + dojo.require("dojo.date.locale"); + dojo.require("dojo.date.stamp"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + dojo.require("doh.runner"); + </script> + <script src="test_i18n.js"></script> + <script type="text/javascript"> + dojo.addOnLoad(function(){ + doh.register("t", getAllTestCases()); + doh.run(); + }); + </script> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + + .title { + background-color:#ddd; + } + + .hint { + background-color:#eee; + } + + .testExample { + background-color:#fbfbfb; + padding:1em; + margin-bottom:1em; + border:1px solid #bfbfbf; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + + td {white-space:nowrap} + </style> + </head> + + <body class="tundra"> + <h1 class="testTitle">Dijit TextBox Globalization Test for Number</h1> + +<!-- <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2> + <button id="startButton" onclick="startTest()">Start Test</button>--> + <p> + Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "zh-cn", "fr-fr". If not, convert these CLDR data and put them there. + </p> + + <script> + (function() { + + genFormatTestCases("Number Format", "dijit.form.NumberTextBox", [ + + { attrs: {lang: "zh-cn"}, + desc: "Locale: zh_CN", + value: "12345.067", + expValue: "12,345.067", + comment: "" + }, + { attrs: {lang: "zh-cn"}, + desc: "Locale: zh_CN", + value: "-12345.067", + expValue: "-12,345.067", + comment: "" + }, + + { attrs: {lang: "fr-fr"}, + desc: "Locale: fr_FR", + value: "12345.067", + expValue: "12 345,067", + comment: "" + }, + { attrs: {lang: "fr-fr"}, + desc: "Locale: zh_CN", + value: "-12345.067", + expValue: "-12 345,067", + comment: "" + } + ]); + + genValidateTestCases("Number Validate", "dijit.form.NumberTextBox", [ + + { attrs: {lang: "zh-cn"}, + desc: "Locale: zh_CN", + value: 12345.067, + expValue: "12,345.067", + comment: "" + }, + { attrs: {lang: "zh-cn"}, + desc: "Locale: zh_CN", + value: -12345.067, + expValue: "-12,345.067", + comment: "" + }, + + { attrs: {lang: "fr-fr"}, + desc: "Locale: fr_FR", + value: 12345.067, + expValue: "12 345,067", + comment: "" + }, + { attrs: {lang: "fr-fr"}, + desc: "Locale: zh_CN", + value: -12345.067, + expValue: "-12 345,067", + comment: "" + } + ]); + + dojo.parser.parse(); + + })(); + + </script> + </body> +</html> + + diff --git a/includes/js/dijit/tests/i18n/test_i18n.js b/includes/js/dijit/tests/i18n/test_i18n.js new file mode 100644 index 0000000..bc44e63 --- /dev/null +++ b/includes/js/dijit/tests/i18n/test_i18n.js @@ -0,0 +1,206 @@ +var validateValues = []; +var formatWidgetCount = 0; +var validateWidgetCount = 0; + +function getElementsById(id){ + var result = []; + + if(!id || typeof(id) != "string"){ + return result; + } + + var ae = document.getElementsByTagName(dojo.byId(id).tagName); + for(var i = 0; i < ae.length; i++){ + if(ae[i].id == id){ + result.push(ae[i]); + } + } + return result; +} + +function getString(n){ + return n && n.toString(); +} + +function startTest(t){ + startTestFormat(t); + startTestValidate(t); +} + +function escapeEx(s){ + var result = ""; + for(var i = 0; i < s.length; i++){ + var c = s.charAt(i); + switch (c){ + case '"': + result += '\\"'; + break; + case "'": + result += "\\'"; + break; + default: + result += escape(c); + break; + } + } + return result; +} + +function getAllTestCases(){ + var allTestCases = []; + for(var i = 0; i < formatWidgetCount; i++){ + allTestCases.push({ + name: "format-" + i, + runTest: new Function("t", "startTestFormat(" + i + ", t)") + }); + } + for(var i = 0; i < validateWidgetCount; i++){ + allTestCases.push({ + name: "validate-" + i, + runTest: new Function("t", "startTestValidate(" + i + ", t)") + }); + } + return allTestCases; +} + +function startTestFormat(i, t){ + var test_node = dojo.doc.getElementById("test_display_" + i); + var exp = dojo.doc.getElementById("test_display_expected_" + i).value; + var res_node = dojo.doc.getElementById("test_display_result_" + i); + res_node.innerHTML = test_node.value; + res_node.style.backgroundColor = (test_node.value == exp) ? "#AFA" : "#FAA"; + res_node.innerHTML += " <a style='font-size:0.8em' href='javascript:alert(\"Expected: " + escapeEx(exp) + "\\n Result: " + escapeEx(test_node.value) + "\")'>Compare (Escaped)</a>"; + t.is(exp, test_node.value); +} + +function startTestValidate(i, t){ + /* + * The dijit.byNode has an issue: cannot handle same id. + */ + var test_node = dojo.doc.getElementById("test_validate_" + i); + var inp_node = dojo.doc.getElementById("test_validate_input_" + i); + var exp = dojo.doc.getElementById("test_validate_expected_" + i).innerHTML; + var res_node = dojo.doc.getElementById("test_validate_result_" + i); + var val_node = dojo.doc.getElementById("test_display_value_" + i); + + test_node.value = inp_node.value; + /* + * The dijit.byNode has an issue. + */ + var widget = null; + var node = test_node; + while ((widget = dijit.byNode(node)) == null){ + node = node.parentNode; + if(!node){ + break; + } + } + + if(widget){ + widget.focus(); + + var expected = validateValues[i]; + var result = widget.getValue(); + if(validateValues[i].processValue){ + expected = validateValues[i].processValue(expected); + result = validateValues[i].processValue(result); + } + var parseCorrect = getString(expected) == getString(result); + val_node.style.backgroundColor = parseCorrect ? "#AFA" : "#FAA"; + val_node.innerHTML = getString(result) + (parseCorrect ? "" : "<br>Expected: " + getString(expected)); + + res_node.innerHTML = widget.isValid && !widget.isValid() ? "Wrong" : "Correct"; + res_node.style.backgroundColor = res_node.innerHTML == exp ? "#AFA" : "#FAA"; + + t.is(getString(expected), getString(result)); + } +} + +function genFormatTestCase(desc, dojoType, dojoAttrs, value, expValue, comment){ + dojo.doc.write("<tr>"); + dojo.doc.write("<td>" + desc + "</td>"); + dojo.doc.write("<td>"); + dojo.doc.write("<input id='test_display_" + formatWidgetCount + "' type='text' value='" + value + "' "); + dojo.doc.write("dojoType='" + dojoType + "' "); + for(var attr in dojoAttrs){ + dojo.doc.write(attr + "=\"" + dojoAttrs[attr] + "\" "); + } + dojo.doc.write("/>"); + dojo.doc.write("</td>"); + dojo.doc.write("<td><input id='test_display_expected_" + formatWidgetCount + "' value='" + expValue + "'></td>"); + dojo.doc.write("<td id='test_display_result_" + formatWidgetCount + "'></td>"); + dojo.doc.write("<td style='white-space:normal'>" + comment + "</td>"); + dojo.doc.write("</tr>"); + formatWidgetCount++; +} +/* +[ + {attrs: {currency: "CNY", lang: "zh-cn"}, desc: "", value:"-123456789.46", expValue: "", comment: ""}, + ... +] +*/ +function genFormatTestCases(title, dojoType, testCases){ + dojo.doc.write("<h2 class=testTitle>" + title + "</h2>"); + dojo.doc.write("<table border=1>"); + dojo.doc.write("<tr>"); + dojo.doc.write("<td class=title><b>Test Description</b></td>"); + dojo.doc.write("<td class=title><b>Test</b></td>"); + dojo.doc.write("<td class=title><b>Expected</b></td>"); + dojo.doc.write("<td class=title><b>Result</b></td>"); + dojo.doc.write("<td class=title><b>Comment</b></td>"); + dojo.doc.write("</tr>"); + + for(var i = 0; i < testCases.length; i++){ + var testCase = testCases[i]; + genFormatTestCase(testCase.desc, dojoType, testCase.attrs, testCase.value, testCase.expValue, testCase.comment); + } + + dojo.doc.write("</table>"); +} + +function genValidateTestCase(desc, dojoType, dojoAttrs, input, value, comment, isWrong){ + dojo.doc.write("<tr>"); + dojo.doc.write("<td>" + desc + "</td>"); + dojo.doc.write("<td>"); + dojo.doc.write("<input id='test_validate_" + validateWidgetCount + "' type='text' "); + dojo.doc.write("dojoType='" + dojoType + "' "); + for(var attr in dojoAttrs){ + dojo.doc.write(attr + "=\"" + dojoAttrs[attr] + "\" "); + } + dojo.doc.write("/>"); + dojo.doc.write("</td>"); + dojo.doc.write("<td><input id='test_validate_input_" + validateWidgetCount + "' value='" + input + "'></td>"); + dojo.doc.write("<td id='test_display_value_" + validateWidgetCount + "'></td>"); + dojo.doc.write("<td id='test_validate_expected_" + validateWidgetCount + "'>" + (isWrong ? "Wrong" : "Correct") + "</td>"); + dojo.doc.write("<td id='test_validate_result_" + validateWidgetCount + "'></td>"); + dojo.doc.write("<td style='white-space:normal'>" + comment + "</td>"); + dojo.doc.write("</tr>"); + validateValues.push(value); + validateWidgetCount++; +} +/* +[ + {attrs: {currency: "CNY", lang: "zh-cn"}, desc: "", value:false, expValue: "-123456789.46", comment: ""}, + ... +] +*/ +function genValidateTestCases(title, dojoType, testCases){ + dojo.doc.write("<h2 class=testTitle>" + title + "</h2>"); + dojo.doc.write("<table border=1>"); + dojo.doc.write("<tr>"); + dojo.doc.write("<td class=title><b>Test Description</b></td>"); + dojo.doc.write("<td class=title><b>Test</b></td>"); + dojo.doc.write("<td class=title><b>Input</b></td>"); + dojo.doc.write("<td class=title><b>Parsed Value</b></td>"); + dojo.doc.write("<td class=title><b>Expected</b></td>"); + dojo.doc.write("<td class=title><b>Result</b></td>"); + dojo.doc.write("<td class=title><b>Comment</b></td>"); + dojo.doc.write("</tr>"); + + for(var i = 0; i < testCases.length; i++){ + var testCase = testCases[i]; + genValidateTestCase(testCase.desc, dojoType, testCase.attrs, testCase.expValue, testCase.value, testCase.comment, testCase.isWrong); + } + + dojo.doc.write("</table>"); +} diff --git a/includes/js/dijit/tests/i18n/textbox.html b/includes/js/dijit/tests/i18n/textbox.html new file mode 100644 index 0000000..573496e --- /dev/null +++ b/includes/js/dijit/tests/i18n/textbox.html @@ -0,0 +1,173 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Test TextBox</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true"></script> + <script type="text/javascript" src="../../../dojo/currency.js"></script> + <script type="text/javascript" src="../../../dojo/number.js"></script> + <script type="text/javascript"> + dojo.require("dijit.form.NumberTextBox"); + dojo.require("dijit.form.CurrencyTextBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.ValidationTextBox"); + dojo.require("dojo.date.locale"); + dojo.require("dojo.date.stamp"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + dojo.require("doh.runner"); + </script> + <script src="test_i18n.js"></script> + <script type="text/javascript"> + dojo.addOnLoad(function(){ + doh.register("t", getAllTestCases()); + doh.run(); + }); + </script> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + + .title { + background-color:#ddd; + } + + .hint { + background-color:#eee; + } + + .testExample { + background-color:#fbfbfb; + padding:1em; + margin-bottom:1em; + border:1px solid #bfbfbf; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + + td {white-space:nowrap} + </style> + </head> + + <body class="tundra"> + <h1 class="testTitle">Dijit TextBox Globalization Test</h1> + +<!-- <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2> + <button id="startButton" onclick="startTest()">Start Test</button>--> + + <script> + (function() { + genFormatTestCases("Natural Language Casing Mapping", "dijit.form.TextBox", [ + + { attrs: {uppercase: "true"}, + desc: "Upper casing: Basic Latin", + value: "abcdefghijklmnopqrstuvwxyz", + expValue: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", + comment: "" + }, + + { attrs: {uppercase: "true"}, + desc: "Upper casing: Latin with accents", + value: "àáâãäåæçèéêëìíîïðñòóôõö", + expValue: "ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ", + comment: "" + }, + + { attrs: {uppercase: "true"}, + desc: "Upper casing: Turkish", + value: "ıi", + expValue: "Iİ", + comment: "<a href='#cmt_1'>See #1.</a>" + }, + + { attrs: {uppercase: "true"}, + desc: "Upper casing: Russian", + value: "абвгдежз", + expValue: "АБВГДЕЖЗ", + comment: "" + }, + + { attrs: {uppercase: "true"}, + desc: "Upper casing: German", + value: "ß", + expValue: "SS", + comment: "<a href='#cmt_1'>See #1.</a>" + }, + + { attrs: {lowercase: "true"}, + desc: "Lower casing: Turkish", + value: "Iİ", + expValue: "ıi", + comment: "<a href='#cmt_1'>See #1.</a>" + }, + + { attrs: {propercase: "true"}, + desc: "Title/Proper casing: Latin", + value: "\u01F1abc", + expValue: "\u01F2abc", + comment: "<a href='#cmt_1'>See #1.</a>" + } + ]); + + genFormatTestCases("White-space Detecting", "dijit.form.TextBox", [ + + { attrs: {trim: "true"}, + desc: "Normal space & tab", + value: " abc\t\t\t", + expValue: "abc", + comment: "" + }, + + { attrs: {trim: "true"}, + desc: "NO-BREAK SPACE", + value: "\u00A0abc\u00A0", + expValue: "abc", + comment: "Failed in IE. <a href='#cmt_2'>See #2.</a>" + }, + + { attrs: {trim: "true"}, + desc: "EN QUAD", + value: "\u2000abc\u2000", + expValue: "abc", + comment: "Failed in IE. <a href='#cmt_2'>See #2.</a>" + }, + + { attrs: {trim: "true"}, + desc: "IDEOGRAPHIC SPACE", + value: "\u3000abc\u3000", + expValue: "abc", + comment: "Failed in IE. <a href='#cmt_2'>See #2.</a>" + } + + + ]); + + dojo.parser.parse(); + + })(); + </script> + + <h2 class="testTitle">Issues & Comments </h2> + <a name="cmt_1"><h3 class="testTitle">Issue #1 <sup style="color:red">Not fixed. Avoid using this function of TextBox.</sup></h3></a> + <p> + Strictly speaking, all casing manipulation must use ICU case mapping rules (routine). However, the default JavaScript routines used by Dojo + do not support ICU case mapping rules in all browsers. + </p> + + <a name="cmt_2"><h3 class="testTitle">Issue #2 <sup style="color:red">Not fixed. Avoid using this function of TextBox.</sup></h3></a> + <p> + Trimming must get rid of all Unicode characters with the white space property. However, the default JavaScript routines used by Dojo + do not support get character properties in some browsers like IE. Other browsers like Firefox might support trimming more white space + characters. + </p> + + </body> +</html> + + diff --git a/includes/js/dijit/tests/i18n/time.html b/includes/js/dijit/tests/i18n/time.html new file mode 100644 index 0000000..0a972b9 --- /dev/null +++ b/includes/js/dijit/tests/i18n/time.html @@ -0,0 +1,207 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Test TextBox for Time</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr','ja-jp','ar-eg','ru-ru','hi-in','en-us']"></script> + <script type="text/javascript" src="../../../dojo/currency.js"></script> + <script type="text/javascript" src="../../../dojo/number.js"></script> + <script type="text/javascript"> + dojo.require("dijit.form.ValidationTextBox"); + dojo.require("dojo.date.locale"); + dojo.require("dojo.date.stamp"); + dojo.require("dojo.date"); + dojo.require("dojo.string"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + dojo.require("doh.runner"); + </script> + <script src="test_i18n.js"></script> + <script type="text/javascript"> + dojo.addOnLoad(function(){ + doh.register("t", getAllTestCases()); + doh.run(); + }); + </script> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + + .title { + background-color:#ddd; + } + + .hint { + background-color:#eee; + } + + .testExample { + background-color:#fbfbfb; + padding:1em; + margin-bottom:1em; + border:1px solid #bfbfbf; + } + + .dojoTitlePaneLabel label { + font-weight:bold; + } + + td {white-space:nowrap} + </style> + <script> + dojo.declare( + "dijit.form.TimeTextBox", + dijit.form.ValidationTextBox, + { + regExpGen: dojo.date.locale.regexp, + format: dojo.date.locale.format, + parse: dojo.date.locale.parse, + value: new Date() + } + ); + + var tz_s = dojo.date.getTimezoneName(new Date()); + if (!tz_s) { + var offset = new Date().getTimezoneOffset(); + var tz = [ + (offset <= 0 ? "+" : "-"), + dojo.string.pad(Math.floor(Math.abs(offset) / 60), 2), + dojo.string.pad(Math.abs(offset) % 60, 2) + ]; + tz.splice(0, 0, "GMT"); + tz.splice(3, 0, ":"); + tz_s = tz.join(""); + } + + function gen4DateFormat(testCases, language, locale, date, short, shortCmt, medium, mediumCmt, long, longCmt, full, fullCmt) { + var tz_l = language.indexOf("hi") == 0 && dojo.number.normalizeDigitChars ? + dojo.number.normalizeDigitChars(tz_s, language) : tz_s; + + short = short.replace(/UTC/, tz_l); + medium = medium.replace(/UTC/, tz_l); + long = long.replace(/UTC/g, tz_l); + full = full.replace(/UTC/, tz_l); + + var shortDate = null; + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'short', selector:'time', localeDigit:true}" : "{formatLength:'short', selector:'time'}", + lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Short</b>", + value: typeof(date) == "string" ? date : shortDate = new Date(date.getYear(), date.getMonth(), date.getDay() - 5, date.getHours(), date.getMinutes()), + expValue: short, + comment: shortCmt + }); + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'medium', selector:'time', localeDigit:true}" : "{formatLength:'medium', selector:'time'}", + lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Medium</b>", + value: date, + expValue: medium, + comment: mediumCmt + }); + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'long', selector:'time', localeDigit:true}" : "{formatLength:'long', selector:'time'}", + lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Long</b>", + value: date, + expValue: long, + comment: longCmt + }); + testCases.push({ + attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'full', selector:'time', localeDigit:true}" : "{formatLength:'full', selector:'time'}", + lang: language}, + desc: "Locale: <b>" + locale + "</b> Format: <b>Full</b>", + //value: typeof(date) == "string" || language.indexOf("fr") ? date : shortDate, + value: date, + expValue: full, + comment: fullCmt + }); + + date.processValue = function (value) { + return value ? new Date(1970, 0, 1, value.getHours(), value.getMinutes(), value.getSeconds()) : value; + }; + if (shortDate) { + shortDate.processValue = date.processValue; + } + } + </script> + </head> + + <body class="tundra"> + <h1 class="testTitle">Dijit TextBox Globalization Test for Time</h1> + + <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2> + <button id="startButton" onclick="startTest()">Start Test</button> + <p> + Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "zh-cn", "fr-fr", "ja-jp", "ru-ru", "hi-in", "en-us" and "ar-eg". If not, convert these CLDR data and put them there. + </p> + + <script> + (function() { + var testCases = []; + gen4DateFormat(testCases, "ru-ru", "ru_RU", "1970-01-01T15:25:35", + "15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "zh-cn", "zh_CN", "1970-01-01T15:25:35", + "下午3:25", "", "下午03:25:35", "", "下午03时25分35秒", "", "下午03时25分35秒 UTC", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "en-us", "en_US", "1970-01-01T15:25:35", + "3:25 PM", "", "3:25:35 PM", "", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "fr-fr", "fr_FR", "1970-01-01T15:25:35", + "15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "ja-jp", "ja_JP", "1970-01-01T15:25:35", + "15:25", "", "15:25:35", "", "15:25:35:UTC", "<a href='#cmt_1'>See #1.</a>", "15時25分35秒UTC", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "ar-eg", "ar_EG", "1970-01-01T15:25:35", + "3:25 \u0645", "", "3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "hi-in", "hi_IN", "1970-01-01T15:25:35", + "१५:२५", "<a href='#cmt_2'>See #2.</a>", "१५:२५:३५", "<a href='#cmt_2'>See #2.</a>", "१५:२५:३५ UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>", "१५:२५:३५ UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>"); + genFormatTestCases("Time Format", "dijit.form.TimeTextBox", testCases); + + testCases = []; + gen4DateFormat(testCases, "ru-ru", "ru_RU", new Date(1970, 0, 1, 15, 25, 35), + "15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "zh-cn", "zh_CN", new Date(1970, 0, 1, 15, 25, 35), + "下午3:25", "<a href='#cmt_3'>See #3.</a>", "下午03:25:35", "<a href='#cmt_3'>See #3.</a>", "下午03时25分35秒", "<a href='#cmt_3'>See #3.</a>", "下午03时25分35秒 UTC", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "en-us", "en_US", new Date(1970, 0, 1, 15, 25, 35), + "3:25 PM", "", "3:25:35 PM", "", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "fr-fr", "fr_FR", new Date(1970, 0, 1, 15, 25, 35), + "15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "ja-jp", "ja_JP", new Date(1970, 0, 1, 15, 25, 35), + "15:25", "", "15:25:35", "", "15:25:35:UTC", "<a href='#cmt_1'>See #1.</a>", "15時25分35秒UTC", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "ar-eg", "ar_EG", new Date(1970, 0, 1, 15, 25, 35), + "3:25 \u0645", "", "3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "<a href='#cmt_1'>See #1.</a>"); + gen4DateFormat(testCases, "hi-in", "hi_IN", new Date(1970, 0, 1, 15, 25, 35), + "१५:२५", "<a href='#cmt_2'>See #2.</a>", "१५:२५:३५", "<a href='#cmt_2'>See #2.</a>", "१५:२५:३५ UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>", "१५:२५:३५ UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>"); + genValidateTestCases("Time Validate", "dijit.form.TimeTextBox", testCases); + + dojo.parser.parse(); + })(); + </script> + + <h2 class="testTitle">Issues & Comments</h2> + <h3 class="testTitle"><a name="cmt_1">Issue #1 <sup style="color:blue">Fixed</sup></a></h3> + <p> + Currently Dojo do not support parsing for most "long" and "full" time format which have a timezone mark in it. + </p> + + <h3 class="testTitle"><a name="cmt_2">Issue #2 <sup style="color:blue">Fixed: added a "localeDigit" to the options</sup></a></h3> + <p> + Strictly speaking, the data conversion must support non-European number characters in some locales like Arabic and Hindi. + For example, ICU formats a number data into Indic number characters by default in the Arabic locale. + However, currently Dojo does not support this feature (Dojo uses the default number conversion of the browser). + </p> + + <h3 class="testTitle"><a name="cmt_3">Issue #3 <sup style="color:blue">Fixed</sup></a></h3> + <p> + This defect only occurs on the "zh-cn" locale. Dojo accepts "下午"(pm) in the textbox, but it automatically changes it to + "上午"(am) after the focus changed. The date value of the textbox is also changed. + </p> + <p> + The root cause of this issue is that the parser method's code assumes am/pm symbol always appears after the hour value. + But this is not true, for example, the pattern for "zh-cn" puts am/pm field before all the other fields. + </p> + </body> +</html> + diff --git a/includes/js/dijit/tests/images/arrowSmall.gif b/includes/js/dijit/tests/images/arrowSmall.gif Binary files differnew file mode 100644 index 0000000..8459ffa --- /dev/null +++ b/includes/js/dijit/tests/images/arrowSmall.gif diff --git a/includes/js/dijit/tests/images/copy.gif b/includes/js/dijit/tests/images/copy.gif Binary files differnew file mode 100644 index 0000000..4df29cc --- /dev/null +++ b/includes/js/dijit/tests/images/copy.gif diff --git a/includes/js/dijit/tests/images/cut.gif b/includes/js/dijit/tests/images/cut.gif Binary files differnew file mode 100644 index 0000000..9bdbf4a --- /dev/null +++ b/includes/js/dijit/tests/images/cut.gif diff --git a/includes/js/dijit/tests/images/flatScreen.gif b/includes/js/dijit/tests/images/flatScreen.gif Binary files differnew file mode 100644 index 0000000..05edd72 --- /dev/null +++ b/includes/js/dijit/tests/images/flatScreen.gif diff --git a/includes/js/dijit/tests/images/note.gif b/includes/js/dijit/tests/images/note.gif Binary files differnew file mode 100644 index 0000000..0f921be --- /dev/null +++ b/includes/js/dijit/tests/images/note.gif diff --git a/includes/js/dijit/tests/images/paste.gif b/includes/js/dijit/tests/images/paste.gif Binary files differnew file mode 100644 index 0000000..f236cbe --- /dev/null +++ b/includes/js/dijit/tests/images/paste.gif diff --git a/includes/js/dijit/tests/images/plus.gif b/includes/js/dijit/tests/images/plus.gif Binary files differnew file mode 100644 index 0000000..97e7265 --- /dev/null +++ b/includes/js/dijit/tests/images/plus.gif diff --git a/includes/js/dijit/tests/images/testsBodyBg.gif b/includes/js/dijit/tests/images/testsBodyBg.gif Binary files differnew file mode 100644 index 0000000..4e0b4a7 --- /dev/null +++ b/includes/js/dijit/tests/images/testsBodyBg.gif diff --git a/includes/js/dijit/tests/images/tube.gif b/includes/js/dijit/tests/images/tube.gif Binary files differnew file mode 100644 index 0000000..b506513 --- /dev/null +++ b/includes/js/dijit/tests/images/tube.gif diff --git a/includes/js/dijit/tests/images/tubeTall.gif b/includes/js/dijit/tests/images/tubeTall.gif Binary files differnew file mode 100644 index 0000000..e4fdb8b --- /dev/null +++ b/includes/js/dijit/tests/images/tubeTall.gif diff --git a/includes/js/dijit/tests/layout/ContentPane.html b/includes/js/dijit/tests/layout/ContentPane.html new file mode 100644 index 0000000..8853a3e --- /dev/null +++ b/includes/js/dijit/tests/layout/ContentPane.html @@ -0,0 +1,577 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Test ContentPane</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + + .box { + border: 1px solid black; + padding: 8px; + } + + .dijitTestWidget { + border: 1px dashed red; + background-color: #C0E209 ; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true"></script> + <script type="text/javascript"> + dojo.require("doh.runner"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit._Container"); + dojo.require("dijit._Templated"); + dojo.require("dijit.layout.StackContainer"); + + // create a do nothing, only for test widget + dojo.declare("dijit.TestWidget", + [dijit._Widget, dijit._Templated], { + templateString: "<span class='dijitTestWidget'></span>" + }); + + + dojo.addOnLoad(function(){ + doh.register("pane1", + [ + { + name: "no_autoparse", + runTest: function(t){ + if(dijit.byId("pane1")){ + throw doh._AssertFailure("Page got autoparsed when it shouldn't"); + } + } + } + ] + ); + + var pane2; + + doh.registerGroup("pane2", + [ + { + name: "clear_content", + setUp: function(t){ + pane2 = new dijit.layout.ContentPane({ + preventCache: true + }, dojo.byId("pane2")); + pane2.setContent();// pass undefined on purpose + }, + runTest: function(t){ + t.assertEqual(0, dijit._Container.prototype.getChildren.call(pane2).length); + t.assertEqual("", pane2.domNode.innerHTML) + } + }, + { + name: "setContent_String", + setUp: function(){ + pane2.setContent(); + }, + runTest: function(t){ + var msg = "<h3>a simple html string</h3>"; + pane2.setContent(msg); + t.assertEqual(msg, pane2.domNode.innerHTML.toLowerCase()); + } + }, + { + name: "setContent_DOMNode", + setUp: function(t){ + var div = dojo.doc.createElement('div'); + div.innerHTML = "setContent( [DOMNode] )"; + div.setAttribute('dojoType', 'dijit.TestWidget'); + pane2.setContent(div); + }, + runTest: function(t){ + t.assertEqual(1, dijit._Container.prototype.getChildren.call(pane2).length); + }, + tearDown: function(t){ + pane2.setContent(); // clear content for next test + } + }, + { + name: "setContent_NodeList", + setUp: function(t){ + var div = dojo.doc.createElement('div'); + div.innerHTML = "<div dojotype='dijit.TestWidget'>above</div>" + +"Testing!<div><p><span><b>Deep nested</b></span></p></div>" + +"<div dojotype='dijit.TestWidget'>below</div>"; + + var list = div.childNodes; + pane2.setContent(div.childNodes); + }, + runTest: function(t){ + t.assertEqual(2, dijit._Container.prototype.getChildren.call(pane2).length); + + //regular DOM check + var children = pane2.domNode.childNodes; + t.assertEqual(4, children.length); + t.assertEqual("Testing!", children[1].nodeValue); + t.assertEqual("div", children[2].nodeName.toLowerCase()); + t.assertEqual("<p><span><b>deep nested</b></span></p>", children[2].innerHTML.toLowerCase()); + } + }, + { + name: "setContent_dojo_NodeList", + setUp: function(t){ + pane2.setContent(); + }, + runTest: function(t){ + var div = dojo.doc.createElement('div'); + div.innerHTML = "<div dojotype='dijit.TestWidget'>above</div>" + +"Testing!<div><p><span><b>Deep nested</b></span></p></div>" + +"<div dojotype='dijit.TestWidget'>below</div>"; + + var list = new dojo.NodeList(); + dojo.forEach(div.childNodes, function(n){ + list.push(n.cloneNode(true)); + }); + + pane2.setContent(list); + t.assertEqual(4, pane2.domNode.childNodes.length); + } + }, + { + name: "extractContent", + runTest: function(t){ + var def = pane2.extractContent; + t.assertFalse(def); + + // test that it's actually working + pane2.extractContent = true; + pane2.setContent('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ' + +'"http://www.w3.org/TR/html4/strict.dtd">' + +'<html><head><style>body{font-weight:bold;}</style></head>' + +'<body>extractContent test</body></html>'); + + t.assertEqual("extractContent test", pane2.domNode.innerHTML); + + // reset back to default + pane2.extractContent = def; + } + }, + + ///////////////////////////////////////////////////////////////////////// + // We assume that our network connection has a maximum of 1.5 sec latency + ///////////////////////////////////////////////////////////////////////// + { + name: "setHref_loading", + timeout: 1800, + setUp: function(t){ + pane2.setHref('getResponse.php?messId=1'); + }, + runTest: function(t){ + var d = new tests.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertEqual(1, dijit._Container.prototype.getChildren.call(pane2).length); + }) + , 1500); + return d; + } + }, + { + name: "setHref_then_cancel", + timeout: 2800, + setUp: function(t){ + pane2.setContent();// clear previous + }, + runTest: function(t){ + var msg = "This should NEVER be seen!"; + pane2.setHref('getResponse.php?delay=1000&message='+encodeURI(msg)); + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertFalse(pane2.domNode.innerHTML == msg); + } + ), 2500); + + pane2.cancel(); + + return d; + } + }, + { + // test that setHref cancels a inflight setHref + name: "setHref_cancels_previous_setHref", + timeout: 2800, + setUp: function(t){ + pane2.setContent(); + }, + runTest: function(t){ + var msgCanceled = "This should be canceled"; + pane2.setHref("getResponse.php?delay=1000&message="+encodeURI(msgCanceled)); + + var msg = "This message should win over the previous"; + setTimeout(function(){ + pane2.setHref("getResponse.php?message="+encodeURI(msg)); + }, 900); + + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertEqual(msg, pane2.domNode.innerHTML); + } + ), 2500); + return d; + } + }, + { + name: "setContent_cancels_setHref", + timeout: 2800, + setUp: function(t){ + pane2.setContent(); + }, + runTest: function(t){ + var msgCanceled = "This message be canceled"; + pane2.setHref("getResponse.php?delay=1000&message="+encodeURI(msgCanceled)); + + var msg = "This message should win over the inflight one"; + setTimeout(function(){ + pane2.setContent(msg); + }, 900); + + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertEqual(msg, pane2.domNode.innerHTML); + } + ), 2500); + return d; + } + }, + { + name: "refresh", + timeout: 1900, + setUp: function(t){ + pane2.setHref("getResponse.php?message="+encodeURI('initial load')); + }, + runTest: function(t){ + var msg = 'refreshed load' + setTimeout(function(){ + pane2.href = "getResponse.php?message="+encodeURI(msg); + pane2.refresh(); + }, 100); + + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertEqual(msg, pane2.domNode.innerHTML); + } + ), 1600); + return d; + + } + }, + { + name: "isLoaded", + timeout: 1800, + setUp: function(t){ + pane2.setContent(); + }, + runTest: function(t){ + t.assertTrue(pane2.isLoaded); + + pane2.setHref("getResponse.php?delay=300&message=test"); + + t.assertFalse(pane2.isLoaded); + + var ilObj = {}; // a object to get a reference instead of copy + + // probe after 200ms + setTimeout(function(){ + ilObj.probed = pane2.isLoaded; + }, 200); + + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertTrue(pane2.isLoaded); + t.assertFalse(ilObj.probed); + } + ), 1500); + return d; + } + }, + { + // test that we does'nt load a response if we are hidden + name: "wait_with_load_when_domNode_hidden", + timeout: 1800, + setUp: function(t){ + pane2.domNode.style.display = 'none'; + pane2.setContent(); + }, + runTest: function(t){ + pane2._msg = "This text should not be loaded until after widget is shown"; + pane2.setHref("getResponse.php?message="+encodeURI(pane2._msg)); + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertFalse(pane2.domNode.innerHTML == pane2._msg); + } + ), 1500); + return d; + }, + tearDown: function(t){ + pane2.domNode.style.display = ""; + } + }, + { + name: "onDownloadError", + timeout: 1800, + setUp: function(t){ + pane2.setContent(); + }, + runTest: function(t){ + var res = {}; + var msg = "Error downloading modified message"; + var orig = pane2.onDownloadError; + + + pane2.onDownloadError = function(){ + return msg; + } + + this.onError = function(e){ + res.onError = true; + res.onError_Arg = !!e; + return "This message should be ignored as it gets invoked by dojo.connect"; + } + + var evtHandle = dojo.connect(pane2, 'onDownloadError', this, 'onError'); + + // test onDownloadError + pane2.setHref('nonexistant'); + + // do the test + var d = new t.Deferred(); + setTimeout(function(){ + try{ + if(!res.onError){ + d.errback(new doh._AssertFailure("onDownloadError was never invoked")); + } + if(!res.onError_Arg){ + d.errback(new doh._AssertFailure("onDownloadError did'nt get any argument on invokation")); + } + if(pane2.domNode.innerHTML != msg){ + d.errback(new doh._AssertFailure("custom errortext not set")); + } + d.callback(true); + }catch(e){ + d.errback(e); + }finally{ + // reset to default + dojo.disconnect(evtHandle); + pane2.onDownloadError = orig; + } + }, 1500); + + return d; + } + }, + { + name: "onLoad|Unload_onDownloadStart|End", + timeout: 2400, + setUp:function(t){ + pane2.setContent(); + }, + runTest:function(t){ + var obj = { + start:function(){ + this.start_called = 1; + // check that custom message gets set + setTimeout(function(){ + obj.start_msg = (pane2.domNode.innerHTML == msg); + }, 20); + }, + end: function(){ this.end_called = 1; }, + load: function(){ this.load_called = 1; }, + unload: function(){ this.unload_called = 1; } + }; + + //set custom message + var origStart = pane2.onDownloadStart; + var msg = "custom downloadstart message"; + pane2.onDownloadStart = function(){ return msg; }; + + var startHandler = dojo.connect(pane2, 'onDownloadStart', obj, 'start'); + var endHandler = dojo.connect(pane2, 'onDownloadEnd', obj, 'end'); + var loadHandler = dojo.connect(pane2, 'onLoad', obj, 'load'); + var unloadHandler = dojo.connect(pane2, 'onUnload', obj, 'unload'); + + pane2.setHref('getResponse.php?delay=400'); + + var d = new t.Deferred(); + setTimeout(function(){ + try{ + if(!obj.start_called){ + d.errback(new doh._AssertFailure('onDownloadStart not called')); + } + if(!obj.start_msg){ + d.errback(new doh._AssertFailure('custom download message not set')); + } + if(!obj.end_called){ + d.errback(new doh._AssertFailure('onDownloadEnd not called')); + } + if(!obj.unload_called){ + d.errback(new doh._AssertFailure('onUnload not called')); + } + if(!obj.load_called){ + d.errback(new doh._AssertFailure('onLoad not called')); + } + d.callback(true); + }catch(e){ + d.errback(e); + }finally{ + dojo.disconnect(endHandler); + dojo.disconnect(startHandler); + dojo.disconnect(unloadHandler); + dojo.disconnect(loadHandler); + + pane2.onDownloadStart = origStart; + } + }, 1900); + + return d; + } + } + + ] + ); + + var pane3, st, tmp; + + doh.registerGroup("child_to_StackContainer", + [ + { + // TODO: this test should be moved to registerGroup setUp when #3504 is fixed + // We actually dont need to test anything here, just setUp + name: "setUp_StackContainer", + setUp:function(t){ + st = dojo.byId('stackcontainer'); + dojo.addClass(st, 'box'); + st = new dijit.layout.StackContainer({}, st); + + st.addChild(new dijit.TestWidget()); + pane3 = new dijit.layout.ContentPane({ + href:'getResponse.php?delay=300&message=Loaded!', + preventCache: true + }, dojo.doc.createElement('div')); + st.addChild(pane3); + + pane3.startup(); // starts the ContentPane + }, + runTest:function(t){ + t.assertTrue(st); + t.assertEqual(2, st.getChildren().length); + } + }, + { + name: "preload_false_by_default", + runTest: function(t){ + t.assertFalse(pane3.isLoaded); + t.assertEqual('', pane3.domNode.innerHTML); + } + }, + { + name: "startLoad when selected", + timeout: 2100, + runTest: function(t){ + st.selectChild(pane3); + + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertTrue(pane3.isLoaded); + t.assertEqual('Loaded!', pane3.domNode.innerHTML); + } + ), 1800); + + return d; + } + }, + { + name: "refreshOnShow", + timeout: 2100, + setUp: function(t){ + tmp = { + onUnload: function(){ this._unload_fired = 1; }, + onLoad: function(){ this._load_fired = 1; } + }; + tmp.unload = dojo.connect(pane3, 'onUnload', tmp, 'onUnload'); + tmp.load = dojo.connect(pane3, 'onLoad', tmp, 'onLoad'); + + pane3.refreshOnShow = true; + }, + runTest: function(t){ + var d = new t.Deferred(); + st.back(); + st.forward(); + + setTimeout(d.getTestCallback(function(){ + t.assertTrue(tmp._unload_fired); + t.assertTrue(tmp._load_fired); + t.assertEqual('Loaded!', pane3.domNode.innerHTML); + }), 1800); + + return d; + }, + tearDown: function(){ + dojo.disconnect(tmp.unload); + dojo.disconnect(tmp.load); + pane3.refreshOnShow = pane3.constructor.prototype.refreshOnShow; + } + }, + { + name: "downloadTriggeredOnStartup", + timeout: 1800, + runTest: function(t){ + var href = 'getResponse.php?message=Loaded!' + var pane4 = new dijit.layout.ContentPane({ + href:href, + preventCache: true + }, dojo.doc.createElement('div')); + + dojo.place(pane4.domNode, pane3.domNode, 'after'); + + pane4.startup(); // parser should call startup when djConfig.parseOnLoad=true + + var d = new t.Deferred(); + setTimeout(d.getTestCallback(function(){ + t.assertEqual('Loaded!', pane4.domNode.innerHTML); + pane4.destroy(); + }), 1500); + return d; + } + } + ] + ); + + doh.run(); + }); + </script> +</head> +<body class="tundra"> + <h2>dijit.layout.ContentPane test</h2> + <h3>Test designed to run on localhost (minimize impact from network latency)</h3> + + <h4>This should NOT be parsed automatically</h4> + <div dojoType="dijit.layout.ContentPane" class="box" hasShadow="true" id="pane1"> + <div dojoType='dijit.TestWidget'>If this has a different background and a red border, the page parsed when it shouldn't</div> + </div> + <br/><h3>Testing ContentPane</h3> + <div id='pane2' class='box'> + Even tough the entire page isn't scanned for widgets, + any sub widgets of a ContentPane will be created when a ContentPane is created<br/> + <span id="zero" dojoType='dijit.TestWidget'>This should have a backgroundcolor and a border</span> + <div id="one" dojoType="dijit._Widget"></div> + <div id="two" dojoType="dijit._Widget"></div> + <div id="three" dojoType="dijit._Widget"></div> + </div> + <br/><br/> + <div id='stackcontainer'></div> +</body> +</html> diff --git a/includes/js/dijit/tests/layout/ContentPane.js b/includes/js/dijit/tests/layout/ContentPane.js new file mode 100644 index 0000000..c0b53bc --- /dev/null +++ b/includes/js/dijit/tests/layout/ContentPane.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests.layout.ContentPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.layout.ContentPane"] = true; +dojo.provide("dijit.tests.layout.ContentPane"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests.layout.ContentPane", dojo.moduleUrl("dijit", "tests/layout/ContentPane.html"), 30000); +} + +} diff --git a/includes/js/dijit/tests/layout/combotab.html b/includes/js/dijit/tests/layout/combotab.html new file mode 100644 index 0000000..c881761 --- /dev/null +++ b/includes/js/dijit/tests/layout/combotab.html @@ -0,0 +1,11 @@ +<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" + url="../_data/states.json"></div> +State: +<span id="editable" dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox" + editorParams="{value: 'California', store: stateStore, searchAttr: 'name', promptMessage: 'Please enter a state'}"> + <script type="dojo/connect" event="onChange"> + // connect to editable onChange event, Note that we dont need to disconnect + console.log('User selected:'+this.getValue()); + </script> +</span> + diff --git a/includes/js/dijit/tests/layout/doc0.html b/includes/js/dijit/tests/layout/doc0.html new file mode 100644 index 0000000..4c3f252 --- /dev/null +++ b/includes/js/dijit/tests/layout/doc0.html @@ -0,0 +1,12 @@ +<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">hello!</button> +Here's some text that comes AFTER the button. diff --git a/includes/js/dijit/tests/layout/doc1.html b/includes/js/dijit/tests/layout/doc1.html new file mode 100644 index 0000000..2bff8c5 --- /dev/null +++ b/includes/js/dijit/tests/layout/doc1.html @@ -0,0 +1,13 @@ +<!-- Used from test_RemotePane.html --> + +<h1> Document 1</h1> + +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus risus. Praesent eu lacus et enim laoreet sollicitudin. Quisque mollis mi a lectus. Cras ante. Aliquam tempus justo laoreet justo. Vestibulum egestas feugiat nisi. Nulla ultrices consequat felis. Curabitur dignissim augue vel enim. Fusce tempus tempor mauris. Praesent suscipit pede in nunc. Duis mi neque, malesuada non, volutpat et, nonummy et, ante. Aliquam neque. Nulla rhoncus, turpis eget mattis molestie, magna nulla dictum ligula, quis tempor odio justo vel pede. Donec sit amet tellus. Phasellus sapien. Nulla id massa at nunc condimentum fringilla. Fusce suscipit ipsum et lorem consequat pulvinar. Quisque lacinia sollicitudin tellus.</p> + +<p>Nulla massa lectus, porttitor vitae, dignissim vel, iaculis eget, mi. Vestibulum sed lorem. Nullam convallis elit id leo. Aliquam est purus, rutrum at, sodales non, nonummy a, justo. Proin at diam vel nibh dictum rhoncus. Duis nisl. Etiam orci. Integer hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac erat. Sed velit orci, sodales quis, commodo ut, elementum sed, nibh. Cras mattis vulputate nisl. Mauris eu nulla sed orci dignissim laoreet. Morbi commodo, est vitae pharetra ullamcorper, ante nisl ultrices velit, sit amet vulputate turpis elit id lacus. Vestibulum diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + +<p>Praesent rutrum nunc quis felis. Morbi tempor. Quisque porta magna imperdiet magna. Ut gravida, ipsum eu euismod consectetuer, nisl lectus posuere diam, vel dignissim elit nisi sit amet lorem. Curabitur non nunc. Morbi metus. Nulla facilisi. Sed et ante. Etiam ac lectus. Duis tristique molestie sem. Pellentesque nec quam. Nullam pellentesque ullamcorper sem.</p> + +<p>Duis ut massa eget arcu porttitor pharetra. Curabitur malesuada nisi id eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus massa. Donec quis justo ut tortor faucibus suscipit. Vivamus commodo neque eget nulla. Donec imperdiet lacus condimentum justo. In sollicitudin magna vitae libero. Curabitur scelerisque libero et eros imperdiet cursus. Maecenas adipiscing. Integer imperdiet, neque ut fringilla semper, leo nisi tincidunt enim, id accumsan leo nisi a libero. Morbi rutrum hendrerit eros. Vestibulum eget augue vel urna congue faucibus.</p> + +<p>Morbi ante sapien, consequat non, consectetuer vitae, pharetra non, dui. Cras tempus posuere quam. Vestibulum quis neque. Duis lobortis urna in elit. Aliquam non tellus. Etiam nisi eros, posuere vel, congue id, fringilla in, risus. Duis semper rutrum risus. Nullam felis massa, lobortis sit amet, posuere tempor, mattis id, tellus. Nulla id arcu interdum risus commodo tincidunt. Vivamus pretium pulvinar pede. Vivamus eget erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum, enim eu venenatis tempor, nunc elit convallis tortor, sit amet vulputate turpis arcu eu pede. Praesent molestie, lacus sed vehicula convallis, enim pede fringilla nunc, at porttitor justo ante a diam. Nunc magna eros, interdum vel, varius eget, volutpat eu, orci. Nunc nec mauris. Nulla facilisi. Vivamus dictum elementum risus. Nam placerat arcu.</p> diff --git a/includes/js/dijit/tests/layout/doc2.html b/includes/js/dijit/tests/layout/doc2.html new file mode 100644 index 0000000..1173b29 --- /dev/null +++ b/includes/js/dijit/tests/layout/doc2.html @@ -0,0 +1,13 @@ +<!-- Used from test_RemotePane.html --> + +<h1> Document 2</h1> + +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus risus. Praesent eu lacus et enim laoreet sollicitudin. Quisque mollis mi a lectus. Cras ante. Aliquam tempus justo laoreet justo. Vestibulum egestas feugiat nisi. Nulla ultrices consequat felis. Curabitur dignissim augue vel enim. Fusce tempus tempor mauris. Praesent suscipit pede in nunc. Duis mi neque, malesuada non, volutpat et, nonummy et, ante. Aliquam neque. Nulla rhoncus, turpis eget mattis molestie, magna nulla dictum ligula, quis tempor odio justo vel pede. Donec sit amet tellus. Phasellus sapien. Nulla id massa at nunc condimentum fringilla. Fusce suscipit ipsum et lorem consequat pulvinar. Quisque lacinia sollicitudin tellus.</p> + +<p>Nulla massa lectus, porttitor vitae, dignissim vel, iaculis eget, mi. Vestibulum sed lorem. Nullam convallis elit id leo. Aliquam est purus, rutrum at, sodales non, nonummy a, justo. Proin at diam vel nibh dictum rhoncus. Duis nisl. Etiam orci. Integer hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac erat. Sed velit orci, sodales quis, commodo ut, elementum sed, nibh. Cras mattis vulputate nisl. Mauris eu nulla sed orci dignissim laoreet. Morbi commodo, est vitae pharetra ullamcorper, ante nisl ultrices velit, sit amet vulputate turpis elit id lacus. Vestibulum diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + +<p>Praesent rutrum nunc quis felis. Morbi tempor. Quisque porta magna imperdiet magna. Ut gravida, ipsum eu euismod consectetuer, nisl lectus posuere diam, vel dignissim elit nisi sit amet lorem. Curabitur non nunc. Morbi metus. Nulla facilisi. Sed et ante. Etiam ac lectus. Duis tristique molestie sem. Pellentesque nec quam. Nullam pellentesque ullamcorper sem.</p> + +<p>Duis ut massa eget arcu porttitor pharetra. Curabitur malesuada nisi id eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus massa. Donec quis justo ut tortor faucibus suscipit. Vivamus commodo neque eget nulla. Donec imperdiet lacus condimentum justo. In sollicitudin magna vitae libero. Curabitur scelerisque libero et eros imperdiet cursus. Maecenas adipiscing. Integer imperdiet, neque ut fringilla semper, leo nisi tincidunt enim, id accumsan leo nisi a libero. Morbi rutrum hendrerit eros. Vestibulum eget augue vel urna congue faucibus.</p> + +<p>Morbi ante sapien, consequat non, consectetuer vitae, pharetra non, dui. Cras tempus posuere quam. Vestibulum quis neque. Duis lobortis urna in elit. Aliquam non tellus. Etiam nisi eros, posuere vel, congue id, fringilla in, risus. Duis semper rutrum risus. Nullam felis massa, lobortis sit amet, posuere tempor, mattis id, tellus. Nulla id arcu interdum risus commodo tincidunt. Vivamus pretium pulvinar pede. Vivamus eget erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum, enim eu venenatis tempor, nunc elit convallis tortor, sit amet vulputate turpis arcu eu pede. Praesent molestie, lacus sed vehicula convallis, enim pede fringilla nunc, at porttitor justo ante a diam. Nunc magna eros, interdum vel, varius eget, volutpat eu, orci. Nunc nec mauris. Nulla facilisi. Vivamus dictum elementum risus. Nam placerat arcu.</p> diff --git a/includes/js/dijit/tests/layout/getResponse.php b/includes/js/dijit/tests/layout/getResponse.php new file mode 100644 index 0000000..d695a4b --- /dev/null +++ b/includes/js/dijit/tests/layout/getResponse.php @@ -0,0 +1,57 @@ +<?php + // this just bounces a message as a response, and optionally emulates network latency. + + // default delay is 0 sec, to change: + // getResponse.php?delay=[Int milliseconds] + + // to change the message returned + // getResponse.php?mess=whatever%20string%20you%20want. + + // to select a predefined message + // getResponse.php?messId=0 + + error_reporting(E_ALL ^ E_NOTICE); + + $delay = 1; // 1 micro second to avoid zero division in messId 2 + if(isset($_GET['delay']) && is_numeric($_GET['delay'])){ + $delay = (intval($_GET['delay']) * 1000); + } + + if(isset($_GET['messId']) && is_numeric($_GET['messId'])){ + switch($_GET['messId']){ + case 0: + echo "<h3>WARNING This should NEVER be seen, delayed by 2 sec!</h3>"; + $delay = 2; + break; + case 1: + echo "<div dojotype='dijit.TestWidget'>Testing setHref</div>"; + break; + case 2: + echo "<div dojotype='dijit.TestWidget'>Delayed setHref test</div> + <div dojotype='dijit.TestWidget'>Delayed by " . ($delay/1000000) . " sec.</div>"; + break; + case 3: + echo "IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only"; + break; + case 4: + echo "There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever."; + break; + case 5: + echo "It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:"; + break; + default: + echo "unknown messId:{$_GET['messId']}"; + } + } + + if(isset($_GET['bounceGetStr']) && $_GET['bounceGetStr']){ + echo "<div id='bouncedGetStr'>{$_SERVER["QUERY_STRING"]}</div>"; + } + + if(isset($_GET['message']) && $_GET['message']){ + echo $_GET['message']; + } + + usleep($delay); + +?> diff --git a/includes/js/dijit/tests/layout/tab1.html b/includes/js/dijit/tests/layout/tab1.html new file mode 100644 index 0000000..a37b927 --- /dev/null +++ b/includes/js/dijit/tests/layout/tab1.html @@ -0,0 +1,6 @@ + +<h1>Tab 1</h1> + +<p>I am tab 1. I was loaded externally. <a href="http://www.weba11y.com">WebA11y</a>(something to get focus)</p> + +<div label="foo!">blah</div> diff --git a/includes/js/dijit/tests/layout/tab2.html b/includes/js/dijit/tests/layout/tab2.html new file mode 100644 index 0000000..ed1ad76 --- /dev/null +++ b/includes/js/dijit/tests/layout/tab2.html @@ -0,0 +1,3 @@ +<h1>Tab 2</h1> + +<p>I am tab 2. I was loaded externally as well.</p> diff --git a/includes/js/dijit/tests/layout/tab3.html b/includes/js/dijit/tests/layout/tab3.html new file mode 100644 index 0000000..68dca6c --- /dev/null +++ b/includes/js/dijit/tests/layout/tab3.html @@ -0,0 +1,39 @@ +<div dojoType="dijit.layout.TabContainer"> + <div dojoType="dijit.layout.ContentPane" title="Subtab #1"> + <p>This is a nested tab container BUT loaded via an href.</p> + </div> + <div dojoType="dijit.layout.ContentPane" title="Subtab #2"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam + ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque + nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus + lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus + est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis + dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, + nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent + pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos + hymenaeos. + </p> + </div> +</div>
\ No newline at end of file diff --git a/includes/js/dijit/tests/layout/tab4.html b/includes/js/dijit/tests/layout/tab4.html new file mode 100644 index 0000000..de9cd3c --- /dev/null +++ b/includes/js/dijit/tests/layout/tab4.html @@ -0,0 +1,40 @@ +<div dojoType="dijit.layout.SplitContainer" orientation="vertical"> + <div dojoType="dijit.layout.ContentPane" title="split #1"> + <p>Top of split container loaded via an href.</p> + </div> + <div dojoType="dijit.layout.ContentPane" title="split #2"> + <p>Bottom of split container loaded via an href.</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam + ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque + nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus + lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus + est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis + dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, + nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent + pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos + hymenaeos. + </p> + </div> +</div>
\ No newline at end of file diff --git a/includes/js/dijit/tests/layout/test_AccordionContainer.html b/includes/js/dijit/tests/layout/test_AccordionContainer.html new file mode 100644 index 0000000..d8351e7 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_AccordionContainer.html @@ -0,0 +1,195 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Accordion Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <!-- uncomment for profiling + <script type="text/javascript" + src="../../../dojo/_base/html.js"></script> + <script type="text/javascript" + src="../../base/Layout.js"></script> + --> + + <script type="text/javascript"> + dojo.require("dijit.layout.AccordionContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var accordion, pane4; + + function init(){ + accordion = new dijit.layout.AccordionContainer({}, dojo.byId("accordionShell")); + dojo.forEach([ "pane 1", "pane 2", "pane 3" ], function(title, i){ + // add a node that will be promoted to the content widget + var refNode = document.createElement("span"); + refNode.innerHTML = "this is " + title; + document.body.appendChild(refNode); + var content = new dijit.layout.AccordionPane({title: title, selected: i==1}, refNode); + console.debug("adding content pane " + content.id); + accordion.addChild(content); + }); + accordion.startup(); + var refNode = document.createElement("span"); + var title = "pane 4"; + refNode.innerHTML = "this is " + title; + accordion.addChild(pane4=new dijit.layout.AccordionPane({title: title}, refNode)); + } + + dojo.addOnLoad(init); + + function destroyChildren(){ + accordion.destroyDescendants(); + } + function selectPane4(){ + accordion.selectChild(pane4); + } + </script> +</head> +<body style="padding: 50px;"> + + <h1 class="testTitle">AccordionContainer Tests</h1> + + <h2>Accordion from markup:</h2> + <p>HTML before</p> + <p>HTML before</p> + <p>HTML before</p> + + <div dojoType="dijit.layout.AccordionContainer" duration="200" + style="float: left; margin-right: 30px; width: 400px; height: 300px; overflow: hidden"> + <div dojoType="dijit.layout.AccordionPane" title="a"> + Hello World + </div> + <div dojoType="dijit.layout.AccordionPane" title="b"> + <p> + 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> + <p> + Sed arcu magna, molestie at, <input value="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> + </div> + <div dojoType="dijit.layout.AccordionPane" title="c"> + <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> + </div> + </div> + + <p style="clear: both;">HTML after</p> + <p>HTML after</p> + <p>HTML after</p> + <p></p> + <p>Accordion with widgets</p> + <div dojoType="dijit.layout.AccordionContainer" duration="200" + style="float: left; margin-right: 30px; width: 400px; height: 300px; overflow: hidden"> + <div dojoType="dijit.layout.AccordionPane" selected="true" + title="Pane 1" > + <select> + <option>red</option> + <option>blue</option> + <option>green</option> + </select> + <p> + 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> + <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> + </div> + + <!-- test lazy loading --> + <div dojoType="dijit.layout.AccordionPane" id="lazyLoadPane" title="Pane 2 (lazy load)" href="tab1.html"></div> + + <div dojoType="dijit.layout.AccordionPane" title="Pane 3 (split pane)"> + <div dojoType="dijit.layout.BorderContainer" style="height:100%; width:100%"> + <div dojoType="dijit.layout.ContentPane" region="left" style="width:50%" splitter="true"> + 1Sed 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. + </div> + <div dojoType="dijit.layout.ContentPane" region="center"> + 2Sed 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. + </div> + </div> + </div> + </div> + + <h2>Programatically created:</h2> + <button onclick="destroyChildren();">destroy children</button> + <button onclick="selectPane4();">select pane 4</button> + <br> + + <div id="accordionShell" style="width: 400px; height: 400px;"></div> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_BorderContainer.html b/includes/js/dijit/tests/layout/test_BorderContainer.html new file mode 100644 index 0000000..29fae01 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer.html @@ -0,0 +1,163 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.layout.BorderContainer Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + .dijitContentPane:focus { color: cyan; font-weight: bold } + body { margin-left: 20px } + + #mondrian .dijitSplitter { border: 0; background: black !important } + #mondrian .dijitSplitterH { height: 10px } + #mondrian .dijitSplitterV { width: 10px } + #mondrian .dijitSplitterThumb { display: none } + #mondrian .dijitSplitterActive { background-color: blue } + #mondrian SPAN { display: none } + #mondrian:hover SPAN { display: inline } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.FilteringSelect"); + + function togglePanel(button, id){ + var leftPanel = dijit.byId(id); + if(leftPanel){ + dijit.byId('border1').removeChild(leftPanel); + leftPanel.destroy(); + button.innerHTML='Add left panel'; + }else{ + var container = dijit.byId('border1'); + var div = dojo.doc.createElement('div'); + div.innerHTML='left'; + container.domNode.appendChild(div); + leftPanel = new dijit.layout.ContentPane({id: id, region:'left', style:'background-color: #acb386; width:100px', splitter:true, minSize:50, maxSize:150}, div); + dijit.byId('border1').addChild(leftPanel); + button.innerHTML='Remove left panel'; + } + } + </script> +</head> +<body> + + <h2 class="testTitle">dijit.layout.BorderContainer tests</h2> + <p>Headline layout (default), left is constrained - min:50, max:150</p> + + <div id="border1" dojoType="dijit.layout.BorderContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; border: 15px black solid; height: 100px;" splitter="true"> + top bar + </div> + <div id="border1-left" dojoType="dijit.layout.ContentPane" region="left" style="background-color: #acb386; border: 10px green solid; width: 100px;" splitter="true" minSize="50" maxSize="150"> + left + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 30px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" region="right" style="background-color: #acb386; width: 100px;"> + right + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true"> + bottom bar + </div> + </div> + + <button onClick="togglePanel(this, 'border1-left')">Remove left panel</button> + <br /> + + <p>Sidebar layout, BiDi sensitive, liveSplitters: false</p> + + <div dojoType="dijit.layout.BorderContainer" design="sidebar" liveSplitters="false" + style="border: 20px solid black; width: 90%; height: 300px; padding: 10px;"> + <div dojoType="dijit.layout.ContentPane" region="leading" style="background-color: #acb386; width: 100px;"> + leading + </div> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true"> + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" region="trailing" style="background-color: #acb386; width: 100px;" splitter="true"> + trailing + </div> + </div> + + <br /> + <p>Vertical panels only with splitters</p> + + <div dojoType="dijit.layout.BorderContainer" design="sidebar" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;" splitter="true"> + top bar + </div> + + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true"> + bottom bar + </div> + </div> + + <br /> + <p>More fun with layouts</p> + + <div id="mondrian" dojoType="dijit.layout.BorderContainer" design="sidebar" persist="true" style="height: 300px; width: 400px"> + <div dojoType="dijit.layout.ContentPane" region="top" style="height: 100px" splitter="true"> + <div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 100px; width: 100%"> + <div dojoType="dijit.layout.ContentPane" region="leading" style="width: 125px" splitter="true"><span>top a</span></div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: yellow" splitter="true"><span>top b</span></div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="height: 100px" splitter="true"> + <div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 100px; width: 100%"> + <div dojoType="dijit.layout.ContentPane" region="top" style="height: 40px" splitter="true"><span>bottom c</span></div> + <div dojoType="dijit.layout.ContentPane" region="center"><span>bottom d</span></div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="leading" style="width: 100px" splitter="true"> + <div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 300px; width: 100%"> + <div dojoType="dijit.layout.ContentPane" region="center"><span>leading e</span></div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="height: 100px; background-color: red" splitter="true"><span>leading f</span></div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="trailing" style="width: 100px" splitter="true"><span>trailing g</span></div> + </div> + + <br /> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_BorderContainer_complex.html b/includes/js/dijit/tests/layout/test_BorderContainer_complex.html new file mode 100644 index 0000000..784171c --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer_complex.html @@ -0,0 +1,178 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.layout.BorderContainer Test - complex layout</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.Editor"); + dojo.require("dijit.layout.AccordionContainer"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.LinkPane"); + dojo.require("dijit.Tooltip"); + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.FilteringSelect"); + </script> +</head> +<body> + + <h2 class="testTitle">dijit.layout.BorderContainer tests</h2> + + <p>Complex layout:</p> + +<div dojoType="dijit.layout.BorderContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"> + <div dojoType="dijit.layout.AccordionContainer" duration="200" + region="left" style="background-color: #acb386; width: 400px;" splitter="true" + style="float: left; width: 400px; height: 300px; overflow: hidden"> + <div dojoType="dijit.layout.AccordionPane" title="a"> + left bar + </div> + <div dojoType="dijit.layout.AccordionPane" title="b"> + <p> + 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> + <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> + </div> + <div dojoType="dijit.layout.AccordionPane" title="c"> + <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> + </div> + </div> + + <div dojoType="dijit.layout.AccordionContainer" duration="200" + region="right" style="background-color: #acb386; width: 200px;" + style="float: left; width: 200px; height: 300px; overflow: hidden"> + <div dojoType="dijit.layout.AccordionPane" title="a"> + right bar + </div> + <div dojoType="dijit.layout.AccordionPane" title="b"> + <p> + 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> + <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> + </div> + <div dojoType="dijit.layout.AccordionPane" title="c"> + <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;" splitter="true"> + + <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;"> + + <div id="tab1" dojoType="dijit.layout.ContentPane" href="../../../dijit/tests/layout/tab1.html" title="Tab 1"></div> + + <div id="tab2" dojoType="dijit.layout.ContentPane" href="../../../dijit/tests/layout/tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div> + + <div dojoType="dijit.layout.ContentPane" title="Tab 3"> + <h1>I am tab 3</h1> + <p>And I was already part of the page! That's cool, no?</p> + <p id="foo">tooltip on this paragraph</p> + <div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div> + <button dojoType="dijit.form.Button">I'm a button </button> + <br> + <button dojoType="dijit.form.Button">So am I!</button> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + </div> + + <div dojoType="dijit.layout.TabContainer" title="Inlined Sub TabContainer"> + <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab1.html">SubTab 1</a> + <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab2.html" selected="true">SubTab 2</a> + </div> + + <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab3.html">Sub TabContainer from href</a> + + <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab4.html">SplitContainer from href</a> + + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;"> + <div style="border: 1px solid black;"> + <div dojoType="dijit.Editor" id="editor1"><p>bottom bar (edit me)</p></div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> +</div> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html b/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html new file mode 100644 index 0000000..46483d9 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html @@ -0,0 +1,253 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + + <title>BorderContainer Experiments | The Dojo Toolkit</title> + + <link rel="stylesheet" href="../../themes/tundra/tundra.css" /> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + #pane1 { background-color:red; + } + #pane2{ + background-color:green; + } + #pane3 { + background-color:blue; + } + #pane0 { + background-color:#ededed; + } + .wrapper { padding:25px; } + .bc { margin:10px; border:2px solid #ededed; } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad:true, isDebug:true"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Button"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.BorderContainer"); + dojo.declare("my.BorderContainer",dijit.layout.BorderContainer,{ + + opts: { + // single pane view + "a":{ + panes: [ + { id: "pane0", sizeable:false, region:"center", style: { width:"100%", height:"100%" } }, + { id: "pane1", hidden:true }, + { id: "pane2", hidden:true }, + { id: "pane3", hidden:true } + ] + }, + // top / bottom view + "ah":{ + panes: [ + { id: "pane0", sizeable:false, region:"center", style: { width:"100%", height:"50%" } }, + { id: "pane1", sizeable:true, region:"bottom", style: { width:"100%", height:"50%" } }, + { id: "pane2", hidden:true }, + { id: "pane3", hidden:true } + ] + }, + // left / right view + "av":{ + panes: [ + { id: "pane0", sizeable:true, region:"left", style: { width:"50%", height:"100%" } }, + { id: "pane1", sizeable:false, region:"center", style: { width:"50%", height:"100%" } }, + { id: "pane2", hidden:true }, + { id: "pane3", hidden:true } + ] + } + + }, + + _clearSplitters: function(){ + // cleanup all splitters on the page + dojo.query(".dijitSplitter",this.domNode).forEach(function(n){ + dijit.byNode(n).destroy(); + }); + dojo.query(".dijitSplitterCover").forEach(function(n){ + dojo._destroyElement(n); + }) + delete this._splitters; + this._splitters = {}; + }, + + setLayoutENUM: function(lay){ + // set the layout to a predefined setup + if(this._layoutSetting != lay){ + + this._layoutSetting = lay; + var struct = this.opts[lay] || false; + this._clearSplitters(); + + dojo.forEach(struct.panes,function(pane,i){ + // setup each pane + var d = dijit.byId(pane.id); + d.region = pane.region || "center"; + d.splitter = pane.sizeable; + if(pane.minSize){ d.minSize = pane.minSize; } + if(pane.maxSize){ d.maxSize = pane.maxSize; } + if(pane.hidden){ + // reset this widget to our hidden holder node + this.extractChild(d,dojo.byId("holder")); + d.splitter = null; + d.region = null; + d.maxSize = null; + d.minSize = null; + }else{ + if(pane.style){ + // object setter via style only in trunk: + dojo.style(d.domNode,pane.style); + } + this.addChild(d,i); + } + },this); + } + this.layout(); + }, + + extractChild: function(/*Widget*/ child, /* DomNode */node){ + // a non-destructive cleanup for the bordercontainer. + // cleanup a widget, and append it's domNode to some + // other node in the dom + var region = child.region; + var splitter = this._splitters[region]; + if(splitter){ + dijit.byNode(splitter).destroy(); + delete this._splitters[region]; + } + delete this["_"+region]; + node.appendChild(child.domNode); + if(this._started){ + this._layoutChildren(); + } + return child.domNode; + } + }); + + var open = false; + + dojo.addOnLoad(function(){ + // make buttons + dojo.forEach(["a","av","ah"],function(n){ + + var but = new dijit.form.Button({ + label: "Set "+n, + onClick: function(){ + console.log(n); + layout.setLayoutENUM(n); + } + }); + dojo.byId("buttons").appendChild(but.domNode); + but.startup(); + }) + + }); + </script> + + </head> + <body class="tundra"> + + <h1>This is a test</h1> + <p>This is only a test. An experiment in dynamically altering a BorderContainer's layout + (a seemingly unsupported feature just yet). It Demonstrates how to programatically alter/animate + the size of non-center regions though, and several simple layout configurations + </p> + + <div> + <h3>Layouts:</h3> + <div id="buttons"></div> + </div> + + <div jsId="layout" id="container" dojoType="my.BorderContainer" style="width:600px; height:300px; border:3px solid #333;"> + <div dojoType="dijit.layout.ContentPane" region="center" id="pane0"> + pane0 + </div> + </div> + + <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px"> + <div dojoType="dijit.layout.ContentPane" region="center"> + Sinlge pane - l1 + </div> + </div> + + <div class="wrapper"> + <h3>two panes, vertical split:</h3> + + + <div class="bc" id="animBC" dojoType="dijit.layout.BorderContainer" style="height:200px"> + <div dojoType="dijit.layout.ContentPane" id="sizing1" style="background-color:red" region="left" splitter="true"> + Sinlge pane - left + </div> + <div dojoType="dijit.layout.ContentPane" region="center"> + Sinlge pane - center + <button dojoType="dijit.form.Button"> + Size Me + <script type="dojo/method" event="onClick"> + var n = dijit.byId("sizing1").domNode; + dojo.animateProperty({ + node:n, + duration:1000, + properties: { width: { end: (open ? "100" : "400"), unit:"px" } }, + onEnd: function(){ + open = !open; + dijit.byId("animBC").layout(); + } + }).play(1); + </script> + </button> + </div> + </div> + + <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px"> + <div dojoType="dijit.layout.ContentPane" region="center" splitter="true"> + Sinlge pane - center (splitter) (this is unsupported, and does not work) + </div> + <div dojoType="dijit.layout.ContentPane" region="right"> + Sinlge pane - right (no splitter) + </div> + </div> + + <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px"> + <div dojoType="dijit.layout.ContentPane" region="center"> + Sinlge pane - center (no splitter) + </div> + <div dojoType="dijit.layout.ContentPane" region="right" splitter="true"> + Sinlge pane - right (splitter) + </div> + </div> + </div> + + <div class="bc" dojoType="dijit.layout.BorderContainer" style="width:200px; height:400px;"> + <div dojoType="dijit.layout.ContentPane" region="top" splitter="true"> + Sinlge pane - top (splitter) + + </div> + <div dojoType="dijit.layout.ContentPane" region="center"> + Sinlge pane - center + </div> + </div> + + <div class="bc" dojoType="dijit.layout.BorderContainer" style="width:200px; height:400px;"> + <div dojoType="dijit.layout.ContentPane" region="center"> + Sinlge pane - center + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true"> + Single Pane Bottom (splitter) + </div> + <div dojoType="dijit.layout.ContentPane" region="top" splitter="true"> + Single Pane Top (splitter) + </div> + </div> + + <div id="holder" style="visibility:hidden"> + <div dojoType="dijit.layout.ContentPane" id="pane1">pane 1</div> + <div dojoType="dijit.layout.ContentPane" id="pane2">pane 2</div> + <div dojoType="dijit.layout.ContentPane" id="pane3">pane 3</div> + </div> + + </body> +</html> diff --git a/includes/js/dijit/tests/layout/test_BorderContainer_full.html b/includes/js/dijit/tests/layout/test_BorderContainer_full.html new file mode 100644 index 0000000..65386c2 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer_full.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.layout.BorderContainer Test - Full Screen</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + html, body, #main{ + width: 100%; /* make the body expand to fill the visible window */ + height: 100%; + overflow: hidden; /* erase window level scrollbars */ + padding: 0 0 0 0; + margin: 0 0 0 0; + font: 10pt Arial,Myriad,Tahoma,Verdana,sans-serif; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.FilteringSelect"); + </script> +</head> +<body> + <div dojoType="dijit.layout.BorderContainer" design="sidebar" id="main"> + <div dojoType="dijit.layout.ContentPane" region="leading" style="background-color: #acb386; width: 100px;"> + leading + </div> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true"> + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" region="trailing" style="background-color: #acb386; width: 100px;" splitter="true"> + trailing + </div> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_BorderContainer_nested.html b/includes/js/dijit/tests/layout/test_BorderContainer_nested.html new file mode 100644 index 0000000..72bdf53 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer_nested.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.layout.BorderContainer Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.FilteringSelect"); + </script> +</head> +<body> + + <h2 class="testTitle">dijit.layout.BorderContainer tests</h2> + <p>Basic layout</p> + + <div dojoType="dijit.layout.BorderContainer" + style="border: 2px solid black; width: 90%; height: 500px; padding: 10px;"> + <div dojoType="dijit.layout.ContentPane" region="left" style="background-color: #acb386; width: 100px;"> + left + </div> + <div dojoType="dijit.layout.ContentPane" region="right" style="background-color: #acb386; width: 100px;"> + right + </div> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;"> + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 0px;"> + + <div dojoType="dijit.layout.BorderContainer" design="sidebar" + style="border: 2px solid black; height: 300px;"> + <div dojoType="dijit.layout.ContentPane" region="left" style="background-color: #acb386; width: 100px;"> + left + </div> + <div dojoType="dijit.layout.ContentPane" region="right" style="background-color: #acb386; width: 100px;"> + right + </div> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;"> + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_ContentPane.html b/includes/js/dijit/tests/layout/test_ContentPane.html new file mode 100644 index 0000000..4557bef --- /dev/null +++ b/includes/js/dijit/tests/layout/test_ContentPane.html @@ -0,0 +1,94 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>ContentPane Test</title> + + <style> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + margin: 1em; + padding: 1em; + } + + .box { + position: relative; + background-color: white; + border: 2px solid black; + padding: 8px; + margin: 4px; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.InlineEditBox"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> +</head> +<body> + <h1 class="testTitle">Dijit layout.ContentPane tests</h1> + <p>pre-container paragraph</p> + + <div dojoType="dijit.layout.ContentPane" class="box"> + some text (top-level container) + + <div dojoType="dijit.layout.ContentPane" class="box"> + + text in the inner container (1) + + <div dojoType="dijit.layout.ContentPane" class="box" href="tab2.html" hasShadow="true"> + hi + </div> + + text in the inner container (2) + + <div dojoType="dijit.layout.ContentPane" class="box"> + inner-inner 2 + </div> + + text in the inner container (3) + + <div dojoType="dijit.layout.ContentPane" class="box"> + inner-inner 3 + </div> + + text in the inner container (4) + + </div> + + some more text (top-level container) + </div> + + <p>mid-container paragraph</p> + + <div dojoType="dijit.layout.ContentPane" class="box" hasShadow="true"> + 2nd top-level container + </div> + + <p>post-container paragraph</p> + + <div id="ContentPane3" class="box" hasShadow="true"> + some content pane blah blah blah + </div> + <div dojoType="dijit.layout.ContentPane" class="box" href="combotab.html" hasShadow="true" id="test"> + <p style='background-color:yellow;border:1px solid red;text-align:center;'>This text should automatically be replaced by downloaded content from combotab.html</p> + </div> + <input type="button" value="Change pane in 3 seconds" onClick='setTimeout(function(){dijit.byId("test").setHref("tab2.html");}, 3000);'> + <script type="text/javascript"> + dojo.addOnLoad(function(){ + var tmp = new dijit.layout.ContentPane({}, dojo.byId("ContentPane3")); + tmp.startup(); + console.debug('created ' + tmp); + }); + </script> + </body> +</html> diff --git a/includes/js/dijit/tests/layout/test_LayoutCode.html b/includes/js/dijit/tests/layout/test_LayoutCode.html new file mode 100644 index 0000000..9cec35e --- /dev/null +++ b/includes/js/dijit/tests/layout/test_LayoutCode.html @@ -0,0 +1,383 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Programmatic Layout Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + + html, body{ + width: 100%; /* make the body expand to fill the visible window */ + height: 100%; + overflow: hidden; /* erase window level scrollbars */ + padding: 0 0 0 0; + margin: 0 0 0 0; + } + .dijitSplitPane{ + margin: 5px; + } + #rightPane { + margin: 0; + } + #creator, #current { + border: 3px solid blue; + padding: 10px; + margin: 10px; + } + #wrapper { + border: 3px solid green; + padding: 10px; + margin: 10px; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.LayoutContainer"); + dojo.require("dijit.layout.AccordionContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.layout.TabContainer"); + + // Used in doc0.html + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.form.Button"); + + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + // Simple layout container layout + var simpleLayout = { + widgetType: "LayoutContainer", + params: { id: "rootWidget" }, + style: "border: 3px solid grey; width: 95%; height: 400px;", + children: [ + { + widgetType: "ContentPane", + params: {id: "left", layoutAlign: "left"}, + style: "width: 100px; background: #ffeeff;", + innerHTML: "this is the left" + }, + { + widgetType: "ContentPane", + params: {id: "right", layoutAlign: "right"}, + style: "width: 100px; background: #ffeeff;", + innerHTML: "this is the right" + }, + { + widgetType: "ContentPane", + params: {id: "top", layoutAlign: "top"}, + style: "height: 100px; background: #eeeeee;", + innerHTML: "this is the top" + }, + { + widgetType: "ContentPane", + params: {id: "bottom", layoutAlign: "bottom"}, + style: "height: 100px; background: #eeeeee;", + innerHTML: "this is the bottom" + }, + { + widgetType: "ContentPane", + params: {id: "client", layoutAlign: "client"}, + style: "height: 100px; background: #ffffee;", + innerHTML: "this is the client" + } + ] + }; + + // split container layout + var splitLayout = { + widgetType: "SplitContainer", + params: {id: "rootWidget", orientation: "horizontal"}, + style: "border: 3px solid grey; width: 95%; height: 400px;", + children: [ + { + widgetType: "ContentPane", + params: {id: "left"}, + style: "background: #ffeeff;", + innerHTML: "left pane of split container" + }, + { + widgetType: "SplitContainer", + params: { + id: "nested", orientation: "vertical"}, + children: [ + { + widgetType: "ContentPane", + params: {id: "top"}, + style: "background: #eeffee;", + innerHTML: "center-top pane of nested split container" + }, + { + widgetType: "ContentPane", + params: {id: "bottom"}, + style: "background: #eeffee;", + innerHTML: "center-bottom pane of nested split container" + } + ] + }, + { + widgetType: "ContentPane", + params: {id: "right"}, + style: "background: #ffeeff;", + innerHTML: "right pane of split container" + } + ] + }; + + // tab container layout + var tabLayout = { + widgetType: "TabContainer", + params: {id: "rootWidget"}, + style: "width: 95%; height: 400px;", + children: [ + { + widgetType: "ContentPane", + params: {id: "content", title: "Content tab", href: "doc0.html", executeScripts: true}, + style: "background: #ffeeff;" + }, + { + widgetType: "SplitContainer", + params: {id: "nestedSplit", title: "Split pane tab", orientation: "vertical"}, + children: [ + { + widgetType: "ContentPane", + params: {id: "top"}, + style: "background: #eeffee;", + innerHTML: "top pane of nested split container" + }, + { + widgetType: "ContentPane", + params: {id: "bottom"}, + style: "background: #eeffee;", + innerHTML: "bottom pane of nested split container" + } + ] + }, + { + widgetType: "TabContainer", + params: {id: "nestedTab", title: "Nested tabs"}, + children: [ + { + widgetType: "ContentPane", + params: {id: "left", title: "Nested Tab #1"}, + style: "background: #eeffee;", + innerHTML: "tab 1 of nested tabs" + }, + { + widgetType: "ContentPane", + params: { + id: "right", title: "Nested Tab #2"}, + style: "background: #eeffee;", + innerHTML: "tab 2 of nested tabs" + } + ] + } + ] + }; + +/* + // tab container layout + var tabNoLayout = { + widgetType: "TabContainer", + params: {id: "rootWidget", doLayout: false}, + children: [ + { + widgetType: "ContentPane", + params: {id: "doc0", title: "Doc 0", href: "doc0.html", executeScripts: true}, + style: "background: #ffeeff;" + }, + { + widgetType: "ContentPane", + params: {id: "doc1", title: "Doc 1", href: "doc1.html", executeScripts: true}, + style: "background: #eeffee;" + }, + { + widgetType: "ContentPane", + params: {id: "doc2", title: "Doc 2", href: "doc2.html", executeScripts: true}, + style: "background: #ffffee;" + } + ] + }; +*/ + + // accordion container layout + var accordionLayout = { + widgetType: "AccordionContainer", + params: {id: "rootWidget"}, + style: "border: 3px solid grey; width: 95%; height: 400px;", + children: [ + { + widgetType: "AccordionPane", + params: {id: "one", title: "Pane #1"}, + style: "background: #ffeeff;", + innerHTML: "first pane contents" + }, + { + widgetType: "AccordionPane", + params: {id: "two", title: "Pane #2"}, + style: "background: #ffeeff;", + innerHTML: "second pane contents" + }, + { + widgetType: "AccordionPane", + params: {id: "three", title: "Pane #3"}, + style: "background: #ffeeff;", + innerHTML: "third pane contents" + } + ] + }; + + // Create a widget hierarchy from a JSON structure like + // {widgetType: "LayoutContainer", params: { ... }, children: { ... } } + function createWidgetHierarchy(widgetJson){ + // setup input node + var node = document.createElement("div"); + document.body.appendChild(node); // necessary for tab contianer ??? + if(widgetJson.style){ + node.style.cssText = widgetJson.style; + } + if(widgetJson.innerHTML){ + node.innerHTML=widgetJson.innerHTML; + } + + // create the widget + var widget = new dijit.layout[widgetJson.widgetType](widgetJson.params, node); + + // add its children (recursively) + if(widgetJson.children){ + dojo.forEach(widgetJson.children, + function(child){ widget.addChild(createWidgetHierarchy(child)); }); + } + widget.startup(); //TODO: this is required now, right? + + return widget; + } + + // create the widgets specified in layout and add them to widget "rootWidget" + function create(layout){ + + // erase old widget hierarchy (if it exists) + var rootWidget = dijit.byId("rootWidget"); + if(rootWidget){ + rootWidget.destroyRecursive(); + } + + // create new widget + rootWidget = createWidgetHierarchy(layout); + + // and display it + var wrapper = dojo.byId("wrapper"); + wrapper.innerHTML=""; // just to erase the initial HTML message + wrapper.appendChild(rootWidget.domNode); + // rootWidget.onResized(); + + // make/update the menu of operations on each widget + makeOperationTable(); + } + + // write out a menu of operations on each widget + function makeOperationTable(){ + var html = "<table border=1>"; + dijit.registry.forEach(function(widget){ + html += "<tr><td>" + widget.id + "</td><td>"; + html += "<button onclick='removeFromParent(\"" + widget.id + "\");'> destroy </button> "; + if(/Container/.test(widget.declaredClass)){ + html += "<button onclick='addChild(\"" + widget.id + "\");'> add a child </button> "; + } + html += "</td></tr>"; + }); + html += "</table>"; + dojo.byId("operations").innerHTML = html; + } + + // remove a widget from it's parent and destroy it + function removeFromParent(widget){ + widget = dijit.byId(widget); + if(widget.parent){ + widget.parent.removeChild(widget); + } + widget.destroy(); + + // reset the operation table so this widget is no longer shown + makeOperationTable(); + } + + // add a child to given widget + function addChild(widget){ + widget = dijit.byId(widget); + + // setup input node + var node = document.createElement("div"); + node.style.cssText = "height: 70px; width: 150px; overflow: auto; background: #cccccc; border: dotted black 2px;"; // necessary if parent is LayoutContainer + // create the widget + var alignments = ["top","bottom","left","right"]; + var hrefs = ["doc0.html", "doc1.html", "doc2.html"]; + var child = new dijit.layout.ContentPane( + { + title: "Widget " + cnt, // necessary if parent is tab + layoutAlign: alignments[cnt%4], // necessary if parent is LayoutContainer + executeScripts: true, + href: hrefs[cnt%3] + }, + node); + cnt++; + + if(/AccordionContainer/.test(widget.declaredClass)){ + var pane = new dijit.layout.AccordionPane({ + title: "AccordionWidget " + cnt + }); + pane.setContent(child); + child = pane; + } + // add it to the parent + widget.addChild(child); + + // reset the operation table so the new widget is shown + makeOperationTable(); + } + var cnt=1; + + // show a widget + function show(widget){ + widget = dijit.byId(widget); + widget.show(); + } + + // hide a widget + function hide(widget){ + widget = dijit.byId(widget); + widget.hide(); + } + </script> +</head> +<body> + <h1>Test of layout code programmatic creation</h1> + <table width="100%"> + <tr> + <td id="creator" valign="top"> + <h4>Creator</h4> + <p>Pressing a button will programatically add a hierarchy of widgets</p> + <button onClick="create(simpleLayout);">Simple Layout</button> + <button onClick="create(splitLayout);">Split Layout</button> + <button onClick="create(tabLayout);">Tab Layout</button> +<!-- <button onClick="create(tabNoLayout);">Tab Non-Layout</button> --> + <button onClick="create(accordionLayout);">Accordion Layout</button> + </td> + <td id="current"> + <h4>Current widgets</h4> + This pane will let you try certain operations on each of the widgets. + <div id="operations" style="height: 200px; overflow: auto;"></div> + </td> + </tr> + </table> + <hr> + <div id="wrapper"> + When you press a button, this will be filled in with the generated widgets + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_LayoutContainer.html b/includes/js/dijit/tests/layout/test_LayoutContainer.html new file mode 100644 index 0000000..cbe08f6 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_LayoutContainer.html @@ -0,0 +1,174 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.layout.LayoutContainer Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.LayoutContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.FilteringSelect"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + +</head> +<body class="tundra"> +<h2>Dijit layout.LayoutContainer tests</h2> +<p>Basic layout. Tabindex="0" added to each pane to test for tab order matching source code order. Tab order +should be: left, right, top, middle/main, bottom</p> + +<div dojoType="dijit.layout.LayoutContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;" +> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;" tabindex="0"> + left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #acb386;" tabindex="0"> + right + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; " tabindex="0"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;" tabindex="0"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86;" tabindex="0"> + bottom bar + </div> + +</div> + +<p>Advanced layout. Tabindex="0" added to each pane to test for tab order matching source code order. Tab order +should be: left, top, bottom, inner left, inner middle, inner right. This is not an ideal tab order. See below to use nested +layout containers to achieve a tab order which matches presentation and source code order.</p> +<div dojoType="dijit.layout.LayoutContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;" +> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0"> + left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; margin: 5px;" tabindex="0"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0"> + + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner left + </div> + + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner right + </div> +</div> + +<p>Advanced layout with nested containers. Tabindex="0" added to content panes to show tab order. Order should be: +left, top, inner left, inner middle, inner right, bottom. This is the preferred tab order for this type of layout.</p> +<div dojoType="dijit.layout.LayoutContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;" +> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0"> + left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;" > + <div dojoType="dijit.layout.LayoutContainer" style="height:90%;border: 2px solid black;padding: 10px;"> + + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; margin: 5px;" tabindex="0"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;"> + <div dojoType="dijit.layout.LayoutContainer" style="height:80%;border: 2px solid black;padding: 10px;"> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner right + </div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0" > + bottom bar + </div> + </div> + </div> +</div> + +<p>Goofy spiral layout. Match of source code order to tab order can not be achieved with this type of layout.</p> +<div dojoType="dijit.layout.LayoutContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;" +> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #663333; color: white; width: 100px;"> + outer left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #333366; color: white; height: 50px;"> + outer top + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #663333; color: white; width: 100px;"> + outer right + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #333366; color: white; height: 50px;"> + outer bottom + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #99CC99; width: 100px;"> + inner left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #999966; height: 50px;"> + inner top + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #99CC99; width: 100px;"> + inner right + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #999966; height: 50px;"> + inner bottom + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> +</div> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_SplitContainer.html b/includes/js/dijit/tests/layout/test_SplitContainer.html new file mode 100644 index 0000000..f71d2dd --- /dev/null +++ b/includes/js/dijit/tests/layout/test_SplitContainer.html @@ -0,0 +1,116 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>SplitContainer Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + .dojoContentPane { + padding:1em; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.layout.ContentPane"); + + // these exist inside our href splitcontainer + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.ComboBox"); + var programaticExample = function(){ + + var rootNode = dojo.byId("holderNode"); + // add two children + var pane1 = rootNode.appendChild(document.createElement('div')); + var pane2 = rootNode.appendChild(document.createElement('div')); + var pane3 = rootNode.appendChild(document.createElement('div')); + + // set the content. can use xhrGet, also + pane1.innerHTML = "Pane one test"; pane2.innerHTML = "Pane two test"; + + // should use css, but this works: + dojo.style(rootNode,"height","150px"); + dojo.style(rootNode,"border","1px solid #333"); + + // make them contentpanes + var cp1 = new dijit.layout.ContentPane({ sizeShare:20 },pane1); + var cp2 = new dijit.layout.ContentPane({ sizeShare:30 },pane2); + var cp3 = new dijit.layout.ContentPane({ + href: "doc0.html", + sizeShare:30 + },pane3).startup(); + + // init the splitcontainer + var split = new dijit.layout.SplitContainer({ + orientation:"horizontal", + sizerWidth:7 + },rootNode).startup(); + + }; + dojo.addOnLoad(programaticExample); + + </script> +</head> +<body> + <h1 class="testTitle">Dijit Split Container Test</h1> + <p>HTML before</p> + + <div dojoType="dijit.layout.SplitContainer" + orientation="vertical" + sizerWidth="7" + activeSizing="false" + style="border: 1px solid #bfbfbf; float: left; margin-right: 30px; width: 400px; height: 300px;" + > + <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50"> + this box has three split panes + </div> + <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="50" + style="background-color: yellow; border: 3px solid purple;"> + in vertical mode + </div> + <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50"> + without active resizing + </div> + </div> + + <div dojoType="dijit.layout.SplitContainer" + orientation="horizontal" + sizerWidth="7" + activeSizing="true" + style="border: 1px solid #bfbfbf; float: left; width: 400px; height: 300px;"> + <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20"> + this box has two horizontal panes + </div> + <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50"> + with active resizing, a smaller sizer, different starting sizes and minimum sizes + </div> + </div> + + <p style="clear: both;">HTML after</p> + +the following splitter contains two iframes, see whether the resizer works ok in this situation +<div dojoType="dijit.layout.SplitContainer" + orientation="horizontal" + sizerWidth="5" + activeSizing="false" + style="border: 2px solid black; float: left; width: 100%; height: 300px;" +> + <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20"> + <iframe style="width: 100%; height: 100%"></iframe> + </div> + <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50"> + <iframe style="width: 100%; height: 100%"></iframe> + </div> +</div> + +<h3>Programatic Example:</h3> +<div id="holderNode"></div> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_StackContainer.html b/includes/js/dijit/tests/layout/test_StackContainer.html new file mode 100644 index 0000000..834b874 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_StackContainer.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>StackContainer Demo</title> + + <style> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + .dijitStackController .dijitToggleButtonChecked button { + background-color: white; + background-image: none; + } + .dijit_a11y .dijitStackController .dijitToggleButtonChecked button { + border-style: dashed !important; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.StackContainer"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function selected(page){ + console.debug("page selected " + page.id); + var widget=dijit.byId("myStackContainer"); + dijit.byId("previous").setAttribute("disabled", page.isFirstChild); + dijit.byId("next").setAttribute("disabled", page.isLastChild); + dijit.byId("previous2").setAttribute("disabled", page.isFirstChild); + dijit.byId("next2").setAttribute("disabled", page.isLastChild); + } + dojo.subscribe("myStackContainer-selectChild", selected); + </script> +</head> + +<body> + <h1 class="testTitle">A Tale Of Two Cities</h1> + + <button dojoType="dijit.form.Button" id="previous" + onClick="dijit.byId('myStackContainer').back()"><</button> + <span dojoType="dijit.layout.StackController" containerId="myStackContainer"></span> + <button dojoType="dijit.form.Button" id="next" + onClick="dijit.byId('myStackContainer').forward()">></button> + + <div id="myStackContainer" dojoType="dijit.layout.StackContainer" + style="width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;"> + <p id="page1" dojoType="dijit.layout.ContentPane" title="page 1">IT WAS the best of times, it <input value="was the worst" /> of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only</p> + <p id="page2" dojoType="dijit.layout.ContentPane" title="page 2">There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of <a href="http://www.france.com">France</a>. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.</p> + <p id="page3" dojoType="dijit.layout.ContentPane" title="page 3">It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:</p> + </div> + + <button dojoType="dijit.form.Button" id="previous2" onClick="dijit.byId('myStackContainer').back()"><</button> + <span dojoType="dijit.layout.StackController" containerId="myStackContainer"></span> + <button dojoType="dijit.form.Button" id="next2" onClick="dijit.byId('myStackContainer').forward()">></button> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_StackContainer_code.html b/includes/js/dijit/tests/layout/test_StackContainer_code.html new file mode 100644 index 0000000..137cc6e --- /dev/null +++ b/includes/js/dijit/tests/layout/test_StackContainer_code.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>StackContainer Demo</title> + + <style> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + .dijitStackController .dijitToggleButtonChecked button { + background-color: white; + background-image: none; + } + .dijit_a11y .dijitStackController .dijitToggleButtonChecked button { + border-style: dashed !important; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.StackContainer"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var i = 1; + var codeExample = function(){ + // make the container + var stack = new dijit.layout.StackContainer({ },"myStackContainer"); + // make each paragraph a ContentPane, and add a button to select this child + dojo.query("p","myStackContainer").forEach(function(n){ + var cp = new dijit.layout.ContentPane({},n); + var tmpNode = dojo.byId("holder").appendChild(dojo.doc.createElement('div')); + var butt = new dijit.form.Button({ + label: "Page "+(i++), + onClick: function(e){ + stack.selectChild(cp); + } + },tmpNode); + }); + // startup stack + children + stack.startup(); + }; + dojo.addOnLoad(codeExample); + </script> +</head> + +<body> + <h1 class="testTitle">A Tale Of Two Cities</h1> + + <div id="holder">Links: </div> + + <div id="myStackContainer" style="width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;"> + <p id="page1">IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only</p> + <p id="page2">There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of <a href="http://www.france.com">France</a>. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.</p> + <p id="page3">It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:</p> + </div> + + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_TabContainer.html b/includes/js/dijit/tests/layout/test_TabContainer.html new file mode 100644 index 0000000..5d51a8a --- /dev/null +++ b/includes/js/dijit/tests/layout/test_TabContainer.html @@ -0,0 +1,183 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TabContainer Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + font-family : sans-serif; + margin:20px; + } + + /* add padding to each contentpane inside the tab container, and scrollbar if necessary */ + .dojoTabPane { + padding : 10px 10px 10px 10px; + overflow: auto; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.Tooltip"); + dojo.require("dijit.layout.LinkPane"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function testClose(pane,tab){ + return confirm("Please confirm that you want tab "+tab.title+" closed"); + } + + startTime = new Date(); + dojo.addOnLoad(function(){ + var elapsed = new Date().getTime() - startTime; + var p = document.createElement("p"); + p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms")); + document.body.appendChild(p); + // dojo.parser.parse(dojo.body()); + }); + + dojo.addOnLoad(function(){ + var tc = dijit.byId("mainTabContainer"); + var cp = new dijit.layout.ContentPane({ title: 'Programmatically created tab' }); + cp.domNode.innerHTML = "I was created programmatically!"; + tc.addChild(cp, 3); + }); + </script> +</head> +<body> + + <h1 class="testTitle">Dijit layout.TabContainer tests</h1> + + <p>These tabs are made up of local and external content. Tab 1 and Tab 2 are loading + files tab1.html and tab2.html. Tab 3 and Another Tab are using content that is already + part of this page. Tab2 is initially selected. + </p> + + <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;"> + + <div id="tab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + + <div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div> + + <div dojoType="dijit.layout.ContentPane" title="Tab 3"> + <h1>I am tab 3</h1> + <p>And I was already part of the page! That's cool, no?</p> + <p id="foo">tooltip on this paragraph</p> + <div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div> + <button dojoType="dijit.form.Button">I'm a button </button> + <br> + <button dojoType="dijit.form.Button">So am I!</button> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + </div> + + <div dojoType="dijit.layout.TabContainer" title="Inlined Sub TabContainer"> + <a dojoType="dijit.layout.LinkPane" href="tab1.html">SubTab 1</a> + <a dojoType="dijit.layout.LinkPane" href="tab2.html" selected="true">SubTab 2</a> + </div> + + <a dojoType="dijit.layout.LinkPane" href="tab3.html">Sub TabContainer from href</a> + + <a dojoType="dijit.layout.LinkPane" href="tab4.html">SplitContainer from href</a> + + </div> + + <p> + The next example is with closable tabs. + Tab 1 and Tab 3 can be closed; Tab 3 has a confirm box. + </p> + + <div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 10em;" + onfocus="console.log('user focus handler')" + onblur="console.log('user blur handler')" + > + <div id="ttab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="First" closable="true"></div> + <div id="ttab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Second"></div> + <div dojoType="dijit.layout.ContentPane" title="Third" onClose="testClose" closable="true"> + <h1>I am tab 3</h1> + <p>And I was already part of the page! That's cool, no?</p> + <p>If you try to close me there should be a confirm dialog.</p> + </div> + </div> + + <p>Tabs with titles on the bottom:</p> + + <div id="btabs" dojoType="dijit.layout.TabContainer" tabPosition="bottom" style="width: 100%; height: 10em;"> + <div id="btab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1" closable="true"></div> + <div id="btab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" onLoad="console.debug('Tab2 onLoad');" title="Tab 2"></div> + </div> + + <p>Tabs with titles on the left:</p> + + <div id="lhtabs" dojoType="dijit.layout.TabContainer" tabPosition="left-h" style="width: 100%; height: 10em;"> + <div id="lhtab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + <div id="lhtab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" closable="true"></div> + </div> + + <p>Tabs with titles on the right:</p> + + <div id="lrtabs" dojoType="dijit.layout.TabContainer" tabPosition="right-h" style="width: 100%; height: 10em;"> + <div id="rhtab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + <div id="rhtab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" closable="true"></div> + </div> + +<p></p> + <div dojoType="dijit.layout.TabContainer" style="width:500px;height:100px" tabPosition="left-h"> + <div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap"> + Once upon a time there was a dear little girl who was loved by + every one who looked at her, but most of all by her grandmother, + and there was nothing that she would not have given to the child. + </div> + <div id="HanselGretel" dojoType="dijit.layout.ContentPane" + title="Hansel and Gretel" closable="true" selected="true"> + Hard by a great forest dwelt a poor wood-cutter with his wife + and his two children. The boy was called Hansel and the girl Gretel. + He had little to bite and to break, and once when great dearth fell + on the land, he could no longer procure even daily bread. + </div> + <div id="GreenTwigs" dojoType="dijit.layout.ContentPane" + title="The Three Green Twigs"> + There was once upon a time a hermit who lived in a forest at the foot + of a mountain, and passed his time in prayer and good works, + and every evening he carried, to the glory of God, two pails of water + up the mountain. + </div> + + <h3>Typical rendering time</h3> + <table border=1> + <tr><th>IE</th><th>Firefox (mac)</th></tr> + <tr><td>1719</td><td>922</td></tr> + </table> + <h3>Rendering time</h3> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_TabContainerTitlePane.html b/includes/js/dijit/tests/layout/test_TabContainerTitlePane.html new file mode 100644 index 0000000..139eb2b --- /dev/null +++ b/includes/js/dijit/tests/layout/test_TabContainerTitlePane.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TabContainer Nested TitlePane Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + font-family : sans-serif; + margin:20px; + } + + /* add padding to each contentpane inside the tab container, and scrollbar if necessary */ + .dojoTabPane { + padding : 10px 10px 10px 10px; + overflow: auto; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.TitlePane"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + startTime = new Date(); + dojo.addOnLoad(function(){ + var elapsed = new Date().getTime() - startTime; + var p = document.createElement("p"); + p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms")); + document.body.appendChild(p); + // dojo.parser.parse(dojo.body()); + }); + + </script> +</head> +<body> + + <h1 class="testTitle">Dijit layout.TabContainer nested TitlePane tests</h1> + + <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;"> + + <div dojoType="dijit.layout.ContentPane" title="Tab 1"> + <h1>I am tab 1</h1> + <div dojoType="dijit.TitlePane" title="Title pane" width="300"> + <p>This is a title pane, containing another tab container ...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum... + </p> + <div id="subTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;"> + <div id="tab3" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 3"></div> + <div id="tab4" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 4" selected="true"></div> + </div> + </div> + </div> + <div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html" title="Tab 2"></div> + + </div> + + + <h3>Typical rendering time</h3> + <table border=1> + <tr><th>IE</th><th>Firefox (mac)</th></tr> + <tr><td>1719</td><td>922</td></tr> + </table> + <h3>Rendering time</h3> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_TabContainer_noLayout.html b/includes/js/dijit/tests/layout/test_TabContainer_noLayout.html new file mode 100644 index 0000000..3fb8d15 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_TabContainer_noLayout.html @@ -0,0 +1,104 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TabContainer doLayout=false Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + font-family : sans-serif; + margin:20px; + } + + /* add padding to each contentpane inside the tab container, and scrollbar if necessary */ + .dojoTabPane { + padding : 10px 10px 10px 10px; + overflow: auto; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.Tooltip"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.layout.LinkPane"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function testClose(pane,tab){ + return confirm("Please confirm that you want tab "+tab.title+" closed"); + } + </script> +</head> +<body> + + <h1 class="testTitle">Dijit layout.TabContainer doLayout=false tests</h1> + + <p> + This tests tabs in doLayout=false mode, in which case the tab container's height == + the height of the currently selected tab. + </p> + <p>With doLayout=false mode tabs to the left or right are not supported and tabs at the bottom are a bit buggy in FireFox. + </p> + + + <!-- 1ST TABCONTAINER --> + + <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" doLayout="false"> + + <div id="tab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + + <div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div> + + <div dojoType="dijit.layout.ContentPane" title="Tab 3"> + <h1>I am tab 3</h1> + <p>And I was already part of the page! That's cool, no?</p> + <span id="foo">tooltip on this span</span> + <div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div> + <button dojoType="dijit.form.Button">I'm a button </button> + <br> + <button dojoType="dijit.form.Button">So am I!</button> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + </div> + + <div dojoType="dijit.layout.TabContainer" title="Inlined Sub TabContainer"> + <a dojoType="dijit.layout.LinkPane" href="tab1.html">SubTab 1</a> + <a dojoType="dijit.layout.LinkPane" href="tab2.html" selected="true">SubTab 2</a> + </div> + + <a dojoType="dijit.layout.LinkPane" href="tab3.html">Sub TabContainer from href</a> + </div> + + <p> + Some text here. This should appear directly below the TabContainer, + and the position will change based on the current height of the TabContainer. + </p> +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_TabContainer_remote.html b/includes/js/dijit/tests/layout/test_TabContainer_remote.html new file mode 100644 index 0000000..19515a9 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_TabContainer_remote.html @@ -0,0 +1,109 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TabContainer Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + font-family : sans-serif; + margin:20px; + } + + /* add padding to each contentpane inside the tab container, and scrollbar if necessary */ + .dojoTabPane { + padding : 10px 10px 10px 10px; + overflow: auto; + } + </style> + + <script type="text/javascript" djConfig="isDebug: true,parseOnLoad:true" + src="../../../dojo/dojo.js"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.Tooltip"); + dojo.require("dijit.layout.LinkPane"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var tabCounter; + function testClose(pane, tab){ + // remove html from title + var title = dojo.trim(tab.title.replace(/<\/?[a-z][a-z0-9]*[^>]*>/ig, "")); + return confirm("Please confirm that you want tab "+title+" closed"); + } + + function randomMessageId(){ + return Math.floor(Math.random() * 3) + 3; + } + + function createTab(){ + if(!tabCounter){ tabCounter = 3; } + + var title = '<img src="../images/plus.gif" style="background-color:#95B7D3;"/> Tab ' +(++tabCounter); + var refreshOnShow = !!(tabCounter % 2); + + var newTab = new dijit.layout.ContentPane({ + title: title + (refreshOnShow ? ' <i>refreshOnShow</i>': ''), + closable:true, + refreshOnShow: refreshOnShow, + href: 'getResponse.php?delay=1000&messId='+randomMessageId() + +"&message="+encodeURI("<h1>Programmatically created Tab "+tabCounter+"</h1>") + }, dojo.doc.createElement('div')); + + dijit.byId('ttabs').addChild(newTab); + + newTab.startup(); // find parent TabContainer and subscribe to selectChild event + } + + startTime = new Date(); + dojo.addOnLoad(function(){ + var elapsed = new Date().getTime() - startTime; + var p = document.createElement("p"); + p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms")); + document.body.appendChild(p); + }); + </script> +</head> +<body> + + <h1 class="testTitle">Dijit layout.TabContainer (delayed) remote tests</h1> + + <p>These tabs are made up of external content. Loading is delayed to make it easier to see if refreshOnShow and preload = 'false' is working.<br/> + The tabs also tests to insert html in the Tab title + </p> + + <div dojoType='dijit.form.Button' onClick='createTab()'>Create a Tab</div> + <div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 20em;"> + <a id="ttab1" dojoType="dijit.layout.LinkPane" + href="getResponse.php?messId=3&delay=1000" + closable="true" + ><img src='../images/copy.gif'/> Tab1</a> + <a id="ttab2" dojoType="dijit.layout.LinkPane" + href="getResponse.php?messId=4&delay=1000" + refreshOnShow="true" title="Tab 2 " + selected='true' + closable='true' + ><i>refreshOnShow</i> + <img src='../images/cut.gif'/> + </a> + <a dojoType="dijit.layout.LinkPane" + href="getResponse.php?messId=5&delay=1000" + onClose="testClose" + closable="true" + > + <b>Tab 3</b> + <img src='../images/paste.gif'/> + </a> + </div> + + <h3>Rendering time</h3> + +</body> +</html> diff --git a/includes/js/dijit/tests/manualTests.html b/includes/js/dijit/tests/manualTests.html new file mode 100644 index 0000000..7f8b1c1 --- /dev/null +++ b/includes/js/dijit/tests/manualTests.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> +<html> + <head> + <title>Dijit Manual Test Runner</title> + </head> + <body> + Redirecting to D.O.H runner + <script> + window.location.replace("../../util/doh/runner.html?testModule=dijit.tests.manualTests"+window.location.search.replace(/^\?/,"&")); + </script> + </body> +</html> diff --git a/includes/js/dijit/tests/manualTests.js b/includes/js/dijit/tests/manualTests.js new file mode 100644 index 0000000..f4f09e1 --- /dev/null +++ b/includes/js/dijit/tests/manualTests.js @@ -0,0 +1,85 @@ +if(!dojo._hasResource["dijit.tests.manualTests"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.manualTests"] = true; +dojo.provide("dijit.tests.manualTests"); + +try{ +if(dojo.isBrowser){ + var userArgs = window.location.search.replace(/[\?&](dojoUrl|testUrl|testModule)=[^&]*/g,"").replace(/^&/,"?"); + doh.registerUrl("dijit/demos/chat.html", dojo.moduleUrl("dijit","demos/chat.html"+userArgs), 99999999); + doh.registerUrl("dijit/demos/form.html", dojo.moduleUrl("dijit","demos/form.html"+userArgs), 99999999); + doh.registerUrl("dijit/demos/i18n.html", dojo.moduleUrl("dijit","demos/i18n.html"+userArgs), 99999999); + doh.registerUrl("dijit/demos/mail.html", dojo.moduleUrl("dijit","demos/mail.html"+userArgs), 99999999); + doh.registerUrl("dijit/demos/nihao.html", dojo.moduleUrl("dijit","demos/nihao.html"+userArgs), 99999999); + doh.registerUrl("dijit/demos/chat/client.html", dojo.moduleUrl("dijit","demos/chat/client.html"+userArgs), 99999999); + doh.registerUrl("dijit/demos/chat/community.html", dojo.moduleUrl("dijit","demos/chat/community.html"+userArgs), 99999999); + doh.registerUrl("dijit/demos/chat/operator.html", dojo.moduleUrl("dijit","demos/chat/operator.html"+userArgs), 99999999); + doh.registerUrl("dijit/demos/i18n/generate.html", dojo.moduleUrl("dijit","demos/i18n/generate.html"+userArgs), 99999999); + doh.registerUrl("dijit/demos/i18n/sprite.html", dojo.moduleUrl("dijit","demos/i18n/sprite.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test.html", dojo.moduleUrl("dijit","tests/test.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_Calendar.html", dojo.moduleUrl("dijit","tests/test_Calendar.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_ColorPalette.html", dojo.moduleUrl("dijit","tests/test_ColorPalette.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_Declaration.html", dojo.moduleUrl("dijit","tests/test_Declaration.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_Dialog.html", dojo.moduleUrl("dijit","tests/test_Dialog.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_Dialog_focusDestroy.html", dojo.moduleUrl("dijit","tests/test_Dialog_focusDestroy.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_Editor.html", dojo.moduleUrl("dijit","tests/test_Editor.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_InlineEditBox.html", dojo.moduleUrl("dijit","tests/test_InlineEditBox.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_instantiate.html", dojo.moduleUrl("dijit","tests/test_instantiate.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_Menu.html", dojo.moduleUrl("dijit","tests/test_Menu.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_ProgressBar.html", dojo.moduleUrl("dijit","tests/test_ProgressBar.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_TitlePane.html", dojo.moduleUrl("dijit","tests/test_TitlePane.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_ToolBar.html", dojo.moduleUrl("dijit","tests/test_ToolBar.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_Tooltip.html", dojo.moduleUrl("dijit","tests/test_Tooltip.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_TooltipDialog.html", dojo.moduleUrl("dijit","tests/test_TooltipDialog.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_Tree.html", dojo.moduleUrl("dijit","tests/test_Tree.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/test_Tree_Notification_API_Support.html", dojo.moduleUrl("dijit","tests/test_Tree_Notification_API_Support.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/_programaticTest.html", dojo.moduleUrl("dijit","tests/_programaticTest.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_Button.html", dojo.moduleUrl("dijit","tests/form/test_Button.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_CheckBox.html", dojo.moduleUrl("dijit","tests/form/test_CheckBox.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_ComboBox.html", dojo.moduleUrl("dijit","tests/form/test_ComboBox.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_ComboBox_destroy.html", dojo.moduleUrl("dijit","tests/form/test_ComboBox_destroy.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_DateTextBox.html", dojo.moduleUrl("dijit","tests/form/test_DateTextBox.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_FilteringSelect.html", dojo.moduleUrl("dijit","tests/form/test_FilteringSelect.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_MultiSelect.html", dojo.moduleUrl("dijit","tests/form/test_MultiSelect.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_SimpleTextarea.html", dojo.moduleUrl("dijit","tests/form/test_SimpleTextarea.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_Slider.html", dojo.moduleUrl("dijit","tests/form/test_Slider.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_Spinner.html", dojo.moduleUrl("dijit","tests/form/test_Spinner.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_Textarea.html", dojo.moduleUrl("dijit","tests/form/test_Textarea.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_TimeTextBox.html", dojo.moduleUrl("dijit","tests/form/test_TimeTextBox.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/form/test_validate.html", dojo.moduleUrl("dijit","tests/form/test_validate.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_AccordionContainer.html", dojo.moduleUrl("dijit","tests/layout/test_AccordionContainer.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_BorderContainer.html", dojo.moduleUrl("dijit","tests/layout/test_BorderContainer.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_BorderContainer_complex.html", dojo.moduleUrl("dijit","tests/layout/test_BorderContainer_complex.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_BorderContainer_experimental.html", dojo.moduleUrl("dijit","tests/layout/test_BorderContainer_experimental.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_BorderContainer_full.html", dojo.moduleUrl("dijit","tests/layout/test_BorderContainer_full.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_BorderContainer_nested.html", dojo.moduleUrl("dijit","tests/layout/test_BorderContainer_nested.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_ContentPane.html", dojo.moduleUrl("dijit","tests/layout/test_ContentPane.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_LayoutCode.html", dojo.moduleUrl("dijit","tests/layout/test_LayoutCode.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_LayoutContainer.html", dojo.moduleUrl("dijit","tests/layout/test_LayoutContainer.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_SplitContainer.html", dojo.moduleUrl("dijit","tests/layout/test_SplitContainer.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_StackContainer.html", dojo.moduleUrl("dijit","tests/layout/test_StackContainer.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_StackContainer_code.html", dojo.moduleUrl("dijit","tests/layout/test_StackContainer_code.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_TabContainer.html", dojo.moduleUrl("dijit","tests/layout/test_TabContainer.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_TabContainerTitlePane.html", dojo.moduleUrl("dijit","tests/layout/test_TabContainerTitlePane.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_TabContainer_noLayout.html", dojo.moduleUrl("dijit","tests/layout/test_TabContainer_noLayout.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/layout/test_TabContainer_remote.html", dojo.moduleUrl("dijit","tests/layout/test_TabContainer_remote.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/tree/test_Tree_DnD.html", dojo.moduleUrl("dijit","tests/tree/test_Tree_DnD.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/tree/test_Tree_Programmatic.html", dojo.moduleUrl("dijit","tests/tree/test_Tree_Programmatic.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/tree/test_Tree_v1.html", dojo.moduleUrl("dijit","tests/tree/test_Tree_v1.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/_base/test_FocusManager.html", dojo.moduleUrl("dijit","tests/_base/test_FocusManager.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/_base/test_focusWidget.html", dojo.moduleUrl("dijit","tests/_base/test_focusWidget.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/_base/test_placeStrict.html", dojo.moduleUrl("dijit","tests/_base/test_placeStrict.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/_base/test_typematic.html", dojo.moduleUrl("dijit","tests/_base/test_typematic.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/_editor/test_CustomPlugin.html", dojo.moduleUrl("dijit","tests/_editor/test_CustomPlugin.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/_editor/test_RichText.html", dojo.moduleUrl("dijit","tests/_editor/test_RichText.html"+userArgs), 99999999); + doh.registerUrl("dijit/tests/_editor/test_ToggleDir.html", dojo.moduleUrl("dijit","tests/_editor/test_ToggleDir.html"+userArgs), 99999999); + doh.registerUrl("dijit/themes/templateThemeTest.html", dojo.moduleUrl("dijit","themes/templateThemeTest.html"+userArgs), 99999999); + doh.registerUrl("dijit/themes/themeTester.html", dojo.moduleUrl("dijit","themes/themeTester.html"+userArgs), 99999999); + if(dojo.isIE){ + doh.registerUrl("dijit/themes/themeTesterQuirk.html", dojo.moduleUrl("dijit","themes/themeTesterQuirk.html"+userArgs), 99999999); + } +} +}catch(e){ + doh.debug(e); +} + +} diff --git a/includes/js/dijit/tests/module.js b/includes/js/dijit/tests/module.js new file mode 100644 index 0000000..f8a736c --- /dev/null +++ b/includes/js/dijit/tests/module.js @@ -0,0 +1,21 @@ +if(!dojo._hasResource["dijit.tests.module"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.module"] = true; +dojo.provide("dijit.tests.module"); + +try{ + dojo.require("dijit.tests._base.manager"); + dojo.require("dijit.tests._base.viewport"); + dojo.require("dijit.tests._base.wai"); + dojo.require("dijit.tests._Templated"); + dojo.require("dijit.tests.widgetsInTemplate"); + dojo.require("dijit.tests.Container"); + dojo.require("dijit.tests.layout.ContentPane"); + dojo.require("dijit.tests.ondijitclick"); + dojo.require("dijit.tests.form.Form"); +}catch(e){ + doh.debug(e); +} + + + +} diff --git a/includes/js/dijit/tests/ondijitclick.html b/includes/js/dijit/tests/ondijitclick.html new file mode 100644 index 0000000..36de0e0 --- /dev/null +++ b/includes/js/dijit/tests/ondijitclick.html @@ -0,0 +1,95 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+
+ <title>Test Dijit Internal Event: "ondijitclick"</title>
+
+ <script type="text/javascript" src="../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+ <script type="text/javascript">
+ dojo.require("doh.runner");
+ dojo.require("dijit._Widget");
+ dojo.require("dojo.parser");
+
+ dojo.declare("dijit.WidgetWithOndijitclick",
+ dijit._Widget,
+ {
+ clickCount: 0,
+ _onClick: function() {
+ this.clickCount++;
+ },
+ postCreate: function() {
+ this.connect(this.domNode, "ondijitclick", "_onClick");
+ }
+ }
+ );
+
+ dojo.addOnLoad(function(){
+ doh.register("ondijitclick",
+ [
+ {
+ name: "ondijitclick fires once on a space-key-up",
+ runTest: function(t){
+ var w = dijit.byId("widget1");
+ if (dojo.isSafari){ // safari has error
+ this.name += " * SKIPPED *";
+ return;
+ }
+
+ // simulate space up
+ if (document.createEvent){
+ var e = document.createEvent("KeyboardEvent");
+ e.initKeyEvent("keyup",true,true,null,false,false,false,false,32,0);
+ w.domNode.focus();
+ w.clickCount = 0;
+ w.domNode.dispatchEvent(e);
+ t.is(1, w.clickCount);
+ }
+ }
+ },
+ {
+ name: "ondijitclick fires once on an enter-key-down",
+ runTest: function(t){
+ var w = dijit.byId("widget1");
+ if (dojo.isSafari){ // safari has error
+ this.name += " * SKIPPED *";
+ return;
+ }
+
+ // simulate enter down
+ if (document.createEvent && !dojo.isSafari){
+ var e = document.createEvent("KeyboardEvent");
+ e.initKeyEvent("keydown",true,true,null,false,false,false,false,13,0);
+ w.domNode.focus();
+ w.clickCount = 0;
+ w.domNode.dispatchEvent(e);
+ t.is(1, w.clickCount);
+ }
+ }
+ },
+ {
+ name: "ondijitclick fires once on a mouse click",
+ runTest: function(t){
+ var w = dijit.byId("widget1");
+
+ // simulate enter up
+ if (document.createEvent){
+ var e = document.createEvent("MouseEvents");
+ e.initMouseEvent('click', true, true, document.defaultView, 1, 0, 0, 3, 3, false, false, false, false, 0, w.domNode);
+ w.clickCount = 0;
+ w.domNode.dispatchEvent(e);
+ t.is(1, w.clickCount);
+ }
+ }
+ }
+ ]
+ );
+ doh.run();
+ });
+
+ </script>
+</head>
+<body class="tundra">
+ <div id="widget1" dojoType="dijit.WidgetWithOndijitclick"></div>
+</body>
+</html>
diff --git a/includes/js/dijit/tests/ondijitclick.js b/includes/js/dijit/tests/ondijitclick.js new file mode 100644 index 0000000..6fd67ea --- /dev/null +++ b/includes/js/dijit/tests/ondijitclick.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests.ondijitclick"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.ondijitclick"] = true; +dojo.provide("dijit.tests.ondijitclick"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests.ondijitclick", dojo.moduleUrl("dijit", "tests/ondijitclick.html")); +} + +} diff --git a/includes/js/dijit/tests/runTests.html b/includes/js/dijit/tests/runTests.html new file mode 100644 index 0000000..9395bd0 --- /dev/null +++ b/includes/js/dijit/tests/runTests.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+ <head>
+ <title>Dijit Unit Test Runner</title>
+ <meta http-equiv="REFRESH" content="0;url=../../util/doh/runner.html?testModule=dijit.tests.module"></HEAD>
+ <BODY>
+ Redirecting to D.O.H runner.
+ </BODY>
+</HTML>
diff --git a/includes/js/dijit/tests/test.html b/includes/js/dijit/tests/test.html new file mode 100644 index 0000000..c793092 --- /dev/null +++ b/includes/js/dijit/tests/test.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>widget infrastructure test</title> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="isDebug: true"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Button"); + + dojo.addOnLoad(function(){ + for(var i=1; i<=3; i++){ + var node = dojo.byId("b"+i); + var myButton = new dijit.form.Button(null, node); + } + }); + + </script> + + <style type="text/css"> + + @import "../../dojo/resources/dojo.css"; + @import "../themes/tundra/tundra.css"; + @import "css/dijitTests.css"; + + body { padding: 5em; } + </style> +</head> + +<body class="tundra"> + <button id="b1" style="background: yellow;">button #1</button> + <button id="b2" style="background: orange;">button #2</button> + <button id="b3" style="background: violet;">button #3</button> +</body> +</html> diff --git a/includes/js/dijit/tests/test_Calendar.html b/includes/js/dijit/tests/test_Calendar.html new file mode 100644 index 0000000..df86ba0 --- /dev/null +++ b/includes/js/dijit/tests/test_Calendar.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Calendar Widget Test</title> + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true, extraLocale: ['en-us', 'ar-sy', 'es-es', 'zh-cn']"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit._Calendar"); + dojo.require("dojo.date.locale"); + dojo.require("dojo.parser"); // scan page for widgets + + dojo.addOnLoad(function(){ + //Need to declare BigCalendar here in an addOnLoad block so that it works + //with xdomain loading, where the dojo.require for dijit._Calendar + //may load asynchronously. This also means we cannot have HTML + //markup in the body tag for BigCalendar, but instead inject it in this + //onload handler after BigCalendar is defined. + dojo.declare("BigCalendar", dijit._Calendar, { + templatePath: "../../dijit/tests/_altCalendar.html" + }); + + var bigCalendar = dojo.byId("calendar5"); + bigCalendar.setAttribute("dojoType", "BigCalendar"); + dojo.parser.parse(bigCalendar.parentNode); + }); + + function myHandler(id,newValue){ + console.debug("onChange for id = " + id + ", value: " + newValue); + } + </script> + </head> + <body> + <h1 class="testTitle">Dijit Calendar Test</h1> + + before + <input id="calendar1" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])" lang="en-us"> + <input id="calendar2" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])" lang="es-es"> + <input id="calendar3" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])" lang="zh-cn"> + <input id="calendar4" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])" lang="ar-sy"> + after + <p> + <a href="#" + onClick="for(var i=1; i!=5; i++){ + var c = dijit.byId('calendar'+i); + c.isDisabledDate=dojo.date.locale.isWeekend; + c._populateGrid(); + } + ">disable weekends</a> + </p> + + <p>Customized template with "today" button</p> + <style> + #calendar5 .dijitCalendarDateTemplate { height: 50px; width: 50px; border: 1px solid #ccc; vertical-align: top } + #calendar5 .dijitCalendarDateLabel, #calendar5 .dijitCalendarDateTemplate { text-align: inherit } + #calendar5 .dijitCalendarDayLabel { font-weight: bold } + #calendar5 .dijitCalendarSelectedYear { font-size: 1.5em } + #calendar5 .dijitCalendarMonth { font-family: serif; letter-spacing: 0.2em; font-size: 2em } + </style> + <script> + dojo.declare("BigCalendar", dijit._Calendar, { + templatePath: "../../dijit/tests/_altCalendar.html" + }); + </script> + <div> + <!-- Parent div used so we have a handle to use for dojo.parser.parse after BigCalendar gets defined. --> + <!-- The input below will be replaced by BigCalendar which is defined in a dojo.addOnLoad block. --> + <input id="calendar5" dayWidth="abbr" value="2008-03-15"> + </div> +<!-- + <input id="calendar5" dojoType="dijit._Calendar" dayWidth="abbr" templatePath="../dijit/tests/_altCalendar.html" value="2008-03-15"> + --> + </body> +</html> diff --git a/includes/js/dijit/tests/test_ColorPalette.html b/includes/js/dijit/tests/test_ColorPalette.html new file mode 100644 index 0000000..38675ea --- /dev/null +++ b/includes/js/dijit/tests/test_ColorPalette.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>ColorPalette Test</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script language="JavaScript" type="text/javascript"> + dojo.require("dijit.ColorPalette"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var palette; + function init(){ + var date0 = new Date(); + palette = new dijit.ColorPalette({palette: "7x10", id: "progPalette"}, dojo.byId("programPalette")); + console.log("creation time: " + (new Date() - date0) ); + } + + dojo.addOnLoad(init); + + function setColor(color){ + var theSpan = dojo.byId("outputSpan"); + theSpan.style.color = color; + theSpan.innerHTML = color; + } + </script> +</head> + +<body> + + <h1 class="testTitle">dijit.ColorPalette test:</h1> + + <p>Default color palette (7x10):</p> + <div dojoType="dijit.ColorPalette" onChange="setColor(this.value);"></div> + + Test color is: <span id="outputSpan"></span>. + + <p>Small color palette (3x4):</p> + <div dojoType="dijit.ColorPalette" palette="3x4"></div> + + <p>Default color palette (7x10) created via createWidget:</p> + <div id="programPalette"></div> + +</body> +</html> diff --git a/includes/js/dijit/tests/test_Declaration.html b/includes/js/dijit/tests/test_Declaration.html new file mode 100644 index 0000000..4e909b9 --- /dev/null +++ b/includes/js/dijit/tests/test_Declaration.html @@ -0,0 +1,66 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo Toolkit - Declaration test</title> + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "../themes/tundra/tundra.css"; + @import "css/dijitTests.css"; + </style> + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript"> + dojo.require("dijit.Declaration"); + dojo.require("dijit.ProgressBar"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> +</head> +<body class="tundra"> + <h3>Simple macro:</h3> + <p>(Check to make sure that links contain employee number) + <div dojoType="dijit.Declaration" widgetClass="Employee" defaults="{ empid: 123, name: '' }"> + <span>${name}</span> + <a href="update.php?id=${empid}">update</a> + <a href="delete.php?id=${empid}">delete</a> + </div> + <div dojoType="Employee" empid="100" name="Alan Allen"></div> + <div dojoType="Employee" empid="101" name="Bob Brown"></div> + <div dojoType="Employee" empid="102" name="Cathy Cameron"></div> + + <h3>Using dojoAttachEvent, dojoAttachPoint</h3> + <div dojoType="dijit.Declaration" widgetClass="HideButton"> + XXX<button dojoAttachEvent="onclick" dojoAttachPoint="containerNode"></button>XXX + <script type='dojo/method' event='onclick'> + this.domNode.style.display="none"; + </script> + </div> + <button dojoType="HideButton">Click to hide</button> + <button dojoType="HideButton">Click to hide #2</button> + + <h3>Extending another widget</h3> + <p>HideButton2 extends HideButton (above) and changes the template (but keeps the onclick handler).</p> + <span dojoType="dijit.Declaration" widgetClass="HideButton2" mixins="HideButton"> + YYY<button dojoAttachEvent="onclick" dojoAttachPoint="containerNode"></button>YYY + </span> + <button dojoType="HideButton2">Hide me extended</button> + <button dojoType="HideButton2">Hide me extended #2</button> + + <h3>Something more complicated:</h3> + <div dojoType="dijit.Declaration" widgetClass="foo" defaults="{ foo: 'thud', progress: 10 }"> + <script type='dojo/connect' event='startup'> + this.baz.innerHTML += " (modified by dojo/connect event=startup) "; + </script> + + <p>thinger blah stuff ${foo}</p> + + <div style="width:400px" annotate="true" maximum="200" + progress="${progress}" dojoType="dijit.ProgressBar"></div> + <p dojoAttachPoint='baz'>baz thud</p> + </div> + + <div dojoType="foo" foo="blah" progress="50"></div> + <div dojoType="foo" foo="thinger" progress="73"></div> + +</body> +</html> diff --git a/includes/js/dijit/tests/test_Dialog.html b/includes/js/dijit/tests/test_Dialog.html new file mode 100644 index 0000000..0eabc76 --- /dev/null +++ b/includes/js/dijit/tests/test_Dialog.html @@ -0,0 +1,408 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dialog Widget Dojo Tests</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + + body { font-family : sans-serif; } + form { margin-bottom : 0; } + table { border: none; } + #dialog3_underlay { background-color: #027 } + </style> + + <script type="text/javascript" + djConfig="parseOnLoad: true, isDebug: true" + src="../../dojo/dojo.js"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.Dialog"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.TextBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.TimeTextBox"); + dojo.require("dijit.form.FilteringSelect"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.Menu"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + // create a do nothing, only for test widget + dojo.declare("dijit.TestWidget", + [dijit._Widget, dijit._Templated], { + templateString: "<div style='margin: 10px; border: inset #700 4px; padding: 5px;' dojoAttachPoint='containerNode'></div>" + }); + + // make dojo.toJson() print dates correctly (this feels a bit dirty) + Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});}; + + var thirdDlg; + function createDialog() { + if(!thirdDlg){ + var pane = dojo.byId('thirdDialog'); + pane.style.width = "300px"; + thirdDlg = new dijit.Dialog({ + id: "dialog3", + refocus:false, + title: "Programatic Dialog Creation" + },pane); + } + setTimeout(function(){thirdDlg.show();},"3000"); + } + </script> +</head> +<body> +<h1 class="testTitle">Dijit layout.Dialog tests</h1> +<button dojoType="dijit.form.Button" onclick="dijit.byId('dialog1').show()">Show Dialog</button> | + +<div dojoType="dijit.Dialog" id="dialog1" title="First Dialog" + onfocus="console.log('user focus handler')" + onblur="console.log('user blur handler')" + execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));"> + <table> + <tr> + <td><label for="name">Name: </label></td> + <td><input dojoType=dijit.form.TextBox type="text" name="name" id="name"></td> + </tr> + <tr> + <td><label for="loc">Location: </label></td> + <td><input dojoType=dijit.form.TextBox type="text" name="loc" id="loc"></td> + </tr> + <tr> + <td><label for="date">Date: </label></td> + <td><input dojoType=dijit.form.DateTextBox type="text" name="date" id="date"></td> + </tr> + <tr> + <td><label for="date">Time: </label></td> + <td><input dojoType=dijit.form.TimeTextBox type="text" name="time" id="time"></td> + </tr> + <tr> + <td><label for="desc">Description: </label></td> + <td><input dojoType=dijit.form.TextBox type="text" name="desc" id="desc"></td> + </tr> + <tr> + <td colspan="2" align="center"> + <button dojoType=dijit.form.Button type="submit">OK</button></td> + </tr> + </table> +</div> + + +<button dojoType="dijit.form.Button" onclick="createDialog()" title="shows after 3 second delay, with blue background">Programatic Dialog (3 second delay)</button> | + + +<div id="thirdDialog" style="display: none;"> + <form> + <input> + <br> + <button>hello</button> + <br> + <select> + <option>Lorem</option> + <option>ipsum</option> + <option>dolor</option> + <option>sit</option> + <option>amet</option> + </select> + </form> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> +</div> + +<button dojoType="dijit.form.Button" onclick="dijit.byId('tabDialog').show()">Show TabContainer Dialog</button> | + +<div dojoType="dijit.Dialog" id="tabDialog" title="TabContainer Dialog"> + <div dojoType="dijit.layout.TabContainer" style="width: 400px; height: 400px;"> + <div dojoType="dijit.layout.ContentPane" title="First tab"> + <p> + This is the first tab. + </p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + </div> + <div dojoType="dijit.layout.ContentPane" title="Second tab"> + <p> + This is the second tab. + </p> + <p> + Make it overflow. <a href="http://www.lipsum.com/">ipsum dolor sit amet</a>, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + </div> + </div> +</div> + +<button dojoType="dijit.form.Button" onclick="dijit.byId('fifthDlg').show();">Test slow loading HREF Dialog</button> | + +<div dojoType="dijit.Dialog" id="fifthDlg" href="layout/getResponse.php?delay=3000&messId=3" + style="width: 300px" title="From HREF (slow network simulated)"></div> + +<button dojoType="dijit.form.Button" onclick="dijit.byId('dialog6').show()">Show File Dialog</button> + +<div dojoType="dijit.Dialog" id="dialog6" title="File Dialog" + onfocus="console.log('user focus handler')" + onblur="console.log('user blur handler')" + execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));" style="width: 350px"> + <!-- note: style="width: 350px" to workaround FF bug where width is too short, see http://trac.dojotoolkit.org/ticket/5976 --> + <label for="afile">ID File: </label> + <input dojoType=dijit.form.TextBox type="file" name="afile" id="afile"> +</div> + +<p>Test refocus="false", click programatic dialog, focus input below, wait. close dialog.</p> + +<p><b><i>(scroll down to see more links to click, for testing positioning / scroll handling)</i></b></p> + +<p> +Here's a form. Try clicking the programatic dialog link, then focusing on the form. +After the dialog closes focus should be returned to the form +</p> + +<form> +<input> +<br> +<button>hello</button> +<br> +<select> + <option>Lorem</option> + <option>ipsum</option> + <option>dolor</option> + <option>sit</option> + <option>amet</option> +</select> +</form> + + +<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis +imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. +</p> +<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam +ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque +nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus +lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus +est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis +dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, +nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent +pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti +sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. +</p> +<form> + <center> + <select> + <option>1</option> + <option>2</option> + </select> + </center> +</form> +<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique +et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel +ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices +vitae, nisl. Class aptent taciti sociosqu ad litora torquent per +conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio +luctus eleifend. Proin massa libero, ultricies non, tincidunt a, +vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at, +egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at +felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id +risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt +tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat +turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam +consectetuer dapibus eros. Aliquam nisl. +</p> +<p> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean +semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin +porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. +Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. +Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae +risus. +</p> +<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis +imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. +</p> +<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam +ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque +nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus +lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus +est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis +dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, +nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent +pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti +sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. +</p> +<form> + <center> + <select> + <option>1</option> + <option>2</option> + </select> + </center> +</form> +<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique +et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel +ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices +vitae, nisl. Class aptent taciti sociosqu ad litora torquent per +conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio +luctus eleifend. Proin massa libero, ultricies non, tincidunt a, +vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at, +egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at +felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id +risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt +tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat +turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam +consectetuer dapibus eros. Aliquam nisl. +</p> + +<a href="javascript:dijit.byId('dialog1').show()">Show Dialog</a> +<p> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean +semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin +porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. +Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. +Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae +risus. +</p> +<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis +imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. +</p> +<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam +ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque +nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus +lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus +est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis +dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, +nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent +pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti +sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. +</p> +<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique +et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel +ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices +vitae, nisl. Class aptent taciti sociosqu ad litora torquent per +conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio +luctus eleifend. Proin massa libero, ultricies non, tincidunt a, +vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at, +egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at +felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id +risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt +tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat +turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam +consectetuer dapibus eros. Aliquam nisl. +</p> + +<p> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean +semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin +porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. +Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. +Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae +risus. +</p> +<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis +imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. +</p> +<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam +ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque +nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus +lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus +est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis +dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, +nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent +pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti +sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. +</p> +<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique +et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel +ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices +vitae, nisl. Class aptent taciti sociosqu ad litora torquent per +conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio +luctus eleifend. Proin massa libero, ultricies non, tincidunt a, +vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at, +egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at +felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id +risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt +tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat +turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam +consectetuer dapibus eros. Aliquam nisl. +</p> + +</body> +</html> + diff --git a/includes/js/dijit/tests/test_Dialog_focusDestroy.html b/includes/js/dijit/tests/test_Dialog_focusDestroy.html new file mode 100644 index 0000000..187a5d4 --- /dev/null +++ b/includes/js/dijit/tests/test_Dialog_focusDestroy.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>Dialog Widget Dojo Tests</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + + body { font-family : sans-serif; } + form { margin-bottom : 0; } + table { border: none; } + #dialog3_underlay { background-color: #027 } + </style> + + <script type="text/javascript" + djConfig="parseOnLoad: true, isDebug: true" + src="../../dojo/dojo.js"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.Dialog"); + dojo.require("dijit.form.Button"); + + // make dojo.toJson() print dates correctly (this feels a bit dirty) + function createAndShow() { + var node = document.createElement("div"); + dojo.body().appendChild(node); + var dlg = new dijit.Dialog({ title: "test input focus" }, node); + + var input = document.createElement("input"); + dojo.attr(input,"tabIndex","0"); + dlg.containerNode.appendChild(input); + + var btn = new dijit.form.Button({ label: "Close" }); + dlg.containerNode.appendChild(btn.domNode); + + dojo.connect(btn, "onClick", function(){ + console.log("destroying, while visible"); + dlg.destroy(); + + }); + dlg.show(); + } + </script> +</head> +<body> +<h1 class="testTitle">Dijit layout.Dialog tests</h1> + +<p>If you input this box, you can type. You should be able to type and use backspace/etc +when you destroy the visible dialog. refs <a href="http://trac.dojotoolkit.org/ticket/5351">#5351</a> +</p> + +<input id="testInput" name="foo" value="bar" /> + +<button dojoType="dijit.form.Button" onclick="createAndShow()">Show Dialog</button> + +</body> +</html> + diff --git a/includes/js/dijit/tests/test_Editor.html b/includes/js/dijit/tests/test_Editor.html new file mode 100644 index 0000000..b73ecea --- /dev/null +++ b/includes/js/dijit/tests/test_Editor.html @@ -0,0 +1,153 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Editor Test</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.Editor"); + dojo.require("dijit._editor.plugins.AlwaysShowToolbar"); + dojo.require("dijit._editor.plugins.EnterKeyHandling"); + dojo.require("dijit._editor.plugins.FontChoice"); // 'fontName','fontSize','formatBlock' + dojo.require("dijit._editor.plugins.TextColor"); + dojo.require("dijit._editor.plugins.LinkDialog"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> +</head> +<body> + <div dojoType="dijit.Editor" id="automated" height="1.5em" plugins="[]" focusOnLoad="true" style="border:0px;" + >Automated Test - all check boxes should be checked<script type='dojo/method' event='onFocus'> + if(!document.getElementById('onFocusFired').checked){ + document.getElementById('onFocusFired').checked=true; + document.getElementById('initialValueOK').checked = (dijit.byId('automated').getValue() == 'Automated Test - all check boxes should be checked'); + dijit.byId('automated').document.execCommand('selectall', false, false); + document.getElementById('onChangeOKnow').checked=true; + dijit.byId('automated').document.execCommand('underline', false, false); + setTimeout(function(){dijit.byId('editor1').focus();}, 0); + } + </script + ><script type='dojo/method' event='onBlur'> + if(!document.getElementById('onBlurFired').checked){ + document.getElementById('onBlurFired').checked=true; + dijit.byId('automated').setDisabled(true); + setTimeout(function(){ try { + dijit.byId('automated').document.execCommand('bold', false, false); + document.getElementById('disabledOK').checked = (dijit.byId('automated').document.queryCommandState('bold') == false); + } catch(e) { document.getElementById('disabledOK').checked = true; }}, 0); + } + </script + ><script type='dojo/method' event='onChange'> + if(document.getElementById('onChangeOKnow').checked && !document.getElementById('onChangeFired').checked){ + document.getElementById('onChangeFired').checked=true; + } + </script + ></div> + Focus:<input type="checkbox" id="onFocusFired" disabled autoComplete="off"> + Value:<input type="checkbox" id="initialValueOK" disabled autoComplete="off"> + <input type="checkbox" id="onChangeOKnow" disabled autoComplete="off" style="display:none;"> + Change:<input type="checkbox" id="onChangeFired" disabled autoComplete="off"> + Blur:<input type="checkbox" id="onBlurFired" disabled autoComplete="off"> + Disabled:<input type="checkbox" id="disabledOK" disabled autoComplete="off"> + <br> + <br> + + <h1 class="testTitle"><label for="editor1">Editor + Plugins Test</label></h1> + <h2>Created from div</h2> + <div style="border: 1px solid black;"> + <div dojoType="dijit.Editor" id="editor1" + onChange="console.log('editor1 onChange handler: ' + arguments[0])" + ><p>This instance is created from a div directly with default toolbar and plugins</p></div> + </div> + <button onClick="dijit.byId('editor1').destroy()">destroy</button> + <button onclick="console.log(dijit.byId('editor1').getValue().length)">getValue</button> + <hr/> + + <h2>Created from textarea,auto-expanding</h2> + <div style="border: 1px dotted black;"> + <h3><label for="thud">thud - from textarea</label></h3> + <textarea dojoType="dijit.Editor" height="" + onChange="console.log('thud onChange handler: ' + arguments[0])" + extraPlugins="['dijit._editor.plugins.AlwaysShowToolbar']" + styleSheets="../../dojo/resources/dojo.css" id="thud"> + <p> + This editor is created from a textarea with AlwaysShowToolbar plugin (do not forget to set height=""). + </p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + </textarea> + <h3>..after</h3> + </div> + <hr/> + + <h2>Optional toolbar buttons</h2> + <div style="border: 1px dotted black;"> + <h3><label for="blah">blah entry</label></h3> + <textarea dojoType="dijit.Editor" + plugins="['bold','italic','|','createLink','foreColor','hiliteColor',{name:'dijit._editor.plugins.FontChoice', command:'fontName', generic:true},'fontSize','formatBlock','insertImage']" + styleSheets="../../dojo/resources/dojo.css" id="blah"> + This instance includes optional toolbar buttons which pull in additional ui (dijit) code. + Note the dojo.require() statements required to pull in the associated editor plugins to make + this work. + <br> + <span style="font-family: serif">This is serif.</span> + <br> + <span style="font-family: sans-serif">This is sans-serif.</span> + <br> + <span style="font-family: monospace">This is monospace.</span> + <br> + <span style="font-family: cursive">This is cursive.</span> + <br> + <span style="font-family: fantasy">This is fantasy.</span> + <br> + </textarea> + <h3>..after</h3> + <button onclick="alert(dijit.byId('blah').getValue());">getValue</button> + </div> + <hr/> + + <h2>Plugins specified</h2> + <div style="border: 1px dotted black;"> + <h3><label for="blah2">Another blah entry</label></h3> + <textarea dojoType="dijit.Editor" + plugins="['bold','italic','|',{name:'dijit._editor.plugins.EnterKeyHandling'},{name:'dijit._editor.plugins.FontChoice', command:'fontName', custom:['Verdana','Myriad','Garamond','Apple Chancery','Hiragino Mincho Pro']}, {name:'dijit._editor.plugins.FontChoice', command:'fontSize', custom:[3,4,5]}]" + styleSheets="../../dojo/resources/dojo.css" id="blah2"> + This instance demos how to: + <ol> + <li>specify which plugins to load (see the plugins property): this instance loads EnterKeyHandling plugin, among others;</li> + <li>specify options for a plugin (see the last item in the plugins array)</li> + </ol> + </textarea> + <h3>..after</h3> + </div> + <hr/> + + <h2>Programmatic creation</h2> + <div id="programmatic">This div will become an editor.</div> + <button + id="create" + onclick="new dijit.Editor({}, dojo.byId('programmatic')); dojo.query('#create').orphan();"> + create static editor + </button> + <div id="programmatic2">This div will become an auto-expanding editor.</div> + <button + id="create2" + onclick="new dijit.Editor({height: '', extraPlugins: ['dijit._editor.plugins.AlwaysShowToolbar']}, dojo.byId('programmatic2')); dojo.query('#create2').orphan();"> + create expanding editor + </button> +</body> +</html> diff --git a/includes/js/dijit/tests/test_InlineEditBox.html b/includes/js/dijit/tests/test_InlineEditBox.html new file mode 100644 index 0000000..ea8d7a8 --- /dev/null +++ b/includes/js/dijit/tests/test_InlineEditBox.html @@ -0,0 +1,231 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Inline Edit Box Test</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + + .inlineEdit { background-color: #CCC76A; } + + /* some style rules on nodes just to test that style gets copied to the edit widget */ + p { font-family: cursive; } + .letter p { font-family: monospace; } + h3 { font-family: helvetica; font-style: italic; } + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.InlineEditBox"); + dojo.require("dijit.form.Textarea"); + dojo.require("dijit.form.TextBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.CurrencyTextBox"); + dojo.require("dojo.currency"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.form.FilteringSelect"); + dojo.require("dijit.form.NumberSpinner"); + dojo.require("dijit.form.Slider"); + + dojo.require("dijit.Editor"); + dojo.require("dijit._editor.plugins.AlwaysShowToolbar"); + + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function myHandler(id,newValue){ + console.debug("onChange for id = " + id + ", value: " + newValue); + }; + /* + dojo.addOnLoad(function(){ + dojo.subscribe("widgetFocus", function(widget){ + console.log("focused on widget " + (widget?widget:"nothing")); + }); + dojo.subscribe("widgetBlur", function(widget){ + console.log("blurred widget " + (widget?widget:"nothing")); + }); + dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));}); + }); + */ + </script> + </head> + <body> + <h1 class="testTitle">Dijit InlineEditBox Test</h1> + + <span dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" + url="_data/states.json"></span> + <span dojoType="dojo.data.ItemFileReadStore" jsId="productStore"> + <script type="dojo/method"> + this._jsonData = + { identifier: 'name', + label: 'name', + items: [ + { name: "refrigerator" }, + { name: "freezer" }, + { name: "stove" }, + { name: "heater" }, + ]}; + </script> + </span> + + <h2>Form Letter with blanks</h2> + <div class="letter"> + <h3 id="editable" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" autoSave="true" title="company name"></h3> + <p> + Dear <span dojoType="dijit.InlineEditBox" width="200px" title="recipient name"></span>, + </p> + <p class="letter"> + Thank you for your recent order. + Please remit + <span dojoType="dijit.InlineEditBox" editor="dijit.form.CurrencyTextBox" editorParams="{currency: 'USD'}" width="100px" title="dollar amount"></span> for + your purchase of + <span dojoType="dijit.InlineEditBox" editor="dijit.form.NumberSpinner" editorParams="{constraints: {places:0} }" width="70px" title="quantity"></span> deluxe + <span dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox" title="item name" + editorParams="{searchAttr: 'name', store: productStore, autocomplete: false, hasDownArrow: false}" + width="200px"></span> on + <span dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="200px" title="purchase date as mm/dd/yy"></span> in + <span dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect" + editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: true}" + width="200px" title="state of purchase"></span>. + </p> + <p dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea" title="additional details"></p> + <p> + Sincerely, + </p> + <span style="margin-left: 2em; font-family: cursive;" dojoType="dijit.InlineEditBox" width="400px" title="sender name" ></span> + </div> + <hr style="margin-bottom: 1em;"> + + <h2>Form Letter with predefined values, and no auto-save</h2> + <div class="letter"> + <h3 id="editable2" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" autoSave="false" title="company name"> + Bob Vance Refrigeration + </h3> + <p> + Dear <span dojoType="dijit.InlineEditBox" width="200px" autoSave="false" title="recipient name">John</span>, + </p> + <p class="letter"> + Thank you for your recent order. + Please remit + <span dojoType="dijit.InlineEditBox" editor="dijit.form.CurrencyTextBox" editorParams="{currency: 'USD'}" width="100px" autoSave="false" title="dollar amount">$2,000</span> + for your purchase of + <span dojoType="dijit.InlineEditBox" editor="dijit.form.NumberSpinner" editorParams="{constraints: {places:0} }" width="70px" autoSave="false" title="quantity">3</span> + deluxe + <span dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox" + editorParams="{searchAttr: 'name', store: productStore, autocomplete: false, hasDownArrow: false}" + width="200px" autoSave="false" title="item name">refrigerators</span> + on + <span dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="200px" autoSave="false" title="purchase date as mm/dd/yy">01/01/2007</span> + in + <span dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect" + editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: false}" + width="200px" autoSave="false" title="state of purchase"> + Pennsylvania + </span>. + </p> + <p dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea" title="additional details"> + We sincerely appreciate your business and hope we can do business again. + </p> + <p> + Sincerely, + </p> + <span style="margin-left: 2em; font-family: cursive;" dojoType="dijit.InlineEditBox" width="400px" autoSave="false" title="sender name">Bob Vance</span> + </div> + <hr style="margin-bottom: 1em;"> + + + <h2>Inline-block Text (of 400px width)</h2> + <div> + The following section uses inline block text of 400px. + When clicking the editable text it should bring up an editor which is also 400px wide. + </div> + (before plain inline) <fieldset class="dijitInline"><div style="width: 400px;">hello world</div></fieldset> (after plain inline) + <br> + (before editable inline) + <fieldset class="dijitInline"><div dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" width="400px" style="width: 400px;"> + hello world + </div></fieldset> + (after editable inline) + <hr style="width:100%;"> + + <h2>Pararagraph</h2> + (before plain paragraph) + <p> + Aliquam vitae enim. Duis scelerisque metus auctor est venenatis +imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. + </p> + (before editable paragraph. the editable paragraph has Save/Cancel buttons when open.) + <p id="areaEditable" dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea"> + Aliquam vitae enim. Duis scelerisque metus auctor est venenatis +imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. + </p> + These buttons will + <button onClick="dijit.byId('areaEditable').setDisabled(true)">disable</button> / + <button onClick="dijit.byId('areaEditable').setDisabled(false)">enable</button> + the InlineEditBox above. + <hr style="width:100%;"> + + <h2>Editor</h2> + <p id="inlineRTE" dojoType="dijit.InlineEditBox" editor="dijit.Editor" + autoSave="false" renderAsHtml="true" + editorParams="{height: '', extraPlugins: ['dijit._editor.plugins.AlwaysShowToolbar']}"> + <b>Aliquam</b> vitae enim. <i>Duis</i> scelerisque metus auctor est venenatis +imperdiet. <u>Fusce</u> dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. + </p> + + <h2>FilteringSelect (no down arrow, and save/cancel buttons):</h2> + before + <span id="filteringSelect2" dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect" + editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: false}" + width="200px" autoSave="false"> + Indiana + </span> + after + <hr style="width:100%;"> + + <h2>Programmatically created:</h2> + before block<div style="display:block;" id="programmatic">Click here to edit a block programmatically created inline edit region</div>after + <script type="text/javascript"> + // See if we can make a widget in script + dojo.addOnLoad(function(){ + var inlineWidget = new dijit.InlineEditBox({renderAsHtml: true}, 'programmatic'); + }); + </script> + <hr style="width:100%;"> + </body> +</html> diff --git a/includes/js/dijit/tests/test_Menu.html b/includes/js/dijit/tests/test_Menu.html new file mode 100644 index 0000000..a0bed27 --- /dev/null +++ b/includes/js/dijit/tests/test_Menu.html @@ -0,0 +1,270 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + + <title>Menu System Test</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script language="JavaScript" type="text/javascript"> + dojo.require("dijit.Menu"); + dojo.require("dijit.ColorPalette"); + dojo.require("dijit._Calendar"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + + <script language="Javascript" type="text/javascript"> + function createMenu() { + // create a menu programmatically + function fClick() {alert("clicked!")}; + + pMenu = new dijit.Menu({targetNodeIds:["prog_menu"], id:"progMenu"}); + pMenu.addChild(new dijit.MenuItem({label:"Programmatic Context Menu", disabled:true})); + pMenu.addChild(new dijit.MenuSeparator()); + pMenu.addChild(new dijit.MenuItem({label:"Simple menu item", onClick:fClick})); + pMenu.addChild(new dijit.MenuItem({label:"Another menu item", onClick:fClick})); + pMenu.addChild(new dijit.MenuItem({label:"With an icon", iconClass:"dijitEditorIcon dijitEditorIconCut", onClick:fClick})); + var mItem = new dijit.MenuItem({label:"dojo.event clicking"}); + dojo.connect(mItem, "onClick", function(){alert("click! handler created via dojo.connect()")}); + pMenu.addChild(mItem); + + var pSubMenu = new dijit.Menu({parentMenu:pMenu, id:"progSubMenu"}); + pSubMenu.addChild(new dijit.MenuItem({label:"Submenu item", onClick:fClick})); + pSubMenu.addChild(new dijit.MenuItem({label:"Submenu item", onClick:fClick})); + pMenu.addChild(new dijit.PopupMenuItem({label:"Submenu", popup:pSubMenu, id:"progPopupMenuItem"})); + + pMenu.startup(); + + dojo.byId("prog_menu").innerHTML="This div has a programmatic context menu on it that's different to the page menu." + dojo.byId("createButton").disabled = true; + dojo.byId("destroyButton").disabled = false; + } + + function destroyMenu(){ + pMenu.destroyRecursive(); + dojo.byId("prog_menu").innerHTML="No programmatic menu on this div, should get page level menu."; + dojo.byId("createButton").disabled = false; + dojo.byId("destroyButton").disabled = true; + } + </script> +</head> +<body> + +<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;"> + <div dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</div> + <div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div> + <div dojoType="dijit.MenuSeparator"></div> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" + onClick="alert('not actually cutting anything, just a test!')">Cut</div> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" + onClick="alert('not actually copying anything, just a test!')">Copy</div> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste" + onClick="alert('not actually pasting anything, just a test!')">Paste</div> + <div dojoType="dijit.MenuSeparator"></div> + <div dojoType="dijit.PopupMenuItem"> + <span>Enabled Submenu</span> + <div dojoType="dijit.Menu" id="submenu2"> + <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div> + <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div> + <div dojoType="dijit.PopupMenuItem"> + <span>Deeper Submenu</span> + <div dojoType="dijit.Menu" id="submenu4""> + <div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div> + <div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div> + </div> + </div> + </div> + </div> + <div dojoType="dijit.PopupMenuItem" disabled="true"> + <span>Disabled Submenu</span> + <div dojoType="dijit.Menu" id="submenu3" style="display: none;"> + <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div> + <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div> + </div> + </div> + <div dojoType="dijit.PopupMenuItem"> + <span>Different popup</span> + <div dojoType="dijit.ColorPalette"></div> + </div> +</div> + +<div dojoType="dijit.Menu" id="leftClick" leftClickToOpen="true" targetNodeIds="input2" style="display: none;"> + <div dojoType="dijit.MenuItem" disabled="true">Left Click Menu</div> + <div dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</div> + <div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div> + <div dojoType="dijit.MenuSeparator"></div> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" + onClick="alert('not actually cutting anything, just a test!')">Cut</div> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" + onClick="alert('not actually copying anything, just a test!')">Copy</div> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste" + onClick="alert('not actually pasting anything, just a test!')">Paste</div> + <div dojoType="dijit.MenuSeparator"></div> + <div dojoType="dijit.PopupMenuItem"> + <span>Enabled Submenu</span> + <div dojoType="dijit.Menu" id="leftsubmenu2"> + <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div> + <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div> + <div dojoType="dijit.PopupMenuItem"> + <span>Deeper Submenu</span> + <div dojoType="dijit.Menu" id="leftsubmenu4""> + <div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div> + <div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div> + </div> + </div> + </div> + </div> + <div dojoType="dijit.PopupMenuItem" disabled="true"> + <span>Disabled Submenu</span> + <div dojoType="dijit.Menu" id="leftsubmenu3" style="display: none;"> + <div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div> + <div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div> + </div> + </div> + <div dojoType="dijit.PopupMenuItem"> + <span>Different popup</span> + <div dojoType="dijit.ColorPalette"></div> + </div> +</div> + +<!-- +<div dojoType="dijit.MenuBar"> + <div dojoType="dijit.MenuBarItem" submenuId="submenu1">File</div> + <div dojoType="dijit.MenuBarItem" submenuId="submenu">Edit</div> + <div dojoType="dijit.MenuBarItem" disabled="true">View</div> + <div dojoType="dijit.MenuBarItem" submenuId="submenu">Help</div> + <div dojoType="dijit.MenuBarItem" onClick="alert('you clicked a menu bar button');">Click Me</div> +</div> +--> +<div style="padding: 1em"> + <h1 class="testTitle">Dijit Menu System Test</h1> + + <h3>Form</h3> + + <form> + <input id=input1 value="top-left"> + <p style="text-align:right">left click to open the menu for this input:<br/>Note: because of the window contextMenu, make sure you get<br/> the right menu by verifying the left<br/>click one starts with "Left Click Menu"<br/> at the very top. <input id=input2 value="top-right"></p> + <textarea id=textarea>hello there!</textarea><br> + <select> + <option>check if i</option> + <option>bleed through</option> + <option>on IE6</option> + </select> + <button id=button>push me</button> + </form> + + <div id="prog_menu" style="border:1px solid blue; padding:10px; margin:20px 0;"> + Click button below to create special menu on this div. + </div> + <button id="createButton" onclick="createMenu();">create programmatic menu</button> + <button id="destroyButton" onclick="destroyMenu();" disabled>destroy programmatic menu</button> + + <div style="height:500px"></div> + <p>(this space intentionally left blank to aid testing with controls + at the bottom of the browser window)</p> + <div style="height:500px"></div> + <input id=input3 value="bottom-left"> + <p style="text-align:right"><input id=input4 value="bottom-right"></p> + + <p>See also: <a href="form/test_Button.html">form/test_Button</a> + (PopupMenu is used with DropDownButton and ComboButton)</p> + + <h3>Mouse opening tests</h3> + + <ul> + <li>Right click on the client area of the page (ctrl-click for Macintosh). Menu should open.</li> + <li>Right click on each of the form controls above. Menu should open.</li> + <li>Right click near the righthand window border. Menu should open to the left of the pointer.</li> + <li>Right click near the bottom window border. Menu should open above the pointer.</li> + </ul> + + + <h3>Mouse hover tests</h3> + + <ul> + <li>Hover over the first item with the pointer. Item should highlight and get focus.</li> + <li>Hover over the second (disabled) item. Item should highlight and get focus.</li> + <li>Seperator items should not highlight on hover - no items should highlight in this case.</li> + </ul> + + + <h3>Mouse click tests</h3> + + <ul> + <li>Click on the first menu item. Alert should open with the message "Hello world". The menu should dissapear.</li> + <li>Click on the second menu item (disabled). Should not do anything - focus should remain on the disabled item.</li> + <li>Click anywhere outside the menu. Menu should close. Focus will be set by the browser based on where the user clicks.</li> + </ul> + + + <h3>Mouse submenu tests</h3> + + <ul> + <li>Hover over the "Enabled Submenu" item. Item should highlight and then pop open a submenu after a short (500ms) delay.</li> + <li>Hover over any of the other menu items. Submenu should close immediately and deselect the submenu parent item. The newly hovered item should become selected.</li> + <li>Hover over the "Disabled Submenu" item. Item should highlight, but no submenu should appear.</li> + <li>Clicking on the "Enabled Submenu" item before the submenu has opened (you'll have to be quick!) should immediatley open the submenu.</li> + <li>Clicking on the "Enabled Submenu" item <i>after</i> the submenu has opened should have no effect - the item is still selected and the submenu still open.</li> + <li>Hover over submenu item 1. Should select it - the parent menu item should stay selected also.</li> + <li>Hover over submenu item 2. Should select it - the parent menu item should stay selected also.</li> + </ul> + + + <h3>Keyboard opening tests</h3> + + <ul> + <li>On Windows: press shift-f10 with focus on any of the form controls. Should open the menu.</li> + <li>On Windows: press the context menu key (located on the right of the space bar on North American keyboards) with focus on any of the form controls. Should open the menu.</li> + <li>On Firefox on the Mac: press ctrl-space with focus on any of the form controls. Should open the menu.</li> + </ul> + + + <h3>Keyboard closing tests</h3> + + <ul> + <li>Open the menu.</li> + <li>Press tab. Should close the menu and return focus to where it was before the menu was opened.</li> + <li>Open the menu.</li> + <li>Press escape. Should close the menu and return focus to where it was before the menu was opened.</li> + </ul> + + + <h3>Keyboard navigation tests</h3> + + <ul> + <li>Open the menu.</li> + <li>Pressing up or down arrow should cycle focus through the items in that menu.</li> + <li>Pressing enter or space should invoke the menu item.</li> + <li>Disabled items receive focus but no action is taken upon pressing enter or space.</li> + </ul> + + + <h3>Keyboard submenu tests</h3> + + <ul> + <li>Open the menu.</li> + <li>The first item should become selected.</li> + <li>Press the right arrow key. Nothing should happen.</li> + <li>Press the left arrow key. Nothing should happen.</li> + <li>Press the down arrow until "Enabled Submenu" is selected. The submenu should not appear.</li> + <li>Press enter. The submenu should appear with the first item selected.</li> + <li>Press escape. The submenu should vanish - "Enabled Submenu" should remain selected.</li> + <li>Press the right arrow key. The submenu should appear with the first item selected.</li> + <li>Press the right arrow key. Nothing should happen.</li> + <li>Press the left arrow key. The submenu should close - "Enabled Submenu" should remain selected.</li> + <li>Press the left arrow key. The menu should <i>not</i> close and "Enabled Submenu" should remain selected.</li> + <li>Press escape. The menu should close and focus should be returned to where it was before the menu was opened.</li> + </ul> + +</div> + +</body> +</html> diff --git a/includes/js/dijit/tests/test_ProgressBar.html b/includes/js/dijit/tests/test_ProgressBar.html new file mode 100644 index 0000000..7df8119 --- /dev/null +++ b/includes/js/dijit/tests/test_ProgressBar.html @@ -0,0 +1,165 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo Toolkit - ProgressBar test</title> + + <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + body { + margin: 1em; + } + .smallred .dijitProgressBarTile { + background:red; + } + .smallred .dijitProgressBarLabel { + display:none; + } + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.ProgressBar"); + dojo.require("dojo.parser"); // scan page for widgets + dojo.require("dojo.string"); + + dojo.addOnLoad(go); + + function go(){ + //TODO: it's a little strange that id must be specified again? + var theBar = new dijit.ProgressBar({id: "testBar", width: 400, annotate: true, maximum: 256, duration: 2000, + report:function(percent){ + return dojo.string.substitute("${0} out of ${1} max chars", [this.progress, this.maximum]); + } + }, dojo.byId("testBar")); + + dojo.byId("test").value=""; + dojo.byId("progressValue").focus(); + dojo.byId("progressValue").value = dijit.byId("setTestBar").progress; + dojo.byId("maximum").value = dijit.byId("setTestBar").maximum; + dojo.connect(dojo.byId("test"), "onkeyup", null, keyUpHandler); + dojo.connect(dojo.byId("set"), "onclick", null, setParameters); + dojo.connect(dojo.byId("startTimer"), "onclick", null, + function(){ remoteProgress(dijit.byId("timerBar")); } ); + + function indeterminateSetter(id, value){ + return function(){ + dijit.byId(id).update({'indeterminate': value}); + } + } + dojo.connect(dojo.byId("setIndeterminate1True"), "onclick", null, + indeterminateSetter("indeterminateBar1", true)); + dojo.connect(dojo.byId("setIndeterminate1False"), "onclick", null, + indeterminateSetter("indeterminateBar1", false)); + dojo.connect(dojo.byId("setIndeterminate2True"), "onclick", null, + indeterminateSetter("indeterminateBar2", true)); + dojo.connect(dojo.byId("setIndeterminate2False"), "onclick", null, + indeterminateSetter("indeterminateBar2", false)); + } + + // An example of polling on a separate (heartbeat) server thread. This is useful when the progress + // is entirely server bound and there is no existing interaction with the server to determine status. + + // We don't have a server to run against, but a simple heartbeat implementation might look something + // like this: + + // function getProgressReport(){ + // var dataSource = "http://dojotoolkit.org"; + // return dojo.xhrGet({url: dataSource, handleAs: "json", content: {key: "progress"}}); + // } + + // Instead, we'll just tick off intervals of 10 + + var fakeProgress = 0; + function getProgressReport(){ + var deferred = new dojo.Deferred(); + fakeProgress = Math.min(fakeProgress + 10, 100); + deferred.callback(fakeProgress+"%"); + return deferred; + } + + function remoteProgress(bar){ + var _timer = setInterval(function(){ + var report = getProgressReport(); + report.addCallback(function(response){ + bar.update({progress: response}); + if(response == "100%"){ + clearInterval(_timer); + _timer = null; + return; + } + }); + }, 3000); // on 3 second intervals + } + + function setParameters(){ + dijit.byId("setTestBar").update({maximum: dojo.byId("maximum").value, progress: dojo.byId("progressValue").value}); + } + + function keyUpHandler(){ + dijit.byId("testBar").update({progress:dojo.byId("test").value.length}); + dijit.byId("testBarInt").update({progress:dojo.byId("test").value.length}); + dijit.byId("smallTestBar").update({progress:dojo.byId("test").value.length}); + } + </script> +</head> +<body> + + <h1 class="testTitle">Dijit ProgressBar Tests</h1> + + <h3>Test 1</h3> + Progress Value <input type="text" name="progressValue" id="progressValue" /> + <br> + Max Progress Value <input type="text" name="maximum" id="maximum" /> + <br> + <input type="button" name="set" id="set" value="set!" /> + <br> + <div style="width:400px" annotate="true" + maximum="200" id="setTestBar" progress="20" dojoType="dijit.ProgressBar"></div> + + <h3>Test 2</h3> + Write here: <input type="text" value="" name="test" maxLength="256" id="test" style="width:300"/> + <br /> + <br /> + <div id="testBar" style='width:300px'></div> + <br /> + Small, without text and background image: + <br /> + <div style="width:400px; height:10px" class="smallred" + maximum="256" id="smallTestBar" dojoType="dijit.ProgressBar"></div> + <br /> + Show decimal place: + <div places="1" style="width:400px" annotate="true" + maximum="256" id="testBarInt" dojoType="dijit.ProgressBar"></div> + + <h3>Test 3</h3> + No explicit maximum (both 50%) + <div style="width:400px" annotate="true" + id="implied1" progress="50" dojoType="dijit.ProgressBar"></div> + <br /> + <div style="width:400px" annotate="true" + id="implied2" progress="50%" dojoType="dijit.ProgressBar"></div> + + <h3>Test 4</h3> + <input type="button" name="startTimer" id="startTimer" value="Start Timer" /> + <div style="width:400px" id="timerBar" annotate="true" + maximum="100" progress="0" dojoType="dijit.ProgressBar"></div> + + <h3>Test 5 - indeterminate progess</h3> + <input type="button" name="setIndeterminate1True" id="setIndeterminate1True" value="Make Indeterminate" /> + <input type="button" name="setIndeterminate1False" id="setIndeterminate1False" value="Make Determinate" /> + <div style="width:400px" indeterminate="true" id="indeterminateBar1" + dojoType="dijit.ProgressBar"></div> + <input type="button" name="setIndeterminate2True" id="setIndeterminate2True" value="Make Indeterminate" /> + <input type="button" name="setIndeterminate2False" id="setIndeterminate2False" value="Make Determinate" /> + <div style="width:400px" progress="50" id="indeterminateBar2" + dojoType="dijit.ProgressBar"></div> + +</body> +</html> diff --git a/includes/js/dijit/tests/test_TitlePane.html b/includes/js/dijit/tests/test_TitlePane.html new file mode 100644 index 0000000..d0096c0 --- /dev/null +++ b/includes/js/dijit/tests/test_TitlePane.html @@ -0,0 +1,126 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TitlePane Test</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script language="JavaScript" type="text/javascript"> + dojo.require("dijit.TitlePane"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + // widgets used inside subpage loaded via href= + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.ComboBox"); + + function randomMessageId(){ + return Math.floor(Math.random() * 3) + 3; + } + + dojo.declare("dijit.TestTitlePane", dijit.TitlePane, { + templateString: '<div class="dijitTitlePane">' + + ' <div class="dijitTitlePaneTitle" dojoAttachPoint="titleBarNode" style="cursor: default;">' + + ' <div dojoAttachEvent="onclick:toggle,onkeypress: _onTitleKey,onfocus:_handleFocus,onblur:_handleFocus" tabindex="0"' + + ' waiRole="button" dojoAttachPoint="focusNode,arrowNode" class="dijitInline dijitArrowNode" style="cursor: pointer;"><span dojoAttachPoint="arrowNodeInner" class="dijitArrowNodeInner"></span></div>' + + ' <div dojoAttachPoint="titleNode" class="dijitTitlePaneTextNode"></div>' + + ' </div>' + + ' <div class="dijitTitlePaneContentOuter" dojoAttachPoint="hideNode">' + + ' <div class="dijitReset" dojoAttachPoint="wipeNode">' + + ' <div class="dijitTitlePaneContentInner" dojoAttachPoint="containerNode" waiRole="region" tabindex="-1">' + + ' </div>' + + ' </div>' + + ' </div>' + + '</div>' + }); + </script> +</head> +<body> + <h1 class="testTitle">Dijit TitlePane Test</h1> + + <h1>Test #1: plain title pane, width=300px</h1> + <div dojoType="dijit.TitlePane" title="Title Pane #1" style="width: 300px;"> + Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque + iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing + orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus + pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum... + Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque + nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet, + consectetuer adipiscing elit. + </div> + + <h1>Test #2: title pane with form, width=300px</h1> + + <div dojoType="dijit.TitlePane" title="Title Pane #2" id="pane_2" style="width: 300px;"> + <form> + Age: <input><br> + Discount card <input type=checkbox><br> + <button>Submit</button><br> + </form> + </div> + <br> + + <h1>Test #3: initially closed pane</h1> + <div id="closed" dojoType="dijit.TitlePane" title="Initially closed pane" open="false" width="200"> + <form> + <title for="age">Age: </title><input id="age"><br> + <title for="discount">Discount card </title><input type=checkbox id="discount"><br> + <button>Submit</button><br> + </form> + </div> + <button onclick="dijit.byId('closed').setContent('hello world! (' + new Date() + ')');">reset content</button> + + <h1>Test #4: title pane with href (initially closed)</h1> + <p>The pane should open to "Loading..." message and then 2 seconds later it should slide open more to show loaded data.</p> + <div dojoType="dijit.TitlePane" duration=1000 title="Pane from href" href="layout/getResponse.php?delay=3000&messId=3" open="false"> + Loading... + </div> + + <h1>Test #5: title pane with href (initially closed)</h1> + <p>The pane should start to open to "Loading..." but halfway through href data will be loaded, and it should expand correctly.</p> + <div dojoType="dijit.TitlePane" duration=1000 title="Pane from href" href="layout/getResponse.php?delay=500&messId=3" open="false"> + Loading... + </div> + + <h1>Test #6: nested title pane</h1> + <div dojoType="dijit.TitlePane" title="Outer pane" width="300"> + <p>This is a title pane, containing another title pane ... + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus pulvinar orci, sed vestibulum urna sem ut pede. +More Ipsum... + + <div dojoType="dijit.TitlePane" title="Inner pane" width="250"> + <p>And this is the inner title pane... + <p>Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + </div> + + <p>And this is the closing line for the outer title pane. + </div> + + <h1>Test #7: subclassed title pane (only arrow is selectable and focusable)</h1> + <div dojoType="dijit.TestTitlePane" title="Title Pane #7" style="width: 300px;"> + Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque + iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing + orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus + pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum... + Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque + nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet, + consectetuer adipiscing elit. + </div> + + <table style="border: solid blue 2px; margin-top: 1em;"> + <tr> + <td> + Here's some text below the title panes (to make sure that closing a title pane releases the space that the content was taking up) + </td> + </tr> + </table> + +</body> +</html> diff --git a/includes/js/dijit/tests/test_Toolbar.html b/includes/js/dijit/tests/test_Toolbar.html new file mode 100644 index 0000000..6634e2d --- /dev/null +++ b/includes/js/dijit/tests/test_Toolbar.html @@ -0,0 +1,186 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo Toolbar Widget Test</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + + .dijitToolbar .dijitButton, .dijitToolbar .dijitDropDownButton { margin: 0px; } + .dijitToolbar .dijitToggleButtonSelected BUTTON, .dijitToolbar .dijitToggleButtonSelectedHover BUTTON { border-width: 3px; } + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Button"); + dojo.require("dijit.ColorPalette"); + dojo.require("dijit.Dialog"); + dojo.require("dijit.Toolbar"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.TextBox"); + dojo.require("dijit.Menu"); + dojo.require("dojo.parser"); + + <!-- programatic creation --> + function init(){ + dojo.forEach(["toolbar2", "toolbar3", "toolbar4"], function(toolbarId){ + var toolbar = new dijit.Toolbar({}, dojo.byId(toolbarId)); + dojo.forEach(["Cut", "Copy", "Paste"], function(label){ + var button = new dijit.form.Button({ + id: toolbarId+"."+label, + // note: should always specify a label, for accessibility reasons. + // Just set showLabel=false if you don't want it to be displayed normally + label: label, + showLabel: (toolbarId == "toolbar2" ? false : true), + iconClass: toolbarId == "toolbar4" ? "" : "dijitEditorIcon dijitEditorIcon"+label + }); + toolbar.addChild(button); + }); + }); + } + + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1 class="testTitle">Toolbar test</h1> + + <h2>Toolbar from markup</h2> + + <div id="toolbar1" dojoType="dijit.Toolbar" + ><div dojoType="dijit.form.Button" id="toolbar1.cut" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="false">Cut</div + ><div dojoType="dijit.form.Button" id="toolbar1.copy" iconClass="dijitEditorIcon dijitEditorIconCopy" showLabel="false">Copy</div + ><div dojoType="dijit.form.Button" id="toolbar1.paste" iconClass="dijitEditorIcon dijitEditorIconPaste" showLabel="false">Paste</div + + ><span dojoType="dijit.ToolbarSeparator"></span + + ><div dojoType="dijit.form.ToggleButton" id="toolbar1.bold" iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false">Bold</div + ><div dojoType="dijit.form.ToggleButton" id="toolbar1.italic" iconClass="dijitEditorIcon dijitEditorIconItalic" showLabel="false">Italic</div + ><div dojoType="dijit.form.ToggleButton" id="toolbar1.underline" iconClass="dijitEditorIcon dijitEditorIconUnderline" showLabel="false">Underline</div + ><div dojoType="dijit.form.ToggleButton" id="toolbar1.strikethrough" iconClass="dijitEditorIcon dijitEditorIconStrikethrough" showLabel="false">Strikethrough</div + +><!-- + <span dojoType="dijit.ToolbarSeparator"> </span> + + <span dojo:type="ToolbarButtonGroup" name="justify" defaultButton="justifyleft" preventDeselect="true" showLabel="false"> + <div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyLeft" name="justify" showLabel="false">Left</div> + <div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyRight" name="justify" showLabel="false">Right</div> + <div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconJustifyCenter" name="justify" showLabel="false">Center</div> + </span> + + --><span dojoType="dijit.ToolbarSeparator"> </span + + ><div dojoType="dijit.form.Button" id="toolbar1.insertorderedlist" iconClass="dijitEditorIcon dijitEditorIconInsertOrderedList" showLabel="false">Ordered list</div + ><div dojoType="dijit.form.Button" id="toolbar1.insertunorderedlist" iconClass="dijitEditorIcon dijitEditorIconInsertUnorderedList" showLabel="false">Unordered list</div + ><div dojoType="dijit.form.Button" id="toolbar1.indent" iconClass="dijitEditorIcon dijitEditorIconIndent" showLabel="false">Indent</div + ><div dojoType="dijit.form.Button" id="toolbar1.outdent" iconClass="dijitEditorIcon dijitEditorIconOutdent" showLabel="false">Outdent</div + + ><span dojoType="dijit.ToolbarSeparator"></span + ><div dojoType="dijit.form.DropDownButton" id="toolbar1.dialog"> + <span>Login</span> + <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information" + execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));"> + <table> + <tr> + <td><label for="user">User:</label></td> + <td><input dojoType=dijit.form.TextBox type="text" name="user" ></td> + </tr> + <tr> + <td><label for="pwd">Password:</label></td> + <td><input dojoType=dijit.form.TextBox type="password" name="pwd"></td> + </tr> + <tr> + <td colspan="2" align="center"> + <button dojoType=dijit.form.Button type="submit" name="submit">Login</button></td> + </tr> + </table> + </div + ></div + ><div dojoType="dijit.form.DropDownButton" id="toolbar1.backcolor" iconClass="dijitEditorIcon dijitEditorIconBackColor" showLabel="false"> + <span>Background</span> + <div dojoType="dijit.ColorPalette" id="toolbar1.colorPalette" style="display: none" palette="3x4" onChange="console.log(this.value);"></div> + </div + ><div dojoType="dijit.form.DropDownButton" id="toolbar1.forecolor" iconClass="dijitEditorIcon dijitEditorIconForeColor" showLabel="false"> + <span>Foreground</span> + <div dojoType="dijit.ColorPalette" id="toolbar1.colorPalette2" style="display: none" palette="3x4" onChange="console.log(this.value);"></div> + </div + + ><span dojoType="dijit.ToolbarSeparator"></span + ><div dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='console.log("clicked combo save")'> + <span>Save</span> + <div dojoType="dijit.Menu" id="saveMenu" style="display: none;"> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave" + onClick="console.log('not actually saving anything, just a test!')">Save</div> + <div dojoType="dijit.MenuItem" + onClick="console.log('not actually saving anything, just a test!')">Save As</div> + </div> + </div + ></div> + + <h2>Toolbar that looks like MenuBar</h2> + <div id="menubar" dojoType="dijit.Toolbar" class="menuBar"> + <div dojoType="dijit.form.DropDownButton"> + <span>File</span> + <div dojoType="dijit.Menu"> + <div dojoType="dijit.MenuItem">New</div> + <div dojoType="dijit.MenuItem">Open</div> + <div dojoType="dijit.MenuSeparator"></div> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIconSave">Save</div> + <div dojoType="dijit.MenuItem">Save As...</div> + </div> + </div> + <div dojoType="dijit.form.DropDownButton"> + <span>Edit</span> + <div dojoType="dijit.Menu"> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" + onClick="console.log('not actually cutting anything, just a test!')">Cut</div> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" + onClick="console.log('not actually copying anything, just a test!')">Copy</div> + <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste" + onClick="console.log('not actually pasting anything, just a test!')">Paste</div> + </div> + </div> + <div dojoType="dijit.form.DropDownButton"> + <span>View</span> + <div dojoType="dijit.Menu"> + <div dojoType="dijit.MenuItem">Normal</div> + <div dojoType="dijit.MenuItem">Outline</div> + <div dojoType="dijit.PopupMenuItem"> + <span>Zoom</span> + <div dojoType="dijit.Menu" id="submenu2"> + <div dojoType="dijit.MenuItem">50%</div> + <div dojoType="dijit.MenuItem">75%</div> + <div dojoType="dijit.MenuItem">100%</div> + <div dojoType="dijit.MenuItem">150%</div> + <div dojoType="dijit.MenuItem">200%</div> + </div> + </div> + </div> + </div> + <div dojoType="dijit.form.DropDownButton"> + <span>Help</span> + <div dojoType="dijit.Menu"> + <div dojoType="dijit.MenuItem">Help Topics</div> + <div dojoType="dijit.MenuItem">About Dijit</div> + </div> + </div> + </div> + + <h2>Toolbar from script with icons only</h2> + <div id="toolbar2"></div> + + <h2>Toolbar from script with text and icons</h2> + <div id="toolbar3"></div> + + <h2>Toolbar from script with text only</h2> + <div id="toolbar4"></div> + + <!-- leave some space before the console window --> + <br><br> + </body> +</html> diff --git a/includes/js/dijit/tests/test_Tooltip.html b/includes/js/dijit/tests/test_Tooltip.html new file mode 100644 index 0000000..56553b6 --- /dev/null +++ b/includes/js/dijit/tests/test_Tooltip.html @@ -0,0 +1,117 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo Tooltip Widget Test</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.Tooltip"); + dojo.require("dojo.parser"); // find widgets + dojo.addOnLoad(function(){ + console.log("on load func"); + var tt = new dijit.Tooltip({label:"programmatically created tooltip", connectId:["programmaticTest"]}); + console.log("created", tt, tt.id); + }); + </script> +</head> +<body> + <h1 class="testTitle">Tooltip test</h1> + <p>Mouse-over or focus the items below to test tooltips.</p> + <p> + Change tooltip positioning search list: + <button onclick="dijit.Tooltip.defaultPosition=['above', 'below'];">above, below</button> + <button onclick="dijit.Tooltip.defaultPosition=['after', 'before'];">after, before (default)</button> + </p> + <div><span id="one" class="tt" tabindex="0"> focusable text </span> + <span dojoType="dijit.Tooltip" connectId="one"> + <b> + <span style="color: blue;">rich formatting</span> + <span style="color: red; font-size: x-large;"><i>!</i></span> + </b> + </span> + </div> + <span id="oneA" class="tt"> plain text (not focusable) </span> + <span dojoType="dijit.Tooltip" connectId="oneA"> + <span> keyboard users can not access this tooltip</span> + </span> + <a id="three" href="#bogus">anchor</a> + <span dojoType="dijit.Tooltip" connectId="three">tooltip on a link </span> + <p></p> + + <span id="programmaticTest">this text has a programmatically created tooltip</span> + <br> + + <button id="four">button w/tooltip</button> + <span id="btnTt" dojoType="dijit.Tooltip" connectId="four">tooltip on a button</span> + <button onclick="dijit.byId('btnTt').destroy()">Remove</button> tooltip from "button w/tooltip". + + <span style="float: right"> + Test tooltip on right aligned element. Tooltip should flow to the left --> + <select id="seven"> + <option value="alpha">Alpha</option> + <option value="beta">Beta</option> + <option value="gamma">Gamma</option> + <option value="delta">Delta</option> + </select> + + <span dojoType="dijit.Tooltip" connectId="seven"> + tooltip on a select<br> + two line tooltip. + </span> + </span> + + <p></p> + + <form> + <input type="input" id="id1" value="#1"><br> + <input type="input" id="id2" value="#2"><br> + <input type="input" id="id3" value="#3"><br> + <input type="input" id="id4" value="#4"><br> + <input type="input" id="id5" value="#5"><br> + <input type="input" id="id6" value="#6"><br> + </form> + <br> + + <div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;"> + <span id="s1">s1 text</span><br><br><br> + <span id="s2">s2 text</span><br><br><br> + <span id="s3">s3 text</span><br><br><br> + <span id="s4">s4 text</span><br><br><br> + <span id="s5">s5 text</span><br><br><br> + </div> + + <span dojoType="dijit.Tooltip" connectId="id1"> + + tooltip for #1<br> + long long long long long long long long long long long text<br> + make sure that this works properly with a really narrow window + </span> + + <span dojoType="dijit.Tooltip" connectId="id2">tooltip for #2</span> + <span dojoType="dijit.Tooltip" connectId="id3">tooltip for #3</span> + <span dojoType="dijit.Tooltip" connectId="id4">tooltip for #4</span> + <span dojoType="dijit.Tooltip" connectId="id5">tooltip for #5</span> + <span dojoType="dijit.Tooltip" connectId="id6">tooltip for #6</span> + + <span dojoType="dijit.Tooltip" connectId="s1">s1 tooltip</span> + <span dojoType="dijit.Tooltip" connectId="s2">s2 tooltip</span> + <span dojoType="dijit.Tooltip" connectId="s3">s3 tooltip</span> + <span dojoType="dijit.Tooltip" connectId="s4">s4 tooltip</span> + <span dojoType="dijit.Tooltip" connectId="s5">s5 tooltip</span> + + <h3>One Tooltip for multiple connect nodes</h3> + <span dojoType="dijit.Tooltip" connectId="multi1,multi2" style="display:none;">multi tooltip</span> + <a id="multi1" href="#bogus">multi1</a><br><a id="multi2" href="#bogus">multi2</a> + +</body> +</html> + diff --git a/includes/js/dijit/tests/test_TooltipDialog.html b/includes/js/dijit/tests/test_TooltipDialog.html new file mode 100644 index 0000000..62a5000 --- /dev/null +++ b/includes/js/dijit/tests/test_TooltipDialog.html @@ -0,0 +1,349 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TooltipDialog Widget Tests</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + + body { font-family : sans-serif; } + form { margin-bottom : 0; } + table { border: none; } + </style> + + <script type="text/javascript" + djConfig="parseOnLoad: true, isDebug: true" + src="../../dojo/dojo.js"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.Dialog"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.TextBox"); + dojo.require("dijit.form.DateTextBox"); + dojo.require("dijit.form.TimeTextBox"); + dojo.require("dijit.form.FilteringSelect"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.Menu"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + // create a do nothing, only for test widget + dojo.declare("dijit.TestWidget", + [dijit._Widget, dijit._Templated], { + templateString: "<div style='margin: 10px; border: inset #700 4px; padding: 5px;' dojoAttachPoint='containerNode'></div>" + }); + + // make dojo.toJson() print dates correctly (this feels a bit dirty) + Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});}; + </script> +</head> +<body> +<h1 class="testTitle">Dijit layout.TooltipDialog tests</h1> + +<div dojoType="dijit.form.DropDownButton"> + <span>Show Tooltip Dialog</span> + <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information" + execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));"> + <table> + <tr> + <td><label for="user">User:</label></td> + <td><input dojoType=dijit.form.TextBox type="text" name="user" id="user"></td> + </tr> + <tr> + <td><label for="pwd">Password:</label></td> + <td><input dojoType=dijit.form.TextBox type="password" name="pwd" id="pwd"></td> + </tr> + <tr> + <td><label for="date2">Date:</label></td> + <td><input dojoType=dijit.form.DateTextBox name="date" id="date2"></td> + </tr> + <tr> + <td><label for="time2">Time:</label></td> + <td><input dojoType=dijit.form.TimeTextBox name="time" id="time2"></td> + </tr> + <tr> + <td><label for="combo">Pizza:</label></td> + <td> + <select dojoType=dijit.form.FilteringSelect name="combo" id="combo" hasDownArrow="true"> + <option value="cheese">cheese</option> + <option value="pepperoni">pepperoni</option> + <option value="sausage">sausage</option> + </select> + </td> + </tr> + <tr> + <td colspan="2" align="center"> + <button dojoType=dijit.form.Button type="submit" name="submit">Order</button> + </td> + </tr> + </table> + <div style="width: 300px;">Note: This tooltip dialog has a bunch of nested drop downs for testing keyboard and click handling</div> + </div> +</div> | + +<div dojoType="dijit.form.DropDownButton"> + <span>Show Tooltip Dialog with TabContainer</span> + <div dojoType="dijit.TooltipDialog" id="tabTooltip" title="Tab Container Tooltip"> + <div dojoType="dijit.layout.TabContainer" style="width: 400px; height: 300px;"> + <div dojoType="dijit.layout.ContentPane" title="First tab"> + <p> + This is the first tab. + </p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + </div> + <div dojoType="dijit.layout.ContentPane" title="Second tab"> + <p> + This is the second tab. + </p> + <p> + <a href="http://www.lipsum.com/">ipsum dolor sit amet</a>, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + </div> + </div> + </div> +</div> | + +<div dojoType="dijit.form.DropDownButton"> + <span>Test slowloading HREF Tooltip Dialog</span> + <div dojoType="dijit.TooltipDialog" id="slowLoad" href="layout/getResponse.php?delay=500&messId=2" + title="tooltip dialog with no focusable items"></div> +</div> | + +<p><b><i>(scroll down to see more links to click, for testing positioning / scroll handling)</i></b></p> + +<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis +imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. +</p> +<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam +ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque +nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus +lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus +est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis +dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, +nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent +pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti +sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. +</p> +<form> + <center> + <select> + <option>1</option> + <option>2</option> + </select> + </center> +</form> +<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique +et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel +ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices +vitae, nisl. Class aptent taciti sociosqu ad litora torquent per +conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio +luctus eleifend. Proin massa libero, ultricies non, tincidunt a, +vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at, +egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at +felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id +risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt +tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat +turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam +consectetuer dapibus eros. Aliquam nisl. +</p> +<div style="float:right;clear:right;" dojoType="dijit.form.DropDownButton"> + <span>dropdown at right</span> +<div dojoType="dijit.TooltipDialog" id="dialogright"> + <div style="white-space:nowrap;">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</div> +</div> +</div> +<p> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean +semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin +porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. +Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. +Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae +risus. +</p> +<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis +imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. +</p> + +<div dojoType="dijit.form.DropDownButton" title="Enter Login information2"> + <span>Show Tooltip Dialog pointing upwards, with links</span> + <div dojoType="dijit.TooltipDialog" title="General Information Dialog"> + <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam + ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque + nonummy mollis. <a href="http://www.lipsum.com/">Vestibulum</a> vel purus ac pede semper accumsan. Vivamus + lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus + est quam sed urna. Phasellus adipiscing justo in <a href="http://www.lipsum.com/">ipsum</a>. Duis sagittis + dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, + nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent + pretium sollicitudin sapien. <a href="http://www.lipsum.com/">Suspendisse imperdiet</a>. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos + hymenaeos. + </p> + </div> +</div> +(will go up if there isn't enough space on the bottom of the screen) + +<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam +ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque +nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus +lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus +est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis +dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, +nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent +pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti +sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. +</p> +<form> + <center> + <select> + <option>1</option> + <option>2</option> + </select> + </center> +</form> +<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique +et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel +ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices +vitae, nisl. Class aptent taciti sociosqu ad litora torquent per +conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio +luctus eleifend. Proin massa libero, ultricies non, tincidunt a, +vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at, +egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at +felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id +risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt +tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat +turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam +consectetuer dapibus eros. Aliquam nisl. +</p> +<p> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean +semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin +porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. +Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. +Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae +risus. +</p> +<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis +imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. +</p> +<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam +ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque +nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus +lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus +est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis +dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, +nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent +pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti +sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. +</p> +<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique +et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel +ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices +vitae, nisl. Class aptent taciti sociosqu ad litora torquent per +conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio +luctus eleifend. Proin massa libero, ultricies non, tincidunt a, +vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at, +egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at +felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id +risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt +tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat +turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam +consectetuer dapibus eros. Aliquam nisl. +</p> + +<p> +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean +semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin +porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. +Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. +Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae +risus. +</p> +<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis +imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem +nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in +massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In +pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra +quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, +felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut +quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla +rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut +semper velit ante id metus. Praesent massa dolor, porttitor sed, +pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit +tortor pharetra congue. Suspendisse pulvinar. +</p> +<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam +ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque +nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus +lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus +est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis +dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, +nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent +pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti +sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. +</p> +<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique +et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel +ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices +vitae, nisl. Class aptent taciti sociosqu ad litora torquent per +conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio +luctus eleifend. Proin massa libero, ultricies non, tincidunt a, +vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at, +egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at +felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id +risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt +tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat +turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam +consectetuer dapibus eros. Aliquam nisl. +</p> + +</body> +</html> + diff --git a/includes/js/dijit/tests/test_Tree.html b/includes/js/dijit/tests/test_Tree.html new file mode 100644 index 0000000..fc88fc1 --- /dev/null +++ b/includes/js/dijit/tests/test_Tree.html @@ -0,0 +1,115 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dijit Tree Test</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script language="JavaScript" type="text/javascript"> + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.Tree"); + dojo.require("dijit.ColorPalette"); + dojo.require("dijit.Menu"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + +</head> +<body> + + <h1 class="testTitle">Dijit Tree Test</h1> + + <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" + url="_data/countries.json"></div> + <div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel" + store="continentStore" query="{type:'continent'}" + rootId="continentRoot" rootLabel="Continents" childrenAttrs="children"></div> + + <h3>Tree with hardcoded root node (not corresponding to any item in the store)</h3> + <p>Clicking a folder node will open/close it (openOnclick==true), and clicking a leaf node will popup an alert.</p> + <div dojoType="dijit.Tree" id="mytree" + model="continentModel" openOnClick="true"> + <script type="dojo/method" event="onClick" args="item"> + alert("Execute of node " + continentStore.getLabel(item) + +", population=" + continentStore.getValue(item, "population")); + </script> + </div> + + <button onclick="dijit.byId('mytree').destroyRecursive();">destroy</button> + + <h2>A rootless tree (no "continents" node) with context menus, and custom icons</h2> + + <ul dojoType="dijit.Menu" id="tree_menu" style="display: none;"> + <li dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</li> + <li dojoType="dijit.MenuItem" disabled="true">Disabled Item</li> + <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" + onClick="alert('not actually cutting anything, just a test!')">Cut</li> + <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" + onClick="alert('not actually copying anything, just a test!')">Copy</li> + <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste" + onClick="alert('not actually pasting anything, just a test!')">Paste</li> + <li dojoType="dijit.PopupMenuItem"> + <span>Enabled Submenu</span> + <ul dojoType="dijit.Menu" id="submenu2"> + <li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li> + <li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li> + <li dojoType="dijit.PopupMenuItem"> + <span>Deeper Submenu</span> + <ul dojoType="dijit.Menu" id="submenu4"> + <li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</li> + <li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</li> + </ul> + </li> + </ul> + </li> + <li dojoType="dijit.PopupMenuItem" disabled="true"> + <span>Disabled Submenu</span> + <ul dojoType="dijit.Menu" id="submenu3" style="display: none;"> + <li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li> + <li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li> + </ul> + </li> + </ul> + + <div dojoType="dijit.Tree" id="tree2" + model="continentModel" showRoot="false" openOnClick="true"> + + <script type="dojo/connect"> + var menu = dijit.byId("tree_menu"); + // when we right-click anywhere on the tree, make sure we open the menu + menu.bindDomNode(this.domNode); + + dojo.connect(menu, "_openMyself", this, function(e){ + // get a hold of, and log out, the tree node that was the source of this open event + var tn = dijit.getEnclosingWidget(e.target); + console.debug(tn); + + // now inspect the data store item that backs the tree node: + console.debug(tn.item); + + // contrived condition: if this tree node doesn't have any children, disable all of the menu items + menu.getChildren().forEach(function(i){ i.setDisabled(!tn.item.children); }); + + // IMPLEMENT CUSTOM MENU BEHAVIOR HERE + }); + </script> + <script type="dojo/method" event="getIconClass" args="item, opened"> + return (item == this.model.root || continentStore.getValue(item, "type") == "continent") ? + (opened ? "customFolderOpenedIcon" : "customFolderClosedIcon") : + "noteIcon"; + </script> + <script type="dojo/method" event="onClick" args="item"> + alert("Execute of node " + this.model.getLabel(item) + +", population=" + continentStore.getValue(item, "population")); + </script> +</div> + +</body> +</html> diff --git a/includes/js/dijit/tests/test_Tree_Notification_API_Support.html b/includes/js/dijit/tests/test_Tree_Notification_API_Support.html new file mode 100644 index 0000000..07f7509 --- /dev/null +++ b/includes/js/dijit/tests/test_Tree_Notification_API_Support.html @@ -0,0 +1,287 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dijit Tree Test</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "../../dojo/resources/dnd.css"; + @import "../../dojo/tests/dnd/dndDefault.css"; + @import "css/dijitTests.css"; + + .clear { + clear: both; + } + + .box { + border: #ccc 3px solid; + padding: 1em; + -moz-border-radius: 8px 8px; + radius: 8px; + } + + label { + display: inline-block; + min-width: 8em; + } + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script language="JavaScript" type="text/javascript"> + dojo.require("dojo.dnd.Source"); + dojo.require("dojo.data.ItemFileWriteStore"); + dojo.require("dijit.Declaration"); + dojo.require("dijit.Tree"); + dojo.require("dijit.Menu"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + // Hash of id-->item for all the items (including children) in the data store. + var items = {}; + + function deleteItem(){ + store.deleteItem(selectedItem); + + resetForms(); + loadItemsTable(); + } + + function newItem(){ + var pInfo = selectedItem ? {parent: selectedItem, attribute:"children"} : null; + console.debug(pInfo); + + store.newItem({ + id: dojo.byId('nId').value, + name: dojo.byId("nLabel").value, + someProperty: dojo.byId("nSomeProperty").value, + children: dojo.query("> *", "nChildren").map( function(child){ + var id = child.id; + return items[id]; + }) + },pInfo); + + resetForms(); + loadItemsTable(); + } + + function resetForms() { + selectedItem=null; + + // Update item form + dojo.byId("uLabel").value = ""; + dojo.byId("uSomeProperty").value = ""; + + dojo.byId("uChildren").innerHTML = ""; + uChildrenDragSource.clearItems(); + + dojo.byId("uPotentialChildren").innerHTML = ""; + uPotentialChildrenDragSource.clearItems(); + + // New item form + dojo.byId("nChildren").innerHTML = ""; + nChildrenDragSource.clearItems(); + + dojo.byId("nPotentialChildren").innerHTML = ""; + nPotentialChildrenDragSource.clearItems(); + for(var id in items){ + var item = items[id], + label = store.getLabel(item); + dojo.byId("nPotentialChildren").innerHTML += + "<div class='dojoDndItem' id='" + id + "'>" + + label + + "</div>"; + nPotentialChildrenDragSource.setItem(id, { + data: label, + type: ["text"] + }); + } + } + + function updateItem(){ + if (selectedItem!=null){ + if (dojo.byId("uLabel").value != store.getValue(selectedItem, "name")){ + store.setValue(selectedItem, "name", dojo.byId("uLabel").value); + } + + if (dojo.byId("uSomeProperty").value != store.getValue(selectedItem, "someProperty")){ + store.setValue(selectedItem, "someProperty", dojo.byId("uSomeProperty").value); + } + + var children = dojo.query("> *", "uChildren").map( function(child){ + var id = child.id; + return items[id]; + }); + store.setValues(selectedItem, "children", children); + + resetForms(); + loadItemsTable(); + }else{ + console.error("Can't update the tree root"); + } + } + + dojo.addOnLoad(function(){ + resetForms(); + loadItemsTable(); + }); + + function loadItemsTable(){ + // summary: for each item in the datastore generate a row in the table + + function processItem(item){ + items[store.getIdentity(item)] = item; + + var vals = { + itemId: store.getIdentity(item), + label: store.getLabel(item), + someProperty: store.getValue(item, "someProperty"), + children: store.getValues(item, "children") + }; + + // add this item to children list in "new item" form + dojo.byId("nPotentialChildren").innerHTML += + "<div class='dojoDndItem' id='" + vals.itemId + "'>" + + vals.label + + "</div>"; + nPotentialChildrenDragSource.setItem(vals.itemId, { + data: vals.label, + type: ["text"] + }); + + // update table listing items + var row = new ItemRow(vals); + dojo.byId("itemsTable").appendChild(row.domNode); + + //dojo.forEach(vals.children, processItem); + } + + items = {}; + dijit.registry.byClass("ItemRow").forEach(function(widget){ widget.destroy(); }); + store.fetch({onItem: processItem}); + } + + function onSelectItem(item){ + resetForms(); + + selectedItem = item; + + if(item){ + // Display basic attribute values + dojo.byId('uLabel').value = item ? store.getLabel(item) : ""; + dojo.byId('uSomeProperty').value = item ? store.getValue(item,"someProperty") : ""; + + // Fill in info about children + var children = store.getValues(item, "children"); + dojo.forEach(children, function(item){ + var id = store.getIdentity(item), + label = store.getLabel(item); + dojo.byId("uChildren").innerHTML += + "<div class='dojoDndItem' id='" + id + "'>" + + label + + "</div>"; + uChildrenDragSource.setItem(id, { + data: label, + type: ["text"] + }); + + dojo.byId('nParent').value = item ? store.getLabel(item) : ""; + }); + + // and the items that could be children but aren't currently + // (including items that would cause cycles, because i'm lazy) + for(var id in items){ + var item = items[id]; + if(dojo.indexOf(children, item) == -1){ + var label = store.getLabel(item); + dojo.byId("uPotentialChildren").innerHTML += + "<div class='dojoDndItem' id='" + id + "'>" + + label + + "</div>"; + uPotentialChildrenDragSource.setItem(id, { + data: label, + type: ["text"] + }); + } + } + } + } + </script> + +</head> +<body> + + <h1 class="testTitle">Dijit Tree Test - dojo.data.Notification API support</h1> + + <div dojoType="dojo.data.ItemFileWriteStore" jsId="store" + url="../tests/_data/treeTest.json"></div> + <div dojoType="dijit.tree.TreeStoreModel" jsId="model" + store="store" query="{id:'root'}"></div> + <div dojoType="dijit.Tree" id="myTree" model="model" onClick="onSelectItem"></div> + + <br /> + <h2>Selected Item:</h2> + <div class="box"> + <label for="uLabel">Name:</label> <input id="uLabel" width="50" value="Enter Node Label" /><br /> + <label for="uSomeProperty">Description:</label> <input id="uSomeProperty" width="50" value="Some Test Property" /><br /><br /> + <div style="float:left; margin-right: 2em;"> + <label for="uChildren">Children (in order):</label> + <div dojoType="dojo.dnd.Source" class="container" id="uChildren" jsId="uChildrenDragSource"></div> + </div> + <div style="float:left"> + <label for="uPotentialChildren">Potential Children:</label> + <div dojoType="dojo.dnd.Source" class="container" id="uPotentialChildren" jsId="uPotentialChildrenDragSource"></div> + </div> + <div class="clear">(drag and drop items to adjust list of children, and order of those children)</div> + </div> + <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="updateItem();">Update Item</div> + <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="deleteItem();">Delete Item</div> + + <h2>New Item</h2> + <p>Enter an Id, Name, and optionally a description to be added as a new item to the store. Upon successful addition, the tree will recieve notification of this event and respond accordingly. If you select a node the item will be added to that node, otherwise the item will be added to the tree root. "Id" is the identifer here and as such must be unique for all items in the store.</p> + <div class="box"> + <label for="nId">Id:</label> <input id="nId" width="50" value="Enter Item Id" /><br /> + <label for="nLabel">Name:</label> <input id="nLabel" width="50" value="Enter Item Name" /><br /> + <label for="nSomeProperty">Description:</label> <input id="nSomeProperty" width="50" value="Enter Some Property Value" /><br /><br /> + <label for="nParent">Parent:</label> <input id="nParent" readonly /><br /><br /> + <div style="float:left; margin-right: 2em;"> + Children (in order): + <div dojoType="dojo.dnd.Source" class="container" id="nChildren" jsId="nChildrenDragSource"></div> + </div> + <div style="float:left"> + <label for="nPotentialChildren">Potential Children:</label> + <div dojoType="dojo.dnd.Source" class="container" id="nPotentialChildren" jsId="nPotentialChildrenDragSource"></div> + </div> + <div class="clear">(drag and drop items to adjust list of children, and order of those children)</div> + </div> + + <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="newItem();">Add Item to Store</div> + <br /> + + <h2>Data in flat form</h2> + <!-- + flat view of the items in the data store. + TODO: use the table widget from the mail demo, or dojox.Grid + --> + <div dojoType="dijit.Declaration" widgetClass="ItemRow" defaults="{ item: {}, itemId: 'thud', name: 10, someProperty: 'foo', children: {} }"> + Id: ${itemId}, Name: ${name} + + Children: + <span class="dijitInline" dojoAttachPoint="childrenContainerNode"></span> + + <script type='dojo/connect' event='postCreate'> + dojo.forEach(this.children, function(childItem){ + this.childrenContainerNode.innerHTML += "<span class='itemReference'>" + store.getLabel(childItem) + "</span>"; + }, this); + </script> + </div> + <div id="itemsTable"></div> + </body> +</html> + + + + diff --git a/includes/js/dijit/tests/test_instantiate.html b/includes/js/dijit/tests/test_instantiate.html new file mode 100644 index 0000000..ffc39a4 --- /dev/null +++ b/includes/js/dijit/tests/test_instantiate.html @@ -0,0 +1,111 @@ +<html> + <head> + <title>dojo.NodeList.instantiate() tests</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + #container { height:200px; } + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit._Widget"); + dojo.require("dojo.parser"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.LinkPane"); + + // declare a simple widget to use as a base test: + dojo.declare("test._Widget",dijit._Widget,{ + message:"", + postCreate:function(){ + this.inherited(arguments); + this.connect(this.domNode,"onclick","workit"); + dojo.style(this.domNode,{ + cursor:"pointer", + color:"#333" + }); + this.domNode.innerHTML += this.message +" ("+this.id +")"; + console.log('created',this.id); + }, + workit:function(){ + dojo.place(this.domNode,this.domNode.parentNode,"end"); + } + }); + + var init = function(){ + dojo.byId("status").innerHTML = "after."; + + // test widgeting + dojo.query("#testList li").instantiate(test._Widget,{}).connect("onclick",console.log); + + // make a tab container from some div, and all it's children div's + dojo.query("#container") + .forEach(function(n){ + dojo.query("div",n) + // create contentpanes from the children and style them + .instantiate(dijit.layout.ContentPane,{}) + .forEach(function(wn,idx){ + dojo.mixin(dijit.byNode(wn),{ title:"tab" + (idx + 1) }) + }) + ; + }) + .instantiate(dijit.layout.TabContainer,{}) + ; + // should we add auto-startup calling? + dijit.byId("container").startup(); + //dijit.byId("container").layout(); + + // another test widget example + dojo.query("#altList li").instantiate(test._Widget,{ message:"woot" }); + + // bunches of buttons, use you imagination on how to relate them to something + dojo.query("#buttonTest").forEach(function(n){ + dojo.query("button",n).instantiate(dijit.form.Button,{ + onClick:function(){ + console.log('clicked:',this.domNode); + } + }); + }); + }; + dojo.addOnLoad(init) + //dojo.addOnLoad(function(){ + // setTimeout(init,25); + //}); + </script> + </head> + <body> + + <h1>dojo.NodeList.instantiate() tests: <span id="status">before</span></h1> + + <h2>Some simple widgets:</h2> + <ul id="testList"> + <li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li> + </ul> + <ul id="altList"> + <li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li> + </ul> + + <h2>A TabContainer:</h2> + <div id="container"> + <div>pane1</div> + <div>pane2</div> + <div>pane3</div> + </div> + + <h2>Some Buttons</h2> + <div id="buttonTest"> + <button>button 1</button> + <button>button 2</button> + <button>button 3</button> + <button>button 4</button> + <button>button 5</button> + </div> + + </body> +</html> diff --git a/includes/js/dijit/tests/tree/test_Tree_DnD.html b/includes/js/dijit/tests/tree/test_Tree_DnD.html new file mode 100644 index 0000000..2602573 --- /dev/null +++ b/includes/js/dijit/tests/tree/test_Tree_DnD.html @@ -0,0 +1,194 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dijit Tree Test</title> + + <style someProperty="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../../themes/tundra/tundra_rtl.css"; + @import "../css/dijitTests.css"; + @import "../dndDefault.css"; + @import "../../../dojo/resources/dojo.css"; + @import "../../../dojo/resources/dnd.css"; + @import "../../../dojo/tests/dnd/dndDefault.css"; + </style> + + <script someProperty="text/javascript" src="testBidi.js"></script> + + <script someProperty="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + + <script language="JavaScript" someProperty="text/javascript"> + dojo.require("dojo.data.ItemFileWriteStore"); + dojo.require("dijit.Tree"); + dojo.require("dijit._tree.dndSource"); + dojo.require("dijit.Menu"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + dojo.require("dojo.dnd.common"); + dojo.require("dojo.dnd.Source"); + + selected=[]; + + globalId=1000; + lastSelected=null; + + dojo.addOnLoad(function(){ + + //record the selection from tree 1 + dojo.subscribe("myTree", null, function(message){ + if(message.event=="execute"){ + console.log("Tree1 Select: ",dijit.byId("myTree").store.getLabel(message.item)); + lastSelected=selected["myTree"]=message.item; + } + }); + + //record the selection from tree 2 + dojo.subscribe("myTree2", null, function(message){ + if(message.event=="execute"){ + console.log("Tree2 Select: ",dijit.byId("myTree2").store.getLabel(message.item)); + lastSelected=selected["myTree2"]=message.item; + } + }); + + //connect to the add button and have it add a new container to the store as necessary + dojo.connect(dijit.byId("addButton"), "onClick", function(){ + var pInfo = { + parent: lastSelected, + attribute: "children" + }; + + //store.newItem({name: dojo.byId('newCat').value, id:globalId++, numberOfItems:dojo.byId('numItems').value}, pInfo); + catStore.newItem({name: dojo.byId('newCat').value, numberOfItems:0,id:globalId++}, pInfo); + }); + + //since we don't have a server, we're going to connect to the store and do a few things the server/store combination would normal be taking care of for us + dojo.connect(catStore, "onNew", function(item, pInfo){ + var p = pInfo && pInfo.item; + if (p) { + var currentTotal = catStore.getValues(p, "numberOfItems")[0]; + catStore.setValue(p, "numberOfItems", ++currentTotal); + } + + }); + }); + + + //create a custom label for tree one consisting of the label property pluss the value of the numberOfItems Column + function catTreeCustomLabel(item){ + var label = catStore.getLabel(item); + var num = catStore.hasAttribute(item, "numberOfItems") ? catStore.getValues(item,"numberOfItems") : "?"; + return label + ' (' + num+ ')'; + } + + //on item tree , we only want to drop on containers, or the root node itself, not on items in the containers + function itemTreeCheckItemAcceptance(node,source) { + var item = dijit.getEnclosingWidget(node).item; + if (item && (item.root || catStore.hasAttribute(item,"numberOfItems"))){ + return true; + } + return false; + } + + function dndAccept(source,nodes){ + if (this.tree.id=="myTree"){ + return false; + } + return true; + } + + function getIcon(item) { + if (!item || catStore.hasAttribute(item, "numberOfItems")) { + return "myFolder"; + } + return "myItem" + } + </script> + + <style> + .myFolder{ + display: "block"; + width: 16px; + height: 16px; + background: blue; + } + + .myItem{ + display: "block"; + width: 16px; + height: 16px; + background: green; + + } + </style> + +</head> +<body class="tundra"> + <h1 class="testTitle">Dijit Tree Test - Drag And Drop Support</h1> + + <div dojoType="dojo.data.ItemFileWriteStore" jsId="catStore" + url="../_data/categories.json"></div> + + <table width="100%" style="margin:5px solid gray" > + + <tr style="width:100%"> + <td style="width: 50%"> + <h2>Custom</h2> + <p>Should add this category to the store. The second parameter is the value for numberOfItems.</p> + <div class="container"> + <input id="newCat" type="text" value="Pottedmeat" /><input id="numItems" type="text" value="0" size="3"/><div id="addButton" dojoType="dijit.form.Button">Add Category</div> + </div> + </td> + <td> + <h2>Items: </h2> + <p>List of Items to be categorized<p> + <div dojoType="dojo.dnd.Source" jsId="c2" class="container" style="height: 100px; overflow: auto"> + <div class="dojoDndItem" id="1001">Apple</div> + <div class="dojoDndItem" id="1002">Orange</div> + <div class="dojoDndItem" id="1003">Banana</div> + <div class="dojoDndItem" id="1004">Tomato</div> + <div class="dojoDndItem" id="1005">Pepper</div> + <div class="dojoDndItem" id="1006">Wheat</div> + <div class="dojoDndItem" id="1007">Corn</div> + <div class="dojoDndItem" id="1008">Spinach</div> + <div class="dojoDndItem" id="1009">Cucumber</div> + <div class="dojoDndItem" id="1010">Carrot</div> + <div class="dojoDndItem" id="1011">Potato</div> + <div class="dojoDndItem" id="1012">Grape</div> + <div class="dojoDndItem" id="1013">Lemon</div> + <div class="dojoDndItem" id="1010">Lettuce</div> + <div class="dojoDndItem" id="1010">Peanut</div> + </div> + </td> + </tr> + <tr> + <td> + <h2>Collection Count Summary</h2> + <p>You can't drop items onto this tree.</p> + <div dojoType="dijit.tree.TreeStoreModel" jsId="catModel" + store="catStore" query="{id: '0'}"></div> + <div class="container" dojoType="dijit.Tree" id="collectionsTree" model="catModel" + getLabel="catTreeCustomLabel" dndController="dijit._tree.dndSource" + checkAcceptance="dndAccept" getIconClass="getIcon"></div> + </td> + <td> + <h2>Collection</h2> + <p> + Drop items onto this tree, but only onto categories; should fail to let you drop on other items. + Can also move items within this tree. + </p> + <div dojoType="dijit.tree.TreeStoreModel" jsId="itemModel" + store="catStore" query="{id: '0'}" childrenAttrs="items, children"></div> + <div class="container" dojoType="dijit.Tree" id="itemTree" + model="itemModel" + dndController="dijit._tree.dndSource" checkAcceptance="dndAccept" checkItemAcceptance="itemTreeCheckItemAcceptance" + getIconClass="getIcon"></div> + </td> + </tr> + </table> + + </body> +</html> diff --git a/includes/js/dijit/tests/tree/test_Tree_Programmatic.html b/includes/js/dijit/tests/tree/test_Tree_Programmatic.html new file mode 100644 index 0000000..b32b50f --- /dev/null +++ b/includes/js/dijit/tests/tree/test_Tree_Programmatic.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dijit Tree Programmatic Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad: false, isDebug: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script language="JavaScript" someProperty="text/javascript"> + dojo.require("dojo.data.ItemFileWriteStore"); + dojo.require("dijit.Tree"); + + dojo.addOnLoad(function(){ + var myStore = new dojo.data.ItemFileWriteStore({url:'../_data/countries.json'}); + var myModel = new dijit.tree.ForestStoreModel({ + store: myStore, + query: {type:'continent'}, + rootId: "earth", + rootLabel: "Earth", + childrenAttrs: ["children"] + }); + var tree = new dijit.Tree({ + model: myModel + }); + dojo.body().appendChild(tree.domNode); + tree.startup(); + }); + </script> +</head> +<body> + <h1 class="testTitle">Dijit Forest Store Programmatic Test</h1> +</body> +</html> diff --git a/includes/js/dijit/tests/tree/test_Tree_v1.html b/includes/js/dijit/tests/tree/test_Tree_v1.html new file mode 100644 index 0000000..bf2b800 --- /dev/null +++ b/includes/js/dijit/tests/tree/test_Tree_v1.html @@ -0,0 +1,111 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dijit Tree Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script language="JavaScript" type="text/javascript"> + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.Tree"); + dojo.require("dijit.ColorPalette"); + dojo.require("dijit.Menu"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> +</head> +<body> + + <h1 class="testTitle">Dijit Tree Test</h1> + + <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" + url="../../tests/_data/countries.json"></div> + + <h3>Tree with hardcoded root node (not corresponding to any item in the store)</h3> + <p>Clicking a folder node will open/close it (openOnclick==true), and clicking a leaf node will popup an alert.</p> + <div dojoType="dijit.Tree" id="mytree" store="continentStore" query="{type:'continent'}" + onfocus="console.log('user focus handler')" + onblur="console.log('user blur handler')" + label="Continents" openOnClick="true"> + <script type="dojo/method" event="onClick" args="item"> + alert("Execute of node " + continentStore.getLabel(item) + +", population=" + continentStore.getValue(item, "population")); + </script> + </div> + + <button onclick="dijit.byId('mytree').destroyRecursive();">destroy</button> + + <h2>A rootless tree (no "continents" node) with context menus, and custom icons</h2> + + <ul dojoType="dijit.Menu" id="tree_menu" style="display: none;"> + <li dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</li> + <li dojoType="dijit.MenuItem" disabled="true">Disabled Item</li> + <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" + onClick="alert('not actually cutting anything, just a test!')">Cut</li> + <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" + onClick="alert('not actually copying anything, just a test!')">Copy</li> + <li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste" + onClick="alert('not actually pasting anything, just a test!')">Paste</li> + <li dojoType="dijit.PopupMenuItem"> + <span>Enabled Submenu</span> + <ul dojoType="dijit.Menu" id="submenu2"> + <li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li> + <li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li> + <li dojoType="dijit.PopupMenuItem"> + <span>Deeper Submenu</span> + <ul dojoType="dijit.Menu" id="submenu4"> + <li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</li> + <li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</li> + </ul> + </li> + </ul> + </li> + <li dojoType="dijit.PopupMenuItem" disabled="true"> + <span>Disabled Submenu</span> + <ul dojoType="dijit.Menu" id="submenu3" style="display: none;"> + <li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li> + <li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li> + </ul> + </li> + </ul> + + <div dojoType="dijit.Tree" id="tree2" store="continentStore" query="{type:'continent'}"> + <script type="dojo/connect"> + var menu = dijit.byId("tree_menu"); + // when we right-click anywhere on the tree, make sure we open the menu + menu.bindDomNode(this.domNode); + + dojo.connect(menu, "_openMyself", this, function(e){ + // get a hold of, and log out, the tree node that was the source of this open event + var tn = dijit.getEnclosingWidget(e.target); + console.debug(tn); + + // now inspect the data store item that backs the tree node: + console.debug(tn.item); + + // contrived condition: if this tree node doesn't have any children, disable all of the menu items + menu.getChildren().forEach(function(i){ i.setDisabled(!tn.item.children); }); + + // IMPLEMENT CUSTOM MENU BEHAVIOR HERE + }); + </script> + <script type="dojo/method" event="getIconClass" args="item, opened"> + return (!item || continentStore.getValue(item, "type") == "continent") ? + (opened ? "customFolderOpenedIcon" : "customFolderClosedIcon") : + "noteIcon"; + </script> + <script type="dojo/method" event="onClick" args="item"> + alert("Execute of node " + continentStore.getLabel(item) + +", population=" + continentStore.getValue(item, "population")); + </script> +</div> + +</body> +</html> diff --git a/includes/js/dijit/tests/widgetsInTemplate.html b/includes/js/dijit/tests/widgetsInTemplate.html new file mode 100644 index 0000000..ae3b6f9 --- /dev/null +++ b/includes/js/dijit/tests/widgetsInTemplate.html @@ -0,0 +1,112 @@ +<html>
+ <head>
+ <title>testing widgetsInTemplate support</title>
+ <script type="text/javascript" src="../../dojo/dojo.js"
+ djConfig="parseOnLoad: true, isDebug: true"></script>
+ <script type="text/javascript">
+ dojo.require("doh.runner");
+
+ dojo.require("dijit.form.Button");
+ dojo.require("dijit.form.CheckBox");
+ dojo.require("dijit.ProgressBar");
+
+ dojo.addOnLoad(function(){
+ var testW;
+ doh.register("t",
+ [
+ {
+ name: "dojoAttachPoint",
+ runTest: function(t){
+ var testW = dijit.byId("test1Widget");
+ t.t(testW.normalNode);
+ t.f(isNaN(testW.normalNode.nodeType));
+ t.t(testW.buttonWidget instanceof dijit.form.Button);
+ t.t(testW.checkboxWidget instanceof dijit.form.CheckBox);
+ t.t(testW.progressBarWidget instanceof dijit.ProgressBar);
+// alert((testW.buttonWidget instanceof dijit.form.Button)+(testW.checkboxWidget instanceof dijit.form.CheckBox)+(testW.progressBarWidget instanceof dijit.ProgressBar)+
+// (testW.buttonWidget._counter==1)+(testW.checkboxWidget._counter==1)+(testW.progressBarWidget._counter==1));
+ testW = dijit.byId("test2Widget");
+ t.t(testW.containerNode);
+ t.f(isNaN(testW.containerNode.nodeType));
+ t.is(undefined,testW.buttonWidget);
+ t.t(testW.checkboxWidget instanceof dijit.form.CheckBox);
+ }
+ },
+ {
+ name: "dojoAttachEvent",
+ runTest: function(t){
+ var testW = dijit.byId("test1Widget");
+ testW.buttonWidget._counter=0;
+ testW.buttonWidget.onClick(testW.buttonWidget);
+ testW.checkboxWidget._counter=0;
+ testW.checkboxWidget.onClick(testW.checkboxWidget);
+ testW.progressBarWidget._counter=0;
+ testW.progressBarWidget.onChange(testW.progressBarWidget);
+ t.is(1,testW.buttonWidget._counter);
+ t.is(1,testW.checkboxWidget._counter);
+ t.is(1,testW.progressBarWidget._counter);
+ }
+ }
+ ]
+ );
+ doh.run();
+ });
+ </script>
+ <style type="text/css">
+ @import "../themes/tundra/tundra.css";
+ </style>
+ </head>
+ <body>
+ <h1>testing widgetsInTemplate support</h1>
+ <xmp id="Test1Template" style="display:none;">
+ <div>
+ <div dojoAttachPoint="normalNode" >normal node</div>
+ <button dojoAttachPoint="buttonWidget" dojoAttachEvent="onClick:onClick" dojoType="dijit.form.Button">button #1</button>
+ <div dojoAttachPoint="checkboxWidget" dojoAttachEvent="onClick:onClick" dojoType="dijit.form.CheckBox"></div> checkbox #1
+ <div dojoAttachPoint="progressBarWidget" dojoAttachEvent="onChange:onClick" style="width:400px" annotate="true"
+ maximum="200" progress="20" dojoType="dijit.ProgressBar"></div>
+ </div>
+ </xmp>
+ <script>
+ dojo.declare('Test1Widget',
+ [dijit._Widget, dijit._Templated],
+ {
+ widgetsInTemplate: true,
+ // isContainer: true,
+
+ templateString: dojo.byId('Test1Template').textContent || dojo.byId('Test1Template').innerText,
+ onClick: function(e){
+ if(e.target){
+ alert('onClick widgetId='+e.target.id);
+ }else{
+ if(e._counter == undefined){
+ e._counter = 1;
+ }else{
+ e._counter++;
+ }
+ }
+ }
+ });
+ </script>
+ <!-- can use widget immediately in markup - no parsing occurs until document loaded and scripts run -->
+ <div dojoType="Test1Widget" id="test1Widget" ></div>
+
+
+ <xmp id="Test2Template" style="display:none;">
+ <div>
+ <div dojoAttachPoint="containerNode" ><div dojoAttachPoint="checkboxWidget" dojoType="dijit.form.CheckBox"></div> checkbox #2</div>
+ </div>
+ </xmp>
+ <script>
+ dojo.declare('Test2Widget',
+ [dijit._Widget, dijit._Templated],
+ {
+ widgetsInTemplate: true,
+
+ templateString: dojo.byId('Test2Template').textContent || dojo.byId('Test2Template').innerText
+ });
+ </script>
+ <div dojoType="Test2Widget" id="test2Widget" ><button dojoAttachPoint="buttonWidget" dojoType="dijit.form.Button">button #2</button></div>
+ </body>
+</html>
+
diff --git a/includes/js/dijit/tests/widgetsInTemplate.js b/includes/js/dijit/tests/widgetsInTemplate.js new file mode 100644 index 0000000..18b25ea --- /dev/null +++ b/includes/js/dijit/tests/widgetsInTemplate.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests.widgetsInTemplate"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.widgetsInTemplate"] = true; +dojo.provide("dijit.tests.widgetsInTemplate"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests.widgetsInTemplate", dojo.moduleUrl("dijit", "tests/widgetsInTemplate.html")); +} + +} |
