forked from mirrors/bookwyrm
Readthrough interactions
This commit is contained in:
Mouse Reeve
parent
f7e3cbda84
commit
47d5b907ac
11 changed files with 165 additions and 134 deletions
|
|
@ -18,7 +18,7 @@
|
|||
background-color: hsl(171, 100%, 41%);
|
||||
color: white;
|
||||
}
|
||||
.hide-active[aria-pressed=true] {
|
||||
.hide-active[aria-pressed=true], .hide-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -60,13 +60,14 @@ function toggleAction(e) {
|
|||
|
||||
if (targetId) {
|
||||
var target = document.getElementById(targetId);
|
||||
if (pressed) {
|
||||
removeClass(target, 'hidden');
|
||||
addClass(target, 'is-active');
|
||||
} else {
|
||||
addClass(target, 'hidden');
|
||||
removeClass(target, 'is-active');
|
||||
}
|
||||
addRemoveClass(target, 'hidden', !pressed);
|
||||
addRemoveClass(target, 'is-active', pressed);
|
||||
}
|
||||
|
||||
// show/hide container
|
||||
var container = document.getElementById('hide-' + targetId);
|
||||
if (!!container) {
|
||||
addRemoveClass(container, 'hidden', pressed);
|
||||
}
|
||||
|
||||
// set checkbox, if appropriate
|
||||
|
|
@ -82,13 +83,23 @@ function toggleAction(e) {
|
|||
}
|
||||
}
|
||||
|
||||
function addRemoveClass(el, classname, bool) {
|
||||
if (bool) {
|
||||
addClass(el, classname)
|
||||
} else {
|
||||
removeClass(el, classname)
|
||||
}
|
||||
}
|
||||
|
||||
function addClass(el, classname) {
|
||||
el.className = el.className.split(' ').concat(classname).join(' ');
|
||||
}
|
||||
|
||||
function removeClass(el, className) {
|
||||
var classes = el.className.split(' ');
|
||||
var classes = []
|
||||
if (el.className) {
|
||||
var classes = el.className.split(' ');
|
||||
}
|
||||
const idx = classes.indexOf(className);
|
||||
if (idx > -1) {
|
||||
classes.splice(idx, 1);
|
||||
|
|
|
|||
23
bookwyrm/templates/snippets/components/modal.html
Normal file
23
bookwyrm/templates/snippets/components/modal.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<div class="modal hidden" id="{{ controls_text }}-{{ controls_uid }}">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<h2 class="modal-card-title">
|
||||
{% block modal-title %}{% endblock %}
|
||||
</h2>
|
||||
{% include 'snippets/toggle/toggle_button.html' with label="close" class="delete" nonbutton=True %}
|
||||
</header>
|
||||
|
||||
{% block modal-form-open %}{% endblock %}
|
||||
|
||||
{% block modal-body %}{% endblock %}
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
{% block modal-footer %}{% endblock %}
|
||||
</footer>
|
||||
{% block modal-form-close %}{% endblock %}
|
||||
</div>
|
||||
<label class="modal-close is-large" for="{{ controls_text }}-{{ readthrough.id }}" aria-label="close"></label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with label="close" class="modal-close is-large" nonbutton=True %}
|
||||
</div>
|
||||
|
||||
13
bookwyrm/templates/snippets/delete_readthrough_modal.html
Normal file
13
bookwyrm/templates/snippets/delete_readthrough_modal.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{% extends 'snippets/components/modal.html' %}
|
||||
{% block modal-title %}Delete this read-though?{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
<form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
||||
<button class="button is-danger" type="submit">
|
||||
Delete
|
||||
</button>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
|
@ -1,45 +1,46 @@
|
|||
{% load bookwyrm_tags %}
|
||||
<div class="modal toggle-content hidden" id="finish-reading-{{ uuid }}">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Finish "{{ book.title }}"</p>
|
||||
{% include 'snippets/toggle/close_button.html' with label="close" controls_text="finish-reading" controls_uid=uuid class="delete" %}
|
||||
</header>
|
||||
{% active_read_through book user as readthrough %}
|
||||
<form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
|
||||
<section class="modal-card-body">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Started reading
|
||||
<input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Finished reading
|
||||
<input type="date" name="finish_date" class="input" id="id_finish_date-{{ uuid }}" value="{% now "Y-m-d" %}">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<div class="columns">
|
||||
<div class="column field">
|
||||
<label for="post_status-{{ uuid }}">
|
||||
<input type="checkbox" name="post-status" class="checkbox" id="post_status-{{ uuid }}" checked>
|
||||
Post to feed
|
||||
</label>
|
||||
{% include 'snippets/privacy_select.html' %}
|
||||
</div>
|
||||
<div class="column">
|
||||
<button type="submit" class="button is-success">Save</button>
|
||||
{% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
{% extends 'snippets/components/modal.html' %}
|
||||
|
||||
{% block modal-title %}
|
||||
Finish "<em>{{ book.title }}</em>"
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block modal-form-open %}
|
||||
<form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-body %}
|
||||
<section class="modal-card-body">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Started reading
|
||||
<input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Finished reading
|
||||
<input type="date" name="finish_date" class="input" id="id_finish_date-{{ uuid }}" value="{% now "Y-m-d" %}">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
<div class="columns">
|
||||
<div class="column field">
|
||||
<label for="post_status-{{ uuid }}">
|
||||
<input type="checkbox" name="post-status" class="checkbox" id="post_status-{{ uuid }}" checked>
|
||||
Post to feed
|
||||
</label>
|
||||
{% include 'snippets/privacy_select.html' %}
|
||||
</div>
|
||||
<div class="column">
|
||||
<button type="submit" class="button is-success">Save</button>
|
||||
{% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
|
||||
</div>
|
||||
<label class="modal-close is-large" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block modal-form-close %}</form>{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
{% load humanize %}
|
||||
<div class="content block">
|
||||
<input class="toggle-control" type="radio" name="show-edit-readthrough-{{ readthrough.id }}" id="show-readthrough-{{ readthrough.id }}" checked>
|
||||
<div class="toggle-content hidden">
|
||||
<div id="hide-edit-readthrough-{{ readthrough.id }}">
|
||||
<dl class="mb-1">
|
||||
{% if readthrough.start_date %}
|
||||
<div class="is-flex">
|
||||
|
|
@ -16,48 +15,24 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
</dl>
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
{% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
|
||||
</div>
|
||||
<div class="control">
|
||||
{% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box hidden" id="edit-readthrough-{{ readthrough.id }}">
|
||||
<form name="edit-readthrough" action="/edit-readthrough" method="post">
|
||||
{% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
|
||||
<div class="field is-grouped">
|
||||
{% include 'snippets/toggle/toggle_button.html' with small=True text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with small=True text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
||||
<button class="button is-primary" type="submit">Save</button>
|
||||
{% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="edit-readthrough" controls_uid=readthrough.id %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<input class="toggle-control" type="radio" name="show-edit-readthrough-{{ readthrough.id }}" id="edit-readthrough-{{ readthrough.id }}">
|
||||
<div class="toggle-content hidden">
|
||||
<div class="box">
|
||||
<form name="edit-readthrough" action="/edit-readthrough" method="post">
|
||||
{% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
|
||||
<div class="field is-grouped">
|
||||
<button class="button is-primary" type="submit">Save</button>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="show-readthrough" controls_uid=readthrough.id %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input class="toggle-control" type="checkbox" name="delete-readthrough-{{ readthrough.id }}" id="delete-readthrough-{{ readthrough.id }}">
|
||||
<div class="modal toggle-content hidden">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Delete this read-though?</p>
|
||||
<label class="delete" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
|
||||
</header>
|
||||
<footer class="modal-card-foot">
|
||||
<form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
||||
<button class="button is-danger is-light" type="submit">
|
||||
Delete
|
||||
</button>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
||||
</form>
|
||||
</footer>
|
||||
</div>
|
||||
<label class="modal-close is-large" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% include 'snippets/delete_readthrough_modal.html' with controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<li role="menuitem">
|
||||
{% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
|
||||
<div class="dropdown-item pt-0 pb-0">
|
||||
{% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Start reading" controls_text="start-reading" controls_uid=uuid %}
|
||||
</div>
|
||||
{% else %}
|
||||
<form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
|
||||
|
|
@ -59,7 +59,11 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
|
||||
{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
|
||||
|
||||
{% include 'snippets/start_reading_modal.html' with book=active_shelf.book controls_text="start-reading" controls_uid=uuid %}
|
||||
|
||||
{% latest_read_through book request.user as readthrough %}
|
||||
{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book controls_text="finish-reading" controls_uid=uuid readthrough=readthrough %}
|
||||
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,38 @@
|
|||
<div class="modal hidden" id="start-reading-{{ uuid }}">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Start "{{ book.title }}"</p>
|
||||
{% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="start-reading" controls_uid=uuid class="delete" %}
|
||||
</header>
|
||||
<form name="start-reading" action="/start-reading/{{ book.id }}" method="post">
|
||||
<section class="modal-card-body">
|
||||
{% csrf_token %}
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Started reading
|
||||
<input type="date" name="start_date" class="input" id="start_id_start_date-{{ uuid }}" value="{% now "Y-m-d" %}">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<div class="columns">
|
||||
<div class="column field">
|
||||
<label for="post_status_start-{{ uuid }}">
|
||||
<input type="checkbox" name="post-status" class="checkbox" id="post_status_start-{{ uuid }}" checked>
|
||||
Post to feed
|
||||
</label>
|
||||
{% include 'snippets/privacy_select.html' %}
|
||||
</div>
|
||||
<div class="column">
|
||||
<button class="button is-success" type="submit">Save</button>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
{% extends 'snippets/components/modal.html' %}
|
||||
|
||||
{% block modal-title %}
|
||||
Start "<em>{{ book.title }}</em>"
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-form-open %}
|
||||
<form name="start-reading" action="/start-reading/{{ book.id }}" method="post">
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-body %}
|
||||
<section class="modal-card-body">
|
||||
{% csrf_token %}
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Started reading
|
||||
<input type="date" name="start_date" class="input" id="start_id_start_date-{{ uuid }}" value="{% now "Y-m-d" %}">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
<div class="columns">
|
||||
<div class="column field">
|
||||
<label for="post_status_start-{{ uuid }}">
|
||||
<input type="checkbox" name="post-status" class="checkbox" id="post_status_start-{{ uuid }}" checked>
|
||||
Post to feed
|
||||
</label>
|
||||
{% include 'snippets/privacy_select.html' %}
|
||||
</div>
|
||||
<div class="column">
|
||||
<button class="button is-success" type="submit">Save</button>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
|
||||
</div>
|
||||
<label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block modal-form-close %}</form>{% endblock %}
|
||||
|
|
|
|||
1
bookwyrm/templates/snippets/toggle/close_button.html
Normal file
1
bookwyrm/templates/snippets/toggle/close_button.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
{% include 'snippets/toggle/toggle_button.html' with button_type='hide-inactive' %}
|
||||
1
bookwyrm/templates/snippets/toggle/open_button.html
Normal file
1
bookwyrm/templates/snippets/toggle/open_button.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
{% include 'snippets/toggle/toggle_button.html' with button_type='hide-active' %}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<button
|
||||
type="button"
|
||||
class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% endif %}"
|
||||
class="toggle-control {% if not nonbutton %}button{% endif %} {{ class }} {% if button_type %}{{ button_type }}{% endif %}"
|
||||
data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"
|
||||
{% if focus %}data-focus-target="{{ focus }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
|
||||
{% if checkbox %}data-controls-checkbox="{{ checkbox }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue