source: Dev/branches/rest-dojo-ui/client/dijit/tests/test_InlineEditBox.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

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