MDL-69301 theme_boost: convert aria.js to es6 module
authorShamim Rezaie <shamim@moodle.com>
Wed, 16 Sep 2020 13:25:36 +0000 (23:25 +1000)
committerShamim Rezaie <shamim@moodle.com>
Wed, 2 Dec 2020 17:22:09 +0000 (04:22 +1100)
theme/boost/amd/build/aria.min.js
theme/boost/amd/build/aria.min.js.map
theme/boost/amd/build/loader.min.js
theme/boost/amd/build/loader.min.js.map
theme/boost/amd/src/aria.js
theme/boost/amd/src/loader.js

index 447fd66..e266186 100644 (file)
Binary files a/theme/boost/amd/build/aria.min.js and b/theme/boost/amd/build/aria.min.js differ
index 2098af4..509f868 100644 (file)
Binary files a/theme/boost/amd/build/aria.min.js.map and b/theme/boost/amd/build/aria.min.js.map differ
index baacba5..188f865 100644 (file)
Binary files a/theme/boost/amd/build/loader.min.js and b/theme/boost/amd/build/loader.min.js differ
index bcde39c..63d1fc7 100644 (file)
Binary files a/theme/boost/amd/build/loader.min.js.map and b/theme/boost/amd/build/loader.min.js.map differ
index b2b96b0..812aad7 100644 (file)
  * @copyright  2018 Damyon Wiese <damyon@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
