filter by keyword, thread, or username

5 files changed, 120 insertions, 82 deletions

diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index 597c82f..ee9e370 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -47,6 +47,9 @@
 
 /** metadata */
 
+#hootevents .keyword {
+  font-size: 13px;
+}
 #hootevents .keywordLink {
   text-decoration: none;
   opacity: 0.8;
diff --git a/public/assets/js/lib/router.js b/public/assets/js/lib/router.js
index bedf0b9..848c813 100644
--- a/public/assets/js/lib/router.js
+++ b/public/assets/js/lib/router.js
@@ -6,6 +6,12 @@ var SiteRouter = Router.extend({
     "/index/:keyword": "index",
     "/index": "index",
     "/stream": "stream",
+    "/stream/thread": "stream",
+    "/stream/thread/:id": "streamThread",
+    "/stream/keyword": "streamKeyword",
+    "/stream/keyword/:keyword": "streamKeyword",
+    "/stream/profile": "streamProfile",
+    "/stream/profile/:username": "streamItem",
     "/login": "login",
     "/logout": "logout",
     "/signup": "signup",
@@ -39,9 +45,19 @@ var SiteRouter = Router.extend({
     app.view.load(keyword);
   },
 
-  stream: function (keyword) {
+  stream: function (target) {
     app.view = new StreamView();
-    app.view.load(keyword);
+    app.view.load(target || {});
+  },
+
+  streamKeyword: function (keyword) {
+    this.stream({ keyword: keyword });
+  },
+  streamThread: function (thread) {
+    this.stream({ thread: parseInt(thread) });
+  },
+  streamProfile: function (username) {
+    this.stream({ username: username });
   },
 
   login: function () {
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 016c987..4be70bd 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -3,6 +3,10 @@ const IMAGE_REGEXP = /(.gif|.jpg|.jpeg|.png)$/gi;
 var HootStream = View.extend({
   el: "#hootstream",
 
+  events: {
+    "click a": "onClickLink",
+  },
+
   initialize: function ({ parent }) {
     this.parent = parent;
     this.$hootevents = this.$("#hootevents");
@@ -10,6 +14,25 @@ var HootStream = View.extend({
     this.threadTemplate = this.$(".threadTemplate").html();
     this.lastlogTemplate = this.$(".lastlogTemplate").html();
     this.fileTemplate = this.$(".fileTemplate").html();
+    this.onClickLink = this.onClickLink.bind(this);
+  },
+
+  onClickLink: function (event) {
+    // console.log(event.target.className, event.target.href);
+    const url = new URL(event.target.href);
+    switch (event.target.className) {
+      case "file":
+        // play audio?
+        break;
+      case "userLink":
+      case "threadLink":
+      case "keywordLink":
+        event.preventDefault();
+        console.log(">>", url.pathname);
+        app.router.go(url.pathname);
+        break;
+    }
+    // this.parent.onKeyword(keyword)
   },
 
   load: function (data) {
@@ -34,6 +57,10 @@ var HootStream = View.extend({
   },
 
   render: (template, object) => {
+    if (!template) {
+      console.log("No template", object);
+      return $("<div>No template</div>");
+    }
     const rendered = Object.entries(object).reduce(
       (newTemplate, [key, value]) =>
         newTemplate.replace(new RegExp(`{{${key}}}`, "g"), value),
@@ -99,9 +126,9 @@ var HootStream = View.extend({
       "<div class='divider dark'></div>",
       this.renderHoot({
         template: this.threadTemplate,
-        hoot: `<a class="threadLink" href="/details/${thread.id}">${thread.title}</a>`,
+        hoot: `<a class="threadLink" href="/stream/thread/${thread.id}">${thread.title}</a>`,
         keyword_link: thread.keyword
-          ? `<a class="keywordLink" href="/stream/${thread.keyword}">${thread.keyword}</a>`
+          ? `<a class="keywordLink" href="/stream/keyword/${thread.keyword}">${thread.keyword}</a>`
           : "",
         username: thread.username,
         className: postedToday ? "isRecent" : "",
@@ -155,7 +182,7 @@ var HootStream = View.extend({
     });
   },
 
-  agglutinate: ({ threads, comments, files, hootbox, lastlog }) =>
+  agglutinate: ({ query, threads, comments, files, hootbox, lastlog }) =>
     [
       ...threads.map((thread) => [
         thread.id,
@@ -172,7 +199,12 @@ var HootStream = View.extend({
         IMAGE_REGEXP.test(file.filename) ? "images" : "files",
         file,
       ]),
-      ...hootbox.map((hoot) => [1, hoot.date, "hoot", hoot]),
+      ...(query.has_query ? [] : hootbox).map((hoot) => [
+        1,
+        hoot.date,
+        "hoot",
+        hoot,
+      ]),
       ...lastlog.map((user) => [1, user.lastseen, "lastlog", user]),
     ]
       .sort((a, b) => b[1] - a[1])
diff --git a/public/assets/js/lib/views/stream/index.js b/public/assets/js/lib/views/stream/index.js
index d55a9c3..76dbfa8 100644
--- a/public/assets/js/lib/views/stream/index.js
+++ b/public/assets/js/lib/views/stream/index.js
@@ -1,8 +1,5 @@
 var StreamView = View.extend({
-  events: {},
-
-  action: "/api/stream",
-  keywordAction: "/api/keyword/",
+  action: "/api/stream/",
 
   initialize: function (opt) {
     // opt.parent = parent
@@ -14,21 +11,10 @@ var StreamView = View.extend({
     // this.countdown = new Countdown({ parent: this });
   },
 
-  load: function (keyword) {
+  load: function ({ ...target }) {
     $("body").addClass("index");
-    // if (keyword) {
-    //   $(".subtitle").html(
-    //     '<a href="/">&lt; Home</a> &middot; <a href="/keywords">Keywords</a>'
-    //   );
-    //   this.threadbox.options.latest = false;
-    //   this.threadbox.options.welcome = false;
-    //   $.get(this.keywordAction + keyword, this.populate.bind(this));
-    // } else {
-    //   this.hootbox.options.required = true;
-    //   this.threadbox.options.latest = true;
-    //   this.threadbox.options.welcome = true;
-    // }
-    $.get(this.action, this.populate.bind(this));
+    console.log(target);
+    $.get(this.action, target, this.populate.bind(this));
   },
 
   populate: function (data) {
diff --git a/public/assets/js/vendor/view/router.js b/public/assets/js/vendor/view/router.js
index 3b0d939..0f977e0 100644
--- a/public/assets/js/vendor/view/router.js
+++ b/public/assets/js/vendor/view/router.js
@@ -1,82 +1,83 @@
 var Router = View.extend({
+	routeByHash: false,
 
-  routeByHash: false,
+	go: function (url) {
+		this.parseRoute(url);
+	},
 
-  go: function(url){
-    this.parseRoute(url)
-  },
-  
-  pushState: function(url){
-    if (this.routeByHash) {
-      window.location.hash = url
-    }
-    else if (window.history) {
-      window.history.pushState(null, null, url)
-    }
-  },
+	pushState: function (url) {
+		if (this.routeByHash) {
+			window.location.hash = url;
+		} else if (window.history) {
+			window.history.pushState(null, null, url);
+		}
+	},
 
-	route: function(){
-	  var path = this.routeByHash ? window.location.hash.substr(0) : window.location.pathname
-    path = path || "/"
-		this.originalPath = path
-		this.parseRoute(path)
+	route: function () {
+		var path = this.routeByHash
+			? window.location.hash.substr(0)
+			: window.location.pathname;
+		path = path || "/";
+		this.originalPath = path;
+		this.parseRoute(path);
 	},
-	
-	parseRoute: function(pathname){
-    
-    pathname = pathname.replace(/^#/, "")
-    
-		if (pathname[0] !== "/") { pathname = "/" + pathname }
+
+	parseRoute: function (pathname) {
+		pathname = pathname.replace(/^#/, "");
+
+		if (pathname[0] !== "/") {
+			pathname = "/" + pathname;
+		}
 
 		var routes = this.routes,
-		    path = pathname.split("/");
+			path = pathname.split("/");
 
 		for (var i = 0; i < path.length; i++) {
-			if (! path[i].length) {
-				path[i] = null
+			if (!path[i].length) {
+				path[i] = null;
 			}
 		}
 
-		if (pathname in routes) {	
-			this[this.routes[pathname]]()
-			return
+		if (pathname in routes) {
+			this[this.routes[pathname]]();
+			return;
 		}
-		
-		if (path[path.length-1] == null) {
-			path.pop()
+
+		if (path[path.length - 1] == null) {
+			path.pop();
 		}
 
 		for (var route in routes) {
-			var routePath = route.split("/")
+			var routePath = route.split("/");
 			if (routePath[1] == path[1]) {
-				if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) {
-					this[this.routes[route]](path[2])
-					return
-				}
-				else if (routePath[2] == path[2]) {
+				if (
+					routePath[2] &&
+					routePath[2].indexOf(":") !== -1 &&
+					path[2] &&
+					path[3] === routePath[3]
+				) {
+					this[this.routes[route]](path[2]);
+					return;
+				} else if (routePath[2] == path[2]) {
 					if (routePath[3] && path[3]) {
 						if (routePath[3].indexOf(":") !== -1) {
-							this[this.routes[route]](path[3])
-							return
-						}
-						else if (routePath[3] == path[3]) {
-							this[this.routes[route]]()
-							return
+							this[this.routes[route]](path[3]);
+							return;
+						} else if (routePath[3] == path[3]) {
+							this[this.routes[route]]();
+							return;
 						}
+					} else if (!routePath[3] && !path[3]) {
+						this[this.routes[route]]();
+						return;
 					}
-					else if (! routePath[3] && ! path[3]) {
-						this[this.routes[route]]()
-						return
-					}
-				}
-				else if (! routePath[2] && (! path[2].length || ! path[2])) {
-					this[this.routes[route]]()
-					return
+				} else if (!routePath[2] && (!path[2].length || !path[2])) {
+					this[this.routes[route]]();
+					return;
 				}
 			}
 		}
-    // Redirect to root on 404
-    window.location = '/'
-	}
-
-})
+		// Redirect to root on 404
+		window.location = "/";
+	},
+});