minify
This commit is contained in:
Luke Pulverenti
parent
82bcca376f
commit
8a6884abef
494 changed files with 256 additions and 120180 deletions
|
|
@ -1,73 +1 @@
|
|||
.emby-select {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: 0 !important;
|
||||
border: 1px solid #383838;
|
||||
border-width: 0 0 1px 0;
|
||||
/* Prefixed box-sizing rules necessary for older browsers */
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
/* 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: .35em .8em .3em 0;
|
||||
cursor: pointer;
|
||||
outline: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.emby-select-withoptioncolor {
|
||||
color: inherit;
|
||||
background: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.emby-select-withoptioncolor > option {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
.selectContainer {
|
||||
margin-bottom: 1.8em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selectArrowContainer {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: .25em;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.selectArrow {
|
||||
margin-top: .35em;
|
||||
}
|
||||
|
||||
.selectLabel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.selectLabelFocused {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
.emby-select-selectionbar {
|
||||
height: 2px;
|
||||
transform: scale(.01, 1);
|
||||
transition: transform .25s ease-out;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-bottom: .5em;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.emby-select:focus + .emby-select-selectionbar {
|
||||
background-color: #52B54B;
|
||||
transform: none;
|
||||
}
|
||||
.emby-select,.selectLabel{display:block}.emby-select{margin:0;margin-bottom:0!important;border:1px solid #383838;border-width:0 0 1px;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:110%;font-family:inherit;font-weight:inherit;padding:.35em .8em .3em 0;cursor:pointer;outline:0!important;width:100%}.emby-select-withoptioncolor{color:inherit;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.emby-select-withoptioncolor>option{color:initial}.selectContainer{margin-bottom:1.8em;position:relative}.selectArrowContainer{position:absolute;right:0;top:.25em;color:inherit}.selectArrow{margin-top:.35em}.selectLabelFocused{color:#52B54B}.emby-select-selectionbar{height:2px;-webkit-transform:scale(.01,1);transform:scale(.01,1);-webkit-transition:-webkit-transform .25s ease-out;-o-transition:transform .25s ease-out;transition:transform .25s ease-out;position:relative;top:-1px;margin-bottom:.5em;-webkit-transform-origin:center center;transform-origin:center center}.emby-select:focus+.emby-select-selectionbar{background-color:#52B54B;-webkit-transform:none;transform:none}
|
||||
|
|
@ -1,174 +1 @@
|
|||
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) {
|
||||
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');
|
||||
label.classList.remove('selectLabelUnfocused');
|
||||
}
|
||||
}
|
||||
|
||||
function onBlur(e) {
|
||||
var label = getLabel(this);
|
||||
if (label) {
|
||||
label.classList.add('selectLabelUnfocused');
|
||||
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++;
|
||||
}
|
||||
|
||||
if (!browser.firefox) {
|
||||
this.classList.add('emby-select-withoptioncolor');
|
||||
}
|
||||
|
||||
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.classList.add('selectLabelUnfocused');
|
||||
label.htmlFor = this.id;
|
||||
this.parentNode.insertBefore(label, this);
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('emby-select-selectionbar');
|
||||
this.parentNode.insertBefore(div, this.nextSibling);
|
||||
|
||||
var arrowContainer = document.createElement('div');
|
||||
arrowContainer.classList.add('selectArrowContainer');
|
||||
arrowContainer.innerHTML = '<div style="visibility:hidden;">0</div>';
|
||||
this.parentNode.appendChild(arrowContainer);
|
||||
|
||||
var arrow = document.createElement('i');
|
||||
arrow.classList.add('md-icon');
|
||||
arrow.classList.add('selectArrow');
|
||||
arrow.innerHTML = '';
|
||||
arrowContainer.appendChild(arrow);
|
||||
};
|
||||
|
||||
EmbySelectPrototype.setLabel = function (text) {
|
||||
|
||||
var label = this.parentNode.querySelector('label');
|
||||
|
||||
label.innerHTML = text;
|
||||
};
|
||||
|
||||
document.registerElement('emby-select', {
|
||||
prototype: EmbySelectPrototype,
|
||||
extends: 'select'
|
||||
});
|
||||
});
|
||||
define(["layoutManager","browser","actionsheet","css!./emby-select","registerElement"],function(layoutManager,browser,actionsheet){"use strict";function enableNativeMenu(){return!(!browser.edgeUwp&&!browser.xboxOne)||!browser.tizen&&(!!browser.tv||!layoutManager.tv)}function triggerChange(select){var evt=document.createEvent("HTMLEvents");evt.initEvent("change",!1,!0),select.dispatchEvent(evt)}function setValue(select,value){select.value=value}function showActionSheet(select){var labelElem=getLabel(select),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){for(var elem=select.previousSibling;elem&&"LABEL"!==elem.tagName;)elem=elem.previousSibling;return elem}function onFocus(e){var label=getLabel(this);label&&(label.classList.add("selectLabelFocused"),label.classList.remove("selectLabelUnfocused"))}function onBlur(e){var label=getLabel(this);label&&(label.classList.add("selectLabelUnfocused"),label.classList.remove("selectLabelFocused"))}function onMouseDown(e){e.button||enableNativeMenu()||(e.preventDefault(),showActionSheet(this))}function onKeyDown(e){switch(e.keyCode){case 13:return void(enableNativeMenu()||(e.preventDefault(),showActionSheet(this)));case 37:case 38:case 39:case 40:return void(layoutManager.tv&&e.preventDefault())}}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-withoptioncolor"),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.classList.add("selectLabelUnfocused"),label.htmlFor=this.id,this.parentNode.insertBefore(label,this);var div=document.createElement("div");div.classList.add("emby-select-selectionbar"),this.parentNode.insertBefore(div,this.nextSibling);var arrowContainer=document.createElement("div");arrowContainer.classList.add("selectArrowContainer"),arrowContainer.innerHTML='<div style="visibility:hidden;">0</div>',this.parentNode.appendChild(arrowContainer);var arrow=document.createElement("i");arrow.classList.add("md-icon"),arrow.classList.add("selectArrow"),arrow.innerHTML="",arrowContainer.appendChild(arrow)}},EmbySelectPrototype.setLabel=function(text){var label=this.parentNode.querySelector("label");label.innerHTML=text},document.registerElement("emby-select",{prototype:EmbySelectPrototype,extends:"select"})});
|
||||
Loading…
Add table
Add a link
Reference in a new issue