Select All improved

Author: farzindev

Blogifier.Web/Views/Blogifier/Admin/Packages/Themes.cshtml

@@ -8,10 +8,10 @@
 <!-- Toolbar -->
 <div class="bf-toolbar d-flex">
     <label class="custom-control custom-checkbox my-auto mr-3">
-        <input class="custom-control-input item-checkbox" type="checkbox" id="selectAll" name="selectAll">
+        <input class="custom-control-input" type="checkbox" id="selectAll" name="selectAll">
         <span class="item-control custom-control-indicator"></span>
     </label>
-    <div id="postActionButtons" class="btn-group mr-3">
+    <div id="multiActionBtns" class="btn-group mr-3">
         <a asp-controller="Packages" asp-action="Widgets" class="btn btn-outline-secondary btn-sm btn-rounded" style="padding: 0 20px">
             <i class="fa fa-arrow-left"></i> &nbsp; Back
         </a>

Blogifier.Web/Views/Blogifier/Admin/Packages/Widgets.cshtml

@@ -8,13 +8,13 @@
 <!-- Toolbar -->
 <div class="bf-toolbar d-flex">
     <label class="custom-control custom-checkbox my-auto mr-3" data-tooltip title="Select All">
-        <input class="custom-control-input item-checkbox" type="checkbox" id="selectAll" name="selectAll">
+        <input class="custom-control-input" type="checkbox" id="selectAll" name="selectAll">
         <span class="item-control custom-control-indicator"></span>
     </label>
     <a asp-controller="Packages" asp-action="Widgets" class="btn btn-outline-secondary btn-sm btn-rounded" style="padding: 0 20px; margin-right: 20px">
         <i class="fa fa-arrow-left mr-2"></i> Back
     </a>
-    <div id="postActionButtons" class="btn-group mr-3">
+    <div id="multiActionBtns" class="btn-group mr-3">
         <button type="button" class="btn btn-outline-secondary btn-icon btn-sm btn-rounded" disabled="disabled" data-tooltip onclick="return packagesController.enable()" title="Enable"><i class="fa fa-check"></i></button>
         <button type="button" class="btn btn-outline-secondary btn-icon btn-sm btn-rounded" disabled="disabled" data-tooltip onclick="return packagesController.disable()" title="Disable"><i class="fa fa-minus"></i></button>
     </div>

Blogifier.Web/Views/Blogifier/Admin/Posts/Index.cshtml

@@ -53,8 +53,8 @@
 
 <!-- Toolbar -->
 <div class="bf-toolbar d-flex">
-    <label class="custom-control custom-checkbox my-auto mr-3" data-tooltip title="Select All"><input class="custom-control-input item-checkbox" type="checkbox" name="selectAll"><span class="item-control custom-control-indicator"></span></label>
-    <div id="postActionButtons" class="btn-group mr-3">
+    <label class="custom-control custom-checkbox my-auto mr-3" data-tooltip title="Select All"><input id="selectAll" class="custom-control-input" type="checkbox" name="selectAll"><span class="item-control custom-control-indicator"></span></label>
+    <div id="multiActionBtns" class="btn-group mr-3">
         <button type="button" class="btn btn-outline-secondary btn-icon btn-sm btn-rounded" disabled="disabled" data-tooltip onclick="return postsController.removePost()" title="Delete"><i class="fa fa-trash"></i></button>
         <button type="button" class="btn btn-outline-secondary btn-icon btn-sm btn-rounded" disabled="disabled" data-tooltip onclick="return postsController.unpublish()" title="Unpublish"><i class="fa fa-archive"></i></button>
         <button type="button" class="btn btn-outline-secondary btn-icon btn-sm btn-rounded" disabled="disabled" data-tooltip onclick="return postsController.publish()" title="Publish"><i class="fa fa-check"></i></button>
@@ -94,7 +94,7 @@
         var postStatus = item.Published == DateTime.MinValue ? "draft" : "published";
         if (curPost == 0) { curPost = item.BlogPostId; }
         <li class="bf-list-item d-flex align-items-center">
-            <label class="bf-list-item-select custom-control custom-checkbox mr-3" data-tooltip title="Select"><input type="checkbox" id="@item.BlogPostId" class="item-checkbox custom-control-input"><span class="item-control custom-control-indicator"></span></label>
+            <label class="bf-list-item-select custom-control custom-checkbox mr-3"><input type="checkbox" id="@item.BlogPostId" class="item-checkbox custom-control-input"><span class="item-control custom-control-indicator"></span></label>
             <a class="bf-list-item-link" href="~/admin/posts/editor/@item.BlogPostId?user=@user">@item.Title</a>
             <span class="bf-list-item-status bf-list-item-status-@postStatus ml-auto" data-tooltip title="@postStatus"><i class="fa fa-circle"></i></span>
             <span class="bf-list-item-date ml-3 d-none d-lg-block">@publishedLbl</span>
