mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #1535 from Camc314/migrate-to-ES6-4
Migration emby-checkbox, emby-textarea and emby-toggle to ES6 modules
This commit is contained in:
commit
2097f4799c
4 changed files with 54 additions and 37 deletions
|
@ -137,6 +137,9 @@
|
||||||
"src/controllers/dashboard/logs.js",
|
"src/controllers/dashboard/logs.js",
|
||||||
"src/controllers/user/subtitles.js",
|
"src/controllers/user/subtitles.js",
|
||||||
"src/controllers/dashboard/plugins/repositories.js",
|
"src/controllers/dashboard/plugins/repositories.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,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