Added asset search field

Author: britzl

_includes/asset.html

@@ -9,7 +9,7 @@
 	{%- assign thumb_base = "" -%}
 	{%- assign thumb = "/images/asset-nothumb.jpg" -%}
 {%- endif -%}
-<div class='asset clickable left light-text compact {{ asset.tags | join: "%%" | replace: " ", "" | split: "%%" | join: " " | downcase }}'>
+<div class='asset clickable left light-text compact {{ asset.tags | join: "%%" | replace: " ", "" | split: "%%" | join: " " | downcase }}' data-name="{{ asset.name }}" data-description="{{ asset.description }}">
 	<a href="/assets/{{ include.id }}">
 		<div id="image" style="background: url('{{thumb_base}}{{ thumb }}') center/cover; padding: 0; margin: 0; height: 190px">
 		</div>

_includes/assetgrid.html

@@ -2,6 +2,25 @@
 
 <div class="row">
 	<h4>{{ include.title }}</h4>
+
+	<input id="search" class="assetsearch" type="text" placeholder="Type to filter..."/>
+	<script type="text/javascript">
+		const search = document.getElementById('search');
+		const inputHandler = function(e) {
+			const assets = document.getElementsByClassName("asset");
+			const searchFor = e.target.value.toLowerCase();
+			for (var i = 0; i < assets.length; i++) {
+				const asset = assets[i];
+				const name = asset.dataset.name.toString().toLowerCase();
+				const description = asset.dataset.description.toString().toLowerCase();
+				const visible = (searchFor == "" || name.indexOf(searchFor) != -1 || description.indexOf(searchFor) != -1);
+				asset.style.display = visible ? "block" : "none";
+			};
+		}
+		search.addEventListener('input', inputHandler);
+		search.addEventListener('propertychange', inputHandler); // for IE8
+	</script>
+
 	<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 2rem; padding: 0px;">
 		{%- for id in assetids -%}
 			{% include asset.html id=id %}

_includes/tagfilter.html

@@ -1,7 +1,7 @@
 <div class="row compact" style="margin-bottom: 30px">
 	{%- assign alltags = site.data.assetindex | map: "tags" -%}
 	{%- assign tags = alltags | uniq | sort -%}
-	<p>FILTER</p>
+	<p>TAGS</p>
 	<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 0 1rem; font-size: 0.9em;">
 		{%- if include.tag -%}
 			{%- assign class="" -%}
@@ -20,6 +20,7 @@
 			<a class="filter {{ class }}" href="/tags/{{ include.sort }}/{{ tag | replace: ' ' | downcase }}">{{ tag }} ({{ tagged_assets.size }})</a>
 		{%- endfor -%}
 	</div>
+
 	<br/>
 	{%- if include.tag -%}
 		<p>SORT BY: <a href="/tags/stars/{{ include.tag }}">Stars</a>, <a href="/tags/timestamp/{{ include.tag }}">Latest</a></p>

_layouts/assetportal.html

@@ -16,21 +16,27 @@ <h1>Asset portal</h1>
 				{% include secondary_button.html link="/submit_asset" text="Submit asset" %}
 			</div>
 		</div>
+
 		{%- assign sort_order = page.sort | default: "stars" -%}
 		{%- if page.tag -%}
 			{%- assign tag = site.data.tags[page.tag] -%}
 			{%- assign tagid = tag.id -%}
+			{%- include tagfilter.html tag=tagid sort=sort_order -%}
+		{%- else -%}
+			{%- include tagfilter.html sort=sort_order -%}
+		{%- endif -%}
+
+		{%- assign sort_order = page.sort | default: "stars" -%}
+		{%- if page.tag -%}
+			{%- assign tag = site.data.tags[page.tag] -%}
 			{%- assign assetname = tag.name -%}
 			{%- assign assetids = tag.assets | sort: sort_order | reverse | map: "id" -%}
-
-			{%- include tagfilter.html tag=tagid sort=sort_order -%}
 			{%- include assetgrid.html assetids=assetids showfilter=true title=assetname -%}
 		{%- else -%}
 			{%- assign assetids = site.data.assetindex | sort: sort_order | reverse | map: "id" -%}
-
-			{%- include tagfilter.html sort=sort_order -%}
 			{%- include assetgrid.html assetids=assetids showfilter=true title="All" -%}
 		{%- endif -%}
+
 		<div class="row" style="margin-top: 30px">
 			<div class="columns ten"><br/></div>
 			<div class="columns two">{% include secondary_button.html link="/submit_asset" text="Submit asset" %}</div>

css/defold.scss

@@ -542,6 +542,21 @@ input[type="submit"]:hover {
 	border-color: var(--lightest)                   !important;
 }
 
+/*******************************************************************************
+* Text input styling
+******************************************************************************/
+
+input[type=text].assetsearch {
+	color: var(--lighter)                           !important;
+	background-color: transparent                   !important;
+	border-top: none                                !important;
+	border-left: none                               !important;
+	border-right: none                              !important;
+	border-bottom: 1px solid var(--lighter);
+	line-height: 80%;
+	padding: 0px;
+}
+
 /*******************************************************************************
 * Limit width of images in examples, manuals and tutorials.
 * Also center them