From e0947708c96c5f6f8e030eaa2f2116b34fc721d0 Mon Sep 17 00:00:00 2001 From: Khalid Abuhakmeh Date: Fri, 2 Oct 2020 13:19:00 -0400 Subject: [PATCH] Generalized Search Generalized the search to work with any table with some basic classes and some updated JavaScript, we can now search colors and emojis. --- docs/input/appendix/colors.md | 17 ++++++++++- docs/input/appendix/emojis.md | 21 +++++++------ docs/input/assets/js/emoji-search.js | 30 ------------------- docs/input/assets/js/table-search.js | 35 ++++++++++++++++++++++ docs/src/Shortcodes/ColorTableShortcode.cs | 8 ++--- docs/src/Shortcodes/EmojiTableShortcode.cs | 2 +- 6 files changed, 68 insertions(+), 45 deletions(-) delete mode 100644 docs/input/assets/js/emoji-search.js create mode 100644 docs/input/assets/js/table-search.js diff --git a/docs/input/appendix/colors.md b/docs/input/appendix/colors.md index 6fc2ca0..ff39afe 100644 --- a/docs/input/appendix/colors.md +++ b/docs/input/appendix/colors.md @@ -13,4 +13,19 @@ in markup text such as `AnsiConsole.Markup("[maroon on blue]Hello[/]")`. # Standard colors - \ No newline at end of file +
+
+ + + +
+ +
+ + + + \ No newline at end of file diff --git a/docs/input/appendix/emojis.md b/docs/input/appendix/emojis.md index 364ffc9..f650792 100644 --- a/docs/input/appendix/emojis.md +++ b/docs/input/appendix/emojis.md @@ -35,16 +35,19 @@ 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._ -
-
- - -
+
+
+ + + +
+
- \ No newline at end of file + \ No newline at end of file diff --git a/docs/input/assets/js/emoji-search.js b/docs/input/assets/js/emoji-search.js deleted file mode 100644 index f0b82d3..0000000 --- a/docs/input/assets/js/emoji-search.js +++ /dev/null @@ -1,30 +0,0 @@ -$(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 \ No newline at end of file diff --git a/docs/input/assets/js/table-search.js b/docs/input/assets/js/table-search.js new file mode 100644 index 0000000..e60256d --- /dev/null +++ b/docs/input/assets/js/table-search.js @@ -0,0 +1,35 @@ +$(document).ready(function () { + + $('.filter').each(function () { + let input = this; + let table = document.getElementById(input.dataset.table); + + input.onkeyup = function (event) { + + if (event.key === "Enter") { + event.preventDefault(); + event.stopPropagation(); + return false; + } + + let value = input.value.toUpperCase(); + let rows = table.getElementsByClassName('search-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 \ No newline at end of file diff --git a/docs/src/Shortcodes/ColorTableShortcode.cs b/docs/src/Shortcodes/ColorTableShortcode.cs index 865abc3..7348df0 100644 --- a/docs/src/Shortcodes/ColorTableShortcode.cs +++ b/docs/src/Shortcodes/ColorTableShortcode.cs @@ -21,7 +21,7 @@ namespace Docs.Shortcodes .First().Object; // Headers - var table = new XElement("table", new XAttribute("class", "table")); + var table = new XElement("table", new XAttribute("class", "table"), new XAttribute("id", "color-results")); var header = new XElement("tr", new XAttribute("class", "color-row")); header.Add(new XElement("th", "")); header.Add(new XElement("th", "#")); @@ -33,8 +33,8 @@ namespace Docs.Shortcodes foreach (var color in colors) { - var rep = new XElement("td", - new XElement("span", + var rep = new XElement("td", + new XElement("span", new XAttribute("class", "color-representation"), new XAttribute("style", $"background-color:{color.Hex};"))); var name = new XElement("td", new XElement("code", color.Number.ToString())); @@ -44,7 +44,7 @@ namespace Docs.Shortcodes var clr = new XElement("td", new XElement("code", color.ClrName)); // Create row - var row = new XElement("tr"); + var row = new XElement("tr", new XAttribute("class", "search-row")); row.Add(rep); row.Add(name); row.Add(number); diff --git a/docs/src/Shortcodes/EmojiTableShortcode.cs b/docs/src/Shortcodes/EmojiTableShortcode.cs index bc87260..9b77ef1 100644 --- a/docs/src/Shortcodes/EmojiTableShortcode.cs +++ b/docs/src/Shortcodes/EmojiTableShortcode.cs @@ -30,7 +30,7 @@ namespace Docs.Shortcodes var code = emoji.Code.Replace("U+0000", "U+").Replace("U+000", "U+"); var icon = $"&#x{emoji.Code.Replace("U+", string.Empty)};"; - var row = new XElement("tr", new XAttribute("class", "emoji-row")); + var row = new XElement("tr", new XAttribute("class", "search-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)));