mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
use shared action sheet
This commit is contained in:
parent
7204e2a9d8
commit
a832af5f4c
6 changed files with 279 additions and 16 deletions
|
@ -15,12 +15,12 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"version": "1.0.86",
|
"version": "1.0.90",
|
||||||
"_release": "1.0.86",
|
"_release": "1.0.90",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "1.0.86",
|
"tag": "1.0.90",
|
||||||
"commit": "e0329ec7873dc265487709c58f2457428e0c9c99"
|
"commit": "2722d205b177e50517bb46b4d416b8ea2e8e2e3b"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
|
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
|
||||||
"_target": "~1.0.0",
|
"_target": "~1.0.0",
|
||||||
|
|
54
dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css
vendored
Normal file
54
dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css
vendored
Normal file
|
@ -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;
|
||||||
|
}
|
196
dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js
vendored
Normal file
196
dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js
vendored
Normal file
|
@ -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
|
||||||
|
};
|
||||||
|
});
|
|
@ -38,7 +38,9 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
|
||||||
html += '</h2>';
|
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) {
|
if (options.description) {
|
||||||
html += '<div class="fieldDescription">';
|
html += '<div class="fieldDescription">';
|
||||||
|
@ -46,7 +48,6 @@ define(['paperdialoghelper', 'layoutManager', 'globalize', 'dialogText', 'html!.
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: An actual form element should probably be added
|
|
||||||
html += '<br/>';
|
html += '<br/>';
|
||||||
if (raisedButtons) {
|
if (raisedButtons) {
|
||||||
html += '<paper-button raised class="btnSubmit"><iron-icon icon="dialog:check"></iron-icon><span>' + globalize.translate(dialogText.buttonOk) + '</span></paper-button>';
|
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 += '<paper-button class="btnPromptExit">' + globalize.translate(dialogText.buttonCancel) + '</paper-button>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
html += '</form>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
dlg.innerHTML = 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);
|
document.body.appendChild(dlg);
|
||||||
|
|
||||||
dlg.querySelector('.btnSubmit').addEventListener('click', function (e) {
|
dlg.querySelector('form').addEventListener('submit', function (e) {
|
||||||
|
|
||||||
submitValue = dlg.querySelector('.txtPromptValue').value;
|
submitValue = dlg.querySelector('.txtPromptValue').value;
|
||||||
paperdialoghelper.close(dlg);
|
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) {
|
dlg.querySelector('.btnPromptExit').addEventListener('click', function (e) {
|
||||||
|
|
|
@ -1879,3 +1879,7 @@ progress {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #bbb;
|
color: #bbb;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.actionSheetMenuItem:hover {
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
|
@ -1835,7 +1835,8 @@ var AppInfo = {};
|
||||||
paths.sharingwidget = "components/sharingwidget";
|
paths.sharingwidget = "components/sharingwidget";
|
||||||
paths.serverdiscovery = apiClientBowerPath + "/serverdiscovery";
|
paths.serverdiscovery = apiClientBowerPath + "/serverdiscovery";
|
||||||
paths.wakeonlan = apiClientBowerPath + "/wakeonlan";
|
paths.wakeonlan = apiClientBowerPath + "/wakeonlan";
|
||||||
paths.actionsheet = "scripts/actionsheet";
|
|
||||||
|
define("actionsheet", [embyWebComponentsBowerPath + "/actionsheet/actionsheet"], returnFirstDependency);
|
||||||
}
|
}
|
||||||
|
|
||||||
// hack for an android test before browserInfo is loaded
|
// hack for an android test before browserInfo is loaded
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue