diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.css b/src/components/emby-scrollbuttons/emby-scrollbuttons.css index 04b2ce68c6..b220092c83 100644 --- a/src/components/emby-scrollbuttons/emby-scrollbuttons.css +++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.css @@ -1,60 +1,20 @@ -.emby-scrollbuttons-scroller { +.emby-scroller-container { position: relative; } -.scrollbuttoncontainer { +.emby-scroller { + margin-left: 3.3%; + margin-right: 3.3%; +} + +.emby-scrollbuttons { position: absolute; - top: 10%; - bottom: 35%; + top: 0; + right: 0; align-items: center; justify-content: center; z-index: 1; - font-size: 3em; - color: #fff; - display: none; - overflow: hidden; -} - -.scrollbuttoncontainer-left { - background: rgba(20, 20, 20, .5); - background: -moz-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%); - background: -webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%); - background: linear-gradient(to right,#000,rgba(0,0,0,0)); -} - -.scrollbuttoncontainer-right { - background: rgba(20, 20, 20, .5); - background: -moz-linear-gradient(right,#000 0,rgba(0,0,0,0) 100%); - background: -webkit-linear-gradient(right,#000 0,rgba(0,0,0,0) 100%); - background: linear-gradient(to left,#000,rgba(0,0,0,0)); -} - -.emby-scrollbuttons-scroller:hover .scrollbuttoncontainer { + color: #ffffff; display: flex; -} - -.scrollbuttoncontainer-left { - left: 0; -} - -.scrollbuttoncontainer-right { - right: 0; -} - -.emby-scrollbuttons-scrollbutton { - margin: 0 -.2em; - transition: transform 160ms ease-out; -} - -.scrollbuttoncontainer:hover > .emby-scrollbuttons-scrollbutton { - transform: scale(1.3, 1.3); -} - -.emby-scrollbuttons-scrollbutton:after { - content: ''; - display: none !important; -} - -.emby-scrollbuttons-scrollbutton:focus { - color: inherit !important; -} + overflow: hidden; +} \ No newline at end of file diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.js b/src/components/emby-scrollbuttons/emby-scrollbuttons.js index c325ad9fd5..94307624ab 100644 --- a/src/components/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.js @@ -3,30 +3,20 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); - EmbyScrollButtonsPrototype.createdCallback = function () { - - }; - - function getScrollButtonContainerHtml(direction) { + EmbyScrollButtonsPrototype.createdCallback = function () {}; + function getScrollButtonHtml(direction) { var html = ''; - var hide = direction === 'left' ? ' hide' : ''; - html += '
'; - return html; } function getScrollPosition(parent) { - if (parent.getScrollPosition) { return parent.getScrollPosition(); } @@ -35,7 +25,6 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' } function getScrollWidth(parent) { - if (parent.getScrollSize) { return parent.getScrollSize(); } @@ -43,46 +32,39 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' return 0; } - function onScrolledToPosition(scrollButtons, pos, scrollWidth) { - + function updateScrollButtons(scrollButtons, pos, scrollWidth) { if (pos > 0) { - scrollButtons.scrollButtonsLeft.classList.remove('hide'); + scrollButtons.scrollButtonsLeft.disabled = false; } else { - scrollButtons.scrollButtonsLeft.classList.add('hide'); + scrollButtons.scrollButtonsLeft.disabled = true; } if (scrollWidth > 0) { - - pos += scrollButtons.offsetWidth; - + pos += scrollButtons.offsetLeft + scrollButtons.offsetWidth; if (pos >= scrollWidth) { - scrollButtons.scrollButtonsRight.classList.add('hide'); + scrollButtons.scrollButtonsRight.disabled = true; } else { - scrollButtons.scrollButtonsRight.classList.remove('hide'); + scrollButtons.scrollButtonsRight.disabled = false; } } } function onScroll(e) { - var scrollButtons = this; var scroller = this.scroller; var pos = getScrollPosition(scroller); var scrollWidth = getScrollWidth(scroller); - onScrolledToPosition(scrollButtons, pos, scrollWidth); + updateScrollButtons(scrollButtons, pos, scrollWidth); } function getStyleValue(style, name) { - var value = style.getPropertyValue(name); - if (!value) { return 0; } value = value.replace('px', ''); - if (!value) { return 0; } @@ -96,18 +78,15 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' } function getScrollSize(elem) { - var scrollSize = elem.offsetWidth; - var style = window.getComputedStyle(elem, null); var paddingLeft = getStyleValue(style, 'padding-left'); - if (paddingLeft) { scrollSize -= paddingLeft; } - var paddingRight = getStyleValue(style, 'padding-right'); + var paddingRight = getStyleValue(style, 'padding-right'); if (paddingRight) { scrollSize -= paddingRight; } @@ -116,12 +95,11 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' style = window.getComputedStyle(slider, null); paddingLeft = getStyleValue(style, 'padding-left'); - if (paddingLeft) { scrollSize -= paddingLeft; } - paddingRight = getStyleValue(style, 'padding-right'); + paddingRight = getStyleValue(style, 'padding-right'); if (paddingRight) { scrollSize -= paddingRight; } @@ -130,58 +108,55 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' } function onScrollButtonClick(e) { - - var parent = dom.parentWithAttribute(this, 'is', 'emby-scroller'); + var scroller = this.parentNode.nextSibling; var direction = this.getAttribute('data-direction'); + var scrollSize = getScrollSize(scroller); + var pos = getScrollPosition(scroller); - var scrollSize = getScrollSize(parent); - - var pos = getScrollPosition(parent); var newPos; - if (direction === 'left') { newPos = Math.max(0, pos - scrollSize); } else { newPos = pos + scrollSize; } - parent.scrollToPosition(newPos, false); + scroller.scrollToPosition(newPos, false); } EmbyScrollButtonsPrototype.attachedCallback = function () { + var scroller = this.nextSibling; + var parent = this.parentNode; + this.scroller = scroller; - var parent = dom.parentWithAttribute(this, 'is', 'emby-scroller'); - this.scroller = parent; + parent.classList.add('emby-scroller-container'); - parent.classList.add('emby-scrollbuttons-scroller'); - - this.innerHTML = getScrollButtonContainerHtml('left') + getScrollButtonContainerHtml('right'); + this.innerHTML = getScrollButtonHtml('left') + getScrollButtonHtml('right'); var scrollHandler = onScroll.bind(this); this.scrollHandler = scrollHandler; - var buttons = this.querySelectorAll('.emby-scrollbuttons-scrollbutton'); + var buttons = this.querySelectorAll('.emby-scrollbuttons-button'); buttons[0].addEventListener('click', onScrollButtonClick); buttons[1].addEventListener('click', onScrollButtonClick); - - buttons = this.querySelectorAll('.scrollbuttoncontainer'); this.scrollButtonsLeft = buttons[0]; this.scrollButtonsRight = buttons[1]; - parent.addScrollEventListener(scrollHandler, { + scroller.addScrollEventListener(scrollHandler, { capture: false, passive: true }); + + var pos = getScrollPosition(scroller); + var scrollWidth = getScrollWidth(scroller); + updateScrollButtons(this, pos, scrollWidth); }; EmbyScrollButtonsPrototype.detachedCallback = function () { - var parent = this.scroller; this.scroller = null; var scrollHandler = this.scrollHandler; - if (parent && scrollHandler) { parent.removeScrollEventListener(scrollHandler, { capture: false, diff --git a/src/components/emby-scroller/emby-scroller.js b/src/components/emby-scroller/emby-scroller.js index 7ef39eea0a..51673a924a 100644 --- a/src/components/emby-scroller/emby-scroller.js +++ b/src/components/emby-scroller/emby-scroller.js @@ -8,15 +8,11 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro }; function initCenterFocus(elem, scrollerInstance) { - dom.addEventListener(elem, 'focus', function (e) { - var focused = focusManager.focusableParent(e.target); - if (focused) { scrollerInstance.toCenter(focused); } - }, { capture: true, passive: true @@ -28,11 +24,13 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro this.scroller.slideTo(0, true); } }; + ScrollerProtoType.toStart = function (elem, immediate) { if (this.scroller) { this.scroller.toStart(elem, immediate); } }; + ScrollerProtoType.toCenter = function (elem, immediate) { if (this.scroller) { this.scroller.toCenter(elem, immediate); @@ -82,20 +80,16 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro }; function onInputCommand(e) { - var cmd = e.detail.command; - if (cmd === 'end') { focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands')); e.preventDefault(); e.stopPropagation(); - } - else if (cmd === 'pageup') { + } else if (cmd === 'pageup') { focusManager.moveFocus(e.target, this, '.' + this.getAttribute('data-navcommands'), -12); e.preventDefault(); e.stopPropagation(); - } - else if (cmd === 'pagedown') { + } else if (cmd === 'pagedown') { focusManager.moveFocus(e.target, this, '.' + this.getAttribute('data-navcommands'), 12); e.preventDefault(); e.stopPropagation(); @@ -104,18 +98,16 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro function initHeadroom(elem) { require(['headroom'], function (Headroom) { - var headroom = new Headroom([], { scroller: elem }); - + headroom.add(document.querySelector('.skinHeader')); elem.headroom = headroom; }); } ScrollerProtoType.attachedCallback = function () { - if (this.getAttribute('data-navcommands')) { inputManager.on(this, onInputCommand); } @@ -141,10 +133,8 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro slidee: slider, scrollBy: 200, speed: horizontal ? 270 : 240, - //immediateSpeed: pageOptions.immediateSpeed, elasticBounds: 1, dragHandle: 1, - scrollWidth: this.getAttribute('data-scrollsize') === 'auto' ? null : 5000000, autoImmediate: true, skipSlideToWhenVisible: this.getAttribute('data-skipfocuswhenvisible') === 'true', dispatchScrollEvent: enableScrollButtons || bindHeader || this.getAttribute('data-scrollevent') === 'true', @@ -152,7 +142,6 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro allowNativeSmoothScroll: this.getAttribute('data-allownativesmoothscroll') === 'true' && !enableScrollButtons, allowNativeScroll: !enableScrollButtons, forceHideScrollbars: enableScrollButtons, - // In edge, with the native scroll, the content jumps around when hovering over the buttons requireAnimation: enableScrollButtons && browser.edge }; @@ -175,14 +164,12 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro }; function loadScrollButtons(scroller) { - require(['emby-scrollbuttons'], function () { - scroller.insertAdjacentHTML('beforeend', ''); + scroller.insertAdjacentHTML('beforebegin', ''); }); } ScrollerProtoType.pause = function () { - var headroom = this.headroom; if (headroom) { headroom.pause(); @@ -190,7 +177,6 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro }; ScrollerProtoType.resume = function () { - var headroom = this.headroom; if (headroom) { headroom.resume(); @@ -198,7 +184,6 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro }; ScrollerProtoType.detachedCallback = function () { - if (this.getAttribute('data-navcommands')) { inputManager.off(this, onInputCommand); } diff --git a/src/components/emby-slider/emby-slider.css b/src/components/emby-slider/emby-slider.css index 101058ca26..b27190e487 100644 --- a/src/components/emby-slider/emby-slider.css +++ b/src/components/emby-slider/emby-slider.css @@ -27,10 +27,6 @@ _:-ms-input-placeholder { /* Disable webkit tap highlighting */ -webkit-tap-highlight-color: rgba(0,0,0,0); display: block; - /**************************** Tracks ****************************/ - /**************************** Thumbs ****************************/ - /**************************** 0-value ****************************/ - /**************************** Disabled ****************************/ } .mdl-slider::-moz-focus-outer { diff --git a/src/components/guide/tvguide.template.html b/src/components/guide/tvguide.template.html index c5f76696c5..8778fcd3f7 100644 --- a/src/components/guide/tvguide.template.html +++ b/src/components/guide/tvguide.template.html @@ -18,7 +18,6 @@