mirror of
https://github.com/ajurna/cbwebreader.git
synced 2025-12-06 06:17:17 +00:00
Rewrite of Comic lists so that tehy have thumbnails. (#26)
This commit is contained in:
GitHub
@@ -69,6 +69,7 @@
|
||||
<script type="text/javascript" src="{% static "reveal.js/reveal.js" %}"></script>
|
||||
<script type="text/javascript" src="{% static "reveal.js/plugin/menu/menu.js" %}"></script>
|
||||
<script type="text/javascript" src="{% static "js/hammer.min.js" %}"></script>
|
||||
<script type="text/javascript" src="{% static "js/isotope.pkgd.min.js" %}"></script>
|
||||
|
||||
{% block script %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,121 +1,165 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container">
|
||||
<form id="comic_form" method="post" action="/comic/edit/">
|
||||
{% csrf_token %}
|
||||
<table class="table table-bordered table-striped table-hover" id="comic_list">
|
||||
<caption><h2>Comics</h2> mark selected issues as:
|
||||
<select name="func" id="func_selector">
|
||||
<option value="choose">Choose...</option>
|
||||
<option value="read">Read</option>
|
||||
<option value="unread">Un-Read</option>
|
||||
</select>
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="select-all"><input type="checkbox" id="select-all-cb"></th>
|
||||
<th style="text-align: center;"><span class="fa fa-file"></span></th>
|
||||
<th width="100%">File/Folder</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="clickable-row" data-href="/comic/">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>loading data</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
<div class="row">
|
||||
<div class="input-group">
|
||||
<input type="text" id="quicksearch" class="form-control" placeholder="Search" aria-label="Search list of comics" aria-describedby="button-addon4">
|
||||
<div id="filters" class="input-group-append" id="button-addon4">
|
||||
<button class="btn btn-outline-secondary filters" type="button" data-filter="*">All</button>
|
||||
<button class="btn btn-outline-secondary filters" type="button" data-filter=".read">Read</button>
|
||||
<button class="btn btn-outline-secondary filters" type="button" data-filter=".unread">Unread</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Actions
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<button type="button" class="btn btn-primary dropdown-item" title="Mark Un-Read" onclick="comic_action('{{ selector }}', 'Directory', 'mark_unread')"><i class="fas fa-book">Mark Un-Read</i></button>
|
||||
<button type="button" class="btn btn-primary dropdown-item" title="Mark Read" onclick="comic_action('{{ selector }}', 'Directory', 'mark_read')"><i class="fas fa-book-open">Mark Read</i></button>
|
||||
{# <button type="button" class="btn btn-primary dropdown-item" title="Edit Comic"><i class="fas fa-edit">Edit Comic</i></button>#}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container comic-container">
|
||||
<div class="row grid">
|
||||
{% for file in files %}
|
||||
<div class="m-2 grid-item {% if file.percent == 100 %}read{% else %}unread{% endif %}">
|
||||
<div class="card" style="width: 200px;">
|
||||
{% if file.item_type == 'Directory' %}
|
||||
<a href="{% url "comic_list" file.selector %}">
|
||||
{% elif file.item_type == 'ComicBook' %}
|
||||
<a href="{% url "read_comic" file.selector %}">
|
||||
{% endif %}
|
||||
|
||||
{% if file.obj.thumbnail %}
|
||||
<img src="{{file.obj.thumbnail.url}}" class="card-img-top" alt="{{ file.name }}" onerror="this.onerror=null;this.src='{% static "img/placeholder.png" %}';">
|
||||
{% else %}
|
||||
{% if file.item_type == 'Directory' %}
|
||||
<img src="{% url 'directory_thumbnail' file.selector %}" class="card-img-top" alt="{{ file.name }}" onerror="this.onerror=null;this.src='{% static "img/placeholder.png" %}';">
|
||||
{% elif file.item_type == 'ComicBook' %}
|
||||
<img src="{% url 'comic_thumbnail' file.selector %}" class="card-img-top" alt="{{ file.name }}" onerror="this.onerror=null;this.src='{% static "img/placeholder.png" %}';">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
{% if file.item_type == 'Directory' %}
|
||||
<a href="{% url "comic_list" file.selector %}" class="search-name">
|
||||
{% elif file.item_type == 'ComicBook' %}
|
||||
<a href="{% url "read_comic" file.selector %}" class="search-name">
|
||||
{% endif %}
|
||||
{{ file.name }}
|
||||
</a>
|
||||
</h5>
|
||||
<p class="card-text">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: {{ file.percent }}%;" aria-valuenow="{{ file.percent }}" aria-valuemin="0" aria-valuemax="100">{{ file.percent }}%</div>
|
||||
</div>
|
||||
</p>
|
||||
<div class="btn-group" role="group" aria-label="Comic Actions">
|
||||
<button type="button" class="btn btn-primary" title="Mark Un-Read" onclick="comic_action('{{ file.selector }}', '{{ file.item_type }}', 'mark_unread')"><i class="fas fa-book"></i></button>
|
||||
<button type="button" class="btn btn-primary" title="Mark Read" onclick="comic_action('{{ file.selector }}', '{{ file.item_type }}', 'mark_read')"><i class="fas fa-book-open"></i></button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<button type="button" class="btn btn-primary dropdown-item" title="Mark Un-Read" onclick="comic_action('{{ file.selector }}', '{{ file.item_type }}', 'mark_unread')"><i class="fas fa-book">Mark Un-Read</i></button>
|
||||
<button type="button" class="btn btn-primary dropdown-item" title="Mark Read" onclick="comic_action('{{ file.selector }}', '{{ file.item_type }}', 'mark_read')"><i class="fas fa-book-open">Mark Read</i></button>
|
||||
{% if file.item_type != 'Directory' %}
|
||||
<button type="button" class="btn btn-primary dropdown-item" title="Mark Previous Read"><i class="fas fa-book" onclick="comic_action('{{ file.selector }}', '{{ file.item_type }}', 'mark_previous')"><i class="fas fa-arrow-up">Mark Previous Read</i></i></button>
|
||||
{% endif %}
|
||||
{# <button type="button" class="btn btn-primary dropdown-item" title="Edit Comic"><i class="fas fa-edit">Edit Comic</i></button>#}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var table = $('#comic_list').DataTable({
|
||||
"processing": true,
|
||||
"stateSave": true,
|
||||
"ajax": {
|
||||
"type": "POST",
|
||||
"url": "{{ json_url }}",
|
||||
"data": function ( d ) {
|
||||
d.csrfmiddlewaretoken = Cookies.get('csrftoken');
|
||||
}
|
||||
},
|
||||
"rowCallback": function( row, data, index ) {
|
||||
var r = $(row);
|
||||
var cols = $('td:nth-child(n+2)', row);
|
||||
|
||||
if (data['selector'] === '0') {
|
||||
|
||||
} else {
|
||||
cols.attr('data-href', data['url']);
|
||||
cols.attr('style', 'cursor: pointer;');
|
||||
cols.click(function () {
|
||||
window.document.location = $(this).data("href");
|
||||
});
|
||||
}
|
||||
var tds = $('td:eq(0)', row);
|
||||
if (data['type'] === 'directory') {
|
||||
tds.html('');
|
||||
} else {
|
||||
tds.html('<input type="checkbox" name="selected" value="'+data['selector']+'" data-type="'+data['type']+'"/>');
|
||||
var cb = $('input', tds);
|
||||
cb.change(function() {
|
||||
$(this).closest('tr').toggleClass('info')
|
||||
});
|
||||
}
|
||||
},
|
||||
"drawCallback": function( settings ) {
|
||||
var tds = $('table tr td:first-child');
|
||||
tds.click(function(event){
|
||||
if (!$(event.target).is('input')) {
|
||||
var $cb = $('input', this);
|
||||
$cb.click();
|
||||
}
|
||||
});
|
||||
},
|
||||
"columns": [
|
||||
{ "data" : "blank", "orderable": false },
|
||||
{ "data" : "icon", "orderable": false },
|
||||
{ "data" : "name" },
|
||||
{"data": "label"}
|
||||
],
|
||||
|
||||
"order": [[2, 'asc']]
|
||||
var qsRegex;
|
||||
var buttonFilter;
|
||||
var $grid = $('.comic-container').isotope({
|
||||
itemSelector: '.grid-item',
|
||||
layoutMode: 'fitRows',
|
||||
filter: function() {
|
||||
var $this = $(this);
|
||||
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
|
||||
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
|
||||
return searchResult && buttonResult;
|
||||
{#return searchResult#}
|
||||
}
|
||||
});
|
||||
$(".clickable-row").click(function() {
|
||||
window.document.location = $(this).data("href");
|
||||
$('#filters').on( 'click', 'button', function() {
|
||||
buttonFilter = $( this ).attr('data-filter');
|
||||
sessionStorage.setItem(window.location.href+"button", buttonFilter);
|
||||
$grid.isotope();
|
||||
});
|
||||
$('#func_selector').on('change', function() {
|
||||
$.post('/comic/edit/', $('#comic_form').serialize())
|
||||
.done(function(){
|
||||
$('#func_selector').val('choose');
|
||||
$('#select-all input').prop('checked', false);
|
||||
table.ajax.reload();
|
||||
}).fail(function(){
|
||||
alert('Error Submitting Change');
|
||||
})
|
||||
|
||||
});
|
||||
$('#select-all').click(function(event){
|
||||
var cb = $('input', this);
|
||||
if (!$(event.target).is('input')) {
|
||||
cb.click();
|
||||
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
|
||||
qsRegex = new RegExp($quicksearch.val(), 'gi');
|
||||
sessionStorage.setItem(window.location.href+'text', $quicksearch.val());
|
||||
$grid.isotope();
|
||||
}) );
|
||||
|
||||
// debounce so filtering doesn't happen every millisecond
|
||||
function debounce( fn, threshold ) {
|
||||
var timeout;
|
||||
threshold = threshold || 100;
|
||||
return function debounced() {
|
||||
clearTimeout( timeout );
|
||||
var args = arguments;
|
||||
var _this = this;
|
||||
function delayed() {
|
||||
fn.apply( _this, args );
|
||||
}
|
||||
$('table tr td:first-child input').each(function(chkbx) {
|
||||
row = $(this);
|
||||
if (row.prop('checked') !== cb.prop('checked')){
|
||||
row.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
} );
|
||||
timeout = setTimeout( delayed, threshold );
|
||||
};
|
||||
}
|
||||
setInterval(function (){
|
||||
$grid.isotope();
|
||||
}, 1000)
|
||||
|
||||
let field = document.getElementById("quicksearch");
|
||||
|
||||
// See if we have an autosave value
|
||||
// (this will only happen if the page is accidentally refreshed)
|
||||
if (sessionStorage.getItem(window.location.href+'text') || sessionStorage.getItem(window.location.href+'button')) {
|
||||
// Restore the contents of the text field
|
||||
field.value = sessionStorage.getItem(window.location.href+'text');
|
||||
qsRegex = new RegExp($quicksearch.val(), 'gi');
|
||||
buttonFilter = sessionStorage.getItem(window.location.href+'button');
|
||||
$grid.isotope();
|
||||
}
|
||||
|
||||
// Listen for changes in the text field
|
||||
field.addEventListener("change", function() {
|
||||
// And save the results into the session storage object
|
||||
|
||||
});
|
||||
|
||||
function comic_action(selector, item_type, action) {
|
||||
$.ajax({
|
||||
url: '/comic/action/' + action + '/' + item_type + '/' + selector + '/',
|
||||
success: function (){window.location.reload()}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user