Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions src/livecodes/html/templates.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
<li>
<a href="#" data-target="templates-user" data-i18n="templates.user.heading">My Templates</a>
</li>
<li class="templates-search">
<label for="templates-search-input" class="visually-hidden" data-i18n="templates.search.label">Search templates</label>
<input id="templates-search-input" type="search" placeholder="Filter languages..." aria-label="Filter templates by language" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's change "Filter languages..." to "Search templates...". And then we can search by title, languages and others (e.g. tags).

Also, after you finish your edits, please run npm run i18n-export to regenerate the i18n json and fix this build error.

</li>
</ul>

<div id="templates-starter" class="tab-content active">
Expand All @@ -28,3 +32,24 @@
</div>
</div>
</div>

<!-- Inline: emit a "templates:filter" event with the current query so other scripts can perform filtering -->
<script>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can move the logic to src/livecodes/UI/templates.ts.
Think of the html here as the "view" while the logic in templates.ts as the "controller" in MVC pattern.

Also if you do that, you can directly manipulate DOM elements e.g. add display: none; without having to emit events.

(function () {
var input = document.getElementById('templates-search-input');
if (!input) return;

var emit = function (value) {
var ev = new CustomEvent('templates:filter', { detail: { query: value } });
document.getElementById('templates-container').dispatchEvent(ev);
};

var timeout = null;
input.addEventListener('input', function (e) {
var val = e.target.value || '';
// debounce to avoid excessive events while typing
clearTimeout(timeout);
timeout = setTimeout(function () { emit(val.trim()); }, 150);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a debounce function here that you can re-use.

});
})();
</script>
Loading