Ticket #7097: mailInline.html

File mailInline.html, 16.4 kB (added by bill, 6 months ago)
Line 
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>Demo Mail Application</title>
6
7        <style type="text/css">
8                @import "../../dojo/resources/dojo.css";
9                @import "../themes/soria/soria.css";
10                @import "mail/mail.css";
11        </style>
12        <style type="text/css">
13                #inbox .dijitSplitterH { height: 5px }
14                #inbox .dijitSplitterV { width: 5px }
15        </style>
16
17        <script type="text/javascript" src="../../dojo/dojo.js"
18                djConfig="isDebug: false, parseOnLoad: true"></script>
19
20        <!--
21        <script type="text/javascript" src="../dijit.js"></script>
22        <script type="text/javascript" src="../dijit-all.js" charset="utf-8"></script>
23        -->
24        <script type="text/javascript">
25                // Use profile builds, if available.  Since we use pretty much all of the widgets, just use dijit-all.
26                // A custom profile would provide some additional savings.
27                dojo.require("dijit.dijit");
28                dojo.require("dijit.dijit-all");
29
30                dojo.require("dojo.parser");
31                dojo.require("dojo.data.ItemFileWriteStore");
32
33                dojo.require("dijit.dijit");
34                dojo.require("dijit.Declaration");
35                dojo.require("dijit.form.Button");
36                dojo.require("dijit.Menu");
37                dojo.require("dijit.Tree");
38                dojo.require("dijit.Tooltip");
39                dojo.require("dijit.Dialog");
40                dojo.require("dijit.Toolbar");
41                dojo.require("dijit._Calendar");
42                dojo.require("dijit.ColorPalette");
43                dojo.require("dijit.Editor");
44                dojo.require("dijit._editor.plugins.LinkDialog");
45                dojo.require("dijit._editor.plugins.FontChoice");
46                dojo.require("dijit.ProgressBar");
47
48                dojo.require("dijit.form.ComboBox");
49                dojo.require("dijit.form.CheckBox");
50                dojo.require("dijit.form.FilteringSelect");
51                dojo.require("dijit.form.Textarea");
52
53                dojo.require("dijit.layout.BorderContainer");
54                dojo.require("dijit.layout.AccordionContainer");
55                dojo.require("dijit.layout.TabContainer");
56                dojo.require("dijit.layout.ContentPane");
57
58                dojo.addOnLoad(function(){
59                        dijit.setWaiRole(dojo.body(), "application");
60                });
61               
62                var paneId=1;
63
64                // for "new message" tab closing
65                function testClose(pane,tab){
66                  return confirm("Are you sure you want to leave your changes?");
67                }
68
69                // fake mail download code:
70                var numMails;
71                var updateFetchStatus = function(x){
72                        if(x == 0){
73                                dijit.byId('fakeFetch').update({ indeterminate: false });
74                                return;
75                        }
76                        dijit.byId('fakeFetch').update({ progress: x + 1 });
77                        if(x == numMails){
78                                dojo.fadeOut({ node: 'fetchMail', duration:800,
79                                        // set progress back to indeterminate. we're cheating, because this
80                                        // doesn't actually have any data to "progress"
81                                        onEnd: function(){
82                                                dijit.byId('fakeFetch').update({ indeterminate: true });
83                                                dojo.byId('fetchMail').style.visibility='hidden'; // remove progress bar from tab order
84                                        }
85                                }).play();
86                        }
87                }
88                var fakeReport = function(percent){
89                        // FIXME: can't set a label on an indeterminate progress bar
90                        // like if(this.indeterminate) { return " connecting."; }
91                        return dojo.string.substitute("Fetching: ${0} of ${1} messages.", [percent * this.maximum, this.maximum]);
92                }
93               
94                var fakeDownload = function(){
95                        dojo.byId('fetchMail').style.visibility='visible';
96                        numMails = Math.floor(Math.random()*10) + 1;
97                        dijit.byId('fakeFetch').update({ maximum: numMails, progress:0 });
98                        dojo.fadeIn({ node: 'fetchMail', duration:300 }).play();
99                        for(var ii = 0; ii < numMails + 1; ++ii){
100                                var func = dojo.partial(updateFetchStatus, ii);
101                                setTimeout(func,  ((ii + 1) * (Math.floor(Math.random()*100) + 400)));
102                        }
103                }
104               
105                // fake sending dialog progress bar
106                var stopSendBar = function(){
107                        dijit.byId('fakeSend').update({ indeterminate: false });
108                        dijit.byId('sendDialog').hide();
109                        tabs.selectedChildWidget.onClose = function(){return true;};  // don't want confirm message
110                        tabs.closeChild(tabs.selectedChildWidget);
111                }
112                         
113                var showSendBar = function(){
114                        dijit.byId('fakeSend').update({ indeterminate: true });
115                        dijit.byId('sendDialog').show();
116                        setTimeout(function(){stopSendBar();}, 3000);
117                }
118
119        </script>
120</head>
121<body class="soria">
122        <div dojoType="dojo.data.ItemFileWriteStore" jsId="mailStore"
123                url="mail/mail.json"></div>
124
125        <!-- Inline declaration of a table widget (thanks Alex!) -->
126
127        <table dojoType="dijit.Declaration"
128                widgetClass="demo.Table" class="demoTable"
129                defaults="{ store: null, query: { query: { type: 'message' } }, columns: [ { name: 'From', attribute: 'sender' }, { name: 'Subject', attribute: 'label' }, { name: 'Sent on', attribute: 'sent',
130                format: function(v){ return dojo.date.locale.format(dojo.date.stamp.fromISOString(v), {selector: 'date'}); }
131                } ] }">
132                <thead dojoAttachPoint="head">
133                        <tr dojoAttachPoint="headRow"></tr>
134                </thead>
135                <tbody dojoAttachPoint="body">
136                        <tr dojoAttachPoint="row"></tr>
137                </tbody>
138
139                <script type="dojo/method">
140                        dojo.forEach(this.columns, function(item, idx){
141                                var icn = item.className||"";
142                                // add a header for each column
143                                var tth = document.createElement("th");
144                                tth.innerHTML = "<span class='arrowNode'></span> "+ item.name;
145                                tth.className = icn;
146                                dojo.connect(tth, "onclick", dojo.hitch(this, "onSort", idx));
147                                this.headRow.appendChild(tth);
148
149                                // and fill in the column cell in the template row
150                                this.row.appendChild(document.createElement("td"));
151                                this.row.lastChild.className = icn;
152                        }, this);
153                        this.runQuery();
154                </script>
155                <script type="dojo/method" event="onSort" args="index">
156                        var ca = this.columns[index].attribute;
157                        var qs = this.query.sort;
158                        // clobber an existing sort arrow
159                        dojo.query("> th", this.headRow).removeClass("arrowUp").removeClass("arrowDown");
160                        if(qs && qs[0].attribute == ca){
161                                qs[0].descending = !qs[0].descending;
162                        }else{
163                                this.query.sort = [{
164                                        attribute: ca,
165                                        descending: false
166                                }];
167                        }
168                        var th = dojo.query("> th", this.headRow)[index];
169                        dojo.addClass(th, (this.query.sort[0].descending ? "arrowUp" : "arrowDown"));
170                        this.runQuery();
171                </script>
172                <script type="dojo/method" event="runQuery">
173                        this.query.onBegin = dojo.hitch(this, function(){ dojo.query("tr", this.body).orphan(); });
174                        this.query.onItem = dojo.hitch(this, "onItem");
175                        this.query.onComplete = dojo.hitch(this, function(){
176                                dojo.query("tr:nth-child(odd)", this.body).addClass("oddRow");
177                                dojo.query("tr:nth-child(even)", this.body).removeClass("oddRow");
178                        });
179                        this.store.fetch(this.query);
180                </script>
181                <script type="dojo/method" event="onItem" args="item">
182                        var tr = this.row.cloneNode(true);
183                        dojo.query("td", tr).forEach(function(n, i, a){
184                                var tc = this.columns[i];
185                                var tv = this.store.getValue(item, tc.attribute)||"";
186                                if(tc.format){ tv = tc.format(tv, item, this.store); }
187                                n.innerHTML = tv;
188                        }, this);
189                        this.body.appendChild(tr);
190                        dojo.connect(tr, "onclick", this, function(){ this.onClick(item); });
191                </script>
192        </table>
193
194        <!-- Inline declaration for programmatically created "New Message" tabs -->
195        <div dojoType="dijit.Declaration"
196                widgetClass="mail.NewMessage">
197                <div dojoType="dijit.layout.BorderContainer" dojoAttachPoint="container" title="Composing..." closeable="true">
198                        <div dojoType="dijit.layout.ContentPane" region="top" style="height:60px; overflow: visible; z-index: 10; color:#666;">
199                                <table width="100%">
200                                        <tr style="padding-top:5px;">
201                                                <td style="padding-left:20px; padding-right: 8px; text-align:right;"><label for="${id}_to">To:</label></td>
202                                                <td width=100%>
203                                                        <select dojoType="dijit.form.ComboBox" id="${id}_to" hasDownArrow="false">
204                                                                <option></option>
205                                                                <option>adam@yahoo.com</option>
206                                                                <option>barry@yahoo.com</option>
207                                                                <option>bob@yahoo.com</option>
208                                                                <option>cal@yahoo.com</option>
209                                                                <option>chris@yahoo.com</option>
210                                                                <option>courtney@yahoo.com</option>
211                                                        </select>
212                                                </td>
213                                        </tr>
214                                        <tr>
215                                                <td style="padding-left: 20px; padding-right:8px; text-align:right;"><label for="${id}_subject">Subject:</label></td>
216                                                <td width=100%>
217                                                        <select dojoType="dijit.form.ComboBox" id="${id}_subject" hasDownArrow="false">
218                                                                <option></option>
219                                                                <option>progress meeting</option>
220                                                                <option>reports</option>
221                                                                <option>lunch</option>
222                                                                <option>vacation</option>
223                                                                <option>status meeting</option>
224                                                        </select>
225                                                </td>
226                                        </tr>
227                                </table>
228                                <hr noshade size="1">
229                        </div>
230
231                        <!-- new message part -->
232                        <div dojoType="dijit.Editor" region="center" style="overflow:auto"
233        extraPlugins="['createLink','insertImage',{name:'dijit._editor.plugins.FontChoice', command: 'fontName', generic: true},'fontSize']"
234
235>
236<i> This is just a sample message. There is email-address auto-complete in the to: field.
237<br><br> give it a whirl.
238</i>
239</div>
240                        <div dojoType="dijit.layout.ContentPane" region="bottom" style="height:32px" align="center">
241                                <button dojoType="dijit.form.Button" iconClass="mailIconOk"
242                                >Send
243                                <script type="dojo/method" event="onClick">
244                                        var toField = dojo.byId("${id}_to");
245                                        if (toField.value == ""){
246                                                alert("Please enter a recipient address");
247                                        }else{
248                                                showSendBar();
249                                        }
250                                </script>
251                                </button>
252                                <button dojoType="dijit.form.Button" iconClass="mailIconCancel" 
253                                >Cancel
254                                <script type="dojo/method" event="onClick">
255                                        tabs.closeChild(tabs.selectedChildWidget);
256                                </script>
257                                </button>
258                        </div>
259                </div>
260        </div>
261
262
263        <div dojoType="dijit.layout.BorderContainer" id="main">
264
265                <!-- toolbar with new mail button, etc. -->
266                <div dojoType="dijit.Toolbar" region="top" style="height:25px;">
267                        <div id="getMail" dojoType="dijit.form.ComboButton"
268                                iconClass="mailIconGetMail" optionsTitle="Mail Source Options">
269                                <script type="dojo/method" event="onClick">
270                                        fakeDownload();
271                                </script>
272                                <span>Get Mail</span>
273                                <ul dojoType="dijit.Menu">
274                                        <li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">Yahoo</li>
275                                        <li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">GMail</li>
276                                </ul>
277                        </div>
278                        <span dojoType="dijit.Tooltip" connectId="getMail">Click to download new mail.</span>
279
280                        <button
281                                id="newMsg" dojoType="dijit.form.Button"
282                                iconClass="mailIconNewMessage">
283                                New Message
284                                <script type="dojo/method" event="onClick">
285                                        /* make a new tab for composing the message */
286                                        var newTab = new mail.NewMessage({id: "new"+paneId  }).container;
287                                        dojo.mixin(newTab,
288                                                {
289                                                        title: "New Message #" + paneId++,
290                                                        closable: true,
291                                                        onClose: testClose
292                                                }
293                                        );
294                                        tabs.addChild(newTab);
295                                        tabs.selectChild(newTab);
296                                </script>
297                        </button>
298                        <span dojoType="dijit.Tooltip" connectId="newMsg">Click to compose new message.</span>
299
300                        <button id="options" dojoType="dijit.form.Button" iconClass="mailIconOptions">
301                         &nbsp;Options 
302                                <script type="dojo/method" event="onClick">
303                                        dijit.byId('optionsDialog').show();
304                                </script>
305                        </button>
306                        <div dojoType="dijit.Tooltip" connectId="options">Set various options</div>
307                </div>
308               
309                <div dojoType="dijit.layout.TabContainer" id="tabs" jsId="tabs" region="center">
310                        <!-- main section with tree, table, and preview -->
311                        <div dojoType="dijit.layout.BorderContainer" id="inbox" title="Inbox" design="sidebar">
312                                <div dojoType="dijit.layout.AccordionContainer" region="leading" minSize="20" style="width:20%;" splitter="true">
313                                        <div dojoType="dijit.layout.AccordionPane" title="Folders">
314                                                <div dojoType="dijit.Tree" id="mytree" store="mailStore"
315                                                        childrenAttr="folders" query="{type:'folder'}" label="Folders">
316                                                        <script type="dojo/method" event="onClick" args="item">
317                                                                if(!item){
318                                                                        return; // top level node in tree doesn't correspond to any item
319                                                                }
320                                                                /* filter the message list to messages in this folder */
321                                                                table.query.query = {
322                                                                        type: "message",
323                                                                        folder: mailStore.getValue(item, "id")
324                                                                };
325                                                                table.runQuery();
326                                                        </script>
327                                                        <script type="dojo/method" event="getIconClass" args="item">
328                                                                return (item && mailStore.getValue(item, "icon")) || "mailIconFolderDocuments";
329                                                        </script>
330                                                </div>
331                                        </div>
332                                        <div dojoType="dijit.layout.AccordionPane" title="Address Book">
333                                                <span dojoType="demo.Table" store="mailStore"
334                                                        query="{ query: { type: 'address' }, columns: [ {name: 'User name', attribute: 'label'} ], sort: [ { attribute: 'label' } ]  }"
335                                                        id="addresses" style="width: 100%">
336                                                        <script type="dojo/method" event="preamble">
337                                                                this.query = { type: "address" };
338                                                                this.columns = [
339                                                                        {
340                                                                                name: "Name",
341                                                                                attribute: "label"
342                                                                        }
343                                                                ];
344                                                        </script>
345                                                        <script type="dojo/method" event="onClick" args="item">
346                                                                table.query.query.sender = mailStore.getValue(item, "sender");
347                                                                delete table.query.query.folder;
348                                                                table.runQuery();
349                                                        </script>
350                                                </span>
351                                        </div>
352                                </div>  <!-- end of Accordion -->
353
354                                <!-- list of messages pane -->
355                                <div id="listPane" dojoType="dijit.layout.ContentPane" region="top" minSize="20" style="height:134px;" splitter="true">
356                                        <span dojoType="demo.Table" store="mailStore"
357                                                query="{ query: { type: 'message' }, sort: [ { attribute: 'label' } ]  }"
358                                                id="foo" jsId="table" style="width: 100%">
359                                                <script type="dojo/method" event="onClick" args="item">
360                                                        var sender = this.store.getValue(item, "sender");
361                                                        var subject = this.store.getValue(item, "label");
362                                                        var sent = dojo.date.locale.format(
363                                                                dojo.date.stamp.fromISOString(this.store.getValue(item, "sent")),
364                                                                {formatLength: "long", selector: "date"});
365                                                        var text = this.store.getValue(item, "text");
366                                                        var messageInner = "<span class='messageHeader'>From: " + sender + "<br>" +
367                                                                "Subject: "+ subject + "<br>" +
368                                                                "Date: " + sent + "<br><br></span>" +
369                                                                text;
370                                                        dijit.byId("message").setContent(messageInner);
371                                                </script>
372                                        </span>
373                                </div> <!-- end of listPane -->
374
375                                <!-- message preview pane -->
376                                <div id="message" dojoType="dijit.layout.ContentPane" region="center" minSize="20">
377                                        <p>
378                                        This is a simple application mockup showing some of the dojo widgets:
379                                        </p>
380                                        <ul>
381                                          <li>layout widgets: BorderContainer, AccordionContainer</li>
382                                          <li>TooltipDialog, Tooltip</li>
383                                          <li>Tree</li>
384                                          <li>form widgets: Button, DropDownButton, ComboButton, FilteringSelect, ComboBox</li>
385                                          <li>Editor</li>
386                                        </ul>
387                                        <p>
388                                        The message list above originally contains all the messages, but you can filter it
389                                        by clicking on items in the left Accordion.
390                                        Then click on the messages in the above list to display them.
391                                        There's no server running, so the app is just a facade and it doesn't really do anything.
392                                        <!-- TODO: delete button (we can delete since we are using ItemFileWriteStore -->
393                                        </p>
394                                        <p>
395                                        <span style="font-family: 'Comic Sans MS',Textile,cursive; color: blue; font-style: italic;">-- Bill</span>
396                                        </p>
397                                </div> <!-- end of "message" -->
398
399                        </div> <!-- end of inbox -->
400                </div> <!-- end of TabContainer -->
401
402                <div dojoType="dijit.layout.ContentPane" region="bottom" id="footer" align="left">
403                        <span style="float:right;">DojoMail v1.0 (demo only)</span>
404                        <div id="fetchMail" style="opacity:0;visibility:hidden">
405                                <div id="fakeFetch" dojoType="dijit.ProgressBar" style="height:15px; width:275px;" indeterminate="true" report="fakeReport"></div>
406                        </div>
407                </div> 
408        </div> <!-- end of main -->
409
410        <div dojoType="dijit.Dialog" id="optionsDialog" title="Options:">
411                <table> 
412                <tr><td style="text-align:right;"><label for="option1">Transport type:</label></td><td>
413                <select id="option1" dojoType="dijit.form.FilteringSelect">
414                        <option value="pop3">POP3</option>
415                        <option value="imap">IMAP</option>
416                </select></td></tr>
417                <tr><td style="text-align:right;"><label for="option2">Server:</label></td><td><input id="option2" dojoType="dijit.form.TextBox" type="text">
418                </td></tr>
419
420                <tr><td style="text-align:right;"><input type="checkbox" id="fooCB" dojoType="dijit.form.CheckBox"></td><td><label for="fooCB">Leave messages on Server</label></td></tr>
421                <tr><td style="text-align:right;"><input type="checkbox" id="fooCB2" dojoType="dijit.form.CheckBox"></td><td><label for="fooCB2">Remember Password</label></td></tr>
422
423                <tr><td colspan="2" style="text-align:center;">
424                <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconOk">OK</button>
425                <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconCancel">Abort</button>
426                </td></tr>
427                </table>
428        </div>
429        <div dojoType="dijit.Dialog" id="sendDialog" title="Sending Mail">
430                <div id="sendMailBar" style="text-align:center">
431                        <div  id="fakeSend" dojoType="dijit.ProgressBar" style="height:15px; width:175px;" indeterminate="true" ></div>
432                </div>
433        </div> 
434</body>
435</html>