--- /dev/null
+<!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>
projects / eow / blobdiff