diff --git a/404.html b/404.html index 56efce4..1e7a37e 100644 --- a/404.html +++ b/404.html @@ -8,4 +8,4 @@ search_exclude: true

Page not found

-

The page you requested could not be found. Try using the navigation {% if site.search_enabled %}or search {% endif %}to find what you're looking for or go to this site's home page.

+

The page you requested could not be found. Try using the navigation {% if site.search_enabled != false %}or search {% endif %}to find what you're looking for or go to this site's home page.

diff --git a/_config.yml b/_config.yml index 42ccec2..20bf8a1 100644 --- a/_config.yml +++ b/_config.yml @@ -25,10 +25,31 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac #logo: "/assets/images/just-the-docs.png" # Enable or disable the site search +# Supports true (default) or false search_enabled: true - -# Set the search token separator for hyphenated-word search: -search_tokenizer_separator: /[\s/]+/ +search: + # Split pages into sections that can be searched individually + # Supports 1 - 6, default: 2 + heading_level: 2 + # Maximum amount of previews per search result + # Default: 3 + previews: 3 + # Maximum amount of words to display before a matched word in the preview + # Default: 5 + preview_words_before: 5 + # Maximum amount of words to display after a matched word in the preview + # Default: 10 + preview_words_after: 10 + # Set the search token separator + # Default: /[\s\-/]+/ + # Example: enable support for hyphenated search words + tokenizer_separator: /[\s/]+/ + # Display the relative url in search results + # Supports true (default) or false + rel_url: true + # Enable or disable the search button that appears in the bottom right corner of every page + # Supports true or false (default) + button: false # Enable or disable heading anchors heading_anchors: true diff --git a/_includes/nav.html b/_includes/nav.html index 573e1f9..f2ec7e5 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -1,51 +1,55 @@ - + diff --git a/_layouts/default.html b/_layouts/default.html index de5c722..1c0b215 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -4,136 +4,166 @@ layout: table_wrappers - + {% include head.html %} - + Link - + + + + + + Search + + + + + + Menu + + + + + + Expand + + + + + + Document + + + -
-
-
- {% include title.html %} - -
- -
- {% include nav.html %} -
-
-

This site uses Just the Docs, a documentation theme for Jekyll.

-
+
+
+ {% include title.html %} + + +
-
-
-
- {% if site.search_enabled != false %} -
-
- - Search -
-
+ +
+ This site uses Just the Docs, a documentation theme for Jekyll. +
+
+
+
+ {% if site.search_enabled != false %} +
+
+ +
- {% endif %} - {% if site.aux_links != nil %} - - {% endif %} +
-
- {% unless page.url == "/" %} - {% if page.parent %} - - {% endif %} - {% endunless %} -
- {% if site.heading_anchors != false %} - {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="" anchorClass="anchor-heading" %} - {% else %} - {{ content }} - {% endif %} + > + {{ link.first }} + + + {% endfor %} + + + {% endif %} +
+
+ {% unless page.url == "/" %} + {% if page.parent %} + + {% endif %} + {% endunless %} +
+ {% if site.heading_anchors != false %} + {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="" anchorClass="anchor-heading" %} + {% else %} + {{ content }} + {% endif %} - {% if page.has_children == true and page.has_toc != false %} -
-

Table of contents

-
    - {%- assign children_list = pages_list | where: "parent", node.title -%} - {% for child in children_list %} - {% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %} -
  • - {{ child.title }}{% if child.summary %} - {{ child.summary }}{% endif %} -
    • - {% endif %} - {% endfor %} -
- {% endif %} + {% if page.has_children == true and page.has_toc != false %} +
+

Table of contents

+
    + {%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%} + {% for child in children_list %} +
  • + {{ child.title }}{% if child.summary %} - {{ child.summary }}{% endif %} +
    • + {% endfor %} +
+ {% endif %} - {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %} -
-
- {% if site.back_to_top %} + {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %} +
+
+ {% if site.back_to_top %}

{{ site.back_to_top_text }}

- {% endif %} - {% if site.footer_content != nil %} + {% endif %} + {% if site.footer_content != nil %}

{{ site.footer_content }}

- {% endif %} + {% endif %} - {% if site.last_edit_timestamp or site.gh_edit_link %} -
- {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %} + {% if site.last_edit_timestamp or site.gh_edit_link %} +
+ {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}

- Page last modified: {{ page.last_modified_date | date: site.last_edit_time_format }}. + Page last modified: {{ page.last_modified_date | date: site.last_edit_time_format }}.

- {% endif %} - {% - if + {% endif %} + {% if site.gh_edit_link and site.gh_edit_link_text and site.gh_edit_repository and site.gh_edit_branch and site.gh_edit_view_mode - - %} + %}

- {{ site.gh_edit_link_text }} + {{ site.gh_edit_link_text }}