-define(['jquery', 'core/pending'], function($, Pending) {
-    return {
-        init: function() {
-            // Drop downs from bootstrap don't support keyboard accessibility by default.
-            var focusEnd = false,
-                setFocusEnd = function() {
-                    focusEnd = true;
-                },
-                getFocusEnd = function() {
-                    var result = focusEnd;
-                    focusEnd = false;
-                    return result;
-                };
-
-            // Special handling for "up" keyboard control.
-            $('[data-toggle="dropdown"]').keydown(function(e) {
-                var trigger = e.which || e.keyCode,
-                    expanded;
-
-                // Up key opens the menu at the end.
-                if (trigger == 38) {
-                    // Focus the end of the menu, not the beginning.
-                    setFocusEnd();
-                }
 
-                // Escape key only closes the menu, it doesn't open it.
-                if (trigger == 27) {
-                    expanded = $(e.target).attr('aria-expanded');
-                    e.preventDefault();
-                    if (expanded == "false") {
-                        $(e.target).click();
-                    }
-                }
+import {end, escape, arrowUp, arrowDown, home, enter, space} from 'core/key_codes';
+import $ from 'jquery';
+import Pending from 'core/pending';
 
-                // Space key or Enter key opens the menu.
-                if (trigger == 32 || trigger == 13) {
-                    // Cancel random scroll.
-                    e.preventDefault();
-                    // Open the menu instead.
-                    $(e.target).click();
+/**
+ * Drop downs from bootstrap don't support keyboard accessibility by default.
+ */
+const dropdownFix = () => {
+    let focusEnd = false;
+    const setFocusEnd = () => {
+        focusEnd = true;
+    };
+    const getFocusEnd = () => {
+        const result = focusEnd;
+        focusEnd = false;
+        return result;
+    };
+
+    // Special handling for "up" keyboard control.
+    document.addEventListener('keydown', e => {
+        if (e.target.matches('[data-toggle="dropdown"]')) {
+            const trigger = e.which;
+
+            // Up key opens the menu at the end.
+            if (trigger == arrowUp) {
+                // Focus the end of the menu, not the beginning.
+                setFocusEnd();
+            }
+
+            // Escape key only closes the menu, it doesn't open it.
+            if (trigger == escape) {
+                const expanded = e.target.getAttribute('aria-expanded');
+                e.preventDefault();
+                if (expanded == "false") {
+                    e.target.click();
                 }
-            });
-
-            // Special handling for navigation keys when menu is open.
-            var shiftFocus = function(element) {
-                var delayedFocus = function(pendingPromise) {
-                    $(this).focus();
-                    pendingPromise.resolve();
-                }.bind(element);
-                setTimeout(delayedFocus, 50, new Pending('core/aria:delayed-focus'));
-            };
-
-            $('.dropdown').on('shown.bs.dropdown', function(e) {
-                // We need to focus on the first menuitem.
-                var menu = $(e.target).find('[role="menu"]'),
-                    menuItems = false,
-                    foundMenuItem = false;
-
-                if (menu) {
-                    menuItems = $(menu).find('[role="menuitem"]');
+            }
+
+            // Space key or Enter key opens the menu.
+            if (trigger == space || trigger == enter) {
+                // Cancel random scroll.
+                e.preventDefault();
+                // Open the menu instead.
+                e.target.click();
+            }
+        }
+    });
+
+    // Special handling for navigation keys when menu is open.
+    const shiftFocus = element => {
+        const delayedFocus = pendingPromise => {
+            element.focus();
+            pendingPromise.resolve();
+        };
+        setTimeout(delayedFocus, 50, new Pending('core/aria:delayed-focus'));
+    };
+
+    $('.dropdown').on('shown.bs.dropdown', e => {
+        // We need to focus on the first menuitem.
+        const menu = e.target.querySelector('[role="menu"]');
+        let menuItems = false;
+        let foundMenuItem = false;
+
+        if (menu) {
+            menuItems = menu.querySelectorAll('[role="menuitem"]');
+        }
+        if (menuItems && menuItems.length > 0) {
+            if (getFocusEnd()) {
+                foundMenuItem = menuItems[menuItems.length - 1];
+            } else {
+                // The first menu entry, pretty reasonable.
+                foundMenuItem = menuItems[0];
+            }
+        }
+        if (foundMenuItem) {
+            shiftFocus(foundMenuItem);
+        }
+    });
+    // Search for menu items by finding the first item that has
+    // text starting with the typed character (case insensitive).
+    document.addEventListener('keypress', e => {
+        if (e.target.matches('.dropdown [role="menu"] [role="menuitem"]')) {
+            const trigger = String.fromCharCode(e.which).toLowerCase();
+            const menu = e.target.closest('[role="menu"]');
+
+            if (!menu) {
+                return;
+            }
+            const menuItems = menu.querySelectorAll('[role="menuitem"]');
+            if (!menuItems) {
+                return;
+            }
+
+            for (let i = 0; i < menuItems.length; i++) {
+                const item = menuItems[i];
+                const itemText = item.text.trim().toLowerCase();
+                if (itemText.indexOf(trigger) == 0) {
+                    shiftFocus(item);
+                    break;
                 }
-                if (menuItems && menuItems.length > 0) {
-                    if (getFocusEnd()) {
-                        foundMenuItem = menuItems[menuItems.length - 1];
-                    } else {
-                        // The first menu entry, pretty reasonable.
-                        foundMenuItem = menuItems[0];
+            }
+        }
+    });
+
+    // Keyboard navigation for arrow keys, home and end keys.
+    document.addEventListener('keydown', e => {
+        if (e.target.matches('.dropdown [role="menu"] [role="menuitem"]')) {
+            const trigger = e.which;
+            let next = false;
+            const menu = e.target.closest('[role="menu"]');
+
+            if (!menu) {
+                return;
+            }
+            const menuItems = menu.querySelectorAll('[role="menuitem"]');
+            if (!menuItems) {
+                return;
+            }
+            // Down key.
+            if (trigger == arrowDown) {
+                for (let i = 0; i < menuItems.length - 1; i++) {
+                    if (menuItems[i] == e.target) {
+                        next = menuItems[i + 1];
+                        break;
                     }
                 }
-                if (foundMenuItem) {
-                    shiftFocus(foundMenuItem);
-                }
-            });
-            // Search for menu items by finding the first item that has
-            // text starting with the typed character (case insensitive).
-            $('.dropdown [role="menu"] [role="menuitem"]').keypress(function(e) {
-                var trigger = String.fromCharCode(e.which || e.keyCode),
-                    menu = $(e.target).closest('[role="menu"]'),
-                    i = 0,
-                    menuItems = false,
-                    item,
-                    itemText;
-
-                if (!menu) {
-                    return;
-                }
-                menuItems = $(menu).find('[role="menuitem"]');
-                if (!menuItems) {
-                    return;
+                if (!next) {
+                    // Wrap to first item.
+                    next = menuItems[0];
                 }
 
-                trigger = trigger.toLowerCase();
-                for (i = 0; i < menuItems.length; i++) {
-                    item = $(menuItems[i]);
-                    itemText = item.text().trim().toLowerCase();
-                    if (itemText.indexOf(trigger) == 0) {
-                        shiftFocus(item);
+            } else if (trigger == arrowUp) {
+                // Up key.
+                for (let i = 1; i < menuItems.length; i++) {
+                    if (menuItems[i] == e.target) {
+                        next = menuItems[i - 1];
                         break;
                     }
                 }
-            });
-
-            // Keyboard navigation for arrow keys, home and end keys.
-            $('.dropdown [role="menu"] [role="menuitem"]').keydown(function(e) {
-                var trigger = e.which || e.keyCode,
-                    next = false,
-                    menu = $(e.target).closest('[role="menu"]'),
-                    i = 0,
-                    menuItems = false;
-                if (!menu) {
-                    return;
-                }
-                menuItems = $(menu).find('[role="menuitem"]');
-                if (!menuItems) {
-                    return;
+                if (!next) {
+                    // Wrap to last item.
+                    next = menuItems[menuItems.length - 1];
                 }
-                // Down key.
-                if (trigger == 40) {
-                    for (i = 0; i < menuItems.length - 1; i++) {
-                        if (menuItems[i] == e.target) {
-                            next = menuItems[i + 1];
-                            break;
-                        }
-                    }
-                    if (!next) {
-                        // Wrap to first item.
-                        next = menuItems[0];
-                    }
 
-                } else if (trigger == 38) {
-                    // Up key.
-                    for (i = 1; i < menuItems.length; i++) {
-                        if (menuItems[i] == e.target) {
-                            next = menuItems[i - 1];
-                            break;
-                        }
-                    }
-                    if (!next) {
-                        // Wrap to last item.
-                        next = menuItems[menuItems.length - 1];
-                    }
+            } else if (trigger == home) {
+                // Home key.
+                next = menuItems[0];
 
-                } else if (trigger == 36) {
-                    // Home key.
-                    next = menuItems[0];
+            } else if (trigger == end) {
+                // End key.
+                next = menuItems[menuItems.length - 1];
+            }
+            // Variable next is set if we do want to act on the keypress.
+            if (next) {
+                e.preventDefault();
+                shiftFocus(next);
+            }
+            return;
+        }
+    });
 
-                } else if (trigger == 35) {
-                    // End key.
-                    next = menuItems[menuItems.length - 1];
-                }
-                // Variable next is set if we do want to act on the keypress.
-                if (next) {
-                    e.preventDefault();
-                    shiftFocus(next);
-                }
-                return;
-            });
-            $('.dropdown').on('hidden.bs.dropdown', function(e) {
-                // We need to focus on the menu trigger.
-                var trigger = $(e.target).find('[data-toggle="dropdown"]');
-                if (trigger) {
-                    shiftFocus(trigger);
-                }
-            });
-
-            // After page load, focus on any element with special autofocus attribute.
-            window.addEventListener("load", () => {
-                const alerts = document.querySelectorAll('[data-aria-autofocus="true"][role="alert"]');
-                Array.prototype.forEach.call(alerts, autofocusElement => {
-                    // According to the specification an role="alert" region is only read out on change to the content
-                    // of that region.
-                    autofocusElement.innerHTML += ' ';
-                    autofocusElement.removeAttribute('data-aria-autofocus');
-                });
-            });
+    $('.dropdown').on('hidden.bs.dropdown', e => {
+        // We need to focus on the menu trigger.
+        const trigger = e.target.querySelector('[data-toggle="dropdown"]');
+        if (trigger) {
+            shiftFocus(trigger);
         }
-    };
-});
+    });
+};
+
+/**
+ * After page load, focus on any element with special autofocus attribute.
+ */
+const autoFocus = () => {
+    window.addEventListener("load", () => {
+        const alerts = document.querySelectorAll('[data-aria-autofocus="true"][role="alert"]');
+        Array.prototype.forEach.call(alerts, autofocusElement => {
+            // According to the specification an role="alert" region is only read out on change to the content
+            // of that region.
+            autofocusElement.innerHTML += ' ';
+            autofocusElement.removeAttribute('data-aria-autofocus');
+        });
+    });
+};
+
+export const init = () => {
+    dropdownFix();
+    autoFocus();
+};
index a050c6f..c5b8ea5 100644 (file)
@@ -25,7 +25,7 @@
  */
 
 import $ from 'jquery';
-import Aria from './aria';
+import * as Aria from './aria';
 import Bootstrap from './bootstrap/index';
 import Pending from 'core/pending';
 import Scroll from './scroll';