mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
move some elements to a new directory
This commit is contained in:
dkanada
parent
758477f1ae
commit
f036ccc674
24 changed files with 15 additions and 30 deletions
|
|
@ -1,186 +0,0 @@
|
|||
.emby-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0.3em;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
outline-width: 0;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
padding: 0.9em 1em;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 0.2em;
|
||||
/* These are getting an outline in opera tv browsers, which run chrome 30 */
|
||||
outline: none !important;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
/* Disable webkit tap highlighting */
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
text-decoration: none;
|
||||
/* Not crazy about this but it normalizes heights between anchors and buttons */
|
||||
line-height: 1.35;
|
||||
transform-origin: center;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.emby-button.show-focus:focus {
|
||||
transform: scale(1.4);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.emby-button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.button-flat {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.button-flat:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.button-link {
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: initial;
|
||||
}
|
||||
|
||||
.button-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.emby-button > i {
|
||||
/* For non-fab buttons that have icons */
|
||||
font-size: 1.36em;
|
||||
}
|
||||
|
||||
.button-link > i {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.fab {
|
||||
display: inline-flex;
|
||||
border-radius: 50%;
|
||||
padding: 0.6em;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emby-button.block {
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: .25em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.paper-icon-button-light {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin: 0 .29em;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
min-width: initial;
|
||||
min-height: initial;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: .556em;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
/* These are getting an outline in opera tv browsers, which run chrome 30 */
|
||||
outline: none !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
/* Disable webkit tap highlighting */
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
justify-content: center;
|
||||
transform-origin: center;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
transform: scale(1.6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.paper-icon-button-light::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.paper-icon-button-light > i {
|
||||
font-size: 1.66956521739130434em;
|
||||
/* Make sure its on top of the ripple */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.paper-icon-button-light > div {
|
||||
max-height: 100%;
|
||||
transform: scale(1.8);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.emby-button-foreground {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btnFilterWithBubble {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filterButtonBubble {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
background: #444;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
z-index: 100000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 82%;
|
||||
border-radius: 100em;
|
||||
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
background: #03A9F4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css!./emby-button', 'registerElement'], function (browser, dom, layoutManager, shell, appRouter, appHost) {
|
||||
'use strict';
|
||||
|
||||
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
|
||||
var EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
|
||||
|
||||
function onAnchorClick(e) {
|
||||
var href = this.getAttribute('href') || '';
|
||||
if (href !== '#') {
|
||||
if (this.getAttribute('target')) {
|
||||
if (!appHost.supports('targetblank')) {
|
||||
e.preventDefault();
|
||||
shell.openUrl(href);
|
||||
}
|
||||
} else {
|
||||
appRouter.handleAnchorClick(e);
|
||||
}
|
||||
} else {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
EmbyButtonPrototype.createdCallback = function () {
|
||||
if (this.classList.contains('emby-button')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.classList.add('emby-button');
|
||||
// TODO replace all instances of element-showfocus with this method
|
||||
if (layoutManager.tv) {
|
||||
// handles all special css for tv layout
|
||||
// this method utilizes class chaining
|
||||
this.classList.add('show-focus');
|
||||
}
|
||||
};
|
||||
|
||||
EmbyButtonPrototype.attachedCallback = function () {
|
||||
if (this.tagName === 'A') {
|
||||
dom.removeEventListener(this, 'click', onAnchorClick, {});
|
||||
dom.addEventListener(this, 'click', onAnchorClick, {});
|
||||
|
||||
if (this.getAttribute('data-autohide') === 'true') {
|
||||
if (appHost.supports('externallinks')) {
|
||||
this.classList.remove('hide');
|
||||
} else {
|
||||
this.classList.add('hide');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
EmbyButtonPrototype.detachedCallback = function () {
|
||||
dom.removeEventListener(this, 'click', onAnchorClick, {});
|
||||
};
|
||||
|
||||
EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
|
||||
EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback;
|
||||
|
||||
document.registerElement('emby-button', {
|
||||
prototype: EmbyButtonPrototype,
|
||||
extends: 'button'
|
||||
});
|
||||
|
||||
document.registerElement('emby-linkbutton', {
|
||||
prototype: EmbyLinkButtonPrototype,
|
||||
extends: 'a'
|
||||
});
|
||||
|
||||
return EmbyButtonPrototype;
|
||||
});
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layoutManager) {
|
||||
'use strict';
|
||||
|
||||
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
|
||||
|
||||
EmbyButtonPrototype.createdCallback = function () {
|
||||
this.classList.add('paper-icon-button-light');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
this.classList.add('show-focus');
|
||||
}
|
||||
};
|
||||
|
||||
document.registerElement('paper-icon-button-light', {
|
||||
prototype: EmbyButtonPrototype,
|
||||
extends: 'button'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
.emby-checkbox-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: 2.4em;
|
||||
align-items: center;
|
||||
height: 2.35em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkboxFieldDescription {
|
||||
padding-left: 2.4em;
|
||||
}
|
||||
|
||||
.checkboxContainer {
|
||||
margin-bottom: 1.8em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.checkboxListContainer {
|
||||
margin-bottom: 1.8em;
|
||||
}
|
||||
|
||||
.checkboxContainer-withDescription {
|
||||
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;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
-ms-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.checkboxOutline {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 1.83em;
|
||||
height: 1.83em;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border: 2px solid currentcolor;
|
||||
border-radius: .14em;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkboxIcon {
|
||||
font-size: 1.6em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkboxIcon-checked {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
|
||||
/* background color set by theme */
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-unchecked {
|
||||
/* background color set by theme */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked[disabled] + span + .checkboxOutline > .checkboxIcon {
|
||||
background-color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.checkboxLabel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkboxList > .emby-checkbox-label {
|
||||
display: flex;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.checkboxList-verticalwrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.checkboxList-verticalwrap > .emby-checkbox-label {
|
||||
display: inline-flex;
|
||||
margin: .3em 0 .3em 0;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.checkboxList-paperList {
|
||||
padding: 1em !important;
|
||||
}
|
||||
|
||||
.checkboxListLabel {
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
@-webkit-keyframes repaintChrome {
|
||||
from {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) {
|
||||
'use strict';
|
||||
|
||||
var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
||||
function onKeyDown(e) {
|
||||
// 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 = (loading === true ? '500ms' : '');
|
||||
elem.style.webkitAnimationDuration = '10ms';
|
||||
elem.style.webkitAnimationIterationCount = '1';
|
||||
|
||||
setTimeout(function () {
|
||||
elem.style.webkitAnimationName = '';
|
||||
}, (loading === true ? 520 : 20));
|
||||
}
|
||||
|
||||
EmbyCheckboxPrototype.attachedCallback = function () {
|
||||
if (this.getAttribute('data-embycheckbox') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
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') || 'check';
|
||||
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="' + 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'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
.emby-collapse {
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
.collapseContent {
|
||||
border-width: 0;
|
||||
padding: 1.25em 1.25em;
|
||||
height: 0;
|
||||
transition-property: height;
|
||||
transition-duration: 300ms;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.emby-collapsible-button {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
border-width: 0 0 .1em 0;
|
||||
border-style: solid;
|
||||
padding-left: .1em;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emby-collapse-expandIcon {
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 180ms ease-out;
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.emby-collapse-expandIconExpanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.emby-collapsible-title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], function (browser) {
|
||||
'use strict';
|
||||
|
||||
var EmbyButtonPrototype = Object.create(HTMLDivElement.prototype);
|
||||
|
||||
function slideDownToShow(button, elem) {
|
||||
|
||||
elem.classList.remove('hide');
|
||||
elem.classList.add('expanded');
|
||||
elem.style.height = 'auto';
|
||||
var height = elem.offsetHeight + 'px';
|
||||
elem.style.height = '0';
|
||||
|
||||
// trigger reflow
|
||||
var newHeight = elem.offsetHeight;
|
||||
elem.style.height = height;
|
||||
|
||||
setTimeout(function () {
|
||||
if (elem.classList.contains('expanded')) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
elem.style.height = 'auto';
|
||||
}, 300);
|
||||
|
||||
var icon = button.querySelector('i');
|
||||
//icon.innerHTML = 'expand_less';
|
||||
icon.classList.add('emby-collapse-expandIconExpanded');
|
||||
}
|
||||
|
||||
function slideUpToHide(button, elem) {
|
||||
|
||||
elem.style.height = elem.offsetHeight + 'px';
|
||||
// trigger reflow
|
||||
var newHeight = elem.offsetHeight;
|
||||
|
||||
elem.classList.remove('expanded');
|
||||
elem.style.height = '0';
|
||||
|
||||
setTimeout(function () {
|
||||
if (elem.classList.contains('expanded')) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
}, 300);
|
||||
|
||||
var icon = button.querySelector('i');
|
||||
//icon.innerHTML = 'expand_more';
|
||||
icon.classList.remove('emby-collapse-expandIconExpanded');
|
||||
}
|
||||
|
||||
function onButtonClick(e) {
|
||||
|
||||
var button = this;
|
||||
var collapseContent = button.parentNode.querySelector('.collapseContent');
|
||||
|
||||
if (collapseContent.expanded) {
|
||||
collapseContent.expanded = false;
|
||||
slideUpToHide(button, collapseContent);
|
||||
} else {
|
||||
collapseContent.expanded = true;
|
||||
slideDownToShow(button, collapseContent);
|
||||
}
|
||||
}
|
||||
|
||||
EmbyButtonPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.classList.contains('emby-collapse')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.classList.add('emby-collapse');
|
||||
|
||||
var collapseContent = this.querySelector('.collapseContent');
|
||||
if (collapseContent) {
|
||||
collapseContent.classList.add('hide');
|
||||
}
|
||||
|
||||
var title = this.getAttribute('title');
|
||||
|
||||
var html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><i class="md-icon emby-collapse-expandIcon">expand_more</i></button>';
|
||||
|
||||
this.insertAdjacentHTML('afterbegin', html);
|
||||
|
||||
var button = this.querySelector('.emby-collapsible-button');
|
||||
|
||||
button.addEventListener('click', onButtonClick);
|
||||
|
||||
if (this.getAttribute('data-expanded') === 'true') {
|
||||
onButtonClick.call(button);
|
||||
}
|
||||
};
|
||||
|
||||
document.registerElement('emby-collapse', {
|
||||
prototype: EmbyButtonPrototype,
|
||||
extends: 'div'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
.emby-input {
|
||||
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: .4em .25em;
|
||||
/* Prevent padding from causing width overflow */
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.emby-input::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.inputContainer {
|
||||
margin-bottom: 1.8em;
|
||||
}
|
||||
|
||||
.inputLabel {
|
||||
display: inline-block;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
.emby-input + .fieldDescription {
|
||||
margin-top: .25em;
|
||||
}
|
||||
|
||||
.emby-input-iconbutton {
|
||||
-webkit-align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'], function (layoutManager, browser, dom) {
|
||||
'use strict';
|
||||
|
||||
var EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
||||
var inputId = 0;
|
||||
var supportsFloatingLabel = false;
|
||||
|
||||
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
|
||||
|
||||
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
||||
|
||||
// descriptor returning null in webos
|
||||
if (descriptor && descriptor.configurable) {
|
||||
var 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;
|
||||
}
|
||||
}
|
||||
|
||||
EmbyInputPrototype.createdCallback = function () {
|
||||
if (!this.id) {
|
||||
this.id = 'embyinput' + inputId;
|
||||
inputId++;
|
||||
}
|
||||
|
||||
if (this.classList.contains('emby-input')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.classList.add('emby-input');
|
||||
|
||||
var parentNode = this.parentNode;
|
||||
var document = this.ownerDocument;
|
||||
var label = document.createElement('label');
|
||||
label.innerHTML = 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
|
||||
});
|
||||
|
||||
if (browser.orsay) {
|
||||
if (this === document.activeElement) {
|
||||
//Make sure the IME pops up if this is the first/default element on the page
|
||||
if (document.attachIME) {
|
||||
document.attachIME(this);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function onChange() {
|
||||
|
||||
var label = this.labelElement;
|
||||
if (this.value) {
|
||||
label.classList.remove('inputLabel-float');
|
||||
} else {
|
||||
|
||||
var instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time';
|
||||
|
||||
if (instanceSupportsFloat) {
|
||||
label.classList.add('inputLabel-float');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
EmbyInputPrototype.attachedCallback = function () {
|
||||
|
||||
this.labelElement.htmlFor = this.id;
|
||||
|
||||
onChange.call(this);
|
||||
};
|
||||
|
||||
EmbyInputPrototype.label = function (text) {
|
||||
this.labelElement.innerHTML = text;
|
||||
};
|
||||
|
||||
document.registerElement('emby-input', {
|
||||
prototype: EmbyInputPrototype,
|
||||
extends: 'input'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
.progressring {
|
||||
position: relative;
|
||||
width: 2.6em;
|
||||
height: 2.6em;
|
||||
float: left;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.progressring-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: .25em solid rgba(0, 0, 0, 1);
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, .9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.progressring-text {
|
||||
text-align: center;
|
||||
color: #ddd;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.spiner-holder-one {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
width: 51%;
|
||||
height: 51%;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.spiner-holder-two {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.progressring-spiner {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border-radius: 50%;
|
||||
border-width: .25em;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.animate-0-25-a {
|
||||
transform: rotate(90deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-0-25-b {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-25-50-a {
|
||||
transform: rotate(180deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-25-50-b {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-50-75-a {
|
||||
transform: rotate(270deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-50-75-b {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-75-100-a {
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
||||
.animate-75-100-b {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 100% 100%;
|
||||
transition: transform 180ms ease-out;
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
define(['require', 'css!./emby-progressring', 'registerElement'], function (require) {
|
||||
'use strict';
|
||||
|
||||
var EmbyProgressRing = Object.create(HTMLDivElement.prototype);
|
||||
|
||||
EmbyProgressRing.createdCallback = function () {
|
||||
|
||||
this.classList.add('progressring');
|
||||
var instance = this;
|
||||
|
||||
require(['text!./emby-progressring.template.html'], function (template) {
|
||||
instance.innerHTML = template;
|
||||
|
||||
//if (window.MutationObserver) {
|
||||
// // create an observer instance
|
||||
// var observer = new MutationObserver(function (mutations) {
|
||||
// mutations.forEach(function (mutation) {
|
||||
|
||||
// instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
|
||||
// });
|
||||
// });
|
||||
|
||||
// // configuration of the observer:
|
||||
// var config = { attributes: true, childList: false, characterData: false };
|
||||
|
||||
// // pass in the target node, as well as the observer options
|
||||
// observer.observe(instance, config);
|
||||
|
||||
// instance.observer = observer;
|
||||
//}
|
||||
|
||||
instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
|
||||
});
|
||||
};
|
||||
|
||||
EmbyProgressRing.setProgress = function (progress) {
|
||||
|
||||
progress = Math.floor(progress);
|
||||
|
||||
var angle;
|
||||
|
||||
if (progress < 25) {
|
||||
angle = -90 + (progress / 100) * 360;
|
||||
|
||||
this.querySelector('.animate-0-25-b').style.transform = 'rotate(' + angle + 'deg)';
|
||||
|
||||
this.querySelector('.animate-25-50-b').style.transform = 'rotate(-90deg)';
|
||||
this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)';
|
||||
this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
|
||||
} else if (progress >= 25 && progress < 50) {
|
||||
|
||||
angle = -90 + ((progress - 25) / 100) * 360;
|
||||
|
||||
this.querySelector('.animate-0-25-b').style.transform = 'none';
|
||||
this.querySelector('.animate-25-50-b').style.transform = 'rotate(' + angle + 'deg)';
|
||||
|
||||
this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)';
|
||||
this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
|
||||
} else if (progress >= 50 && progress < 75) {
|
||||
angle = -90 + ((progress - 50) / 100) * 360;
|
||||
|
||||
this.querySelector('.animate-0-25-b').style.transform = 'none';
|
||||
this.querySelector('.animate-25-50-b').style.transform = 'none';
|
||||
this.querySelector('.animate-50-75-b').style.transform = 'rotate(' + angle + 'deg)';
|
||||
|
||||
this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)';
|
||||
} else if (progress >= 75 && progress <= 100) {
|
||||
angle = -90 + ((progress - 75) / 100) * 360;
|
||||
|
||||
this.querySelector('.animate-0-25-b').style.transform = 'none';
|
||||
this.querySelector('.animate-25-50-b').style.transform = 'none';
|
||||
this.querySelector('.animate-50-75-b').style.transform = 'none';
|
||||
this.querySelector('.animate-75-100-b').style.transform = 'rotate(' + angle + 'deg)';
|
||||
}
|
||||
|
||||
this.querySelector('.progressring-text').innerHTML = progress + '%';
|
||||
};
|
||||
|
||||
EmbyProgressRing.attachedCallback = function () {
|
||||
|
||||
};
|
||||
|
||||
EmbyProgressRing.detachedCallback = function () {
|
||||
|
||||
var observer = this.observer;
|
||||
|
||||
if (observer) {
|
||||
// later, you can stop observing
|
||||
observer.disconnect();
|
||||
|
||||
this.observer = null;
|
||||
}
|
||||
};
|
||||
|
||||
document.registerElement('emby-progressring', {
|
||||
prototype: EmbyProgressRing,
|
||||
extends: 'div'
|
||||
});
|
||||
|
||||
return EmbyProgressRing;
|
||||
});
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<div class="progressring-bg">
|
||||
<div class="progressring-text"></div>
|
||||
</div>
|
||||
<div class="spiner-holder-one animate-0-25-a">
|
||||
<div class="spiner-holder-two animate-0-25-b">
|
||||
<div class="progressring-spiner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spiner-holder-one animate-25-50-a">
|
||||
<div class="spiner-holder-two animate-25-50-b">
|
||||
<div class="progressring-spiner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spiner-holder-one animate-50-75-a">
|
||||
<div class="spiner-holder-two animate-50-75-b">
|
||||
<div class="progressring-spiner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spiner-holder-one animate-75-100-a">
|
||||
<div class="spiner-holder-two animate-75-100-b">
|
||||
<div class="progressring-spiner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
.mdl-radio {
|
||||
position: relative;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.radio-label-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: .5em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.mdl-radio {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.mdl-radio__button {
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
/* 1px is for focusing purposes, so the focusManager doesn't skip over it */
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
-ms-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mdl-radio__outer-circle {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: 2px solid currentcolor;
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle {
|
||||
border: 2px solid #00a4dc;
|
||||
}
|
||||
|
||||
.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle {
|
||||
border: 2px solid rgba(0,0,0, 0.26);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mdl-radio__inner-circle {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
top: 8px;
|
||||
left: 4px;
|
||||
box-sizing: border-box;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.28s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: -webkit-transform;
|
||||
transition-property: transform;
|
||||
transition-property: transform, -webkit-transform;
|
||||
-webkit-transform: scale3d(0, 0, 0);
|
||||
transform: scale3d(0, 0, 0);
|
||||
border-radius: 50%;
|
||||
background: #00a4dc;
|
||||
}
|
||||
|
||||
.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
||||
background: rgba(0,0,0, 0.26);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
||||
box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0.76);
|
||||
}
|
||||
|
||||
.mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
||||
box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26)
|
||||
}
|
||||
|
||||
.mdl-radio__label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mdl-radio__button:disabled + .mdl-radio__label {
|
||||
color: rgba(0,0,0, 0.26);
|
||||
cursor: auto;
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
define(['css!./emby-radio', 'registerElement'], function () {
|
||||
'use strict';
|
||||
|
||||
var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
||||
function onKeyDown(e) {
|
||||
|
||||
// Don't submit form on enter
|
||||
if (e.keyCode === 13) {
|
||||
e.preventDefault();
|
||||
|
||||
this.checked = true;
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
EmbyRadioPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.getAttribute('data-radio') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setAttribute('data-radio', 'true');
|
||||
|
||||
this.classList.add('mdl-radio__button');
|
||||
|
||||
var labelElement = this.parentNode;
|
||||
//labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect');
|
||||
labelElement.classList.add('mdl-radio');
|
||||
labelElement.classList.add('mdl-js-radio');
|
||||
labelElement.classList.add('mdl-js-ripple-effect');
|
||||
|
||||
var labelTextElement = labelElement.querySelector('span');
|
||||
|
||||
labelTextElement.classList.add('radioButtonLabel');
|
||||
labelTextElement.classList.add('mdl-radio__label');
|
||||
|
||||
labelElement.insertAdjacentHTML('beforeend', '<span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span>');
|
||||
|
||||
this.addEventListener('keydown', onKeyDown);
|
||||
};
|
||||
|
||||
document.registerElement('emby-radio', {
|
||||
prototype: EmbyRadioPrototype,
|
||||
extends: 'input'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
.emby-select {
|
||||
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;
|
||||
/* Prevent padding from causing width overflow */
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: .3em 1.9em .3em .5em;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.selectContainer-inline > .emby-select[disabled] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.emby-select::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.emby-select-focusscale {
|
||||
transition: transform 180ms ease-out !important;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.emby-select-focusscale:focus {
|
||||
transform: scale(1.04);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.emby-select + .fieldDescription {
|
||||
margin-top: .25em;
|
||||
}
|
||||
|
||||
.selectContainer {
|
||||
margin-bottom: 1.8em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selectContainer-inline {
|
||||
display: inline-flex;
|
||||
margin-bottom: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selectLabel {
|
||||
display: block;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
.selectContainer-inline > .selectLabel {
|
||||
margin-bottom: 0;
|
||||
margin-right: .5em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.emby-select-withcolor {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: .2em;
|
||||
}
|
||||
|
||||
.selectArrowContainer {
|
||||
position: absolute;
|
||||
right: .3em;
|
||||
top: .2em;
|
||||
color: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.selectContainer-inline > .selectArrowContainer {
|
||||
top: initial;
|
||||
bottom: .24em;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.emby-select[disabled] + .selectArrowContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selectArrow {
|
||||
margin-top: .35em;
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
.emby-select-iconbutton {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registerElement'], function (layoutManager, browser, actionsheet) {
|
||||
'use strict';
|
||||
|
||||
var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
|
||||
|
||||
function enableNativeMenu() {
|
||||
|
||||
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", false, true);
|
||||
select.dispatchEvent(evt);
|
||||
}
|
||||
|
||||
function setValue(select, value) {
|
||||
|
||||
select.value = value;
|
||||
}
|
||||
|
||||
function showActionSheet(select) {
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
function getLabel(select) {
|
||||
var elem = select.previousSibling;
|
||||
while (elem && elem.tagName !== 'LABEL') {
|
||||
elem = elem.previousSibling;
|
||||
}
|
||||
return elem;
|
||||
}
|
||||
|
||||
function onFocus(e) {
|
||||
var label = getLabel(this);
|
||||
if (label) {
|
||||
label.classList.add('selectLabelFocused');
|
||||
}
|
||||
}
|
||||
|
||||
function onBlur(e) {
|
||||
var label = getLabel(this);
|
||||
if (label) {
|
||||
label.classList.remove('selectLabelFocused');
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
|
||||
// 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:
|
||||
if (!enableNativeMenu()) {
|
||||
e.preventDefault();
|
||||
showActionSheet(this);
|
||||
}
|
||||
return;
|
||||
case 37:
|
||||
case 38:
|
||||
case 39:
|
||||
case 40:
|
||||
if (layoutManager.tv) {
|
||||
e.preventDefault();
|
||||
}
|
||||
return;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var inputId = 0;
|
||||
|
||||
EmbySelectPrototype.createdCallback = function () {
|
||||
|
||||
if (!this.id) {
|
||||
this.id = 'embyselect' + inputId;
|
||||
inputId++;
|
||||
}
|
||||
|
||||
this.classList.add('emby-select-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">keyboard_arrow_down</i></div>');
|
||||
}
|
||||
};
|
||||
|
||||
EmbySelectPrototype.setLabel = function (text) {
|
||||
|
||||
var label = this.parentNode.querySelector('label');
|
||||
|
||||
label.innerHTML = text;
|
||||
};
|
||||
|
||||
document.registerElement('emby-select', {
|
||||
prototype: EmbySelectPrototype,
|
||||
extends: 'select'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
_:-ms-input-placeholder {
|
||||
-ms-appearance: none;
|
||||
height: 2.223em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mdl-slider {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
height: 150%;/*150% is needed, else ie and edge won't display the thumb properly*/
|
||||
background: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: 0;
|
||||
color: #00a4dc;
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
/* Disable webkit tap highlighting */
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-track {
|
||||
background: #444;
|
||||
border: none;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-progress {
|
||||
background: #00a4dc;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-track {
|
||||
background: none;
|
||||
color: transparent;
|
||||
height: .2em;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-fill-lower {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-fill-upper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #00a4dc;
|
||||
border: none;
|
||||
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.mdl-slider-hoverthumb::-webkit-slider-thumb {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.mdl-slider:hover::-webkit-slider-thumb {
|
||||
transform: scale(1.6);
|
||||
}
|
||||
|
||||
.mdl-slider.show-focus:focus::-webkit-slider-thumb {
|
||||
transform: scale(1.6);
|
||||
}
|
||||
|
||||
.slider-no-webkit-thumb::-webkit-slider-thumb {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background-image: none;
|
||||
background: #00a4dc;
|
||||
border: none;
|
||||
transform: Scale(1.4, 1.4);
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #00a4dc;
|
||||
border: none;
|
||||
transform: scale(.9, .9);
|
||||
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.mdl-slider-hoverthumb::-ms-thumb {
|
||||
margin-left: -.4em;
|
||||
transform: scale(.5, .5);
|
||||
}
|
||||
|
||||
.mdl-slider:hover::-ms-thumb {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.mdl-slider[disabled]::-webkit-slider-thumb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-slider[disabled]::-moz-range-thumb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-slider[disabled]::-ms-thumb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-slider-ie-container {
|
||||
height: 1.25em;
|
||||
overflow: visible;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mdl-slider-container {
|
||||
height: 1.25em;
|
||||
position: relative;
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.mdl-slider-background-flex-container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: -.05em;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mdl-slider-background-flex {
|
||||
background: #333;
|
||||
height: .2em;
|
||||
margin-top: -.08em;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mdl-slider-background-flex-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mdl-slider-background-lower {
|
||||
/*transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #00a4dc;
|
||||
}
|
||||
|
||||
.mdl-slider-background-lower-clear {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mdl-slider-background-lower-withtransform {
|
||||
width: 100%;
|
||||
/*transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
|
||||
transform-origin: left center;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.mdl-slider-background-upper {
|
||||
/*transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
|
||||
background: #666;
|
||||
background: rgba(255, 255, 255, .4);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sliderBubble {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate3d(-48%, -120%, 0);
|
||||
background: #282828;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sliderBubbleText {
|
||||
margin: 0;
|
||||
padding: .5em .75em;
|
||||
}
|
||||
|
|
@ -1,379 +0,0 @@
|
|||
define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager) {
|
||||
'use strict';
|
||||
|
||||
var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
||||
var supportsNativeProgressStyle = browser.firefox;
|
||||
var supportsValueSetOverride = false;
|
||||
|
||||
var enableWidthWithTransform;
|
||||
|
||||
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
|
||||
|
||||
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
||||
// descriptor returning null in webos
|
||||
if (descriptor && descriptor.configurable) {
|
||||
supportsValueSetOverride = true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateValues() {
|
||||
|
||||
// Do not update values when dragging with keyboard to keep current progress for reference
|
||||
if (!!this.keyboardDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
var range = this;
|
||||
var value = range.value;
|
||||
|
||||
// put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond
|
||||
requestAnimationFrame(function () {
|
||||
|
||||
var backgroundLower = range.backgroundLower;
|
||||
|
||||
if (backgroundLower) {
|
||||
var fraction = (value - range.min) / (range.max - range.min);
|
||||
|
||||
if (enableWidthWithTransform) {
|
||||
backgroundLower.style.transform = 'scaleX(' + (fraction) + ')';
|
||||
} else {
|
||||
fraction *= 100;
|
||||
backgroundLower.style.width = fraction + '%';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateBubble(range, value, bubble, bubbleText) {
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
|
||||
bubble.style.left = value + '%';
|
||||
|
||||
if (range.getBubbleHtml) {
|
||||
value = range.getBubbleHtml(value);
|
||||
} else {
|
||||
if (range.getBubbleText) {
|
||||
value = range.getBubbleText(value);
|
||||
} else {
|
||||
value = Math.round(value);
|
||||
}
|
||||
value = '<h1 class="sliderBubbleText">' + value + '</h1>';
|
||||
}
|
||||
|
||||
bubble.innerHTML = value;
|
||||
});
|
||||
}
|
||||
|
||||
EmbySliderPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.getAttribute('data-embyslider') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (enableWidthWithTransform == null) {
|
||||
//enableWidthWithTransform = browser.supportsCssAnimation();
|
||||
}
|
||||
|
||||
this.setAttribute('data-embyslider', 'true');
|
||||
|
||||
this.classList.add('mdl-slider');
|
||||
this.classList.add('mdl-js-slider');
|
||||
|
||||
if (browser.noFlex) {
|
||||
this.classList.add('slider-no-webkit-thumb');
|
||||
}
|
||||
if (!layoutManager.mobile) {
|
||||
this.classList.add('mdl-slider-hoverthumb');
|
||||
}
|
||||
if (layoutManager.tv) {
|
||||
this.classList.add('show-focus');
|
||||
}
|
||||
|
||||
var containerElement = this.parentNode;
|
||||
containerElement.classList.add('mdl-slider-container');
|
||||
|
||||
var htmlToInsert = '';
|
||||
|
||||
if (!supportsNativeProgressStyle) {
|
||||
htmlToInsert += '<div class="mdl-slider-background-flex-container">';
|
||||
htmlToInsert += '<div class="mdl-slider-background-flex">';
|
||||
htmlToInsert += '<div class="mdl-slider-background-flex-inner">';
|
||||
|
||||
// the more of these, the more ranges we can display
|
||||
htmlToInsert += '<div class="mdl-slider-background-upper"></div>';
|
||||
|
||||
if (enableWidthWithTransform) {
|
||||
htmlToInsert += '<div class="mdl-slider-background-lower mdl-slider-background-lower-withtransform"></div>';
|
||||
} else {
|
||||
htmlToInsert += '<div class="mdl-slider-background-lower"></div>';
|
||||
}
|
||||
|
||||
htmlToInsert += '</div>';
|
||||
htmlToInsert += '</div>';
|
||||
htmlToInsert += '</div>';
|
||||
}
|
||||
|
||||
htmlToInsert += '<div class="sliderBubble hide"></div>';
|
||||
|
||||
containerElement.insertAdjacentHTML('beforeend', htmlToInsert);
|
||||
|
||||
this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
|
||||
this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
|
||||
var sliderBubble = containerElement.querySelector('.sliderBubble');
|
||||
|
||||
var hasHideClass = sliderBubble.classList.contains('hide');
|
||||
|
||||
dom.addEventListener(this, 'input', function (e) {
|
||||
this.dragging = true;
|
||||
|
||||
updateBubble(this, this.value, sliderBubble);
|
||||
|
||||
if (hasHideClass) {
|
||||
sliderBubble.classList.remove('hide');
|
||||
hasHideClass = false;
|
||||
}
|
||||
}, {
|
||||
passive: true
|
||||
});
|
||||
|
||||
dom.addEventListener(this, 'change', function () {
|
||||
this.dragging = false;
|
||||
updateValues.call(this);
|
||||
|
||||
sliderBubble.classList.add('hide');
|
||||
hasHideClass = true;
|
||||
|
||||
}, {
|
||||
passive: true
|
||||
});
|
||||
|
||||
dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
|
||||
|
||||
if (!this.dragging) {
|
||||
var rect = this.getBoundingClientRect();
|
||||
var clientX = e.clientX;
|
||||
var bubbleValue = (clientX - rect.left) / rect.width;
|
||||
bubbleValue *= 100;
|
||||
updateBubble(this, bubbleValue, sliderBubble);
|
||||
|
||||
if (hasHideClass) {
|
||||
sliderBubble.classList.remove('hide');
|
||||
hasHideClass = false;
|
||||
}
|
||||
}
|
||||
|
||||
}, {
|
||||
passive: true
|
||||
});
|
||||
|
||||
dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
|
||||
sliderBubble.classList.add('hide');
|
||||
hasHideClass = true;
|
||||
}, {
|
||||
passive: true
|
||||
});
|
||||
|
||||
if (!supportsNativeProgressStyle) {
|
||||
|
||||
if (supportsValueSetOverride) {
|
||||
this.addEventListener('valueset', updateValues);
|
||||
} else {
|
||||
startInterval(this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Keyboard dragging timeout.
|
||||
* After this delay "change" event will be fired.
|
||||
*/
|
||||
var KeyboardDraggingTimeout = 1000;
|
||||
|
||||
/**
|
||||
* Keyboard dragging timer.
|
||||
*/
|
||||
var keyboardDraggingTimer;
|
||||
|
||||
/**
|
||||
* Start keyboard dragging.
|
||||
*
|
||||
* @param {Object} elem slider itself
|
||||
*/
|
||||
function startKeyboardDragging(elem) {
|
||||
elem.keyboardDragging = true;
|
||||
|
||||
clearTimeout(keyboardDraggingTimer);
|
||||
keyboardDraggingTimer = setTimeout(function () {
|
||||
finishKeyboardDragging(elem);
|
||||
}, KeyboardDraggingTimeout);
|
||||
}
|
||||
|
||||
/**
|
||||
* Finish keyboard dragging.
|
||||
*
|
||||
* @param {Object} elem slider itself
|
||||
*/
|
||||
function finishKeyboardDragging(elem) {
|
||||
clearTimeout(keyboardDraggingTimer);
|
||||
keyboardDraggingTimer = undefined;
|
||||
|
||||
elem.keyboardDragging = false;
|
||||
|
||||
var event = new Event('change', {
|
||||
bubbles: true,
|
||||
cancelable: false
|
||||
});
|
||||
elem.dispatchEvent(event);
|
||||
}
|
||||
|
||||
/**
|
||||
* Do step by delta.
|
||||
*
|
||||
* @param {Object} elem slider itself
|
||||
* @param {number} delta step amount
|
||||
*/
|
||||
function stepKeyboard(elem, delta) {
|
||||
startKeyboardDragging(elem);
|
||||
|
||||
elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta));
|
||||
|
||||
var event = new Event('input', {
|
||||
bubbles: true,
|
||||
cancelable: false
|
||||
});
|
||||
elem.dispatchEvent(event);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle KeyDown event
|
||||
*/
|
||||
function onKeyDown(e) {
|
||||
switch (e.key) {
|
||||
case 'ArrowLeft':
|
||||
case 'Left':
|
||||
stepKeyboard(this, -this.keyboardStepDown || -1);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
case 'Right':
|
||||
stepKeyboard(this, this.keyboardStepUp || 1);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable keyboard dragging.
|
||||
*/
|
||||
EmbySliderPrototype.enableKeyboardDragging = function () {
|
||||
if (!this.keyboardDraggingEnabled) {
|
||||
this.addEventListener('keydown', onKeyDown);
|
||||
this.keyboardDraggingEnabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set steps for keyboard input.
|
||||
*
|
||||
* @param {number} stepDown step to reduce
|
||||
* @param {number} stepUp step to increase
|
||||
*/
|
||||
EmbySliderPrototype.setKeyboardSteps = function (stepDown, stepUp) {
|
||||
this.keyboardStepDown = stepDown || stepUp || 1;
|
||||
this.keyboardStepUp = stepUp || stepDown || 1;
|
||||
}
|
||||
|
||||
function setRange(elem, startPercent, endPercent) {
|
||||
|
||||
var style = elem.style;
|
||||
style.left = Math.max(startPercent, 0) + '%';
|
||||
|
||||
var widthPercent = endPercent - startPercent;
|
||||
style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';
|
||||
}
|
||||
|
||||
function mapRangesFromRuntimeToPercent(ranges, runtime) {
|
||||
|
||||
if (!runtime) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return ranges.map(function (r) {
|
||||
|
||||
return {
|
||||
start: (r.start / runtime) * 100,
|
||||
end: (r.end / runtime) * 100
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
EmbySliderPrototype.setBufferedRanges = function (ranges, runtime, position) {
|
||||
|
||||
var elem = this.backgroundUpper;
|
||||
if (!elem) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (runtime != null) {
|
||||
ranges = mapRangesFromRuntimeToPercent(ranges, runtime);
|
||||
|
||||
position = (position / runtime) * 100;
|
||||
}
|
||||
|
||||
for (var i = 0, length = ranges.length; i < length; i++) {
|
||||
|
||||
var range = ranges[i];
|
||||
|
||||
if (position != null) {
|
||||
if (position >= range.end) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
setRange(elem, range.start, range.end);
|
||||
return;
|
||||
}
|
||||
|
||||
setRange(elem, 0, 0);
|
||||
};
|
||||
|
||||
EmbySliderPrototype.setIsClear = function (isClear) {
|
||||
|
||||
var backgroundLower = this.backgroundLower;
|
||||
if (backgroundLower) {
|
||||
if (isClear) {
|
||||
backgroundLower.classList.add('mdl-slider-background-lower-clear');
|
||||
} else {
|
||||
backgroundLower.classList.remove('mdl-slider-background-lower-clear');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function startInterval(range) {
|
||||
var interval = range.interval;
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
range.interval = setInterval(updateValues.bind(range), 100);
|
||||
}
|
||||
|
||||
EmbySliderPrototype.detachedCallback = function () {
|
||||
|
||||
var interval = this.interval;
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
this.interval = null;
|
||||
this.backgroundUpper = null;
|
||||
this.backgroundLower = null;
|
||||
};
|
||||
|
||||
document.registerElement('emby-slider', {
|
||||
prototype: EmbySliderPrototype,
|
||||
extends: 'input'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
.emby-textarea {
|
||||
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: inherit;
|
||||
/* General select styles: change as needed */
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
padding: .35em .25em;
|
||||
/* Prevent padding from causing width overflow */
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.emby-textarea::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.textareaLabel {
|
||||
display: inline-block;
|
||||
transition: all .2s ease-out;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
.emby-textarea + .fieldDescription {
|
||||
margin-top: .25em;
|
||||
}
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'emby-input'], function (layoutManager, browser) {
|
||||
'use strict';
|
||||
|
||||
function autoGrow(textarea, maxLines) {
|
||||
var self = this;
|
||||
|
||||
if (maxLines === undefined) {
|
||||
maxLines = 999;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates the vertical padding of the element
|
||||
* @param textarea
|
||||
* @returns {number}
|
||||
*/
|
||||
self.getOffset = function (textarea) {
|
||||
var style = window.getComputedStyle(textarea, null);
|
||||
var props = ['paddingTop', 'paddingBottom'];
|
||||
var offset = 0;
|
||||
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
offset += parseInt(style[props[i]]);
|
||||
}
|
||||
return offset;
|
||||
};
|
||||
|
||||
var offset;
|
||||
function reset() {
|
||||
textarea.rows = 1;
|
||||
offset = self.getOffset(textarea);
|
||||
self.rows = textarea.rows || 1;
|
||||
self.lineHeight = (textarea.scrollHeight / self.rows) - (offset / self.rows);
|
||||
self.maxAllowedHeight = (self.lineHeight * maxLines) - offset;
|
||||
}
|
||||
|
||||
function autogrowFn() {
|
||||
if (!self.lineHeight || self.lineHeight <= 0) {
|
||||
reset();
|
||||
}
|
||||
if (self.lineHeight <= 0) {
|
||||
textarea.style.overflowY = 'scroll';
|
||||
textarea.style.height = 'auto';
|
||||
textarea.rows = 3;
|
||||
return;
|
||||
}
|
||||
var newHeight = 0;
|
||||
var hasGrown = false;
|
||||
|
||||
if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
|
||||
textarea.style.overflowY = 'scroll';
|
||||
newHeight = self.maxAllowedHeight;
|
||||
} else {
|
||||
textarea.style.overflowY = 'hidden';
|
||||
textarea.style.height = 'auto';
|
||||
newHeight = textarea.scrollHeight/* - offset*/;
|
||||
hasGrown = true;
|
||||
}
|
||||
textarea.style.height = newHeight + 'px';
|
||||
}
|
||||
|
||||
// Call autogrowFn() when textarea's value is changed
|
||||
textarea.addEventListener('input', autogrowFn);
|
||||
textarea.addEventListener('focus', autogrowFn);
|
||||
textarea.addEventListener('valueset', autogrowFn);
|
||||
|
||||
autogrowFn();
|
||||
}
|
||||
|
||||
var EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
|
||||
|
||||
var elementId = 0;
|
||||
|
||||
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
|
||||
|
||||
var descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
|
||||
|
||||
// descriptor returning null in webos
|
||||
if (descriptor && descriptor.configurable) {
|
||||
var baseSetMethod = descriptor.set;
|
||||
descriptor.set = function (value) {
|
||||
baseSetMethod.call(this, value);
|
||||
|
||||
this.dispatchEvent(new CustomEvent('valueset', {
|
||||
bubbles: false,
|
||||
cancelable: false
|
||||
}));
|
||||
};
|
||||
|
||||
Object.defineProperty(HTMLTextAreaElement.prototype, 'value', descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
EmbyTextAreaPrototype.createdCallback = function () {
|
||||
|
||||
if (!this.id) {
|
||||
this.id = 'embytextarea' + elementId;
|
||||
elementId++;
|
||||
}
|
||||
};
|
||||
|
||||
EmbyTextAreaPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.classList.contains('emby-textarea')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.rows = 1;
|
||||
this.classList.add('emby-textarea');
|
||||
|
||||
var parentNode = this.parentNode;
|
||||
var label = this.ownerDocument.createElement('label');
|
||||
label.innerHTML = this.getAttribute('label') || '';
|
||||
label.classList.add('textareaLabel');
|
||||
|
||||
label.htmlFor = this.id;
|
||||
parentNode.insertBefore(label, this);
|
||||
|
||||
this.addEventListener('focus', function () {
|
||||
label.classList.add('textareaLabelFocused');
|
||||
label.classList.remove('textareaLabelUnfocused');
|
||||
});
|
||||
this.addEventListener('blur', function () {
|
||||
label.classList.remove('textareaLabelFocused');
|
||||
label.classList.add('textareaLabelUnfocused');
|
||||
});
|
||||
|
||||
this.label = function (text) {
|
||||
label.innerHTML = text;
|
||||
};
|
||||
|
||||
new autoGrow(this);
|
||||
};
|
||||
|
||||
document.registerElement('emby-textarea', {
|
||||
prototype: EmbyTextAreaPrototype,
|
||||
extends: 'textarea'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
.mdl-switch {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.toggleContainer {
|
||||
margin-bottom: 1.8em;
|
||||
}
|
||||
|
||||
.mdl-switch__input {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
-ms-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mdl-switch__trackContainer {
|
||||
position: relative;
|
||||
width: 2.9em;
|
||||
}
|
||||
|
||||
.mdl-switch__track {
|
||||
background: rgba(128,128,128, 0.5);
|
||||
height: 1em;
|
||||
border-radius: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
|
||||
background: rgba(0, 164, 220, 0.5);
|
||||
}
|
||||
|
||||
.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
|
||||
background: rgba(0,0,0, 0.12);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mdl-switch__thumb {
|
||||
background: #999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -.25em;
|
||||
height: 1.44em;
|
||||
width: 1.44em;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
transition-duration: 0.28s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
||||
background: #00a4dc;
|
||||
left: 1.466em;
|
||||
box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px .56em 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
||||
background: rgb(189,189,189);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mdl-switch__focus-helper {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: .6em;
|
||||
height: .6em;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mdl-switch__input:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
|
||||
box-shadow: 0 0 0 1.39em rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
|
||||
box-shadow: 0 0 0 1.39em rgba(0, 164, 220, 0.26);
|
||||
background-color: rgba(0, 164, 220, 0.26);
|
||||
}
|
||||
|
||||
.mdl-switch__label {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: .7em;
|
||||
}
|
||||
|
||||
.mdl-switch__input[disabled] .mdl-switch__label {
|
||||
color: rgb(189,189,189);
|
||||
cursor: auto;
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
define(['css!./emby-toggle', 'registerElement'], function () {
|
||||
'use strict';
|
||||
|
||||
var EmbyTogglePrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
||||
function onKeyDown(e) {
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
EmbyTogglePrototype.attachedCallback = function () {
|
||||
|
||||
if (this.getAttribute('data-embytoggle') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setAttribute('data-embytoggle', 'true');
|
||||
|
||||
this.classList.add('mdl-switch__input');
|
||||
|
||||
var labelElement = this.parentNode;
|
||||
labelElement.classList.add('mdl-switch');
|
||||
labelElement.classList.add('mdl-js-switch');
|
||||
|
||||
var 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>');
|
||||
|
||||
labelTextElement.classList.add('toggleButtonLabel');
|
||||
labelTextElement.classList.add('mdl-switch__label');
|
||||
|
||||
this.addEventListener('keydown', onKeyDown);
|
||||
};
|
||||
|
||||
document.registerElement('emby-toggle', {
|
||||
prototype: EmbyTogglePrototype,
|
||||
extends: 'input'
|
||||
});
|
||||
});
|
||||
|
|
@ -4,20 +4,15 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
|
|||
var serverNotifications = {};
|
||||
|
||||
function notifyApp() {
|
||||
|
||||
inputManager.notify();
|
||||
}
|
||||
|
||||
function displayMessage(cmd) {
|
||||
|
||||
var args = cmd.Arguments;
|
||||
|
||||
if (args.TimeoutMs) {
|
||||
|
||||
require(['toast'], function (toast) {
|
||||
toast({ title: args.Header, text: args.Text });
|
||||
});
|
||||
|
||||
} else {
|
||||
require(['alert'], function (alert) {
|
||||
alert({ title: args.Header, text: args.Text });
|
||||
|
|
@ -146,14 +141,10 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
|
|||
}
|
||||
|
||||
function onMessageReceived(e, msg) {
|
||||
|
||||
var apiClient = this;
|
||||
|
||||
if (msg.MessageType === "Play") {
|
||||
|
||||
notifyApp();
|
||||
var serverId = apiClient.serverInfo().Id;
|
||||
|
||||
if (msg.Data.PlayCommand === "PlayNext") {
|
||||
playbackManager.queueNext({ ids: msg.Data.ItemIds, serverId: serverId });
|
||||
} else if (msg.Data.PlayCommand === "PlayLast") {
|
||||
|
|
@ -169,9 +160,7 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
|
|||
serverId: serverId
|
||||
});
|
||||
}
|
||||
|
||||
} else if (msg.MessageType === "Playstate") {
|
||||
|
||||
if (msg.Data.Command === 'Stop') {
|
||||
inputManager.trigger('stop');
|
||||
} else if (msg.Data.Command === 'Pause') {
|
||||
|
|
@ -193,22 +182,17 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
|
|||
var cmd = msg.Data;
|
||||
processGeneralCommand(cmd, apiClient);
|
||||
} else if (msg.MessageType === "UserDataChanged") {
|
||||
|
||||
if (msg.Data.UserId === apiClient.getCurrentUserId()) {
|
||||
|
||||
for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
|
||||
events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
events.trigger(serverNotifications, msg.MessageType, [apiClient, msg.Data]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function bindEvents(apiClient) {
|
||||
|
||||
events.off(apiClient, "message", onMessageReceived);
|
||||
events.on(apiClient, "message", onMessageReceived);
|
||||
}
|
||||
|
|
@ -229,7 +213,6 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
|
|||
connectionManager.getApiClients().forEach(bindEvents);
|
||||
|
||||
events.on(connectionManager, 'apiclientcreated', function (e, newApiClient) {
|
||||
|
||||
bindEvents(newApiClient);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue