mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update scrolling

Browse source
This commit is contained in:
Luke Pulverenti 2017-07-02 14:58:34 -04:00
parent e03c297f2f
commit a1eb9ab0b5
13 changed files with 70 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

1
dashboard-ui/bower_components/emby-webcomponents/emby-scrollbuttons/emby-scrollbuttons.css vendored Normal file
View file

@ -0,0 +1 @@
.emby-scrollbuttons-scroller{position:relative}.scrollbuttoncontainer{position:absolute;top:0;bottom:0;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;background:rgba(20,20,20,.5);z-index:1;font-size:3em;color:#fff;display:none;overflow:hidden}.emby-scrollbuttons-scroller:hover .scrollbuttoncontainer{display:-webkit-box;display:-webkit-flex;display:flex}.scrollbuttoncontainer:hover{background:rgba(20,20,20,.7)}.scrollbuttoncontainer-left{left:0}.scrollbuttoncontainer-right{right:0}.emby-scrollbuttons-scrollbutton{margin:0 -.275em;-webkit-transition:-webkit-transform 160ms ease-out;-o-transition:transform 160ms ease-out;transition:transform 160ms ease-out}.scrollbuttoncontainer:hover>.emby-scrollbuttons-scrollbutton{-webkit-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.emby-scrollbuttons-scrollbutton:after{content:'';display:none!important}.emby-scrollbuttons-scrollbutton:focus{color:inherit!important}

1
dashboard-ui/bower_components/emby-webcomponents/emby-scrollbuttons/emby-scrollbuttons.js vendored Normal file
View file

@ -0,0 +1 @@
define(["layoutManager","dom","css!./emby-scrollbuttons","registerElement","paper-icon-button-light"],function(layoutManager,dom){"use strict";function getScrollButtonContainerHtml(direction){var html="",hide="left"===direction?" hide":"";html+='<div class="scrollbuttoncontainer scrollbuttoncontainer-'+direction+hide+'">';var icon="left"===direction?"&#xE5CB;":"&#xE5CC;";return html+='<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="'+direction+'" class="emby-scrollbuttons-scrollbutton">',html+='<i class="md-icon">'+icon+"</i>",html+="</button>",html+="</div>"}function getScrollPosition(parent){return parent.getScrollPosition?parent.getScrollPosition():0}function onScrolledToPosition(scrollButtons,pos){pos>0?scrollButtons.scrollButtonsLeft.classList.remove("hide"):scrollButtons.scrollButtonsLeft.classList.add("hide")}function onScroll(e){var scrollButtons=this,scroller=this.scroller,pos=getScrollPosition(scroller);onScrolledToPosition(scrollButtons,pos)}function getStyleValue(style,name){var value=style.getPropertyValue(name);return value&&(value=value.replace("px",""))?(value=parseInt(value),isNaN(value)?0:value):0}function getScrollSize(elem){var scrollSize=elem.offsetWidth,style=window.getComputedStyle(elem,null),paddingLeft=getStyleValue(style,"padding-left");paddingLeft&&(scrollSize-=paddingLeft);var paddingRight=getStyleValue(style,"padding-right");paddingRight&&(scrollSize-=paddingRight);var slider=elem.getScrollSlider();return style=window.getComputedStyle(slider,null),paddingLeft=getStyleValue(style,"padding-left"),paddingLeft&&(scrollSize-=paddingLeft),paddingRight=getStyleValue(style,"padding-right"),paddingRight&&(scrollSize-=paddingRight),scrollSize}function onScrollButtonClick(e){var newPos,parent=dom.parentWithAttribute(this,"is","emby-scroller"),direction=this.getAttribute("data-direction"),scrollSize=getScrollSize(parent),pos=getScrollPosition(parent);newPos="left"===direction?Math.max(0,pos-scrollSize):pos+scrollSize,parent.scrollToPosition(newPos,!1)}var EmbyScrollButtonsPrototype=Object.create(HTMLDivElement.prototype);EmbyScrollButtonsPrototype.createdCallback=function(){},EmbyScrollButtonsPrototype.attachedCallback=function(){var parent=dom.parentWithAttribute(this,"is","emby-scroller");this.scroller=parent,parent.classList.add("emby-scrollbuttons-scroller"),this.innerHTML=getScrollButtonContainerHtml("left")+getScrollButtonContainerHtml("right");var scrollHandler=onScroll.bind(this);this.scrollHandler=scrollHandler;var buttons=this.querySelectorAll(".emby-scrollbuttons-scrollbutton");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,{capture:!1,passive:!0})},EmbyScrollButtonsPrototype.detachedCallback=function(){var parent=this.scroller;this.scroller=null;var scrollHandler=this.scrollHandler;parent&&scrollHandler&&parent.removeScrollEventListener(scrollHandler,{capture:!1,passive:!0}),this.scrollHandler=null,this.scrollButtonsLeft=null,this.scrollButtonsRight=null},document.registerElement("emby-scrollbuttons",{prototype:EmbyScrollButtonsPrototype,extends:"div"})});