cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-16 02:18:16 -07:00
Code Issues Packages Projects Releases Wiki 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
Show Stats 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-textarea/emby-textarea.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/tableOfContents.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) {
'use strict';
import browser from 'browser';
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);
var EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
/* eslint-disable indent */
const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
function onAnchorClick(e) {
var href = this.getAttribute('href') || '';
const href = this.getAttribute('href') || '';
if (href !== '#') {
if (this.getAttribute('target')) {
if (!appHost.supports('targetblank')) {
@ -66,5 +74,6 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
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) {
'use strict';
import layoutManager from 'layoutManager';
import 'css!./emby-button';
import 'registerElement';
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
/* eslint-disable indent */
const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
EmbyButtonPrototype.createdCallback = function () {
this.classList.add('paper-icon-button-light');
@ -15,4 +18,5 @@ define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layo
prototype: EmbyButtonPrototype,
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) {
'use strict';
import browser from 'browser';
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) {
elem.classList.remove('hide');
elem.classList.add('expanded');
elem.style.height = 'auto';
var height = elem.offsetHeight + 'px';
const height = elem.offsetHeight + 'px';
elem.style.height = '0';
// trigger reflow
var newHeight = elem.offsetHeight;
const newHeight = elem.offsetHeight;
elem.style.height = height;
setTimeout(function () {
@ -24,7 +28,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
elem.style.height = 'auto';
}, 300);
var icon = button.querySelector('.material-icons');
const icon = button.querySelector('.material-icons');
//icon.innerHTML = 'expand_less';
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';
// trigger reflow
var newHeight = elem.offsetHeight;
const newHeight = elem.offsetHeight;
elem.classList.remove('expanded');
elem.style.height = '0';
@ -46,15 +50,15 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
}
}, 300);
var icon = button.querySelector('.material-icons');
const icon = button.querySelector('.material-icons');
//icon.innerHTML = 'expand_more';
icon.classList.remove('emby-collapse-expandIconExpanded');
}
function onButtonClick(e) {
var button = this;
var collapseContent = button.parentNode.querySelector('.collapseContent');
const button = this;
const collapseContent = button.parentNode.querySelector('.collapseContent');
if (collapseContent.expanded) {
collapseContent.expanded = false;
@ -73,18 +77,18 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
this.classList.add('emby-collapse');
var collapseContent = this.querySelector('.collapseContent');
const collapseContent = this.querySelector('.collapseContent');
if (collapseContent) {
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);
var button = this.querySelector('.emby-collapsible-button');
const button = this.querySelector('.emby-collapsible-button');
button.addEventListener('click', onButtonClick);
@ -97,4 +101,5 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
prototype: EmbyButtonPrototype,
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) {
'use strict';
import layoutManager from 'layoutManager';
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;
var supportsFloatingLabel = false;
const EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
let inputId = 0;
let supportsFloatingLabel = false;
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
// descriptor returning null in webos
if (descriptor && descriptor.configurable) {
var baseSetMethod = descriptor.set;
const baseSetMethod = descriptor.set;
descriptor.set = function (value) {
baseSetMethod.call(this, value);
@ -39,9 +44,9 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'
this.classList.add('emby-input');
var parentNode = this.parentNode;
var document = this.ownerDocument;
var label = document.createElement('label');
const parentNode = this.parentNode;
const document = this.ownerDocument;
const label = document.createElement('label');
label.innerHTML = this.getAttribute('label') || '';
label.classList.add('inputLabel');
label.classList.add('inputLabelUnfocused');
@ -95,12 +100,12 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'
function onChange() {
var label = this.labelElement;
const label = this.labelElement;
if (this.value) {
label.classList.remove('inputLabel-float');
} else {
var instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time';
const instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time';
if (instanceSupportsFloat) {
label.classList.add('inputLabel-float');
@ -121,4 +126,5 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'
prototype: EmbyInputPrototype,
extends: 'input'
});
});
/* eslint-enable indent */