mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge branch 'es6' into migrate-to-ES6-15
This commit is contained in:
commit
d150143789
11 changed files with 228 additions and 164 deletions
10
package.json
10
package.json
|
@ -140,6 +140,16 @@
|
||||||
"src/controllers/dashboard/dlna/profile.js",
|
"src/controllers/dashboard/dlna/profile.js",
|
||||||
"src/controllers/dashboard/dlna/profiles.js",
|
"src/controllers/dashboard/dlna/profiles.js",
|
||||||
"src/controllers/dashboard/dlna/settings.js",
|
"src/controllers/dashboard/dlna/settings.js",
|
||||||
|
"src/elements/emby-tabs/emby-tabs.js",
|
||||||
|
"src/elements/emby-scroller/emby-scroller.js",
|
||||||
|
"src/elements/emby-radio/emby-radio.js",
|
||||||
|
"src/elements/emby-progressbar/emby-progressbar.js",
|
||||||
|
"src/elements/emby-progressring/emby-progressring.js",
|
||||||
|
"src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js",
|
||||||
|
"src/elements/emby-slider/emby-slider.js",
|
||||||
|
"src/elements/emby-checkbox/emby-checkbox.js",
|
||||||
|
"src/elements/emby-textarea/emby-textarea.js",
|
||||||
|
"src/elements/emby-toggle/emby-toggle.js",
|
||||||
"src/plugins/bookPlayer/plugin.js",
|
"src/plugins/bookPlayer/plugin.js",
|
||||||
"src/plugins/bookPlayer/tableOfContents.js",
|
"src/plugins/bookPlayer/tableOfContents.js",
|
||||||
"src/plugins/photoPlayer/plugin.js",
|
"src/plugins/photoPlayer/plugin.js",
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) {
|
import browser from 'browser';
|
||||||
'use strict';
|
import dom from 'dom';
|
||||||
|
import 'css!./emby-checkbox';
|
||||||
|
import 'registerElement';
|
||||||
|
|
||||||
var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
|
/* eslint-disable indent */
|
||||||
|
|
||||||
|
let EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
|
||||||
|
|
||||||
function onKeyDown(e) {
|
function onKeyDown(e) {
|
||||||
// Don't submit form on enter
|
// Don't submit form on enter
|
||||||
|
@ -19,10 +23,10 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
|
const enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
|
||||||
|
|
||||||
function forceRefresh(loading) {
|
function forceRefresh(loading) {
|
||||||
var elem = this.parentNode;
|
let elem = this.parentNode;
|
||||||
|
|
||||||
elem.style.webkitAnimationName = 'repaintChrome';
|
elem.style.webkitAnimationName = 'repaintChrome';
|
||||||
elem.style.webkitAnimationDelay = (loading === true ? '500ms' : '');
|
elem.style.webkitAnimationDelay = (loading === true ? '500ms' : '');
|
||||||
|
@ -43,22 +47,22 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
|
||||||
|
|
||||||
this.classList.add('emby-checkbox');
|
this.classList.add('emby-checkbox');
|
||||||
|
|
||||||
var labelElement = this.parentNode;
|
const labelElement = this.parentNode;
|
||||||
labelElement.classList.add('emby-checkbox-label');
|
labelElement.classList.add('emby-checkbox-label');
|
||||||
|
|
||||||
var labelTextElement = labelElement.querySelector('span');
|
const labelTextElement = labelElement.querySelector('span');
|
||||||
|
|
||||||
var outlineClass = 'checkboxOutline';
|
let outlineClass = 'checkboxOutline';
|
||||||
|
|
||||||
var customClass = this.getAttribute('data-outlineclass');
|
const customClass = this.getAttribute('data-outlineclass');
|
||||||
if (customClass) {
|
if (customClass) {
|
||||||
outlineClass += ' ' + customClass;
|
outlineClass += ' ' + customClass;
|
||||||
}
|
}
|
||||||
|
|
||||||
var checkedIcon = this.getAttribute('data-checkedicon') || 'check';
|
const checkedIcon = this.getAttribute('data-checkedicon') || 'check';
|
||||||
var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
|
const uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
|
||||||
var checkHtml = '<span class="material-icons checkboxIcon checkboxIcon-checked ' + checkedIcon + '"></span>';
|
const checkHtml = '<span class="material-icons checkboxIcon checkboxIcon-checked ' + checkedIcon + '"></span>';
|
||||||
var uncheckedHtml = '<span class="material-icons checkboxIcon checkboxIcon-unchecked ' + uncheckedIcon + '"></span>';
|
const uncheckedHtml = '<span class="material-icons checkboxIcon checkboxIcon-unchecked ' + uncheckedIcon + '"></span>';
|
||||||
labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
|
labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
|
||||||
|
|
||||||
labelTextElement.classList.add('checkboxLabel');
|
labelTextElement.classList.add('checkboxLabel');
|
||||||
|
@ -103,4 +107,5 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
|
||||||
prototype: EmbyCheckboxPrototype,
|
prototype: EmbyCheckboxPrototype,
|
||||||
extends: 'input'
|
extends: 'input'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,16 +1,21 @@
|
||||||
define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerElement'], function (EmbyProgressRing, dom, serverNotifications, events) {
|
import EmbyProgressRing from 'emby-progressring';
|
||||||
'use strict';
|
import dom from 'dom';
|
||||||
|
import serverNotifications from 'serverNotifications';
|
||||||
|
import events from 'events';
|
||||||
|
import 'registerElement';
|
||||||
|
|
||||||
|
/* eslint-disable indent */
|
||||||
|
|
||||||
function addNotificationEvent(instance, name, handler) {
|
function addNotificationEvent(instance, name, handler) {
|
||||||
|
|
||||||
var localHandler = handler.bind(instance);
|
const localHandler = handler.bind(instance);
|
||||||
events.on(serverNotifications, name, localHandler);
|
events.on(serverNotifications, name, localHandler);
|
||||||
instance[name] = localHandler;
|
instance[name] = localHandler;
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeNotificationEvent(instance, name) {
|
function removeNotificationEvent(instance, name) {
|
||||||
|
|
||||||
var handler = instance[name];
|
const handler = instance[name];
|
||||||
if (handler) {
|
if (handler) {
|
||||||
events.off(serverNotifications, name, handler);
|
events.off(serverNotifications, name, handler);
|
||||||
instance[name] = null;
|
instance[name] = null;
|
||||||
|
@ -19,7 +24,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
|
||||||
|
|
||||||
function onRefreshProgress(e, apiClient, info) {
|
function onRefreshProgress(e, apiClient, info) {
|
||||||
|
|
||||||
var indicator = this;
|
const indicator = this;
|
||||||
|
|
||||||
if (!indicator.itemId) {
|
if (!indicator.itemId) {
|
||||||
indicator.itemId = dom.parentWithAttribute(indicator, 'data-id').getAttribute('data-id');
|
indicator.itemId = dom.parentWithAttribute(indicator, 'data-id').getAttribute('data-id');
|
||||||
|
@ -27,7 +32,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
|
||||||
|
|
||||||
if (info.ItemId === indicator.itemId) {
|
if (info.ItemId === indicator.itemId) {
|
||||||
|
|
||||||
var progress = parseFloat(info.Progress);
|
const progress = parseFloat(info.Progress);
|
||||||
|
|
||||||
if (progress && progress < 100) {
|
if (progress && progress < 100) {
|
||||||
this.classList.remove('hide');
|
this.classList.remove('hide');
|
||||||
|
@ -39,7 +44,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
|
let EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
|
||||||
|
|
||||||
EmbyItemRefreshIndicatorPrototype.createdCallback = function () {
|
EmbyItemRefreshIndicatorPrototype.createdCallback = function () {
|
||||||
|
|
||||||
|
@ -74,4 +79,5 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
|
||||||
prototype: EmbyItemRefreshIndicatorPrototype,
|
prototype: EmbyItemRefreshIndicatorPrototype,
|
||||||
extends: 'div'
|
extends: 'div'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,20 +1,19 @@
|
||||||
define([], function() {
|
/* eslint-disable indent */
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
|
let ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
|
||||||
|
|
||||||
function onAutoTimeProgress() {
|
function onAutoTimeProgress() {
|
||||||
var start = parseInt(this.getAttribute('data-starttime'));
|
const start = parseInt(this.getAttribute('data-starttime'));
|
||||||
var end = parseInt(this.getAttribute('data-endtime'));
|
const end = parseInt(this.getAttribute('data-endtime'));
|
||||||
|
|
||||||
var now = new Date().getTime();
|
const now = new Date().getTime();
|
||||||
var total = end - start;
|
const total = end - start;
|
||||||
var pct = 100 * ((now - start) / total);
|
let pct = 100 * ((now - start) / total);
|
||||||
|
|
||||||
pct = Math.min(100, pct);
|
pct = Math.min(100, pct);
|
||||||
pct = Math.max(0, pct);
|
pct = Math.max(0, pct);
|
||||||
|
|
||||||
var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
|
const itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
|
||||||
itemProgressBarForeground.style.width = pct + '%';
|
itemProgressBarForeground.style.width = pct + '%';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -39,4 +38,5 @@ define([], function() {
|
||||||
prototype: ProgressBarPrototype,
|
prototype: ProgressBarPrototype,
|
||||||
extends: 'div'
|
extends: 'div'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,12 +1,15 @@
|
||||||
define(['require', 'css!./emby-progressring', 'registerElement'], function (require) {
|
import require from 'require';
|
||||||
'use strict';
|
import 'css!./emby-progressring';
|
||||||
|
import 'webcomponents';
|
||||||
|
|
||||||
var EmbyProgressRing = Object.create(HTMLDivElement.prototype);
|
/* eslint-disable indent */
|
||||||
|
|
||||||
|
let EmbyProgressRing = Object.create(HTMLDivElement.prototype);
|
||||||
|
|
||||||
EmbyProgressRing.createdCallback = function () {
|
EmbyProgressRing.createdCallback = function () {
|
||||||
|
|
||||||
this.classList.add('progressring');
|
this.classList.add('progressring');
|
||||||
var instance = this;
|
const instance = this;
|
||||||
|
|
||||||
require(['text!./emby-progressring.template.html'], function (template) {
|
require(['text!./emby-progressring.template.html'], function (template) {
|
||||||
instance.innerHTML = template;
|
instance.innerHTML = template;
|
||||||
|
@ -37,7 +40,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
|
||||||
|
|
||||||
progress = Math.floor(progress);
|
progress = Math.floor(progress);
|
||||||
|
|
||||||
var angle;
|
let angle;
|
||||||
|
|
||||||
if (progress < 25) {
|
if (progress < 25) {
|
||||||
angle = -90 + (progress / 100) * 360;
|
angle = -90 + (progress / 100) * 360;
|
||||||
|
@ -82,7 +85,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
|
||||||
|
|
||||||
EmbyProgressRing.detachedCallback = function () {
|
EmbyProgressRing.detachedCallback = function () {
|
||||||
|
|
||||||
var observer = this.observer;
|
let observer = this.observer;
|
||||||
|
|
||||||
if (observer) {
|
if (observer) {
|
||||||
// later, you can stop observing
|
// later, you can stop observing
|
||||||
|
@ -97,5 +100,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
|
||||||
extends: 'div'
|
extends: 'div'
|
||||||
});
|
});
|
||||||
|
|
||||||
return EmbyProgressRing;
|
export default EmbyProgressRing;
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,7 +1,10 @@
|
||||||
define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) {
|
import layoutManager from 'layoutManager';
|
||||||
'use strict';
|
import 'css!./emby-radio';
|
||||||
|
import 'registerElement';
|
||||||
|
|
||||||
var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
|
/* eslint-disable indent */
|
||||||
|
|
||||||
|
let EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
|
||||||
|
|
||||||
function onKeyDown(e) {
|
function onKeyDown(e) {
|
||||||
|
|
||||||
|
@ -23,7 +26,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
|
||||||
}
|
}
|
||||||
|
|
||||||
EmbyRadioPrototype.attachedCallback = function () {
|
EmbyRadioPrototype.attachedCallback = function () {
|
||||||
var showFocus = !layoutManager.mobile;
|
const showFocus = !layoutManager.mobile;
|
||||||
|
|
||||||
if (this.getAttribute('data-radio') === 'true') {
|
if (this.getAttribute('data-radio') === 'true') {
|
||||||
return;
|
return;
|
||||||
|
@ -33,7 +36,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
|
||||||
|
|
||||||
this.classList.add('mdl-radio__button');
|
this.classList.add('mdl-radio__button');
|
||||||
|
|
||||||
var labelElement = this.parentNode;
|
let labelElement = this.parentNode;
|
||||||
//labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect');
|
//labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect');
|
||||||
labelElement.classList.add('mdl-radio');
|
labelElement.classList.add('mdl-radio');
|
||||||
labelElement.classList.add('mdl-js-radio');
|
labelElement.classList.add('mdl-js-radio');
|
||||||
|
@ -42,12 +45,12 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
|
||||||
labelElement.classList.add('show-focus');
|
labelElement.classList.add('show-focus');
|
||||||
}
|
}
|
||||||
|
|
||||||
var labelTextElement = labelElement.querySelector('span');
|
let labelTextElement = labelElement.querySelector('span');
|
||||||
|
|
||||||
labelTextElement.classList.add('radioButtonLabel');
|
labelTextElement.classList.add('radioButtonLabel');
|
||||||
labelTextElement.classList.add('mdl-radio__label');
|
labelTextElement.classList.add('mdl-radio__label');
|
||||||
|
|
||||||
var html = '';
|
let html = '';
|
||||||
|
|
||||||
html += '<div class="mdl-radio__circles">';
|
html += '<div class="mdl-radio__circles">';
|
||||||
|
|
||||||
|
@ -76,4 +79,5 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
|
||||||
prototype: EmbyRadioPrototype,
|
prototype: EmbyRadioPrototype,
|
||||||
extends: 'input'
|
extends: 'input'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,7 +1,15 @@
|
||||||
define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement', 'css!./emby-scroller'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) {
|
import scroller from 'scroller';
|
||||||
'use strict';
|
import dom from 'dom';
|
||||||
|
import layoutManager from 'layoutManager';
|
||||||
|
import inputManager from 'inputManager';
|
||||||
|
import focusManager from 'focusManager';
|
||||||
|
import browser from 'browser';
|
||||||
|
import 'registerElement';
|
||||||
|
import 'css!./emby-scroller';
|
||||||
|
|
||||||
var ScrollerPrototype = Object.create(HTMLDivElement.prototype);
|
/* eslint-disable indent */
|
||||||
|
|
||||||
|
let ScrollerPrototype = Object.create(HTMLDivElement.prototype);
|
||||||
|
|
||||||
ScrollerPrototype.createdCallback = function () {
|
ScrollerPrototype.createdCallback = function () {
|
||||||
this.classList.add('emby-scroller');
|
this.classList.add('emby-scroller');
|
||||||
|
@ -9,7 +17,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||||
|
|
||||||
function initCenterFocus(elem, scrollerInstance) {
|
function initCenterFocus(elem, scrollerInstance) {
|
||||||
dom.addEventListener(elem, 'focus', function (e) {
|
dom.addEventListener(elem, 'focus', function (e) {
|
||||||
var focused = focusManager.focusableParent(e.target);
|
const focused = focusManager.focusableParent(e.target);
|
||||||
if (focused) {
|
if (focused) {
|
||||||
scrollerInstance.toCenter(focused);
|
scrollerInstance.toCenter(focused);
|
||||||
}
|
}
|
||||||
|
@ -80,7 +88,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||||
};
|
};
|
||||||
|
|
||||||
function onInputCommand(e) {
|
function onInputCommand(e) {
|
||||||
var cmd = e.detail.command;
|
const cmd = e.detail.command;
|
||||||
if (cmd === 'end') {
|
if (cmd === 'end') {
|
||||||
focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands'));
|
focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands'));
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -101,18 +109,18 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||||
inputManager.on(this, onInputCommand);
|
inputManager.on(this, onInputCommand);
|
||||||
}
|
}
|
||||||
|
|
||||||
var horizontal = this.getAttribute('data-horizontal') !== 'false';
|
const horizontal = this.getAttribute('data-horizontal') !== 'false';
|
||||||
|
|
||||||
var slider = this.querySelector('.scrollSlider');
|
const slider = this.querySelector('.scrollSlider');
|
||||||
|
|
||||||
if (horizontal) {
|
if (horizontal) {
|
||||||
slider.style['white-space'] = 'nowrap';
|
slider.style['white-space'] = 'nowrap';
|
||||||
}
|
}
|
||||||
|
|
||||||
var scrollFrame = this;
|
const scrollFrame = this;
|
||||||
var enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
|
const enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
|
||||||
|
|
||||||
var options = {
|
const options = {
|
||||||
horizontal: horizontal,
|
horizontal: horizontal,
|
||||||
mouseDragging: 1,
|
mouseDragging: 1,
|
||||||
mouseWheel: this.getAttribute('data-mousewheel') !== 'false',
|
mouseWheel: this.getAttribute('data-mousewheel') !== 'false',
|
||||||
|
@ -154,14 +162,14 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||||
}
|
}
|
||||||
|
|
||||||
ScrollerPrototype.pause = function () {
|
ScrollerPrototype.pause = function () {
|
||||||
var headroom = this.headroom;
|
const headroom = this.headroom;
|
||||||
if (headroom) {
|
if (headroom) {
|
||||||
headroom.pause();
|
headroom.pause();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ScrollerPrototype.resume = function () {
|
ScrollerPrototype.resume = function () {
|
||||||
var headroom = this.headroom;
|
const headroom = this.headroom;
|
||||||
if (headroom) {
|
if (headroom) {
|
||||||
headroom.resume();
|
headroom.resume();
|
||||||
}
|
}
|
||||||
|
@ -172,13 +180,13 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||||
inputManager.off(this, onInputCommand);
|
inputManager.off(this, onInputCommand);
|
||||||
}
|
}
|
||||||
|
|
||||||
var headroom = this.headroom;
|
const headroom = this.headroom;
|
||||||
if (headroom) {
|
if (headroom) {
|
||||||
headroom.destroy();
|
headroom.destroy();
|
||||||
this.headroom = null;
|
this.headroom = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
var scrollerInstance = this.scroller;
|
const scrollerInstance = this.scroller;
|
||||||
if (scrollerInstance) {
|
if (scrollerInstance) {
|
||||||
scrollerInstance.destroy();
|
scrollerInstance.destroy();
|
||||||
this.scroller = null;
|
this.scroller = null;
|
||||||
|
@ -189,4 +197,5 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
||||||
prototype: ScrollerPrototype,
|
prototype: ScrollerPrototype,
|
||||||
extends: 'div'
|
extends: 'div'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,15 +1,22 @@
|
||||||
define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) {
|
import browser from 'browser';
|
||||||
'use strict';
|
import dom from 'dom';
|
||||||
|
import layoutManager from 'layoutManager';
|
||||||
|
import keyboardnavigation from 'keyboardnavigation';
|
||||||
|
import 'css!./emby-slider';
|
||||||
|
import 'webcomponents';
|
||||||
|
import 'emby-input';
|
||||||
|
|
||||||
var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
|
/* eslint-disable indent */
|
||||||
|
|
||||||
var supportsValueSetOverride = false;
|
let EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
|
||||||
|
|
||||||
var enableWidthWithTransform;
|
let supportsValueSetOverride = false;
|
||||||
|
|
||||||
|
let enableWidthWithTransform;
|
||||||
|
|
||||||
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
|
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
|
||||||
|
|
||||||
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
||||||
// descriptor returning null in webos
|
// descriptor returning null in webos
|
||||||
if (descriptor && descriptor.configurable) {
|
if (descriptor && descriptor.configurable) {
|
||||||
supportsValueSetOverride = true;
|
supportsValueSetOverride = true;
|
||||||
|
@ -24,14 +31,14 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
* @return {number} slider fraction
|
* @return {number} slider fraction
|
||||||
*/
|
*/
|
||||||
function mapClientToFraction(range, clientX) {
|
function mapClientToFraction(range, clientX) {
|
||||||
var rect = range.sliderBubbleTrack.getBoundingClientRect();
|
const rect = range.sliderBubbleTrack.getBoundingClientRect();
|
||||||
|
|
||||||
var fraction = (clientX - rect.left) / rect.width;
|
let fraction = (clientX - rect.left) / rect.width;
|
||||||
|
|
||||||
// Snap to step
|
// Snap to step
|
||||||
var valueRange = range.max - range.min;
|
const valueRange = range.max - range.min;
|
||||||
if (range.step !== 'any' && valueRange !== 0) {
|
if (range.step !== 'any' && valueRange !== 0) {
|
||||||
var step = (range.step || 1) / valueRange;
|
const step = (range.step || 1) / valueRange;
|
||||||
fraction = Math.round(fraction / step) * step;
|
fraction = Math.round(fraction / step) * step;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,7 +53,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
* @return {number} slider value
|
* @return {number} slider value
|
||||||
*/
|
*/
|
||||||
function mapFractionToValue(range, fraction) {
|
function mapFractionToValue(range, fraction) {
|
||||||
var value = (range.max - range.min) * fraction;
|
let value = (range.max - range.min) * fraction;
|
||||||
|
|
||||||
// Snap to step
|
// Snap to step
|
||||||
if (range.step !== 'any') {
|
if (range.step !== 'any') {
|
||||||
|
@ -67,8 +74,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
* @return {number} slider fraction
|
* @return {number} slider fraction
|
||||||
*/
|
*/
|
||||||
function mapValueToFraction(range, value) {
|
function mapValueToFraction(range, value) {
|
||||||
var valueRange = range.max - range.min;
|
const valueRange = range.max - range.min;
|
||||||
var fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
|
const fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
|
||||||
return Math.min(Math.max(fraction, 0), 1);
|
return Math.min(Math.max(fraction, 0), 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -84,18 +91,18 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var range = this;
|
const range = this;
|
||||||
var value = range.value;
|
const value = range.value;
|
||||||
|
|
||||||
// put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond
|
// put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond
|
||||||
// Keep only one per slider frame request
|
// Keep only one per slider frame request
|
||||||
cancelAnimationFrame(range.updateValuesFrame);
|
cancelAnimationFrame(range.updateValuesFrame);
|
||||||
range.updateValuesFrame = requestAnimationFrame(function () {
|
range.updateValuesFrame = requestAnimationFrame(function () {
|
||||||
|
|
||||||
var backgroundLower = range.backgroundLower;
|
let backgroundLower = range.backgroundLower;
|
||||||
|
|
||||||
if (backgroundLower) {
|
if (backgroundLower) {
|
||||||
var fraction = (value - range.min) / (range.max - range.min);
|
let fraction = (value - range.min) / (range.max - range.min);
|
||||||
|
|
||||||
if (enableWidthWithTransform) {
|
if (enableWidthWithTransform) {
|
||||||
backgroundLower.style.transform = 'scaleX(' + (fraction) + ')';
|
backgroundLower.style.transform = 'scaleX(' + (fraction) + ')';
|
||||||
|
@ -110,10 +117,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
function updateBubble(range, value, bubble, bubbleText) {
|
function updateBubble(range, value, bubble, bubbleText) {
|
||||||
|
|
||||||
requestAnimationFrame(function () {
|
requestAnimationFrame(function () {
|
||||||
var bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
|
const bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
|
||||||
var bubbleRect = bubble.getBoundingClientRect();
|
const bubbleRect = bubble.getBoundingClientRect();
|
||||||
|
|
||||||
var bubblePos = bubbleTrackRect.width * value / 100;
|
let bubblePos = bubbleTrackRect.width * value / 100;
|
||||||
bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
|
bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
|
||||||
|
|
||||||
bubble.style.left = bubblePos + 'px';
|
bubble.style.left = bubblePos + 'px';
|
||||||
|
@ -158,10 +165,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
this.classList.add('show-focus');
|
this.classList.add('show-focus');
|
||||||
}
|
}
|
||||||
|
|
||||||
var containerElement = this.parentNode;
|
const containerElement = this.parentNode;
|
||||||
containerElement.classList.add('mdl-slider-container');
|
containerElement.classList.add('mdl-slider-container');
|
||||||
|
|
||||||
var htmlToInsert = '';
|
let htmlToInsert = '';
|
||||||
|
|
||||||
htmlToInsert += '<div class="mdl-slider-background-flex-container">';
|
htmlToInsert += '<div class="mdl-slider-background-flex-container">';
|
||||||
htmlToInsert += '<div class="mdl-slider-background-flex">';
|
htmlToInsert += '<div class="mdl-slider-background-flex">';
|
||||||
|
@ -187,9 +194,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack');
|
this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack');
|
||||||
this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
|
this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
|
||||||
this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
|
this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
|
||||||
var sliderBubble = containerElement.querySelector('.sliderBubble');
|
const sliderBubble = containerElement.querySelector('.sliderBubble');
|
||||||
|
|
||||||
var hasHideClass = sliderBubble.classList.contains('hide');
|
let hasHideClass = sliderBubble.classList.contains('hide');
|
||||||
|
|
||||||
dom.addEventListener(this, 'input', function (e) {
|
dom.addEventListener(this, 'input', function (e) {
|
||||||
this.dragging = true;
|
this.dragging = true;
|
||||||
|
@ -198,7 +205,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
updateValues.call(this);
|
updateValues.call(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
var bubbleValue = mapValueToFraction(this, this.value) * 100;
|
const bubbleValue = mapValueToFraction(this, this.value) * 100;
|
||||||
updateBubble(this, bubbleValue, sliderBubble);
|
updateBubble(this, bubbleValue, sliderBubble);
|
||||||
|
|
||||||
if (hasHideClass) {
|
if (hasHideClass) {
|
||||||
|
@ -223,10 +230,11 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
passive: true
|
passive: true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* eslint-disable-next-line compat/compat */
|
||||||
dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
|
dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
|
||||||
|
|
||||||
if (!this.dragging) {
|
if (!this.dragging) {
|
||||||
var bubbleValue = mapClientToFraction(this, e.clientX) * 100;
|
const bubbleValue = mapClientToFraction(this, e.clientX) * 100;
|
||||||
|
|
||||||
updateBubble(this, bubbleValue, sliderBubble);
|
updateBubble(this, bubbleValue, sliderBubble);
|
||||||
|
|
||||||
|
@ -240,6 +248,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
passive: true
|
passive: true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* eslint-disable-next-line compat/compat */
|
||||||
dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
|
dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
|
||||||
sliderBubble.classList.add('hide');
|
sliderBubble.classList.add('hide');
|
||||||
hasHideClass = true;
|
hasHideClass = true;
|
||||||
|
@ -256,7 +265,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
|
|
||||||
this.touched = true;
|
this.touched = true;
|
||||||
|
|
||||||
var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
|
const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
|
||||||
this.value = mapFractionToValue(this, fraction);
|
this.value = mapFractionToValue(this, fraction);
|
||||||
|
|
||||||
this.dispatchEvent(new Event('input', {
|
this.dispatchEvent(new Event('input', {
|
||||||
|
@ -276,7 +285,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
|
const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
|
||||||
this.value = mapFractionToValue(this, fraction);
|
this.value = mapFractionToValue(this, fraction);
|
||||||
|
|
||||||
this.dispatchEvent(new Event('input', {
|
this.dispatchEvent(new Event('input', {
|
||||||
|
@ -288,7 +297,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
});
|
});
|
||||||
|
|
||||||
dom.addEventListener(this, 'touchend', function (e) {
|
dom.addEventListener(this, 'touchend', function (e) {
|
||||||
var range = this;
|
const range = this;
|
||||||
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
range.touched = false;
|
range.touched = false;
|
||||||
|
@ -314,12 +323,12 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
* Keyboard dragging timeout.
|
* Keyboard dragging timeout.
|
||||||
* After this delay "change" event will be fired.
|
* After this delay "change" event will be fired.
|
||||||
*/
|
*/
|
||||||
var KeyboardDraggingTimeout = 1000;
|
const KeyboardDraggingTimeout = 1000;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Keyboard dragging timer.
|
* Keyboard dragging timer.
|
||||||
*/
|
*/
|
||||||
var keyboardDraggingTimer;
|
let keyboardDraggingTimer;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Start keyboard dragging.
|
* Start keyboard dragging.
|
||||||
|
@ -346,7 +355,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
|
|
||||||
elem.keyboardDragging = false;
|
elem.keyboardDragging = false;
|
||||||
|
|
||||||
var event = new Event('change', {
|
const event = new Event('change', {
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: false
|
cancelable: false
|
||||||
});
|
});
|
||||||
|
@ -364,7 +373,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
|
|
||||||
elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta));
|
elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta));
|
||||||
|
|
||||||
var event = new Event('input', {
|
const event = new Event('input', {
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: false
|
cancelable: false
|
||||||
});
|
});
|
||||||
|
@ -414,10 +423,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
|
|
||||||
function setRange(elem, startPercent, endPercent) {
|
function setRange(elem, startPercent, endPercent) {
|
||||||
|
|
||||||
var style = elem.style;
|
const style = elem.style;
|
||||||
style.left = Math.max(startPercent, 0) + '%';
|
style.left = Math.max(startPercent, 0) + '%';
|
||||||
|
|
||||||
var widthPercent = endPercent - startPercent;
|
const widthPercent = endPercent - startPercent;
|
||||||
style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';
|
style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -438,7 +447,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
|
|
||||||
EmbySliderPrototype.setBufferedRanges = function (ranges, runtime, position) {
|
EmbySliderPrototype.setBufferedRanges = function (ranges, runtime, position) {
|
||||||
|
|
||||||
var elem = this.backgroundUpper;
|
const elem = this.backgroundUpper;
|
||||||
if (!elem) {
|
if (!elem) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -449,9 +458,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
position = (position / runtime) * 100;
|
position = (position / runtime) * 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var i = 0, length = ranges.length; i < length; i++) {
|
for (const range in ranges) {
|
||||||
|
|
||||||
var range = ranges[i];
|
|
||||||
|
|
||||||
if (position != null) {
|
if (position != null) {
|
||||||
if (position >= range.end) {
|
if (position >= range.end) {
|
||||||
|
@ -468,7 +475,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
|
|
||||||
EmbySliderPrototype.setIsClear = function (isClear) {
|
EmbySliderPrototype.setIsClear = function (isClear) {
|
||||||
|
|
||||||
var backgroundLower = this.backgroundLower;
|
const backgroundLower = this.backgroundLower;
|
||||||
if (backgroundLower) {
|
if (backgroundLower) {
|
||||||
if (isClear) {
|
if (isClear) {
|
||||||
backgroundLower.classList.add('mdl-slider-background-lower-clear');
|
backgroundLower.classList.add('mdl-slider-background-lower-clear');
|
||||||
|
@ -479,7 +486,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
};
|
};
|
||||||
|
|
||||||
function startInterval(range) {
|
function startInterval(range) {
|
||||||
var interval = range.interval;
|
const interval = range.interval;
|
||||||
if (interval) {
|
if (interval) {
|
||||||
clearInterval(interval);
|
clearInterval(interval);
|
||||||
}
|
}
|
||||||
|
@ -488,7 +495,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
|
|
||||||
EmbySliderPrototype.detachedCallback = function () {
|
EmbySliderPrototype.detachedCallback = function () {
|
||||||
|
|
||||||
var interval = this.interval;
|
const interval = this.interval;
|
||||||
if (interval) {
|
if (interval) {
|
||||||
clearInterval(interval);
|
clearInterval(interval);
|
||||||
}
|
}
|
||||||
|
@ -501,4 +508,5 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||||
prototype: EmbySliderPrototype,
|
prototype: EmbySliderPrototype,
|
||||||
extends: 'input'
|
extends: 'input'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,9 +1,17 @@
|
||||||
define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'registerElement', 'css!./emby-tabs', 'scrollStyles'], function (dom, scroller, browser, layoutManager, focusManager) {
|
import dom from 'dom';
|
||||||
'use strict';
|
import scroller from 'scroller';
|
||||||
|
import browser from 'browser';
|
||||||
|
import layoutManager from 'layoutManager';
|
||||||
|
import focusManager from 'focusManager';
|
||||||
|
import 'registerElement';
|
||||||
|
import 'css!./emby-tabs';
|
||||||
|
import 'scrollStyles';
|
||||||
|
|
||||||
var EmbyTabs = Object.create(HTMLDivElement.prototype);
|
/* eslint-disable indent */
|
||||||
var buttonClass = 'emby-tab-button';
|
|
||||||
var activeButtonClass = buttonClass + '-active';
|
let EmbyTabs = Object.create(HTMLDivElement.prototype);
|
||||||
|
const buttonClass = 'emby-tab-button';
|
||||||
|
const activeButtonClass = buttonClass + '-active';
|
||||||
|
|
||||||
function setActiveTabButton(tabs, newButton, oldButton, animate) {
|
function setActiveTabButton(tabs, newButton, oldButton, animate) {
|
||||||
|
|
||||||
|
@ -16,14 +24,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeActivePanelClass(tabs, index) {
|
function removeActivePanelClass(tabs, index) {
|
||||||
var tabPanel = getTabPanel(tabs, index);
|
let tabPanel = getTabPanel(tabs, index);
|
||||||
if (tabPanel) {
|
if (tabPanel) {
|
||||||
tabPanel.classList.remove('is-active');
|
tabPanel.classList.remove('is-active');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addActivePanelClass(tabs, index) {
|
function addActivePanelClass(tabs, index) {
|
||||||
var tabPanel = getTabPanel(tabs, index);
|
let tabPanel = getTabPanel(tabs, index);
|
||||||
if (tabPanel) {
|
if (tabPanel) {
|
||||||
tabPanel.classList.add('is-active');
|
tabPanel.classList.add('is-active');
|
||||||
}
|
}
|
||||||
|
@ -31,9 +39,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
|
|
||||||
function fadeInRight(elem) {
|
function fadeInRight(elem) {
|
||||||
|
|
||||||
var pct = browser.mobile ? '4%' : '0.5%';
|
const pct = browser.mobile ? '4%' : '0.5%';
|
||||||
|
|
||||||
var keyframes = [
|
const keyframes = [
|
||||||
{ opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 },
|
{ opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 },
|
||||||
{ opacity: '1', transform: 'none', offset: 1 }];
|
{ opacity: '1', transform: 'none', offset: 1 }];
|
||||||
|
|
||||||
|
@ -56,7 +64,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
removeActivePanelClass(tabs, previousIndex);
|
removeActivePanelClass(tabs, previousIndex);
|
||||||
}
|
}
|
||||||
|
|
||||||
var newPanel = getTabPanel(tabs, index);
|
let newPanel = getTabPanel(tabs, index);
|
||||||
|
|
||||||
if (newPanel) {
|
if (newPanel) {
|
||||||
// animate new panel ?
|
// animate new panel ?
|
||||||
|
@ -70,10 +78,10 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
|
|
||||||
function onClick(e) {
|
function onClick(e) {
|
||||||
|
|
||||||
var tabs = this;
|
const tabs = this;
|
||||||
|
|
||||||
var current = tabs.querySelector('.' + activeButtonClass);
|
const current = tabs.querySelector('.' + activeButtonClass);
|
||||||
var tabButton = dom.parentWithClass(e.target, buttonClass);
|
const tabButton = dom.parentWithClass(e.target, buttonClass);
|
||||||
|
|
||||||
if (tabButton && tabButton !== current) {
|
if (tabButton && tabButton !== current) {
|
||||||
|
|
||||||
|
@ -81,11 +89,11 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
current.classList.remove(activeButtonClass);
|
current.classList.remove(activeButtonClass);
|
||||||
}
|
}
|
||||||
|
|
||||||
var previousIndex = current ? parseInt(current.getAttribute('data-index')) : null;
|
const previousIndex = current ? parseInt(current.getAttribute('data-index')) : null;
|
||||||
|
|
||||||
setActiveTabButton(tabs, tabButton, current, true);
|
setActiveTabButton(tabs, tabButton, current, true);
|
||||||
|
|
||||||
var index = parseInt(tabButton.getAttribute('data-index'));
|
const index = parseInt(tabButton.getAttribute('data-index'));
|
||||||
|
|
||||||
triggerBeforeTabChange(tabs, index, previousIndex);
|
triggerBeforeTabChange(tabs, index, previousIndex);
|
||||||
|
|
||||||
|
@ -115,7 +123,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var contentScrollSlider = tabs.querySelector('.emby-tabs-slider');
|
const contentScrollSlider = tabs.querySelector('.emby-tabs-slider');
|
||||||
if (contentScrollSlider) {
|
if (contentScrollSlider) {
|
||||||
tabs.scroller = new scroller(tabs, {
|
tabs.scroller = new scroller(tabs, {
|
||||||
horizontal: 1,
|
horizontal: 1,
|
||||||
|
@ -160,7 +168,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
|
|
||||||
EmbyTabs.focus = function () {
|
EmbyTabs.focus = function () {
|
||||||
|
|
||||||
var selected = this.querySelector('.' + activeButtonClass);
|
const selected = this.querySelector('.' + activeButtonClass);
|
||||||
|
|
||||||
if (selected) {
|
if (selected) {
|
||||||
focusManager.focus(selected);
|
focusManager.focus(selected);
|
||||||
|
@ -180,16 +188,16 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
|
|
||||||
initScroller(this);
|
initScroller(this);
|
||||||
|
|
||||||
var current = this.querySelector('.' + activeButtonClass);
|
const current = this.querySelector('.' + activeButtonClass);
|
||||||
var currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
|
const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
|
||||||
|
|
||||||
if (currentIndex !== -1) {
|
if (currentIndex !== -1) {
|
||||||
|
|
||||||
this.selectedTabIndex = currentIndex;
|
this.selectedTabIndex = currentIndex;
|
||||||
|
|
||||||
var tabButtons = this.querySelectorAll('.' + buttonClass);
|
const tabButtons = this.querySelectorAll('.' + buttonClass);
|
||||||
|
|
||||||
var newTabButton = tabButtons[currentIndex];
|
const newTabButton = tabButtons[currentIndex];
|
||||||
|
|
||||||
if (newTabButton) {
|
if (newTabButton) {
|
||||||
setActiveTabButton(this, newTabButton, current, false);
|
setActiveTabButton(this, newTabButton, current, false);
|
||||||
|
@ -221,18 +229,18 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
|
|
||||||
EmbyTabs.selectedIndex = function (selected, triggerEvent) {
|
EmbyTabs.selectedIndex = function (selected, triggerEvent) {
|
||||||
|
|
||||||
var tabs = this;
|
const tabs = this;
|
||||||
|
|
||||||
if (selected == null) {
|
if (selected == null) {
|
||||||
|
|
||||||
return tabs.selectedTabIndex || 0;
|
return tabs.selectedTabIndex || 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
var current = tabs.selectedIndex();
|
const current = tabs.selectedIndex();
|
||||||
|
|
||||||
tabs.selectedTabIndex = selected;
|
tabs.selectedTabIndex = selected;
|
||||||
|
|
||||||
var tabButtons = tabs.querySelectorAll('.' + buttonClass);
|
const tabButtons = tabs.querySelectorAll('.' + buttonClass);
|
||||||
|
|
||||||
if (current === selected || triggerEvent === false) {
|
if (current === selected || triggerEvent === false) {
|
||||||
|
|
||||||
|
@ -244,7 +252,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
var currentTabButton = tabButtons[current];
|
let currentTabButton = tabButtons[current];
|
||||||
setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false);
|
setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false);
|
||||||
|
|
||||||
if (current !== selected && currentTabButton) {
|
if (current !== selected && currentTabButton) {
|
||||||
|
@ -262,7 +270,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
|
|
||||||
function getSibling(elem, method) {
|
function getSibling(elem, method) {
|
||||||
|
|
||||||
var sibling = elem[method];
|
let sibling = elem[method];
|
||||||
|
|
||||||
while (sibling) {
|
while (sibling) {
|
||||||
if (sibling.classList.contains(buttonClass)) {
|
if (sibling.classList.contains(buttonClass)) {
|
||||||
|
@ -280,9 +288,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
|
|
||||||
EmbyTabs.selectNext = function () {
|
EmbyTabs.selectNext = function () {
|
||||||
|
|
||||||
var current = getSelectedTabButton(this);
|
const current = getSelectedTabButton(this);
|
||||||
|
|
||||||
var sibling = getSibling(current, 'nextSibling');
|
const sibling = getSibling(current, 'nextSibling');
|
||||||
|
|
||||||
if (sibling) {
|
if (sibling) {
|
||||||
onClick.call(this, {
|
onClick.call(this, {
|
||||||
|
@ -293,9 +301,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
|
|
||||||
EmbyTabs.selectPrevious = function () {
|
EmbyTabs.selectPrevious = function () {
|
||||||
|
|
||||||
var current = getSelectedTabButton(this);
|
const current = getSelectedTabButton(this);
|
||||||
|
|
||||||
var sibling = getSibling(current, 'previousSibling');
|
const sibling = getSibling(current, 'previousSibling');
|
||||||
|
|
||||||
if (sibling) {
|
if (sibling) {
|
||||||
onClick.call(this, {
|
onClick.call(this, {
|
||||||
|
@ -306,14 +314,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
|
|
||||||
EmbyTabs.triggerBeforeTabChange = function (selected) {
|
EmbyTabs.triggerBeforeTabChange = function (selected) {
|
||||||
|
|
||||||
var tabs = this;
|
const tabs = this;
|
||||||
|
|
||||||
triggerBeforeTabChange(tabs, tabs.selectedIndex());
|
triggerBeforeTabChange(tabs, tabs.selectedIndex());
|
||||||
};
|
};
|
||||||
|
|
||||||
EmbyTabs.triggerTabChange = function (selected) {
|
EmbyTabs.triggerTabChange = function (selected) {
|
||||||
|
|
||||||
var tabs = this;
|
const tabs = this;
|
||||||
|
|
||||||
tabs.dispatchEvent(new CustomEvent('tabchange', {
|
tabs.dispatchEvent(new CustomEvent('tabchange', {
|
||||||
detail: {
|
detail: {
|
||||||
|
@ -324,8 +332,8 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
|
|
||||||
EmbyTabs.setTabEnabled = function (index, enabled) {
|
EmbyTabs.setTabEnabled = function (index, enabled) {
|
||||||
|
|
||||||
var tabs = this;
|
const tabs = this;
|
||||||
var btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
|
const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
|
||||||
|
|
||||||
if (enabled) {
|
if (enabled) {
|
||||||
btn.classList.remove('hide');
|
btn.classList.remove('hide');
|
||||||
|
@ -338,4 +346,5 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
|
||||||
prototype: EmbyTabs,
|
prototype: EmbyTabs,
|
||||||
extends: 'div'
|
extends: 'div'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,8 +1,13 @@
|
||||||
define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'emby-input'], function (layoutManager, browser) {
|
import layoutManager from 'layoutManager';
|
||||||
'use strict';
|
import browser from 'browser';
|
||||||
|
import 'css!./emby-textarea';
|
||||||
|
import 'registerElement';
|
||||||
|
import 'emby-input';
|
||||||
|
|
||||||
|
/* eslint-disable indent */
|
||||||
|
|
||||||
function autoGrow(textarea, maxLines) {
|
function autoGrow(textarea, maxLines) {
|
||||||
var self = this;
|
const self = this;
|
||||||
|
|
||||||
if (maxLines === undefined) {
|
if (maxLines === undefined) {
|
||||||
maxLines = 999;
|
maxLines = 999;
|
||||||
|
@ -14,17 +19,17 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
|
||||||
* @returns {number}
|
* @returns {number}
|
||||||
*/
|
*/
|
||||||
self.getOffset = function (textarea) {
|
self.getOffset = function (textarea) {
|
||||||
var style = window.getComputedStyle(textarea, null);
|
const style = window.getComputedStyle(textarea, null);
|
||||||
var props = ['paddingTop', 'paddingBottom'];
|
const props = ['paddingTop', 'paddingBottom'];
|
||||||
var offset = 0;
|
let offset = 0;
|
||||||
|
|
||||||
for (var i = 0; i < props.length; i++) {
|
for (let i = 0; i < props.length; i++) {
|
||||||
offset += parseInt(style[props[i]]);
|
offset += parseInt(style[props[i]]);
|
||||||
}
|
}
|
||||||
return offset;
|
return offset;
|
||||||
};
|
};
|
||||||
|
|
||||||
var offset;
|
let offset;
|
||||||
function reset() {
|
function reset() {
|
||||||
textarea.rows = 1;
|
textarea.rows = 1;
|
||||||
offset = self.getOffset(textarea);
|
offset = self.getOffset(textarea);
|
||||||
|
@ -43,8 +48,8 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
|
||||||
textarea.rows = 3;
|
textarea.rows = 3;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var newHeight = 0;
|
let newHeight = 0;
|
||||||
var hasGrown = false;
|
let hasGrown = false;
|
||||||
|
|
||||||
if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
|
if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
|
||||||
textarea.style.overflowY = 'scroll';
|
textarea.style.overflowY = 'scroll';
|
||||||
|
@ -67,17 +72,17 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
|
||||||
autogrowFn();
|
autogrowFn();
|
||||||
}
|
}
|
||||||
|
|
||||||
var EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
|
const EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
|
||||||
|
|
||||||
var elementId = 0;
|
let elementId = 0;
|
||||||
|
|
||||||
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
|
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
|
||||||
|
|
||||||
var descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
|
const descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
|
||||||
|
|
||||||
// descriptor returning null in webos
|
// descriptor returning null in webos
|
||||||
if (descriptor && descriptor.configurable) {
|
if (descriptor && descriptor.configurable) {
|
||||||
var baseSetMethod = descriptor.set;
|
const baseSetMethod = descriptor.set;
|
||||||
descriptor.set = function (value) {
|
descriptor.set = function (value) {
|
||||||
baseSetMethod.call(this, value);
|
baseSetMethod.call(this, value);
|
||||||
|
|
||||||
|
@ -108,8 +113,8 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
|
||||||
this.rows = 1;
|
this.rows = 1;
|
||||||
this.classList.add('emby-textarea');
|
this.classList.add('emby-textarea');
|
||||||
|
|
||||||
var parentNode = this.parentNode;
|
const parentNode = this.parentNode;
|
||||||
var label = this.ownerDocument.createElement('label');
|
const label = this.ownerDocument.createElement('label');
|
||||||
label.innerHTML = this.getAttribute('label') || '';
|
label.innerHTML = this.getAttribute('label') || '';
|
||||||
label.classList.add('textareaLabel');
|
label.classList.add('textareaLabel');
|
||||||
|
|
||||||
|
@ -136,4 +141,5 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
|
||||||
prototype: EmbyTextAreaPrototype,
|
prototype: EmbyTextAreaPrototype,
|
||||||
extends: 'textarea'
|
extends: 'textarea'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
define(['css!./emby-toggle', 'registerElement'], function () {
|
import 'css!./emby-toggle';
|
||||||
'use strict';
|
import 'registerElement';
|
||||||
|
|
||||||
var EmbyTogglePrototype = Object.create(HTMLInputElement.prototype);
|
/* eslint-disable indent */
|
||||||
|
|
||||||
|
const EmbyTogglePrototype = Object.create(HTMLInputElement.prototype);
|
||||||
|
|
||||||
function onKeyDown(e) {
|
function onKeyDown(e) {
|
||||||
|
|
||||||
|
@ -29,11 +31,11 @@ define(['css!./emby-toggle', 'registerElement'], function () {
|
||||||
|
|
||||||
this.classList.add('mdl-switch__input');
|
this.classList.add('mdl-switch__input');
|
||||||
|
|
||||||
var labelElement = this.parentNode;
|
const labelElement = this.parentNode;
|
||||||
labelElement.classList.add('mdl-switch');
|
labelElement.classList.add('mdl-switch');
|
||||||
labelElement.classList.add('mdl-js-switch');
|
labelElement.classList.add('mdl-js-switch');
|
||||||
|
|
||||||
var labelTextElement = labelElement.querySelector('span');
|
const labelTextElement = labelElement.querySelector('span');
|
||||||
|
|
||||||
labelElement.insertAdjacentHTML('beforeend', '<div class="mdl-switch__trackContainer"><div class="mdl-switch__track"></div><div class="mdl-switch__thumb"><span class="mdl-switch__focus-helper"></span></div></div>');
|
labelElement.insertAdjacentHTML('beforeend', '<div class="mdl-switch__trackContainer"><div class="mdl-switch__track"></div><div class="mdl-switch__thumb"><span class="mdl-switch__focus-helper"></span></div></div>');
|
||||||
|
|
||||||
|
@ -47,4 +49,5 @@ define(['css!./emby-toggle', 'registerElement'], function () {
|
||||||
prototype: EmbyTogglePrototype,
|
prototype: EmbyTogglePrototype,
|
||||||
extends: 'input'
|
extends: 'input'
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue