mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-11-26 19:41:11 +00:00
make use of templates instead of hidden divs which is more elegant
This commit is contained in:
parent
8ec984c3ff
commit
c4398ff187
2 changed files with 48 additions and 51 deletions
|
@ -628,9 +628,8 @@ let BookWyrm = new (class {
|
|||
}
|
||||
|
||||
function toggleStatus(status) {
|
||||
for (const child of statusNode.children) {
|
||||
BookWyrm.toggleContainer(child, !child.classList.contains(status));
|
||||
}
|
||||
const template = document.querySelector(`#barcode-${status}`);
|
||||
statusNode.replaceChildren(template ? template.content.cloneNode(true) : null);
|
||||
}
|
||||
|
||||
function initBarcodes(cameraId = null) {
|
||||
|
|
|
@ -1,48 +1,46 @@
|
|||
{% extends 'components/modal.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block modal-title %}
|
||||
{% blocktrans %}
|
||||
Scan Barcode
|
||||
{% endblocktrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-body %}
|
||||
<div class="block">
|
||||
<div id="barcode-scanner"></div>
|
||||
</div>
|
||||
|
||||
<div id="barcode-camera-list" class="select is-small">
|
||||
<select>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="barcode-status" class="block">
|
||||
<div class="grant-access is-hidden">
|
||||
<span class="icon icon-lock"></span>
|
||||
<span class="is-size-5">{% trans "Requesting camera..." %}</span><br/>
|
||||
<span>{% trans "Grant access to the camera to scan a book's barcode." %}</span>
|
||||
</div>
|
||||
<div class="access-denied is-hidden">
|
||||
<span class="icon icon-warning"></span>
|
||||
<span class="is-size-5">Access denied</span><br/>
|
||||
<span>{% trans "Could not access camera" %}</span>
|
||||
</div>
|
||||
<div class="scanning is-hidden">
|
||||
<span class="icon icon-barcode"></span>
|
||||
<span class="is-size-5">{% trans "Scanning..." context "barcode scanner" %}</span><br/>
|
||||
<span>{% trans "Align your book's barcode with the camera." %}</span>
|
||||
</div>
|
||||
<div class="found is-hidden">
|
||||
<span class="icon icon-check"></span>
|
||||
<span class="is-size-5">{% trans "ISBN scanned" context "barcode scanner" %}</span><br/>
|
||||
{% trans "Searching for book:" context "followed by ISBN" %} <span class="isbn"></span>...
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
<button class="button" type="button" data-modal-close>{% trans "Cancel" %}</button>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% extends 'components/modal.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block modal-title %}
|
||||
{% blocktrans %}
|
||||
Scan Barcode
|
||||
{% endblocktrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-body %}
|
||||
<div class="block">
|
||||
<div id="barcode-scanner"></div>
|
||||
</div>
|
||||
|
||||
<div id="barcode-camera-list" class="select is-small">
|
||||
<select>
|
||||
</select>
|
||||
</div>
|
||||
<template id="barcode-grant-access">
|
||||
<span class="icon icon-lock"></span>
|
||||
<span class="is-size-5">{% trans "Requesting camera..." %}</span><br/>
|
||||
<span>{% trans "Grant access to the camera to scan a book's barcode." %}</span>
|
||||
</template>
|
||||
<template id="barcode-access-denied">
|
||||
<span class="icon icon-warning"></span>
|
||||
<span class="is-size-5">Access denied</span><br/>
|
||||
<span>{% trans "Could not access camera" %}</span>
|
||||
</template>
|
||||
<template id="barcode-scanning">
|
||||
<span class="icon icon-barcode"></span>
|
||||
<span class="is-size-5">{% trans "Scanning..." context "barcode scanner" %}</span><br/>
|
||||
<span>{% trans "Align your book's barcode with the camera." %}</span>
|
||||
</template>
|
||||
<template id="barcode-found">
|
||||
<span class="icon icon-check"></span>
|
||||
<span class="is-size-5">{% trans "ISBN scanned" context "barcode scanner" %}</span><br/>
|
||||
{% trans "Searching for book:" context "followed by ISBN" %} <span class="isbn"></span>...
|
||||
</template>
|
||||
<div id="barcode-status" class="block"></div>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
<button class="button" type="button" data-modal-close>{% trans "Cancel" %}</button>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue