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 #1582 from Camc314/migrate-to-ES6-9

Browse source 
Migration of emby-button, paper-icon-button-light, emby-collapse, emby-input to ES6 modules
This commit is contained in:
dkanada 2020-07-20 23:43:42 +09:00 • committed by GitHub
commit 276f4ccb3a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 116 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -198,6 +198,10 @@
"src/elements/emby-tabs/emby-tabs.js", "src/elements/emby-tabs/emby-tabs.js",
"src/elements/emby-textarea/emby-textarea.js", "src/elements/emby-textarea/emby-textarea.js",
"src/elements/emby-toggle/emby-toggle.js", "src/elements/emby-toggle/emby-toggle.js",
"src/elements/emby-button/emby-button.js",
"src/elements/emby-button/paper-icon-button-light.js",
"src/elements/emby-collapse/emby-collapse.js",
"src/elements/emby-input/emby-input.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",

115
src/elements/emby-button/emby-button.js
View file

@ -1,70 +1,75 @@
define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css!./emby-button', 'registerElement'], function (browser, dom, layoutManager, shell, appRouter, appHost) { import browser from 'browser';
'use strict'; import dom from 'dom';
import layoutManager from 'layoutManager';
import shell from 'shell';
import appRouter from 'appRouter';
import appHost from 'apphost';
import 'css!./emby-button';
import 'registerElement';
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
var EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype); const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
function onAnchorClick(e) { function onAnchorClick(e) {
var href = this.getAttribute('href') || ''; const href = this.getAttribute('href') || '';
if (href !== '#') { if (href !== '#') {
if (this.getAttribute('target')) { if (this.getAttribute('target')) {
if (!appHost.supports('targetblank')) { if (!appHost.supports('targetblank')) {
e.preventDefault(); e.preventDefault();
shell.openUrl(href); shell.openUrl(href);
}
} else {
appRouter.handleAnchorClick(e);
} }
} else { } else {
e.preventDefault(); appRouter.handleAnchorClick(e);
} }
} else {
e.preventDefault();
}
}
EmbyButtonPrototype.createdCallback = function () {
if (this.classList.contains('emby-button')) {
return;
} }
EmbyButtonPrototype.createdCallback = function () { this.classList.add('emby-button');
if (this.classList.contains('emby-button')) { // TODO replace all instances of element-showfocus with this method
return; if (layoutManager.tv) {
} // handles all special css for tv layout
// this method utilizes class chaining
this.classList.add('show-focus');
}
};
this.classList.add('emby-button'); EmbyButtonPrototype.attachedCallback = function () {
// TODO replace all instances of element-showfocus with this method if (this.tagName === 'A') {
if (layoutManager.tv) { dom.removeEventListener(this, 'click', onAnchorClick, {});
// handles all special css for tv layout dom.addEventListener(this, 'click', onAnchorClick, {});
// this method utilizes class chaining
this.classList.add('show-focus');
}
};
EmbyButtonPrototype.attachedCallback = function () { if (this.getAttribute('data-autohide') === 'true') {
if (this.tagName === 'A') { if (appHost.supports('externallinks')) {
dom.removeEventListener(this, 'click', onAnchorClick, {}); this.classList.remove('hide');
dom.addEventListener(this, 'click', onAnchorClick, {}); } else {
this.classList.add('hide');
if (this.getAttribute('data-autohide') === 'true') {
if (appHost.supports('externallinks')) {
this.classList.remove('hide');
} else {
this.classList.add('hide');
}
} }
} }
}; }
};
EmbyButtonPrototype.detachedCallback = function () { EmbyButtonPrototype.detachedCallback = function () {
dom.removeEventListener(this, 'click', onAnchorClick, {}); dom.removeEventListener(this, 'click', onAnchorClick, {});
}; };
EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback; EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback; EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback;
document.registerElement('emby-button', { document.registerElement('emby-button', {
prototype: EmbyButtonPrototype, prototype: EmbyButtonPrototype,
extends: 'button' extends: 'button'
});
document.registerElement('emby-linkbutton', {
prototype: EmbyLinkButtonPrototype,
extends: 'a'
});
return EmbyButtonPrototype;
}); });
document.registerElement('emby-linkbutton', {
prototype: EmbyLinkButtonPrototype,
extends: 'a'
});
export default EmbyButtonPrototype;

26
src/elements/emby-button/paper-icon-button-light.js
View file

@ -1,18 +1,18 @@
define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layoutManager) { import layoutManager from 'layoutManager';
'use strict'; import 'css!./emby-button';
import 'registerElement';
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
EmbyButtonPrototype.createdCallback = function () { EmbyButtonPrototype.createdCallback = function () {
this.classList.add('paper-icon-button-light'); this.classList.add('paper-icon-button-light');
if (layoutManager.tv) { if (layoutManager.tv) {
this.classList.add('show-focus'); this.classList.add('show-focus');
} }
}; };
document.registerElement('paper-icon-button-light', { document.registerElement('paper-icon-button-light', {
prototype: EmbyButtonPrototype, prototype: EmbyButtonPrototype,
extends: 'button' extends: 'button'
});
}); });

35
src/elements/emby-collapse/emby-collapse.js
View file

@ -1,18 +1,22 @@
define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], function (browser) { import browser from 'browser';
'use strict'; import 'css!./emby-collapse';
import 'registerElement';
import 'emby-button';
var EmbyButtonPrototype = Object.create(HTMLDivElement.prototype); /* eslint-disable indent */
const EmbyButtonPrototype = Object.create(HTMLDivElement.prototype);
function slideDownToShow(button, elem) { function slideDownToShow(button, elem) {
elem.classList.remove('hide'); elem.classList.remove('hide');
elem.classList.add('expanded'); elem.classList.add('expanded');
elem.style.height = 'auto'; elem.style.height = 'auto';
var height = elem.offsetHeight + 'px'; const height = elem.offsetHeight + 'px';
elem.style.height = '0'; elem.style.height = '0';
// trigger reflow // trigger reflow
var newHeight = elem.offsetHeight; const newHeight = elem.offsetHeight;
elem.style.height = height; elem.style.height = height;
setTimeout(function () { setTimeout(function () {
@ -24,7 +28,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
elem.style.height = 'auto'; elem.style.height = 'auto';
}, 300); }, 300);
var icon = button.querySelector('.material-icons'); const icon = button.querySelector('.material-icons');
//icon.innerHTML = 'expand_less'; //icon.innerHTML = 'expand_less';
icon.classList.add('emby-collapse-expandIconExpanded'); icon.classList.add('emby-collapse-expandIconExpanded');
} }
@ -33,7 +37,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
elem.style.height = elem.offsetHeight + 'px'; elem.style.height = elem.offsetHeight + 'px';
// trigger reflow // trigger reflow
var newHeight = elem.offsetHeight; const newHeight = elem.offsetHeight;
elem.classList.remove('expanded'); elem.classList.remove('expanded');
elem.style.height = '0'; elem.style.height = '0';
@ -46,15 +50,15 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
} }
}, 300); }, 300);
var icon = button.querySelector('.material-icons'); const icon = button.querySelector('.material-icons');
//icon.innerHTML = 'expand_more'; //icon.innerHTML = 'expand_more';
icon.classList.remove('emby-collapse-expandIconExpanded'); icon.classList.remove('emby-collapse-expandIconExpanded');
} }
function onButtonClick(e) { function onButtonClick(e) {
var button = this; const button = this;
var collapseContent = button.parentNode.querySelector('.collapseContent'); const collapseContent = button.parentNode.querySelector('.collapseContent');
if (collapseContent.expanded) { if (collapseContent.expanded) {
collapseContent.expanded = false; collapseContent.expanded = false;
@ -73,18 +77,18 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
this.classList.add('emby-collapse'); this.classList.add('emby-collapse');
var collapseContent = this.querySelector('.collapseContent'); const collapseContent = this.querySelector('.collapseContent');
if (collapseContent) { if (collapseContent) {
collapseContent.classList.add('hide'); collapseContent.classList.add('hide');
} }
var title = this.getAttribute('title'); const title = this.getAttribute('title');
var html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><span class="material-icons emby-collapse-expandIcon expand_more"></span></button>'; const html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><span class="material-icons emby-collapse-expandIcon expand_more"></span></button>';
this.insertAdjacentHTML('afterbegin', html); this.insertAdjacentHTML('afterbegin', html);
var button = this.querySelector('.emby-collapsible-button'); const button = this.querySelector('.emby-collapsible-button');
button.addEventListener('click', onButtonClick); button.addEventListener('click', onButtonClick);
@ -97,4 +101,5 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
prototype: EmbyButtonPrototype, prototype: EmbyButtonPrototype,
extends: 'div' extends: 'div'
}); });
});
/* eslint-enable indent */

32
src/elements/emby-input/emby-input.js
View file

@ -1,18 +1,23 @@
define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'], function (layoutManager, browser, dom) { import layoutManager from 'layoutManager';
'use strict'; import browser from 'browser';
import dom from 'dom';
import 'css!./emby-input';
import 'registerElement';
var EmbyInputPrototype = Object.create(HTMLInputElement.prototype); /* eslint-disable indent */
var inputId = 0; const EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
var supportsFloatingLabel = false;
let inputId = 0;
let supportsFloatingLabel = false;
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) {
var baseSetMethod = descriptor.set; const baseSetMethod = descriptor.set;
descriptor.set = function (value) { descriptor.set = function (value) {
baseSetMethod.call(this, value); baseSetMethod.call(this, value);
@ -39,9 +44,9 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'
this.classList.add('emby-input'); this.classList.add('emby-input');
var parentNode = this.parentNode; const parentNode = this.parentNode;
var document = this.ownerDocument; const document = this.ownerDocument;
var label = document.createElement('label'); const label = document.createElement('label');
label.innerHTML = this.getAttribute('label') || ''; label.innerHTML = this.getAttribute('label') || '';
label.classList.add('inputLabel'); label.classList.add('inputLabel');
label.classList.add('inputLabelUnfocused'); label.classList.add('inputLabelUnfocused');
@ -95,12 +100,12 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'
function onChange() { function onChange() {
var label = this.labelElement; const label = this.labelElement;
if (this.value) { if (this.value) {
label.classList.remove('inputLabel-float'); label.classList.remove('inputLabel-float');
} else { } else {
var instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time'; const instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time';
if (instanceSupportsFloat) { if (instanceSupportsFloat) {
label.classList.add('inputLabel-float'); label.classList.add('inputLabel-float');
@ -121,4 +126,5 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'
prototype: EmbyInputPrototype, prototype: EmbyInputPrototype,
extends: 'input' extends: 'input'
}); });
});
/* eslint-enable indent */