[aur-dev] [PATCH] Show number of selected packages on search page
Fixes FS#45379. Signed-off-by: Johannes Löthberg <johannes@kyriasis.com> --- This is an initial version, so might not be perfect. Note that since we have to do it through JS we have to use strings like "1 package(s) selected" instead of properly gettext'ed ones. web/html/packages.php | 11 +++++++++++ web/template/pkg_search_results.php | 6 +++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/web/html/packages.php b/web/html/packages.php index 75a574e..b4c5c39 100644 --- a/web/html/packages.php +++ b/web/html/packages.php @@ -67,10 +67,21 @@ function collapseDependsList(list) { }); } +function checkboxes() { + document.getElementById("pkglist-checked-count").innerHTML = document.querySelectorAll('input[type="checkbox"]:checked').length; +} + $(document).ready(function() { collapseDependsList("#pkgdepslist"); collapseDependsList("#pkgreqslist"); collapseDependsList("#pkgsrcslist"); + checkboxes(); // Set initial value + + var elements = document.getElementsByClassName('package-checkbox'); + + for (var i = 0, len = elements.length; i < len; i++) { + elements[i].onchange = checkboxes; + } }); </script> diff --git a/web/template/pkg_search_results.php b/web/template/pkg_search_results.php index cce533c..b40c87d 100644 --- a/web/template/pkg_search_results.php +++ b/web/template/pkg_search_results.php @@ -9,6 +9,8 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + <?= __('%s%s%s package(s) selected.', + '<span id="pkglist-checked-count">', '0', '</span>') ?> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav"> @@ -49,7 +51,7 @@ if (!$result): ?> <?php while (list($indx, $row) = each($searchresults)): ?> <tr class="<?= ($indx % 2 == 0) ? 'odd' : 'even' ?>"> <?php if ($SID): ?> - <td><input type="checkbox" name="IDs[<?= $row["PackageBaseID"] ?>]" value="1" /></td> + <td><input class="package-checkbox" type="checkbox" name="IDs[<?= $row["PackageBaseID"] ?>]" value="1" /></td> <?php endif; ?> <td><a href="<?= htmlspecialchars(get_pkg_uri($row["Name"]), ENT_QUOTES); ?>"><?= htmlspecialchars($row["Name"]) ?></a></td> <td<?php if ($row["OutOfDateTS"]): ?> class="flagged"<?php endif; ?>><?= htmlspecialchars($row["Version"]) ?></td> @@ -89,6 +91,8 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + <?= __('%s%s%s package(s) selected.', + '<span id="pkglist-checked-count">', '0', '</span>') ?> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav"> -- 2.4.4
Am 28.06.2015 um 21:22 schrieb Johannes Löthberg:
+function checkboxes() { + document.getElementById("pkglist-checked-count").innerHTML = document.querySelectorAll('input[type="checkbox"]:checked').length; +} + $(document).ready(function() { collapseDependsList("#pkgdepslist"); collapseDependsList("#pkgreqslist"); collapseDependsList("#pkgsrcslist"); + checkboxes(); // Set initial value + + var elements = document.getElementsByClassName('package-checkbox'); + + for (var i = 0, len = elements.length; i < len; i++) { + elements[i].onchange = checkboxes; + }
It should be easier to just use the already active jQuery. See the first example here: https://api.jquery.com/checked-selector/ That said, $(".package-checkbox:checked").length should do it. best regards, carstene1ns
On 30/06, carstene1ns wrote:
Am 28.06.2015 um 21:22 schrieb Johannes Löthberg:
+function checkboxes() { + document.getElementById("pkglist-checked-count").innerHTML = document.querySelectorAll('input[type="checkbox"]:checked').length; +} + $(document).ready(function() { collapseDependsList("#pkgdepslist"); collapseDependsList("#pkgreqslist"); collapseDependsList("#pkgsrcslist"); + checkboxes(); // Set initial value + + var elements = document.getElementsByClassName('package-checkbox'); + + for (var i = 0, len = elements.length; i < len; i++) { + elements[i].onchange = checkboxes; + }
It should be easier to just use the already active jQuery. See the first example here: https://api.jquery.com/checked-selector/
That said, $(".package-checkbox:checked").length should do it.
Yeah, I wrote the thing before I notice that the AUR already used jquery, then didn't feel like switching right away, so wanted some comments first. But I'll switch. -- Sincerely, Johannes Löthberg PGP Key ID: 0x50FB9B273A9D0BB5 https://theos.kyriasis.com/~kyrias/
* Johannes Löthberg <johannes@kyriasis.com> (Sun, 28 Jun 2015 21:22:05 +0200):
+function checkboxes() { + document.getElementById("pkglist-checked-count").innerHTML = document.querySelectorAll('input[type="checkbox"]:checked').length; +} + $(document).ready(function() { collapseDependsList("#pkgdepslist"); collapseDependsList("#pkgreqslist"); collapseDependsList("#pkgsrcslist"); + checkboxes(); // Set initial value + + var elements = document.getElementsByClassName('package-checkbox'); + + for (var i = 0, len = elements.length; i < len; i++) { + elements[i].onchange = checkboxes; + } });
What Carsten said; you know you can also declare a function with $(document).ready? That way, it isn't available outside of the function and you don't clutter the global namespace, for what it's worth.
Am 28.06.2015 um 21:22 schrieb Johannes Löthberg:
Note that since we have to do it through JS we have to use strings like "1 package(s) selected" instead of properly gettext'ed ones.
What about using the translated string with a placeholder from JS and replace it? Then use an empty <span> element here:
diff --git a/web/template/pkg_search_results.php b/web/template/pkg_search_results.php index cce533c..b40c87d 100644 --- a/web/template/pkg_search_results.php +++ b/web/template/pkg_search_results.php @@ -9,6 +9,8 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + <?= __('%s%s%s package(s) selected.', + '<span id="pkglist-checked-count">', '0', '</span>') ?> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav"> and here: @@ -89,6 +91,8 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + <?= __('%s%s%s package(s) selected.', + '<span id="pkglist-checked-count">', '0', '</span>') ?> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav">
var str = <?= __('%NUMBER% package(s) selected.) ?> var res = str.replace("%NUMBER%", count.toStr()); $("%pkglist-checked-count").text(res); (code is untested) This approach has the benefit that users without activated javascript do not see the string at all instead of it not changing, which is a better user experience. best regards, carstene1ns
On 01/07, carstene1ns wrote:
Am 28.06.2015 um 21:22 schrieb Johannes Löthberg:
Note that since we have to do it through JS we have to use strings like "1 package(s) selected" instead of properly gettext'ed ones.
What about using the translated string with a placeholder from JS and replace it? Then use an empty <span> element here:
diff --git a/web/template/pkg_search_results.php b/web/template/pkg_search_results.php index cce533c..b40c87d 100644 --- a/web/template/pkg_search_results.php +++ b/web/template/pkg_search_results.php @@ -9,6 +9,8 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + <?= __('%s%s%s package(s) selected.', + '<span id="pkglist-checked-count">', '0', '</span>') ?> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav"> and here: @@ -89,6 +91,8 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + <?= __('%s%s%s package(s) selected.', + '<span id="pkglist-checked-count">', '0', '</span>') ?> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav">
var str = <?= __('%NUMBER% package(s) selected.) ?> var res = str.replace("%NUMBER%", count.toStr()); $("%pkglist-checked-count").text(res);
(code is untested)
This approach has the benefit that users without activated javascript do not see the string at all instead of it not changing, which is a better user experience.
That is a good idea, thanks. -- Sincerely, Johannes Löthberg PGP Key ID: 0x50FB9B273A9D0BB5 https://theos.kyriasis.com/~kyrias/
Signed-off-by: Johannes Löthberg <johannes@kyriasis.com> --- web/html/packages.php | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/web/html/packages.php b/web/html/packages.php index 75a574e..bf3daf8 100644 --- a/web/html/packages.php +++ b/web/html/packages.php @@ -46,31 +46,31 @@ html_header($title, $details); <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> function collapseDependsList(list) { - list = $(list); - // Hide everything past a given limit. Don't do anything if we don't have - // enough items, or the link already exists. - var limit = 20, - linkid = list.attr('id') + 'link', - items = list.find('li').slice(limit); - if (items.length <= 1 || $('#' + linkid).length > 0) { - return; - } - items.hide(); - list.after('<p><a id="' + linkid + '" href="#">Show More…</a></p>'); + list = $(list); + // Hide everything past a given limit. Don't do anything if we don't have + // enough items, or the link already exists. + var limit = 20, + linkid = list.attr('id') + 'link', + items = list.find('li').slice(limit); + if (items.length <= 1 || $('#' + linkid).length > 0) { + return; + } + items.hide(); + list.after('<p><a id="' + linkid + '" href="#">Show More…</a></p>'); - // add link and wire it up to show the hidden items - $('#' + linkid).click(function(event) { - event.preventDefault(); - list.find('li').show(); - // remove the full <p/> node from the DOM - $(this).parent().remove(); - }); + // add link and wire it up to show the hidden items + $('#' + linkid).click(function(event) { + event.preventDefault(); + list.find('li').show(); + // remove the full <p/> node from the DOM + $(this).parent().remove(); + }); } $(document).ready(function() { - collapseDependsList("#pkgdepslist"); - collapseDependsList("#pkgreqslist"); - collapseDependsList("#pkgsrcslist"); + collapseDependsList("#pkgdepslist"); + collapseDependsList("#pkgreqslist"); + collapseDependsList("#pkgsrcslist"); }); </script> -- 2.4.5
Fixes FS#45379. Signed-off-by: Johannes Löthberg <johannes@kyriasis.com> --- Changes since v1: * Use jQuery * Allow for better localization * Without JS there won't be any counter listed web/html/packages.php | 18 ++++++++++++++++++ web/template/pkg_search_results.php | 5 ++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/web/html/packages.php b/web/html/packages.php index bf3daf8..9d4b34b 100644 --- a/web/html/packages.php +++ b/web/html/packages.php @@ -71,6 +71,24 @@ $(document).ready(function() { collapseDependsList("#pkgdepslist"); collapseDependsList("#pkgreqslist"); collapseDependsList("#pkgsrcslist"); + + function update_checked_count() { + var one_pkg = '<?= __("1 package selected") ?>'; + var pkgs = '<?= __("%s packages selected") ?>'; + + var count = $('.package-checkbox:checked').length; + if (count === 1) { + var res = one_pkg; + } else { + var res = pkgs; + } + $('#pkglist-checked-count').text(res.replace('%s', count.toString())); + } + + var elements = $('.package-checkbox'); + for (var i = 0, len = elements.length; i < len; i++) { + elements[i].onchange = update_checked_count; + } }); </script> diff --git a/web/template/pkg_search_results.php b/web/template/pkg_search_results.php index cce533c..4d99dd6 100644 --- a/web/template/pkg_search_results.php +++ b/web/template/pkg_search_results.php @@ -9,6 +9,7 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + <span id="pkglist-checked-count"></span> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav"> @@ -49,7 +50,7 @@ if (!$result): ?> <?php while (list($indx, $row) = each($searchresults)): ?> <tr class="<?= ($indx % 2 == 0) ? 'odd' : 'even' ?>"> <?php if ($SID): ?> - <td><input type="checkbox" name="IDs[<?= $row["PackageBaseID"] ?>]" value="1" /></td> + <td><input class="package-checkbox" type="checkbox" name="IDs[<?= $row["PackageBaseID"] ?>]" value="1" /></td> <?php endif; ?> <td><a href="<?= htmlspecialchars(get_pkg_uri($row["Name"]), ENT_QUOTES); ?>"><?= htmlspecialchars($row["Name"]) ?></a></td> <td<?php if ($row["OutOfDateTS"]): ?> class="flagged"<?php endif; ?>><?= htmlspecialchars($row["Version"]) ?></td> @@ -89,6 +90,8 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + + <span id="pkglist-checked-count"></span> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav"> -- 2.4.5
Am 02.07.2015 um 16:55 schrieb Johannes Löthberg:
Fixes FS#45379.
Signed-off-by: Johannes Löthberg <johannes@kyriasis.com> --- Changes since v1: * Use jQuery * Allow for better localization * Without JS there won't be any counter listed
+1
+ var elements = $('.package-checkbox'); + for (var i = 0, len = elements.length; i < len; i++) { + elements[i].onchange = update_checked_count; + }
I think a loop is not needed here, this should do the same: $('.package-checkbox').change(update_checked_count); best regards, carstene1ns
Fixes FS#45379. Signed-off-by: Johannes Löthberg <johannes@kyriasis.com> --- Changes since v3: * Set the initial string on page load. * Use jQuery method to set the change function instead of looping over the checkboxes. (Thank you carstene1ns for the recommendation.) web/html/packages.php | 16 ++++++++++++++++ web/template/pkg_search_results.php | 5 ++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/web/html/packages.php b/web/html/packages.php index bf3daf8..da7b7de 100644 --- a/web/html/packages.php +++ b/web/html/packages.php @@ -71,6 +71,22 @@ $(document).ready(function() { collapseDependsList("#pkgdepslist"); collapseDependsList("#pkgreqslist"); collapseDependsList("#pkgsrcslist"); + + function update_checked_count() { + var one_pkg = '<?= __("1 package selected") ?>'; + var pkgs = '<?= __("%s packages selected") ?>'; + + var count = $('.package-checkbox:checked').length; + if (count === 1) { + var res = one_pkg; + } else { + var res = pkgs; + } + $('#pkglist-checked-count').text(res.replace('%s', count.toString())); + } + update_checked_count(); // Set initial string + + $('.package-checkbox').change(update_checked_count); }); </script> diff --git a/web/template/pkg_search_results.php b/web/template/pkg_search_results.php index cce533c..4d99dd6 100644 --- a/web/template/pkg_search_results.php +++ b/web/template/pkg_search_results.php @@ -9,6 +9,7 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + <span id="pkglist-checked-count"></span> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav"> @@ -49,7 +50,7 @@ if (!$result): ?> <?php while (list($indx, $row) = each($searchresults)): ?> <tr class="<?= ($indx % 2 == 0) ? 'odd' : 'even' ?>"> <?php if ($SID): ?> - <td><input type="checkbox" name="IDs[<?= $row["PackageBaseID"] ?>]" value="1" /></td> + <td><input class="package-checkbox" type="checkbox" name="IDs[<?= $row["PackageBaseID"] ?>]" value="1" /></td> <?php endif; ?> <td><a href="<?= htmlspecialchars(get_pkg_uri($row["Name"]), ENT_QUOTES); ?>"><?= htmlspecialchars($row["Name"]) ?></a></td> <td<?php if ($row["OutOfDateTS"]): ?> class="flagged"<?php endif; ?>><?= htmlspecialchars($row["Version"]) ?></td> @@ -89,6 +90,8 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + + <span id="pkglist-checked-count"></span> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav"> -- 2.4.5
On Fri, 03 Jul 2015 at 01:52:58, Johannes Löthberg wrote:
Fixes FS#45379.
Signed-off-by: Johannes Löthberg <johannes@kyriasis.com> --- Changes since v3: * Set the initial string on page load. * Use jQuery method to set the change function instead of looping over the checkboxes. (Thank you carstene1ns for the recommendation.)
web/html/packages.php | 16 ++++++++++++++++ web/template/pkg_search_results.php | 5 ++++- 2 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/web/html/packages.php b/web/html/packages.php index bf3daf8..da7b7de 100644 --- a/web/html/packages.php +++ b/web/html/packages.php @@ -71,6 +71,22 @@ $(document).ready(function() { collapseDependsList("#pkgdepslist"); collapseDependsList("#pkgreqslist"); collapseDependsList("#pkgsrcslist"); + + function update_checked_count() { + var one_pkg = '<?= __("1 package selected") ?>'; + var pkgs = '<?= __("%s packages selected") ?>'; [...]
Can we use %d here? Looks fine otherwise!
Fixes FS#45379. Signed-off-by: Johannes Löthberg <johannes@kyriasis.com> --- Changes since v3: * Accidentally used %s instead of %d in gettext string web/html/packages.php | 16 ++++++++++++++++ web/template/pkg_search_results.php | 5 ++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/web/html/packages.php b/web/html/packages.php index bf3daf8..4b11f09 100644 --- a/web/html/packages.php +++ b/web/html/packages.php @@ -71,6 +71,22 @@ $(document).ready(function() { collapseDependsList("#pkgdepslist"); collapseDependsList("#pkgreqslist"); collapseDependsList("#pkgsrcslist"); + + function update_checked_count() { + var one_pkg = '<?= __("1 package selected") ?>'; + var pkgs = '<?= __("%d packages selected") ?>'; + + var count = $('.package-checkbox:checked').length; + if (count === 1) { + var res = one_pkg; + } else { + var res = pkgs; + } + $('#pkglist-checked-count').text(res.replace('%s', count.toString())); + } + update_checked_count(); // Set initial string + + $('.package-checkbox').change(update_checked_count); }); </script> diff --git a/web/template/pkg_search_results.php b/web/template/pkg_search_results.php index cce533c..4d99dd6 100644 --- a/web/template/pkg_search_results.php +++ b/web/template/pkg_search_results.php @@ -9,6 +9,7 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + <span id="pkglist-checked-count"></span> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav"> @@ -49,7 +50,7 @@ if (!$result): ?> <?php while (list($indx, $row) = each($searchresults)): ?> <tr class="<?= ($indx % 2 == 0) ? 'odd' : 'even' ?>"> <?php if ($SID): ?> - <td><input type="checkbox" name="IDs[<?= $row["PackageBaseID"] ?>]" value="1" /></td> + <td><input class="package-checkbox" type="checkbox" name="IDs[<?= $row["PackageBaseID"] ?>]" value="1" /></td> <?php endif; ?> <td><a href="<?= htmlspecialchars(get_pkg_uri($row["Name"]), ENT_QUOTES); ?>"><?= htmlspecialchars($row["Name"]) ?></a></td> <td<?php if ($row["OutOfDateTS"]): ?> class="flagged"<?php endif; ?>><?= htmlspecialchars($row["Version"]) ?></td> @@ -89,6 +90,8 @@ if (!$result): ?> <p> <?= _n('%d package found.', '%d packages found.', $total) ?> <?= __('Page %d of %d.', $current, $pages) ?> + + <span id="pkglist-checked-count"></span> </p> <?php if (count($templ_pages) > 1): ?> <p class="pkglist-nav"> -- 2.4.5
participants (4)
-
carstene1ns
-
Johannes Löthberg
-
Lukas Fleischer
-
Marcel Korpel