-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for multi-line queries to LocalNavSearch component of UI …
…Framework.
- Loading branch information
Showing
5 changed files
with
241 additions
and
0 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
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
69 changes: 69 additions & 0 deletions
69
ui_framework/doc_site/src/views/local_nav/local_nav_search_multi_line.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <div class="kuiLocalNav"> | ||
| <div class="kuiLocalNavRow"> | ||
| <div class="kuiLocalNavRow__section"> | ||
| <div class="kuiLocalBreadcrumbs"> | ||
| <div class="kuiLocalBreadcrumb"> | ||
| <a class="kuiLocalBreadcrumb__link" href="#"> | ||
| Discover | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="kuiLocalBreadcrumb"> | ||
| <a class="kuiLocalBreadcrumb__link" href="#"> | ||
| <span class="kuiLocalBreadcrumb__emphasis">0</span> hits | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="kuiLocalNavRow__section"> | ||
| <div class="kuiLocalMenu"> | ||
| <button class="kuiLocalMenuItem"> | ||
| New | ||
| </button> | ||
|
|
||
| <button class="kuiLocalMenuItem"> | ||
| Save | ||
| </button> | ||
|
|
||
| <button class="kuiLocalMenuItem"> | ||
| Open | ||
| </button> | ||
|
|
||
| <button class="kuiLocalMenuItem"> | ||
| <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div> | ||
| Last 5 minutes | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="kuiLocalNavRow kuiLocalNavRow--secondary"> | ||
| <div class="kuiLocalSearch"> | ||
| <div | ||
| id="expandableSearchInput" | ||
| class="kuiLocalSearchInput kuiLocalSearchInput--expandable" | ||
| contenteditable | ||
| > | ||
| </div> | ||
|
|
||
| <input | ||
| class="kuiLocalSearchInput kuiLocalSearchInput--secondary" | ||
| type="text" | ||
| placeholder="Another input" | ||
| autocomplete="off" | ||
| style="width: 150px" | ||
| > | ||
|
|
||
| <select class="kuiLocalSearchSelect"> | ||
| <option>Alligator</option> | ||
| <option>Balaclava</option> | ||
| <option>Castanets</option> | ||
| </select> | ||
|
|
||
| <button class="kuiLocalSearchButton"> | ||
| <span class="kuiIcon fa-search"></span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> |
68 changes: 68 additions & 0 deletions
68
ui_framework/doc_site/src/views/local_nav/local_nav_search_multi_line.js
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,68 @@ | ||
| /* eslint-disable */ | ||
|
|
||
| const $searchInput = $('#expandableSearchInput'); | ||
| let multiLineInputValue = '(.es(\'"this " AND " that" \', metric=sum:bytes), .es(\'foo OR bar\')).divide(.es(-foo)).multiply(100).holt(0.1,0.1,0.1,1w),<br><br>.es(*).label(\'This is everything\')'; | ||
|
|
||
| function formatMultiLineExpression(html) { | ||
| // Preserve whitespace because people can use it to organize parts of a query to make it easier | ||
| // to understand. | ||
| const encodedWhitespace = html.replace(/ /g, ' '); | ||
|
|
||
| // Replace divs with linebreaks. | ||
| const removeClosingDivs = html.replace(/<\/div>/g, ''); | ||
| const breakOnOpeningDivs = removeClosingDivs.replace(/<div>/g, '<br>'); | ||
|
|
||
| // Preserve line-breaks. | ||
| const splitOnBreaks = breakOnOpeningDivs.split(/\r?\n/g); | ||
| return splitOnBreaks.join('<br>'); | ||
| } | ||
|
|
||
| function formatSingleLineExpression(html) { | ||
| // Allow whitespace to collapse. | ||
| const encodedWhitespace = html.replace(/ /g, ' '); | ||
|
|
||
| // Replace divs with linebreaks. | ||
| const removeClosingDivs = encodedWhitespace.replace(/<\/div>/g, ''); | ||
| const breakOnOpeningDivs = removeClosingDivs.replace(/<div>/g, '\n'); | ||
|
|
||
| // Preserve line-breaks. | ||
| const splitOnBreaks = breakOnOpeningDivs.split(/<br>/g); | ||
| return splitOnBreaks.join('\n'); | ||
| } | ||
|
|
||
| // We have to sanitize pasted data into a contenteditable. | ||
| $searchInput.on('paste', e => { | ||
| e.preventDefault(); | ||
|
|
||
| // If we're using jQuery, we need to dig in and get the original event. IE puts clipboardData | ||
| // on the window. | ||
| const data = (e.originalEvent || e).clipboardData || window.clipboardData; | ||
|
|
||
| // Strip out all HTML by just getting the text. | ||
| const text = data.getData('text'); | ||
|
|
||
| const html = formatMultiLineExpression(text); | ||
|
|
||
| document.execCommand('insertHTML', false, html); | ||
| }); | ||
|
|
||
| $searchInput.on('blur', () => { | ||
| // If the search input has been scrolled, we should make sure only the first line is visible | ||
| // if it loses focus and collapses. | ||
| $searchInput.scrollTop(0); | ||
|
|
||
| // Store input value. | ||
| multiLineInputValue = formatMultiLineExpression($searchInput.html()); | ||
|
|
||
| // Display "preview mode" of input value. | ||
| const previewInput = formatSingleLineExpression($searchInput.html()); | ||
| $searchInput.text(previewInput); | ||
| }); | ||
|
|
||
| $searchInput.on('focus', () => { | ||
| // Display true input value. | ||
| $searchInput.html(multiLineInputValue); | ||
| }); | ||
|
|
||
| // Init. | ||
| $searchInput.html(formatSingleLineExpression(multiLineInputValue)); |