From 621c76892139f02ef8ed66b7437714bbffb7b8d5 Mon Sep 17 00:00:00 2001
From: Matchu <matchusian@gmail.com>
Date: Sat, 26 Sep 2015 14:22:11 -0700
Subject: [PATCH] Select All + visual feedback

---
 .../javascripts/closet_hangers/index.js       | 26 +++++++++++++++++--
 .../stylesheets/closet_hangers/_index.sass    | 21 ++++++++++++++-
 app/views/closet_hangers/index.html.haml      |  3 ++-
 app/views/closet_lists/_closet_list.html.haml |  3 ++-
 config/locales/en.yml                         |  2 ++
 5 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/closet_hangers/index.js b/app/assets/javascripts/closet_hangers/index.js
index 78630540..651c8646 100644
--- a/app/assets/javascripts/closet_hangers/index.js
+++ b/app/assets/javascripts/closet_hangers/index.js
@@ -94,13 +94,21 @@
 
           // Ooh, this part is weird. We only want the name to be linked, so
           // lift everything else out.
-          var label = $('<label />');
-          var checkbox = $('<input type="checkbox" />').appendTo(label);
+          var checkboxId = 'hanger-selected-' + hangerId;
+          var label = $('<label />', {'for': checkboxId});
           var link = hangerEl.children('a');
           link.children(':not(.name)').detach().appendTo(label);
           link.detach().appendTo(label);
+          var checkbox = $('<input />', {
+            type: 'checkbox',
+            id: checkboxId
+          }).appendTo(hangerEl);
           label.appendTo(hangerEl);
 
+          // I don't usually like to _blank things, but it's too easy to click
+          // the text when you didn't mean to and lose your selection work.
+          link.attr('target', '_blank');
+
           $.tmpl("updateFormTmpl", {
             user_id: currentUserId,
             closet_hanger_id: hangerId,
@@ -331,6 +339,20 @@
     });
   });
 
+  $(hangersElQuery + " .select-all").live("click", function(e) {
+    var checkboxes = $(this).closest(".closet-list").find(".object input[type=checkbox]");
+
+    var allChecked = true;
+    checkboxes.each(function() {
+      if (!this.checked) {
+        allChecked = false;
+        return false;
+      }
+    });
+
+    checkboxes.attr('checked', !allChecked);
+  });
+
   /*
 
     Search, autocomplete
diff --git a/app/assets/stylesheets/closet_hangers/_index.sass b/app/assets/stylesheets/closet_hangers/_index.sass
index 76dd1c3e..b0bced5c 100644
--- a/app/assets/stylesheets/closet_hangers/_index.sass
+++ b/app/assets/stylesheets/closet_hangers/_index.sass
@@ -119,6 +119,12 @@ body.closet_hangers-index
         &:hover
           text-decoration: underline
 
+      .object
+        margin: 0
+
+      label
+        display: block
+
       input[type=checkbox]
         display: none
         position: absolute
@@ -127,6 +133,13 @@ body.closet_hangers-index
         height: 16px
         width: 16px
 
+        &:checked
+          display: block
+
+          & + label
+            background: $module-bg-color
+            outline: 1px solid $module-border-color
+
   .closet-hangers-group
     border-top: 1px solid $module-border-color
     margin-bottom: 2em
@@ -231,7 +244,7 @@ body.closet_hangers-index
       right: 1em
       top: 0
 
-      a, input[type=submit]
+      a, input[type=submit], button
         +context-button
 
       form
@@ -376,6 +389,12 @@ body.closet_hangers-index
       #toggle-help
         display: inline-block
 
+      .remove-all
+        display: none
+
+      .select-all
+        display: inline-block
+
   &.js
     #toggle-compare
       display: inline-block
diff --git a/app/views/closet_hangers/index.html.haml b/app/views/closet_hangers/index.html.haml
index 4aa5ae89..2ad7b2d9 100644
--- a/app/views/closet_hangers/index.html.haml
+++ b/app/views/closet_hangers/index.html.haml
@@ -77,9 +77,10 @@
                   = f.submit t('.unlisted.submit')
                   = closet_visibility_descriptions
                 .closet-list-controls
-                  = form_tag user_closet_hangers_path(@user), method: :delete do
+                  = form_tag user_closet_hangers_path(@user), method: :delete, class: 'remove-all' do
                     = hidden_field_tag :list_id, owned
                     = submit_tag t('.remove_all.submit'), confirm: t('.remove_all.confirm')
+                  %button.select-all= t('.select_all')
               - if has_lists?(owned)
                 %h4= t '.unlisted.header'
             - if !@public_perspective
diff --git a/app/views/closet_lists/_closet_list.html.haml b/app/views/closet_lists/_closet_list.html.haml
index 05833317..e739c1a1 100644
--- a/app/views/closet_lists/_closet_list.html.haml
+++ b/app/views/closet_lists/_closet_list.html.haml
@@ -9,9 +9,10 @@
         = link_to t('.edit'), edit_user_closet_list_path(closet_list.user_id, closet_list)
         = form_tag user_closet_list_path(closet_list.user_id, closet_list), :method => 'delete' do
           = submit_tag t('.delete'), :confirm => closet_list_delete_confirmation(closet_list)
-        = form_tag user_closet_hangers_path(@user), method: :delete do
+        = form_tag user_closet_hangers_path(@user), method: :delete, class: 'remove-all' do
           = hidden_field_tag :list_id, closet_list.id
           = submit_tag t('.remove_all.submit'), confirm: t('.remove_all.confirm')
+        %button.select-all= t('.select_all')
     %h4= closet_list.name
 
   - if show_controls
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 0134a7e5..33059117 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -131,6 +131,7 @@ en:
       remove_all:
         confirm: 'Remove all items from this list?'
         submit: Remove all
+      select_all: Select all
       autocomplete:
         add_item_html: Add <strong>%{item_name}</strong>
         add_to_list_html: Add to <strong>%{list_name}</strong>
@@ -194,6 +195,7 @@ en:
       remove_all:
         confirm: 'Remove all items from this list?'
         submit: Remove all
+      select_all: Select all
       empty: This list is empty.
       trading_neomail_warning_html:
         You've marked this list as Trading, so folks will discover it via Dress