-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
offline search for mirror drives (#1175)
* add fuse and proof of concept of course search * fix styling on search page and add search button * display search icon with proper link on pages that aren't the search page * make clicking the logo go to the index * organize and comment code * only pad the search results area on desktop * use basic string templating instead of custom web component * lower minimum match characters to 3 * add placeholders for empty search results * search button of type button and remove preventdefault
- Loading branch information
Showing
11 changed files
with
166 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| {{ $siteRootUrl := partial "site_root_url.html" "/" }} | ||
| {{ return $siteRootUrl }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,16 @@ | ||
| import "./css/www-offline.scss" | ||
| import Fuse from "fuse.js" | ||
| import Popper from "popper.js" | ||
|
|
||
| export interface OCWWindow extends Window { | ||
| $: JQueryStatic | ||
| jQuery: JQueryStatic | ||
| Popper: typeof Popper | ||
| Fuse: typeof Fuse | ||
| } | ||
| declare let window: OCWWindow | ||
|
|
||
| window.jQuery = $ | ||
| window.$ = $ | ||
| window.Popper = Popper | ||
| window.Fuse = Fuse |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| title: Search | ||
| type: search | ||
| renderSearchIcon: false | ||
| --- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| {{ define "extraheader" }} | ||
| {{ $renderSearchIcon := index .Params "renderSearchIcon" | default true}} | ||
| {{ if $renderSearchIcon}} | ||
| <a class="nav-link search-icon pr-6" href="/search.html"> | ||
| <i class="material-icons">search</i> | ||
| </a> | ||
| {{end}} | ||
| {{ end }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {{ return "/index.html" }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| {{ define "main" }} | ||
| {{ $pathToRoot := strings.TrimSuffix "/" (partial "path_to_root.html" .Permalink) }} | ||
| {{ $websites := where site.Pages ".Params.content_type" "==" "website" }} | ||
| {{ block "header" . }} | ||
| {{ partial "header" . }} | ||
| {{ end }} | ||
| <div class="search-wrapper"> | ||
| <div class="search-page row justify-content-center"> | ||
| <div class="search-results-area col-12 py-4"> | ||
| <div class="container-fluid"> | ||
| <main> | ||
| <div class="container-fluid p-0"> | ||
| <div class="row m-0"> | ||
| <div id="search-page" class="w-100"> | ||
| <div class="container"> | ||
| <div class="search-box py-sm-5 py-md-7 py-lg-5 row"> | ||
| <div class="col-lg-3"></div> | ||
| <div class="col-lg-6 search-box-inner d-flex flex-column align-items-center mb-2 mb-sm-5 mb-md-4"> | ||
| <h1>Explore OpenCourseWare</h1> | ||
| <div class="w-100 d-flex flex-column align-items-center search-input-wrapper mt-5"> | ||
| <div class="w-100"> | ||
| <form role="search" class="search-box d-flex flex-direction-row"> | ||
| <input | ||
| id="search-input" | ||
| class="w-100 pl-2" | ||
| type="text" | ||
| aria-label="Search" | ||
| placeholder="Search OpenCourseWare" | ||
| /> | ||
| <button id="search-button" type="button" class="py-2 px-3">Search</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-lg-3"></div> | ||
| </div> | ||
| </div> | ||
| <section id="search-results" class="m-auto px-lg-8"> | ||
| <h3 class="col-3 text-center m-auto">Start typing to search</h3> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script> | ||
| window.onload = function() { | ||
| if (window.Fuse) { | ||
| // an array of known websites generated at build time | ||
| const websites = [ | ||
| {{ $websites := where site.Pages ".Params.content_type" "==" "website" }} | ||
| {{ range $websites }} | ||
| {{ $urlPath := strings.TrimPrefix "/" .Params.url_path }} | ||
| {{ $url := printf "%s/%s/index.html" $pathToRoot $urlPath }} | ||
| {{ $delimiter := ", " }} | ||
| { | ||
| "title": "{{- .Title -}}", | ||
| "primary_course_number": "{{- .Params.primary_course_number -}}", | ||
| "url": "{{- $url -}}", | ||
| {{ if .Params.level }} | ||
| "level": "{{- delimit .Params.level $delimiter -}}" | ||
| {{ else }} | ||
| "level": "" | ||
| {{ end }} | ||
| }, | ||
| {{ end }} | ||
| ] | ||
| // initialize Fuse and bind event listeners | ||
| const Fuse = window.Fuse | ||
| const searchOptions = { | ||
| shouldSort: true, | ||
| threshold: 0.4, | ||
| location: 0, | ||
| distance: 100, | ||
| matchAllTokens: true, | ||
| includeScore: true, | ||
| maxPatternLength: 32, | ||
| minMatchCharLength: 3, | ||
| keys: ["title", "primary_course_number"] | ||
| } | ||
| const fuse = new Fuse(websites, searchOptions) | ||
| const searchInput = document.getElementById("search-input") | ||
| const searchButton = document.getElementById("search-button") | ||
| const performSearch = searchString => { | ||
| const searchResults = fuse.search(searchString) | ||
| if (searchResults.length > 0) { | ||
| const searchResultComponents = searchResults.map(searchResult => { | ||
| return ` | ||
| <article> | ||
| <div class="card learning-resource-card compact-view"> | ||
| <div class="card-contents"> | ||
| <div class="lr-info search-result"> | ||
| <div class="col-2 course-num"> | ||
| ${searchResult.item["primary_course_number"]} | ||
| </div> | ||
| <div class="course-title"> | ||
| <a class="course-link" href="${searchResult.item["url"]}">${searchResult.item["title"]}</a> | ||
| </div> | ||
| <div class="col-2 resource-level"> | ||
| ${searchResult.item["level"]} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| ` | ||
| }) | ||
| const searchResultsSection = document.getElementById("search-results") | ||
| searchResultsSection.innerHTML = searchResultComponents.join("") | ||
| } | ||
| else { | ||
| searchResultsSection.innerHTML = `<h3 class="col-3 text-center m-auto">No results found</h3>` | ||
| } | ||
| } | ||
| const onInput = e => { | ||
| if (e.target.value) { | ||
| const searchString = e.target.value | ||
| performSearch(searchString) | ||
| } | ||
| } | ||
| const onSearchButtonClick = e => { | ||
| performSearch(searchInput.value) | ||
| } | ||
|
|
||
| searchInput.addEventListener("input", onInput) | ||
| searchButton.addEventListener("click", onSearchButtonClick) | ||
| } | ||
| } | ||
| </script> | ||
| {{ end }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters