2019-01-10 15:39:37 +03:00
|
|
|
|
define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', 'paper-icon-button-light'], function (layoutManager, dom) {
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
|
|
var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
|
|
|
|
|
|
|
|
|
|
EmbyScrollButtonsPrototype.createdCallback = function () {
|
|
|
|
|
|
|
|
|
|
};
|
2018-10-23 01:05:09 +03:00
|
|
|
|
|
|
|
|
|
function getScrollButtonContainerHtml(direction) {
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
var html = '';
|
|
|
|
|
|
|
|
|
|
var hide = direction === 'left' ? ' hide' : '';
|
|
|
|
|
html += '<div class="scrollbuttoncontainer scrollbuttoncontainer-' + direction + hide + '">';
|
|
|
|
|
|
|
|
|
|
var icon = direction === 'left' ? '' : '';
|
|
|
|
|
|
|
|
|
|
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>';
|
|
|
|
|
|
|
|
|
|
return html;
|
2018-10-23 01:05:09 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getScrollPosition(parent) {
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
if (parent.getScrollPosition) {
|
|
|
|
|
return parent.getScrollPosition();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return 0;
|
2018-10-23 01:05:09 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getScrollWidth(parent) {
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
if (parent.getScrollSize) {
|
|
|
|
|
return parent.getScrollSize();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return 0;
|
2018-10-23 01:05:09 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onScrolledToPosition(scrollButtons, pos, scrollWidth) {
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
if (pos > 0) {
|
|
|
|
|
scrollButtons.scrollButtonsLeft.classList.remove('hide');
|
|
|
|
|
} else {
|
|
|
|
|
scrollButtons.scrollButtonsLeft.classList.add('hide');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (scrollWidth > 0) {
|
|
|
|
|
|
|
|
|
|
pos += scrollButtons.offsetWidth;
|
|
|
|
|
|
|
|
|
|
if (pos >= scrollWidth) {
|
|
|
|
|
scrollButtons.scrollButtonsRight.classList.add('hide');
|
|
|
|
|
} else {
|
|
|
|
|
scrollButtons.scrollButtonsRight.classList.remove('hide');
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-10-23 01:05:09 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onScroll(e) {
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
var scrollButtons = this;
|
|
|
|
|
var scroller = this.scroller;
|
|
|
|
|
var pos = getScrollPosition(scroller);
|
|
|
|
|
var scrollWidth = getScrollWidth(scroller);
|
|
|
|
|
|
|
|
|
|
onScrolledToPosition(scrollButtons, pos, scrollWidth);
|
2018-10-23 01:05:09 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getStyleValue(style, name) {
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
2018-10-23 01:05:09 +03:00
|
|
|
|
var value = style.getPropertyValue(name);
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
if (!value) {
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
value = value.replace('px', '');
|
|
|
|
|
|
|
|
|
|
if (!value) {
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
value = parseInt(value);
|
|
|
|
|
if (isNaN(value)) {
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return value;
|
2018-10-23 01:05:09 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getScrollSize(elem) {
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
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');
|
|
|
|
|
|
|
|
|
|
if (paddingRight) {
|
|
|
|
|
scrollSize -= paddingRight;
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-23 01:05:09 +03:00
|
|
|
|
var slider = elem.getScrollSlider();
|
2019-01-10 15:39:37 +03:00
|
|
|
|
style = window.getComputedStyle(slider, null);
|
|
|
|
|
|
|
|
|
|
paddingLeft = getStyleValue(style, 'padding-left');
|
|
|
|
|
|
|
|
|
|
if (paddingLeft) {
|
|
|
|
|
scrollSize -= paddingLeft;
|
|
|
|
|
}
|
|
|
|
|
paddingRight = getStyleValue(style, 'padding-right');
|
|
|
|
|
|
|
|
|
|
if (paddingRight) {
|
|
|
|
|
scrollSize -= paddingRight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return scrollSize;
|
2018-10-23 01:05:09 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onScrollButtonClick(e) {
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
var parent = dom.parentWithAttribute(this, 'is', 'emby-scroller');
|
|
|
|
|
|
|
|
|
|
var direction = this.getAttribute('data-direction');
|
|
|
|
|
|
|
|
|
|
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);
|
2018-10-23 01:05:09 +03:00
|
|
|
|
}
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
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');
|
|
|
|
|
|
2018-10-23 01:05:09 +03:00
|
|
|
|
var scrollHandler = onScroll.bind(this);
|
|
|
|
|
this.scrollHandler = scrollHandler;
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
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: false,
|
|
|
|
|
passive: true
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
EmbyScrollButtonsPrototype.detachedCallback = function () {
|
|
|
|
|
|
2018-10-23 01:05:09 +03:00
|
|
|
|
var parent = this.scroller;
|
|
|
|
|
this.scroller = null;
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
2018-10-23 01:05:09 +03:00
|
|
|
|
var scrollHandler = this.scrollHandler;
|
2019-01-10 15:39:37 +03:00
|
|
|
|
|
|
|
|
|
if (parent && scrollHandler) {
|
|
|
|
|
parent.removeScrollEventListener(scrollHandler, {
|
|
|
|
|
capture: false,
|
|
|
|
|
passive: true
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.scrollHandler = null;
|
|
|
|
|
this.scrollButtonsLeft = null;
|
|
|
|
|
this.scrollButtonsRight = null;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document.registerElement('emby-scrollbuttons', {
|
2018-10-23 01:05:09 +03:00
|
|
|
|
prototype: EmbyScrollButtonsPrototype,
|
2019-01-10 15:39:37 +03:00
|
|
|
|
extends: 'div'
|
|
|
|
|
});
|
2018-10-23 01:05:09 +03:00
|
|
|
|
});
|