move emby-webcomponents to components and reflect paths

src/components/emby-checkbox/emby-checkbox.css

@@ -0,0 +1,150 @@
+.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;
+}
+
+/* Commenting this out - set by theme */
+/*.emby-checkbox:checked + span + span + .checkboxOutline {
+    border-color: #52B54B;
+}*/
+
+.emby-checkbox-focushelper {
+    position: absolute;
+    top: -0.915em;
+    left: -0.915em;
+    width: 3.66em;
+    height: 3.66em;
+    display: inline-block;
+    box-sizing: border-box;
+    margin: 3px 0 0 0;
+    border-radius: 50%;
+    background-color: transparent;
+}
+
+/* Commenting this out - set by theme */
+/*.emby-checkbox:focus + span + .emby-checkbox-focushelper {
+    background-color: rgba(82, 181, 75, 0.26);
+}*/
+
+.checkboxIcon {
+    font-size: 1.6em;
+    color: #fff;
+}
+
+.checkboxIcon-checked {
+    display: none;
+}
+
+.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxIcon-checked {
+    /* background-color set by theme */
+    /*background-color: #52B54B;*/
+    display: flex !important;
+}
+
+.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxIcon-unchecked {
+    /* background-color set by theme */
+    display: none !important;
+}
+
+.emby-checkbox:checked[disabled] + span + span + .checkboxOutline > .checkboxIcon {
+    background-color: rgba(0, 0, 0, 0.26);
+}
+
+.checkboxLabel {
+    position: relative;
+    margin: 0;
+}
+
+.checkboxList > .emby-checkbox-label {
+    display: flex;
+    margin: .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;
+    }
+}

src/components/emby-checkbox/emby-checkbox.js

@@ -0,0 +1,110 @@
+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') || '';
+        var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
+        var checkHtml = '<i class="md-icon checkboxIcon checkboxIcon-checked">' + checkedIcon + '</i>';
+        var uncheckedHtml = '<i class="md-icon checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + '</i>';
+        labelElement.insertAdjacentHTML('beforeend', '<span class="emby-checkbox-focushelper"></span><span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
+
+        labelTextElement.classList.add('checkboxLabel');
+
+        this.addEventListener('keydown', onKeyDown);
+
+        if (enableRefreshHack) {
+
+            forceRefresh.call(this, true);
+            dom.addEventListener(this, 'click', forceRefresh, {
+                passive: true
+            });
+            dom.addEventListener(this, 'blur', forceRefresh, {
+                passive: true
+            });
+            dom.addEventListener(this, 'focus', forceRefresh, {
+                passive: true
+            });
+            dom.addEventListener(this, 'change', forceRefresh, {
+                passive: true
+            });
+        }
+    };
+
+    EmbyCheckboxPrototype.detachedCallback = function () {
+
+        this.removeEventListener('keydown', onKeyDown);
+
+        dom.removeEventListener(this, 'click', forceRefresh, {
+            passive: true
+        });
+        dom.removeEventListener(this, 'blur', forceRefresh, {
+            passive: true
+        });
+        dom.removeEventListener(this, 'focus', forceRefresh, {
+            passive: true
+        });
+        dom.removeEventListener(this, 'change', forceRefresh, {
+            passive: true
+        });
+    };
+
+    document.registerElement('emby-checkbox', {
+        prototype: EmbyCheckboxPrototype,
+        extends: 'input'
+    });
+});