Improve support for instant loading with keyboard navigation

This commit is contained in:
squidfunk
2023-07-22 11:44:18 +01:00
parent ea9446e6cb
commit 405dfce64c
9 changed files with 35 additions and 29 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -240,7 +240,7 @@
</script> </script>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/bundle.220ee61c.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.7825f8c2.min.js' | url }}"></script>
{% for script in config.extra_javascript %} {% for script in config.extra_javascript %}
{% if script.path %} {% if script.path %}
{{ script | script_tag }} {{ script | script_tag }}

View File

@@ -10,7 +10,7 @@
<nav class="md-footer__inner md-grid" aria-label="{{ lang.t('footer') }}" {{ hidden }}> <nav class="md-footer__inner md-grid" aria-label="{{ lang.t('footer') }}" {{ hidden }}>
{% if page.previous_page %} {% if page.previous_page %}
{% set direction = lang.t("footer.previous") %} {% set direction = lang.t("footer.previous") %}
<a href="{{ page.previous_page.url | url }}" class="md-footer__link md-footer__link--prev" aria-label="{{ direction }}: {{ page.previous_page.title | e }}" rel="prev"> <a href="{{ page.previous_page.url | url }}" class="md-footer__link md-footer__link--prev" aria-label="{{ direction }}: {{ page.previous_page.title | e }}">
<div class="md-footer__button md-icon"> <div class="md-footer__button md-icon">
{% include ".icons/material/arrow-left.svg" %} {% include ".icons/material/arrow-left.svg" %}
</div> </div>
@@ -26,7 +26,7 @@
{% endif %} {% endif %}
{% if page.next_page %} {% if page.next_page %}
{% set direction = lang.t("footer.next") %} {% set direction = lang.t("footer.next") %}
<a href="{{ page.next_page.url | url }}" class="md-footer__link md-footer__link--next" aria-label="{{ direction }}: {{ page.next_page.title | e }}" rel="next"> <a href="{{ page.next_page.url | url }}" class="md-footer__link md-footer__link--next" aria-label="{{ direction }}: {{ page.next_page.title | e }}">
<div class="md-footer__title"> <div class="md-footer__title">
<span class="md-footer__direction"> <span class="md-footer__direction">
{{ direction }} {{ direction }}

View File

@@ -33,23 +33,23 @@
"rss.updated": "आरएसएस सेवातः नवीनतमं अद्यतनम्", "rss.updated": "आरएसएस सेवातः नवीनतमं अद्यतनम्",
"search": "अन्वेषण", "search": "अन्वेषण",
"search.placeholder": "अन्वेषण", "search.placeholder": "अन्वेषण",
"search.share": "साझां कुर्वन्तु", "search.share": "भजतु",
"search.reset": "तत् स्वच्छं कुर्वन्तु", "search.reset": "तत् स्वच्छं कुर्वन्तु",
"search.result.initializer": "अन्वेषणस्य आरम्भः", "search.result.initializer": "अन्वेषणस्य आरम्भः",
"search.result.placeholder": "अन्वेषणं आरभ्य लिखन्तु", "search.result.placeholder": "अन्वेषणं आरभ्य लिखन्तु",
"search.result.none": "मेलयुक्ताः दस्तावेजाः नास्ति", "search.result.none": "अभिलेखाः नास्ति",
"search.result.one": "१ मेलकर्ता दस्तावेज अस्ति", "search.result.one": "१ अभिलेख अस्ति",
"search.result.other": "# मेलनदस्तावेजाः सन्ति", "search.result.other": "# अभिलेखाः सन्ति",
"search.result.more.one": "अस्मिन् पृष्ठे १ अधिकं अस्ति", "search.result.more.one": "अस्मिन् पृष्ठे १ अन्यः अस्ति",
"search.result.more.other": "अस्मिन् पृष्ठे # अधिकाः सन्ति", "search.result.more.other": "अस्मिन् पृष्ठे # अन्ये सन्ति",
"search.result.term.missing": "असमेत", "search.result.term.missing": "शून्य",
"select.language": "भाषां चिनोतु", "select.language": "भाषां चिनोतु",
"select.version": "संस्करणं चिनोतु", "select.version": "संस्करणं चिनोतु",
"source": "भण्डारं गच्छन्तु", "source": "भण्डारं गच्छन्तु",
"source.file.contributors": "अंशदाता", "source.file.contributors": "अंशदाता",
"source.file.date.created": "ननिर्माणस्य तिथिः", "source.file.date.created": "ननिर्माणस्य तिथिः",
"source.file.date.updated": "परिवर्तनस्य तिथिः", "source.file.date.updated": "परिवर्तनस्य तिथिः",
"tabs": "दस्तावेजस्य प्रमुख", "tabs": "पट्टा",
"toc": "सामग्रीसारणी", "toc": "सामग्रीसारणी",
"top": "पुनः उपरिभागं प्रति गच्छन्तु" "top": "पुनः उपरिभागं प्रति गच्छन्तु"
}[key] }}{% endmacro %} }[key] }}{% endmacro %}

View File

@@ -178,7 +178,10 @@ keyboard$
case ",": case ",":
const prev = getOptionalElement<HTMLLinkElement>("link[rel=prev]") const prev = getOptionalElement<HTMLLinkElement>("link[rel=prev]")
if (typeof prev !== "undefined") if (typeof prev !== "undefined")
setLocation(prev) if (feature("navigation.instant"))
location$.next(new URL(prev.href))
else
setLocation(prev)
break break
/* Go to next page */ /* Go to next page */
@@ -186,7 +189,10 @@ keyboard$
case ".": case ".":
const next = getOptionalElement<HTMLLinkElement>("link[rel=next]") const next = getOptionalElement<HTMLLinkElement>("link[rel=next]")
if (typeof next !== "undefined") if (typeof next !== "undefined")
setLocation(next) if (feature("navigation.instant"))
location$.next(new URL(next.href))
else
setLocation(next)
break break
/* Expand navigation, see https://bit.ly/3ZjG5io */ /* Expand navigation, see https://bit.ly/3ZjG5io */

View File

@@ -227,6 +227,8 @@ export function setupInstantLoading(
// Meta tags // Meta tags
"title", "title",
"link[rel=prev]",
"link[rel=next]",
"link[rel=canonical]", "link[rel=canonical]",
"meta[name=author]", "meta[name=author]",
"meta[name=description]", "meta[name=description]",

View File

@@ -42,7 +42,6 @@
href="{{ page.previous_page.url | url }}" href="{{ page.previous_page.url | url }}"
class="md-footer__link md-footer__link--prev" class="md-footer__link md-footer__link--prev"
aria-label="{{ direction }}: {{ page.previous_page.title | e }}" aria-label="{{ direction }}: {{ page.previous_page.title | e }}"
rel="prev"
> >
<div class="md-footer__button md-icon"> <div class="md-footer__button md-icon">
{% include ".icons/material/arrow-left.svg" %} {% include ".icons/material/arrow-left.svg" %}
@@ -65,7 +64,6 @@
href="{{ page.next_page.url | url }}" href="{{ page.next_page.url | url }}"
class="md-footer__link md-footer__link--next" class="md-footer__link md-footer__link--next"
aria-label="{{ direction }}: {{ page.next_page.title | e }}" aria-label="{{ direction }}: {{ page.next_page.title | e }}"
rel="next"
> >
<div class="md-footer__title"> <div class="md-footer__title">
<span class="md-footer__direction"> <span class="md-footer__direction">