Search page is now half way done. Started using javascript templates

2026-03-11 08:54:27 +00:00 · 2017-11-15 17:16:26 +01:00 · 2017-11-15 17:16:26 +01:00 · 987c100037
commit 987c100037
parent f2da0c27ba
19 changed files with 563 additions and 376 deletions
--- a/compile.sh
+++ b/compile.sh
@ -1,5 +1,7 @@
 pug -P -o . pug/about.pug pug/thread.pug pug/subreddit.pug pug/search.pug
 sass --sourcemap=none --style expanded sass/main.sass static/css/style.css
+lodash include=defaultTo,toLower,includes,parseInt,has,isNil,uniq,property,map,forEach,join,sortBy,get,now,template -p -o static/js/libraries/lodash.custom.min.js 
+lodash template="jst/*.jst" -p -o static/js/libraries/lodash.templates.min.js

 #pug --watch -P -o . pug/about.pug pug/thread.pug pug/subreddit.pug pug/search.pug
 #sass --watch --sourcemap=none --style expanded sass/main.sass:static/css/style.css
--- a/jst/search.jst
+++ b/jst/search.jst
@ -0,0 +1,78 @@
+
+	var radioInput = function(name, displayNames, values) {
+		var inputs = "";
+		
+		for(var i = 0, len = displayNames.length; i < len; i++){
+			inputs += '<span class="radioButton"'+ (Vars.lookup[name] === values[i] ? ' style="background: #239f2b; color:#fff"':'')+'>';
+			inputs += '<input type="radio" id="'+name+i+'" name="'+name+'" onchange="CSS.radio(this)"';
+			inputs += 'value="'+values[i]+'" '+(Vars.lookup[name] === values[i] ? ' checked "':'')+' >';
+			inputs += '<label for="'+name+i+'">'+displayNames[i]+'</label></span>';
+		}
+		return inputs;
+	};
+
+	var textInput = function(name){
+		return '<input type="text" name="'+name+'" id="'+name+'" value="'+Vars.get(name)+'">'; 
+	};
+
+	var label = function(name, display) {
+		return '<label for="'+name+'">'+display+': </label>';
+	};
+
+	var inputRow = function(text, input) {
+		return '<div class="search-row"><span class="search-left">'+text+'</span><span>'+input+"</span></div>";
+	};
+
+	var selectTime = function() {
+		var values = ["hour", "12hour", "day", "week", "month", "6month", "year", "all"];
+		var display = ["past hour", "past 12 hours", "past day", "past week", "past month", "past 6 months", "past year", "all time"];
+		var html = '<select name="time" id="time">';
+
+		for(var i = 0, len = values.length; i < len; i++) {
+			html += '<option value="'+values[i]+'"' + ((Vars.get("time") === values[i]) ? " selected" : '')+'>'+display[i]+'</option>';
+		}
+
+		return html + "</select>";
+	};
+
+	var select = function(name, display, values){
+		var html = '<select name="'+name+'" id="'+name+'">';
+		
+		for(var i = 0, len = values.length; i < len; i++) {
+			html += '<option value="'+values[i]+'"' + ((Vars.get(name) === values[i]) ? " selected" : '')+'>'+display[i]+'</option>';
+		}
+
+		return html + "</select>";
+	};
+
+return {
+	createSearch: function(){
+		var searchBox = document.createElement("div");
+		searchBox.id = "main-box";
+		searchBox.className = "search-box";
+	/*
+		Comments:
+		text			(body)		string
+		title 		(title)		string
+		subreddit		(subreddit)	string
+		author		(author)		string
+		over_18		(over_18)		sfw,nsfw,both *
+		locked		(locked)		bool *
+		between		(after/before)	"date"
+		sort 		(sort)		asc,desc
+	*/
+		var html = inputRow('Im looking for: ', radioInput("thread", ["Thread","Comment"], ["true", "false"]));		
+		html += inputRow(label("text", "Text"), textInput("text"));
+		html += inputRow(label("title","Title"), textInput("title"));
+		html += inputRow(label("subreddit", "Subreddit"), textInput("subreddit"));
+		html += inputRow(label("author", "Author"), textInput("author"));
+		html += inputRow("Over 18: ", radioInput("over_18", ["Both","NSFW","SFW"], ["both","nsfw","sfw"]));
+		html += inputRow("Locked: ", radioInput("locked", ["Both","True", "False"], ["both","true","false"]));
+		html += inputRow("Removed: ", select("removed", ["Removed and non-removed", "Only removed", "Only deleted"], ["all", "removed", "deleted"]));
+		html += inputRow("From:", selectTime());
+		html += inputRow("Sort: ", select("sort", ["Highest score","Lowest score","Newest","Oldest"], ["score_desc","score_asc","time_desc","time_asc"]));
+		html += '<input type="button" value="'+(showAdvanced?'Hide':'Show')+' advanced">';
+		html += '<input type="submit" value="Search">';
+		searchBox.innerHTML = html;
+	
+		mainDiv.appendChild(searchBox);
--- a/jst/subredditInfo.jst
+++ b/jst/subredditInfo.jst
@ -0,0 +1,13 @@
+<div class="subreddit-info">
+	top post of <a href="https://www.reddit.com/r/<%= subreddit %>">/r/<%= subreddit %></a> from:
+	<select onchange="Vars.reload(this)">
+		<option value="hour"<% if(time === "hour"){ %> selected<% } %>>past hour</option>
+		<option value="12hour"<% if(time === "12hour"){ %> selected<% } %>>past 12 hours</option>
+		<option value="day"<% if(time === "day"){ %> selected<% } %>>past day</option>
+		<option value="week"<% if(time === "week"){ %> selected<% } %>>past week</option>
+		<option value="month"<% if(time === "month"){ %> selected<% } %>>past month</option>
+		<option value="6month"<% if(time === "6month"){ %> selected<% } %>>past 6 months</option>
+		<option value="year"<% if(time === "year"){ %> selected<% } %>>past year</option>
+		<option value="all"<% if(time === "all"){ %> selected<% } %>>all time</option>		
+	</select>				
+</div>
--- a/jst/subredditPagination.jst
+++ b/jst/subredditPagination.jst
@ -0,0 +1,14 @@
+<div id="pagination">
+	Page: 
+	<% if(start > 1) { %>
+		<a href="<%= urlBase+1 %>">1</a> ... 
+	<% } 
+
+	for(var i = start; i <= end; i++) {	
+		if(currentPage === i) { %>
+			<span><%= i %></span>
+	<%	} else { %>
+			<a href="<%= urlBase+i %>"><%= i %></a>
+	<%	}
+	} %>
+</div>
--- a/jst/thread.jst
+++ b/jst/thread.jst
@ -0,0 +1,41 @@
+<div class="thread">
+	<span class="post-rank"><%= postNr %></span>
+	<div class="thread-score-box">
+		<div class="vote upvote"></div>
+		<div class="thread-score"><%= Format.prettyScore(thread.score) %></div>
+		<div class="vote downvote"></div>
+	</div>
+<% 	var url = _.replace(thread.url, "https://www.reddit.com", "https://www.removeddit.com");
+
+	if(_.includes(["self", "default", "image", "nsfw"], thread.thumbnail)) { %>
+		<a href="<%= url %>" class="thumbnail thumbnail-<%= thread.thumbnail%>"></a>
+<%	} else {
+		var thumbnailWidth = _.defaultTo(thread.thumbnail_width, 140) * 0.5;
+		var thumbnailHeight = _.defaultTo(thread.thumbnail_height, 140) * 0.5;
+	%>	<a href="<%= url %>">
+			<img class="thumbnail" src="<%= thread.thumbnail %>" width="<%= thumbnailWidth %>" height="<%= thumbnailHeight %>">
+		</a>
+<%	} %>
+	<div class="thread-content">
+<%	if(!_.isNil(thread.link_flair_text)){ %>
+		<span class="link-flair"><%= thread.link_flair_text %></span>
+<%	} %>	
+		<a class="thread-title" href="<%= url %>"><%= thread.title %></a>
+		<span class="domain">(<%= thread.domain %>)</span>
+		<div class="thread-info">
+			submitted <span class="thread-time"><%= Format.prettyDate(thread.created_utc) %></span> by
+			<a class="thread-author author" href="https://www.reddit.com/user/<%= thread.author %>"><%= thread.author %></a>
+		<%	if(Reddit.isAll){ %>
+			to <a class="subreddit-link author" href="/r/<%= thread.subreddit %>">/r/<%= thread.subreddit %></a>
+		<%	} %>		
+		</div>
+		<div class="total-comments">
+			<a class="grey-link" href="<%= thread.permalink %>">
+				<b><%= thread.num_comments %> comments</b>
+			</a>
+			<a class="grey-link" href="https://www.reddit.com<%= thread.permalink %>">
+				<b>reddit</b>
+			</a>
+		</div>
+	</div>
+</div>
--- a/pug/base.pug
+++ b/pug/base.pug
@ -31,7 +31,8 @@ html
 		if script
 			block script
 				script(src='/static/js/libraries/snuownd.js')
-				script(src='/static/js/libraries/lodash.min.js')
+				script(src='/static/js/libraries/lodash.custom.min.js')
+				script(src='/static/js/libraries/lodash.templates.min.js')
 				script(src='/static/js/polyfills/promise.min.js')
 				script(src='/static/js/polyfills/fetch.js')
 				script(src='/static/js/id.js')
--- a/pug/subreddit.pug
+++ b/pug/subreddit.pug
@ -5,5 +5,4 @@ block vars
 	- var script = true

 append script
-	script(src='/static/js/libraries/js.cookie.js')
 	script(src='/static/js/subreddit.js')
--- a/sass/main.sass
+++ b/sass/main.sass
@ -32,3 +32,4 @@ a:hover
@import post
@import thread
@import subreddit
+@import search
--- a/sass/search.sass
+++ b/sass/search.sass
@ -0,0 +1,52 @@
+.search-box
+	font-size: 16px
+
+	.search-row
+		padding: 10px 6px 11px
+		border-bottom: 1px dotted #ccc
+		min-height: 26px
+	
+	.search-left
+		font-weight: bold
+		display: inline-block
+		width: 190px
+		vertical-align: middle
+
+	input[type="text"]
+		font-size: 17px
+		width: 400px
+		border-radius: 2px
+		padding-left: 3px
+	
+	.radioButton
+		background: #8a8888
+		color: black
+		border-radius: 3px
+		display: inline-block
+		margin-right: 9px
+		transition: all 0.3s
+
+		label 
+			padding: 7px 10px 7px 3px
+			display: inline-block
+
+		input
+			margin: 0 0 0 5px
+			height: 35px
+			display: inline-block
+			vertical-align: top
+	
+	select
+		padding: 3px
+		font-size: 15px
+		border-radius: 2px
+
+	input[type="submit"]
+		margin: 16px auto 0px
+		display: block
+		padding: 9px 16px
+		font-size: 18px
+		background: #239f2b
+		border: 0
+		border-radius: 2px
+		color: white
--- a/search.html
+++ b/search.html
@ -19,7 +19,8 @@
    <div id="main">
    </div>
    <script src="/static/js/libraries/snuownd.js"></script>
-    <script src="/static/js/libraries/lodash.min.js"></script>
+    <script src="/static/js/libraries/lodash.custom.min.js"></script>
+    <script src="/static/js/libraries/lodash.templates.min.js"></script>
    <script src="/static/js/polyfills/promise.min.js"></script>
    <script src="/static/js/polyfills/fetch.js"></script>
    <script src="/static/js/id.js"></script>
--- a/static/css/style.css
+++ b/static/css/style.css
@ -342,3 +342,57 @@ header #status #status-image {
 #pagination span, #pagination a {
  margin: 5px;
 }
+
+.search-box {
+  font-size: 16px;
+}
+.search-box .search-row {
+  padding: 10px 6px 11px;
+  border-bottom: 1px dotted #ccc;
+  min-height: 26px;
+}
+.search-box .search-left {
+  font-weight: bold;
+  display: inline-block;
+  width: 190px;
+  vertical-align: middle;
+}
+.search-box input[type="text"] {
+  font-size: 17px;
+  width: 400px;
+  border-radius: 2px;
+  padding-left: 3px;
+}
+.search-box .radioButton {
+  background: #8a8888;
+  color: black;
+  border-radius: 3px;
+  display: inline-block;
+  margin-right: 9px;
+  transition: all 0.3s;
+}
+.search-box .radioButton label {
+  padding: 7px 10px 7px 3px;
+  display: inline-block;
+}
+.search-box .radioButton input {
+  margin: 0 0 0 5px;
+  height: 35px;
+  display: inline-block;
+  vertical-align: top;
+}
+.search-box select {
+  padding: 3px;
+  font-size: 15px;
+  border-radius: 2px;
+}
+.search-box input[type="submit"] {
+  margin: 16px auto 0px;
+  display: block;
+  padding: 9px 16px;
+  font-size: 18px;
+  background: #239f2b;
+  border: 0;
+  border-radius: 2px;
+  color: white;
+}
--- a/static/js/functions.js
+++ b/static/js/functions.js
@ -4,28 +4,25 @@
 var Status = (function(){
 	var loadingText = document.getElementById("status-text");
 	var statusImage = document.getElementById("status-image");
-	var loadingImg = "/static/images/loading.gif";
-	var successImg = "/static/images/done.png";
-	var errorImg = "/static/images/error.png";

-return {
-	loading: function(msg) {
-		statusImage.src = loadingImg;
-		loadingText.innerHTML = msg;
-	},
-		
-	success: function(msg) {
-		msg = _.defaultTo(msg, "");
-		statusImage.src = successImg;
-		loadingText.innerHTML = msg;
-	},
+	return {
+		loading: function(msg) {
+			statusImage.src = "/static/images/loading.gif";
+			loadingText.innerHTML = msg;
+		},
+			
+		success: function(msg) {
+			statusImage.src = "/static/images/done.png";
+			loadingText.innerHTML = _.defaultTo(msg, "");
+		},

-	error: function(msg) {
-		statusImage.src = errorImg;
-		loadingText.innerHTML = "<b>"+msg+"</b>";
-		console.error(msg);
-	}
-}})();
+		error: function(msg) {
+			statusImage.src = "/static/images/error.png";
+			loadingText.innerHTML = "<b>"+msg+"</b>";
+			console.error(msg);
+		}
+	};
+})();


 // Check browser support
