mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2025-01-02 13:28:43 +00:00
guided tour for book search
Adds a guided tour for book search page including logic for differing messages depending on what results are visible.
This commit is contained in:
Hugh Rundle
parent
0e06143c31
commit
fef66a7cfe
3 changed files with 203 additions and 6 deletions
191
bookwyrm/templates/guided_tour/search.html
Normal file
191
bookwyrm/templates/guided_tour/search.html
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
{% load i18n %}
|
||||
|
||||
<script>
|
||||
|
||||
let localResult = document.querySelector(".local-book-search-result");
|
||||
let remoteResult = document.querySelector(".remote-book-search-result");
|
||||
let otherCatalogues = document.querySelector("#load-from-other-catalogues");
|
||||
let manuallyAdd = document.querySelector("#manually-add-book");
|
||||
const tour = new Shepherd.Tour({
|
||||
exitOnEsc: true,
|
||||
});
|
||||
|
||||
console.log("remote", remoteResult)
|
||||
|
||||
if (remoteResult) {
|
||||
tour.addStep(
|
||||
{
|
||||
text: "{% trans 'If the book you are looking for is available on a remote catalogue such as Open Library, click on' %}\
|
||||
<code>\
|
||||
{% trans 'Import book' %}\
|
||||
</code>.",
|
||||
title: "{% trans 'Searching' %}",
|
||||
attachTo: {
|
||||
element: ".remote-book-search-result",
|
||||
on: "top",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
disableGuidedTour(csrf_token);
|
||||
return this.complete();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'End Tour' %}",
|
||||
classes: "is-danger guided-tour-cancel-button",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
});
|
||||
} else if (localResult) {
|
||||
tour.addStep(
|
||||
{
|
||||
text: "{% trans 'If the book you are looking for is already on this server, you can click on the title to go to the book\'s page.' %}",
|
||||
title: "{% trans 'Searching' %}",
|
||||
attachTo: {
|
||||
element: ".local-book-search-result",
|
||||
on: "top",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
disableGuidedTour(csrf_token);
|
||||
return this.complete();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'End Tour' %}",
|
||||
classes: "is-danger guided-tour-cancel-button",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (otherCatalogues) {
|
||||
tour.addStep({
|
||||
text: "{% trans 'If the book you are looking for is not listed, try loading more records from other sources like Open Library or Inventaire.' %}",
|
||||
title: "{% trans 'Load more records' %}",
|
||||
attachTo: {
|
||||
element: "#load-from-other-catalogues",
|
||||
on: "right",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
if (manuallyAdd) {
|
||||
tour.addSteps([
|
||||
{
|
||||
text: "{% trans 'If your book is not in the results, try adjusting your search terms.' %}",
|
||||
title: "{% trans 'Search again' %}",
|
||||
attachTo: {
|
||||
element: '#search-page-input',
|
||||
on: "right",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'If you still cannot find your book, you can add a record manually.' %}",
|
||||
title: "{% trans 'Add a record manally' %}",
|
||||
attachTo: {
|
||||
element: "#manually-add-book",
|
||||
on: "right",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
}])
|
||||
}
|
||||
|
||||
tour.start()
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
// {
|
||||
// text: "{% trans 'Groups can have group-curated lists. We haven\'t discussed lists yet, so now let\s fix that.' %}\
|
||||
// <br><br>\
|
||||
// {% trans 'Click on the button to create a list.' %}",
|
||||
// title: "{% trans 'Group lists' %}",
|
||||
// attachTo: {
|
||||
// element: "#create_group_list_button",
|
||||
// on: "right",
|
||||
// },
|
||||
// buttons: [
|
||||
// {
|
||||
// action() {
|
||||
// return this.back();
|
||||
// },
|
||||
// secondary: true,
|
||||
// text: "{% trans 'Back' %}",
|
||||
// },
|
||||
// {
|
||||
// action() {
|
||||
// return this.next();
|
||||
// },
|
||||
// text: "{% trans 'Next' %}",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// text: "{% trans 'todo' %}",
|
||||
// title: "{% trans 'TODO' %}",
|
||||
// buttons: [
|
||||
// {
|
||||
// action() {
|
||||
// return this.complete();
|
||||
// },
|
||||
// text: "{% trans 'Ok' %}",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
{% with results|first as local_results %}
|
||||
<ul class="block">
|
||||
{% for result in local_results.results %}
|
||||
<li class="pd-4 mb-5">
|
||||
<li class="pd-4 mb-5 local-book-search-result">
|
||||
<div class="columns is-mobile is-gapless mb-0">
|
||||
<div class="column is-cover">
|
||||
{% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' %}
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<details class="details-panel box" open>
|
||||
{% endif %}
|
||||
{% if not result_set.connector.local %}
|
||||
<summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2">
|
||||
<summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2 remote-book-search-result">
|
||||
<span class="mb-0 title is-5">
|
||||
{% trans 'Results from' %}
|
||||
<a href="{{ result_set.connector.base_url }}" target="_blank">{{ result_set.connector.name|default:result_set.connector.identifier }}</a>
|
||||
|
|
@ -102,11 +102,11 @@
|
|||
<p class="block">
|
||||
{% if request.user.is_authenticated %}
|
||||
{% if not remote %}
|
||||
<a href="{{ request.path }}?q={{ query }}&type=book&remote=true">
|
||||
<a href="{{ request.path }}?q={{ query }}&type=book&remote=true" id="load-from-other-catalogues">
|
||||
{% trans "Load results from other catalogues" %}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{% url 'create-book' %}">
|
||||
<a href="{% url 'create-book' %}" id="manually-add-book">
|
||||
{% trans "Manually add book" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<form class="block" action="{% url 'search' %}" method="GET">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input type="text" class="input" name="q" value="{{ query }}" aria-label="{% trans 'Search query' %}">
|
||||
<input type="text" class="input" name="q" value="{{ query }}" aria-label="{% trans 'Search query' %}" id="search-page-input">
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="select" aria-label="{% trans 'Search type' %}">
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="block">
|
||||
<section class="block" id="search-results-block">
|
||||
{% if not results %}
|
||||
<p>
|
||||
<em>{% blocktrans %}No results found for "{{ query }}"{% endblocktrans %}</em>
|
||||
|
|
@ -68,3 +68,9 @@
|
|||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{% if user.show_guided_tour %}
|
||||
{% include 'guided_tour/search.html' %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue