mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Unminify using 1.5.323
Repo with tag: https://github.com/MediaBrowser/emby-webcomponents/tree/1.5.323
This commit is contained in:
Vasily
parent
4678528d00
commit
de6ac33ec1
289 changed files with 78483 additions and 54701 deletions
|
|
@ -2,91 +2,84 @@
|
|||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: 0 !important;
|
||||
/* Remove select styling */
|
||||
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
|
||||
font-size: 110%;
|
||||
/* General select styles: change as needed */
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
padding: .5em 1.9em .5em .5em;
|
||||
-webkit-box-sizing: border-box;
|
||||
/* Prevent padding from causing width overflow */
|
||||
box-sizing: border-box;
|
||||
outline: 0 !important;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
width: 100%
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.emby-select[disabled] {
|
||||
background: 0 0 !important;
|
||||
border-color: transparent !important;
|
||||
color: inherit !important;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none
|
||||
}
|
||||
.emby-select[disabled] {
|
||||
background: none !important;
|
||||
border-color: transparent !important;
|
||||
color: inherit !important;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.selectContainer-inline>.emby-select {
|
||||
.selectContainer-inline > .emby-select {
|
||||
padding: .3em 1.9em .3em .5em;
|
||||
font-size: inherit
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.selectContainer-inline>.emby-select[disabled] {
|
||||
padding-left: 0;
|
||||
padding-right: 0
|
||||
}
|
||||
.selectContainer-inline > .emby-select[disabled] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.emby-select::-moz-focus-inner {
|
||||
border: 0
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.emby-select-focusscale {
|
||||
-webkit-transition: -webkit-transform 180ms ease-out !important;
|
||||
-o-transition: transform 180ms ease-out !important;
|
||||
transition: transform 180ms ease-out !important;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.emby-select-focusscale:focus {
|
||||
-webkit-transform: scale(1.04);
|
||||
transform: scale(1.04);
|
||||
z-index: 1
|
||||
}
|
||||
.emby-select-focusscale:focus {
|
||||
transform: scale(1.04);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.emby-select+.fieldDescription {
|
||||
margin-top: .25em
|
||||
.emby-select + .fieldDescription {
|
||||
margin-top: .25em;
|
||||
}
|
||||
|
||||
.selectContainer {
|
||||
margin-bottom: 1.8em;
|
||||
position: relative
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selectContainer-inline {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
margin-bottom: 0;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selectLabel {
|
||||
display: block;
|
||||
margin-bottom: .25em
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
.selectContainer-inline>.selectLabel {
|
||||
.selectContainer-inline > .selectLabel {
|
||||
margin-bottom: 0;
|
||||
margin-right: .5em;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.emby-select-withcolor {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-border-radius: .2em;
|
||||
border-radius: .2em
|
||||
border-radius: .2em;
|
||||
}
|
||||
|
||||
.selectArrowContainer {
|
||||
|
|
@ -94,25 +87,24 @@
|
|||
right: .3em;
|
||||
top: .2em;
|
||||
color: inherit;
|
||||
pointer-events: none
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.selectContainer-inline>.selectArrowContainer {
|
||||
.selectContainer-inline > .selectArrowContainer {
|
||||
top: initial;
|
||||
bottom: .24em;
|
||||
font-size: 90%
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.emby-select[disabled]+.selectArrowContainer {
|
||||
display: none
|
||||
.emby-select[disabled] + .selectArrowContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selectArrow {
|
||||
margin-top: .35em;
|
||||
font-size: 1.7em
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
.emby-select-iconbutton {
|
||||
-webkit-align-self: flex-end;
|
||||
align-self: flex-end
|
||||
}
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,75 +1,168 @@
|
|||
define(["layoutManager", "browser", "actionsheet", "css!./emby-select", "registerElement"], function(layoutManager, browser, actionsheet) {
|
||||
"use strict";
|
||||
define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registerElement'], function (layoutManager, browser, actionsheet) {
|
||||
'use strict';
|
||||
|
||||
var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
|
||||
|
||||
function enableNativeMenu() {
|
||||
return !(!browser.edgeUwp && !browser.xboxOne) || !(browser.tizen || browser.orsay || browser.web0s) && (!!browser.tv || !layoutManager.tv)
|
||||
|
||||
if (browser.edgeUwp || browser.xboxOne) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Doesn't seem to work at all
|
||||
if (browser.tizen || browser.orsay || browser.web0s) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Take advantage of the native input methods
|
||||
if (browser.tv) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (layoutManager.tv) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function triggerChange(select) {
|
||||
var evt = document.createEvent("HTMLEvents");
|
||||
evt.initEvent("change", !1, !0), select.dispatchEvent(evt)
|
||||
evt.initEvent("change", false, true);
|
||||
select.dispatchEvent(evt);
|
||||
}
|
||||
|
||||
function setValue(select, value) {
|
||||
select.value = value
|
||||
|
||||
select.value = value;
|
||||
}
|
||||
|
||||
function showActionSheet(select) {
|
||||
var labelElem = getLabel(select),
|
||||
title = labelElem ? labelElem.textContent || labelElem.innerText : null;
|
||||
|
||||
var labelElem = getLabel(select);
|
||||
var title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
|
||||
|
||||
actionsheet.show({
|
||||
items: select.options,
|
||||
positionTo: select,
|
||||
title: title
|
||||
}).then(function(value) {
|
||||
setValue(select, value), triggerChange(select)
|
||||
})
|
||||
|
||||
}).then(function (value) {
|
||||
setValue(select, value);
|
||||
triggerChange(select);
|
||||
});
|
||||
}
|
||||
|
||||
function getLabel(select) {
|
||||
for (var elem = select.previousSibling; elem && "LABEL" !== elem.tagName;) elem = elem.previousSibling;
|
||||
return elem
|
||||
var elem = select.previousSibling;
|
||||
while (elem && elem.tagName !== 'LABEL') {
|
||||
elem = elem.previousSibling;
|
||||
}
|
||||
return elem;
|
||||
}
|
||||
|
||||
function onFocus(e) {
|
||||
var label = getLabel(this);
|
||||
label && label.classList.add("selectLabelFocused")
|
||||
if (label) {
|
||||
label.classList.add('selectLabelFocused');
|
||||
}
|
||||
}
|
||||
|
||||
function onBlur(e) {
|
||||
var label = getLabel(this);
|
||||
label && label.classList.remove("selectLabelFocused")
|
||||
if (label) {
|
||||
label.classList.remove('selectLabelFocused');
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
e.button || enableNativeMenu() || (e.preventDefault(), showActionSheet(this))
|
||||
|
||||
// e.button=0 for primary (left) mouse button click
|
||||
if (!e.button && !enableNativeMenu()) {
|
||||
e.preventDefault();
|
||||
showActionSheet(this);
|
||||
}
|
||||
}
|
||||
|
||||
function onKeyDown(e) {
|
||||
|
||||
switch (e.keyCode) {
|
||||
|
||||
case 13:
|
||||
return void(enableNativeMenu() || (e.preventDefault(), showActionSheet(this)));
|
||||
if (!enableNativeMenu()) {
|
||||
e.preventDefault();
|
||||
showActionSheet(this);
|
||||
}
|
||||
return;
|
||||
case 37:
|
||||
case 38:
|
||||
case 39:
|
||||
case 40:
|
||||
return void(layoutManager.tv && e.preventDefault())
|
||||
if (layoutManager.tv) {
|
||||
e.preventDefault();
|
||||
}
|
||||
return;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype),
|
||||
inputId = 0;
|
||||
EmbySelectPrototype.createdCallback = function() {
|
||||
this.id || (this.id = "embyselect" + inputId, inputId++), browser.firefox || (this.classList.add("emby-select-withcolor"), layoutManager.tv && this.classList.add("emby-select-tv-withcolor")), layoutManager.tv && this.classList.add("emby-select-focusscale"), this.addEventListener("mousedown", onMouseDown), this.addEventListener("keydown", onKeyDown), this.addEventListener("focus", onFocus), this.addEventListener("blur", onBlur)
|
||||
}, EmbySelectPrototype.attachedCallback = function() {
|
||||
if (!this.classList.contains("emby-select")) {
|
||||
this.classList.add("emby-select");
|
||||
var label = this.ownerDocument.createElement("label");
|
||||
label.innerHTML = this.getAttribute("label") || "", label.classList.add("selectLabel"), label.htmlFor = this.id, this.parentNode.insertBefore(label, this), this.classList.contains("emby-select-withcolor") && this.parentNode.insertAdjacentHTML("beforeend", '<div class="selectArrowContainer"><div style="visibility:hidden;">0</div><i class="selectArrow md-icon"></i></div>')
|
||||
|
||||
var inputId = 0;
|
||||
|
||||
EmbySelectPrototype.createdCallback = function () {
|
||||
|
||||
if (!this.id) {
|
||||
this.id = 'embyselect' + inputId;
|
||||
inputId++;
|
||||
}
|
||||
}, EmbySelectPrototype.setLabel = function(text) {
|
||||
this.parentNode.querySelector("label").innerHTML = text
|
||||
}, document.registerElement("emby-select", {
|
||||
|
||||
if (!browser.firefox) {
|
||||
this.classList.add('emby-select-withcolor');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
this.classList.add('emby-select-tv-withcolor');
|
||||
}
|
||||
}
|
||||
|
||||
if (layoutManager.tv) {
|
||||
this.classList.add('emby-select-focusscale');
|
||||
}
|
||||
|
||||
this.addEventListener('mousedown', onMouseDown);
|
||||
this.addEventListener('keydown', onKeyDown);
|
||||
|
||||
this.addEventListener('focus', onFocus);
|
||||
this.addEventListener('blur', onBlur);
|
||||
};
|
||||
|
||||
EmbySelectPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.classList.contains('emby-select')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.classList.add('emby-select');
|
||||
|
||||
var label = this.ownerDocument.createElement('label');
|
||||
label.innerHTML = this.getAttribute('label') || '';
|
||||
label.classList.add('selectLabel');
|
||||
label.htmlFor = this.id;
|
||||
this.parentNode.insertBefore(label, this);
|
||||
|
||||
if (this.classList.contains('emby-select-withcolor')) {
|
||||
this.parentNode.insertAdjacentHTML('beforeend', '<div class="selectArrowContainer"><div style="visibility:hidden;">0</div><i class="selectArrow md-icon"></i></div>');
|
||||
}
|
||||
};
|
||||
|
||||
EmbySelectPrototype.setLabel = function (text) {
|
||||
|
||||
var label = this.parentNode.querySelector('label');
|
||||
|
||||
label.innerHTML = text;
|
||||
};
|
||||
|
||||
document.registerElement('emby-select', {
|
||||
prototype: EmbySelectPrototype,
|
||||
extends: "select"
|
||||
})
|
||||
extends: 'select'
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue