1
0
Fork 0
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:
Luke Pulverenti 2016-02-21 15:39:14 -05:00
parent 7204e2a9d8
commit a832af5f4c
6 changed files with 279 additions and 16 deletions

View file

@ -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",

View 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;
}

View 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
};
});

View file

@ -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) {

View file

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

View file

@ -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