use shared action sheet

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.0.86",
+  "version": "1.0.90",
-  "_release": "1.0.86",
+  "_release": "1.0.90",
   "_resolution": {
     "type": "version",
-    "tag": "1.0.86",
+    "tag": "1.0.90",
-    "commit": "e0329ec7873dc265487709c58f2457428e0c9c99"
+    "commit": "2722d205b177e50517bb46b4d416b8ea2e8e2e3b"
   },
   "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "~1.0.0",

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

@@ -0,0 +1,54 @@
+.actionSheet {
+    display: flex;
+    justify-content: center;
+}
+
+    .actionSheet.centered .actionSheetContent {
+        text-align: center;
+        align-items: center;
+    }
+
+.actionSheetContent {
+    margin: 0 !important;
+    padding: 1em 1em !important;
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+}
+
+.actionSheetMenuItem {
+    padding: .4em .5em;
+    margin: 0;
+    text-transform: none;
+    text-align: inherit;
+    display: flex;
+    justify-content: center;
+    font-weight: inherit;
+}
+
+.actionSheetItemIcon {
+    margin-right: 1.5em !important;
+}
+
+.actionSheetScroller {
+    max-height: 60%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    /* Override default style being applied by polymer */
+    margin-bottom: 0 !important;
+    scroll-behavior: smooth;
+}
+
+    .actionSheetScroller::-webkit-scrollbar, .actionSheetScroller::-webkit-scrollbar {
+        width: 0 !important;
+        display: none;
+    }
+
+h1.actionSheetTitle {
+    margin: .5em 0 .7em !important;
+}
+
+h2.actionSheetTitle {
+    margin: .25em 0 .55em !important;
+}

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

@@ -0,0 +1,196 @@
+define(['paperdialoghelper', 'layoutManager', 'paper-button', 'css!./actionsheet'], function (paperdialoghelper, layoutManager) {
+
+    function parentWithClass(elem, className) {
+
+        while (!elem.classList || !elem.classList.contains(className)) {
+            elem = elem.parentNode;
+
+            if (!elem) {
+                return null;
+            }
+        }
+
+        return elem;
+    }
+
+    function getPosition(options) {
+
+        var windowHeight = $(window).height();
+
+        if (windowHeight < 540) {
+            return null;
+        }
+
+        var pos = $(options.positionTo).offset();
+
+        pos.top += $(options.positionTo).innerHeight() / 2;
+        pos.left += $(options.positionTo).innerWidth() / 2;
+
+        // Account for margins
+        pos.top -= 24;
+        pos.left -= 24;
+
+        // Account for popup size - we can't predict this yet so just estimate
+        pos.top -= (55 * options.items.length) / 2;
+        pos.left -= 80;
+
+        // Account for scroll position
+        pos.top -= $(window).scrollTop();
+        pos.left -= $(window).scrollLeft();
+
+        // Avoid showing too close to the bottom
+        pos.top = Math.min(pos.top, windowHeight - 300);
+        pos.left = Math.min(pos.left, $(window).width() - 300);
+
+        // Do some boundary checking
+        pos.top = Math.max(pos.top, 0);
+        pos.left = Math.max(pos.left, 0);
+
+        return pos;
+    }
+
+    function show(options) {
+
+        // items
+        // positionTo
+        // showCancel
+        // title
+        var dialogOptions = {
+            removeOnClose: true,
+            enableHistory: options.enableHistory
+        };
+
+        var backButton = false;
+
+        if (layoutManager.tv) {
+            dialogOptions.size = 'fullscreen';
+            backButton = true;
+            dialogOptions.autoFocus = true;
+        } else {
+
+            dialogOptions.modal = false;
+            dialogOptions.entryAnimationDuration = 160;
+            dialogOptions.exitAnimationDuration = 200;
+            dialogOptions.autoFocus = false;
+        }
+
+        var dlg = paperdialoghelper.createDialog(dialogOptions);
+        var pos = options.positionTo ? getPosition(options) : null;
+
+        dlg.classList.add('actionSheet');
+
+        var html = '';
+        html += '<div class="actionSheetContent">';
+
+        if (options.title) {
+
+            if (layoutManager.tv) {
+                html += '<h1 class="actionSheetTitle">';
+                html += options.title;
+                html += '</h1>';
+            } else {
+                html += '<h2 class="actionSheetTitle">';
+                html += options.title;
+                html += '</h2>';
+            }
+        }
+
+        html += '<div class="actionSheetScroller">';
+
+        var itemsWithIcons = options.items.filter(function (o) {
+            return o.ironIcon;
+        });
+
+        // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
+        var renderIcon = itemsWithIcons.length;
+        var center = options.title && (!itemsWithIcons.length || itemsWithIcons.length != options.items.length);
+
+        if (center) {
+            dlg.classList.add('centered');
+        }
+
+        var enablePaperMenu = !layoutManager.tv;
+        enablePaperMenu = false;
+        var itemTagName = 'paper-button';
+
+        if (enablePaperMenu) {
+            html += '<paper-menu>';
+            itemTagName = 'paper-menu-item';
+        }
+
+        for (var i = 0, length = options.items.length; i < length; i++) {
+
+            var option = options.items[i];
+
+            var autoFocus = option.selected ? ' autoFocus' : '';
+            html += '<' + itemTagName + autoFocus + ' noink class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">';
+
+            if (option.ironIcon) {
+                html += '<iron-icon class="actionSheetItemIcon" icon="' + option.ironIcon + '"></iron-icon>';
+            }
+            else if (renderIcon && !center) {
+                html += '<iron-icon></iron-icon>';
+            }
+            html += '<span>' + option.name + '</span>';
+            html += '</' + itemTagName + '>';
+        }
+
+        if (enablePaperMenu) {
+            html += '</paper-menu>';
+        }
+
+        if (options.showCancel) {
+            html += '<div class="buttons">';
+            html += '<paper-button dialog-dismiss>' + Globalize.translate('core#ButtonCancel') + '</paper-button>';
+            html += '</div>';
+        }
+        html += '</div>';
+
+        dlg.innerHTML = html;
+
+        if (pos) {
+            dlg.style.position = 'fixed';
+            dlg.style.left = pos.left + 'px';
+            dlg.style.top = pos.top + 'px';
+        }
+
+        document.body.appendChild(dlg);
+
+        // Seeing an issue in some non-chrome browsers where this is requiring a double click
+        //var eventName = browser.firefox ? 'mousedown' : 'click';
+        var eventName = 'click';
+
+        return new Promise(function (resolve, reject) {
+
+            dlg.addEventListener(eventName, function (e) {
+
+                var actionSheetMenuItem = parentWithClass(e.target, 'actionSheetMenuItem');
+
+                if (actionSheetMenuItem) {
+
+                    var selectedId = actionSheetMenuItem.getAttribute('data-id');
+
+                    paperdialoghelper.close(dlg);
+
+                    // Add a delay here to allow the click animation to finish, for nice effect
+                    setTimeout(function () {
+
+                        if (options.callback) {
+                            options.callback(selectedId);
+                        }
+
+                        resolve(selectedId);
+
+                    }, 100);
+                }
+
+            });
+
+            paperdialoghelper.open(dlg);
+        });
+    }
+
+    return {
+        show: show
+    };
+});

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