@ -49,104 +46,69 @@ if(!isSupported) {
 	})();
 }

-
-// Reddit API
-var Reddit = (function() {
-	var init = {headers: {"Authorization": ""}};
+var Reddit = (function() {	
+	var subreddit = _.defaultTo(window.location.pathname.split("/")[2], 'all');
 	
-return {
-	init: init,
-	subreddit: _.defaultTo(window.location.pathname.split("/")[2], 'all'),
-	threadID: window.location.pathname.split("/")[4],
-	permalink: window.location.pathname.split("/")[6],
-	fetchToken: function() {		
-		return fetch("https://www.reddit.com/api/v1/access_token", {
-			headers: {
-				"Authorization": "Basic " + btoa(clientID + ":"),
-				"Content-Type": "application/x-www-form-urlencoded; charset=utf-8"
-			},
-			method: "POST",
-			body: "grant_type="+encodeURIComponent("https://oauth.reddit.com/grants/installed_client")+"&device_id=DO_NOT_TRACK_THIS_DEVICE"
-		})
-		.then(function(response) { 
-			if(response.ok) {
-				return response.json();
-			} else {
-				return Promise.reject("Can't connect to Reddit API");
-			}
-		})
-		.then(function(json) {
-			init.headers.Authorization = "bearer " + json.access_token;
-		})
-		.catch(function(error) {
-			return Promise.reject("Can't connect to Reddit API");
-		});		
-	}
-}})();
-
-
-// Helper functions for fetch
-var Fetch2 = (function(){
-return {
-	multiple: function(urls, init, jsonPath, flattening) {
-		flattening = _.defaultTo(flattening, true);
-		jsonPath = _.defaultTo(jsonPath, null);
-		
-		return Promise.all(_.map(urls, function(url) { 
-			return fetch(url, init)
-			.then(Fetch2.json)
-			.then(function(jsonArray) {
-				if(! _.isNil(jsonPath)) {
-					return _.get(jsonArray, jsonPath);
-				}
-				return jsonArray;
-			});
-		}))
-		.then(function(dataArray) {
-			if(flattening) {
-				return _.flatten(dataArray);
-			}
-			return dataArray;
-		});
-	},
-	json: function(response) {
-		return response.json();
-	}
-}})();
-
-
-var URLs = (function(){
-	var reddit = "https://oauth.reddit.com";
-	var pushshift = "https://api.pushshift.io";
-	var elastic = "https://elastic.pushshift.io";
-	var maxItemsPerRequest = 100;
-
 	return {
-		format: function(url, data, chunkSize) {
-			chunkSize = _.defaultTo(chunkSize, maxItemsPerRequest);
-			var dataChunks = _.chunk(data, chunkSize);
-			return _.map(dataChunks, function(chunk) { return url + chunk; })
-		},
-		pushshiftComments:	pushshift+"/reddit/comment/search?ids=",
-		pushshiftIDs:		pushshift+"/reddit/submission/comment_ids/"+Reddit.threadID,
-		thread:			reddit+"/r/"+Reddit.subreddit+"/comments/"+Reddit.threadID,
-		moreChildren:		reddit+"/api/morechildren?link_id=t3_"+Reddit.threadID+"&children=",
-		singleComments:	reddit+"/r/"+Reddit.subreddit+"/api/info/?id=",
-		subreddit:		reddit+"/r/"+Reddit.subreddit,
-		elasticThreads: 	elastic+"/rs/submissions/_search?source="
+		subreddit:	subreddit,
+		isAll:		_.toLower(subreddit) === 'all',
+		threadID:		window.location.pathname.split("/")[4],
+		permalink:	window.location.pathname.split("/")[6]
 	};
 })();

+var Fetch2 = (function(){
+	return {
+		get: function(url, error){
+			return fetch(url)
+			.catch(function(error){
+				return Promise.reject(error);
+			})
+			.then(function(response){
+				if(response.ok) {
+					return response;
+				} else {
+					return Promise.reject(error);
+				}
+			});
+		},
+
+		json: function(response) {
+			return response.json();
+		},
+
+		handleError: function(error) {
+			if(_.includes(_.toLower(error), "error")) {
+				Status.error(error);
+			} else {
+				Status.error("Error: "+error);
+			}
+		}
+	};
+})();
+
+var ElasticSearch = (function() {
+	var elastic = "https://elastic.pushshift.io";
+	//var elasticThreads: elastic+"/rs/submissions/_search?source="
+	
+return {
+	subreddit: function(){},
+	thread: function(){},
+	comment: function(){}
+
+};
+})();

 // HTML parsing
 var HTML = (function (){
-return {
-	parse: function(htmlString) {
-		var tmpDiv = document.createElement('div')
-		tmpDiv.innerHTML = htmlString
-		return tmpDiv.childNodes.length === 0 ? "" : tmpDiv.childNodes[0].nodeValue
-	}
-};
+	return {
+		parse: function(htmlString) {
+			var tmpDiv = document.createElement('div');
+			tmpDiv.innerHTML = htmlString;
+			return tmpDiv.childNodes.length === 0 ? "" : tmpDiv.childNodes[0].nodeValue;
+		},
+		main: document.getElementById("main")
+	};
 })();


@ -161,6 +123,7 @@ return {
 		var parts = timeString.split(/[a-zA-Z]+/);
 		var times = 1;

+		// Number before the time (e.g. 2years or 12hour)
 		if(parts.length === 2 && parts[0] !== "") {
 			times = _.parseInt(parts[0]);
 		}
@ -174,34 +137,27 @@ return {
 		return Time.utc();
 	},
 	
-	difference: function(utc) {
-		return Time.utc() - utc;
+	difference: function(timeString) {
+		return Time.utc() - Time.toUTC(timeString);
 	}
 };
 })();

 // The get variables used in the url
 var GetVars = (function(){
-return {
-	get: function(variable) {
-		var urlParts = window.location.href.split("?");
-		if(urlParts.length <= 1) {
+	return {
+		get: function(key) {
+			var pairs = _.defaultTo(window.location.href.split("?")[1], "").split("&");
+			
+			for(var i = 0, len = pairs.length; i < len; i++) {
+				if(pairs[i].split("=")[0] === key) {
+					return pairs[i].split("=")[1];
+				}
+			}
+
 			return undefined;
 		}
-
-		var getVariables = urlParts[1].split("&");
-		
-		for(var i = 0, len = getVariables.length; i < len; i++) {
-			var keyAndValue = getVariables[i].split("=");
-			
-			if(keyAndValue[0] === variable) {
-				return keyAndValue[1];
-			}
-		}
-
-		return undefined;
-	}
-};
+	};
 })();


@ -242,4 +198,5 @@ return {

 		return  score;
 	}
-}})();
+};
+})();
--- a/static/js/libraries/lodash.custom.min.js
+++ b/static/js/libraries/lodash.custom.min.js
--- a/static/js/libraries/lodash.templates.min.js
+++ b/static/js/libraries/lodash.templates.min.js
@ -0,0 +1,12 @@
+/**
+ * @license
+ * Lodash (Custom Build) lodash.com/license | Underscore.js  underscorejs.org/LICENSE
+ * Build: `lodash template="jst/*.jst" -p -o static/js/libraries/lodash.templates.min.js`
+ */
+;(function(){var e=typeof self=="object"&&self&&self.Object===Object&&self,e=typeof global=="object"&&global&&global.Object===Object&&global||e||Function("return this")(),f=typeof exports=="object"&&exports&&!exports.nodeType&&exports,g=f&&typeof module=="object"&&module&&!module.nodeType&&module,c=e._||{},d={subredditInfo:function(a){a||(a={});var b;with(a)a=""+('<div class="subreddit-info">\n\ttop post of <a href="https://www.reddit.com/r/'+(null==(b=subreddit)?"":b)+'">/r/'+(null==(b=subreddit)?"":b)+'</a> from:\n\t<select onchange="Vars.reload(this)">\n\t\t<option value="hour"'),
+"hour"===time&&(a+=" selected"),a+='>past hour</option>\n\t\t<option value="12hour"',"12hour"===time&&(a+=" selected"),a+='>past 12 hours</option>\n\t\t<option value="day"',"day"===time&&(a+=" selected"),a+='>past day</option>\n\t\t<option value="week"',"week"===time&&(a+=" selected"),a+='>past week</option>\n\t\t<option value="month"',"month"===time&&(a+=" selected"),a+='>past month</option>\n\t\t<option value="6month"',"6month"===time&&(a+=" selected"),a+='>past 6 months</option>\n\t\t<option value="year"',
+"year"===time&&(a+=" selected"),a+='>past year</option>\n\t\t<option value="all"',"all"===time&&(a+=" selected");return a+">all time</option>\t\t\n\t</select>\t\t\t\t\n</div>"},subredditPagination:function(a){a||(a={});var b;with(a){a='<div id="pagination">\n\tPage: \n\t',1<start&&(a+='\n\t\t<a href="'+(null==(b=urlBase+1)?"":b)+'">1</a> ... \n\t');for(var c=start;c<=end;c++)a=currentPage===c?a+("\n\t\t\t<span>"+(null==(b=c)?"":b)+"</span>\n\t"):a+('\n\t\t\t<a href="'+(null==(b=urlBase+c)?"":b)+'">'+(null==(b=c)?"":b)+"</a>\n\t");
+}return a+"\n</div>"},thread:function(a){a||(a={});var b;with(a){a=""+('<div class="thread">\n\t<span class="post-rank">'+(null==(b=postNr)?"":b)+'</span>\n\t<div class="thread-score-box">\n\t\t<div class="vote upvote"></div>\n\t\t<div class="thread-score">'+(null==(b=Format.prettyScore(thread.score))?"":b)+'</div>\n\t\t<div class="vote downvote"></div>\n\t</div>\n');var d=c.replace(thread.url,"https://www.reddit.com","https://www.removeddit.com");if(c.includes(["self","default","image","nsfw"],thread.thumbnail))a+='\n\t\t<a href="'+(null==(b=d)?"":b)+'" class="thumbnail thumbnail-'+(null==(b=thread.thumbnail)?"":b)+'"></a>\n';else{
+var e=.5*c.defaultTo(thread.thumbnail_width,140),f=.5*c.defaultTo(thread.thumbnail_height,140);a+='\t<a href="'+(null==(b=d)?"":b)+'">\n\t\t\t<img class="thumbnail" src="'+(null==(b=thread.thumbnail)?"":b)+'" width="'+(null==(b=e)?"":b)+'" height="'+(null==(b=f)?"":b)+'">\n\t\t</a>\n'}a+='\n\t<div class="thread-content">\n',c.isNil(thread.link_flair_text)||(a+='\n\t\t<span class="link-flair">'+(null==(b=thread.link_flair_text)?"":b)+"</span>\n"),a+='\t\n\t\t<a class="thread-title" href="'+(null==(b=d)?"":b)+'">'+(null==(b=thread.title)?"":b)+'</a>\n\t\t<span class="domain">('+(null==(b=thread.domain)?"":b)+')</span>\n\t\t<div class="thread-info">\n\t\t\tsubmitted <span class="thread-time">'+(null==(b=Format.prettyDate(thread.created_utc))?"":b)+'</span> by\n\t\t\t<a class="thread-author author" href="https://www.reddit.com/user/'+(null==(b=thread.author)?"":b)+'">'+(null==(b=thread.author)?"":b)+"</a>\n\t\t",
+Reddit.isAll&&(a+='\n\t\t\tto <a class="subreddit-link author" href="/r/'+(null==(b=thread.subreddit)?"":b)+'">/r/'+(null==(b=thread.subreddit)?"":b)+"</a>\n\t\t"),a+='\t\t\n\t\t</div>\n\t\t<div class="total-comments">\n\t\t\t<a class="grey-link" href="'+(null==(b=thread.permalink)?"":b)+'">\n\t\t\t\t<b>'+(null==(b=thread.num_comments)?"":b)+' comments</b>\n\t\t\t</a>\n\t\t\t<a class="grey-link" href="https://www.reddit.com'+(null==(b=thread.permalink)?"":b)+'">\n\t\t\t\t<b>reddit</b>\n\t\t\t</a>\n\t\t</div>\n\t</div>\n</div>';
+}return a}};typeof define=="function"&&typeof define.amd=="object"&&define.amd? define(["lodash"],function(t){c=t,t.templates=t.extend(t.templates||{},d)}):g?(c=require("lodash"),(g.exports=d).templates=d,f.templates=d):c&&(c.templates=c.extend(c.templates||{},d))}).call(this);
--- a/static/js/search.js
+++ b/static/js/search.js
@ -1,34 +1,20 @@
 var app = (function(){
 return {
 	loadPage: function(){
-
+		Vars.loadVars();
 		SearchHTML.createSearch();
+
+		if(Vars.get("search") === "true") {
+			if(Vars.get("thread") === "true") {
+				ElasticSearch.thread();
+			} else {
+				ElasticSearch.comment();
+			}
+		}
 	}
 };
 })();

