diff --git a/package.json b/package.json index ff58c6e66c..8f706b83f0 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,6 @@ "epubjs": "^0.3.85", "fast-text-encoding": "^1.0.3", "flv.js": "^1.5.0", - "focus-options-polyfill": "^1.5.0", "headroom.js": "^0.11.0", "hls.js": "^0.14.8", "howler": "^2.2.0", diff --git a/src/bundle.js b/src/bundle.js index 8559f3943b..5a7ffed075 100644 --- a/src/bundle.js +++ b/src/bundle.js @@ -10,11 +10,6 @@ _define('fetch', function() { return fetch; }); -var focusPreventScroll = require('focus-options-polyfill'); -_define('focus-options-polyfill', function() { - return focusPreventScroll; -}); - // Blurhash const blurhash = require('blurhash'); _define('blurhash', function() { diff --git a/src/elements/emby-scroller/emby-scroller.js b/src/elements/emby-scroller/emby-scroller.js index b2bb51e202..d7133e317a 100644 --- a/src/elements/emby-scroller/emby-scroller.js +++ b/src/elements/emby-scroller/emby-scroller.js @@ -17,12 +17,10 @@ import 'css!./emby-scroller'; function initCenterFocus(elem, scrollerInstance) { dom.addEventListener(elem, 'focus', function (e) { - setTimeout(function() { - const focused = focusManager.focusableParent(e.target); - if (focused) { - scrollerInstance.toCenter(focused); - } - }, 0); + const focused = focusManager.focusableParent(e.target); + if (focused) { + scrollerInstance.toCenter(focused); + } }, { capture: true, passive: true diff --git a/src/legacy/focusPreventScroll.js b/src/legacy/focusPreventScroll.js new file mode 100644 index 0000000000..93f53dca29 --- /dev/null +++ b/src/legacy/focusPreventScroll.js @@ -0,0 +1,42 @@ +// Polyfill to add support for preventScroll by focus function + +if (HTMLElement.prototype.nativeFocus === undefined) { + (function () { + var supportsPreventScrollOption = false; + try { + var focusElem = document.createElement('div'); + + focusElem.addEventListener('focus', function(event) { + event.preventDefault(); + event.stopPropagation(); + }, true); + + var opts = Object.defineProperty({}, 'preventScroll', { + // eslint-disable-next-line getter-return + get: function () { + supportsPreventScrollOption = true; + } + }); + + focusElem.focus(opts); + } catch (e) { + console.error('error checking preventScroll support'); + } + + if (!supportsPreventScrollOption) { + HTMLElement.prototype.nativeFocus = HTMLElement.prototype.focus; + + HTMLElement.prototype.focus = function(options) { + var scrollX = window.scrollX; + var scrollY = window.scrollY; + + this.nativeFocus(); + + // Restore window scroll if preventScroll + if (options && options.preventScroll) { + window.scroll(scrollX, scrollY); + } + }; + } + })(); +} diff --git a/src/scripts/site.js b/src/scripts/site.js index bb7e133df7..fa0aaf7c76 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -221,6 +221,7 @@ function initClient() { keyboardnavigation.enable(); }); require(['mouseManager']); + require(['focusPreventScroll']); require(['autoFocuser'], function(autoFocuser) { autoFocuser.enable(); }); @@ -462,6 +463,7 @@ function initClient() { datetime: 'scripts/datetime', globalize: 'scripts/globalize', dfnshelper: 'scripts/dfnshelper', + libraryMenu: 'scripts/libraryMenu', playlisteditor: componentsPath + '/playlisteditor/playlisteditor', medialibrarycreator: componentsPath + '/mediaLibraryCreator/mediaLibraryCreator', @@ -520,8 +522,7 @@ function initClient() { 'events', 'credentialprovider', 'connectionManagerFactory', - 'appStorage', - 'focus-options-polyfill' + 'appStorage' ] }, urlArgs: urlArgs, @@ -530,7 +531,7 @@ function initClient() { }); promise = require(['fetch']) - .then(() => require(['jQuery', 'polyfill', 'fast-text-encoding', 'intersection-observer', 'classlist-polyfill', 'focus-options-polyfill', 'css!assets/css/site', 'jellyfin-noto'], (jQuery) => { + .then(() => require(['jQuery', 'polyfill', 'fast-text-encoding', 'intersection-observer', 'classlist-polyfill', 'css!assets/css/site', 'jellyfin-noto'], (jQuery) => { // Expose jQuery globally window.$ = jQuery; window.jQuery = jQuery; @@ -650,6 +651,7 @@ function initClient() { return viewManager; }); define('slideshow', [componentsPath + '/slideshow/slideshow'], returnFirstDependency); + define('focusPreventScroll', ['legacy/focusPreventScroll'], returnFirstDependency); define('userdataButtons', [componentsPath + '/userdatabuttons/userdatabuttons'], returnFirstDependency); define('listView', [componentsPath + '/listview/listview'], returnFirstDependency); define('indicators', [componentsPath + '/indicators/indicators'], returnFirstDependency); diff --git a/yarn.lock b/yarn.lock index 0dfcf0c15d..b507238470 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4598,11 +4598,6 @@ flv.js@^1.5.0: es6-promise "^4.2.5" webworkify "^1.5.0" -focus-options-polyfill@^1.5.0: - version "1.5.0" - resolved "https://registry.yarnpkg.com/focus-options-polyfill/-/focus-options-polyfill-1.5.0.tgz#fd2e6a0d6d8f828346726a5adf02f3d2bdfece5f" - integrity sha512-HiMSaXGUz2OFjOuoGTWXlp+YjZCGnVXPu6vPeccgaSOzGmqLVz8tJRcKXWfMJnj16LXf/IM1rJI0zrZMVc9q7g== - follow-redirects@1.5.10: version "1.5.10" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"