1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update action sheet

This commit is contained in:
Luke Pulverenti 2016-01-30 23:04:00 -05:00
parent 79b9a76c6b
commit c959aa01a2
22 changed files with 123 additions and 153 deletions

View file

@ -15,12 +15,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.0.40",
"_release": "1.0.40",
"version": "1.0.42",
"_release": "1.0.42",
"_resolution": {
"type": "version",
"tag": "1.0.40",
"commit": "483fcf8659bb829dd12ec41c629c7ab7c380bbd8"
"tag": "1.0.42",
"commit": "72b4735c586da9d565a9ff268cec1156a71da144"
},
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "~1.0.0",

View file

@ -1,6 +1,6 @@
define(['historyManager', 'focusManager', 'performanceManager', 'browser', 'paper-dialog', 'scale-up-animation', 'fade-out-animation', 'fade-in-animation', 'css!./paperdialoghelper.css'], function (historyManager, focusManager, performanceManager, browser) {
function paperDialogHashHandler(dlg, hash, resolve, lockDocumentScroll) {
function paperDialogHashHandler(dlg, hash, resolve) {
var self = this;
self.originalUrl = window.location.href;
@ -55,7 +55,7 @@
dlg.addEventListener('iron-overlay-closed', onDialogClosed);
dlg.open();
if (lockDocumentScroll !== false && !document.body.classList.contains('noScroll')) {
if (dlg.getAttribute('data-lockscroll') == 'true' && !document.body.classList.contains('noScroll')) {
document.body.classList.add('noScroll');
removeScrollLockOnClose = true;
}
@ -85,6 +85,19 @@
focusManager.autoFocus(e.target);
}
function shouldLockDocumentScroll(options) {
if (options.lockScroll != null) {
return options.lockScroll;
}
if (options.size == 'fullscreen') {
return true;
}
return browser.mobile;
}
function createDialog(options) {
options = options || {};
@ -94,6 +107,10 @@
dlg.setAttribute('with-backdrop', 'with-backdrop');
dlg.setAttribute('role', 'alertdialog');
if (shouldLockDocumentScroll(options)) {
dlg.setAttribute('data-lockscroll', 'true');
}
// without this safari will scroll the background instead of the dialog contents
// but not needed here since this is already on top of an existing dialog
// but skip it in IE because it's causing the entire browser to hang

View file

@ -26,14 +26,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"main": "iron-meta.html",
"homepage": "https://github.com/polymerelements/iron-meta",
"homepage": "https://github.com/PolymerElements/iron-meta",
"_release": "1.1.1",
"_resolution": {
"type": "version",
"tag": "v1.1.1",
"commit": "e171ee234b482219c9514e6f9551df48ef48bd9f"
},
"_source": "git://github.com/polymerelements/iron-meta.git",
"_source": "git://github.com/PolymerElements/iron-meta.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-meta"
"_originalSource": "PolymerElements/iron-meta"
}

View file

@ -6,7 +6,7 @@
var hasChanges = false;
// These images can be large and we're seeing memory problems in safari
var browsableImagePageSize = browserInfo.safari ? 6 : 10;
var browsableImagePageSize = browserInfo.safari ? 6 : (browserInfo.mobile ? 10 : 30);
var browsableImageStartIndex = 0;
var browsableImageType = 'Primary';
@ -272,7 +272,8 @@
currentItemType = itemType;
var dlg = paperDialogHelper.createDialog({
size: 'fullscreen-border'
size: 'fullscreen-border',
lockScroll: true
});
var theme = 'b';

View file

@ -452,9 +452,9 @@
function selectDate(page) {
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: dateOptions,
showCancel: true,
title: Globalize.translate('HeaderSelectDate'),

View file

@ -1,13 +1,19 @@
(function () {
define(['paperdialoghelper', 'paper-menu', 'paper-dialog', 'scale-up-animation', 'fade-out-animation'], function (paperDialogHelper) {
function show(options) {
function parentWithClass(elem, className) {
require(['paper-menu', 'paper-dialog', 'scale-up-animation', 'fade-out-animation'], function () {
showInternal(options);
});
while (!elem.classList || !elem.classList.contains(className)) {
elem = elem.parentNode;
if (!elem) {
return null;
}
}
return elem;
}
function showInternal(options) {
function show(options) {
// items
// positionTo
@ -15,6 +21,8 @@
// title
var html = '';
html += '<div style="margin:0;padding:.8em 1em;">';
var windowHeight = $(window).height();
var pos;
@ -54,13 +62,6 @@
html += '</h3>';
}
// There seems to be a bug with this in safari causing it to immediately roll up to 0 height
var isScrollable = !browserInfo.safari;
if (isScrollable) {
//html += '<paper-dialog-scrollable>';
}
var itemsWithIcons = options.items.filter(function (o) {
return o.ironIcon;
});
@ -94,10 +95,7 @@
html += '</paper-menu-item>';
}
html += '</paper-menu>';
if (isScrollable) {
//html += '</paper-dialog-scrollable>';
}
html += '</div>';
if (options.showCancel) {
html += '<div class="buttons">';
@ -105,10 +103,11 @@
html += '</div>';
}
var dlg = document.createElement('paper-dialog');
dlg.setAttribute('with-backdrop', 'with-backdrop');
dlg.setAttribute('role', 'alertdialog');
dlg.setAttribute('noAutoFocus', 'noAutoFocus');
var dlg = paperDialogHelper.createDialog({
modal: false,
entryAnimationDuration: 160,
exitAnimationDuration: 200
});
dlg.innerHTML = html;
if (pos) {
@ -119,25 +118,7 @@
document.body.appendChild(dlg);
dlg.animationConfig = {
// scale up
'entry': {
name: 'scale-up-animation',
node: dlg,
timing: { duration: 160, easing: 'ease-out' }
},
// fade out
'exit': {
name: 'fade-out-animation',
node: dlg,
timing: { duration: 200, easing: 'ease-in' }
}
};
var delay = browserInfo.chrome ? 0 : 100;
setTimeout(function () {
dlg.open();
}, delay);
paperDialogHelper.open(dlg);
// Has to be assigned a z-index after the call to .open()
dlg.addEventListener('iron-overlay-closed', function () {
@ -151,13 +132,14 @@
var target = parentWithClass(e.target, 'actionSheetMenuItem');
if (target) {
var selectedId = target.getAttribute('data-id');
paperDialogHelper.close(dlg);
// Add a delay here to allow the click animation to finish, for nice effect
setTimeout(function () {
dlg.close();
if (options.callback) {
options.callback(selectedId);
}
@ -167,20 +149,7 @@
});
}
function parentWithClass(elem, className) {
while (!elem.classList || !elem.classList.contains(className)) {
elem = elem.parentNode;
if (!elem) {
return null;
}
}
return elem;
}
window.ActionSheetElement = {
return {
show: show
};
})();
});

View file

@ -1146,9 +1146,9 @@
ironIcon: 'photo'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: elem,
callback: function (id) {

View file

@ -722,9 +722,9 @@
});
}
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: positionTo,
callback: function (id) {
@ -994,9 +994,9 @@
});
}
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: items,
positionTo: positionTo,
callback: function (id) {
@ -2766,9 +2766,9 @@
};
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: button,
callback: function (id) {
@ -2877,11 +2877,13 @@
showSortMenu: function (options) {
require(['paperdialoghelper', 'paper-dialog', 'paper-radio-button', 'paper-radio-group', 'scale-up-animation', 'fade-in-animation', 'fade-out-animation'], function (paperDialogHelper) {
require(['paperdialoghelper', 'paper-radio-button', 'paper-radio-group'], function (paperDialogHelper) {
var dlg = paperDialogHelper.createDialog({
removeOnClose: true,
modal: false
modal: false,
entryAnimationDuration: 160,
exitAnimationDuration: 200
});
dlg.classList.add('ui-body-a');
@ -2889,21 +2891,12 @@
var html = '';
// There seems to be a bug with this in safari causing it to immediately roll up to 0 height
// Have to disable this right now because it's causing the radio buttons to not function properly in other browsers besides chrome
var isScrollable = false;
if (browserInfo.android) {
isScrollable = true;
}
html += '<div style="margin:0;padding:1em 1em .7em;">';
html += '<h2>';
html += '<h2 style="margin:0 0 .5em;">';
html += Globalize.translate('HeaderSortBy');
html += '</h2>';
if (isScrollable) {
html += '<paper-dialog-scrollable>';
}
html += '<paper-radio-group class="groupSortBy" selected="' + (options.query.SortBy || '').replace(',', '_') + '">';
for (var i = 0, length = options.items.length; i < length; i++) {
@ -2913,17 +2906,14 @@
}
html += '</paper-radio-group>';
html += '<p style="margin: 1em 0;padding: 0 0 0 1.5em;">';
html += '<h2 style="margin: 1em 0 .5em;">';
html += Globalize.translate('HeaderSortOrder');
html += '</p>';
html += '</h2>';
html += '<paper-radio-group class="groupSortOrder" selected="' + (options.query.SortOrder || 'Ascending') + '">';
html += '<paper-radio-button name="Ascending" class="menuSortOrder block">' + Globalize.translate('OptionAscending') + '</paper-radio-button>';
html += '<paper-radio-button name="Descending" class="menuSortOrder block">' + Globalize.translate('OptionDescending') + '</paper-radio-button>';
html += '</paper-radio-group>';
if (isScrollable) {
html += '</paper-dialog-scrollable>';
}
html += '</div>';
html += '<div class="buttons">';
html += '<paper-button dialog-dismiss>' + Globalize.translate('ButtonClose') + '</paper-button>';
@ -2933,16 +2923,13 @@
document.body.appendChild(dlg);
var fireCallbackOnClose = false;
var delay = browserInfo.animate ? 0 : 100;
setTimeout(function () {
paperDialogHelper.open(dlg).then(function () {
paperDialogHelper.open(dlg).then(function () {
if (options.callback && fireCallbackOnClose) {
options.callback();
}
});
}, delay);
if (options.callback && fireCallbackOnClose) {
options.callback();
}
});
$('.groupSortBy', dlg).on('iron-select', function () {

View file

@ -450,9 +450,9 @@
}
}
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: items,
positionTo: displayContextItem,
callback: function (id) {
@ -1135,9 +1135,9 @@
ironIcon: 'sync'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: items,
positionTo: e.target,
callback: function (id) {

View file

@ -421,9 +421,9 @@
id: 'other'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: button,
callback: function (id) {
@ -460,9 +460,9 @@
id: 'other'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: button,
callback: function (id) {

View file

@ -93,11 +93,11 @@
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
Dashboard.hideLoadingMsg();
ActionSheetElement.show({
actionsheet.show({
title: Globalize.translate('HeaderSelectPlayer'),
items: menuItems,
positionTo: button,
@ -413,9 +413,9 @@
id: 'cancel'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
//positionTo: positionTo,
title: Globalize.translate('ConfirmEndPlayerSession'),

View file

@ -122,9 +122,9 @@
ironIcon: 'mode-edit'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: elem,
callback: function (resultId) {

View file

@ -121,9 +121,9 @@
return opt;
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: $('.videoSubtitleButton')[0],
callback: function (id) {
@ -140,7 +140,7 @@
self.showQualityFlyout = function () {
require(['qualityoptions', 'actionsheet'], function (qualityoptions) {
require(['qualityoptions', 'actionsheet'], function (qualityoptions, actionsheet) {
var currentSrc = self.getCurrentSrc(self.currentMediaRenderer).toLowerCase();
var isStatic = currentSrc.indexOf('static=true') != -1;
@ -174,7 +174,7 @@
return o.selected;
});
selectedId = selectedId.length ? selectedId[0].bitrate : null;
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: $('.videoQualityButton')[0],
callback: function (id) {
@ -236,9 +236,9 @@
return opt;
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: $('.videoAudioButton')[0],
callback: function (id) {

View file

@ -142,9 +142,9 @@
return menuItem;
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: button,
callback: function (id) {
@ -199,9 +199,9 @@
ironIcon: currentIndex == null ? 'check' : null
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: button,
callback: function (id) {

View file

@ -185,9 +185,9 @@
ironIcon: 'delete'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: elem,
callback: function (resultId) {

View file

@ -188,9 +188,9 @@
ironIcon: 'delete'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: elem,
callback: function (id) {
@ -229,9 +229,9 @@
ironIcon: 'cancel'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: elem,
callback: function (id) {

View file

@ -1873,12 +1873,14 @@ var AppInfo = {};
paths.sharingwidget = "cordova/sharingwidget";
paths.serverdiscovery = "cordova/serverdiscovery";
paths.wakeonlan = "cordova/wakeonlan";
paths.actionsheet = "cordova/actionsheet";
} else {
paths.dialog = "components/dialog";
paths.prompt = "components/prompt";
paths.sharingwidget = "components/sharingwidget";
paths.serverdiscovery = apiClientBowerPath + "/serverdiscovery";
paths.wakeonlan = apiClientBowerPath + "/wakeonlan";
paths.actionsheet = "scripts/actionsheet";
}
// hack for an android test before browserInfo is loaded
@ -2056,12 +2058,6 @@ var AppInfo = {};
});
define("tileitemcss", ['css!css/tileitem.css']);
if (Dashboard.isRunningInCordova()) {
define("actionsheet", ["cordova/actionsheet"]);
} else {
define("actionsheet", ["scripts/actionsheet"]);
}
define("sharingmanager", ["scripts/sharingmanager"]);
if (Dashboard.isRunningInCordova() && browserInfo.safari) {
@ -2519,9 +2515,9 @@ pageClassOn('pageshow', "page", function () {
}
if (currentTheme != 'a' && !browserInfo.mobile) {
document.body.classList.add('darkScrollbars');
document.documentElement.classList.add('darkScrollbars');
} else {
document.body.classList.remove('darkScrollbars');
document.documentElement.classList.remove('darkScrollbars');
}
Dashboard.ensurePageTitle(page);

View file

@ -16,9 +16,9 @@
ironIcon: 'photo-library'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
callback: function (id) {

View file

@ -287,9 +287,9 @@
});
}
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: elem,
callback: function (id) {

View file

@ -179,9 +179,9 @@
});
}
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: elem,
callback: function (id) {

View file

@ -77,9 +77,9 @@
ironIcon: 'delete'
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
items: menuItems,
positionTo: card,
callback: function (id) {

View file

@ -138,9 +138,9 @@
ironIcon: current == 'christmas' ? 'check' : null
});
require(['actionsheet'], function () {
require(['actionsheet'], function (actionsheet) {
ActionSheetElement.show({
actionsheet.show({
title: 'Happy holidays from the Emby team! Select your holiday theme:',
items: items,
callback: function (id) {