-/*
-
-Comments:
-comment body 	(body)		string
-sort 		(sort)		asc,desc
-author		(author)		string
-subreddit		(subreddit)	string
-between		(after/before)	"date"
-
-
-Thread:
-title 		(title)		string
-selftext 		(body)		string
-sort 		(sort)		asc,desc
-author		(author)		string
-subreddit		(subreddit)	string
-between		(after/before)	"date"
-over_18		(over_18)		sfw,nsfw,both
-locked		(locked)		bool
-
-*/
-
 var ElasticSearch = (function(){
 return {
 	comment: function(){
@ -39,20 +25,73 @@ return {
 	}
 };
 })();
-
+/*
+Comments:
+text			(body)		string
+title 		(title)		string
+subreddit		(subreddit)	string
+author		(author)		string
+over_18		(over_18)		sfw,nsfw,both *
+locked		(locked)		bool *
+between		(after/before)	"date"
+sort 		(sort)		asc,desc
+*/

 var Vars = (function(){
 	var lookup = {};
-	var keys = [];
-	var defaults = [];
+	var keys = 	["thread","text", "title", "subreddit", "author", "over_18", "locked", "removed", "deleted", "time", "sort", "search"];
+	var defaults = ["true", 	"", 	    "",	  "",		"",		"both",	 "both",	 "",		  "",	   "all",  "score_dsec", "false"];
+	var defaultLookup = {};
+	var showAdvanced = true;
+
+	for(var i = 0, len = keys.length; i < len; i++) {
+		defaultLookup[keys[i]] = defaults[i];
+	}

 return {
 	loadVars: function(){
+		_.forEach(keys, function(key){
+			lookup[key] = _.defaultTo(GetVars.get(key), defaultLookup[key]);
+		});				

+		showAdvanced = _.defaultTo(Cookies.get("showAdvanced"), true);
+	},
+	updateVars: function(){
+		_.forEach(keys, function(key){
+			lookup[key] = document.getElementById(key).value;
+		});
 	},
 	get: function(key){
+		if(key === "showAdvanced") {
+			return showAdvanced;
+		}
+
 		return lookup[key];
-	}
+	},
+	generateURL : function(){
+		var url = "?";
+		var first = true;
+		_.forEach(lookup, function(key){
+			if(lookup[key] !== defaultLookup[key]) {
+				if(first) {
+					url += key+"="+lookup[key];
+					first = false;
+				} else {
+					url += "&"+key+"="+lookup[key];
+				}
+			}
+		});
+
+		if(url === "?") {
+			return "?search=true";
+		}
+
+		return url + "&search=true";
+	},
+	setShowAdvanced: function(shouldShowAdvaned){
+		showAdvanced = shouldShowAdvaned;
+	},
+	lookup: lookup
 };
 })();

