git.iko.soy/urbit.org
on master help sign in
added the click outside search window closes window functionality with js
8ea5ab3friederjanmoerman
static/scripts.js+18−17
compare with master
unifiedsplit
@@ -58,21 +58,25 @@ if (toggleContentNav !== null) {
58 });
58 });
59}*/
59}*/
60
60
61−function initToggleMenu() {
61+function initToggleSearchWindow() {
62− var toggleContentNav = document.getElementById('js-search-window-toggle');
62+ var toggleSearchWindow = document.getElementById('js-search-window-toggle');
63− if (toggleContentNav !== null) {
63+ var bodyEl = document.body;
64+ var searchOverlay = document.getElementById('search-overlay');
65+ var searchWindow = document.getElementById('search-window');
66+ var searchActive = bodyEl.classList.contains('has-active-search-window');
67+ if (toggleSearchWindow !== null) {
64− toggleContentNav.onclick = function() {
68+ toggleSearchWindow.onclick = function() {
65− document.body.classList.toggle('has-active-search-window');
69+ bodyEl.classList.toggle('has-active-search-window');
66 }
70 }
71+ searchOverlay.addEventListener('click', function(e){
72+ if (!searchWindow.contains(e.target)){
73+ bodyEl.classList.toggle('has-active-search-window');
74+ }
75+ })
67 }
76 }
68}
77}
69
78
70−var toggleContentNav = document.getElementById('js-search-window-toggle');
79+
71−if (toggleContentNav !== null) {
72− toggleContentNav.onclick = function() {
73− document.body.classList.toggle('has-active-search-window');
74− }
75−}
76
80
77//
81//
78 // search functionality
82 // search functionality
@@ -218,7 +222,7 @@ function initSearch() {
218 var searchResults = document.querySelector(".search-results");
222 var searchResults = document.querySelector(".search-results");
219 var searchResultsHeader = document.querySelector(".search-results__header");
223 var searchResultsHeader = document.querySelector(".search-results__header");
220 var searchResultsItems = document.querySelector(".search-results__items");
224 var searchResultsItems = document.querySelector(".search-results__items");
221− var MAX_ITEMS = 10;
225+ var MAX_ITEMS = 200;
222
226
223 var options = {
227 var options = {
224 bool: "AND",
228 bool: "AND",
@@ -255,9 +259,6 @@ function initSearch() {
255 if (!results[i].doc.body) {
259 if (!results[i].doc.body) {
256 continue;
260 continue;
257 }
261 }
258− // var item = document.createElement("li");
259− // item.innerHTML = formatSearchResultItem(results[i], term.split(" "));
260− console.log(results[i]);
261 searchResultsItems.appendChild(formatSearchResultItem(results[i], term.split(" ")));
262 searchResultsItems.appendChild(formatSearchResultItem(results[i], term.split(" ")));
262 }
263 }
263 }, 150));
264 }, 150));
@@ -266,10 +267,10 @@ function initSearch() {
266if (document.readyState === "complete" ||
267if (document.readyState === "complete" ||
267 (document.readyState !== "loading" && !document.documentElement.doScroll)
268 (document.readyState !== "loading" && !document.documentElement.doScroll)
268) {
269) {
269− initToggleMenu();
270+ initToggleSearchWindow();
270} else {
271} else {
271 document.addEventListener("DOMContentLoaded", function () {
272 document.addEventListener("DOMContentLoaded", function () {
272− initToggleMenu();
273+ initToggleSearchWindow();
273 initSearch();
274 initSearch();
274 });
275 });
275}
276}
templates/partials/search-overlay.html+2−3
@@ -1,7 +1,7 @@
1{% block content %}
1{% block content %}
2−<div class="search-overlay">
2+<div id="search-overlay" class="search-overlay">
3 <div class="wrapper">
3 <div class="wrapper">
4− <div class="pop-up">
4+ <div id="search-window" class="pop-up">
5 <div class="search-bar">
5 <div class="search-bar">
6 <label for="search-bar__input">
6 <label for="search-bar__input">
7 <p class="mb0">Search</p>
7 <p class="mb0">Search</p>
@@ -10,7 +10,6 @@
10 <div class="search-results__header mb2"></div>
10 <div class="search-results__header mb2"></div>
11 </div>
11 </div>
12 <div class="search-results">
12 <div class="search-results">
13−
14 <ul class="list search-results__items"></ul>
13 <ul class="list search-results__items"></ul>
15 </div>
14 </div>
16 </div>
15 </div>