knockoutjsちゅーとりある:SPA(webMail)URL指定でアクセスできるようにする

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>knockoutjsちゅーとりある:SPA(webMail)URL指定でアクセスできるようにする</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  8. <script type="text/javascript" src="sammy.js"></script>
  9. <style>
  10. body { font-family: Helvetica, Arial }
  11. input:not([type]), input[type=text], input[type=password], select { background-color: #FFFFCC; border: 1px solid gray; padding: 2px; }
  12. body { font-family: Helvetica, Arial}
  13. .folders { background-color: #bbb; list-style-type: none; padding: 0; margin: 0; border-radius: 7px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(0.4, #c0c0c0), color-stop(1,#a4a4a4)); margin: 10px 0 16px 0; font-size: 0px; }
  14. .folders li:hover { background-color: #ddd; }
  15. .folders li:first-child { border-left: none; border-radius: 7px 0 0 7px; }
  16. .folders li { font-size: 16px; font-weight: bold; display: inline-block; padding: 0.5em 1.5em; cursor: pointer; color: #444; text-shadow: #f7f7f7 0 1px 1px; border-left: 1px solid #ddd; border-right: 1px solid #888; }
  17. .folders li { *display: inline !important; } /* IE7 only */
  18. .folders .selected { background-color: #444 !important; color: white; text-shadow:none; border-right-color: #aaa; border-left: none; box-shadow:inset 1px 2px 6px #070707; }
  19. .mails { width: 100%; table-layout:fixed; border-spacing: 0; }
  20. .mails thead { background-color: #bbb; font-weight: bold; color: #444; text-shadow: #f7f7f7 0 1px 1px; }
  21. .mails tbody tr:hover { cursor: pointer; background-color: #68c !important; color: White; }
  22. .mails th, .mails td { text-align:left; padding: 0.4em 0.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  23. .mails th { border-left: 1px solid #ddd; border-right: 1px solid #888; padding: 0.4em 0 0.3em 0.7em; }
  24. .mails th:nth-child(1), .mails td:nth-child(1) { width: 20%; }
  25. .mails th:nth-child(2), .mails td:nth-child(2) { width: 15%; }
  26. .mails th:nth-child(3), .mails td:nth-child(3) { width: 45%; }
  27. .mails th:nth-child(4), .mails td:nth-child(4) { width: 15%; }
  28. .mails th:last-child { border-right: none }
  29. .mails tr:nth-child(even) { background-color: #EEE; }
  30. .viewMail .mailInfo { background-color: #dae0e8; padding: 1em 1em 0.5em 1.25em; border-radius: 1em; }
  31. .viewMail .mailInfo h1 { margin-top: 0.2em; font-size: 130%; }
  32. .viewMail .mailInfo label { color: #777; font-weight: bold; min-width: 2.75em; text-align:right; display: inline-block; }
  33. .viewMail .message { padding: 0 1.25em; }
  34. </style>
  35. <script type="text/javascript">
  36.   $(document).ready(function () {
  37.     function WebmailViewModel() {
  38.       var self = this;
  39.       // フォルダのデータ
  40.       self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
  41.       // データに対してIDをつけるけど、とりあえず何もなしと思われる。
  42.       self.chosenFolderId   = ko.observable();
  43.       self.chosenFolderData = ko.observable();
  44.       self.chosenMailData   = ko.observable();
  45.       // Behaviours
  46.       self.goToFolder = function(folder) {
  47.         location.hash = folder;
  48.       };
  49.       self.goToMail = function(mail) {
  50.         location.hash = mail.folder + '/' + mail.id;
  51.       };
  52.       // Client-side routes
  53.       Sammy(function() {
  54.         // メール一覧の出力
  55.         // #:folder(http://xxx.xxx/#Inbox、http://xxx.xxx/#Archiveなど)にアクセスされたとき
  56.         this.get('#:folder', function() {
  57.           // 対象のメールフォルダの設定
  58.           self.chosenFolderId(this.params.folder);
  59.           // メール詳細のHTMLは非表示
  60.           self.chosenMailData(null);
  61.           // フォルダに合わせて読み込むファイルを変更
  62.           //$.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
  63.           var fileName = "./" + this.params.folder + ".txt";
  64.           $.getJSON(fileName, {}, self.chosenFolderData);
  65.         });
  66.         // メール詳細の出力
  67.         // #:folder/:mailId(http://xxx.xxx/#Inbox/1、http://xxx.xxx/#Archive/3など)にアクセスされたとき
  68.         this.get('#:folder/:mailId', function() {
  69.           // 対象のメールフォルダの設定
  70.           self.chosenFolderId(this.params.folder);
  71.           // メール一覧のHTMLは非表示
  72.           self.chosenFolderData(null);
  73.           // フォルダに合わせて読み込むファイルを変更
  74.           //$.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
  75.           var fileName = "./mail/mailId" + this.params.mailId + ".txt";
  76.           $.getJSON(fileName, {}, self.chosenMailData);
  77.         });
  78.         // ''にアクセスされたとき(一番最初)
  79.         this.get('', function() {
  80.           this.app.runRoute('get', '#Inbox')
  81.         });
  82.       }).run();
  83.     }
  84.     ko.applyBindings(new WebmailViewModel());
  85.   });
  86. </script>
  87. </head>
  88. <body>
  89. <!-- フォルダ一覧 Folders -->
  90. <ul class="folders" data-bind="foreach: folders">
  91. <li data-bind="text: $data, css: { selected: $data == $root.chosenFolderId() }, click: $root.goToFolder"></li>
  92. </ul>
  93. <!-- メール一覧 chosenFolderData -->
  94. <table class="mails" data-bind="with: chosenFolderData">
  95.   <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
  96.   <tbody data-bind="foreach: mails">
  97.     <tr data-bind="click: $root.goToMail">
  98.       <td data-bind="text: from"></td>
  99.       <td data-bind="text: to"></td>
  100.       <td data-bind="text: subject"></td>
  101.       <td data-bind="text: date"></td>
  102.     </tr>
  103.   </tbody>
  104. </table>
  105. <!-- メール詳細 chosenMailData -->
  106. <div class="viewMail" data-bind="with: chosenMailData">
  107.   <div class="mailInfo">
  108.     <h1 data-bind="text: subject"></h1>
  109.     <p><label>From</label>: <span data-bind="text: from"></span></p>
  110.     <p><label>To</label>: <span data-bind="text: to"></span></p>
  111.     <p><label>Date</label>: <span data-bind="text: date"></span></p>
  112.   </div>
  113.   <p class="message" data-bind="html: messageContent" />
  114. </div>
  115. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  116. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  117. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  118. </div>
  119. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  120. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  121. </div>
  122. </body>
  123. </html>