tk/spectre.console
1
0
Fork 0
mirror of https://github.com/nsnail/spectre.console.git synced 2025-04-16 00:42:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add Search To Emoji Page

Browse Source 
This adds a typeahead search feature
for the very large emoji table. It filters as you type to find if an emoji exists or not.

The JavaScript could be adapted to work on all tables in the future.
This commit is contained in:
Khalid Abuhakmeh 2020-10-01 15:52:52 -04:00 committed by Patrik Svensson
parent 672faa131f
commit a2f8652575
3 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/input/appendix/emojis.md
View File

@ -35,4 +35,16 @@ var rendered = Emoji.Replace(phrase);
_The images in the table below might not render correctly in your
browser for the same reasons mentioned in the `Compatibility` section._
<?# EmojiTable /?>
<div class="mb-3">
<div class="form-inline d-flex">
<i class="fas fa-search" aria-hidden="true"></i>
<input id="emoji-search"
class="form-control form-control-sm ml-3 w-75"
type="text" placeholder="Search Emojis..." autocomplete="off"
aria-label="Search Emojis">
</div>
</div>
<?# EmojiTable /?>
<script type="text/javascript" src="../assets/js/emoji-search.js"></script>

30
docs/input/assets/js/emoji-search.js Normal file
View File

@ -0,0 +1,30 @@
$(document).ready(function () {
let input = document.getElementById('emoji-search');
let table = document.getElementById('emoji-results');
input.onkeyup = function (event) {
if (event.key === "Enter") {
event.preventDefault();
event.stopPropagation();
return false;
}
let value = input.value.toUpperCase();
let rows = table.getElementsByClassName('emoji-row');
for (let i = 0; i < rows.length; i++) {
let row = rows[i];
let match =
new RegExp(value, "i").test(row.textContent) ||
value === '';
if (match) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
}
}; // keyup
}); // ready

8
docs/src/Shortcodes/EmojiTableShortcode.cs
View File

@ -18,8 +18,8 @@ namespace Docs.Shortcodes
.First().Object;
// Headers
var table = new XElement("table", new XAttribute("class", "table"));
var header = new XElement("tr", new XAttribute("class", "emoji-row"));
var table = new XElement("table", new XAttribute("class", "table"), new XAttribute("id", "emoji-results"));
var header = new XElement("tr", new XAttribute("class", "emoji-row-header"));
header.Add(new XElement("th", ""));
header.Add(new XElement("th", "Markup"));
header.Add(new XElement("th", "Constant"));
@ -28,9 +28,9 @@ namespace Docs.Shortcodes
foreach (var emoji in emojis)
{
var code = emoji.Code.Replace("U+0000", "U+").Replace("U+000", "U+");
var icon = string.Format("&#x{0};", emoji.Code.Replace("U+", string.Empty));
var icon = $"&#x{emoji.Code.Replace("U+", string.Empty)};";
var row = new XElement("tr");
var row = new XElement("tr", new XAttribute("class", "emoji-row"));
row.Add(new XElement("td", icon));
row.Add(new XElement("td", new XElement("code", $":{emoji.Id}:")));
row.Add(new XElement("td", new XElement("code", emoji.Name)));