diff options
| author | google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> | 2025-05-27 01:49:57 +0000 |
|---|---|---|
| committer | google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> | 2025-05-27 01:49:57 +0000 |
| commit | 819b25292ac794947ad4b29db7c1a57aab511df2 (patch) | |
| tree | b25ac9c23fd795c103ff04ed948768924592c92f /static/ui.html | |
| parent | 39ed5fcfe9327ab4eb81c4863d9e6353f08f6c07 (diff) | |
| download | neko-remove-jquery.tar.gz neko-remove-jquery.tar.bz2 neko-remove-jquery.zip | |
Refactor: Remove jQuery dependency and use vanilla JavaScript.remove-jquery
This commit removes jQuery and the jQuery.tmpl plugin from the frontend,
refactoring all JavaScript code in static/ui.js and relevant HTML files
to use vanilla JavaScript APIs.
Key changes include:
- Replaced jQuery selectors ($) with document.querySelector/querySelectorAll.
- Replaced jQuery DOM manipulation methods with native equivalents (classList,
style, appendChild, etc.).
- Replaced jQuery event handling (ready, on, keydown) with
addEventListener.
- Replaced $.getJSON with the fetch API.
- Replaced $.each with Array.prototype.forEach.
- Implemented a custom vanilla JS templating function (`renderTemplate`) to
replace jquery.tmpl.js functionality, including support for variable
interpolation, conditionals (if/else), and raw HTML rendering.
- Updated Backbone.js views to handle their own DOM interactions and event
delegation using vanilla JS, removing the `events` hash and using
manual event listener attachment in `render` or `attachEvents` methods.
- Removed script tags for jquery and jquery.tmpl from HTML files.
- Replaced inline jQuery calls in HTML onclick attributes with vanilla JS.
Diffstat (limited to 'static/ui.html')
| -rw-r--r-- | static/ui.html | 10 |
1 files changed, 4 insertions, 6 deletions
diff --git a/static/ui.html b/static/ui.html index 214a544..5701d47 100644 --- a/static/ui.html +++ b/static/ui.html @@ -3,8 +3,6 @@ <head> <title>neko rss mode</title> <link rel="stylesheet" href="/static/style.css" /> - <script src="/static/jquery-3.3.1.min.js"></script> - <script src="/static/jquery.tmpl.min.js"></script> <script src="/static/underscore-1.13.1.min.js"></script> <script src="/static/backbone-1.3.3.min.js"></script> <script> @@ -15,20 +13,20 @@ <base target="_blank"> </head> <body> - <h1 class="logo" onclick="$('#filters').toggleClass('hidden');">🐱</h1> + <h1 class="logo" onclick="document.querySelector('#filters').classList.toggle('hidden');">🐱</h1> <div id="filters"> <div id="controls"></div> - <h4 onclick="$('#tags').toggle();">Tags</h4> + <h4 onclick="document.querySelector('#tags').style.display = document.querySelector('#tags').style.display === 'none' ? '' : 'none';">Tags</h4> <ul id="tags" style="display: none;"> </ul> - <h4 onclick="$('#feeds').toggle();">Feeds</h4> + <h4 onclick="document.querySelector('#feeds').style.display = document.querySelector('#feeds').style.display === 'none' ? '' : 'none';">Feeds</h4> <ul id="feeds" style="display: none;"> </ul> - <h4 onclick="$('#export').toggle();">Export</h4> + <h4 onclick="document.querySelector('#export').style.display = document.querySelector('#export').style.display === 'none' ? '' : 'none';">Export</h4> <ul id="export" style="display: none;"> <li><a href="/export/opml">opml</a></li> <li><a href="/export/text">text</a></li> |