IEEE.org     |     IEEE Xplore Digital Library     |     IEEE Standards     |     IEEE Spectrum     |     More Sites

Commit 1dc2cbd5 authored by Amy Rose's avatar Amy Rose
Browse files

implement basic search for projects grid

parent 63d2fd93
Pipeline #801 passed with stage
in 3 minutes and 24 seconds
...@@ -2,11 +2,23 @@ ...@@ -2,11 +2,23 @@
TODO: documentation TODO: documentation
{% endcomment %} {% endcomment %}
<div class="projects-grid"> <noscript>
<!--<div class="projects-search"></div>--> <p class="error">
<div class="projects-container"> Sorry, projects searching requires JavaScript to be enabled in order to
function. Please enable JavaScript to search projects.
</p>
</noscript>
<div id="projects-grid">
<div id="projects-search" class="hidden">
<input
id="projects-search-bar"
type="text"
placeholder="Search Projects"
/>
</div>
<div id="projects-container">
{% for project in site.projects %} {% for project in site.projects %}
<div class="project"> <div id="{{ project.mystic-pid }}" class="project">
<h2>{{ project.name }}</h2> <h2>{{ project.name }}</h2>
<p>{{ project.tldr }}</p> <p>{{ project.tldr }}</p>
<p>{{ project.owner }}</p> <p>{{ project.owner }}</p>
...@@ -15,3 +27,15 @@ TODO: documentation ...@@ -15,3 +27,15 @@ TODO: documentation
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<script>
const PROJECTS_DATA = {
{% for project in site.projects %}
"{{ project.mystic-pid }}": {
"name": "{{ project.name }}",
"tldr": "{{ project.tldr }}",
"owner": "{{ project.owner }}",
},
{% endfor %}
}
init_search();
</script>
...@@ -106,6 +106,7 @@ main { ...@@ -106,6 +106,7 @@ main {
} }
} }
/* JS-related classes */
.error { .error {
font-weight: bold; font-weight: bold;
color: desaturate($color: #f00, $amount: 30%); color: desaturate($color: #f00, $amount: 30%);
...@@ -116,3 +117,6 @@ main { ...@@ -116,3 +117,6 @@ main {
content: " >"; content: " >";
} }
} }
.hidden {
display: none;
}
/* Styles for the projects grid (projects-grid.html) */ /* Styles for the projects grid (projects-grid.html) */
.projects-container { #projects-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
......
...@@ -2,11 +2,6 @@ ...@@ -2,11 +2,6 @@
/* TODO */ /* TODO */
.hidden {
display: none;
}
#project-metrics { #project-metrics {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
......
/* Script to get project information from Mystic for the project.html layout */
/* TODO: replace with live Mystic URL */ /* TODO: replace with live Mystic URL */
const MYSTIC_URL = new URL("http://localhost:5000/"); const MYSTIC_URL = new URL("http://localhost:5000/");
const API_PREFIX = "/"; const API_PREFIX = "/";
...@@ -36,27 +38,25 @@ function fetch_data() { ...@@ -36,27 +38,25 @@ function fetch_data() {
function unhide_div(div_id) { function unhide_div(div_id) {
const div = document.getElementById(div_id); const div = document.getElementById(div_id);
div.classList.remove("hidden"); // remove hidden div.classList.remove("hidden");
} }
function populate(data) { function populate(data) {
console.log(data); /* Populate about section */
const project_about_div = document.getElementById("project-about"); const project_about_div = document.getElementById("project-about");
project_about_div.innerText = data["desc"]; project_about_div.innerText = data["desc"];
/* Populate sources list */
const sources_ul = document.getElementById("project-sources"); const sources_ul = document.getElementById("project-sources");
data["sources"].forEach(source_data => { data["sources"].forEach(source_data => {
const source_li = create_source(source_data); const source_li = create_source(source_data);
sources_ul.appendChild(source_li); sources_ul.appendChild(source_li);
}); });
/* Populate project metrics */
const project_metrics_div = document.getElementById("project-metrics"); const project_metrics_div = document.getElementById("project-metrics");
data["embeds"].forEach(embed_data => { data["embeds"].forEach(embed_data => {
const embed = create_embed(embed_data); const embed = create_embed(embed_data);
project_metrics_div.appendChild(embed); project_metrics_div.appendChild(embed);
}); });
/* Content ready to show */ /* Content ready to show */
unhide_div("project-content"); unhide_div("project-content");
} }
......
/* Script to do searching and filtering for the projects-grid.html partial */
const SEARCHABLE_FIELDS = ["name", "tldr", "owner"]; // config
const PROJECTS_LIST = [];
let prev_search = "";
/* PROJECTS_DATA set by projects-grid.html partial */
function init_search() {
/* Get all of the divs and put them in the projects list */
Object.entries(PROJECTS_DATA)
.forEach(([project_id, project]) => {
const project_div = document.getElementById(project_id);
project.div = project_div;
project.search_valid = true;
project.search_order = 0;
project.filter_valid = true;
project.hidden = false; // performance: avoid DOM checks
PROJECTS_LIST.push(project);
});
/* Enable searching */
const search_bar = document.getElementById("projects-search-bar");
search_bar.addEventListener("input", handle_search);
unhide_div("projects-search");
}
function handle_search(event) {
/* Get the search text */
const search_text = event.target.value;
/* Don't waste effort if the search is the same */
if (search_text === prev_search) {
return;
}
prev_search = search_text;
/* Apply search */
const searched_projects = PROJECTS_LIST.map(project => {
project.search_valid = Object.entries(project)
.some(([field, value]) => {
if (SEARCHABLE_FIELDS.includes(field)) {
return value
.toLowerCase()
.indexOf(search_text.toLowerCase()) !== -1;
}
return false
});
});
/* Apply sorting */
// TODO
/* Update projects grid */
update_content();
}
function update_content() {
PROJECTS_LIST.forEach(project => {
if (project.search_valid && project.filter_valid) {
if (project.hidden) {
project.div.classList.remove("hidden");
project.hidden = false;
}
} else {
if (!project.hidden) {
project.div.classList.add("hidden");
project.hidden = true;
}
}
});
}
// function projects_compare(project_a, project_b) {
//
// }
function unhide_div(div_id) {
const div = document.getElementById(div_id);
div.classList.remove("hidden");
}
--- ---
layout: base layout: base
banner: /assets/images/banners/our-work.webp banner: /assets/images/banners/our-work.webp
load_scripts:
- /assets/js/projects_search.js
breadcrumbs: breadcrumbs:
- name: Our Open Work - name: Our Open Work
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment