diff options
Diffstat (limited to 'includes/js/dijit/tests/test_InlineEditBox.html')
| -rw-r--r-- | includes/js/dijit/tests/test_InlineEditBox.html | 231 |
1 files changed, 231 insertions, 0 deletions
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> |