Skip to content

Commit 7a83b7b

Browse files
BeyondMagicBeyondMagic
committed
build(site): add menu for sorting and fix disclaimer page
1 parent f4435fc commit 7a83b7b

File tree

4 files changed

+25
-43
lines changed

4 files changed

+25
-43
lines changed

‎docs/assets/js/main.js

Lines changed: 15 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,11 @@ function createLightbox(id) {
5555

5656
var search = /** @type {HTMLInputElement} */document.getElementById('searchInput');
5757
search.addEventListener('keydown', function (e) {
58-
if (e.key === "Enter") sort(search.value);
58+
if (e.key === "Enter") sort(localStorage.sort, search.value);
5959
});
60-
document.getElementById('searchButton').addEventListener('click', function () {
61-
return false;
60+
var search_button = /** @type {HTMLInputElement} */document.getElementById('searchButton');
61+
search_button.addEventListener('click', function () {
62+
return sort(localStorage.sort, search.value);
6263
});
6364

6465
/* Load Content
@@ -72,44 +73,25 @@ function createLightbox(id) {
7273
if (!localStorage.sort) localStorage.sort = 'latest';
7374

7475
/*
75-
* Make the sort icon a button.
76+
* Add event to sort when an option is chosen..
7677
*/
77-
var sort_trigger = /** @type {HTMLElement} */document.getElementById('js-sortSwitcher');
78-
sort_trigger.addEventListener('click', function () {
79-
return toggle_sorting();
78+
var sort_menu = /** @type {HTMLSelectElement} */document.getElementById('js-sort-menu');
79+
sort_menu.addEventListener('change', function () {
80+
var name = /** @type {string} */sort_menu.selectedOptions[0].getAttribute('name');
81+
sort(name);
8082
});
81-
sort();
82-
83-
/**
84-
* Toggle the sorting type of the themes.
85-
**/
86-
function toggle_sorting() {
87-
switch (localStorage.sort) {
88-
case 'latest':
89-
localStorage.sort = 'updated';
90-
break;
91-
case 'updated':
92-
localStorage.sort = 'stars';
93-
break;
94-
case 'stars':
95-
localStorage.sort = 'random';
96-
break;
97-
case 'random':
98-
localStorage.sort = 'oldest';
99-
break;
100-
default:
101-
localStorage.sort = 'latest';
102-
}
103-
return sort();
104-
}
83+
sort(localStorage.sort);
84+
var current_option = sort_menu.options.namedItem(localStorage.sort);
85+
if (current_option) current_option.selected = true;
10586

10687
/**
10788
* Toggle the sorting type of the themes.
10889
*
90+
* @param {string} kind How to sort the themes.
10991
* @param {string=} filter Term to filter the themes.
11092
**/
111-
function sort(filter) {
112-
sort_trigger.title = "\"".concat(localStorage.sort, "\"");
93+
function sort(kind, filter) {
94+
localStorage.sort = kind;
11395

11496
// Remove all themes cards from the page.
11597
var cards_container = document.getElementById('themes_container');

‎docs/assets/js/main.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/disclaimer.html

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,7 @@
1212
<body>
1313
<header id="main_header">
1414
<h3 class="header-branding">FirefoxCSS Store</h3>
15-
<nav id="main_nav"><a href="index.html">Theme List</a><a id="js-themeSwitcher" href="#"><i class="fas fa-moon"></i></a><a id="js-sortSwitcher" href="#"><i class="fas fa-sort"></i></a>
16-
<div class="searchform" method="get">
17-
<div class="inputgroup">
18-
<input class="searchinput" id="searchInput" type="text" placeholder="Search">
19-
<button class="btn-submit searchsubmit" id="searchButton" type="submit"><i class="fas fa-search"></i></button>
20-
</div>
21-
</div>
22-
</nav>
15+
<nav id="main_nav"><a href="index.html">Theme List</a><a id="js-themeSwitcher" href="#"><i class="fas fa-moon"></i></a></nav>
2316
</header>
2417
<main id="main_content">
2518
<div class="disclaimer"><h1>Disclaimer</h1>

‎docs/index.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,14 @@
1212
<body>
1313
<header id="main_header">
1414
<h3 class="header-branding">FirefoxCSS Store</h3>
15-
<nav id="main_nav"><a href="index.html">Theme List</a><a id="js-themeSwitcher" href="#"><i class="fas fa-moon"></i></a><a id="js-sortSwitcher" href="#"><i class="fas fa-sort"></i></a>
15+
<nav id="main_nav"><a href="index.html">Theme List</a><a id="js-themeSwitcher" href="#"><i class="fas fa-moon"></i></a>
16+
<select id="js-sort-menu">
17+
<option name="updated">Updated</option>
18+
<option name="stars">Stars</option>
19+
<option name="latest">Latest</option>
20+
<option name="oldest">Oldest</option>
21+
<option name="random">Random</option>
22+
</select>
1623
<div class="searchform" method="get">
1724
<div class="inputgroup">
1825
<input class="searchinput" id="searchInput" type="text" placeholder="Search">

0 commit comments

Comments
 (0)