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

update action sheet

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

83
dashboard-ui/scripts/actionsheet.js
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
};
})();
});

4
dashboard-ui/scripts/edititemmetadata.js
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) {

53
dashboard-ui/scripts/librarybrowser.js
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 () {

8
dashboard-ui/scripts/librarylist.js
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) {

8
dashboard-ui/scripts/livetvstatus.js
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) {

8
dashboard-ui/scripts/mediacontroller.js
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'),

4
dashboard-ui/scripts/medialibrarypage.js
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) {

12
dashboard-ui/scripts/mediaplayer-video.js
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) {

8
dashboard-ui/scripts/nowplayingpage.js
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) {

4
dashboard-ui/scripts/pluginspage.js
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) {

8
dashboard-ui/scripts/selectserver.js
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) {

12
dashboard-ui/scripts/site.js
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);

4
dashboard-ui/scripts/slideshow.js
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) {

4
dashboard-ui/scripts/syncactivity.js
View file

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

4
dashboard-ui/scripts/syncjob.js
View file

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

4
dashboard-ui/scripts/userprofilespage.js
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) {