From ebac7f79d32c524de750adc3bcf1cc539625d552 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 7 Sep 2015 14:04:18 -0400 Subject: split up partials and stub in mailbox frontend --- lib/bucky.js | 13 +++++ lib/router.js | 2 + public/assets/css/bucky.css | 22 +++++++- public/assets/js/lib/views/details/index.js | 9 +++ public/assets/js/lib/views/index/index.js | 2 +- public/assets/js/lib/views/index/threadbox.js | 23 ++++---- public/assets/js/lib/views/mail/mailbox.js | 58 +++++++++++++++++++ public/assets/js/lib/views/mail/message.js | 0 views/pages/details.ejs | 80 ++++----------------------- views/pages/index.ejs | 48 +--------------- views/pages/mailbox.ejs | 53 ++++++++++++++++++ views/pages/message.ejs | 0 views/partials/comments.ejs | 23 ++++++++ views/partials/files.ejs | 29 ++++++++++ views/partials/gallery.ejs | 8 +++ views/partials/hootbox.ejs | 16 ++++++ views/partials/scripts.ejs | 3 + views/partials/threads.ejs | 41 ++++++++++++++ 18 files changed, 303 insertions(+), 127 deletions(-) create mode 100644 public/assets/js/lib/views/mail/mailbox.js create mode 100644 public/assets/js/lib/views/mail/message.js create mode 100644 views/pages/mailbox.ejs create mode 100644 views/pages/message.ejs create mode 100644 views/partials/comments.ejs create mode 100644 views/partials/files.ejs create mode 100644 views/partials/gallery.ejs create mode 100644 views/partials/hootbox.ejs create mode 100644 views/partials/threads.ejs 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 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 @@
-
-
- - -
-
+ + + -
- -
- -
+ <% include ../partials/comments %> +
- - -
-
- -
+ + <% include ../partials/gallery %> + <% include ../partials/files %> + <% include ../partials/threads %> + + + 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 @@ -
-
- - -
- - -
-
+ <% include ../partials/hootbox %>
- - - -
+ <% include ../partials/threads %>
<% 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 %> + +
+ + + +
+ + + +
+ +
+ +<% include ../partials/footer %> diff --git a/views/pages/message.ejs b/views/pages/message.ejs new file mode 100644 index 0000000..e69de29 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 @@ + + +
\ 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 @@ +
+ + + +
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 @@ + \ 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 @@ +
+
+ + +
+ + +
+
\ 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 @@ + + + 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 @@ + + + + +
-- cgit v1.2.3-70-g09d2