- {% endif %} -
- {% endif %} + {% endif %} +
+ {% endif %} +
+ {% endif %} -
- {% endif %} - -
-
+ {% if site.search_enabled != false %} + {% if site.search.button %} + + + + {% endif %} + +
+ {% endif %} +
diff --git a/_sass/code.scss b/_sass/code.scss index 18f7ea4..affc8aa 100644 --- a/_sass/code.scss +++ b/_sass/code.scss @@ -16,8 +16,9 @@ figure.highlight { padding: $sp-3; margin-top: 0; margin-bottom: 0; - -webkit-overflow-scrolling: touch; background-color: $code-background-color; + border-radius: $border-radius; + -webkit-overflow-scrolling: touch; code { padding: 0; @@ -27,8 +28,6 @@ figure.highlight { .highlighter-rouge { margin-bottom: $sp-3; - overflow: hidden; - border-radius: $border-radius; } .highlight .c { diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss index 9a0b9ea..a25f449 100644 --- a/_sass/color_schemes/dark.scss +++ b/_sass/color_schemes/dark.scss @@ -14,3 +14,4 @@ $base-button-color: $grey-dk-250; $code-background-color: $grey-dk-250; $search-background-color: $grey-dk-250; $table-background-color: $grey-dk-250; +$feedback-color: darken($sidebar-color, 3%); diff --git a/_sass/content.scss b/_sass/content.scss index 7ab23d8..5bf0ad5 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -5,7 +5,7 @@ // // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type -.page-content { +.main-content { line-height: $content-line-height; ol, @@ -148,7 +148,7 @@ display: inline-block; width: 100%; height: 100%; - fill: $link-color; + color: $link-color; visibility: hidden; } } diff --git a/_sass/layout.scss b/_sass/layout.scss index 79169e4..004cbe7 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -2,28 +2,15 @@ // The basic two column layout // -.page-wrap { - @include mq(md) { - position: absolute; - top: 0; - left: 0; - display: flex; - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: hidden; - } -} - .side-bar { - z-index: 100; + z-index: 0; display: flex; flex-wrap: wrap; background-color: $sidebar-color; @include mq(md) { flex-wrap: nowrap; - position: absolute; + position: fixed; width: $nav-width-md; height: 100%; flex-direction: column; @@ -37,20 +24,7 @@ } } -.main-content-wrap { - @include mq(md) { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - -webkit-overflow-scrolling: touch; - overflow-x: hidden; - overflow-y: scroll; - } -} - -.main-content { +.main { @include mq(md) { position: relative; max-width: $content-width; @@ -64,11 +38,7 @@ } } -.js-main-content:focus { - outline: none; -} - -.page { +.main-content-wrap { @include container; padding-top: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm; @@ -79,16 +49,14 @@ } } -.page-header { - @include container; +.main-header { + z-index: 0; display: none; - padding-top: $gutter-spacing-sm; - padding-bottom: $gutter-spacing-sm; background-color: $sidebar-color; @include mq(md) { display: flex; - justify-content: flex-end; + justify-content: space-between; height: $header-height; background-color: $body-background-color; border-bottom: $border $border-color; @@ -103,7 +71,7 @@ } } -.navigation, +.site-nav, .site-header, .site-footer { width: 100%; @@ -113,10 +81,15 @@ } } -.navigation { - @include container; +.site-nav { + display: none; + + &.nav-open { + display: block; + } @include mq(md) { + display: block; padding-top: $sp-8; padding-bottom: $gutter-spacing-sm; overflow-y: auto; @@ -130,7 +103,6 @@ align-items: center; @include mq(md) { - z-index: 101; height: $header-height; max-height: $header-height; border-bottom: $border $border-color; @@ -165,27 +137,42 @@ } } -.menu-button { - appearance: none; +.site-button { display: flex; height: 100%; padding: $gutter-spacing-sm; align-items: center; - color: $link-color; - text-transform: uppercase; - background: transparent; - border: 0; +} - @include mq(md) { +@include mq(md) { + .site-header .site-button { display: none; } } +.site-title:hover { + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 80%, + rgba($feedback-color, 0) 100% + ); +} + +.site-button:hover { + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 100% + ); +} + // stylelint-disable selector-max-type body { position: relative; padding-bottom: $sp-10; + overflow-y: scroll; @include mq(md) { position: static; @@ -202,9 +189,17 @@ body { left: 0; padding-top: $sp-4; padding-bottom: $sp-4; + color: $grey-dk-000; + @include fs-2; @include mq(md) { position: static; justify-self: end; } } + +.icon { + width: $sp-5; + height: $sp-5; + color: $link-color; +} diff --git a/_sass/navigation.scss b/_sass/navigation.scss index c774904..0417b4c 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -1,89 +1,165 @@ // // Main nav, breadcrumb, etc... // -.navigation-list { +// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity + +.nav-list { padding: 0; margin-top: 0; margin-bottom: 0; list-style: none; -} -.navigation-list-child-list { - padding-left: $sp-3; - list-style: none; - - .navigation-list-link { - color: $nav-child-link-color; - } - - .navigation-list-item { + .nav-list-item { + @include fs-4; position: relative; + margin: 0; - &::before { + @include mq(md) { + @include fs-3; + } + + .nav-list-link { + display: block; + min-height: $nav-list-item-height-sm; + padding-top: $sp-1; + padding-bottom: $sp-1; + line-height: #{$nav-list-item-height-sm - 2 * $sp-1}; + @if $nav-list-expander-right { + padding-right: $nav-list-item-height-sm; + padding-left: $gutter-spacing-sm; + } @else { + padding-right: $gutter-spacing-sm; + padding-left: $nav-list-item-height-sm; + } + + @include mq(md) { + min-height: $nav-list-item-height; + line-height: #{$nav-list-item-height - 2 * $sp-1}; + @if $nav-list-expander-right { + padding-right: $nav-list-item-height; + padding-left: $gutter-spacing; + } @else { + padding-right: $gutter-spacing; + padding-left: $nav-list-item-height; + } + } + + &.active { + font-weight: 600; + text-decoration: none; + } + + &:hover, + &.active { + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 80%, + rgba($feedback-color, 0) 100% + ); + } + } + + .nav-list-expander { position: absolute; - margin-top: 0.3em; - margin-left: -0.8em; - color: rgba($body-text-color, 0.3); - content: "- "; + @if $nav-list-expander-right { + right: 0; + } + width: $nav-list-item-height-sm; + height: $nav-list-item-height-sm; + padding-top: #{$nav-list-item-height-sm / 4}; + padding-right: #{$nav-list-item-height-sm / 4}; + padding-bottom: #{$nav-list-item-height-sm / 4}; + padding-left: #{$nav-list-item-height-sm / 4}; + color: $link-color; + + @include mq(md) { + width: $nav-list-item-height; + height: $nav-list-item-height; + padding-top: #{$nav-list-item-height / 4}; + padding-right: #{$nav-list-item-height / 4}; + padding-bottom: #{$nav-list-item-height / 4}; + padding-left: #{$nav-list-item-height / 4}; + } + + &:hover { + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 100% + ); + } + + @if $nav-list-expander-right { + svg { + transform: rotate(90deg); + } + } + } + + > .nav-list { + display: none; + padding-left: $sp-3; + list-style: none; + + .nav-list-item { + position: relative; + + .nav-list-link { + color: $nav-child-link-color; + } + + .nav-list-expander { + color: $nav-child-link-color; + } + } } &.active { - &::before { - color: $body-text-color; + > .nav-list-expander svg { + @if $nav-list-expander-right { + transform: rotate(-90deg); + } @else { + transform: rotate(90deg); + } + } + + > .nav-list { + display: block; } } } } -.navigation-list-item { - @include fs-4; - margin: 0; - - @include mq(md) { - @include fs-3; - } - - .navigation-list-child-list { - display: none; - } - - &.active { - .navigation-list-child-list { - display: block; - } - } -} - -.navigation-list-link { - display: block; - padding-top: $sp-1; - padding-bottom: $sp-1; - - &.active { - font-weight: 600; - color: $body-heading-color; - text-decoration: none; - } -} - -// Small screen nav - -.main-nav { - display: none; - - &.nav-open { - display: block; - } - @include mq(md) { - display: block; - } -} +// Aux nav .aux-nav { - align-self: center; + height: 100%; + overflow-x: auto; + @include fs-2; + + .aux-nav-list { + display: flex; + height: 100%; + padding: 0; + margin: 0; + list-style: none; + } + + .aux-nav-list-item { + display: inline-block; + height: 100%; + padding: 0; + margin: 0; + } + + @include mq(md) { + padding-right: $gutter-spacing-sm; + } } // Breadcrumb nav + .breadcrumb-nav { @include mq(md) { margin-top: -$sp-4; diff --git a/_sass/search.scss b/_sass/search.scss index bef2df7..8a7f410 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -4,91 +4,115 @@ .search { position: relative; - z-index: 99; + z-index: 2; flex-grow: 1; - height: 100%; - margin-bottom: $sp-3; + height: $sp-10; + padding: $sp-2; + transition: padding linear #{$transition-duration / 2}; @include mq(md) { - margin-bottom: 0; + position: relative !important; + width: auto !important; + height: 100% !important; + padding: 0; + transition: none; } } .search-input-wrap { - display: flex; - height: 100%; - padding: $sp-2; - background-color: $search-background-color; + position: relative; + z-index: 1; + height: $sp-8; + overflow: hidden; border-radius: $border-radius; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + transition: height linear #{$transition-duration / 2}; @include mq(md) { - padding-top: 0; - padding-right: 0; - padding-bottom: 0; - padding-left: 0; - background-color: $body-background-color; + position: absolute; + width: 100%; + max-width: $search-results-width; + height: 100% !important; border-radius: 0; box-shadow: none; + transition: width ease $transition-duration; } } .search-input { - align-self: center; + position: absolute; width: 100%; - padding-top: $sp-1; - padding-bottom: $sp-1; + height: 100%; + padding-top: $sp-2; + padding-right: $gutter-spacing-sm; + padding-bottom: $sp-2; + padding-left: #{$gutter-spacing-sm + $sp-5}; + font-size: 16px; background-color: $search-background-color; border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; - order: 2; - @include fs-4; + border-radius: 0; + + @include mq(md) { + padding-top: $gutter-spacing-sm; + padding-bottom: $gutter-spacing-sm; + padding-left: #{$gutter-spacing + $sp-5}; + font-size: 14px; + background-color: $body-background-color; + transition: padding-left linear #{$transition-duration / 2}; + } &:focus { outline: 0; - box-shadow: none; - + .search-icon { - fill: $link-color; + + .search-label .search-icon { + color: $link-color; } } +} + +.search-label { + position: absolute; + display: flex; + height: 100%; + padding-left: $gutter-spacing-sm; @include mq(md) { - background-color: $body-background-color; - @include fs-3; + padding-left: $gutter-spacing; + transition: padding-left linear #{$transition-duration / 2}; + } + + .search-icon { + width: #{$sp-4 * 1.2}; + height: #{$sp-4 * 1.2}; + align-self: center; + color: $grey-dk-000; } } -.search-icon { - align-self: center; - margin-right: $sp-2; - fill: $grey-dk-000; - order: 1; -} - -.search-results-wrap { +.search-results { position: absolute; - z-index: 100; + left: 0; display: none; width: 100%; - background: $search-background-color; - border-radius: $border-radius; + max-height: calc(100% - #{$sp-10}); + overflow-y: auto; + background-color: $search-background-color; + border-bottom-right-radius: $border-radius; + border-bottom-left-radius: $border-radius; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); - &.active { - display: block; - } - @include mq(md) { + top: 100%; width: $search-results-width; + max-height: calc(100vh - 200%) !important; } } .search-results-list { padding-left: 0; - margin-top: $sp-1; margin-bottom: $sp-1; list-style: none; @include fs-4; @@ -112,31 +136,58 @@ &:hover, &.active { - background-color: $sidebar-color; - } - - @include mq(md) { - padding-right: $sp-4; - padding-left: $sp-4; + background-color: $feedback-color; } } .search-result-title { display: block; padding-top: $sp-2; - padding-right: $sp-4; padding-bottom: $sp-2; @include mq(sm) { display: inline-block; width: 40%; - word-wrap: break-word; + padding-right: $sp-2; vertical-align: top; } } +.search-result-doc { + display: flex; + align-items: center; + word-wrap: break-word; + + &.search-result-doc-parent { + opacity: 0.5; + @include fs-3; + + @include mq(md) { + @include fs-2; + } + } + + .search-result-icon { + width: $sp-4; + height: $sp-4; + margin-right: $sp-2; + color: $link-color; + flex-shrink: 0; + } + + .search-result-doc-title { + overflow: auto; + } +} + +.search-result-section { + margin-left: #{$sp-4 + $sp-2}; + word-wrap: break-word; +} + .search-result-rel-url { display: block; + margin-left: #{$sp-4 + $sp-2}; overflow: hidden; color: $search-result-preview-color; text-overflow: ellipsis; @@ -144,12 +195,14 @@ @include fs-1; } -.search-result-preview { +.search-result-previews { display: block; padding-top: $sp-2; padding-bottom: $sp-2; padding-left: $sp-4; + margin-left: $sp-2; color: $search-result-preview-color; + word-wrap: break-word; border-left: $border; border-left-color: $border-color; @include fs-2; @@ -157,11 +210,112 @@ @include mq(sm) { display: inline-block; width: 60%; + padding-left: $sp-2; + margin-left: 0; vertical-align: top; } } +.search-result-preview + .search-result-preview { + margin-top: $sp-1; +} + .search-result-highlight { font-weight: bold; - color: $link-color; +} + +.search-no-result { + padding-top: $sp-2; + padding-right: $sp-3; + padding-bottom: $sp-2; + padding-left: $sp-3; + @include fs-3; +} + +.search-button { + position: fixed; + right: $sp-4; + bottom: $sp-4; + display: flex; + width: $sp-9; + height: $sp-9; + background-color: $search-background-color; + border: 1px solid rgba($link-color, 0.3); + border-radius: #{$sp-9 / 2}; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + align-items: center; + justify-content: center; +} + +.search-overlay { + position: fixed; + top: 0; + left: 0; + z-index: 1; + width: 0; + height: 0; + background-color: rgba(0, 0, 0, 0.3); + opacity: 0; + transition: opacity ease $transition-duration, width 0s $transition-duration, + height 0s $transition-duration; +} + +.search-active { + .search { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + } + + .search-input-wrap { + height: $sp-10; + border-radius: 0; + + @include mq(md) { + width: $search-results-width; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + } + } + + .search-input { + background-color: $search-background-color; + + @include mq(md) { + padding-left: #{$sp-4 * 1.25 + $sp-5}; + } + } + + .search-label { + @include mq(md) { + padding-left: #{$sp-4 * 1.25}; + } + } + + .search-results { + display: block; + } + + .search-overlay { + width: 100%; + height: 100%; + opacity: 1; + transition: opacity ease $transition-duration, width 0s, height 0s; + } + + @include mq(md) { + .main { + position: fixed; + } + } + + .main-header { + padding-top: $sp-10; + + @include mq(md) { + padding-top: 0; + } + } } diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 3665a36..b97b14e 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -57,6 +57,7 @@ $sidebar-color: $grey-lt-000 !default; $search-background-color: $white !default; $table-background-color: $white !default; $code-background-color: $grey-lt-000 !default; +$feedback-color: darken($sidebar-color, 3%) !default; $body-text-color: $grey-dk-100 !default; $body-heading-color: $grey-dk-300 !default; @@ -94,8 +95,8 @@ $sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px $sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px $sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px $sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px -$sp-9: map-get($spacers, sp-9) !default; // 4 rem == 48px -$sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px +$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px +$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px // // Borders @@ -113,9 +114,13 @@ $gutter-spacing: $sp-6 !default; $gutter-spacing-sm: $sp-4 !default; $nav-width: 264px !default; $nav-width-md: 248px !default; +$nav-list-item-height: $sp-6 !default; +$nav-list-item-height-sm: $sp-8 !default; +$nav-list-expander-right: true; $content-width: 800px !default; $header-height: 60px !default; -$search-results-width: 500px !default; +$search-results-width: $content-width - $nav-width !default; +$transition-duration: 400ms; // // Media queries in pixels diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index 2edf7f4..c287ec0 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -24,24 +24,47 @@ jtd.onReady = function(ready) { // Show/hide mobile menu function initNav() { - const mainNav = document.querySelector('.js-main-nav'); - const pageHeader = document.querySelector('.js-page-header'); - const navTrigger = document.querySelector('.js-main-nav-trigger'); + jtd.addEvent(document, 'click', function(e){ + var target = e.target; + while (target && !(target.classList && target.classList.contains('nav-list-expander'))) { + target = target.parentNode; + } + if (target) { + e.preventDefault(); + target.parentNode.classList.toggle('active'); + } + }); - jtd.addEvent(navTrigger, 'click', function(e){ + const siteNav = document.getElementById('site-nav'); + const mainHeader = document.getElementById('main-header'); + const menuButton = document.getElementById('menu-button'); + + jtd.addEvent(menuButton, 'click', function(e){ e.preventDefault(); - var text = navTrigger.innerText; - var textToggle = navTrigger.getAttribute('data-text-toggle'); - mainNav.classList.toggle('nav-open'); - pageHeader.classList.toggle('nav-open'); - navTrigger.classList.toggle('nav-open'); - navTrigger.innerText = textToggle; - navTrigger.setAttribute('data-text-toggle', text); - textToggle = text; - }) + if (menuButton.classList.toggle('nav-open')) { + siteNav.classList.add('nav-open'); + mainHeader.classList.add('nav-open'); + } else { + siteNav.classList.remove('nav-open'); + mainHeader.classList.remove('nav-open'); + } + }); + + {%- if site.search_enabled != false and site.search.button %} + const searchInput = document.getElementById('search-input'); + const searchButton = document.getElementById('search-button'); + + jtd.addEvent(searchButton, 'click', function(e){ + e.preventDefault(); + + mainHeader.classList.add('nav-open'); + searchInput.focus(); + }); + {%- endif %} } +{%- if site.search_enabled != false %} // Site search function initSearch() { @@ -50,241 +73,377 @@ function initSearch() { request.onload = function(){ if (request.status >= 200 && request.status < 400) { - // Success! - var data = JSON.parse(request.responseText); + var docs = JSON.parse(request.responseText); - {% if site.search_tokenizer_separator != nil %} - lunr.tokenizer.separator = {{ site.search_tokenizer_separator }} - {% else %} - lunr.tokenizer.separator = /[\s\-/]+/ - {% endif %} - - var index = lunr(function () { + lunr.tokenizer.separator = {{ site.search.tokenizer_separator | default: site.search_tokenizer_separator | default: "/[\s\-/]+/" }} + + var index = lunr(function(){ this.ref('id'); this.field('title', { boost: 200 }); this.field('content', { boost: 2 }); - this.field('url'); + {%- if site.search.rel_url != false %} + this.field('relUrl'); + {%- endif %} this.metadataWhitelist = ['position'] - for (var i in data) { + for (var i in docs) { this.add({ id: i, - title: data[i].title, - content: data[i].content, - url: data[i].url + title: docs[i].title, + content: docs[i].content, + {%- if site.search.rel_url != false %} + relUrl: docs[i].relUrl + {%- endif %} }); } }); - searchResults(index, data); + searchLoaded(index, docs); } else { - // We reached our target server, but it returned an error console.log('Error loading ajax request. Request status:' + request.status); } }; request.onerror = function(){ - // There was a connection error of some sort console.log('There was a connection error'); }; request.send(); +} - function searchResults(index, data) { - var index = index; - var docs = data; - var searchInput = document.querySelector('.js-search-input'); - var searchResults = document.querySelector('.js-search-results'); +function searchLoaded(index, docs) { + var index = index; + var docs = docs; + var searchInput = document.getElementById('search-input'); + var searchResults = document.getElementById('search-results'); + var mainHeader = document.getElementById('main-header'); + var currentInput; + var currentSearchIndex = 0; - function hideResults() { - searchResults.innerHTML = ''; - searchResults.classList.remove('active'); + function showSearch() { + document.documentElement.classList.add('search-active'); + } + + function hideSearch() { + document.documentElement.classList.remove('search-active'); + } + + function update() { + currentSearchIndex++; + + var input = searchInput.value; + if (input === '') { + hideSearch(); + } else { + showSearch(); + // scroll search input into view, workaround for iOS Safari + window.scroll(0, -1); + setTimeout(function(){ window.scroll(0, 0); }, 0); + } + if (input === currentInput) { + return; + } + currentInput = input; + searchResults.innerHTML = ''; + if (input === '') { + return; } - jtd.addEvent(searchInput, 'keydown', function(e){ - switch (e.keyCode) { - case 38: // arrow up - e.preventDefault(); - var active = document.querySelector('.search-result.active'); - if (active) { - active.classList.remove('active'); - if (active.parentElement.previousSibling) { - var previous = active.parentElement.previousSibling.querySelector('.search-result'); - previous.classList.add('active'); - } - } - return; - case 40: // arrow down - e.preventDefault(); - var active = document.querySelector('.search-result.active'); - if (active) { - if (active.parentElement.nextSibling) { - var next = active.parentElement.nextSibling.querySelector('.search-result'); - active.classList.remove('active'); - next.classList.add('active'); - } - } else { - var next = document.querySelector('.search-result'); - if (next) { - next.classList.add('active'); - } - } - return; - case 13: // enter - e.preventDefault(); - var active = document.querySelector('.search-result.active'); - if (active) { - active.click(); - } else { - var first = document.querySelector('.search-result'); - if (first) { - first.click(); - } - } - return; - } + var results = index.query(function (query) { + var tokens = lunr.tokenizer(input) + query.term(tokens, { + boost: 10 + }); + query.term(tokens, { + wildcard: lunr.Query.wildcard.TRAILING + }); }); - jtd.addEvent(searchInput, 'keyup', function(e){ - switch (e.keyCode) { - case 27: // When esc key is pressed, hide the results and clear the field - hideResults(); - searchInput.value = ''; - return; - case 38: // arrow up - case 40: // arrow down - case 13: // enter - e.preventDefault(); - return; + if ((results.length == 0) && (input.length > 2)) { + var tokens = lunr.tokenizer(input).filter(function(token, i) { + return token.str.length < 20; + }) + if (tokens.length > 0) { + results = index.query(function (query) { + query.term(tokens, { + editDistance: Math.round(Math.sqrt(input.length / 2 - 1)) + }); + }); } + } - hideResults(); + if (results.length == 0) { + var noResultsDiv = document.createElement('div'); + noResultsDiv.classList.add('search-no-result'); + noResultsDiv.innerText = 'No results found'; + searchResults.appendChild(noResultsDiv); - var input = this.value; - if (input === '') { + } else { + var resultsList = document.createElement('ul'); + resultsList.classList.add('search-results-list'); + searchResults.appendChild(resultsList); + + addResults(resultsList, results, 0, 10, 100, currentSearchIndex); + } + + function addResults(resultsList, results, start, batchSize, batchMillis, searchIndex) { + if (searchIndex != currentSearchIndex) { return; } + for (var i = start; i < (start + batchSize); i++) { + if (i == results.length) { + return; + } + addResult(resultsList, results[i]); + } + setTimeout(function() { + addResults(resultsList, results, start + batchSize, batchSize, batchMillis, searchIndex); + }, batchMillis); + } - var results = index.query(function (query) { - var tokens = lunr.tokenizer(input) - query.term(tokens, { - boost: 10 - }); - query.term(tokens, { - wildcard: lunr.Query.wildcard.TRAILING - }); - }); + function addResult(resultsList, result) { + var doc = docs[result.ref]; - if (results.length > 0) { - searchResults.classList.add('active'); - var resultsList = document.createElement('ul'); - resultsList.classList.add('search-results-list'); - searchResults.appendChild(resultsList); + var resultsListItem = document.createElement('li'); + resultsListItem.classList.add('search-results-list-item'); + resultsList.appendChild(resultsListItem); - for (var i in results) { - var result = results[i]; - var doc = docs[result.ref]; + var resultLink = document.createElement('a'); + resultLink.classList.add('search-result'); + resultLink.setAttribute('href', doc.url); + resultsListItem.appendChild(resultLink); - var resultsListItem = document.createElement('li'); - resultsListItem.classList.add('search-results-list-item'); - resultsList.appendChild(resultsListItem); + var resultTitle = document.createElement('div'); + resultTitle.classList.add('search-result-title'); + resultLink.appendChild(resultTitle); - var resultLink = document.createElement('a'); - resultLink.classList.add('search-result'); - resultLink.setAttribute('href', doc.url); - resultsListItem.appendChild(resultLink); + var resultDoc = document.createElement('div'); + resultDoc.classList.add('search-result-doc'); + resultDoc.innerHTML = ''; + resultTitle.appendChild(resultDoc); - var resultTitle = document.createElement('div'); - resultTitle.classList.add('search-result-title'); - resultTitle.innerText = doc.title; - resultLink.appendChild(resultTitle); + var resultDocTitle = document.createElement('div'); + resultDocTitle.classList.add('search-result-doc-title'); + resultDocTitle.innerHTML = doc.doc; + resultDoc.appendChild(resultDocTitle); + var resultDocOrSection = resultDocTitle; - var resultRelUrl = document.createElement('span'); - resultRelUrl.classList.add('search-result-rel-url'); - resultRelUrl.innerText = doc.relUrl; - resultTitle.appendChild(resultRelUrl); + if (doc.doc != doc.title) { + resultDoc.classList.add('search-result-doc-parent'); + var resultSection = document.createElement('div'); + resultSection.classList.add('search-result-section'); + resultSection.innerHTML = doc.title; + resultTitle.appendChild(resultSection); + resultDocOrSection = resultSection; + } - var metadata = result.matchData.metadata; - var contentFound = false; - for (var j in metadata) { - if (metadata[j].title) { - var position = metadata[j].title.position[0]; - var start = position[0]; - var end = position[0] + position[1]; - resultTitle.innerHTML = doc.title.substring(0, start) + '' + doc.title.substring(start, end) + '' + doc.title.substring(end, doc.title.length)+''+doc.relUrl+''; - - } else if (metadata[j].content && !contentFound) { - contentFound = true; - - var position = metadata[j].content.position[0]; - var start = position[0]; - var end = position[0] + position[1]; - var previewStart = start; - var previewEnd = end; - var ellipsesBefore = true; - var ellipsesAfter = true; - for (var k = 0; k < 3; k++) { - var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2); - var nextDot = doc.content.lastIndexOf('.', previewStart - 2); - if ((nextDot > 0) && (nextDot > nextSpace)) { - previewStart = nextDot + 1; - ellipsesBefore = false; - break; - } - if (nextSpace < 0) { - previewStart = 0; - ellipsesBefore = false; - break; - } - previewStart = nextSpace + 1; + var metadata = result.matchData.metadata; + var titlePositions = []; + var contentPositions = []; + for (var j in metadata) { + var meta = metadata[j]; + if (meta.title) { + var positions = meta.title.position; + for (var k in positions) { + titlePositions.push(positions[k]); + } + } + if (meta.content) { + var positions = meta.content.position; + for (var k in positions) { + var position = positions[k]; + var previewStart = position[0]; + var previewEnd = position[0] + position[1]; + var ellipsesBefore = true; + var ellipsesAfter = true; + for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) { + var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2); + var nextDot = doc.content.lastIndexOf('. ', previewStart - 2); + if ((nextDot >= 0) && (nextDot > nextSpace)) { + previewStart = nextDot + 1; + ellipsesBefore = false; + break; } - for (var k = 0; k < 10; k++) { - var nextSpace = doc.content.indexOf(' ', previewEnd + 1); - var nextDot = doc.content.indexOf('.', previewEnd + 1); - if ((nextDot > 0) && (nextDot < nextSpace)) { - previewEnd = nextDot; - ellipsesAfter = false; - break; - } - if (nextSpace < 0) { - previewEnd = doc.content.length; - ellipsesAfter = false; - break; - } - previewEnd = nextSpace; + if (nextSpace < 0) { + previewStart = 0; + ellipsesBefore = false; + break; } - var preview = doc.content.substring(previewStart, start); - if (ellipsesBefore) { - preview = '... ' + preview; - } - preview += '' + doc.content.substring(start, end) + ''; - preview += doc.content.substring(end, previewEnd); - if (ellipsesAfter) { - preview += ' ...'; - } - - var resultPreview = document.createElement('div'); - resultPreview.classList.add('search-result-preview'); - resultPreview.innerHTML = preview; - resultLink.appendChild(resultPreview); + previewStart = nextSpace + 1; } + for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) { + var nextSpace = doc.content.indexOf(' ', previewEnd + 1); + var nextDot = doc.content.indexOf('. ', previewEnd + 1); + if ((nextDot >= 0) && (nextDot < nextSpace)) { + previewEnd = nextDot; + ellipsesAfter = false; + break; + } + if (nextSpace < 0) { + previewEnd = doc.content.length; + ellipsesAfter = false; + break; + } + previewEnd = nextSpace; + } + contentPositions.push({ + highlight: position, + previewStart: previewStart, previewEnd: previewEnd, + ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter + }); } } } - }); - jtd.addEvent(searchInput, 'blur', function(){ - setTimeout(function(){ hideResults() }, 300); - }); + if (titlePositions.length > 0) { + titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] }); + resultDocOrSection.innerHTML = ''; + addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions); + } + + if (contentPositions.length > 0) { + contentPositions.sort(function(p1, p2){ return p1.highlight[0] - p2.highlight[0] }); + var contentPosition = contentPositions[0]; + var previewPosition = { + highlight: [contentPosition.highlight], + previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd, + ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter + }; + var previewPositions = [previewPosition]; + for (var j = 1; j < contentPositions.length; j++) { + contentPosition = contentPositions[j]; + if (previewPosition.previewEnd < contentPosition.previewStart) { + previewPosition = { + highlight: [contentPosition.highlight], + previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd, + ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter + } + previewPositions.push(previewPosition); + } else { + previewPosition.highlight.push(contentPosition.highlight); + previewPosition.previewEnd = contentPosition.previewEnd; + previewPosition.ellipsesAfter = contentPosition.ellipsesAfter; + } + } + + var resultPreviews = document.createElement('div'); + resultPreviews.classList.add('search-result-previews'); + resultLink.appendChild(resultPreviews); + + var content = doc.content; + for (var j = 0; j < Math.min(previewPositions.length, {{ site.search.previews | default: 3 }}); j++) { + var position = previewPositions[j]; + + var resultPreview = document.createElement('div'); + resultPreview.classList.add('search-result-preview'); + resultPreviews.appendChild(resultPreview); + + if (position.ellipsesBefore) { + resultPreview.appendChild(document.createTextNode('... ')); + } + addHighlightedText(resultPreview, content, position.previewStart, position.previewEnd, position.highlight); + if (position.ellipsesAfter) { + resultPreview.appendChild(document.createTextNode(' ...')); + } + } + } + + {%- if site.search.rel_url != false %} + var resultRelUrl = document.createElement('span'); + resultRelUrl.classList.add('search-result-rel-url'); + resultRelUrl.innerText = doc.relUrl; + resultTitle.appendChild(resultRelUrl); + {%- endif %} + } + + function addHighlightedText(parent, text, start, end, positions) { + var index = start; + for (var i in positions) { + var position = positions[i]; + var span = document.createElement('span'); + span.innerHTML = text.substring(index, position[0]); + parent.appendChild(span); + index = position[0] + position[1]; + var highlight = document.createElement('span'); + highlight.classList.add('search-result-highlight'); + highlight.innerHTML = text.substring(position[0], index); + parent.appendChild(highlight); + } + var span = document.createElement('span'); + span.innerHTML = text.substring(index, end); + parent.appendChild(span); + } } -} -// Focus + jtd.addEvent(searchInput, 'focus', function(){ + setTimeout(update, 0); + }); -function pageFocus() { - var mainContent = document.querySelector('.js-main-content'); - mainContent.focus(); + jtd.addEvent(searchInput, 'keyup', function(e){ + switch (e.keyCode) { + case 27: // When esc key is pressed, hide the results and clear the field + searchInput.value = ''; + break; + case 38: // arrow up + case 40: // arrow down + case 13: // enter + e.preventDefault(); + return; + } + update(); + }); + + jtd.addEvent(searchInput, 'keydown', function(e){ + switch (e.keyCode) { + case 38: // arrow up + e.preventDefault(); + var active = document.querySelector('.search-result.active'); + if (active) { + active.classList.remove('active'); + if (active.parentElement.previousSibling) { + var previous = active.parentElement.previousSibling.querySelector('.search-result'); + previous.classList.add('active'); + } + } + return; + case 40: // arrow down + e.preventDefault(); + var active = document.querySelector('.search-result.active'); + if (active) { + if (active.parentElement.nextSibling) { + var next = active.parentElement.nextSibling.querySelector('.search-result'); + active.classList.remove('active'); + next.classList.add('active'); + } + } else { + var next = document.querySelector('.search-result'); + if (next) { + next.classList.add('active'); + } + } + return; + case 13: // enter + e.preventDefault(); + var active = document.querySelector('.search-result.active'); + if (active) { + active.click(); + } else { + var first = document.querySelector('.search-result'); + if (first) { + first.click(); + } + } + return; + } + }); + + jtd.addEvent(document, 'click', function(e){ + if (e.target != searchInput) { + hideSearch(); + } + }); } +{%- endif %} // Switch theme @@ -302,10 +461,9 @@ jtd.setTheme = function(theme) { jtd.onReady(function(){ initNav(); - pageFocus(); - if (typeof lunr !== 'undefined') { - initSearch(); - } + {%- if site.search_enabled != false %} + initSearch(); + {%- endif %} }); })(window.jtd = window.jtd || {}); diff --git a/assets/js/search-data.json b/assets/js/search-data.json deleted file mode 100644 index 8e1b986..0000000 --- a/assets/js/search-data.json +++ /dev/null @@ -1,12 +0,0 @@ ---- ---- -{ - {% assign comma = false %} - {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": { - "title": "{{ page.title | replace: '&', '&' }}", - "content": "{{ page.content | markdownify | replace: '' -%} + {%- assign title = titleAndContent[0] | replace_first: '>', '

' | split: '

' -%} + {%- assign title = title[1] | strip_html -%} + {%- assign content = titleAndContent[1] -%} + {%- assign url = page.url -%} + {%- if title == page.title and parts[0] == '' -%} + {%- assign title_found = true -%} + {%- else -%} + {%- assign id = titleAndContent[0] -%} + {%- assign id = id | split: 'id="' -%} + {%- if id.size == 2 -%} + {%- assign id = id[1] -%} + {%- assign id = id | split: '"' -%} + {%- assign id = id[0] -%} + {%- capture url -%}{{ url | append: '#' | append: id }}{%- endcapture -%} + {%- endif -%} + {%- endif -%} + {%- unless i == 0 -%},{%- endunless -%} + "{{ i }}": { + "doc": {{ page.title | jsonify }}, + "title": {{ title | jsonify }}, + "content": {{ content | replace: '\' -%} + {%- assign title = titleAndContent[0] | replace_first: \'>\', \'

\' | split: \'

\' -%} + {%- assign title = title[1] | strip_html -%} + {%- assign content = titleAndContent[1] -%} + {%- assign url = page.url -%} + {%- if title == page.title and parts[0] == \'\' -%} + {%- assign title_found = true -%} + {%- else -%} + {%- assign id = titleAndContent[0] -%} + {%- assign id = id | split: \'id="\' -%} + {%- if id.size == 2 -%} + {%- assign id = id[1] -%} + {%- assign id = id | split: \'"\' -%} + {%- assign id = id[0] -%} + {%- capture url -%}{{ url | append: \'#\' | append: id }}{%- endcapture -%} + {%- endif -%} + {%- endif -%} + {%- unless i == 0 -%},{%- endunless -%} + "{{ i }}": { + "doc": {{ page.title | jsonify }}, + "title": {{ title | jsonify }}, + "content": {{ content | replace: \'