@@ -38,7 +38,9 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
             html += '</h2>';
         }
 
-        html += '<paper-input autoFocus class="txtPromptValue"></paper-input>';
+        html += '<form>';
+
+        html += '<paper-input autoFocus class="txtPromptValue" value="' + (options.value || '') + '" label="' + (options.label || '') + '"></paper-input>';
 
         if (options.description) {
             html += '<div class="fieldDescription">';
@@ -46,7 +48,6 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
             html += '</div>';
         }
 
-        // TODO: An actual form element should probably be added
         html += '<br/>';
         if (raisedButtons) {
             html += '<paper-button raised class="btnSubmit"><iron-icon icon="dialog:check"></iron-icon><span>' + globalize.translate(dialogText.buttonOk) + '</span></paper-button>';
@@ -56,25 +57,32 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
             html += '<paper-button class="btnPromptExit">' + globalize.translate(dialogText.buttonCancel) + '</paper-button>';
             html += '</div>';
         }
+        html += '</form>';
 
         html += '</div>';
 
         dlg.innerHTML = html;
 
-        if (options.text) {
-            dlg.querySelector('.txtPromptValue').value = options.text;
-        }
-
-        if (options.label) {
-            dlg.querySelector('.txtPromptValue').label = options.label;
-        }
-
         document.body.appendChild(dlg);
 
-        dlg.querySelector('.btnSubmit').addEventListener('click', function (e) {
+        dlg.querySelector('form').addEventListener('submit', function (e) {
 
             submitValue = dlg.querySelector('.txtPromptValue').value;
             paperdialoghelper.close(dlg);
+            e.preventDefault();
+            return false;
+        });
+
+        dlg.querySelector('.btnSubmit').addEventListener('click', function (e) {
+
+            // Do a fake form submit this the button isn't a real submit button
+            var fakeSubmit = document.createElement('input');
+            fakeSubmit.setAttribute('type', 'submit');
+            fakeSubmit.style.display = 'none';
+            var form = dlg.querySelector('form');
+            form.appendChild(fakeSubmit);
+            fakeSubmit.click();
+            form.removeChild(fakeSubmit);
         });
 
         dlg.querySelector('.btnPromptExit').addEventListener('click', function (e) {

dashboard-ui/css/site.css

@@ -1879,3 +1879,7 @@ progress {
     text-align: center;
     color: #bbb;
 }
+
+.actionSheetMenuItem:hover {
+    background-color: #e8e8e8;
+}

dashboard-ui/scripts/site.js

@@ -1835,7 +1835,8 @@ var AppInfo = {};
             paths.sharingwidget = "components/sharingwidget";
             paths.serverdiscovery = apiClientBowerPath + "/serverdiscovery";
             paths.wakeonlan = apiClientBowerPath + "/wakeonlan";
-            paths.actionsheet = "scripts/actionsheet";
+
+            define("actionsheet", [embyWebComponentsBowerPath + "/actionsheet/actionsheet"], returnFirstDependency);
         }
 
         // hack for an android test before browserInfo is loaded