From e2d1c987b544e538f2dcdfe7ba897b792b1b7711 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Mon, 27 Dec 2021 12:41:27 -0800 Subject: [PATCH 01/10] Adds autocomplete scrip --- bookwyrm/static/js/autocomplete.js | 104 +++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 bookwyrm/static/js/autocomplete.js diff --git a/bookwyrm/static/js/autocomplete.js b/bookwyrm/static/js/autocomplete.js new file mode 100644 index 000000000..f75948078 --- /dev/null +++ b/bookwyrm/static/js/autocomplete.js @@ -0,0 +1,104 @@ +(function() { + 'use strict'; + + /** + * Suggest a completion as a user types + * + * Use `data-autocomplete=""`on the input field. + * specifying the trie to be used for autocomplete + * + * @example + * + * @param {Event} event + * @return {undefined} + */ + function autocomplete(event) { + const input = event.target; + + // Get suggestions + let suggestions = getSuggestions(input.value, mimetypeTrie); + + const boxId = input.id + "_suggestions"; + + // Create suggestion box, if needed + let suggestionsBox = document.getElementById(boxId); + + if (!suggestionsBox) { + suggestionsBox = document.createElement("ul"); + suggestionsBox.id = boxId; + suggestionsBox.classList.add("autocomplete-suggestions", "box"); + + input.insertAdjacentElement("afterend", suggestionsBox); + } + + // Clear existing suggestions + suggestionsBox.innerHTML = ""; + + // Populate suggestions box + suggestions.forEach(suggestion => { + const suggestionItem = document.createElement("li"); + + suggestionItem.textContent = suggestion; + suggestionsBox.appendChild(suggestionItem); + }); + } + + function getSuggestions(input, trie) { + // Follow the trie through the provided input + input.split("").forEach(letter => { + trie = trie[letter]; + + if (!trie) { + return; + } + }); + + if (!trie) { + return []; + } + + return searchTrie(input, trie); + } + + function searchTrie(output, trie) { + const options = Object.keys(trie); + + if (!options.length) { + return [output]; + } + + return options.map(option => { + const newTrie = trie[option]; + + if (!newTrie) { + return; + } + + return searchTrie(output + option, trie[option]); + }).reduce((prev, next) => prev.concat(next)); + } + + document + .querySelectorAll('[data-autocomplete]') + .forEach(input => { + input.addEventListener('input', autocomplete); + }); +})(); + +const mimetypeTrie = { + "p": { + "d": { + "f": { + "": {}, + "x": {}, + }, + }, + "n": { + "g": {} + }, + } +}; + From 3d07618b5fad61b44cad8b9a89055fe6ae45e9ce Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Mon, 27 Dec 2021 12:42:11 -0800 Subject: [PATCH 02/10] Styling for autocomplete box --- bookwyrm/static/css/bookwyrm.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index f385e6295..c98355c3e 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -410,6 +410,13 @@ summary::marker { right: 1em; } +/** Autocomplete suggestions + ******************************************************************************/ +.autocomplete-suggestions { + position: fixed; + z-index: 1; +} + /** Tooltips ******************************************************************************/ From 76694bb89127bae4aafaf422c2b8c407bb80f55d Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Mon, 27 Dec 2021 12:42:24 -0800 Subject: [PATCH 03/10] Demo for file type --- bookwyrm/templates/book/file_link_modal.html | 3 ++- bookwyrm/templates/layout.html | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/bookwyrm/templates/book/file_link_modal.html b/bookwyrm/templates/book/file_link_modal.html index 6896fba81..87bda1a15 100644 --- a/bookwyrm/templates/book/file_link_modal.html +++ b/bookwyrm/templates/book/file_link_modal.html @@ -1,5 +1,6 @@ {% extends 'components/modal.html' %} {% load i18n %} +{% load static %} {% block modal-title %} {% trans "Add file link" %} @@ -26,7 +27,7 @@
- + {% include 'snippets/form_errors.html' with errors_list=file_link_form.filetype.errors id="desc_filetype" %}
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html index 25aaf1b6b..e41f661fe 100644 --- a/bookwyrm/templates/layout.html +++ b/bookwyrm/templates/layout.html @@ -265,6 +265,7 @@ + {% block scripts %}{% endblock %} From 274631815281218bda31c322af70457eff1aac34 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Mon, 10 Jan 2022 15:47:40 -0800 Subject: [PATCH 04/10] Uses datalist for autocomplete suggestions --- bookwyrm/static/css/bookwyrm.css | 7 ------- bookwyrm/static/js/autocomplete.js | 12 ++---------- bookwyrm/templates/book/file_link_modal.html | 3 ++- 3 files changed, 4 insertions(+), 18 deletions(-) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index 72d39a7ec..92ddd294d 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -606,13 +606,6 @@ details[open].details-panel summary .details-close { right: 1em; } -/** Autocomplete suggestions - ******************************************************************************/ -.autocomplete-suggestions { - position: fixed; - z-index: 1; -} - /** Tooltips ******************************************************************************/ diff --git a/bookwyrm/static/js/autocomplete.js b/bookwyrm/static/js/autocomplete.js index f75948078..df5c890f7 100644 --- a/bookwyrm/static/js/autocomplete.js +++ b/bookwyrm/static/js/autocomplete.js @@ -21,25 +21,17 @@ // Get suggestions let suggestions = getSuggestions(input.value, mimetypeTrie); - const boxId = input.id + "_suggestions"; + const boxId = input.getAttribute("list"); // Create suggestion box, if needed let suggestionsBox = document.getElementById(boxId); - if (!suggestionsBox) { - suggestionsBox = document.createElement("ul"); - suggestionsBox.id = boxId; - suggestionsBox.classList.add("autocomplete-suggestions", "box"); - - input.insertAdjacentElement("afterend", suggestionsBox); - } - // Clear existing suggestions suggestionsBox.innerHTML = ""; // Populate suggestions box suggestions.forEach(suggestion => { - const suggestionItem = document.createElement("li"); + const suggestionItem = document.createElement("option"); suggestionItem.textContent = suggestion; suggestionsBox.appendChild(suggestionItem); diff --git a/bookwyrm/templates/book/file_link_modal.html b/bookwyrm/templates/book/file_link_modal.html index 87d358174..48921bb89 100644 --- a/bookwyrm/templates/book/file_link_modal.html +++ b/bookwyrm/templates/book/file_link_modal.html @@ -27,7 +27,8 @@
- + + {% include 'snippets/form_errors.html' with errors_list=file_link_form.filetype.errors id="desc_filetype" %}
From f6d6285009dde5eaf8bcd9766271773c48627df7 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Mon, 10 Jan 2022 16:44:43 -0800 Subject: [PATCH 05/10] Updates trie function --- bookwyrm/static/js/autocomplete.js | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/bookwyrm/static/js/autocomplete.js b/bookwyrm/static/js/autocomplete.js index df5c890f7..b9877b924 100644 --- a/bookwyrm/static/js/autocomplete.js +++ b/bookwyrm/static/js/autocomplete.js @@ -52,24 +52,22 @@ return []; } - return searchTrie(input, trie); + return searchTrie(trie); } - function searchTrie(output, trie) { - const options = Object.keys(trie); + function searchTrie(trie) { + const options = Object.values(trie); if (!options.length) { - return [output]; + return; + } else if (typeof options[0] == 'string') { + return [options[0]]; } return options.map(option => { - const newTrie = trie[option]; + const newTrie = option; - if (!newTrie) { - return; - } - - return searchTrie(output + option, trie[option]); + return searchTrie(newTrie); }).reduce((prev, next) => prev.concat(next)); } @@ -83,14 +81,11 @@ const mimetypeTrie = { "p": { "d": { - "f": { - "": {}, - "x": {}, - }, + "f": "PDF", }, "n": { - "g": {} + "g": "PNG", }, - } + }, }; From 4202498442e582f85c62e352219ad6ce8a33a753 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Mon, 10 Jan 2022 16:53:30 -0800 Subject: [PATCH 06/10] Fixes one option trie case --- bookwyrm/static/js/autocomplete.js | 35 ++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/bookwyrm/static/js/autocomplete.js b/bookwyrm/static/js/autocomplete.js index b9877b924..d2d66b4a6 100644 --- a/bookwyrm/static/js/autocomplete.js +++ b/bookwyrm/static/js/autocomplete.js @@ -58,15 +58,17 @@ function searchTrie(trie) { const options = Object.values(trie); - if (!options.length) { - return; - } else if (typeof options[0] == 'string') { - return [options[0]]; + if (typeof trie == 'string') { + return [trie]; } return options.map(option => { const newTrie = option; + if (typeof newTrie == 'string') { + return [newTrie]; + } + return searchTrie(newTrie); }).reduce((prev, next) => prev.concat(next)); } @@ -79,13 +81,32 @@ })(); const mimetypeTrie = { + "a": { + "a": { + "c": "AAC", + }, + "z": { + "w": "AZW", + } + }, + "d": "Daisy", + "e": "ePub", + "f": "FLAC", + "h": "HTML", + "m": { + "4": { + "a": "M4A", + "b": "M4B", + }, + "o": "MOBI", + "p": "MP3", + }, + "o": "OGG", "p": { "d": { "f": "PDF", }, - "n": { - "g": "PNG", - }, + "l": "Plaintext", }, }; From 60761b19ba94ae153c3e90fbd27760c9171bc692 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Mon, 10 Jan 2022 16:55:30 -0800 Subject: [PATCH 07/10] Run prettier --- bookwyrm/static/js/autocomplete.js | 77 +++++++++++++++--------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/bookwyrm/static/js/autocomplete.js b/bookwyrm/static/js/autocomplete.js index d2d66b4a6..f8a982358 100644 --- a/bookwyrm/static/js/autocomplete.js +++ b/bookwyrm/static/js/autocomplete.js @@ -1,5 +1,5 @@ -(function() { - 'use strict'; +(function () { + "use strict"; /** * Suggest a completion as a user types @@ -30,7 +30,7 @@ suggestionsBox.innerHTML = ""; // Populate suggestions box - suggestions.forEach(suggestion => { + suggestions.forEach((suggestion) => { const suggestionItem = document.createElement("option"); suggestionItem.textContent = suggestion; @@ -40,7 +40,7 @@ function getSuggestions(input, trie) { // Follow the trie through the provided input - input.split("").forEach(letter => { + input.split("").forEach((letter) => { trie = trie[letter]; if (!trie) { @@ -58,55 +58,54 @@ function searchTrie(trie) { const options = Object.values(trie); - if (typeof trie == 'string') { + if (typeof trie == "string") { return [trie]; } - return options.map(option => { - const newTrie = option; + return options + .map((option) => { + const newTrie = option; - if (typeof newTrie == 'string') { - return [newTrie]; - } + if (typeof newTrie == "string") { + return [newTrie]; + } - return searchTrie(newTrie); - }).reduce((prev, next) => prev.concat(next)); + return searchTrie(newTrie); + }) + .reduce((prev, next) => prev.concat(next)); } - document - .querySelectorAll('[data-autocomplete]') - .forEach(input => { - input.addEventListener('input', autocomplete); - }); + document.querySelectorAll("[data-autocomplete]").forEach((input) => { + input.addEventListener("input", autocomplete); + }); })(); const mimetypeTrie = { - "a": { - "a": { - "c": "AAC", + a: { + a: { + c: "AAC", + }, + z: { + w: "AZW", }, - "z": { - "w": "AZW", - } }, - "d": "Daisy", - "e": "ePub", - "f": "FLAC", - "h": "HTML", - "m": { - "4": { - "a": "M4A", - "b": "M4B", + d: "Daisy", + e: "ePub", + f: "FLAC", + h: "HTML", + m: { + 4: { + a: "M4A", + b: "M4B", }, - "o": "MOBI", - "p": "MP3", + o: "MOBI", + p: "MP3", }, - "o": "OGG", - "p": { - "d": { - "f": "PDF", + o: "OGG", + p: { + d: { + f: "PDF", }, - "l": "Plaintext", + l: "Plaintext", }, }; - From 34635b0c3fad836df0d044aa3ad777f4e4e41d16 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Wed, 12 Jan 2022 17:02:30 -0800 Subject: [PATCH 08/10] Select trie based on data attr --- bookwyrm/static/js/autocomplete.js | 101 +++++++++++++----- .../book/file_links/add_link_modal.html | 13 ++- 2 files changed, 89 insertions(+), 25 deletions(-) diff --git a/bookwyrm/static/js/autocomplete.js b/bookwyrm/static/js/autocomplete.js index f8a982358..bb15f6220 100644 --- a/bookwyrm/static/js/autocomplete.js +++ b/bookwyrm/static/js/autocomplete.js @@ -19,7 +19,9 @@ const input = event.target; // Get suggestions - let suggestions = getSuggestions(input.value, mimetypeTrie); + let trie = tries[input.getAttribute("data-autocomplete")]; + + let suggestions = getSuggestions(input.value, trie); const boxId = input.getAttribute("list"); @@ -80,32 +82,83 @@ }); })(); -const mimetypeTrie = { - a: { +const tries = {"mimetype": { a: { - c: "AAC", + a: { + c: "AAC", + }, + z: { + w: "AZW", + }, }, - z: { - w: "AZW", - }, - }, - d: "Daisy", - e: "ePub", - f: "FLAC", - h: "HTML", - m: { - 4: { - a: "M4A", - b: "M4B", - }, - o: "MOBI", - p: "MP3", - }, - o: "OGG", - p: { d: { - f: "PDF", + a: { + i: { + s: { + y: "Daisy", + }, + }, + }, + }, + e: { + p: { + u: { + b: "ePub", + }, + }, + }, + f: { + l: { + a: { + c: "FLAC", + }, + }, + }, + h: { + t: { + m: { + l: "HTML", + }, + }, + }, + m: { + 4: { + a: "M4A", + b: "M4B", + }, + o: { + b: { + i: "MOBI", + }, + }, + p: { + 3: "MP3", + }, + }, + o: { + g: { + g: "OGG", + }, + }, + p: { + d: { + f: "PDF", + }, + l: { + a: { + i: { + n: { + t: { + e: { + x: { + t: "Plaintext", + }, + }, + }, + }, + }, + }, + }, }, - l: "Plaintext", }, }; diff --git a/bookwyrm/templates/book/file_links/add_link_modal.html b/bookwyrm/templates/book/file_links/add_link_modal.html index 2965142bd..dfc222ee9 100644 --- a/bookwyrm/templates/book/file_links/add_link_modal.html +++ b/bookwyrm/templates/book/file_links/add_link_modal.html @@ -27,7 +27,18 @@
- + {% include 'snippets/form_errors.html' with errors_list=file_link_form.filetype.errors id="desc_filetype" %}
From 80efd5888165dc2ec733e68f8d3cd2d04dddc34a Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Wed, 12 Jan 2022 17:06:36 -0800 Subject: [PATCH 09/10] Javascript file in correct template --- bookwyrm/templates/book/book.html | 1 + bookwyrm/templates/book/file_links/file_link_page.html | 5 +++++ bookwyrm/templates/layout.html | 1 - 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html index c8c78e0e9..f6d9929dd 100644 --- a/bookwyrm/templates/book/book.html +++ b/bookwyrm/templates/book/book.html @@ -386,4 +386,5 @@ {% block scripts %} + {% endblock %} diff --git a/bookwyrm/templates/book/file_links/file_link_page.html b/bookwyrm/templates/book/file_links/file_link_page.html index 902057af2..00efe5089 100644 --- a/bookwyrm/templates/book/file_links/file_link_page.html +++ b/bookwyrm/templates/book/file_links/file_link_page.html @@ -1,5 +1,6 @@ {% extends 'layout.html' %} {% load i18n %} +{% load static %} {% block title %} {% trans "File Links" %} @@ -8,3 +9,7 @@ {% block content %} {% include "book/file_links/add_link_modal.html" with book=book active=True static=True id="file-link" %} {% endblock %} + +{% block scripts %} + +{% endblock %} diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html index fd9e43b86..43e8eb227 100644 --- a/bookwyrm/templates/layout.html +++ b/bookwyrm/templates/layout.html @@ -264,7 +264,6 @@ - {% block scripts %}{% endblock %} From fc06f0cdd122c7ce003bb85b8e42b68a76b6a112 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Wed, 12 Jan 2022 17:08:10 -0800 Subject: [PATCH 10/10] Avoid console error --- bookwyrm/static/js/autocomplete.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bookwyrm/static/js/autocomplete.js b/bookwyrm/static/js/autocomplete.js index bb15f6220..0ba3e2172 100644 --- a/bookwyrm/static/js/autocomplete.js +++ b/bookwyrm/static/js/autocomplete.js @@ -43,11 +43,11 @@ function getSuggestions(input, trie) { // Follow the trie through the provided input input.split("").forEach((letter) => { - trie = trie[letter]; - if (!trie) { return; } + + trie = trie[letter]; }); if (!trie) {