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

Migration of emby-buttton, paper-icon-button-light, emby-collapse, emby-imput to ES6 modules

Browse source
This commit is contained in:
Cameron 2020-07-15 11:41:59 +01:00
parent fd853a180a
commit 9e2d289265
5 changed files with 67 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -147,6 +147,10 @@
"src/elements/emby-checkbox/emby-checkbox.js", "src/elements/emby-checkbox/emby-checkbox.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",

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

@ -1,11 +1,19 @@
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); /* eslint-disable indent */
var EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
const EmbyButtonPrototype = Object.create(HTMLButtonElement.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')) {
@ -66,5 +74,6 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
extends: 'a' extends: 'a'
}); });
return EmbyButtonPrototype; export default EmbyButtonPrototype;
});
/* eslint-enable indent */

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

@ -1,7 +1,10 @@
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); /* eslint-disable indent */
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');
@ -15,4 +18,5 @@ define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layo
prototype: EmbyButtonPrototype, prototype: EmbyButtonPrototype,
extends: 'button' extends: 'button'
}); });
});
/* eslint-enable indent */

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 */