Merge pull request #1971 from bookwyrm-social/scroll-bug

Removes scrollIntoView script behavior for tabs

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")

bookwyrm/static/js/tabs.js

@@ -1,11 +1,11 @@
 /* exported TabGroup */
 
 /*
-* The content below is licensed according to the W3C Software License at
+ * The content below is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-* Heavily modified to web component by Zach Leatherman
+ * Heavily modified to web component by Zach Leatherman
-* Modified back to vanilla JavaScript with support for Bulma markup and nested tabs by Ned Zimmerman
+ * 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("click", this.clickEventListener.bind(this));
-            tab.addEventListener('keydown', this.keydownEventListener.bind(this));
+            tab.addEventListener("keydown", this.keydownEventListener.bind(this));
-            tab.addEventListener('keyup', this.keyupEventListener.bind(this));
+            tab.addEventListener("keyup", this.keyupEventListener.bind(this));
-
-            if (isSelected) {
-                tab.scrollIntoView();
-            }
 
             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;
+        const key = event.keyCode;
-        var vertical = this.tablist.getAttribute('aria-orientation') == 'vertical';
+        const vertical = this.tablist.getAttribute("aria-orientation") == "vertical";
-        var proceed = false;
+        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) {
+    activateTab(tab, setFocus) {
-        if(tab.getAttribute("role") !== "tab") {
+        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.classList.remove("is-active");
-            tab.setAttribute('tabindex', '-1');
+            tab.setAttribute("tabindex", "-1");
-            tab.setAttribute('aria-selected', 'false');
+            tab.setAttribute("aria-selected", "false");
-            tab.removeEventListener('focus', this.focusEventHandler.bind(this));
+            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');
+        const hasDelay = this.tablist.hasAttribute("data-delay");
-        var delay = 0;
+        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);
     }

bookwyrm/templates/book/book.html

@@ -386,6 +386,6 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{% static "js/vendor/tabs.js" %}?v={{ js_cache }}"></script>
+<script src="{% static "js/tabs.js" %}?v={{ js_cache }}"></script>
 <script src="{% static "js/autocomplete.js" %}?v={{ js_cache }}"></script>
 {% endblock %}

bookwyrm/templates/feed/layout.html

@@ -31,5 +31,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{% static "js/vendor/tabs.js" %}?v={{ js_cache }}"></script>
+<script src="{% static "js/tabs.js" %}?v={{ js_cache }}"></script>
 {% endblock %}