d943c20 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

Merge pull request #139 from francescanarea/search-bar-release

d943c20francescanarea7 years ago

sass/_main.scss+35−107

compare with master

unifiedsplit

@@ -91,6 +91,7 @@ iframe {

91 .content-nav {

92 &__search-bar {

93 width: 100%;

94+ padding-left: 0rem;

94 }

95 }

95 &__index {

96 &__index {

96 height: calc(100% - 48px);

97 height: calc(100% - 48px);

@@ -238,6 +239,9 @@ iframe {

238 transform: translate(0, 7px);

239 transform: translate(0, 7px);

239 }

240 }

241 }

242+ &__search-icon {

243+ -webkit-transform: rotate(-45deg);

244+ }

241}

245}

242

246

243.has-active-main-nav {

247.has-active-main-nav {

@@ -287,101 +291,42 @@ iframe {

287 max-width: 320px;

291 max-width: 320px;

288}

292}

289

293

290−.search-overlay {

294+.padding-none {

291− position: fixed;

295+ padding: 0 !important;

292− height: 100%;

296+}

293− width: 100%;

297+

298+.border-none {

299+ border: none !important;

300+}

301+

302+.b-transparent {

294 background: rgba(0,0,0,0.4);

303 background: rgba(0,0,0,0.4);

304+}

305+

306+.top0 {

295 top: 0;

307 top: 0;

296− left: 0;

308+}

297− z-index: 10;

309+

298− display: none;

310+.float-right {

311+ float: right;

312+}

313+

314+.search-overlay {

299 .search-bar {

315 .search-bar {

300− padding: 0;

301− border: none;

302 &__input {

316 &__input {

303 padding-left: 40px;

317 padding-left: 40px;

304− border-left: none;

305− border-top: none;

306− border-right: none;

307− }

308− &:before {

309− z-index: 1;

310− }

311− &:hover, &:active, &:focus {

312− border: none;

313− }

314− input[type="search"] {

315− &:hover, &:active, &:focus {

316− border-left: none;

317− border-top: none;

318− border-right: none;

319− }

320− }

321− &__input {

322− line-height: (6rem / 4);

323 }

318 }

324 }

319 }

325}

320}

326

321

327.search-results {

322.search-results {

328 max-height: 400px;

323 max-height: 400px;

329− //&__item, &__item a,

330− &__header {

331− color: #B1B2B3;

332− }

333− &__item {

334− a {

335− text-decoration: none;

336− display: block;

337− padding: (3rem /4) (4rem / 4);

338− &:hover {

324+ &__item a:hover {

339− background: #F9F9F9;

325+ background: #F9F9F9;

340− &:before, &:after {

326+ span {

341− content: '';

327+ display:inline-block;

342− position: absolute;

343− right: 40px;

344− }

345− &:before {

346− content: '';

347− height: 10px;

348− width: 10px;

349− border-top: 2px solid #000;

350− border-right: 2px solid #000;

351− transform: rotate(45deg);

352− top: 17px;

353− }

354− &:after {

355− content: '';

356− width: 17px;

357− height: 2px;

358− background: #000;

359− top: 22px;

360− right: 39px;

361− }

362− }

363− }

364− position: relative;

365− transition: all 0.1s linear;

366− &:last-child {

367− margin-bottom: (2rem / 4);

368− }

369− b {

370− color: #000;

371− }

372− &__title {

373− font-size: (6rem / 4);

374− text-transform: capitalize;

375− &__slug-end {

376− color: #000;

377− font-weight: 700;

378− padding-right: (8rem / 4);

379− }

380 }

328 }

381 }

329 }

382− &__header {

383− padding: 0 (7rem / 4);

384− }

385}

330}

386

331

387.has-active-search-window {

332.has-active-search-window {

@@ -394,6 +339,14 @@ iframe {

394 * styling

339 * styling

395 */

340 */

396

341

342+ // remove default x icon

343+ input[type="search"]::-webkit-search-decoration,

344+ input[type="search"]::-webkit-search-cancel-button,

345+ input[type="search"]::-webkit-search-results-button,

346+ input[type="search"]::-webkit-search-results-decoration {

347+ display: none;

348+ }

349+

397textarea, input[type="text"], input[type="email"], input[type="number"], input[type="search"] {

350textarea, input[type="text"], input[type="email"], input[type="number"], input[type="search"] {

398 border: 1px solid #B1B2B3;

351 border: 1px solid #B1B2B3;

399 font-size: (4rem / 4);

352 font-size: (4rem / 4);

@@ -432,7 +385,6 @@ button, .btn {

432 border: 1px solid #B1B2B3;

385 border: 1px solid #B1B2B3;

433 background: #fff;

386 background: #fff;

434 font-size: (4rem / 4);

387 font-size: (4rem / 4);

435− line-height: (6rem / 4);

436 transition: all 0.1s linear;

388 transition: all 0.1s linear;

437 padding: 12px 12px 12px 40px;

389 padding: 12px 12px 12px 40px;

438 position: relative;

390 position: relative;

@@ -440,30 +392,6 @@ button, .btn {

440 text-align: left;

392 text-align: left;

441 box-shadow: none !important;

393 box-shadow: none !important;

442 color: #B1B2B3;

394 color: #B1B2B3;

443− &:after {

444− content: '';

445− position: absolute;

446− left: 10px;

447− top: 20px;

448− width: 10px;

449− height: 10px;

450− border-radius: 50%;

451− border: 2px solid #000;

452− margin-top: -4px;

453− }

454− &:before {

455− content: '';

456− position: absolute;

457− left: 23px;

458− top: 25px;

459− transform: rotate(-45deg);

460− background: #000;

461− width: 2px;

462− height: 9px;

463− }

464− &:hover {

465− border: 1px solid #000000;

466− }

467}

395}

468

396

469.has-valid-input {

397.has-valid-input {

static/scripts.js+43−62

@@ -1,39 +1,4 @@

1−//

2− // styling of input fields

3−//

4−

5−var inputElements = document.querySelectorAll('input.tlon-input');

6−for (var i = 0; i < inputElements.length; i++) {

7− //listen for changes in input

8− inputElements[i].addEventListener('input', function() {

9− // if input has a value do this

10− if (this.value) {

11− var inputContainer = this.parentNode;

12− var validInputs = inputContainer.querySelectorAll('input.tlon-input:valid');

13− var inputs = inputContainer.querySelectorAll('input.tlon-input');

14− if (validInputs.length !== 0) {

15− // has valid input

16− for (var i = 0; i < validInputs.length; i++) {

17− if (this.classList.contains('is-valid') == false ) {

18− validInputs[i].parentNode.classList.add('has-valid-input');

19− }

20− }

21− } else {

22− // doesn't have valid input

23− for (var i = 0; i < inputs.length; i++) {

24− inputs[i].parentNode.classList.remove('has-valid-input');

25− }

26− }

27− } else {

28− this.parentNode.classList.remove('has-valid-input');

29− }

30− });

31−}

32−

33−//

34− // toggling of navigation menus

1+// toggling of navigation menus

35−//

36−

37var toggleMainNav = document.getElementById('js-main-nav-toggle');

2var toggleMainNav = document.getElementById('js-main-nav-toggle');

38if (toggleMainNav !== null) {

3if (toggleMainNav !== null) {

39 toggleMainNav.onclick = function() {

4 toggleMainNav.onclick = function() {

@@ -84,10 +49,8 @@ function initHotKeys() {

84 });

49 });

85};

50};

87−//

88− // search functionality

89−//

53+// search functionality

91function debounce(func, wait) {

54function debounce(func, wait) {

92 var timeout;

55 var timeout;

@@ -122,6 +85,7 @@ function makeTeaser(body, terms) {

122 var stemmedTerms = terms.map(function (w) {

85 var stemmedTerms = terms.map(function (w) {

123 return elasticlunr.stemmer(w.toLowerCase());

86 return elasticlunr.stemmer(w.toLowerCase());

124 });

87 });

88+

125 var termFound = false;

89 var termFound = false;

126 var index = 0;

90 var index = 0;

127 var weighted = []; // contains elements of ["word", weight, index_in_document]

91 var weighted = []; // contains elements of ["word", weight, index_in_document]

@@ -206,48 +170,49 @@ function makeTeaser(body, terms) {

206 startIndex = word[2];

170 startIndex = word[2];

207 }

171 }

208

172

209− // add <em/> around search terms

210− if (word[1] === TERM_WEIGHT) {

211− teaser.push("<b>");

212− }

213 startIndex = word[2] + word[0].length;

173 startIndex = word[2] + word[0].length;

214 teaser.push(body.substring(word[2], startIndex));

174 teaser.push(body.substring(word[2], startIndex));

215

175

216− if (word[1] === TERM_WEIGHT) {

217− teaser.push("</b>");

218− }

219 }

176 }

220 teaser.push("…");

177 teaser.push("…");

221 return teaser.join("");

178 return teaser.join("");

222}

179}

223

180

224−function formatSearchResultTitle(path) {

181+function formatSearchResultTitle(item) {

225− var pathArray = path.split( 'docs/' );

182+ var pathArray = item.ref.split( '/' );

183+

184+ // first directory is in 4th element of split path array

226− var slug = pathArray[1];

185+ var firstPartTitle = pathArray[3];

227− var slugArray = slug.split( '/' );

186+

228− var lastPartTitle = slugArray.splice(slugArray.length - 2, slugArray.length).join('');

187+ // last directory is in 2nd to last element of array

229− var firstPartTitle = slugArray.join(' / ');

188+ var lastPartTitle = item.doc.title;

230

189

231− var fullTitle = firstPartTitle + ' / ' + '<span class="search-results__item__title__slug-end">' + lastPartTitle + '</span>';

190+ var fullTitle = firstPartTitle + '<span class="gray90 inline-block pl2">' + ' / ' + lastPartTitle + '</span>';

232

191

233 return fullTitle;

192 return fullTitle;

234}

193}

235

194

236function formatSearchResultItem(item, terms) {

195function formatSearchResultItem(item, terms) {

196+ console.log(item);

237 var li = document.createElement("li");

197 var li = document.createElement("li");

238 var createA = document.createElement("a");

198 var createA = document.createElement("a");

239 li.appendChild(createA);

199 li.appendChild(createA);

240− var teaserTitle = formatSearchResultTitle(item.ref);

200+ var teaserTitle = formatSearchResultTitle(item);

241 li.classList.add("search-results__item");

201 li.classList.add("search-results__item");

202+ li.classList.add("ph3");

242 var hrefA = item.ref;

203 var hrefA = item.ref;

243 createA.setAttribute('href', hrefA);

204 createA.setAttribute('href', hrefA);

205+ createA.setAttribute('class','no-underline block pl6 pv3');

244− createA.innerHTML = `<span class="search-results__item__title">${teaserTitle}</span>`;

206+ createA.innerHTML = `<span class="fs45 capitalize">${teaserTitle}</span>`;

207+ createA.innerHTML += `<span class='pr7 fs5 none float-right'>→</span>`;

245− createA.innerHTML += `<div class="search-results__teaser">${makeTeaser(item.doc.body, terms)}</div>`;

208+ createA.innerHTML += `<div class="fs35 truncate mr10">${makeTeaser(item.doc.body, terms)}</div>`;

246 return li;

209 return li;

247}

210}

248

211

249function initSearch() {

212function initSearch() {

250 var searchInput = document.getElementById("search");

213 var searchInput = document.getElementById("search");

214+ var searchForm = document.getElementById("search-form");

215+ var inputReset = searchForm.nextElementSibling;

251

216

252 if (!searchInput) {

217 if (!searchInput) {

253 return;

218 return;

@@ -257,9 +222,9 @@ function initSearch() {

257 var searchResultsHeader = document.querySelector(".search-results__header");

222 var searchResultsHeader = document.querySelector(".search-results__header");

258 var searchResultsItems = document.querySelector(".search-results__items");

223 var searchResultsItems = document.querySelector(".search-results__items");

259 var MAX_ITEMS = 200;

224 var MAX_ITEMS = 200;

260−

261 var options = {

225 var options = {

262 bool: "AND",

226 bool: "AND",

227+ expand: true, // turn on partial word search

263 fields: {

228 fields: {

264 title: {boost: 2},

229 title: {boost: 2},

265 body: {boost: 1},

230 body: {boost: 1},

@@ -267,19 +232,22 @@ function initSearch() {

267 };

232 };

268 var currentTerm = "";

233 var currentTerm = "";

269 var index = elasticlunr.Index.load(window.searchIndex);

234 var index = elasticlunr.Index.load(window.searchIndex);

270−

271 // toggle search window

235 // toggle search window

272 var toggleSearchWindow = document.getElementById('js-search-window-toggle');

236 var toggleSearchWindow = document.getElementById('js-search-window-toggle');

273 var bodyEl = document.body;

237 var bodyEl = document.body;

274 var searchOverlay = document.getElementById('search-overlay');

238 var searchOverlay = document.getElementById('search-overlay');

275 var searchWindow = document.getElementById('search-window');

239 var searchWindow = document.getElementById('search-window');

276 var searchActive = bodyEl.classList.contains('has-active-search-window');

240 var searchActive = bodyEl.classList.contains('has-active-search-window');

241+

277 if (toggleSearchWindow !== null) {

242 if (toggleSearchWindow !== null) {

278 toggleSearchWindow.onclick = function() {

243 toggleSearchWindow.onclick = function() {

244+ inputReset.style.display="none";

245+

279 //activate search

246 //activate search

280 bodyEl.classList.toggle('has-active-search-window');

247 bodyEl.classList.toggle('has-active-search-window');

281 //put input in focus when activating search

248 //put input in focus when activating search

282 searchInput.focus();

249 searchInput.focus();

250+

283 searchInput.value = "";

251 searchInput.value = "";

284 searchResultsHeader.value = "";

252 searchResultsHeader.value = "";

285 searchResults.style.display = searchInput.value.trim() === "" ? "none" : "block";

253 searchResults.style.display = searchInput.value.trim() === "" ? "none" : "block";

@@ -291,12 +259,12 @@ function initSearch() {

291 })

259 })

292 }

260 }

293

261

294− // when typing

262+

295 searchInput.addEventListener("keyup", debounce(function() {

263 searchInput.addEventListener("keyup", debounce(function() {

296− searchResultsHeader.value = "";

264+ inputReset.style.display="block";

297

265

266+ searchResultsHeader.value = "";

298 var term = searchInput.value.trim();

267 var term = searchInput.value.trim();

299−

300 /*

268 /*

301 //removed to fix: a state where there’s a valid search term, but no results

269 //removed to fix: a state where there’s a valid search term, but no results

302

270

@@ -308,19 +276,21 @@ function initSearch() {

308 searchResults.style.overflowY = term === "" ? "hidden" : "scroll";

276 searchResults.style.overflowY = term === "" ? "hidden" : "scroll";

309 searchResultsItems.innerHTML = "";

277 searchResultsItems.innerHTML = "";

310 if (term === "") {

278 if (term === "") {

279+ inputReset.style.display="none";

311 return;

280 return;

312 }

281 }

313

282

314 var results = index.search(term, options).filter(function (r) {

283 var results = index.search(term, options).filter(function (r) {

315 return r.doc.body !== "";

284 return r.doc.body !== "";

316 });

285 });

286+

317 if (results.length === 0) {

287 if (results.length === 0) {

318 searchResultsHeader.innerText = `No search results for '${term}'.`;

288 searchResultsHeader.innerText = `No search results for '${term}'.`;

319 return;

289 return;

320 }

290 }

321

291

322 currentTerm = term;

292 currentTerm = term;

323− searchResultsHeader.innerText = `${results.length} search results for '${term}':`;

293+ searchResultsHeader.innerText = `${results.length} search results for '${term}':`;

324 for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {

294 for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {

325 if (!results[i].doc.body) {

295 if (!results[i].doc.body) {

326 continue;

296 continue;

@@ -328,6 +298,17 @@ function initSearch() {

328 searchResultsItems.appendChild(formatSearchResultItem(results[i], term.split(" ")));

298 searchResultsItems.appendChild(formatSearchResultItem(results[i], term.split(" ")));

329 }

299 }

330 }, 150));

300 }, 150));

301+

302+ // reset input button

303+ inputReset.onclick=function(){

304+ document.getElementById('search-form').reset();

305+ }

306+ searchForm.addEventListener("reset", function(event){

307+ var e = document.createEvent('KeyboardEvent');

308+ e.initEvent("keyup", false, true);

309+ searchInput.dispatchEvent(e);

310+ });

311+

331}

312}

332

313

333if (document.readyState === "complete" ||

314if (document.readyState === "complete" ||

templates/partials/navigation-docs.html+4−2

@@ -1,13 +1,15 @@

1{% block content %}

2<div id="js-content-nav-toggle" class="content-nav-icon"></div>

3<nav class="content-nav">

4− <button id="js-search-window-toggle" type="button" class="search-bar content-nav__search-bar mb2">Search</button>

4+ <button id="js-search-window-toggle" type="button" class="search-bar content-nav__search-bar inline align-center" style="outline:none">

5+ <div class="inline-block"><span class="header__search-icon mh3 inline-block fs6">⚲</span></div><span class="gray50">Search</span>

6+ </button>

5 <ul class="list content-nav__index">

7 <ul class="list content-nav__index">

6 {% block menu %}

8 {% block menu %}

7 {% set index = get_section(path="docs/_index.md") %}

9 {% set index = get_section(path="docs/_index.md") %}

8 {% for s in index.subsections %}

10 {% for s in index.subsections %}

9 {% set subsection = get_section(path=s) %}

11 {% set subsection = get_section(path=s) %}

10− <li class="list__item content-nav__index__item">

12+ <li class="list__item content-nav__index__item mt5">

11 <a class="text-600" href="{{ subsection.permalink }}">

13 <a class="text-600" href="{{ subsection.permalink }}">

12 {{ subsection.title }}

14 {{ subsection.title }}

13 </a>

15 </a>

templates/partials/search-overlay.html+7−5

@@ -1,12 +1,14 @@

1{% block content %}

2−<div id="search-overlay" class="search-overlay">

2+<div id="search-overlay" class="search-overlay fix vh100 w-full b-transparent z10 none top0">

3 <div class="wrapper">

4 <div id="search-window" class="pop-up">

5− <div class="search-bar">

5+ <div class="search-bar padding-none border-none z1 inline align-center w-full">

6+ <span class="header__search-icon ml3 abs z1 fs6 gray50">⚲</span>

6− <input id="search" autocomplete="off" type="search" class="search-bar__input" placeholder="Go to...">

7+ <form id="search-form" class="w-full"><input id="search" autocomplete="off" type="search" class="search-bar__input border-none" placeholder="Go to..."></form>

8+ <a id="search-reset" class="fs6 pr3 gray50 no-underline pointer:hover"></a>

7 </div>

9 </div>

8− <div class="search-results">

10+ <div id="search-results" class="search-results bt1 b-gray40">

9− <div class="search-results__header mb2"></div>

11+ <div class="search-results__header ml9 mv2 gray60 fs3"></div>

10 <ul class="list search-results__items"></ul>

12 <ul class="list search-results__items"></ul>

11 </div>

13 </div>

12 </div>

14 </div>