use shared collectioneditor

dashboard-ui/bower_components/emby-webcomponents/emby-select/emby-select.css

@@ -0,0 +1,44 @@
+[is="emby-select"] {
+    display: block;
+    margin: 0;
+    margin-bottom: 0 !important;
+    background: none;
+    border: 1px solid rgb(221, 221, 221);
+    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: inherit;
+    /* General select styles: change as needed */
+    font-family: inherit;
+    font-weight: bold;
+    color: inherit;
+    padding: .6em .8em .3em 0;
+    cursor: pointer;
+    outline: none !important;
+}
+
+.selectLabel {
+    display: block;
+}
+
+.selectLabelFocus {
+    color: #52B54B;
+}
+
+.emby-select-selectionbar {
+    height: 2px;
+    transform: scale(.01);
+    transition: transform .2s ease-out;
+    position: relative;
+    top: -1px;
+    margin-bottom: .5em;
+}
+
+[is="emby-select"]:focus + .emby-select-selectionbar {
+    background-color: #52B54B;
+    transform: none;
+}

dashboard-ui/bower_components/emby-webcomponents/emby-select/emby-select.js

@@ -0,0 +1,112 @@
+define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select'], function (layoutManager, browser, actionsheet) {
+
+    var EmbySelectPrototype = Object.create(HTMLSelectElement.prototype);
+
+    function enableNativeMenu() {
+
+        // Take advantage of the native input methods
+        if (browser.tv) {
+            return true;
+        }
+
+        if (layoutManager.tv) {
+            return false;
+        }
+
+        return true;
+    }
+
+    function showActionSheeet(select) {
+
+        actionsheet.show({
+            items: select.options,
+            positionTo: select
+
+        }).then(function (value) {
+            select.value = value;
+        });
+    }
+
+    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('selectLabelFocus');
+        }
+    }
+
+    function onBlur(e) {
+        var label = getLabel(this);
+        if (label) {
+            label.classList.remove('selectLabelFocus');
+        }
+    }
+
+    function onMouseDown(e) {
+
+        if (!enableNativeMenu()) {
+            e.preventDefault();
+            showActionSheeet(this);
+        }
+    }
+
+    function onKeyDown(e) {
+
+        switch (e.keyCode) {
+
+            case 13:
+                if (!enableNativeMenu()) {
+                    e.preventDefault();
+                    showActionSheeet(this);
+                }
+                return;
+            case 37:
+            case 38:
+            case 39:
+            case 40:
+                if (layoutManager.tv) {
+                    e.preventDefault();
+                }
+                return;
+            default:
+                break;
+        }
+    }
+
+    EmbySelectPrototype.createdCallback = function () {
+
+        if (!this.id) {
+            this.id = 'select' + new Date().getTime();
+        }
+        this.addEventListener('mousedown', onMouseDown);
+        this.addEventListener('keydown', onKeyDown);
+        this.addEventListener('focus', onFocus);
+        this.addEventListener('keydown', onBlur);
+    };
+
+    EmbySelectPrototype.attachedCallback = function () {
+
+        var label = this.ownerDocument.createElement('label');
+        label.innerHTML = this.getAttribute('label') || '';
+        label.classList.add('selectLabel');
+        label.htmlFor = this.id;
+        this.parentNode.insertBefore(label, this);
+
+        var div = document.createElement('div');
+        div.classList.add('emby-select-selectionbar');
+        div.innerHTML = '<div class="emby-select-selectionbarInner"></div>';
+        this.parentNode.insertBefore(div, this.nextSibling);
+    };
+
+    document.registerElement('emby-select', {
+        prototype: EmbySelectPrototype,
+        extends: 'select'
+    });
+});