git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/test_InlineEditBox.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4         <head>
   5                 <title>Inline Edit Box Test</title>
   6
   7                 <style type="text/css">
   8                         @import "../../dojo/resources/dojo.css";
   9                         @import "css/dijitTests.css";
  10
  11                         .inlineEdit { background-color: #CCC76A; }
  12
  13                         /* some style rules on nodes just to test that style gets copied to the edit widget */
  14                         p { font-family: cursive; }
  15                         .letter p { font-family: monospace; }
  16                         h3 { font-family: helvetica; font-style: italic; }
  17                 </style>
  18
  19                 <script type="text/javascript" src="../../dojo/dojo.js"
  20                         djConfig="isDebug: true, parseOnLoad: true"></script>
  21                 <script type="text/javascript" src="_testCommon.js"></script>
  22
  23                 <script type="text/javascript">
  24                         dojo.require("dojo.data.ItemFileReadStore");
  25                         dojo.require("dijit.InlineEditBox");
  26                         dojo.require("dijit.form.Textarea");
  27                         dojo.require("dijit.form.TextBox");
  28                         dojo.require("dijit.form.DateTextBox");
  29                         dojo.require("dijit.form.CurrencyTextBox");
  30                         dojo.require("dojo.currency");
  31                         dojo.require("dijit.form.ComboBox");
  32                         dojo.require("dijit.form.FilteringSelect");
  33                         dojo.require("dijit.form.NumberSpinner");
  34                         dojo.require("dijit.form.Slider");
  35
  36                         dojo.require("dijit.Editor");
  37                         dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
  38
  39                         dojo.require("dojo.parser");      // scan page for widgets and instantiate them
  40
  41                         function myHandler(id,newValue){
  42                                 console.debug("onChange for id = " + id + ", value: " + newValue);
  43                         };
  44                         /*
  45                         dojo.addOnLoad(function(){
  46                                 dojo.subscribe("widgetFocus", function(widget){
  47                                         console.log("focused on widget " + (widget?widget:"nothing"));
  48                                 });
  49                                 dojo.subscribe("widgetBlur", function(widget){
  50                                         console.log("blurred widget " + (widget?widget:"nothing"));
  51                                 });
  52                                 dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});
  53                         });
  54                         */
  55                 </script>
  56         </head>
  57         <body>
  58                 <h1 class="testTitle">Dijit InlineEditBox Test</h1>
  59
  60                 <span dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
  61                         url="_data/states.json"></span>
  62                 <span dojoType="dojo.data.ItemFileReadStore" jsId="productStore">
  63                         <script type="dojo/method">
  64                                 this._jsonData =
  65                                         { identifier: 'name',
  66                                           label: 'name',
  67                                           items: [
  68                                                 { name: "refrigerator" },
  69                                                 { name: "freezer" },
  70                                                 { name: "stove" },
  71                                                 { name: "heater" },
  72                                         ]};
  73                         </script>
  74                 </span>
  75
  76                 <h2>Form Letter with blanks</h2>
  77                 <div class="letter">
  78                         <h3 id="editable" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" autoSave="true" title="company name"></h3>
  79                         <p>
  80                                 Dear <span dojoType="dijit.InlineEditBox" width="200px" title="recipient name"></span>,
  81                         </p>
  82                         <p class="letter">
  83                                 Thank you for your recent order.
  84                                 Please remit
  85                                 <span dojoType="dijit.InlineEditBox" editor="dijit.form.CurrencyTextBox" editorParams="{currency: 'USD'}" width="100px" title="dollar amount"></span>&nbsp;for
  86                                 your purchase of
  87                                 <span dojoType="dijit.InlineEditBox" editor="dijit.form.NumberSpinner" editorParams="{constraints: {places:0} }" width="70px" title="quantity"></span>&nbsp;deluxe
  88                                 <span dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox" title="item name"
  89                                         editorParams="{searchAttr: 'name', store: productStore, autocomplete: false, hasDownArrow: false}"
  90                                          width="200px"></span>&nbsp;on
  91                                 <span dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="200px" title="purchase date as mm/dd/yy"></span>&nbsp;in
  92                                 <span dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
  93                                         editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: true}"
  94                                          width="200px" title="state of purchase"></span>.
  95                         </p>
  96                         <p dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea" title="additional details"></p>
  97                         <p>
  98                                 Sincerely,
  99                         </p>
 100                         <span  style="margin-left: 2em; font-family: cursive;" dojoType="dijit.InlineEditBox" width="400px" title="sender name"                                                                           ></span>
 101                 </div>
 102                 <hr style="margin-bottom: 1em;">
 103
 104                 <h2>Form Letter with predefined values, and no auto-save</h2>
 105                 <div class="letter">
 106                         <h3 id="editable2" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" autoSave="false" title="company name">
 107                                 Bob Vance Refrigeration
 108                         </h3>
 109                         <p>
 110                                 Dear <span dojoType="dijit.InlineEditBox" width="200px" autoSave="false" title="recipient name">John</span>,
 111                         </p>
 112                         <p class="letter">
 113                                 Thank you for your recent order.
 114                                 Please remit
 115                                 <span dojoType="dijit.InlineEditBox" editor="dijit.form.CurrencyTextBox" editorParams="{currency: 'USD'}" width="100px" autoSave="false" title="dollar amount">$2,000</span>
 116                                 for your purchase of
 117                                 <span dojoType="dijit.InlineEditBox" editor="dijit.form.NumberSpinner" editorParams="{constraints: {places:0} }" width="70px" autoSave="false" title="quantity">3</span>
 118                                 deluxe
 119                                 <span dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox"
 120                                         editorParams="{searchAttr: 'name', store: productStore, autocomplete: false, hasDownArrow: false}"
 121                                          width="200px" autoSave="false" title="item name">refrigerators</span>
 122                                 on
 123                                 <span dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="200px" autoSave="false" title="purchase date as mm/dd/yy">01/01/2007</span>
 124                                 in
 125                                 <span dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
 126                                         editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: false}"
 127                                          width="200px" autoSave="false" title="state of purchase">
 128                                          Pennsylvania
 129                                 </span>.
 130                         </p>
 131                         <p dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea" title="additional details">
 132                                 We sincerely appreciate your business and hope we can do business again.
 133                         </p>
 134                         <p>
 135                                 Sincerely,
 136                         </p>
 137                         <span  style="margin-left: 2em; font-family: cursive;" dojoType="dijit.InlineEditBox" width="400px" autoSave="false" title="sender name">Bob Vance</span>
 138                 </div>
 139                 <hr style="margin-bottom: 1em;">
 140
 141
 142                 <h2>Inline-block Text (of 400px width)</h2>
 143                 <div>
 144                         The following section uses inline block text of 400px.
 145                         When clicking the editable text it should bring up an editor which is also 400px wide.
 146                 </div>
 147                 (before plain inline) <fieldset class="dijitInline"><div style="width: 400px;">hello world</div></fieldset> (after plain inline)
 148                 <br>
 149                 (before editable inline)
 150                 <fieldset class="dijitInline"><div dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])" width="400px" style="width: 400px;">
 151                         hello world
 152                 </div></fieldset>
 153                 (after editable inline)
 154                 <hr style="width:100%;">
 155
 156                 <h2>Pararagraph</h2>
 157                 (before plain paragraph)
 158                 <p>
 159                 Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
 160 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
 161 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
 162 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
 163 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
 164 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
 165 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
 166 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
 167 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
 168 semper velit ante id metus. Praesent massa dolor, porttitor sed,
 169 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
 170 tortor pharetra congue. Suspendisse pulvinar.
 171                 </p>
 172                 (before editable paragraph.  the editable paragraph has Save/Cancel buttons when open.)
 173                 <p id="areaEditable" dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea">
 174                         Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
 175 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
 176 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
 177 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
 178 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
 179 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
 180 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
 181 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
 182 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
 183 semper velit ante id metus. Praesent massa dolor, porttitor sed,
 184 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
 185 tortor pharetra congue. Suspendisse pulvinar.
 186                 </p>
 187                 These buttons will
 188                 <button onClick="dijit.byId('areaEditable').setDisabled(true)">disable</button> /
 189                 <button onClick="dijit.byId('areaEditable').setDisabled(false)">enable</button>
 190                 the InlineEditBox above.
 191                 <hr style="width:100%;">
 192
 193                 <h2>Editor</h2>
 194                 <p id="inlineRTE" dojoType="dijit.InlineEditBox" editor="dijit.Editor"
 195                         autoSave="false" renderAsHtml="true"
 196                         editorParams="{height: '', extraPlugins: ['dijit._editor.plugins.AlwaysShowToolbar']}">
 197                         <b>Aliquam</b> vitae enim. <i>Duis</i> scelerisque metus auctor est venenatis
 198 imperdiet. <u>Fusce</u> dignissim porta augue. Nulla vestibulum. Integer lorem
 199 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
 200 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
 201 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
 202 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
 203 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
 204 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
 205 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
 206 semper velit ante id metus. Praesent massa dolor, porttitor sed,
 207 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
 208 tortor pharetra congue. Suspendisse pulvinar.
 209                 </p>
 210
 211                 <h2>FilteringSelect (no down arrow, and save/cancel buttons):</h2>
 212                 before
 213                 <span id="filteringSelect2" dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
 214                         editorParams="{searchAttr: 'name', keyAttr: 'abbreviation', store: stateStore, autocomplete: true, hasDownArrow: false}"
 215                          width="200px" autoSave="false">
 216                         Indiana
 217                 </span>
 218                 after
 219                 <hr style="width:100%;">
 220
 221                 <h2>Programmatically created:</h2>
 222                 before block<div style="display:block;" id="programmatic">Click here to edit a block programmatically created inline edit region</div>after
 223                 <script type="text/javascript">
 224                         // See if we can make a widget in script
 225                         dojo.addOnLoad(function(){
 226                                 var inlineWidget = new dijit.InlineEditBox({renderAsHtml: true}, 'programmatic');
 227                         });
 228                 </script>
 229                 <hr style="width:100%;">
 230         </body>
 231 </html>