source: Dev/trunk/src/client/dijit/tests/test_InlineEditBox.html @ 483

Last change on this file since 483 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 12.4 KB
Line 
1<!DOCTYPE html>
2<html>
3        <head>
4                <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5                <title>Inline Edit Box Test</title>
6
7                <script type="text/javascript" src="boilerplate.js"></script>
8
9                <style type="text/css">
10                        .inlineEdit { background-color: #CCC76A; }
11
12                        /* some style rules on nodes just to test that style gets copied to the edit widget */
13                        p { font-family: cursive; }
14                        .letter p { font-family: monospace; }
15                        h3 { font-family: helvetica; font-style: italic; }
16                </style>
17
18                <script type="text/javascript">
19                        require([
20                                "dojo/parser",
21                                "dijit/InlineEditBox",
22
23                                // used by parser
24                                "dojo/data/ItemFileReadStore",
25                                "dijit/form/Textarea",
26                                "dijit/form/TextBox",
27                                "dijit/form/DateTextBox",
28                                "dijit/form/CurrencyTextBox",
29                                "dojo/currency",
30                                "dijit/form/ComboBox",
31                                "dijit/form/FilteringSelect",
32                                "dijit/form/NumberSpinner",
33                                "dijit/form/Select",
34                                "dijit/Editor",
35                                "dijit/_editor/plugins/AlwaysShowToolbar",
36                                "dojo/domReady!"
37                        ], function(parser, InlineEditBox){
38                                parser.parse();
39
40                                // programmatic creation
41                                new InlineEditBox({ renderAsHtml: true, onChange:myHandler }, 'programmatic');
42                        });
43
44                        function myHandler(newValue){
45                                this._onChangeValue = newValue; // used by robot test file
46                                console.debug("onChange for id = " + this.id + ", value: " + newValue);
47                        }
48                </script>
49        </head>
50        <body class="claro">
51
52                <h1 class="testTitle">Dijit InlineEditBox Test</h1>
53
54                <span data-dojo-id="stateStore" data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-props='url:"_data/states.json"'></span>
55                <span data-dojo-id="countryStore" data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-props='url:"_data/countries.json"'></span>
56                <span data-dojo-id="productStore" data-dojo-type="dojo/data/ItemFileReadStore" >
57                        <script type="dojo/method">
58                                this._jsonData =
59                                        { identifier: 'name',
60                                          label: 'name',
61                                          items: [
62                                                { name: "refrigerator" },
63                                                { name: "freezer" },
64                                                { name: "stove" },
65                                                { name: "heater" }
66                                        ]};
67                        </script>
68                </span>
69
70                <h2>Form Letter with blanks</h2>
71                <div class="letter">
72                        <h3 id="editable" data-dojo-type="dijit/InlineEditBox" data-dojo-props='value:"markup value", onChange:myHandler, autoSave:true, title:"company name"'></h3>
73                        <p>
74                                Dear <span id="MrSmith" data-dojo-type="dijit/InlineEditBox" data-dojo-props='width:"200px", title:"recipient name"'></span>,
75                        </p>
76                        <p class="letter">
77                                Thank you for your recent order.
78                                Please remit
79                                <span id="dollar_as" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/CurrencyTextBox", editorParams:{currency: "USD"}, width:"100px", title:"dollar amount"'></span>&nbsp;for
80                                your purchase of
81                                <span data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/NumberSpinner", editorParams:{constraints: {places:0} }, width:"70px", title:"quantity"'></span>&nbsp;deluxe
82                                <span data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/ComboBox", title:"item name",
83                                        editorParams:{searchAttr: "name", store: productStore, autocomplete: false, hasDownArrow: false},
84                                         width:"200px"'></span>&nbsp;on
85                                <span data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/DateTextBox", width:"200px", title:"purchase date as mm/dd/yy"'></span>&nbsp;in
86                                <span data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/FilteringSelect",
87                                        editorParams:{searchAttr: "name", keyAttr: "abbreviation", store: stateStore, autocomplete: true, hasDownArrow: true},
88                                         width:"200px", title:"state of purchase"'></span>&nbsp;
89                                <nobr>(<span data-dojo-type="dijit/InlineEditBox"
90                                        data-dojo-props='editor:"dijit/form/Select", width:"200px", title:"country", editorParams:{ store: countryStore }'
91                                ></span>)</nobr>.
92                        </p>
93                        <p id="textarea" data-dojo-type="dijit/InlineEditBox" data-dojo-props='autoSave:true, editor:"dijit/form/Textarea", title:"additional details"'></p>
94                        <p>
95                                Sincerely,
96                        </p>
97                        <span data-dojo-type="dijit/InlineEditBox" data-dojo-props='style:"margin-left: 2em; font-family: cursive;", width:"400px", title:"sender name"                                                                           '></span>
98                </div>
99                <hr style="margin-bottom: 1em;"/>
100
101                <h2>Form Letter with <span id="predefined">predefined values</span>, and no auto-save</h2>
102                <div class="letter">
103                        <h3 id="editable2" data-dojo-type="dijit/InlineEditBox" data-dojo-props='onChange:myHandler, autoSave:false, title:"company name"'>
104                                Bob Vance Refrigeration
105                        </h3>
106                        <p>
107                                Dear <span data-dojo-type="dijit/InlineEditBox" data-dojo-props='width:"200px", autoSave:false, title:"recipient name"'>John</span>,
108                        </p>
109                        <p class="letter">
110                                Thank you for your recent order.
111                                Please remit
112                                <span id="dollar" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/CurrencyTextBox", editorParams:{currency: "USD"}, width:"100px", autoSave:false, title:"dollar amount"'>$2,000</span>
113                                for your purchase of
114                                <span id="quantity" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/NumberSpinner", editorParams:{constraints: {places:0} }, width:"70px", autoSave:false, title:"quantity"'>3</span>
115                                deluxe
116                                <span id="item" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/ComboBox",
117                                        editorParams:{searchAttr: "name", store: productStore, autocomplete: false, hasDownArrow: false},
118                                         width:"200px", autoSave:false, title:"item name"'>refrigerators</span>
119                                on
120                                <!--
121                                        normally the server is in charge of formatting the displayed date pattern (01/05/2007) below
122                                        in the client's locale (since the user is expecting to see it that way and so is DateTextBox),
123                                        but since this test is static HTML, we instead hardcode the displayed value and use editorParams
124                                        to tell DateTextBox to expect that pattern regardless of the machine's locale
125                                -->
126                                <span id="purchase" data-dojo-type="dijit/InlineEditBox"
127                                        data-dojo-props='editor:"dijit/form/DateTextBox", editorParams:{constraints: {datePattern: "MM/dd/yyyy"}},
128                                        width:"200px", autoSave:false, title:"purchase date as mm/dd/yy"'>01/05/2007</span>
129                                in
130                                <span id="state" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/FilteringSelect",
131                                        editorParams:{searchAttr: "name", keyAttr: "abbreviation", store: stateStore, autocomplete: true, hasDownArrow: false},
132                                         width:"200px", autoSave:false, title:"state of purchase"'>
133                                         Pennsylvania
134                                </span>&nbsp;
135                                <nobr>(<span id="country" data-dojo-type="dijit/InlineEditBox"
136                                        data-dojo-props='editor:"dijit/form/Select", width:"200px", autoSave:false, title:"country",
137                                        editorParams:{ store: countryStore }'
138                                >United States of America</span>)</nobr>.
139                        </p>
140                        <p data-dojo-type="dijit/InlineEditBox" data-dojo-props='autoSave:false, editor:"dijit/form/Textarea", title:"additional details"'>
141                                We sincerely appreciate your business and hope we can do business again.
142                        </p>
143                        <p>
144                                Sincerely,
145                        </p>
146                        <span data-dojo-type="dijit/InlineEditBox" data-dojo-props='style:"margin-left: 2em; font-family: cursive;", width:"400px", autoSave:false, title:"sender name"'>Bob Vance</span>
147                </div>
148                <hr style="margin-bottom: 1em;"/>
149
150
151                <h2>Inline-block Text (of 400px width)</h2>
152                <div>
153                        The following section uses inline block text of 400px.
154                        When clicking the editable text it should bring up an editor which is also 400px wide.
155                </div>
156                (before plain inline) <fieldset class="dijitInline"><div style="width: 400px;">hello world</div></fieldset> (after plain inline)
157                <br>
158                (before editable inline)
159                <fieldset class="dijitInline"><div data-dojo-type="dijit/InlineEditBox" data-dojo-props='onChange:myHandler, width:"400px", style:"width: 400px;"'>
160                        hello world
161                </div></fieldset>
162                (after editable inline)
163                <hr style="width:100%;"/>
164
165                <h2>Pararagraph</h2>
166                (before plain paragraph)
167                <p>
168                Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
169imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
170nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
171massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
172pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
173quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
174felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
175quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
176rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
177semper velit ante id metus. Praesent massa dolor, porttitor sed,
178pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
179tortor pharetra congue. Suspendisse pulvinar.
180                </p>
181                (before editable paragraph.  the editable paragraph has Save/Cancel buttons when open.)
182                <p id="areaEditable" data-dojo-type="dijit/InlineEditBox" data-dojo-props='autoSave:false, editor:"dijit/form/Textarea"'>
183                        Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
184imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
185nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
186massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
187pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
188quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
189felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
190quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
191rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
192semper velit ante id metus. Praesent massa dolor, porttitor sed,
193pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
194tortor pharetra congue. Suspendisse pulvinar.
195                </p>
196                These buttons will
197                <button id="disableAreaEditable" onClick="dijit.byId('areaEditable').set('disabled', true)">disable</button> /
198                <button onClick="dijit.byId('areaEditable').set('disabled', false)">enable</button>
199                the InlineEditBox above.
200                <hr style="width:100%;"/>
201
202                <h2>Editor</h2>
203                <div id="inlineRTE" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit.Editor",
204                        autoSave:false, renderAsHtml:true,
205                        editorParams:{height: "", extraPlugins: ["dijit._editor.plugins.AlwaysShowToolbar"]}'>
206                        <b>Aliquam</b> vitae enim. <i>Duis</i> scelerisque metus auctor est venenatis
207imperdiet. <span style="text-decoration: underline;"> Fusce</span> dignissim porta augue. Nulla vestibulum. Integer lorem
208nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
209massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
210pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
211quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
212felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
213quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
214rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
215semper velit ante id metus. Praesent massa dolor, porttitor sed,
216pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
217tortor pharetra congue. Suspendisse pulvinar.
218                </div>
219                <p>
220                        Note: since the Editor may return a result containing one or more &lt;p&gt; nodes,
221                        don't make the InlineEditBox itself a &lt;p&gt; because that would cause nested
222                        &lt;p&gt;s, which is illegal, and messes up IE
223                </p>
224
225                <h2>FilteringSelect (no down arrow, and save/cancel buttons):</h2>
226                before
227                <span id="filteringSelect2" data-dojo-type="dijit/InlineEditBox" data-dojo-props='editor:"dijit/form/FilteringSelect",
228                        editorParams:{searchAttr: "name", keyAttr: "abbreviation", store: stateStore, autocomplete: true, hasDownArrow: false},
229                         width:"200px", autoSave:false'>
230                        Indiana
231                </span>
232                <button onclick="dijit.byId('filteringSelect2').edit();return false;">Edit previous value</button>
233                after
234                <hr style="width:100%;"/>
235
236                <h2>Programmatically created:</h2>
237                before block<div style="display:block;" id="programmatic">Click here to edit a block programmatically created inline edit region</div>after
238
239                <hr style="width:100%;"/>
240                <h2>Complex renderAsHtml="false"</h2>
241                <div id="renderAsHtml_false" data-dojo-type="dijit/InlineEditBox" data-dojo-props='renderAsHtml:false, width:"400px", style:"width:400px;"'>
242                        &lt;B&gt;not bold&lt;/B&gt;&amp;lt;input&amp;gt;
243                </div>
244                <hr style="width:100%;"/>
245                <h2>Complex renderAsHtml="true"</h2>
246                <div id="renderAsHtml_true" data-dojo-type="dijit/InlineEditBox" data-dojo-props='renderAsHtml:true, width:"400px", style:"width:400px;"'>
247                        &lt;B&gt;not bold&lt;/B&gt;<B>bold</B>&amp;lt;input&amp;gt;
248                </div>
249        </body>
250</html>
Note: See TracBrowser for help on using the repository browser.