NunoSempere/calibre-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify the read functionality's code

Browse Source 
* 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
This commit is contained in:
Jonathan Rehm 2017-07-06 10:33:47 -07:00
parent 4ea9df753e
commit 4fe1536b7e
2 changed files with 10 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
cps/static/css/style.css
View File

@ -52,3 +52,4 @@ span.glyphicon.glyphicon-tags {padding-right: 5px;color: #999;vertical-align: te
.spinner {margin:0 41%;} .spinner {margin:0 41%;}
.spinner2 {margin:0 41%;} .spinner2 {margin:0 41%;}
.block-label {display: block;}

34
cps/templates/detail.html
View File

@ -109,10 +109,12 @@
{% endif %} {% endif %}
{% if not g.user.is_anonymous() %} {% if not g.user.is_anonymous() %}
<p> <p>
<div class="custom_columns" id="have_read_container"> <div class="custom_columns">
<form id="have_read_form" action="{{ url_for('toggle_read', book_id=entry.id)}}" method="POST") > <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 class="block-label">
<label for="have_read_cb">{{_('Read')}}</label> <input id="have_read_cb" type="checkbox" {% if have_read %}checked{% endif %} >
<span>{{_('Read')}}</span>
</label>
</form> </form>
</div> </div>
</p> </p>
@ -222,28 +224,10 @@
<script src="{{ url_for('static', filename='js/libs/jquery.form.js') }}"></script> <script src="{{ url_for('static', filename='js/libs/jquery.form.js') }}"></script>
<script> <script>
$( document ).ready(function() { $( document ).ready(function() {
var haveReadForm = $('#have_read_form'); $('#have_read_form').ajaxForm();
haveReadForm.ajaxForm();
}); });
$("#have_read_container").attr('unselectable','on') $("#have_read_cb").on('change', function() {
.css({'-moz-user-select':'-moz-none', $(this).closest('form').submit();
'-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()
}); });
</script> </script>
{% endblock %} {% endblock %}