Merge pull request #563 from dmitrylyzo/focus_pageload

Add autofocus on page load

src/components/autoFocuser.js

@@ -0,0 +1,101 @@
+define(["focusManager", "layoutManager"], function (focusManager, layoutManager) {
+    "use strict";
+
+    /**
+     * Previously selected element.
+     */
+    var activeElement;
+
+    /**
+     * Returns true if AutoFocuser is enabled.
+     */
+    function isEnabled() {
+        return layoutManager.tv;
+    }
+
+    /**
+     * Start AutoFocuser
+     */
+    function enable() {
+        if (!isEnabled()) {
+            return;
+        }
+
+        window.addEventListener("focusin", function (e) {
+            activeElement = e.target;
+        });
+
+        console.log("AutoFocuser enabled");
+    }
+
+    /**
+     * Create an array from some source.
+     */
+    var arrayFrom = Array.prototype.from || function (src) {
+        return Array.prototype.slice.call(src);
+    }
+
+    /**
+     * Set focus on a suitable element, taking into account the previously selected.
+     */
+    function autoFocus(container) {
+        if (!isEnabled()) {
+            return;
+        }
+
+        container = container || document.body;
+
+        var candidates = [];
+
+        if (activeElement) {
+            // These elements are recreated
+            if (activeElement.classList.contains("btnPreviousPage")) {
+                candidates.push(container.querySelector(".btnPreviousPage"));
+                candidates.push(container.querySelector(".btnNextPage"));
+            } else if (activeElement.classList.contains("btnNextPage")) {
+                candidates.push(container.querySelector(".btnNextPage"));
+                candidates.push(container.querySelector(".btnPreviousPage"));
+            } else if (activeElement.classList.contains("btnSelectView")) {
+                candidates.push(container.querySelector(".btnSelectView"));
+            }
+
+            candidates.push(activeElement);
+        }
+
+        candidates = candidates.concat(arrayFrom(container.querySelectorAll(".btnResume")));
+        candidates = candidates.concat(arrayFrom(container.querySelectorAll(".btnPlay")));
+
+        var focusedElement;
+
+        candidates.every(function (element) {
+            if (focusManager.isCurrentlyFocusable(element)) {
+                focusManager.focus(element);
+                focusedElement = element;
+                return false;
+            }
+
+            return true;
+        });
+
+        if (!focusedElement) {
+            // FIXME: Multiple itemsContainers
+            var itemsContainer = container.querySelector(".itemsContainer");
+
+            if (itemsContainer) {
+                focusedElement = focusManager.autoFocus(itemsContainer);
+            }
+        }
+
+        if (!focusedElement) {
+            focusedElement = focusManager.autoFocus(container);
+        }
+
+        return focusedElement;
+    }
+
+    return {
+        isEnabled: isEnabled,
+        enable: enable,
+        autoFocus: autoFocus
+    };
+});

src/controllers/addserver.js

@@ -46,6 +46,10 @@ define(["appSettings", "loading", "browser", "emby-button"], function(appSetting
         view.querySelector(".addServerForm").addEventListener("submit", onServerSubmit);
         view.querySelector(".btnCancel").addEventListener("click", goBack);
 
+        require(["autoFocuser"], function (autoFocuser) {
+            autoFocuser.autoFocus(view);
+        });
+
         function onServerSubmit(e) {
             submitServer(view);
             e.preventDefault();

src/controllers/itemdetailpage.js

@@ -612,24 +612,9 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
             hideAll(page, "btnDownload", true);
         }
 
-        try {
+        require(["autoFocuser"], function (autoFocuser) {
-            require(["focusManager"], function (focusManager) {
+            autoFocuser.autoFocus(page);
-                [".btnResume", ".btnPlay"].every(function (cls) {
+        });
-                    var elems = page.querySelectorAll(cls);
-
-                    for (var i = 0; i < elems.length; i++) {
-                        if (focusManager.isCurrentlyFocusable(elems[i])) {
-                            focusManager.focus(elems[i]);
-                            return false;
-                        }
-                    }
-
-                    return true;
-                });
-            });
-        } catch (e) {
-            console.log(e);
-        }
     }
 
     function logoImageUrl(item, apiClient, options) {
@@ -1724,6 +1709,12 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
             hideAll(page, "btnPlay", false);
             hideAll(page, "btnShuffle", false);
         }
+
+        // HACK: Call autoFocuser again because btnPlay may be hidden, but focused by reloadFromItem
+        // FIXME: Sometimes focus does not move until all (?) sections are loaded
+        require(["autoFocuser"], function (autoFocuser) {
+            autoFocuser.autoFocus(page);
+        });
     }
 
     function renderCollectionItemType(page, parentItem, type, items) {

src/controllers/livetv/livetvchannels.js

@@ -102,6 +102,10 @@ define(["cardBuilder", "imageLoader", "libraryBrowser", "loading", "events", "em
                 renderChannels(context, result);
                 loading.hide();
                 isLoading = false;
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(view);
+                });
             });
         }
 

src/controllers/livetv/livetvsuggested.js

@@ -49,6 +49,10 @@ define(["layoutManager", "userSettings", "inputManager", "loading", "globalize",
                 showAirEndTime: true
             });
             loading.hide();
+
+            require(["autoFocuser"], function (autoFocuser) {
+                autoFocuser.autoFocus(page);
+            });
         });
     }
 

src/controllers/loginpage.js

@@ -116,6 +116,10 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
             view.querySelector(".visualLoginForm").classList.remove("hide");
             view.querySelector(".manualLoginForm").classList.add("hide");
             view.querySelector(".btnManual").classList.remove("hide");
+
+            require(["autoFocuser"], function (autoFocuser) {
+                autoFocuser.autoFocus(view);
+            });
         }
 
         view.querySelector("#divUsers").addEventListener("click", function(e) {

src/controllers/movies/moviecollections.js

@@ -172,6 +172,10 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
                 loading.hide();
                 isLoading = false;
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(page);
+                });
             });
         }
 

src/controllers/movies/movies.js

@@ -77,6 +77,10 @@ define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser",
 
             isLoading = false;
             loading.hide();
+
+            require(["autoFocuser"], function (autoFocuser) {
+                autoFocuser.autoFocus(tabContent);
+            });
         }
 
         function getItemsHtml(items) {

src/controllers/movies/moviesrecommended.js

@@ -36,6 +36,9 @@ define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu"
                 showYear: true,
                 centerText: true
             });
+
+            // FIXME: Wait for all sections to load
+            autoFocus(page);
         });
     }
 
@@ -76,6 +79,9 @@ define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu"
                 showYear: true,
                 centerText: true
             });
+
+            // FIXME: Wait for all sections to load
+            autoFocus(page);
         });
     }
 
@@ -147,6 +153,15 @@ define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu"
             var recs = page.querySelector(".recommendations");
             recs.innerHTML = html;
             imageLoader.lazyChildren(recs);
+
+            // FIXME: Wait for all sections to load
+            autoFocus(page);
+        });
+    }
+
+    function autoFocus(page) {
+        require(["autoFocuser"], function (autoFocuser) {
+            autoFocuser.autoFocus(page);
         });
     }
 

src/controllers/music/musicalbums.js

@@ -160,6 +160,10 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
                 loading.hide();
                 isLoading = false;
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(tabContent);
+                });
             });
         }
 

src/controllers/music/musicartists.js

@@ -144,6 +144,10 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
                 loading.hide();
                 isLoading = false;
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(tabContent);
+                });
             });
         }
 

src/controllers/music/musicgenres.js

@@ -87,6 +87,10 @@ define(["libraryBrowser", "cardBuilder", "apphost", "imageLoader", "loading"], f
                 imageLoader.lazyChildren(elem);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
                 loading.hide();
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(context);
+                });
             });
         }
 

src/controllers/music/musicplaylists.js

@@ -58,6 +58,10 @@ define(["libraryBrowser", "cardBuilder", "apphost", "imageLoader", "loading"], f
                 imageLoader.lazyChildren(elem);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
                 loading.hide();
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(context);
+                });
             });
         }
 

src/controllers/music/musicrecommended.js

@@ -59,6 +59,10 @@ define(["browser", "layoutManager", "userSettings", "inputManager", "loading", "
             });
             imageLoader.lazyChildren(elem);
             loading.hide();
+
+            require(["autoFocuser"], function (autoFocuser) {
+                autoFocuser.autoFocus(page);
+            });
         });
     }
 

src/controllers/music/songs.js

@@ -104,6 +104,10 @@ define(["events", "libraryBrowser", "imageLoader", "listView", "loading", "emby-
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
                 loading.hide();
                 isLoading = false;
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(page);
+                });
             });
         }
 

src/controllers/shows/episodes.js

@@ -144,6 +144,10 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
                 loading.hide();
                 isLoading = false;
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(page);
+                });
             });
         }
 

src/controllers/shows/tvlatest.js

@@ -40,6 +40,10 @@ define(["loading", "components/groupedcards", "cardBuilder", "apphost", "imageLo
             elem.innerHTML = html;
             imageLoader.lazyChildren(elem);
             loading.hide();
+
+            require(["autoFocuser"], function (autoFocuser) {
+                autoFocuser.autoFocus(context);
+            });
         });
     }
 

src/controllers/shows/tvrecommended.js

@@ -97,6 +97,10 @@ define(["events", "inputManager", "libraryMenu", "layoutManager", "loading", "do
                     cardLayout: false
                 });
                 loading.hide();
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(view);
+                });
             });
         }
 

src/controllers/shows/tvshows.js

@@ -172,6 +172,10 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
                 loading.hide();
                 isLoading = false;
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(page);
+                });
             });
         }
 

src/controllers/shows/tvstudios.js

@@ -46,6 +46,10 @@ define(["loading", "libraryBrowser", "cardBuilder", "apphost"], function (loadin
                 context: "tvshows"
             });
             loading.hide();
+
+            require(["autoFocuser"], function (autoFocuser) {
+                autoFocuser.autoFocus(context);
+            });
         });
     }
 

src/controllers/user/display.js

@@ -1,4 +1,4 @@
-define(["displaySettings", "userSettingsBuilder", "userSettings"], function (DisplaySettings, userSettingsBuilder, currentUserSettings) {
+define(["displaySettings", "userSettingsBuilder", "userSettings", "autoFocuser"], function (DisplaySettings, userSettingsBuilder, currentUserSettings, autoFocuser) {
     "use strict";
 
     return function (view, params) {
@@ -24,7 +24,8 @@ define(["displaySettings", "userSettingsBuilder", "userSettings"], function (Dis
                     element: view.querySelector(".settingsContainer"),
                     userSettings: userSettings,
                     enableSaveButton: false,
-                    enableSaveConfirmation: false
+                    enableSaveConfirmation: false,
+                    autoFocus: autoFocuser.isEnabled()
                 });
             }
         });

src/controllers/user/home.js

@@ -1,4 +1,4 @@
-define(["homescreenSettings", "userSettingsBuilder", "dom", "globalize", "loading", "userSettings", "listViewStyle"], function (HomescreenSettings, userSettingsBuilder, dom, globalize, loading, currentUserSettings) {
+define(["homescreenSettings", "userSettingsBuilder", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (HomescreenSettings, userSettingsBuilder, dom, globalize, loading, currentUserSettings, autoFocuser) {
     "use strict";
 
     return function (view, params) {
@@ -24,7 +24,8 @@ define(["homescreenSettings", "userSettingsBuilder", "dom", "globalize", "loadin
                     element: view.querySelector(".homeScreenSettingsContainer"),
                     userSettings: userSettings,
                     enableSaveButton: false,
-                    enableSaveConfirmation: false
+                    enableSaveConfirmation: false,
+                    autoFocus: autoFocuser.isEnabled()
                 });
             }
         });

src/controllers/user/menu.js

@@ -35,6 +35,10 @@ define(["apphost", "connectionManager", "listViewStyle", "emby-button"], functio
                     page.querySelector(".adminSection").classList.add("hide");
                 }
             });
+
+            require(["autoFocuser"], function (autoFocuser) {
+                autoFocuser.autoFocus(view);
+            });
         });
     };
 });

src/controllers/user/playback.js

@@ -1,4 +1,4 @@
-define(["playbackSettings", "userSettingsBuilder", "dom", "globalize", "loading", "userSettings", "listViewStyle"], function (PlaybackSettings, userSettingsBuilder, dom, globalize, loading, currentUserSettings) {
+define(["playbackSettings", "userSettingsBuilder", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (PlaybackSettings, userSettingsBuilder, dom, globalize, loading, currentUserSettings, autoFocuser) {
     "use strict";
 
     return function (view, params) {
@@ -24,7 +24,8 @@ define(["playbackSettings", "userSettingsBuilder", "dom", "globalize", "loading"
                     element: view.querySelector(".settingsContainer"),
                     userSettings: userSettings,
                     enableSaveButton: false,
-                    enableSaveConfirmation: false
+                    enableSaveConfirmation: false,
+                    autoFocus: autoFocuser.isEnabled()
                 });
             }
         });

src/controllers/user/subtitles.js

@@ -1,4 +1,4 @@
-define(["subtitleSettings", "userSettingsBuilder", "userSettings"], function (SubtitleSettings, userSettingsBuilder, currentUserSettings) {
+define(["subtitleSettings", "userSettingsBuilder", "userSettings", "autoFocuser"], function (SubtitleSettings, userSettingsBuilder, currentUserSettings, autoFocuser) {
     "use strict";
 
     return function (view, params) {
@@ -24,7 +24,8 @@ define(["subtitleSettings", "userSettingsBuilder", "userSettings"], function (Su
                     element: view.querySelector(".settingsContainer"),
                     userSettings: userSettings,
                     enableSaveButton: false,
-                    enableSaveConfirmation: false
+                    enableSaveConfirmation: false,
+                    autoFocus: autoFocuser.isEnabled()
                 });
             }
         });

src/controllers/userpasswordpage.js

@@ -47,6 +47,10 @@ define(["loading", "libraryMenu", "emby-button"], function (loading, libraryMenu
                 }
 
                 page.querySelector(".chkEnableLocalEasyPassword").checked = user.Configuration.EnableLocalPassword;
+
+                require(["autoFocuser"], function (autoFocuser) {
+                    autoFocuser.autoFocus(page);
+                });
             });
         });
         page.querySelector("#txtCurrentPassword").value = "";

src/scripts/site.js

@@ -477,6 +477,9 @@ var AppInfo = {};
                 require(["keyboardnavigation"], function(keyboardnavigation) {
                     keyboardnavigation.enable();
                 });
+                require(["autoFocuser"], function(autoFocuser) {
+                    autoFocuser.enable();
+                });
             });
         });
     }
@@ -863,6 +866,7 @@ var AppInfo = {};
         define("serverNotifications", [componentsPath + "/serverNotifications/serverNotifications"], returnFirstDependency);
         define("skinManager", [componentsPath + "/skinManager"], returnFirstDependency);
         define("keyboardnavigation", [componentsPath + "/keyboardnavigation"], returnFirstDependency);
+        define("autoFocuser", [componentsPath + "/autoFocuser"], returnFirstDependency);
         define("connectionManager", [], function () {
             return ConnectionManager;
         });