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:
parent
4678528d00
commit
de6ac33ec1
289 changed files with 78483 additions and 54701 deletions
|
@ -2,45 +2,37 @@
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0 0 0 2.4em;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
padding: 0;
|
||||
padding-left: 2.4em;
|
||||
align-items: center;
|
||||
height: 2.35em;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.checkboxContainer,
|
||||
.checkboxListContainer {
|
||||
margin-bottom: 1.8em
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkboxFieldDescription {
|
||||
padding-left: 2.4em
|
||||
padding-left: 2.4em;
|
||||
}
|
||||
|
||||
.checkboxContainer {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex
|
||||
margin-bottom: 1.8em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.checkboxListContainer {
|
||||
margin-bottom: 1.8em;
|
||||
}
|
||||
|
||||
.checkboxContainer-withDescription {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.emby-checkbox {
|
||||
position: absolute;
|
||||
/* This is for focusing purposes, so the focusManager doesn't skip over it */
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
|
@ -50,112 +42,109 @@
|
|||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: none
|
||||
border: none;
|
||||
}
|
||||
|
||||
.checkboxOutline {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 1.83em;
|
||||
height: 1.83em;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border: 2px solid currentcolor;
|
||||
-webkit-border-radius: .14em;
|
||||
border-radius: .14em;
|
||||
z-index: 2;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Commenting this out - set by theme */
|
||||
/*.emby-checkbox:checked + span + span + .checkboxOutline {
|
||||
border-color: #52B54B;
|
||||
}*/
|
||||
|
||||
.emby-checkbox-focushelper {
|
||||
position: absolute;
|
||||
top: -.915em;
|
||||
left: -.915em;
|
||||
top: -0.915em;
|
||||
left: -0.915em;
|
||||
width: 3.66em;
|
||||
height: 3.66em;
|
||||
display: inline-block;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 3px 0 0;
|
||||
-webkit-border-radius: 50%;
|
||||
margin: 3px 0 0 0;
|
||||
border-radius: 50%;
|
||||
background-color: transparent
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Commenting this out - set by theme */
|
||||
/*.emby-checkbox:focus + span + .emby-checkbox-focushelper {
|
||||
background-color: rgba(82, 181, 75, 0.26);
|
||||
}*/
|
||||
|
||||
.checkboxIcon {
|
||||
font-size: 1.6em;
|
||||
color: #fff
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkboxIcon-checked {
|
||||
display: none
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked+span+span+.checkboxOutline>.checkboxIcon-checked {
|
||||
display: -webkit-box !important;
|
||||
display: -webkit-flex !important;
|
||||
display: flex !important
|
||||
.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxIcon-checked {
|
||||
/* background-color set by theme */
|
||||
/*background-color: #52B54B;*/
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked+span+span+.checkboxOutline>.checkboxIcon-unchecked {
|
||||
display: none !important
|
||||
.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxIcon-unchecked {
|
||||
/* background-color set by theme */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked[disabled]+span+span+.checkboxOutline>.checkboxIcon {
|
||||
background-color: rgba(0, 0, 0, .26)
|
||||
.emby-checkbox:checked[disabled] + span + span + .checkboxOutline > .checkboxIcon {
|
||||
background-color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.checkboxLabel {
|
||||
position: relative;
|
||||
margin: 0
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkboxList>.emby-checkbox-label {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
.checkboxList > .emby-checkbox-label {
|
||||
display: flex;
|
||||
margin: .5em 0
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
.checkboxList-verticalwrap {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.checkboxList-verticalwrap>.emby-checkbox-label {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
margin: .3em 0;
|
||||
width: 12em
|
||||
}
|
||||
.checkboxList-verticalwrap > .emby-checkbox-label {
|
||||
display: inline-flex;
|
||||
margin: .3em 0 .3em 0;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.checkboxList-paperList {
|
||||
padding: 1em !important
|
||||
padding: 1em !important;
|
||||
}
|
||||
|
||||
.checkboxListLabel {
|
||||
margin-bottom: .25em
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
@-webkit-keyframes repaintChrome {
|
||||
|
||||
from,
|
||||
to {
|
||||
padding: 0
|
||||
from {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,55 +1,110 @@
|
|||
define(["browser", "dom", "css!./emby-checkbox", "registerElement"], function(browser, dom) {
|
||||
"use strict";
|
||||
define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) {
|
||||
'use strict';
|
||||
|
||||
var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
||||
function onKeyDown(e) {
|
||||
if (13 === e.keyCode) return e.preventDefault(), this.checked = !this.checked, this.dispatchEvent(new CustomEvent("change", {
|
||||
bubbles: !0
|
||||
})), !1
|
||||
|
||||
// Don't submit form on enter
|
||||
if (e.keyCode === 13) {
|
||||
e.preventDefault();
|
||||
|
||||
this.checked = !this.checked;
|
||||
|
||||
this.dispatchEvent(new CustomEvent('change', {
|
||||
bubbles: true
|
||||
}));
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
|
||||
|
||||
function forceRefresh(loading) {
|
||||
|
||||
var elem = this.parentNode;
|
||||
elem.style.webkitAnimationName = "repaintChrome", elem.style.webkitAnimationDelay = !0 === loading ? "500ms" : "", elem.style.webkitAnimationDuration = "10ms", elem.style.webkitAnimationIterationCount = "1", setTimeout(function() {
|
||||
elem.style.webkitAnimationName = ""
|
||||
}, !0 === loading ? 520 : 20)
|
||||
|
||||
elem.style.webkitAnimationName = 'repaintChrome';
|
||||
elem.style.webkitAnimationDelay = (loading === true ? '500ms' : '');
|
||||
elem.style.webkitAnimationDuration = '10ms';
|
||||
elem.style.webkitAnimationIterationCount = '1';
|
||||
|
||||
setTimeout(function () {
|
||||
elem.style.webkitAnimationName = '';
|
||||
}, (loading === true ? 520 : 20));
|
||||
}
|
||||
var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype),
|
||||
enableRefreshHack = !!(browser.tizen || browser.orsay || browser.operaTv || browser.web0s);
|
||||
EmbyCheckboxPrototype.attachedCallback = function() {
|
||||
if ("true" !== this.getAttribute("data-embycheckbox")) {
|
||||
this.setAttribute("data-embycheckbox", "true"), this.classList.add("emby-checkbox");
|
||||
var labelElement = this.parentNode;
|
||||
labelElement.classList.add("emby-checkbox-label");
|
||||
var labelTextElement = labelElement.querySelector("span"),
|
||||
outlineClass = "checkboxOutline",
|
||||
customClass = this.getAttribute("data-outlineclass");
|
||||
customClass && (outlineClass += " " + customClass);
|
||||
var checkedIcon = this.getAttribute("data-checkedicon") || "",
|
||||
uncheckedIcon = this.getAttribute("data-uncheckedicon") || "",
|
||||
checkHtml = '<i class="md-icon checkboxIcon checkboxIcon-checked">' + checkedIcon + "</i>",
|
||||
uncheckedHtml = '<i class="md-icon checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + "</i>";
|
||||
labelElement.insertAdjacentHTML("beforeend", '<span class="emby-checkbox-focushelper"></span><span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + "</span>"), labelTextElement.classList.add("checkboxLabel"), this.addEventListener("keydown", onKeyDown), enableRefreshHack && (forceRefresh.call(this, !0), dom.addEventListener(this, "click", forceRefresh, {
|
||||
passive: !0
|
||||
}), dom.addEventListener(this, "blur", forceRefresh, {
|
||||
passive: !0
|
||||
}), dom.addEventListener(this, "focus", forceRefresh, {
|
||||
passive: !0
|
||||
}), dom.addEventListener(this, "change", forceRefresh, {
|
||||
passive: !0
|
||||
}))
|
||||
|
||||
EmbyCheckboxPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.getAttribute('data-embycheckbox') === 'true') {
|
||||
return;
|
||||
}
|
||||
}, EmbyCheckboxPrototype.detachedCallback = function() {
|
||||
this.removeEventListener("keydown", onKeyDown), dom.removeEventListener(this, "click", forceRefresh, {
|
||||
passive: !0
|
||||
}), dom.removeEventListener(this, "blur", forceRefresh, {
|
||||
passive: !0
|
||||
}), dom.removeEventListener(this, "focus", forceRefresh, {
|
||||
passive: !0
|
||||
}), dom.removeEventListener(this, "change", forceRefresh, {
|
||||
passive: !0
|
||||
})
|
||||
}, document.registerElement("emby-checkbox", {
|
||||
|
||||
this.setAttribute('data-embycheckbox', 'true');
|
||||
|
||||
this.classList.add('emby-checkbox');
|
||||
|
||||
var labelElement = this.parentNode;
|
||||
labelElement.classList.add('emby-checkbox-label');
|
||||
|
||||
var labelTextElement = labelElement.querySelector('span');
|
||||
|
||||
var outlineClass = 'checkboxOutline';
|
||||
|
||||
var customClass = this.getAttribute('data-outlineclass');
|
||||
if (customClass) {
|
||||
outlineClass += ' ' + customClass;
|
||||
}
|
||||
|
||||
var checkedIcon = this.getAttribute('data-checkedicon') || '';
|
||||
var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
|
||||
var checkHtml = '<i class="md-icon checkboxIcon checkboxIcon-checked">' + checkedIcon + '</i>';
|
||||
var uncheckedHtml = '<i class="md-icon checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + '</i>';
|
||||
labelElement.insertAdjacentHTML('beforeend', '<span class="emby-checkbox-focushelper"></span><span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
|
||||
|
||||
labelTextElement.classList.add('checkboxLabel');
|
||||
|
||||
this.addEventListener('keydown', onKeyDown);
|
||||
|
||||
if (enableRefreshHack) {
|
||||
|
||||
forceRefresh.call(this, true);
|
||||
dom.addEventListener(this, 'click', forceRefresh, {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(this, 'blur', forceRefresh, {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(this, 'focus', forceRefresh, {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(this, 'change', forceRefresh, {
|
||||
passive: true
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
EmbyCheckboxPrototype.detachedCallback = function () {
|
||||
|
||||
this.removeEventListener('keydown', onKeyDown);
|
||||
|
||||
dom.removeEventListener(this, 'click', forceRefresh, {
|
||||
passive: true
|
||||
});
|
||||
dom.removeEventListener(this, 'blur', forceRefresh, {
|
||||
passive: true
|
||||
});
|
||||
dom.removeEventListener(this, 'focus', forceRefresh, {
|
||||
passive: true
|
||||
});
|
||||
dom.removeEventListener(this, 'change', forceRefresh, {
|
||||
passive: true
|
||||
});
|
||||
};
|
||||
|
||||
document.registerElement('emby-checkbox', {
|
||||
prototype: EmbyCheckboxPrototype,
|
||||
extends: "input"
|
||||
})
|
||||
});
|
||||
extends: 'input'
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue