mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-11-29 21:11:16 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2457 from viviicat/use-html-templates

Browse source 
make use of templates instead of hidden divs which is more elegant
This commit is contained in:
Mouse Reeve 2022-12-04 11:24:04 -08:00 committed by GitHub
commit 300573e66e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
bookwyrm/static/js/bookwyrm.js
View file

@ -628,9 +628,9 @@ let BookWyrm = new (class {
} }
function toggleStatus(status) { function toggleStatus(status) {
for (const child of statusNode.children) { const template = document.querySelector(`#barcode-${status}`);
BookWyrm.toggleContainer(child, !child.classList.contains(status));
} statusNode.replaceChildren(template ? template.content.cloneNode(true) : null);
} }
function initBarcodes(cameraId = null) { function initBarcodes(cameraId = null) {

94
bookwyrm/templates/search/barcode_modal.html
View file

@ -1,48 +1,46 @@
{% extends 'components/modal.html' %} {% extends 'components/modal.html' %}
{% load i18n %} {% load i18n %}
{% block modal-title %} {% block modal-title %}
{% blocktrans %} {% blocktrans %}
Scan Barcode Scan Barcode
{% endblocktrans %} {% endblocktrans %}
{% endblock %} {% endblock %}
{% block modal-body %} {% block modal-body %}
<div class="block"> <div class="block">
<div id="barcode-scanner"></div> <div id="barcode-scanner"></div>
</div> </div>
<div id="barcode-camera-list" class="select is-small"> <div id="barcode-camera-list" class="select is-small">
<select> <select>
</select> </select>
</div> </div>
<template id="barcode-grant-access">
<div id="barcode-status" class="block"> <span class="icon icon-lock"></span>
<div class="grant-access is-hidden"> <span class="is-size-5">{% trans "Requesting camera..." %}</span><br/>
<span class="icon icon-lock"></span> <span>{% trans "Grant access to the camera to scan a book's barcode." %}</span>
<span class="is-size-5">{% trans "Requesting camera..." %}</span><br/> </template>
<span>{% trans "Grant access to the camera to scan a book's barcode." %}</span> <template id="barcode-access-denied">
</div> <span class="icon icon-warning"></span>
<div class="access-denied is-hidden"> <span class="is-size-5">Access denied</span><br/>
<span class="icon icon-warning"></span> <span>{% trans "Could not access camera" %}</span>
<span class="is-size-5">Access denied</span><br/> </template>
<span>{% trans "Could not access camera" %}</span> <template id="barcode-scanning">
</div> <span class="icon icon-barcode"></span>
<div class="scanning is-hidden"> <span class="is-size-5">{% trans "Scanning..." context "barcode scanner" %}</span><br/>
<span class="icon icon-barcode"></span> <span>{% trans "Align your book's barcode with the camera." %}</span>
<span class="is-size-5">{% trans "Scanning..." context "barcode scanner" %}</span><br/> </template>
<span>{% trans "Align your book's barcode with the camera." %}</span> <template id="barcode-found">
</div> <span class="icon icon-check"></span>
<div class="found is-hidden"> <span class="is-size-5">{% trans "ISBN scanned" context "barcode scanner" %}</span><br/>
<span class="icon icon-check"></span> {% trans "Searching for book:" context "followed by ISBN" %} <span class="isbn"></span>...
<span class="is-size-5">{% trans "ISBN scanned" context "barcode scanner" %}</span><br/> </template>
{% trans "Searching for book:" context "followed by ISBN" %} <span class="isbn"></span>... <div id="barcode-status" class="block"></div>
</div> {% endblock %}
</div>
{% endblock %} {% block modal-footer %}
<button class="button" type="button" data-modal-close>{% trans "Cancel" %}</button>
{% block modal-footer %} {% endblock %}
<button class="button" type="button" data-modal-close>{% trans "Cancel" %}</button>
{% endblock %}