1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
jellyfin-web/src/elements/emby-input/emby-input.js

122 lines
3.6 KiB
JavaScript
Raw Normal View History

2020-08-14 08:46:34 +02:00
import browser from '../../scripts/browser';
import dom from '../../scripts/dom';
2021-01-26 15:42:02 -05:00
import './emby-input.scss';
2020-09-08 02:43:56 -04:00
import 'webcomponents.js/webcomponents-lite';
/* eslint-disable indent */
const EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
let inputId = 0;
let supportsFloatingLabel = false;
2018-10-23 01:05:09 +03:00
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
// descriptor returning null in webos
2018-10-23 01:05:09 +03:00
if (descriptor && descriptor.configurable) {
const baseSetMethod = descriptor.set;
descriptor.set = function (value) {
baseSetMethod.call(this, value);
this.dispatchEvent(new CustomEvent('valueset', {
bubbles: false,
cancelable: false
}));
};
Object.defineProperty(HTMLInputElement.prototype, 'value', descriptor);
supportsFloatingLabel = true;
2018-10-23 01:05:09 +03:00
}
}
EmbyInputPrototype.createdCallback = function () {
if (!this.id) {
this.id = 'embyinput' + inputId;
inputId++;
}
if (this.classList.contains('emby-input')) {
return;
}
this.classList.add('emby-input');
const parentNode = this.parentNode;
const document = this.ownerDocument;
const label = document.createElement('label');
2022-01-30 00:27:26 +03:00
label.innerText = this.getAttribute('label') || '';
label.classList.add('inputLabel');
label.classList.add('inputLabelUnfocused');
label.htmlFor = this.id;
parentNode.insertBefore(label, this);
this.labelElement = label;
dom.addEventListener(this, 'focus', function () {
onChange.call(this);
// For Samsung orsay devices
if (document.attachIME) {
document.attachIME(this);
}
label.classList.add('inputLabelFocused');
label.classList.remove('inputLabelUnfocused');
}, {
passive: true
});
dom.addEventListener(this, 'blur', function () {
onChange.call(this);
label.classList.remove('inputLabelFocused');
label.classList.add('inputLabelUnfocused');
}, {
passive: true
});
dom.addEventListener(this, 'change', onChange, {
passive: true
});
dom.addEventListener(this, 'input', onChange, {
passive: true
});
dom.addEventListener(this, 'valueset', onChange, {
passive: true
});
2022-10-03 14:22:02 -04:00
//Make sure the IME pops up if this is the first/default element on the page
if (browser.orsay && this === document.activeElement && document.attachIME) {
document.attachIME(this);
}
};
function onChange() {
const label = this.labelElement;
if (this.value) {
label.classList.remove('inputLabel-float');
} else {
const instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time';
if (instanceSupportsFloat) {
label.classList.add('inputLabel-float');
}
2018-10-23 01:05:09 +03:00
}
}
EmbyInputPrototype.attachedCallback = function () {
this.labelElement.htmlFor = this.id;
onChange.call(this);
};
EmbyInputPrototype.label = function (text) {
2022-01-30 00:27:26 +03:00
this.labelElement.innerText = text;
};
document.registerElement('emby-input', {
2018-10-23 01:05:09 +03:00
prototype: EmbyInputPrototype,
extends: 'input'
});
/* eslint-enable indent */