You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by zr...@apache.org on 2019/08/15 21:24:26 UTC
[camel-website] branch master updated: CAMEL-13622: filter box for
component reference
This is an automated email from the ASF dual-hosted git repository.
zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git
The following commit(s) were added to refs/heads/master by this push:
new 30fa680 CAMEL-13622: filter box for component reference
30fa680 is described below
commit 30fa68061505779942108310f125da6b4da34285
Author: Zoran Regvart <zr...@apache.org>
AuthorDate: Thu Aug 15 23:16:10 2019 +0200
CAMEL-13622: filter box for component reference
This adds a filter box for the component reference documentation, it's
not enabled for other components as it is quite trivial and would break
nested navigation -- which is not used in the component reference.
---
antora-ui-camel/src/css/base.css | 4 +++
antora-ui-camel/src/css/nav.css | 17 +++++++++++++
antora-ui-camel/src/css/vars.css | 1 +
antora-ui-camel/src/img/search.svg | 9 +++++++
antora-ui-camel/src/js/05-nav-search.js | 42 +++++++++++++++++++++++++++++++
antora-ui-camel/src/partials/nav-menu.hbs | 3 +++
6 files changed, 76 insertions(+)
diff --git a/antora-ui-camel/src/css/base.css b/antora-ui-camel/src/css/base.css
index 2fe1eb9..c7789f7 100644
--- a/antora-ui-camel/src/css/base.css
+++ b/antora-ui-camel/src/css/base.css
@@ -9,6 +9,10 @@ body {
box-sizing: inherit;
}
+*::selection {
+ background: var(--color-highlight);
+}
+
html {
box-sizing: border-box;
font-size: var(--body-font-size);
diff --git a/antora-ui-camel/src/css/nav.css b/antora-ui-camel/src/css/nav.css
index f1ea431..6ab3891 100644
--- a/antora-ui-camel/src/css/nav.css
+++ b/antora-ui-camel/src/css/nav.css
@@ -96,6 +96,23 @@ html.is-clipped--nav {
background-color: var(--nav-border-color);
}
+.nav-panel-menu input.search {
+ border: 1px solid var(--nav-background);
+ padding: 0.3rem 0.5rem 0.3rem 1.7rem;
+ margin: 0.45rem 0.75rem;
+ background: no-repeat 0.2rem/1.2rem url(../img/search.svg);
+ z-index: var(--z-index-nav-search);
+ font-size: calc(17 / var(--rem-base) * 1rem);
+ font-family: var(--body-font-family);
+ caret-color: var(--color-camel-orange);
+ transition: border-color 0.2s linear;
+ outline: none;
+}
+
+.nav-panel-menu input.search:focus {
+ border-bottom-color: var(--nav-panel-divider-color);
+}
+
.nav-menu {
flex-grow: 1;
min-height: 0;
diff --git a/antora-ui-camel/src/css/vars.css b/antora-ui-camel/src/css/vars.css
index 3208946..0d931a6 100644
--- a/antora-ui-camel/src/css/vars.css
+++ b/antora-ui-camel/src/css/vars.css
@@ -139,4 +139,5 @@
--z-index-toolbar: 2;
--z-index-page-version-menu: 3;
--z-index-navbar: 4;
+ --z-index-nav-search: 5;
}
diff --git a/antora-ui-camel/src/img/search.svg b/antora-ui-camel/src/img/search.svg
new file mode 100644
index 0000000..e720842
--- /dev/null
+++ b/antora-ui-camel/src/img/search.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 100 100"
+ version="1.1">
+ <circle cx="46" cy="46" r="30" style="fill: none; stroke-width: 7; stroke: black"/>
+ <line x1="65" y1="65" x2="90" y2="90" style="stroke-width: 7; stroke: black" />
+</svg>
diff --git a/antora-ui-camel/src/js/05-nav-search.js b/antora-ui-camel/src/js/05-nav-search.js
new file mode 100644
index 0000000..4666425
--- /dev/null
+++ b/antora-ui-camel/src/js/05-nav-search.js
@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', function () {
+ var tokenize = function (c) {
+ return '.*' + c + '.*'
+ }
+ var navSearch = document.querySelector('.nav-panel-menu input.search')
+ if (!navSearch) {
+ return
+ }
+
+ var navLinks = document.querySelectorAll('.nav-link')
+ navSearch.addEventListener('keyup', function () {
+ var tokens = navSearch.value.split('')
+ var term = new RegExp(tokens.map(tokenize).join(''), 'i')
+ for (var i = 0; i < navLinks.length; i++) {
+ var text = navLinks[i].textContent
+ var matches = term.test(text)
+ var replacement = ''
+ if (matches) {
+ navLinks[i].style.display = ''
+ if (tokens.length === 0) {
+ replacement = text
+ } else {
+ var prev = 0
+ var curr = 0
+ for (var j = 0; j < tokens.length; j++) {
+ curr = text.toLowerCase().indexOf(tokens[j].toLowerCase(), curr)
+ replacement = replacement + text.substring(prev, curr) + '<b>' + text[curr] + '</b>'
+ curr++
+ prev = curr
+ }
+ if (curr < text.length) {
+ replacement = replacement + text.substring(curr)
+ }
+ }
+ } else {
+ navLinks[i].style.display = 'none'
+ replacement = text
+ }
+ navLinks[i].innerHTML = replacement
+ }
+ })
+})
diff --git a/antora-ui-camel/src/partials/nav-menu.hbs b/antora-ui-camel/src/partials/nav-menu.hbs
index 27a667d..8c5d71e 100644
--- a/antora-ui-camel/src/partials/nav-menu.hbs
+++ b/antora-ui-camel/src/partials/nav-menu.hbs
@@ -1,5 +1,8 @@
{{#if page.navigation}}
<div class="nav-panel-menu is-active" data-panel="menu">
+ {{#if (eq page.component.name 'components')}}
+ <input class="search" placeholder="Quick lookup">
+ {{/if}}
<nav class="nav-menu">
<h3 class="title"><a href="{{relativize page.url page.componentVersion.url}}">{{page.component.title}}</a></h3>
{{> nav-tree navigation=page.navigation}}