move some elements to a new directory

src/elements/emby-select/emby-select.css

@@ -0,0 +1,110 @@
+.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;
+}

src/elements/emby-select/emby-select.js

@@ -0,0 +1,162 @@
+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'
+    });
+});