diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json index b160c3c9b1..7093e7552d 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json +++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json @@ -15,12 +15,12 @@ }, "devDependencies": {}, "ignore": [], - "version": "1.0.86", - "_release": "1.0.86", + "version": "1.0.90", + "_release": "1.0.90", "_resolution": { "type": "version", - "tag": "1.0.86", - "commit": "e0329ec7873dc265487709c58f2457428e0c9c99" + "tag": "1.0.90", + "commit": "2722d205b177e50517bb46b4d416b8ea2e8e2e3b" }, "_source": "git://github.com/MediaBrowser/emby-webcomponents.git", "_target": "~1.0.0", diff --git a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css new file mode 100644 index 0000000000..c394ad74c4 --- /dev/null +++ b/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; +} diff --git a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js new file mode 100644 index 0000000000..0395149a30 --- /dev/null +++ b/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 += '
'; + + if (options.title) { + + if (layoutManager.tv) { + html += '

'; + html += options.title; + html += '

'; + } else { + html += '

'; + html += options.title; + html += '

'; + } + } + + html += '
'; + + 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 += ''; + 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 += ''; + } + else if (renderIcon && !center) { + html += ''; + } + html += '' + option.name + ''; + html += ''; + } + + if (enablePaperMenu) { + html += ''; + } + + if (options.showCancel) { + html += '
'; + html += '' + Globalize.translate('core#ButtonCancel') + ''; + html += '
'; + } + html += '
'; + + 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 + }; +}); \ No newline at end of file diff --git a/dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.js b/dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.js index 25fec50fd7..872ed0c3c3 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.js +++ b/dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.js @@ -38,7 +38,9 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!. html += ''; } - html += ''; + html += '
'; + + html += ''; if (options.description) { html += '
'; @@ -46,7 +48,6 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!. html += '
'; } - // TODO: An actual form element should probably be added html += '
'; if (raisedButtons) { html += '' + globalize.translate(dialogText.buttonOk) + ''; @@ -56,25 +57,32 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!. html += '' + globalize.translate(dialogText.buttonCancel) + ''; html += '
'; } + html += ''; html += ''; 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) { diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index e68782fe93..c4515e9bc6 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -1879,3 +1879,7 @@ progress { text-align: center; color: #bbb; } + +.actionSheetMenuItem:hover { + background-color: #e8e8e8; +} diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 78f4ce4c21..c599eef581 100644 --- a/dashboard-ui/scripts/site.js +++ b/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