style search. LOTTA styling

6 files changed, 118 insertions, 22 deletions

diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js
index 295b26c..b81d20c 100644
--- a/public/assets/js/lib/views/details/files.js
+++ b/public/assets/js/lib/views/details/files.js
@@ -65,7 +65,7 @@ var FilesView = FormView.extend({
   
   pick: function(e){
     if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
-    if (! e.target.href.match(/(mp3|wav|ogg)/i)) return
+    if (! e.target.href || ! e.target.href.match(/(mp3|wav|ogg)/i)) return
     e.preventDefault()
     audio.play( e.target.dataset.index )
   },
diff --git a/public/assets/js/lib/views/details/index.js b/public/assets/js/lib/views/details/index.js
index cd8045a..0a40dbc 100644
--- a/public/assets/js/lib/views/details/index.js
+++ b/public/assets/js/lib/views/details/index.js
@@ -13,7 +13,6 @@ var DetailsView = View.extend({
     this.gallery = new GalleryView ({ parent: this })
     this.form = new CommentForm ({ parent: this })
     this.threadbox = new ThreadBox ({ parent: this })
-    this.metadataTemplate = $(".metadata_template").html()
   },
   
   load: function(id){
@@ -24,15 +23,7 @@ var DetailsView = View.extend({
   populate: function(data){
     var thread = data.thread
     $("h1").html(thread.title)
-    var datetime = verbose_date(thread.createdate, true)
-    var age = get_age(thread.lastmodified, true)
-    var t = this.metadataTemplate
-                .replace(/{{ username }}/g, thread.username)
-                .replace(/{{ date }}/g, datetime[0])
-                .replace(/{{ time }}/g, datetime[1])
-                .replace(/{{ active }}/g, age + " ago")
-                .replace(/{{ views }}/g, thread.viewed + " view" + courtesy_s(thread.viewed))
-    $(".metadata").html(t)
+    $(".subtitle").show().html(metadata(thread))
     this.form.load(data.thread)
     this.comments.load(data.comments)
     this.files.load(data.files)
@@ -51,3 +42,16 @@ var DetailsView = View.extend({
   },
 
 })
+
+var metadataTemplate = $(".metadata_template").html()
+function metadata(thread){
+  var datetime = verbose_date(thread.createdate, true)
+  var age = get_age(thread.lastmodified, true)
+  var t = metadataTemplate
+              .replace(/{{ username }}/g, thread.username)
+              .replace(/{{ date }}/g, datetime[0])
+              .replace(/{{ time }}/g, datetime[1])
+              .replace(/{{ active }}/g, age + " ago")
+              .replace(/{{ views }}/g, thread.viewed + " view" + courtesy_s(thread.viewed))
+  return t
+}
\ No newline at end of file
diff --git a/public/assets/js/lib/views/index/index.js b/public/assets/js/lib/views/index/index.js
index d66ea1c..171133b 100644
--- a/public/assets/js/lib/views/index/index.js
+++ b/public/assets/js/lib/views/index/index.js
@@ -8,7 +8,7 @@ var IndexView = View.extend({
   initialize: function(opt){
     // opt.parent = parent
     this.hootbox = new HootBox ({ parent: this })
-    this.threadbox = new ThreadBox ({ parent: this, latest: true })
+    this.threadbox = new ThreadBox ({ parent: this, latest: true, welcome: true, })
     this.lastlog = new LastLog ({ parent: this })
     this.load()
   },
diff --git a/public/assets/js/lib/views/index/lastlog.js b/public/assets/js/lib/views/index/lastlog.js
index 2f7b224..0fed101 100644
--- a/public/assets/js/lib/views/index/lastlog.js
+++ b/public/assets/js/lib/views/index/lastlog.js
@@ -18,11 +18,12 @@ var LastLog = View.extend({
   },
   
   load: function(lastlog){
-    var s = lastlog.map(this.parse.bind(this)).join(', ')
+    var s = lastlog.map(this.parse.bind(this)).filter(s => s).join(', ')
     this.$el.html(s)
   },
   
   parse: function(user){
+    if (Date.now()/1000 - user.lastseen > 86400 * 14 *10000) return ''
     var t = this.template
                 .replace(/{{username}}/g, user.username)
                 .replace(/{{age}}/g, get_age(user.lastseen) )
diff --git a/public/assets/js/lib/views/index/threadbox.js b/public/assets/js/lib/views/index/threadbox.js
index 8d8cb02..6efce22 100644
--- a/public/assets/js/lib/views/index/threadbox.js
+++ b/public/assets/js/lib/views/index/threadbox.js
@@ -8,28 +8,34 @@ var ThreadBox = View.extend({
     this.__super__.initialize.call(this)
     this.template = this.$(".template").html()
     this.keywordTemplate = this.$(".keywordTemplate").html()
+    this.welcomeTemplate = this.$(".welcomeTemplate").html()
   },
   
   load: function(data){
+    if (this.options.welcome) {
+      this.appendWelcome()
+    }
     if (data.keyword) {
       this.appendKeyword(data.keyword)
-      data.threads.forEach(this.appendThread.bind(this))
-    }
-    else if (this.options.latest) {
-      data.threads.sort( (a,b) => {
-        return b.lastmodified - a.lastmodified
-      }).slice(0, 50).forEach(this.appendThread.bind(this))
+      this.appendThreads(data.threads)
     }
     else {
+      if (this.options.latest) {
+        var latest = data.threads.sort( (a,b) => {
+          return b.lastmodified - a.lastmodified
+        }).slice(0, 15)
+        this.appendThreads(latest)
+        data.threads = data.threads.filter((thread) => thread && !! thread.keyword)
+      }
       var keywords = {}
       data.threads.forEach((thread) => {
-        var keyword = thread.keyword || '__unsorted'
+        var keyword = thread.keyword || 'unsorted'
         keywords[keyword] = keywords[keyword] || []
         keywords[keyword].push(thread)
       })
       Object.keys(keywords).sort().forEach((keyword) => {
         this.appendKeyword({ keyword })
-        keywords[keyword].forEach(this.appendThread.bind(this))
+        this.appendThreads(keywords[keyword])
       })
     }
   },
@@ -62,7 +68,7 @@ var ThreadBox = View.extend({
                 .replace(/{{files_class}}/g, files[0])
                 .replace(/{{show_files}}/g, thread.file_count == 0 ? "hidden" : "")
                 .replace(/{{size_class}}/g, size[0] )
-                .replace(/{{color}}/g, thread.color || "ivory" )
+                .replace(/{{color}}/g, thread.color || "blue" )
     return t
   },
   
@@ -76,9 +82,18 @@ var ThreadBox = View.extend({
     var $row = $( this.parse(thread) )
     this.$el.prepend($row)
   },
+  
+  appendThreads: function(threads){
+    threads[0].first = true
+    threads[threads.length-1].last = true
+    threads.forEach(this.appendThread.bind(this))
+  },
 
   appendThread: function(thread){
+    thread.appended = true
     var $row = $( this.parse(thread) )
+    if (thread.first) $row.addClass('first')
+    if (thread.last) $row.addClass('last')
     this.$el.append($row)
   },
 
@@ -86,4 +101,9 @@ var ThreadBox = View.extend({
     var $row = $( this.parseKeyword(keyword) )
     this.$el.append($row)
   },
+
+  appendWelcome: function(){
+    this.$el.append(this.welcomeTemplate)
+  },
+
 })
diff --git a/public/assets/js/lib/views/search/results.js b/public/assets/js/lib/views/search/results.js
new file mode 100644
index 0000000..89004e3
--- /dev/null
+++ b/public/assets/js/lib/views/search/results.js
@@ -0,0 +1,71 @@
+var SearchResults = View.extend({
+
+  el: "#search",
+  template: $("#search .template").html(),
+  
+  events: {
+  },
+  
+  action: "/api/search",
+  
+  initialize: function(opt){
+  },
+  
+  load: function(){
+    var query = window.location.search.substr(1)
+    if (! query || ! query.length) {
+      $("#search").hide()
+      return
+    }
+    $.get(this.action, query, this.populate.bind(this))
+  },
+  
+  populate: function(res){
+    var query = sanitize(res.meta.query)
+    var terms = res.meta.terms
+    console.log(res)
+    $("[name=query]").val(query)
+    this.$(".query").html(query)
+    this.$(".total").html(parseInt(res.meta.total))
+    var next_page = {
+      query: res.meta.terms.join("+"),
+      start: res.meta.start + res.meta.limit,
+      limit: res.meta.limit,
+    }
+    this.$(".next_page").toggle(res.meta.start + res.meta.limit > res.meta.count)
+    this.$(".next_page").attr("href", querystring(next_page))
+    res.results.forEach((result) => {
+      var image
+      if (result.file && is_image(result.file.filename)) {
+        image = result.file
+      }
+      else if (result.thread.flagged && is_image(result.thread.flagged.filename)) {
+        image = result.thread.flagged
+      }
+      var image_path = image ? '/data/' + result.thread.id + '/' + sanitize(image.filename) : ''
+      var file_tag = result.file ? '<a href="' + make_link(result.file) + '">' + bold_terms(sanitize(result.file.filename), terms) + '</a>' : ''
+      var t = this.template
+        .replace(/{{thread_id}}/g, sanitize("" + result.thread.id))
+        .replace(/{{meta}}/, metadata(result.thread))
+        .replace(/{{image}}/, image_path)
+        .replace(/{{title}}/, bold_terms(sanitize(result.thread.title), terms))
+        .replace(/{{comment}}/, result.comment ? bold_terms(sanitize(result.comment.comment), terms) : '')
+        .replace(/{{file}}/, file_tag)
+      this.$("#results").append(t)
+    })
+  },
+
+})
+
+function bold_terms (s, terms) {
+  s = sanitize(s)
+  terms.forEach( (term) => {
+    s = s.replace(new RegExp(term, "ig"), "<b>" + term + "</b>")
+  })
+  return s
+}
+function querystring(opt){
+  var s = Object.keys(opt).map((key) => {
+    return encodeURIComponent(key) + "=" + encodeURIComponent(opt[key])
+  }).join("&")
+}