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

Merge pull request #1538 from Camc314/migrate-to-ES6-7

Browse source 
Migration of emby-radio, emby-scroller and emby-tabs to ES6 modules
This commit is contained in:
Julien Machiels 2020-07-15 10:56:16 +02:00 • committed by GitHub
commit fd853a180a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 83 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -137,6 +137,9 @@
"src/controllers/dashboard/logs.js",
"src/controllers/user/subtitles.js",
"src/controllers/dashboard/plugins/repositories.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",

20
src/elements/emby-radio/emby-radio.js
View file

@ -1,7 +1,10 @@
define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) {
'use strict';
import layoutManager from 'layoutManager';
import 'css!./emby-radio';
import 'registerElement';
var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
/* eslint-disable indent */
let EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
function onKeyDown(e) {
@ -23,7 +26,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
}
EmbyRadioPrototype.attachedCallback = function () {
var showFocus = !layoutManager.mobile;
const showFocus = !layoutManager.mobile;
if (this.getAttribute('data-radio') === 'true') {
return;
@ -33,7 +36,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
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');
labelElement.classList.add('mdl-js-radio');
@ -42,12 +45,12 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
labelElement.classList.add('show-focus');
}
var labelTextElement = labelElement.querySelector('span');
let labelTextElement = labelElement.querySelector('span');
labelTextElement.classList.add('radioButtonLabel');
labelTextElement.classList.add('mdl-radio__label');
var html = '';
let html = '';
html += '<div class="mdl-radio__circles">';
@ -76,4 +79,5 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
prototype: EmbyRadioPrototype,
extends: 'input'
});
});
/* eslint-enable indent */

39
src/elements/emby-scroller/emby-scroller.js
View file

@ -1,7 +1,15 @@
define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement', 'css!./emby-scroller'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) {
'use strict';
import scroller from 'scroller';
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 () {
this.classList.add('emby-scroller');
@ -9,7 +17,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
function initCenterFocus(elem, scrollerInstance) {
dom.addEventListener(elem, 'focus', function (e) {
var focused = focusManager.focusableParent(e.target);
const focused = focusManager.focusableParent(e.target);
if (focused) {
scrollerInstance.toCenter(focused);
}
@ -80,7 +88,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
};
function onInputCommand(e) {
var cmd = e.detail.command;
const cmd = e.detail.command;
if (cmd === 'end') {
focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands'));
e.preventDefault();
@ -101,18 +109,18 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
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) {
slider.style['white-space'] = 'nowrap';
}
var scrollFrame = this;
var enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
const scrollFrame = this;
const enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
var options = {
const options = {
horizontal: horizontal,
mouseDragging: 1,
mouseWheel: this.getAttribute('data-mousewheel') !== 'false',
@ -154,14 +162,14 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
}
ScrollerPrototype.pause = function () {
var headroom = this.headroom;
const headroom = this.headroom;
if (headroom) {
headroom.pause();
}
};
ScrollerPrototype.resume = function () {
var headroom = this.headroom;
const headroom = this.headroom;
if (headroom) {
headroom.resume();
}
@ -172,13 +180,13 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
inputManager.off(this, onInputCommand);
}
var headroom = this.headroom;
const headroom = this.headroom;
if (headroom) {
headroom.destroy();
this.headroom = null;
}
var scrollerInstance = this.scroller;
const scrollerInstance = this.scroller;
if (scrollerInstance) {
scrollerInstance.destroy();
this.scroller = null;
@ -189,4 +197,5 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
prototype: ScrollerPrototype,
extends: 'div'
});
});
/* eslint-enable indent */

79
src/elements/emby-tabs/emby-tabs.js
View file

@ -1,9 +1,17 @@
define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'registerElement', 'css!./emby-tabs', 'scrollStyles'], function (dom, scroller, browser, layoutManager, focusManager) {
'use strict';
import dom from 'dom';
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);
var buttonClass = 'emby-tab-button';
var activeButtonClass = buttonClass + '-active';
/* eslint-disable indent */
let EmbyTabs = Object.create(HTMLDivElement.prototype);
const buttonClass = 'emby-tab-button';
const activeButtonClass = buttonClass + '-active';
function setActiveTabButton(tabs, newButton, oldButton, animate) {
@ -16,14 +24,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
}
function removeActivePanelClass(tabs, index) {
var tabPanel = getTabPanel(tabs, index);
let tabPanel = getTabPanel(tabs, index);
if (tabPanel) {
tabPanel.classList.remove('is-active');
}
}
function addActivePanelClass(tabs, index) {
var tabPanel = getTabPanel(tabs, index);
let tabPanel = getTabPanel(tabs, index);
if (tabPanel) {
tabPanel.classList.add('is-active');
}
@ -31,9 +39,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
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: '1', transform: 'none', offset: 1 }];
@ -56,7 +64,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
removeActivePanelClass(tabs, previousIndex);
}
var newPanel = getTabPanel(tabs, index);
let newPanel = getTabPanel(tabs, index);
if (newPanel) {
// animate new panel ?
@ -70,10 +78,10 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
function onClick(e) {
var tabs = this;
const tabs = this;
var current = tabs.querySelector('.' + activeButtonClass);
var tabButton = dom.parentWithClass(e.target, buttonClass);
const current = tabs.querySelector('.' + activeButtonClass);
const tabButton = dom.parentWithClass(e.target, buttonClass);
if (tabButton && tabButton !== current) {
@ -81,11 +89,11 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
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);
var index = parseInt(tabButton.getAttribute('data-index'));
const index = parseInt(tabButton.getAttribute('data-index'));
triggerBeforeTabChange(tabs, index, previousIndex);
@ -115,7 +123,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
return;
}
var contentScrollSlider = tabs.querySelector('.emby-tabs-slider');
const contentScrollSlider = tabs.querySelector('.emby-tabs-slider');
if (contentScrollSlider) {
tabs.scroller = new scroller(tabs, {
horizontal: 1,
@ -160,7 +168,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.focus = function () {
var selected = this.querySelector('.' + activeButtonClass);
const selected = this.querySelector('.' + activeButtonClass);
if (selected) {
focusManager.focus(selected);
@ -180,16 +188,16 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
initScroller(this);
var current = this.querySelector('.' + activeButtonClass);
var currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
const current = this.querySelector('.' + activeButtonClass);
const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
if (currentIndex !== -1) {
this.selectedTabIndex = currentIndex;
var tabButtons = this.querySelectorAll('.' + buttonClass);
const tabButtons = this.querySelectorAll('.' + buttonClass);
var newTabButton = tabButtons[currentIndex];
const newTabButton = tabButtons[currentIndex];
if (newTabButton) {
setActiveTabButton(this, newTabButton, current, false);
@ -221,18 +229,18 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.selectedIndex = function (selected, triggerEvent) {
var tabs = this;
const tabs = this;
if (selected == null) {
return tabs.selectedTabIndex || 0;
}
var current = tabs.selectedIndex();
const current = tabs.selectedIndex();
tabs.selectedTabIndex = selected;
var tabButtons = tabs.querySelectorAll('.' + buttonClass);
const tabButtons = tabs.querySelectorAll('.' + buttonClass);
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);
if (current !== selected && currentTabButton) {
@ -262,7 +270,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
function getSibling(elem, method) {
var sibling = elem[method];
let sibling = elem[method];
while (sibling) {
if (sibling.classList.contains(buttonClass)) {
@ -280,9 +288,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.selectNext = function () {
var current = getSelectedTabButton(this);
const current = getSelectedTabButton(this);
var sibling = getSibling(current, 'nextSibling');
const sibling = getSibling(current, 'nextSibling');
if (sibling) {
onClick.call(this, {
@ -293,9 +301,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.selectPrevious = function () {
var current = getSelectedTabButton(this);
const current = getSelectedTabButton(this);
var sibling = getSibling(current, 'previousSibling');
const sibling = getSibling(current, 'previousSibling');
if (sibling) {
onClick.call(this, {
@ -306,14 +314,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.triggerBeforeTabChange = function (selected) {
var tabs = this;
const tabs = this;
triggerBeforeTabChange(tabs, tabs.selectedIndex());
};
EmbyTabs.triggerTabChange = function (selected) {
var tabs = this;
const tabs = this;
tabs.dispatchEvent(new CustomEvent('tabchange', {
detail: {
@ -324,8 +332,8 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
EmbyTabs.setTabEnabled = function (index, enabled) {
var tabs = this;
var btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
const tabs = this;
const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
if (enabled) {
btn.classList.remove('hide');
@ -338,4 +346,5 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
prototype: EmbyTabs,
extends: 'div'
});
});
/* eslint-enable indent */