split up partials and stub in mailbox frontend

18 files changed, 303 insertions, 127 deletions

diff --git a/lib/bucky.js b/lib/bucky.js
index a429fb3..997d680 100644
--- a/lib/bucky.js
+++ b/lib/bucky.js
@@ -103,6 +103,19 @@ var bucky = module.exports = {
   
   /* KEYWORDS */
 
+  ensureKeyword: function (req, res, next){
+    var keyword = req.params.keyword
+    if (! keyword) {
+      res.sendStatus(404)
+    }
+    db.getKeyword(keyword).then(function(k){
+      if (! k) {
+        return res.sendStatus(404)
+      }
+      res.keyword = k
+      next()
+    })
+  },
   ensureThreadsForKeyword: function (req, res, next){
     var keyword = req.params.keyword
     if (! keyword) {
diff --git a/lib/router.js b/lib/router.js
index d8e75c0..92c0054 100644
--- a/lib/router.js
+++ b/lib/router.js
@@ -64,12 +64,14 @@ module.exports = function(app){
   })
 
   app.get("/api/keyword/:keyword",
+    bucky.ensureKeyword,
     bucky.ensureThreadsForKeyword,
     bucky.ensureCommentCountsForThreads,
     bucky.ensureFileCountsForThreads,
     bucky.ensureKeywordsForThreads,
     function(req, res){
       res.json({
+        keyword: res.keyword,
         threads: res.threads,
       })
     }
diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 4d79da3..630ea2f 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -129,6 +129,16 @@ hr {
 #hoots tr:nth-child(odd) td:nth-child(2) { background-color: #f3f1f2; }
 #hoots tr:nth-child(even) td:nth-child(2) { background-color: #e3e8e3; }
 
+.threads th {
+  vertical-align: top;
+  font-weight: normal;
+  padding-right: 4px;
+  line-height: 15px;
+}
+.threads th b {
+  font-weight: bold;
+  font-size: 14px;
+}
 .threads, .threads tr {
   margin: 0; padding: 0;
   border-spacing: 0;
@@ -162,6 +172,12 @@ hr {
 .threads tr:last-child td:nth-child(2) {
   border-bottom: 1px solid #b6aeab;
 }
+.threads td:nth-child(2) a {
+  display: block;
+}
+.threads td:nth-child(6) {
+  text-align: center;
+}
 
 tr:nth-child(odd).row	td { background-color: #e6f0f0; }
 tr:nth-child(odd).row:hover	td { background-color: #d8e0ec; color: #000000; }
@@ -235,9 +251,9 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 .older  { color: #5D6464; }
 .quiet  { color: #787878; }
 
-#details .left, #details .right {
-  float: left;
+#details .left {
   padding-right: 20px;
+  vertical-align: top;
 }
 #details_rapper {
   width: 100%;
@@ -249,6 +265,7 @@ tr:nth-child(even) td.black:hover  { background-color: #f8f8f8; color: #000000;
 }
 #details .right {
   max-width: 50vw;
+  vertical-align: top;
 }
 
 #comments, #comments tr {
@@ -293,6 +310,7 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
 }
 #files {
   border: 1px solid #ccc;
+  margin-bottom: 10px;
 }
 #files td {
   padding: 3px 3px;
diff --git a/public/assets/js/lib/views/details/index.js b/public/assets/js/lib/views/details/index.js
index d7fb26f..554c475 100644
--- a/public/assets/js/lib/views/details/index.js
+++ b/public/assets/js/lib/views/details/index.js
@@ -4,11 +4,13 @@ var DetailsView = View.extend({
   },
   
   action: "/api/thread/",
+  keywordAction: "/api/keyword/",
   
   initialize: function(opt){
     this.comments = new CommentsView ({ parent: this })
     this.files = new FilesView ({ parent: this })
     this.gallery = new GalleryView ({ parent: this })
+    this.threadbox = new ThreadBox ({ parent: this })
   },
   
   load: function(id){
@@ -21,6 +23,13 @@ var DetailsView = View.extend({
     this.comments.load(data.comments)
     this.files.load(data.files)
     this.gallery.load(data.files)
+    if (data.thread.keyword) {
+      $.get(this.keywordAction + data.thread.keyword, this.populateKeyword.bind(this))
+    }
+  },
+  
+  populateKeyword: function(data){
+    this.threadbox.load(data)
   },
   
   success: function(){
diff --git a/public/assets/js/lib/views/index/index.js b/public/assets/js/lib/views/index/index.js
index 3d4dc72..a1e8af5 100644
--- a/public/assets/js/lib/views/index/index.js
+++ b/public/assets/js/lib/views/index/index.js
@@ -19,7 +19,7 @@ var IndexView = View.extend({
   
   populate: function(data){
     this.hootbox.load(data.hootbox)
-    this.threadbox.load(data.threads)
+    this.threadbox.load(data)
     this.lastlog.load(data.lastlog)
   },
   
diff --git a/public/assets/js/lib/views/index/threadbox.js b/public/assets/js/lib/views/index/threadbox.js
index bcaaceb..eee7a5c 100644
--- a/public/assets/js/lib/views/index/threadbox.js
+++ b/public/assets/js/lib/views/index/threadbox.js
@@ -1,11 +1,3 @@
-/*
-age_class
-views_class
-comments_class
-size_class
-files_class
-*/
-
 var ThreadBox = View.extend({
   el: ".threads",
   
@@ -15,10 +7,15 @@ var ThreadBox = View.extend({
   initialize: function(){
     this.__super__.initialize.call(this)
     this.template = this.$(".template").html()
+    this.keywordTemplate = this.$(".keywordTemplate").html()
   },
   
-  load: function(threads){
-    threads.forEach(this.appendThread.bind(this))
+  load: function(data){
+    if (data.keyword) {
+      var $row = this.parseKeyword(data.keyword)
+      this.$el.append($row)
+    }
+    data.threads.forEach(this.appendThread.bind(this))
   },
   
   parse: function(thread){
@@ -52,6 +49,12 @@ var ThreadBox = View.extend({
     return t
   },
   
+  parseKeyword: function(keyword){
+    var t = this.keywordTemplate
+                .replace(/{{keyword}}/g, keyword.keyword)
+    return t
+  },
+  
   prependThread: function(thread){
     var $row = $( this.parse(thread) )
     this.$el.prepend($row)
diff --git a/public/assets/js/lib/views/mail/mailbox.js b/public/assets/js/lib/views/mail/mailbox.js
new file mode 100644
index 0000000..fe16980
--- /dev/null
+++ b/public/assets/js/lib/views/mail/mailbox.js
@@ -0,0 +1,58 @@
+var Mailbox = View.extend({
+  el: ".mailbox",
+  
+  events: {
+  },
+  
+  action: "/api/mailbox/",
+  
+  initialize: function(){
+    this.__super__.initialize.call(this)
+    this.template = this.$(".template").html()
+    this.boxTemplate = this.$(".boxTemplate").html()
+  },
+  
+  load: function(name){
+    $("h1").html(name)
+    $.get(this.action + name, this.populate.bind(this))
+  },
+  
+  populate: function(data){
+    data.boxes.forEach(this.appendBox.bind(this))
+    data.messages.forEach(this.appendMessage.bind(this))
+  },
+  
+  parseBox: function(box){
+    var t = this.boxTemplate
+                .replace(/{{box}}/g, box.name)
+                .replace(/{{count}}/g, box.count)
+    return t
+  },
+  
+  parseMessage: function(message){
+    var datetime = verbose_date(message.date)
+    var id = message.id
+
+    var t = this.template
+                .replace(/{{id}}/g, thread.id)
+                .replace(/{{username}}/g, thread.username)
+                .replace(/{{subject}}/g, thread.title)
+                .replace(/{{date}}/g, datetime[0])
+                .replace(/{{time}}/g, datetime[1])
+                .replace(/{{date_class}}/g, carbon_date(thread.lastmodified) )
+                .replace(/{{size}}/g, size[1] )
+                .replace(/{{size_class}}/g, size[0] )
+    return t
+  },
+
+  appendBox: function(box){
+    var $row = $( this.parseBox(box) )
+    this.$el.append($row)
+  },
+
+  appendMessage: function(message){
+    var $row = $( this.parseMessage(message) )
+    this.$el.append($row)
+  },
+
+})
diff --git a/public/assets/js/lib/views/mail/message.js b/public/assets/js/lib/views/mail/message.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/public/assets/js/lib/views/mail/message.js
diff --git a/views/pages/details.ejs b/views/pages/details.ejs
index 113ff53..769db9d 100644
--- a/views/pages/details.ejs
+++ b/views/pages/details.ejs
@@ -3,75 +3,19 @@
 <hr>
 
 <div id="details_rapper">
-  <div id="details">
-    <div class="left">
-      <table id="comments" width="450">
-        <script class="template" type="text/html">
-          <tr>
-            <td class="user">
-              <a href="/profile/{{username}}"><img src="//www.carbonpictures.com/bucky/data/profile/.thumb/al.{{username}}.jpg"></a><br>
-              <a href="/profile/{{username}}">{{username}}</a>
-            </td>
-            <td colspan="2" class="comment">
-              <div>
-                {{comment}}
-              </div>
-              <span class="date">
-                {{date}} {{time}}
-              </span>
-              <span class="edit-links">
-                <a href="/comment/{{id}}/edit">edit</a> &middot;
-                <a href="/comment/{{id}}/remove">remove</a> &middot;
-                <a href="/comment/{{id}}/reply">reply</a>
-              </span>
-            </td>
-          </tr>
-        </script>
-      </table>
-    </div>
+  <table id="details">
+    <tr>
+      <td class="left">
+        <% include ../partials/comments %>
+      </td>
   
-    <div class="right">
-      <div id="gallery">
-        <script class="template" type="text/html">
-          <div>
-            <a href="{{link}}"><img src="{{thumb}}"></a>
-            <br>(<a href="/profile/{{username}}">{{username}}</a>, {{age}})
-          </div>
-        </script>
-      </div>
-      <div id="audio"></div>
-  
-      <table id="files">
-        <script class="template" type="text/html">
-          <tr class="row">
-            <td>
-              <a href="{{link}}" class="file">{{filename}}</a>
-            </td>
-            <td class="{{date_class}}">
-              {{date}}
-            </td>
-            <td class="{{date_class}}">
-              {{time}}
-            </td>
-            <td>
-              {{size}}
-            </td>
-            <td class="user">
-              <a href="/profile/{{username}}">{{username}}</a>
-            </td>
-          </tr>
-        </script>
-        <script class="templateTotal" type="text/html">
-          <tr class="total">
-            <td colspan="5">
-              total size: <span class="{{size_class}}">{{size}}</span>
-            </td>
-          </tr>
-        </script>
-      </table>
-    </div>
-
-  </div>
+      <td class="right">
+        <% include ../partials/gallery %>
+        <% include ../partials/files %>
+        <% include ../partials/threads %>
+      </td>
+    </tr>
+  </table>
 </div>
 
 
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
index 82ef8ab..454e358 100644
--- a/views/pages/index.ejs
+++ b/views/pages/index.ejs
@@ -12,55 +12,11 @@
       <button>SEARCH</button>
     </form>
   </div>
-  <div class="bluebox" id="hootbox">
-    <form>
-      <input type="text" name="hoot">
-      <button><%= hoot_text %></button>
-    </form>
-    <table id="hoots">
-      <script class="template" type="text/html">
-        <tr>
-          <td style="background-image:url(//www.carbonpictures.com/bucky/data/profile/.thumb/am.{{username}}.jpg)"><a href="/profile/{{username}}"><div></div></a></td>
-          <td>
-            {{comment}}
-          </td>
-        </tr>
-      </script>
-    </table>
-  </div>
+  <% include ../partials/hootbox %>
 </div>
 
 <div id="content">
-
-  <table class="threads">
-    <script class="template" type="text/html">
-      <tr>
-        <td>
-          <a href="/profile/{{username}}">{{username}}</a>
-          {{privacy_dot}}
-        </td>
-        <td class="{{color}}">
-          <a href="/details/{{id}}">{{title}}</a>
-        </td>
-        <td class="{{date_class}}">
-          {{date}} <small>{{time}}</small>
-        </td>
-        <td class="{{views_class}}">
-          {{views}}
-        </td>
-        <td class="{{comments_class}}">
-          {{comments}}
-        </td>
-        <td class="{{show_files}}">
-          <span class="size">
-            <span class="{{size_class}}">{{size}}</span>
-            in
-          </span>
-          <span class="{{files_class}}">{{files}}</span>
-        </td>
-      </tr>
-    </script>
-  </table>
+  <% include ../partials/threads %>
 </div>
 
 <% include ../partials/footer %>
diff --git a/views/pages/mailbox.ejs b/views/pages/mailbox.ejs
new file mode 100644
index 0000000..d97755a
--- /dev/null
+++ b/views/pages/mailbox.ejs
@@ -0,0 +1,53 @@
+<% include ../partials/header %>
+
+<hr>
+
+<div id="sidebar">
+  <div class="bluebox">
+    <b><big>message center</big></b>
+  </div>
+  <div class="bluebox" id="boxes">
+    <table>
+      <tr>
+        <th>Folders</th>
+        <td>msgs</td>
+      </tr>
+    </table>
+    <script type="text/html" class="boxTemplate">
+      <tr>
+        <td><a href="/mail/{{box}}">{{box}}</a></td>
+        <td>{{count}}</td>
+      </tr>
+    </script>
+  </div>
+</div>
+
+<div id="content">
+
+  <table class="messages">
+    <script class="template" type="text/html">
+      <tr>
+        <td>
+          <a href="/profile/{{username}}">{{username}}</a>
+          {{privacy_dot}}
+        </td>
+        <td>
+          <a href="/mail/read/{{id}}">{{subject}}</a>
+        </td>
+        <td class="{{date_class}}">
+          {{date}} <small>{{time}}</small>
+        </td>
+        <td>
+          <span class="{{size_class}}">{{size}}</span>
+        </td>
+        <td>
+          [reply]
+          [delete]
+        </td>
+      </tr>
+    </script>
+  </table>
+
+</div>
+
+<% include ../partials/footer %>
diff --git a/views/pages/message.ejs b/views/pages/message.ejs
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/views/pages/message.ejs
diff --git a/views/partials/comments.ejs b/views/partials/comments.ejs
new file mode 100644
index 0000000..97d4cea
--- /dev/null
+++ b/views/partials/comments.ejs
@@ -0,0 +1,23 @@
+<table id="comments" width="450">
+  <script class="template" type="text/html">
+    <tr>
+      <td class="user">
+        <a href="/profile/{{username}}"><img src="//www.carbonpictures.com/bucky/data/profile/.thumb/al.{{username}}.jpg"></a><br>
+        <a href="/profile/{{username}}">{{username}}</a>
+      </td>
+      <td colspan="2" class="comment">
+        <div>
+          {{comment}}
+        </div>
+        <span class="date">
+          {{date}} {{time}}
+        </span>
+        <span class="edit-links">
+          <a href="/comment/{{id}}/edit">edit</a> &middot;
+          <a href="/comment/{{id}}/remove">remove</a> &middot;
+          <a href="/comment/{{id}}/reply">reply</a>
+        </span>
+      </td>
+    </tr>
+  </script>
+</table>
\ No newline at end of file
diff --git a/views/partials/files.ejs b/views/partials/files.ejs
new file mode 100644
index 0000000..d72dcdc
--- /dev/null
+++ b/views/partials/files.ejs
@@ -0,0 +1,29 @@
+<div id="audio"></div>
+<table id="files">
+  <script class="template" type="text/html">
+    <tr class="row">
+      <td>
+        <a href="{{link}}" class="file">{{filename}}</a>
+      </td>
+      <td class="{{date_class}}">
+        {{date}}
+      </td>
+      <td class="{{date_class}}">
+        {{time}}
+      </td>
+      <td>
+        {{size}}
+      </td>
+      <td class="user">
+        <a href="/profile/{{username}}">{{username}}</a>
+      </td>
+    </tr>
+  </script>
+  <script class="templateTotal" type="text/html">
+    <tr class="total">
+      <td colspan="5">
+        total size: <span class="{{size_class}}">{{size}}</span>
+      </td>
+    </tr>
+  </script>
+</table>
diff --git a/views/partials/gallery.ejs b/views/partials/gallery.ejs
new file mode 100644
index 0000000..8fac271
--- /dev/null
+++ b/views/partials/gallery.ejs
@@ -0,0 +1,8 @@
+<div id="gallery">
+  <script class="template" type="text/html">
+    <div>
+      <a href="{{link}}"><img src="{{thumb}}"></a>
+      <br>(<a href="/profile/{{username}}">{{username}}</a>, {{age}})
+    </div>
+  </script>
+</div>
\ No newline at end of file
diff --git a/views/partials/hootbox.ejs b/views/partials/hootbox.ejs
new file mode 100644
index 0000000..c65d264
--- /dev/null
+++ b/views/partials/hootbox.ejs
@@ -0,0 +1,16 @@
+<div class="bluebox" id="hootbox">
+  <form>
+    <input type="text" name="hoot">
+    <button><%= hoot_text %></button>
+  </form>
+  <table id="hoots">
+    <script class="template" type="text/html">
+      <tr>
+        <td style="background-image:url(//www.carbonpictures.com/bucky/data/profile/.thumb/am.{{username}}.jpg)"><a href="/profile/{{username}}"><div></div></a></td>
+        <td>
+          {{comment}}
+        </td>
+      </tr>
+    </script>
+  </table>
+</div>
\ No newline at end of file
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index b773598..da76d88 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -25,4 +25,7 @@
 <script src="/assets/js/lib/views/details/files.js"></script>
 <script src="/assets/js/lib/views/details/gallery.js"></script>
 
+<script src="/assets/js/lib/views/mail/mailbox.js"></script>
+<script src="/assets/js/lib/views/mail/message.js"></script>
+
 <script src="/assets/js/index.js"></script>
diff --git a/views/partials/threads.ejs b/views/partials/threads.ejs
new file mode 100644
index 0000000..8fb52ac
--- /dev/null
+++ b/views/partials/threads.ejs
@@ -0,0 +1,41 @@
+
+<table class="threads">
+  <script class="keywordTemplate" type="text/html">
+    <tr>
+      <th>
+        <b>{{keyword}}</b>
+        &middot;
+      </th>
+      <th>
+        <a href="/post/{{keyword}}">post</a>
+      </th>
+    </tr>
+  </script>
+  <script class="template" type="text/html">
+    <tr>
+      <td>
+        <a href="/profile/{{username}}">{{username}}</a>
+        {{privacy_dot}}
+      </td>
+      <td class="{{color}}">
+        <a href="/details/{{id}}">{{title}}</a>
+      </td>
+      <td class="{{date_class}}">
+        {{date}} <small>{{time}}</small>
+      </td>
+      <td class="{{views_class}}">
+        {{views}}
+      </td>
+      <td class="{{comments_class}}">
+        {{comments}}
+      </td>
+      <td class="{{show_files}}">
+        <span class="size">
+          <span class="{{size_class}}">{{size}}</span>
+          in
+        </span>
+        <span class="{{files_class}}">{{files}}</span>
+      </td>
+    </tr>
+  </script>
+</table>