Include description in search, add sort option 'relevant' to sort by search result relevancy

web/_css/style.css

@@ -192,15 +192,6 @@ h1{
 	text-shadow: 1px 1px 0px #000000;
 }
 
-select{	
-	background: none;
-	background-image: linear-gradient(to bottom, #888888, #666666);
-	border: 1px #222222 outset;
-	color: #FFFFFF;
-	cursor: pointer;
-	padding: 3px;
-}
-
 select{
 	-moz-appearance: none;
 	-webkit-appearance: none;
@@ -210,9 +201,17 @@ select{
 	background-repeat: no-repeat, repeat;
 	background-position: calc(100% - 10px) center, 0 0;
 	background-size: 10px, cover;
+	border: 1px #222222 outset;
+	color: #FFFFFF;
+	cursor: pointer;
+	padding: 3px;
 	padding-left: 7px;
 }
 
+select option[disabled] {
+    display: none;
+}
+
 select:hover{
 	background-image: url(../_img/arrowDown.svg), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(180, 180, 180, 0.5));
 }

web/_js/atlas.js

@@ -422,7 +422,7 @@ var atlas = [
     	"name": "Lego",
     	"description": "Lego is a line of plastic construction toys made in Denmark.",
     	"website": "https://www.lego.com/",
-    	"subreddit": "/r/lego",
+    	"subreddit": "/r/lego, /r/denmark",
     	"center": [
     		725.5,
     		287.5
@@ -22642,7 +22642,7 @@ var atlas = [
     			815.5
     		]
     	]
-    },    {
+    },  /*  {
     	"id": 351,
     	"name": "Erase The Place",
     	"description": "The cult of nihilists who wished to return the place to a primordial state of nothingness. Because destruction and conservatism are apparently the same thing.",
@@ -22690,7 +22690,7 @@ var atlas = [
     			403.5
     		]
     	]
-    },    {
+    }, */   {
     	"id": 352,
     	"name": "Jollibee",
     	"description": "Jollibee is a popular fast food chain in the Philippines that serves Burger, Spaghetti, and Fried Chicken. Its mascot is a smiling red bee wearing a red suit and a chef's hat.",
@@ -77458,8 +77458,8 @@ var atlas = [
     },  {
     	"id": 1297,
 		"submitted_by": "Empty_Engie",
-    	"name": "The Purity Triangle",
-    	"description": "Made by r/EraseThePlace, this triangle represents what was once the grand white circle, and formed when EraseThePlace started making alliances and wasn't focused on cleaning the entire canvas.",
+    	"name": "Erase The Place",
+    	"description": "The Purity Triangle represents what was once the grand white circle, and formed when EraseThePlace started making alliances and wasn't focused on cleaning the entire canvas.",
     	"website": "",
     	"subreddit": "r/EraseThePlace",
     	"center": [

web/_js/view.js

@@ -77,7 +77,7 @@ function updateLines(){
 }
 
 function initView(){
-
+	
 	var wrapper = document.getElementById("wrapper");
 	
 	var objectsContainer = document.getElementById("objectsList");
@@ -100,9 +100,12 @@ function initView(){
 	moreEntriesButton.innerHTML = "Show "+entriesLimit+" more";
 	moreEntriesButton.id = "moreEntriesButton";
 	moreEntriesButton.onclick = function(){
-		buildObjectsList();
+		buildObjectsList(null, null);
 	};
 
+	var defaultSort = "alphaDesc";
+	document.getElementById("sort").value = defaultSort;
+
 	var viewportWidth = document.documentElement.clientWidth;
 
 	var lastPos = [0, 0];
@@ -113,7 +116,7 @@ function initView(){
 	renderBackground();
 	render();
 
-	buildObjectsList();
+	buildObjectsList(null, null);
 
 	// parse linked atlas entry id from link hash
 	/*if (window.location.hash.substring(3)){
@@ -155,7 +158,13 @@ function initView(){
 		entriesList.innerHTML = "";
 		entriesList.appendChild(moreEntriesButton);
 
-		buildObjectsList(this.value.toLowerCase());
+		if(this.value === ""){
+			document.getElementById("relevantOption").disabled = true;
+			buildObjectsList(null, null);
+		} else {
+			document.getElementById("relevantOption").disabled = false;
+			buildObjectsList(this.value.toLowerCase(), "relevant");
+		}
 
 	});
 
@@ -164,7 +173,11 @@ function initView(){
 		entriesList.innerHTML = "";
 		entriesList.appendChild(moreEntriesButton);
 
-		buildObjectsList(filterInput.value.toLowerCase());
+		if(this.value != "relevant"){
+			defaultSort = this.value;
+		}
+
+		buildObjectsList(filterInput.value.toLowerCase(), this.value);
 
 	});
 	
@@ -346,7 +359,7 @@ function initView(){
 		}
 	}
 
-	function buildObjectsList(filter){
+	function buildObjectsList(filter, sort){
 
 		if(entriesList.contains(moreEntriesButton)){
 			entriesList.removeChild(moreEntriesButton);
@@ -356,7 +369,10 @@ function initView(){
 
 		if(filter){
 			sortedAtlas = atlas.filter(function(value){
-				return (value.name.toLowerCase().indexOf(filter) !== -1);
+				return (
+					   value.name.toLowerCase().indexOf(filter) !== -1
+					|| value.description.toLowerCase().indexOf(filter) !== -1
+				);
 			});
 			document.getElementById("atlasSize").innerHTML = "Found "+sortedAtlas.length+" entries.";
 		} else {
@@ -364,7 +380,13 @@ function initView(){
 			document.getElementById("atlasSize").innerHTML = "The Atlas contains "+sortedAtlas.length+" entries.";
 		}
 
-		var sort = document.getElementById("sort").value;
+		if(sort === null){
+			sort = defaultSort;
+		}
+
+		document.getElementById("sort").value = sort;
+
+		console.log(sort);
 
 		var sortFunction;
 
@@ -405,6 +427,33 @@ function initView(){
 					return 0;
 				}
 			break;
+			case "relevant":
+				sortFunction = function(a, b){
+					if(a.name.toLowerCase().indexOf(filter) !== -1 && b.name.toLowerCase().indexOf(filter) !== -1){
+						if (a.name.toLowerCase().indexOf(filter) < b.name.toLowerCase().indexOf(filter)) {
+							return -1;
+						}
+						else if (a.name.toLowerCase().indexOf(filter) > b.name.toLowerCase().indexOf(filter)) {
+							return 1;
+						} else {
+							return 0;
+						}
+					} else if(a.name.toLowerCase().indexOf(filter) !== -1){
+						return -1;
+					} else if(b.name.toLowerCase().indexOf(filter) !== -1){
+						return 1;
+					} else {
+						if (a.description.toLowerCase().indexOf(filter) < b.description.toLowerCase().indexOf(filter)) {
+							return -1;
+						}
+						else if (a.description.toLowerCase().indexOf(filter) > b.description.toLowerCase().indexOf(filter)) {
+							return 1;
+						} else {
+							return 0;
+						}
+					}
+				}
+			break;
 		}
 
 		sortedAtlas.sort(sortFunction);

web/index.html

@@ -83,6 +83,7 @@ <h1>The /r/place Atlas</h1>
 					<span id="atlasSize"></span>
 					<div id="sortContainer"><label>Sort:</label>
 						<select id="sort">
+							<option value="relevant" id="relevantOption" disabled>Relevant</option>
 							<option value="alphaAsc" selected>↓ Alphabetical</option>
 							<option value="alphaDesc">↑ Alphabetical</option>
 							<option value="newest">Newest</option>
@@ -168,19 +169,19 @@ <h2>Tux</h2>
 		
 
 
-<!--
 		<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
 		<script type="text/javascript" src="./_js/atlas.js?version=1.0.49"></script>
 		<script type="text/javascript" src="./_js/view.js?version=1.0.4"></script>
 		<script type="text/javascript" src="./_js/overlap.js?version=1.0.4"></script>
 		<script type="text/javascript" src="./_js/draw.js?version=1.0.3"></script>
 		<script type="text/javascript" src="./_js/main.js?version=1.0.3"></script>
--->
 
 
 		
 
+<!--
 		<script type="text/javascript" src="./_js/minified.js?version=1.0.62"></script>
+-->
 
 		
 	</body>