From 4fe1536b7e05e4bfc01cad6728ff591d86e6042c Mon Sep 17 00:00:00 2001
From: Jonathan Rehm <jonathan@rehm.me>
Date: Thu, 6 Jul 2017 10:33:47 -0700
Subject: [PATCH] Simplify the read functionality's code

* Use block label to toggle the checkbox
* Submit form when checkbox's value changes (regardless of whether mouse is used or not)
* Remove unused code
---
 cps/static/css/style.css  |  1 +
 cps/templates/detail.html | 34 +++++++++-------------------------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/cps/static/css/style.css b/cps/static/css/style.css
index e136fedf..6e6d1c9d 100644
--- a/cps/static/css/style.css
+++ b/cps/static/css/style.css
@@ -52,3 +52,4 @@ span.glyphicon.glyphicon-tags {padding-right: 5px;color: #999;vertical-align: te
 .spinner {margin:0 41%;}
 .spinner2 {margin:0 41%;}
 
+.block-label {display: block;}
diff --git a/cps/templates/detail.html b/cps/templates/detail.html
index 44fc8f55..1d80cb05 100644
--- a/cps/templates/detail.html
+++ b/cps/templates/detail.html
@@ -109,10 +109,12 @@
       {% endif %}  
       {% if not g.user.is_anonymous() %}
       <p>
-        <div class="custom_columns" id="have_read_container">
-          <form id="have_read_form" action="{{ url_for('toggle_read', book_id=entry.id)}}" method="POST") >
-            <input id="have_read_cb" type="checkbox" {% if have_read %}checked{% endif %} >
-            <label for="have_read_cb">{{_('Read')}}</label>
+        <div class="custom_columns">
+          <form id="have_read_form" action="{{ url_for('toggle_read', book_id=entry.id)}}" method="POST">
+            <label class="block-label">
+              <input id="have_read_cb" type="checkbox" {% if have_read %}checked{% endif %} >
+              <span>{{_('Read')}}</span>
+            </label>
           </form>
         </div>
       </p>
@@ -222,28 +224,10 @@
 <script src="{{ url_for('static', filename='js/libs/jquery.form.js') }}"></script>
 <script>
   $( document ).ready(function() {
-    var haveReadForm = $('#have_read_form');
-    haveReadForm.ajaxForm();
+    $('#have_read_form').ajaxForm();
   });
-  $("#have_read_container").attr('unselectable','on')
-     .css({'-moz-user-select':'-moz-none',
-           '-moz-user-select':'none',
-           '-o-user-select':'none',
-           '-khtml-user-select':'none', /* you could also put this in a class */
-           '-webkit-user-select':'none',/* and add the CSS class here instead */
-           '-ms-user-select':'none',
-           'user-select':'none'
-     }).bind('selectstart', function(){ return false; });
-  $("#have_read_container").click(function() {
-    var haveReadForm = $('#have_read_form');
-    if ($("#have_read").find('span').hasClass('glyphicon-ok')) {
-      $("#have_read").find('span').removeClass('glyphicon-ok');
-      $("#have_read").find('span').addClass('glyphicon-remove');
-    } else {
-      $("#have_read").find('span').removeClass('glyphicon-remove');
-      $("#have_read").find('span').addClass('glyphicon-ok');
-    }
-    haveReadForm.submit()
+  $("#have_read_cb").on('change', function() {
+    $(this).closest('form').submit();
   });
 </script>
 {% endblock %}