@@ -123,7 +123,7 @@
             <div class="post-grid-item">
                 <a class="item-link" href="~/admin/posts/editor/@item.BlogPostId?user=@user" style="background-image:url(@item.Image);"><div class="item-title mt-auto">@item.Title</div></a>
                 <div class="item-info d-flex">
-                    <label class="item-select custom-control custom-checkbox mr-3 my-auto" data-tooltip title="Select"><input type="checkbox" id="@item.BlogPostId" class="item-checkbox custom-control-input"><span class="item-control custom-control-indicator"></span></label>
+                    <label class="item-select custom-control custom-checkbox mr-3 my-auto"><input type="checkbox" id="@item.BlogPostId" class="item-checkbox custom-control-input"><span class="item-control custom-control-indicator"></span></label>
                     <span class="item-date my-auto">@publishedLbl</span>
                     <span class="item-status item-status-@postStatus my-auto ml-auto" data-tooltip title="@postStatus"><i class="fa fa-circle"></i></span>
                     @if (Model.Profile.IsAdmin)

Blogifier.Web/Views/Blogifier/Admin/Settings/Users.cshtml

@@ -12,9 +12,11 @@
 }
 <div class="bf-settings">
     <div class="bf-toolbar d-flex">
-        <label class="custom-control custom-checkbox my-auto mr-3"><input class="custom-control-input item-checkbox" type="checkbox" name="selectAll"><span class="item-control custom-control-indicator"></span></label>
+        <label class="custom-control custom-checkbox my-auto mr-3"><input class="custom-control-input" id="selectAll" type="checkbox" name="selectAll"><span class="item-control custom-control-indicator"></span></label>
         <button type="button" class="btn btn-primary btn-rounded btn-sm mr-3" data-toggle="modal" data-target="#createUserModal">Create User</button>
-        <button type="button" id="userActionButtons" class="btn btn-outline-secondary btn-rounded btn-sm btn-icon mr-3" disabled="disabled" data-tooltip onclick="return usersController.removeUser()" title="Delete"><i class="fa fa-trash"></i></button>
+        <div id="multiActionBtns" class="mr-3">
+            <button type="button" class="btn btn-outline-secondary btn-rounded btn-sm btn-icon" disabled="disabled" data-tooltip onclick="return usersController.removeUser()" title="Delete"><i class="fa fa-trash"></i></button>
+        </div>
         <div class="loading loading-sm"><div class="loading-dot-1"></div><div class="loading-dot-2"></div><div class="loading-dot-3"></div></div>
     </div>
     <ul class="bf-list bf-users d-block" aria-label="posts">

Blogifier.Web/wwwroot/admin/js/app/app.js

@@ -1,4 +1,36 @@
-// Toastr Options
+// Select All --------
+var selectAllCheckbox = $('#selectAll');
+var actionBtns = $('#multiActionBtns .btn');
+var itemCheckbox = '.item-checkbox';
+
+$(selectAllCheckbox).change(function() { //"select all" change
+  $(".item-checkbox").not(":hidden").prop('checked', $(this).prop("checked")); //change all ".item-checkbox" checked status
+  toggleActionBtns();
+
+});
+
+$(itemCheckbox).on('change', function() { //".item-checkbox" change
+  //uncheck "select all", if one of the listed checkbox item is unchecked
+  if (false == $(this).prop("checked")) { //if this item is unchecked
+    $(selectAllCheckbox).prop('checked', false); //change "select all" checked status to false
+  }
+
+  if ($(itemCheckbox + ':checked').not(":hidden").length == $(itemCheckbox).not(":hidden").length) { //check "select all" if all checkbox items are checked
+    $(selectAllCheckbox).prop('checked', true);
+  }
+  toggleActionBtns();
+});
+
+function toggleActionBtns() {
+  var bxs = $(itemCheckbox + ':checked').length;
+  if (bxs && bxs > 0) {
+    $(actionBtns).removeAttr('disabled');
+  } else {
+    $(actionBtns).attr('disabled', 'disabled');
+  }
+}
+
+ // Toastr Options --------
 toastr.options.positionClass = 'toast-bottom-right';
 toastr.options.backgroundpositionClass = 'toast-bottom-right';
 

Blogifier.Web/wwwroot/admin/js/app/packagesController.js

@@ -33,22 +33,3 @@ var packagesController = function (dataService) {
         disable: disable
     }
 }(DataService);
-
-$(":checkbox").on("click", function () {
-    if (this.id == "selectAll") {
-        var selected = this.checked;
-        $("input:checkbox.item-checkbox").each(function () {
-            $(this).prop('checked', selected);
-        });
-    }
-    toggleActionBtns();
-});
-
-function toggleActionBtns() {
-    if ($("input:checkbox.item-checkbox:checked").length > 0) {
-        $('#postActionButtons > button').prop('disabled', false);
-    }
-    else {
-        $('#postActionButtons > button').prop('disabled', true);
-    }
-}