@ -60,53 +99,80 @@ return {
 var SearchHTML = (function(){
 	var mainDiv = document.getElementById("main");

-	var createRadioInput = function(name, displayNames, values, defaultValue) {
+	var radioInput = function(name, displayNames, values) {
 		var inputs = "";
 		
 		for(var i = 0, len = displayNames.length; i < len; i++){
-			inputs += '<input type="radio" id="'+name+i+'" name="'+name+'" ';
-			inputs += 'value="'+values[i]+'" '+(defaultValue === values[i] ? 'checked':'')+' >';
-			inputs += '<label for="'+name+i+'">'+displayNames[i]+'</label>';
+			inputs += '<span class="radioButton"'+ (Vars.lookup[name] === values[i] ? ' style="background: #239f2b; color:#fff"':'')+'>';
+			inputs += '<input type="radio" id="'+name+i+'" name="'+name+'" onchange="CSS.radio(this)"';
+			inputs += 'value="'+values[i]+'" '+(Vars.lookup[name] === values[i] ? ' checked "':'')+' >';
+			inputs += '<label for="'+name+i+'">'+displayNames[i]+'</label></span>';
 		}
 		return inputs;
 	};

-	var inputRow = function(text, input) {
+	var textInput = function(name){
+		return '<input type="text" name="'+name+'" id="'+name+'" value="'+Vars.get(name)+'">'; 
+	};

-	}
+	var label = function(name, display) {
+		return '<label for="'+name+'">'+display+': </label>';
+	};
+
+	var inputRow = function(text, input) {
+		return '<div class="search-row"><span class="search-left">'+text+'</span><span>'+input+"</span></div>";
+	};
+
+	var selectTime = function() {
+		var values = ["hour", "12hour", "day", "week", "month", "6month", "year", "all"];
+		var display = ["past hour", "past 12 hours", "past day", "past week", "past month", "past 6 months", "past year", "all time"];
+		var html = '<select name="time" id="time">';
+
+		for(var i = 0, len = values.length; i < len; i++) {
+			html += '<option value="'+values[i]+'"' + ((Vars.get("time") === values[i]) ? " selected" : '')+'>'+display[i]+'</option>';
+		}
+
+		return html + "</select>";
+	};
+
+	var select = function(name, display, values){
+		var html = '<select name="'+name+'" id="'+name+'">';
+		
+		for(var i = 0, len = values.length; i < len; i++) {
+			html += '<option value="'+values[i]+'"' + ((Vars.get(name) === values[i]) ? " selected" : '')+'>'+display[i]+'</option>';
+		}
+
+		return html + "</select>";
+	};

 return {
 	createSearch: function(){
 		var searchBox = document.createElement("div");
-		searchBox.id = "searchBox";
-
-		var showAdvanced = _.defaultTo(Cookies.get("showAdvanced"), true);
-		var searchThread = _.defaultTo(Cookies.get("searchThread"), true);
-/*
-Thread:
-title 		(title)		string 	*
-selftext 		(body)		string 	*
-sort			(sort)		asc,desc	*
-author		(author)		string	*
-subreddit		(subreddit)	string	*
-between		(after/before)	"date"
-over_18		(over_18)		sfw,nsfw,both *
-locked		(locked)		bool		*
-*/
-		var html = 'Im looking for: ';
-		html += '<input type="radio" id="threadSearch" name="search" value="thread"'+(searchThread ? ' checked ':'')+'><label for="threadSearch">Thread</label>';
-		html += '<input type="radio" id="commentSearch" name="search" value="comment"'+(!searchThread ? ' checked ':'')+'><label for="commentSearch">Comment</label>';
-		html += '<label for="title">Title: </label><input type="text" id="title" name="title">';
-		html += '<label for="threadBody">Selftext: </label><input type="text" id="threadBody" name="body">';
-		html += '<label for="threadSubreddit">Subreddit: </label><input type="text" id="threadSubreddit" name="subreddit">';
-		html += '<label for="threadAuthor">Author: </label><input type="text" id="threadAuthor" name="author">';
-		html += 'Posted between time &lt time &l time';
-		html += "Over 18: ";
-		html += createRadioInput("over_18", ["Both","nsfw","sfw"], ["both","nsfw","sfw"], _.defaultTo(GetVars.get("over_18"), "both"));
-		html += "Locked: ";
-		html += createRadioInput("locked", ["Both","True", "False"], ["both","true","false"], _.defaultTo(GetVars.get("locked"), "both"));
-		html += "Sort score: ";
-		html += createRadioInput("sort", ["Highest","Lowest"], ["desc","asc"], _.defaultTo(GetVars.get("sort"), "desc"));
+		searchBox.id = "main-box";
+		searchBox.className = "search-box";
+	/*
+		Comments:
+		text			(body)		string
+		title 		(title)		string
+		subreddit		(subreddit)	string
+		author		(author)		string
+		over_18		(over_18)		sfw,nsfw,both *
+		locked		(locked)		bool *
+		between		(after/before)	"date"
+		sort 		(sort)		asc,desc
+	*/
+		var html = inputRow('Im looking for: ', radioInput("thread", ["Thread","Comment"], ["true", "false"]));		
+		html += inputRow(label("text", "Text"), textInput("text"));
+		html += inputRow(label("title","Title"), textInput("title"));
+		html += inputRow(label("subreddit", "Subreddit"), textInput("subreddit"));
+		html += inputRow(label("author", "Author"), textInput("author"));
+		html += inputRow("Over 18: ", radioInput("over_18", ["Both","NSFW","SFW"], ["both","nsfw","sfw"]));
+		html += inputRow("Locked: ", radioInput("locked", ["Both","True", "False"], ["both","true","false"]));
+		html += inputRow("Removed: ", select("removed", ["Removed and non-removed", "Only removed", "Only deleted"], ["all", "removed", "deleted"]));
+		html += inputRow("From:", selectTime());
+		html += inputRow("Sort: ", select("sort", ["Highest score","Lowest score","Newest","Oldest"], ["score_desc","score_asc","time_desc","time_asc"]));
+		html += '<input type="button" value="'+(showAdvanced?'Hide':'Show')+' advanced">';
+		html += '<input type="submit" value="Search">';
 		searchBox.innerHTML = html;
 	
 		mainDiv.appendChild(searchBox);
@ -122,6 +188,55 @@ locked		(locked)		bool		*
 };
 })();

+// name
+//var CSS = (function(){
+return {
+	radio: function(event) {
+		var radioButtons = document.getElementsByName(event.name);
+		
+		for(var i = 0, len = radioButtons.length; i < len; i++){
+			if(radioButtons[i].id == event.id) {
+				radioButtons[i].parentNode.style = "background: #239f2b; color:#fff";
+			} else {
+				radioButtons[i].parentNode.style = "background: #8a8888; color:#000";
+			}
+		}
+	},
+	updateDisplayedOptions: function(){
+		var showAdvanced = Vars.get("showAdvanced") == "true";
+		var thread = document.getElementById("thread").value == "thread";
+		console.log(document.getElementById("thread").value)
+		var display;
+		var hide;
+
+		if(thread && showAdvanced) {
+			display = ["body","title","subreddit","author","over_18","locked","removed","time","sort"];
+			hide = [];
+		} else if(thread && !showAdvanced) {
+			display = ["body", "title", "subreddit"];
+			hide = ["author","over_18","locked","removed","time","sort"];
+		} else if(!thread && showAdvanced) {
+			display = ["body","subreddit","author","removed","time","sort"];
+			hide = ["title","over_18","locked"];
+		} else if(!thread && !showAdvanced) {
+			display = ["body","subreddit"];
+			hide = ["title","over_18","locked", "author","removed","time","sort"];
+		}
+
+		_.forEach(display, function(id){
+
+		});
+
+
+	},
+	toggleShowAdvanced: function(){
+		Vars.setShowAdvanced(Vars.get("showAdvanced"));
+		Cookies.set("showAdvanced", Vars.get("showAdvanced"), , { expires: 365 });
+		CSS.
+	}
+};
+})();
+

 if(isSupported) {
 	app.loadPage();
--- a/static/js/subreddit.js
+++ b/static/js/subreddit.js
@ -4,103 +4,51 @@ var app = (function(){
 return {
 	loadPage: function() {
 		Status.loading("Loading subreddit...");
-		Vars.loadTime();
-		Vars.loadPage();
+		document.title = Reddit.isAll ? 'all subreddits' : Reddit.subreddit;
+		HTML.main.innerHTML += _.templates.subredditInfo({subreddit: Reddit.subreddit, time: Vars.time});

-		if(Vars.isAll) {
-			document.title = 'all subreddits';
-		} else {
-			document.title = Reddit.subreddit;
-		}
-		
-		var timeDifference = Time.difference(Time.toUTC(Vars.getTime()));
-		SubredditHTML.createInfo(Reddit.subreddit, Vars.getTime());
-
-		fetch(ElasticSearch.subreddit(Reddit.subreddit, timeDifference, Vars.getPage()))
-		.catch(function(error){
-				return Promise.reject("Could not get removed posts");
-		})
-		.then(function(response){
-			if(response.ok) {
-				return response;
-			} else {
-				return Promise.reject("Could not get removed posts");
-			}
-		})
+		Fetch2.get(ElasticSearch.subreddit(Reddit.subreddit, Time.difference(Vars.time), Vars.page), "Could not get removed posts")
 		.then(Fetch2.json)
 		.then(function(json){
-			var sourceArray = json.hits.hits;
-			var pageNr = (Vars.getPage() - 1) * Vars.postPerPage + 1;
-			for(var i = 0, len = sourceArray.length; i < len; i++) { 
-				SubredditHTML.createThread(sourceArray[i]._source, pageNr+i);	
-			}
+			var startPostNr = (Vars.page - 1) * Vars.postPerPage + 1;
+			
+			_.forEach(json.hits.hits, function(subreddit, i){
+				HTML.main.innerHTML += _.templates.thread({thread: subreddit._source, postNr: startPostNr+i});
+			});

-			SubredditHTML.createPagination(json.hits.total);
+			var start = Math.max(Vars.page - 3, 1);
+			var end = Math.min(start + 9, Math.ceil(json.hits.total/Vars.postPerPage));
+			var urlBase = document.location.href.split("?")[0] + "?t=" + Vars.time + "&page=";
+			HTML.main.innerHTML += _.templates.subredditPagination({start:start,end:end,currentPage:Vars.page,urlBase:urlBase});
 			Status.success();		
 		})
-		.catch(function(error) {
-			if(_.includes(_.toLower(error), "error")) {
-				Status.error(error);
-			} else {
-				Status.error("Error: "+error);
-			}
-		});
+		.catch(Fetch2.handleError);
 	}
 };
 })();

 var Vars = (function(){
-	var time;
-	var page;
-
-return {
-	postPerPage: 50,
-	isAll: _.toLower(Reddit.subreddit) === 'all',
-	loadTime: function(){
-		var tmpTime = _.defaultTo(GetVars.get("t"), Cookies.get("t"));
-		
-		if(Vars.isAll) {
-			time = _.defaultTo(tmpTime, "12hour");
-		} else {
-			time = _.defaultTo(tmpTime, "day");
+	return {
+		postPerPage: 50,
+		time: _.defaultTo(GetVars.get("t"), Reddit.isAll ? "12hour" : "day"),
+		page: _.defaultTo(_.parseInt(GetVars.get("page")), 1),
+		reload: function(event) {
+			document.location.href = document.location.href.split("?")[0] + "?t=" + event.value;
 		}
-	},
-	loadPage: function() {
-		var tmpPage = _.defaultTo(GetVars.get("page"), "1");
-
-		if(tmpPage === "") {
-			page = 1;
-		} else {
-			page = _.parseInt(tmpPage);
-		}
-	},
-	setTime: function(newTime) {
-		time = newTime;
-	},
-	setPage: function(newPage) {
-		page = newPage;
-	},
-	getTime: function(){
-		return time;
-	},
-	getPage: function(){
-		return page;
-	}
-};
+	};
 })();

-
 var ElasticSearch = (function(){
 return {
 	subreddit: function(subreddit, time, page){
 		var condition = '[{"term":{"subreddit":"'+_.toLower(subreddit)+'"}},'+
 		'{"range":{"created_utc":{"gt":'+time+'}}}]';

-		if(Vars.isAll) {
+		if(Reddit.isAll) {
 			condition = '{"range":{"created_utc":{"gt":'+time+'}}}';
 		}

-		return URLs.elasticThreads+'{'+
+		return 'https://elastic.pushshift.io/rs/submissions/_search?source={'+
 		'"query":{'+
 			'"bool":{'+
 				'"must":'+condition+
@ -114,108 +62,6 @@ return {
 };
 })();

-var SubredditHTML = (function(){
-	var mainDiv = document.getElementById("main");
-return {
-	createThread: function(thread, postRank) {	
-		var threadDiv = document.createElement("div");
-		threadDiv.className = "thread";
-		var threadLink = thread.url;
-
-		if(_.has(thread, 'selftext')) {
-			if(thread.selftext !== "") {
-				threadLink = thread.permalink;
-			}
-		}
-		var defaultThumbnails = ["self", "default", "image", "nsfw"];		
-		var thumbnail = '<a href="'+threadLink+'"';
-		
-		if(_.includes(defaultThumbnails, thread.thumbnail)) {
-			thumbnail += ' class="thumbnail thumbnail-'+thread.thumbnail+'"></a>';
-		} else {
-			var thumbnailWidth = _.defaultTo(thread.thumbnail_width, 140);
-			var thumbnailHeight = _.defaultTo(thread.thumbnail_height, 140);
-
-			thumbnail += '"><img class="thumbnail" src="'+thread.thumbnail+'" width="'+(thumbnailWidth*0.5)+'" height="'+(thumbnailHeight*0.5)+'"></a>';
-		}
-
-		threadDiv.innerHTML  = ' \
-			<span class="post-rank">'+postRank+'</span> \
-			<div class="thread-score-box"> \
-				<div class="vote upvote"></div> \
-				<div class="thread-score">'+Format.prettyScore(thread.score)+'</div> \
-				<div class="vote downvote"></div> \
-			</div>'+
-			thumbnail+
-			'<div class="thread-content"> \
-				'+(! _.isNil(thread.link_flair_text) ? '<span class="link-flair">'+thread.link_flair_text+'</span>' : '') +
-				'<a class="thread-title" href="'+threadLink+'">'+thread.title+'</a> \
-				<span class="domain">('+thread.domain+')</span> \
-				<div class="thread-info"> \
-					submitted <span class="thread-time">'+Format.prettyDate(thread.created_utc)+'</span> by \
-					<a class="thread-author author" href="https://www.reddit.com/user/'+thread.author+'">'+thread.author+'</a> '+
-					((_.toLower(Reddit.subreddit) === 'all') ? 'to <a class="subreddit-link author" href="/r/'+thread.subreddit+'">/r/'+thread.subreddit+'</a>':'')+
-				'</div> \
-				<div class="total-comments"> \
-					<a class="grey-link" href="'+thread.permalink+'"><b>'+thread.num_comments+' comments</b></a> \
-					<a class="grey-link" href="https://www.reddit.com'+thread.permalink+'"><b>reddit</b></a> \
-					</div> \
-			</div> \
-		';
-		mainDiv.appendChild(threadDiv);
-	},
-
-	createInfo: function(subreddit, time) {
-		var infoDiv = document.createElement("div");
-		infoDiv.className = "subreddit-info";
-		infoDiv.innerHTML = 'top post of <a href="https://www.reddit.com/r/'+subreddit+'">/r/'+subreddit+'</a> from:'; 
-		
-		var values = ["hour", "12hour", "day", "week", "month", "6month", "year", "all"];
-		var display = ["past hour", "past 12 hours", "past day", "past week", "past month", "past 6 months", "past year", "all time"];
-		var options = "";
-
-		for(var i = 0, len = values.length; i < len; i++) {
-			options += '<option value="'+values[i]+'"' + ((values[i] === time) ? " selected" : '')+'>'+display[i]+'</option>';
-		}
-
-		var select = document.createElement("select");
-		select.innerHTML = options;
-		select.addEventListener("change", function(event) {
-			Cookies.set('t', select.value, { expires: 365 });
-			document.location.href = document.location.href.split("?")[0] + "?t=" + select.value;
-		});
-		infoDiv.appendChild(select);
-		mainDiv.appendChild(infoDiv);
-	},
-
-	createPagination: function(totalPosts) {
-		var pagination = document.createElement("div");
-		pagination.id = "pagination";
-
-		var start = Math.max(Vars.getPage()-3, 1);
-		var end = Math.min(start + 9, Math.ceil(totalPosts/Vars.postPerPage));
-		var links = "Page: ";
-		var hrefBase = document.location.href.split("?")[0] + "?t=" + Vars.getTime() + "&page=";
-
-		if(start > 1) {
-			links += '<a href="'+hrefBase+1+'">1</a> ... ';
-		} 
-
-		for(var i = start; i <= end; i++) {
-			if(Vars.getPage() === i) {
-				links += "<span>"+i+"</span>";
-			} else {
-				links += '<a href="'+hrefBase+i+'">'+i+'</a>';
-			}
-		}
-
-		pagination.innerHTML = links;
-		mainDiv.appendChild(pagination);
-	}
-};
-})();
-
-
 if(isSupported) {
 	app.loadPage();
 }
--- a/static/js/thread.js
+++ b/static/js/thread.js
@ -323,7 +323,7 @@ var ThreadHTML = (function(){
 					<a class="grey-link" href="https://www.reddit.com'+thread.permalink+'"><b>reddit</b></a> \
 					</div>' +
 				(thread.media !== null ? HTML.parse(thread.media_embed.content) : '') +
-				(_.includes(imageHosts, thread.domain) && _.has(thread, "preview") ? '<a href="'+thread.url+'"><img id="thread-image" src="'+thread.preview.images[0].source.url+'"></a>' : '') +
+				(_.includes(imageHosts, thread.domain) && _.has(thread, "preview") ? '<a href="'+thread.url+'"><img class="thread-image" src="'+thread.preview.images[0].source.url+'"></a>' : '') +
 			'</div> \
 		';
 		mainDiv.appendChild(threadDiv);
--- a/subreddit.html
+++ b/subreddit.html
@ -22,12 +22,12 @@
    <div id="main">
    </div>
    <script src="/static/js/libraries/snuownd.js"></script>
-    <script src="/static/js/libraries/lodash.min.js"></script>
+    <script src="/static/js/libraries/lodash.custom.min.js"></script>
+    <script src="/static/js/libraries/lodash.templates.min.js"></script>
    <script src="/static/js/polyfills/promise.min.js"></script>
    <script src="/static/js/polyfills/fetch.js"></script>
    <script src="/static/js/id.js"></script>
    <script src="/static/js/functions.js"></script>
-    <script src="/static/js/libraries/js.cookie.js"></script>
    <script src="/static/js/subreddit.js"></script>
  </body>
 </html>
--- a/thread.html
+++ b/thread.html
@ -22,7 +22,8 @@
    <div id="main">
    </div>
    <script src="/static/js/libraries/snuownd.js"></script>
-    <script src="/static/js/libraries/lodash.min.js"></script>
+    <script src="/static/js/libraries/lodash.custom.min.js"></script>
+    <script src="/static/js/libraries/lodash.templates.min.js"></script>
    <script src="/static/js/polyfills/promise.min.js"></script>
    <script src="/static/js/polyfills/fetch.js"></script>
    <script src="/static/js/id.js"></script>