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

93 lines
2.7 KiB
JavaScript
Raw Normal View History

2016-06-10 02:54:03 -04:00
define(['layoutManager', 'browser', 'css!./emby-input', 'registerElement'], function (layoutManager, browser) {
2016-05-28 14:03:38 -04:00
var EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
2016-06-03 15:32:10 -04:00
var inputId = 0;
2016-06-06 17:12:44 -04:00
var supportsFloatingLabel = false;
2016-06-03 15:32:10 -04:00
2016-06-04 20:17:35 -04:00
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
2016-06-13 15:02:48 -04:00
// descriptor returning null in webos
if (descriptor && descriptor.configurable) {
2016-06-05 00:49:29 -04:00
var baseSetMethod = descriptor.set;
descriptor.set = function (value) {
baseSetMethod.call(this, value);
2016-06-13 15:02:48 -04:00
2016-06-05 00:49:29 -04:00
this.dispatchEvent(new CustomEvent('valueset', {
bubbles: false,
cancelable: false
}));
}
Object.defineProperty(HTMLInputElement.prototype, 'value', descriptor);
2016-06-06 17:12:44 -04:00
supportsFloatingLabel = true;
2016-06-04 20:17:35 -04:00
}
}
2016-05-28 14:03:38 -04:00
EmbyInputPrototype.createdCallback = function () {
if (!this.id) {
2016-06-03 15:32:10 -04:00
this.id = 'embyinput' + inputId;
inputId++;
2016-05-28 14:03:38 -04:00
}
};
EmbyInputPrototype.attachedCallback = function () {
2016-05-29 14:42:03 -04:00
if (this.getAttribute('data-embyinput') == 'true') {
return;
}
2016-05-28 14:03:38 -04:00
2016-05-29 14:42:03 -04:00
this.setAttribute('data-embyinput', 'true');
var parentNode = this.parentNode;
var label = this.ownerDocument.createElement('label');
label.innerHTML = this.getAttribute('label') || '';
label.classList.add('inputLabel');
2016-05-28 14:03:38 -04:00
2016-06-11 11:55:39 -04:00
if (!supportsFloatingLabel || this.type == 'date') {
2016-06-06 17:12:44 -04:00
label.classList.add('nofloat');
}
2016-05-29 14:42:03 -04:00
label.htmlFor = this.id;
parentNode.insertBefore(label, this);
var div = document.createElement('div');
div.classList.add('emby-input-selectionbar');
parentNode.insertBefore(div, this.nextSibling);
function onChange() {
if (this.value) {
label.classList.remove('blank');
} else {
label.classList.add('blank');
}
2016-05-28 14:03:38 -04:00
}
2016-05-29 14:42:03 -04:00
this.addEventListener('focus', function () {
onChange.call(this);
2016-05-30 12:09:47 -04:00
label.classList.add('focused');
2016-05-29 14:42:03 -04:00
});
this.addEventListener('blur', function () {
2016-06-04 20:17:35 -04:00
onChange.call(this);
2016-05-30 12:09:47 -04:00
label.classList.remove('focused');
2016-05-29 14:42:03 -04:00
});
this.addEventListener('change', onChange);
2016-06-04 00:57:46 -04:00
this.addEventListener('input', onChange);
2016-06-04 20:17:35 -04:00
this.addEventListener('valueset', onChange);
2016-05-29 14:42:03 -04:00
onChange.call(this);
2016-06-11 11:55:39 -04:00
this.label = function (text) {
label.innerHTML = text;
};
2016-05-29 15:41:39 -04:00
};
2016-05-28 14:03:38 -04:00
document.registerElement('emby-input', {
prototype: EmbyInputPrototype,
extends: 'input'
});
});