diff options
author | 2008-11-13 09:49:11 +0000 | |
---|---|---|
committer | 2008-11-13 09:49:11 +0000 | |
commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/demos/mail.html | |
parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
download | scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dijit/demos/mail.html')
-rw-r--r-- | includes/js/dijit/demos/mail.html | 426 |
1 files changed, 426 insertions, 0 deletions
diff --git a/includes/js/dijit/demos/mail.html b/includes/js/dijit/demos/mail.html new file mode 100644 index 0000000..0eae49f --- /dev/null +++ b/includes/js/dijit/demos/mail.html @@ -0,0 +1,426 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Demo Mail Application</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "../themes/soria/soria.css"; + @import "mail/mail.css"; + </style> + <style type="text/css"> + #inbox .dijitSplitterH { height: 5px } + #inbox .dijitSplitterV { width: 5px } + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="isDebug: false, parseOnLoad: true, defaultTestTheme: 'soria'"></script> + <script type="text/javascript" src="../tests/_testCommon.js"></script> + <!-- + <script type="text/javascript" src="../dijit.js"></script> + <script type="text/javascript" src="../dijit-all.js" charset="utf-8"></script> + --> + <script type="text/javascript"> + // Use profile builds, if available. Since we use pretty much all of the widgets, just use dijit-all. + // A custom profile would provide some additional savings. + dojo.require("dijit.dijit"); + dojo.require("dijit.dijit-all"); + + dojo.require("dojo.parser"); + dojo.require("dojo.data.ItemFileWriteStore"); + + dojo.require("dijit.dijit"); + dojo.require("dijit.Declaration"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.Menu"); + dojo.require("dijit.Tree"); + dojo.require("dijit.Tooltip"); + dojo.require("dijit.Dialog"); + dojo.require("dijit.Toolbar"); + dojo.require("dijit._Calendar"); + dojo.require("dijit.ColorPalette"); + dojo.require("dijit.Editor"); + dojo.require("dijit._editor.plugins.LinkDialog"); + dojo.require("dijit.ProgressBar"); + + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.form.CheckBox"); + dojo.require("dijit.form.FilteringSelect"); + dojo.require("dijit.form.Textarea"); + + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.layout.AccordionContainer"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.ContentPane"); + + dojo.addOnLoad(function(){ + dijit.setWaiRole(dojo.body(), "application"); + }); + + var paneId=1; + + // for "new message" tab closing + function testClose(pane,tab){ + return confirm("Are you sure you want to leave your changes?"); + } + + // fake mail download code: + var numMails; + var updateFetchStatus = function(x){ + if (x == 0) { + dijit.byId('fakeFetch').update({ indeterminate: false }); + return; + } + dijit.byId('fakeFetch').update({ progress: x }); + if (x == numMails){ + dojo.fadeOut({ node: 'fetchMail', duration:800, + // set progress back to indeterminate. we're cheating, because this + // doesn't actually have any data to "progress" + onEnd: function(){ + dijit.byId('fakeFetch').update({ indeterminate: true }); + dojo.byId('fetchMail').style.visibility='hidden'; // remove progress bar from tab order + } + }).play(); + } + } + var fakeReport = function(percent){ + // FIXME: can't set a label on an indeterminate progress bar + // like if(this.indeterminate) { return " connecting."; } + return dojo.string.substitute("Fetching: ${0} of ${1} messages.", [percent*this.maximum, this.maximum]); + } + var fakeDownload = function(){ + dojo.byId('fetchMail').style.visibility='visible'; + numMails = Math.floor(Math.random()*10)+1; + dijit.byId('fakeFetch').update({ maximum: numMails, progress:0 }); + dojo.fadeIn({ node: 'fetchMail', duration:300 }).play(); + for (var i=0; i<=numMails; i++){ + setTimeout(function(){updateFetchStatus(i);},((i+1)*(Math.floor(Math.random()*100)+400))); + } + } + // fake sending dialog progress bar + var stopSendBar = function(){ + dijit.byId('fakeSend').update({indeterminate: false}); + dijit.byId('sendDialog').hide(); + tabs.selectedChildWidget.onClose = function(){return true;}; // don't want confirm message + tabs.closeChild(tabs.selectedChildWidget); + } + + var showSendBar = function(){ + dijit.byId('fakeSend').update({ indeterminate: true }); + dijit.byId('sendDialog').show(); + setTimeout(function(){stopSendBar();}, 3000); + } + + </script> +</head> +<body class="soria"> + <div dojoType="dojo.data.ItemFileWriteStore" jsId="mailStore" + url="mail/mail.json"></div> + + <!-- Inline declaration of a table widget (thanks Alex!) --> + + <table dojoType="dijit.Declaration" + widgetClass="demo.Table" class="demoTable" + defaults="{ store: null, query: { query: { type: 'message' } }, columns: [ { name: 'From', attribute: 'sender' }, { name: 'Subject', attribute: 'label' }, { name: 'Sent on', attribute: 'sent', + format: function(v){ return dojo.date.locale.format(dojo.date.stamp.fromISOString(v), {selector: 'date'}); } + } ] }"> + <thead dojoAttachPoint="head"> + <tr dojoAttachPoint="headRow"></tr> + </thead> + <tbody dojoAttachPoint="body"> + <tr dojoAttachPoint="row"></tr> + </tbody> + + <script type="dojo/method"> + dojo.forEach(this.columns, function(item, idx){ + var icn = item.className||""; + // add a header for each column + var tth = document.createElement("th"); + tth.innerHTML = "<span class='arrowNode'></span> "+ item.name; + tth.className = icn; + dojo.connect(tth, "onclick", dojo.hitch(this, "onSort", idx)); + this.headRow.appendChild(tth); + + // and fill in the column cell in the template row + this.row.appendChild(document.createElement("td")); + this.row.lastChild.className = icn; + }, this); + this.runQuery(); + </script> + <script type="dojo/method" event="onSort" args="index"> + var ca = this.columns[index].attribute; + var qs = this.query.sort; + // clobber an existing sort arrow + dojo.query("> th", this.headRow).removeClass("arrowUp").removeClass("arrowDown"); + if(qs && qs[0].attribute == ca){ + qs[0].descending = !qs[0].descending; + }else{ + this.query.sort = [{ + attribute: ca, + descending: false + }]; + } + var th = dojo.query("> th", this.headRow)[index]; + dojo.addClass(th, (this.query.sort[0].descending ? "arrowUp" : "arrowDown")); + this.runQuery(); + </script> + <script type="dojo/method" event="runQuery"> + this.query.onBegin = dojo.hitch(this, function(){ dojo.query("tr", this.body).orphan(); }); + this.query.onItem = dojo.hitch(this, "onItem"); + this.query.onComplete = dojo.hitch(this, function(){ + dojo.query("tr:nth-child(odd)", this.body).addClass("oddRow"); + dojo.query("tr:nth-child(even)", this.body).removeClass("oddRow"); + }); + this.store.fetch(this.query); + </script> + <script type="dojo/method" event="onItem" args="item"> + var tr = this.row.cloneNode(true); + dojo.query("td", tr).forEach(function(n, i, a){ + var tc = this.columns[i]; + var tv = this.store.getValue(item, tc.attribute)||""; + if(tc.format){ tv = tc.format(tv, item, this.store); } + n.innerHTML = tv; + }, this); + this.body.appendChild(tr); + dojo.connect(tr, "onclick", this, function(){ this.onClick(item); }); + </script> + </table> + + <!-- Inline declaration for programmatically created "New Message" tabs --> + <div dojoType="dijit.Declaration" + widgetClass="mail.NewMessage"> + <div dojoType="dijit.layout.BorderContainer" dojoAttachPoint="container" title="Composing..." closeable="true"> + <div dojoType="dijit.layout.ContentPane" region="top" style="height:60px; overflow: visible; z-index: 10; color:#666;"> + <table width="100%"> + <tr style="padding-top:5px;"> + <td style="padding-left:20px; padding-right: 8px; text-align:right;"><label for="${id}_to">To:</label></td> + <td width=100%> + <select dojoType="dijit.form.ComboBox" id="${id}_to" hasDownArrow="false"> + <option></option> + <option>adam@yahoo.com</option> + <option>barry@yahoo.com</option> + <option>bob@yahoo.com</option> + <option>cal@yahoo.com</option> + <option>chris@yahoo.com</option> + <option>courtney@yahoo.com</option> + </select> + </td> + </tr> + <tr> + <td style="padding-left: 20px; padding-right:8px; text-align:right;"><label for="${id}_subject">Subject:</label></td> + <td width=100%> + <select dojoType="dijit.form.ComboBox" id="${id}_subject" hasDownArrow="false"> + <option></option> + <option>progress meeting</option> + <option>reports</option> + <option>lunch</option> + <option>vacation</option> + <option>status meeting</option> + </select> + </td> + </tr> + </table> + <hr noshade size="1"> + </div> + + <!-- new message part --> + <!-- FIXME: editor as direct widget here doesn't init --> + <div dojoType="dijit.layout.ContentPane" region="center" href="mail/newMail.html"></div> + + <div dojoType="dijit.layout.ContentPane" region="bottom" style="height:32px" align="center"> + <button dojoType="dijit.form.Button" iconClass="mailIconOk" + >Send + <script type="dojo/method" event="onClick"> + var toField = dojo.byId("${id}_to"); + if (toField.value == ""){ + alert("Please enter a recipient address"); + }else{ + showSendBar(); + } + </script> + </button> + <button dojoType="dijit.form.Button" iconClass="mailIconCancel" + >Cancel + <script type="dojo/method" event="onClick"> + tabs.closeChild(tabs.selectedChildWidget); + </script> + </button> + </div> + </div> + </div> + + + <div dojoType="dijit.layout.BorderContainer" id="main"> + + <!-- toolbar with new mail button, etc. --> + <div dojoType="dijit.Toolbar" region="top" style="height:25px;"> + <div id="getMail" dojoType="dijit.form.ComboButton" + iconClass="mailIconGetMail" optionsTitle="Mail Source Options"> + <script type="dojo/method" event="onClick"> + fakeDownload(); + </script> + <span>Get Mail</span> + <ul dojoType="dijit.Menu"> + <li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">Yahoo</li> + <li dojoType="dijit.MenuItem" iconClass="mailIconGetMail">GMail</li> + </ul> + </div> + <span dojoType="dijit.Tooltip" connectId="getMail">Click to download new mail.</span> + + <button + id="newMsg" dojoType="dijit.form.Button" + iconClass="mailIconNewMessage"> + New Message + <script type="dojo/method" event="onClick"> + /* make a new tab for composing the message */ + var newTab = new mail.NewMessage({id: "new"+paneId }).container; + dojo.mixin(newTab, + { + title: "New Message #" + paneId++, + closable: true, + onClose: testClose + } + ); + tabs.addChild(newTab); + tabs.selectChild(newTab); + </script> + </button> + <span dojoType="dijit.Tooltip" connectId="newMsg">Click to compose new message.</span> + + <button id="options" dojoType="dijit.form.Button" iconClass="mailIconOptions"> + Options + <script type="dojo/method" event="onClick"> + dijit.byId('optionsDialog').show(); + </script> + </button> + <div dojoType="dijit.Tooltip" connectId="options">Set various options</div> + </div> + + <div dojoType="dijit.layout.TabContainer" id="tabs" jsId="tabs" region="center"> + <!-- main section with tree, table, and preview --> + <div dojoType="dijit.layout.BorderContainer" id="inbox" title="Inbox" design="sidebar"> + <div dojoType="dijit.layout.AccordionContainer" region="leading" minSize="20" style="width:20%;" splitter="true"> + <div dojoType="dijit.layout.AccordionPane" title="Folders"> + <div dojoType="dijit.Tree" id="mytree" store="mailStore" + childrenAttr="folders" query="{type:'folder'}" label="Folders"> + <script type="dojo/method" event="onClick" args="item"> + if(!item){ + return; // top level node in tree doesn't correspond to any item + } + /* filter the message list to messages in this folder */ + table.query.query = { + type: "message", + folder: mailStore.getValue(item, "id") + }; + table.runQuery(); + </script> + <script type="dojo/method" event="getIconClass" args="item"> + return (item && mailStore.getValue(item, "icon")) || "mailIconFolderDocuments"; + </script> + </div> + </div> + <div dojoType="dijit.layout.AccordionPane" title="Address Book"> + <span dojoType="demo.Table" store="mailStore" + query="{ query: { type: 'address' }, columns: [ {name: 'User name', attribute: 'label'} ], sort: [ { attribute: 'label' } ] }" + id="addresses" style="width: 100%"> + <script type="dojo/method" event="preamble"> + this.query = { type: "address" }; + this.columns = [ + { + name: "Name", + attribute: "label" + } + ]; + </script> + <script type="dojo/method" event="onClick" args="item"> + table.query.query.sender = mailStore.getValue(item, "sender"); + delete table.query.query.folder; + table.runQuery(); + </script> + </span> + </div> + </div> <!-- end of Accordion --> + + <!-- list of messages pane --> + <div id="listPane" dojoType="dijit.layout.ContentPane" region="top" minSize="20" style="height:134px;" splitter="true"> + <span dojoType="demo.Table" store="mailStore" + query="{ query: { type: 'message' }, sort: [ { attribute: 'label' } ] }" + id="foo" jsId="table" style="width: 100%"> + <script type="dojo/method" event="onClick" args="item"> + var sender = this.store.getValue(item, "sender"); + var subject = this.store.getValue(item, "label"); + var sent = dojo.date.locale.format( + dojo.date.stamp.fromISOString(this.store.getValue(item, "sent")), + {formatLength: "long", selector: "date"}); + var text = this.store.getValue(item, "text"); + var messageInner = "<span class='messageHeader'>From: " + sender + "<br>" + + "Subject: "+ subject + "<br>" + + "Date: " + sent + "<br><br></span>" + + text; + dijit.byId("message").setContent(messageInner); + </script> + </span> + </div> <!-- end of listPane --> + + <!-- message preview pane --> + <div id="message" dojoType="dijit.layout.ContentPane" region="center" minSize="20"> + <p> + This is a simple application mockup showing some of the dojo widgets: + </p> + <ul> + <li>layout widgets: BorderContainer, AccordionContainer</li> + <li>TooltipDialog, Tooltip</li> + <li>Tree</li> + <li>form widgets: Button, DropDownButton, ComboButton, FilteringSelect, ComboBox</li> + <li>Editor</li> + </ul> + <p> + The message list above originally contains all the messages, but you can filter it + by clicking on items in the left Accordion. + Then click on the messages in the above list to display them. + There's no server running, so the app is just a facade and it doesn't really do anything. + <!-- TODO: delete button (we can delete since we are using ItemFileWriteStore --> + </p> + <p> + <span style="font-family: 'Comic Sans MS',Textile,cursive; color: blue; font-style: italic;">-- Bill</span> + </p> + </div> <!-- end of "message" --> + + </div> <!-- end of inbox --> + </div> <!-- end of TabContainer --> + + <div dojoType="dijit.layout.ContentPane" region="bottom" id="footer" align="left"> + <span style="float:right;">DojoMail v1.0 (demo only)</span> + <div id="fetchMail" style="opacity:0;visibility:hidden"> + <div annotate="true" id="fakeFetch" dojoType="dijit.ProgressBar" style="height:15px; width:275px;" indeterminate="true" report="fakeReport"></div> + </div> + </div> + </div> <!-- end of main --> + + <div dojoType="dijit.Dialog" id="optionsDialog" title="Options:"> + <table> + <tr><td style="text-align:right;"><label for="option1">Transport type:</label></td><td> + <select id="option1" dojoType="dijit.form.FilteringSelect"> + <option value="pop3">POP3</option> + <option value="imap">IMAP</option> + </select></td></tr> + <tr><td style="text-align:right;"><label for="option2">Server:</label></td><td><input id="option2" dojoType="dijit.form.TextBox" type="text"> + </td></tr> + + <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> + <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> + + <tr><td colspan="2" style="text-align:center;"> + <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconOk">OK</button> + <button dojoType="dijit.form.Button" type="submit" iconClass="mailIconCancel">Abort</button> + </td></tr> + </table> + </div> + <div dojoType="dijit.Dialog" id="sendDialog" title="Sending Mail"> + <div id="sendMailBar" style="text-align:center"> + <div id="fakeSend" dojoType="dijit.ProgressBar" style="height:15px; width:175px;" indeterminate="true" ></div> + </div> + <div> +</body> +</html> |