diff --git a/bookwyrm/settings.py b/bookwyrm/settings.py
index 7a37499e..0fbe3b73 100644
--- a/bookwyrm/settings.py
+++ b/bookwyrm/settings.py
@@ -21,7 +21,7 @@ RELEASE_API = env(
PAGE_LENGTH = env("PAGE_LENGTH", 15)
DEFAULT_LANGUAGE = env("DEFAULT_LANGUAGE", "English")
-JS_CACHE = "a60e5a55"
+JS_CACHE = "c7144efb"
# email
EMAIL_BACKEND = env("EMAIL_BACKEND", "django.core.mail.backends.smtp.EmailBackend")
diff --git a/bookwyrm/static/js/vendor/tabs.js b/bookwyrm/static/js/tabs.js
similarity index 70%
rename from bookwyrm/static/js/vendor/tabs.js
rename to bookwyrm/static/js/tabs.js
index 0535cc86..1dcb0cac 100644
--- a/bookwyrm/static/js/vendor/tabs.js
+++ b/bookwyrm/static/js/tabs.js
@@ -1,11 +1,11 @@
/* exported TabGroup */
/*
-* The content below is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-* Heavily modified to web component by Zach Leatherman
-* Modified back to vanilla JavaScript with support for Bulma markup and nested tabs by Ned Zimmerman
-*/
+ * The content below is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ * Heavily modified to web component by Zach Leatherman
+ * Modified back to vanilla JavaScript with support for Bulma markup and nested tabs by Ned Zimmerman
+ */
class TabGroup {
constructor(container) {
this.container = container;
@@ -15,7 +15,7 @@ class TabGroup {
this.panels = this.container.querySelectorAll(':scope > [role="tabpanel"]');
this.delay = this.determineDelay();
- if(!this.tablist || !this.tabs.length || !this.panels.length) {
+ if (!this.tablist || !this.tabs.length || !this.panels.length) {
return;
}
@@ -32,7 +32,7 @@ class TabGroup {
left: 37,
up: 38,
right: 39,
- down: 40
+ down: 40,
};
}
@@ -42,23 +42,21 @@ class TabGroup {
37: -1,
38: -1,
39: 1,
- 40: 1
+ 40: 1,
};
}
initTabs() {
let count = 0;
- for(let tab of this.tabs) {
+
+ for (let tab of this.tabs) {
let isSelected = tab.getAttribute("aria-selected") === "true";
+
tab.setAttribute("tabindex", isSelected ? "0" : "-1");
- tab.addEventListener('click', this.clickEventListener.bind(this));
- tab.addEventListener('keydown', this.keydownEventListener.bind(this));
- tab.addEventListener('keyup', this.keyupEventListener.bind(this));
-
- if (isSelected) {
- tab.scrollIntoView();
- }
+ tab.addEventListener("click", this.clickEventListener.bind(this));
+ tab.addEventListener("keydown", this.keydownEventListener.bind(this));
+ tab.addEventListener("keyup", this.keyupEventListener.bind(this));
tab.index = count++;
}
@@ -68,8 +66,9 @@ class TabGroup {
let selectedPanelId = this.tablist
.querySelector('[role="tab"][aria-selected="true"]')
.getAttribute("aria-controls");
- for(let panel of this.panels) {
- if(panel.getAttribute("id") !== selectedPanelId) {
+
+ for (let panel of this.panels) {
+ if (panel.getAttribute("id") !== selectedPanelId) {
panel.setAttribute("hidden", "");
}
panel.setAttribute("tabindex", "0");
@@ -86,16 +85,18 @@ class TabGroup {
// Handle keydown on tabs
keydownEventListener(event) {
- var key = event.keyCode;
+ const key = event.keyCode;
switch (key) {
case this.keys.end:
event.preventDefault();
+
// Activate last tab
this.activateTab(this.tabs[this.tabs.length - 1]);
break;
case this.keys.home:
event.preventDefault();
+
// Activate first tab
this.activateTab(this.tabs[0]);
break;
@@ -111,7 +112,7 @@ class TabGroup {
// Handle keyup on tabs
keyupEventListener(event) {
- var key = event.keyCode;
+ const key = event.keyCode;
switch (key) {
case this.keys.left:
@@ -125,17 +126,16 @@ class TabGroup {
// only up and down arrow should function.
// In all other cases only left and right arrow function.
determineOrientation(event) {
- var key = event.keyCode;
- var vertical = this.tablist.getAttribute('aria-orientation') == 'vertical';
- var proceed = false;
+ const key = event.keyCode;
+ const vertical = this.tablist.getAttribute("aria-orientation") == "vertical";
+ let proceed = false;
if (vertical) {
if (key === this.keys.up || key === this.keys.down) {
event.preventDefault();
proceed = true;
}
- }
- else {
+ } else {
if (key === this.keys.left || key === this.keys.right) {
proceed = true;
}
@@ -149,22 +149,21 @@ class TabGroup {
// Either focus the next, previous, first, or last tab
// depending on key pressed
switchTabOnArrowPress(event) {
- var pressed = event.keyCode;
+ const pressed = event.keyCode;
for (let tab of this.tabs) {
- tab.addEventListener('focus', this.focusEventHandler.bind(this));
+ tab.addEventListener("focus", this.focusEventHandler.bind(this));
}
if (this.direction[pressed]) {
- var target = event.target;
+ const target = event.target;
+
if (target.index !== undefined) {
if (this.tabs[target.index + this.direction[pressed]]) {
this.tabs[target.index + this.direction[pressed]].focus();
- }
- else if (pressed === this.keys.left || pressed === this.keys.up) {
+ } else if (pressed === this.keys.left || pressed === this.keys.up) {
this.focusLastTab();
- }
- else if (pressed === this.keys.right || pressed == this.keys.down) {
+ } else if (pressed === this.keys.right || pressed == this.keys.down) {
this.focusFirstTab();
}
}
@@ -172,8 +171,8 @@ class TabGroup {
}
// Activates any given tab panel
- activateTab (tab, setFocus) {
- if(tab.getAttribute("role") !== "tab") {
+ activateTab(tab, setFocus) {
+ if (tab.getAttribute("role") !== "tab") {
tab = tab.closest('[role="tab"]');
}
@@ -183,19 +182,19 @@ class TabGroup {
this.deactivateTabs();
// Remove tabindex attribute
- tab.removeAttribute('tabindex');
+ tab.removeAttribute("tabindex");
// Set the tab as selected
- tab.setAttribute('aria-selected', 'true');
+ tab.setAttribute("aria-selected", "true");
// Give the tab is-active class
- tab.classList.add('is-active');
+ tab.classList.add("is-active");
// Get the value of aria-controls (which is an ID)
- var controls = tab.getAttribute('aria-controls');
+ const controls = tab.getAttribute("aria-controls");
// Remove hidden attribute from tab panel to make it visible
- document.getElementById(controls).removeAttribute('hidden');
+ document.getElementById(controls).removeAttribute("hidden");
// Set focus when required
if (setFocus) {
@@ -206,14 +205,14 @@ class TabGroup {
// Deactivate all tabs and tab panels
deactivateTabs() {
for (let tab of this.tabs) {
- tab.classList.remove('is-active');
- tab.setAttribute('tabindex', '-1');
- tab.setAttribute('aria-selected', 'false');
- tab.removeEventListener('focus', this.focusEventHandler.bind(this));
+ tab.classList.remove("is-active");
+ tab.setAttribute("tabindex", "-1");
+ tab.setAttribute("aria-selected", "false");
+ tab.removeEventListener("focus", this.focusEventHandler.bind(this));
}
for (let panel of this.panels) {
- panel.setAttribute('hidden', 'hidden');
+ panel.setAttribute("hidden", "hidden");
}
}
@@ -228,15 +227,15 @@ class TabGroup {
// Determine whether there should be a delay
// when user navigates with the arrow keys
determineDelay() {
- var hasDelay = this.tablist.hasAttribute('data-delay');
- var delay = 0;
+ const hasDelay = this.tablist.hasAttribute("data-delay");
+ let delay = 0;
if (hasDelay) {
- var delayValue = this.tablist.getAttribute('data-delay');
+ const delayValue = this.tablist.getAttribute("data-delay");
+
if (delayValue) {
delay = delayValue;
- }
- else {
+ } else {
// If no value is specified, default to 300ms
delay = 300;
}
@@ -246,7 +245,7 @@ class TabGroup {
}
focusEventHandler(event) {
- var target = event.target;
+ const target = event.target;
setTimeout(this.checkTabFocus.bind(this), this.delay, target);
}
diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index e15b656c..60e3d4fd 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -386,6 +386,6 @@
{% endblock %}
{% block scripts %}
-
+
{% endblock %}
diff --git a/bookwyrm/templates/feed/layout.html b/bookwyrm/templates/feed/layout.html
index 5697f266..5083c0ab 100644
--- a/bookwyrm/templates/feed/layout.html
+++ b/bookwyrm/templates/feed/layout.html
@@ -31,5 +31,5 @@
{% endblock %}
{% block scripts %}
-
+
{% endblock %}