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

switch to shared paperdialoghelper

Browse source
This commit is contained in:
Luke Pulverenti 2016-01-30 15:59:09 -05:00
parent 1cd7f5bac7
commit 024642e556
24 changed files with 152 additions and 296 deletions
Download patch file Download diff file Expand all files Collapse all files

5
dashboard-ui/components/collectioneditor/collectioneditor.js
View file

@ -193,11 +193,14 @@
size: 'small'
});
dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b');
var html = '';
var title = items.length ? Globalize.translate('HeaderAddToCollection') : Globalize.translate('HeaderNewCollection');
html += '<div class="dialogHeader">';
html += '<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>';
html += '<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>';
html += '<div class="dialogHeaderTitle">';
html += title;
html += '</div>';

5
dashboard-ui/components/directorybrowser/directorybrowser.js
View file

@ -208,10 +208,13 @@
getSystemInfo().then(function (systemInfo) {
var dlg = paperDialogHelper.createDialog({
theme: 'a',
size: 'medium'
});
dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a');
dlg.classList.add('popupEditor');
dlg.classList.add('directoryPicker');
var html = '';

12
dashboard-ui/components/imagedownloader/imagedownloader.js
View file

@ -271,11 +271,19 @@
currentItemId = itemId;
currentItemType = itemType;
var dlg = paperDialogHelper.createDialog();
var dlg = paperDialogHelper.createDialog({
size: 'fullscreen-border'
});
var theme = 'b';
dlg.classList.add('ui-body-' + theme);
dlg.classList.add('background-theme-' + theme);
dlg.classList.add('popupEditor');
var html = '';
html += '<h2 class="dialogHeader">';
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderSearch') + '</div>';
html += '</h2>';

10
dashboard-ui/components/imageeditor/imageeditor.js
View file

@ -242,12 +242,18 @@
ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).then(function (item) {
var dlg = paperDialogHelper.createDialog({
theme: options.theme
size: 'fullscreen-border'
});
var theme = options.theme || 'b';
dlg.classList.add('ui-body-' + theme);
dlg.classList.add('background-theme-' + theme);
dlg.classList.add('popupEditor');
var html = '';
html += '<h2 class="dialogHeader">';
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + item.Name + '</div>';
html += '</h2>';

10
dashboard-ui/components/imageuploader/imageuploader.js
View file

@ -134,12 +134,18 @@
currentItemId = itemId;
var dlg = paperDialogHelper.createDialog({
theme: options.theme
size: 'fullscreen-border'
});
var theme = options.theme || 'b';
dlg.classList.add('ui-body-' + theme);
dlg.classList.add('background-theme-' + theme);
dlg.classList.add('popupEditor');
var html = '';
html += '<h2 class="dialogHeader">';
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderUploadImage') + '</div>';
html += '</h2>';

3
dashboard-ui/components/itemidentifier/itemidentifier.js
View file

@ -295,6 +295,9 @@
size: 'medium'
});
dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b');
var html = '';
html += Globalize.translateDocument(template);

2
dashboard-ui/components/itemidentifier/itemidentifier.template.html
View file

@ -1,5 +1,5 @@
<div class="dialogHeader">
<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>
<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>
<div class="dialogHeaderTitle">
</div>
</div>

7
dashboard-ui/components/medialibrarycreator/medialibrarycreator.js
View file

@ -194,15 +194,18 @@
var template = this.response;
var dlg = paperDialogHelper.createDialog({
size: 'small',
theme: 'a',
// In (at least) chrome this is causing the text field to not be editable
modal: false
});
dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a');
dlg.classList.add('popupEditor');
var html = '';
html += '<h2 class="dialogHeader">';
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
var title = Globalize.translate('ButtonAddMediaLibrary');

7
dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
View file

@ -148,15 +148,18 @@
var template = this.response;
var dlg = paperDialogHelper.createDialog({
size: 'small',
theme: 'a',
// In (at least) chrome this is causing the text field to not be editable
modal: false
});
dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a');
dlg.classList.add('popupEditor');
var html = '';
html += '<h2 class="dialogHeader">';
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + options.library.Name + '</div>';
html += '</h2>';

3
dashboard-ui/components/metadataeditor/metadataeditor.js
View file

@ -868,6 +868,9 @@
size: 'small'
});
dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b');
dlg.classList.add('formDialog');
var html = '';

207
dashboard-ui/components/paperdialoghelper.js
View file

@ -1,207 +0,0 @@
define(['paper-dialog', 'scale-up-animation', 'fade-out-animation', 'fade-in-animation'], function () {
function paperDialogHashHandler(dlg, hash, resolve, lockDocumentScroll) {
var self = this;
self.originalUrl = window.location.href;
var activeElement = document.activeElement;
function onHashChange(e) {
var isBack = self.originalUrl == window.location.href;
if (isBack || !dlg.opened) {
window.removeEventListener('popstate', onHashChange);
}
if (isBack) {
self.closedByBack = true;
dlg.close();
}
}
function onDialogClosed() {
if (lockDocumentScroll !== false) {
Dashboard.onPopupClose();
}
window.removeEventListener('popstate', onHashChange);
if (!self.closedByBack) {
var state = history.state || {};
if (state.dialogId == hash) {
history.back();
}
}
activeElement.focus();
if (dlg.getAttribute('data-removeonclose') == 'true') {
dlg.parentNode.removeChild(dlg);
}
//resolve();
// if we just called history.back(), then use a timeout to allow the history events to fire first
setTimeout(function () {
resolve({
element: dlg,
closedByBack: self.closedByBack
});
}, 1);
}
dlg.addEventListener('iron-overlay-closed', onDialogClosed);
dlg.open();
if (lockDocumentScroll !== false) {
Dashboard.onPopupOpen();
}
var state = {
dialogId: hash,
navigate: false
};
history.pushState(state, "Dialog", hash);
jQuery.onStatePushed(state);
window.addEventListener('popstate', onHashChange);
}
function open(dlg) {
return new Promise(function (resolve, reject) {
new paperDialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve);
});
}
function close(dlg) {
if (dlg.opened) {
history.back();
}
}
function onDialogOpened(e) {
//Emby.FocusManager.autoFocus(e.target, true);
}
function createDialog(options) {
options = options || {};
var dlg = document.createElement('paper-dialog');
dlg.setAttribute('with-backdrop', 'with-backdrop');
dlg.setAttribute('role', 'alertdialog');
// 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
// Also have to disable for firefox because it's causing select elements to not be clickable
if (!browserInfo.msie && !browserInfo.firefox) {
if (options.modal !== false) {
//dlg.setAttribute('modal', 'modal');
}
}
// seeing max call stack size exceeded in the debugger with this
dlg.setAttribute('noAutoFocus', 'noAutoFocus');
// These don't seem to perform well on mobile
var defaultEntryAnimation = browserInfo.mobile ? 'fade-in-animation' : 'scale-up-animation';
dlg.entryAnimation = options.entryAnimation || defaultEntryAnimation;
dlg.exitAnimation = 'fade-out-animation';
dlg.animationConfig = {
// scale up
'entry': {
name: options.entryAnimation || defaultEntryAnimation,
node: dlg,
timing: { duration: options.entryAnimationDuration || 300, easing: 'ease-out' }
},
// fade out
'exit': {
name: 'fade-out-animation',
node: dlg,
timing: { duration: options.exitAnimationDuration || 400, easing: 'ease-in' }
}
};
if (options.size != 'auto') {
dlg.classList.add('popupEditor');
if (options.size == 'small') {
dlg.classList.add('small-paper-dialog');
}
else if (options.size == 'medium') {
dlg.classList.add('medium-paper-dialog');
} else {
dlg.classList.add('fullscreen-paper-dialog');
}
}
var theme = options.theme || 'b';
dlg.classList.add('ui-body-' + theme);
dlg.classList.add('background-theme-' + theme);
dlg.classList.add('smoothScrollY');
if (options.removeOnClose) {
dlg.setAttribute('data-removeonclose', 'true');
}
return dlg;
}
function positionTo(dlg, elem) {
var windowHeight = $(window).height();
// If the window height is under a certain amount, don't bother trying to position
// based on an element.
if (windowHeight >= 540) {
var pos = $(elem).offset();
pos.top += elem.offsetHeight / 2;
pos.left += elem.offsetWidth / 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 -= $(dlg).height() / 2;
pos.left -= $(dlg).width() / 2;
// 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);
dlg.style.position = 'fixed';
dlg.style.left = pos.left + 'px';
dlg.style.top = pos.top + 'px';
}
}
window.PaperDialogHelper = {
open: open,
close: close,
createDialog: createDialog,
positionTo: positionTo
};
return PaperDialogHelper;
});

5
dashboard-ui/components/playlisteditor/playlisteditor.js
View file

@ -198,12 +198,15 @@
size: 'small'
});
dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b');
var html = '';
var title = Globalize.translate('HeaderAddToPlaylist');
html += '<div class="dialogHeader">';
html += '<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>';
html += '<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>';
html += '<div class="dialogHeaderTitle">';
html += title;
html += '</div>';

3
dashboard-ui/components/recordingcreator/recordingcreator.js
View file

@ -296,6 +296,9 @@
size: 'small'
});
dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b');
dlg.classList.add('formDialog');
var html = '';

2
dashboard-ui/components/recordingcreator/recordingcreator.template.html
View file

@ -1,5 +1,5 @@
<div class="dialogHeader">
<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>
<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>
<div class="dialogHeaderTitle">
${HeaderNewRecording}
</div>

5
dashboard-ui/components/subtitleeditor/subtitleeditor.js
View file

@ -344,9 +344,12 @@
removeOnClose: true
});
dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b');
var html = '';
html += '<div class="dialogHeader">';
html += '<paper-icon-button icon="arrow-back" class="btnCancel"></paper-icon-button>';
html += '<paper-icon-button icon="arrow-back" class="btnCancel" tabindex="-1"></paper-icon-button>';
html += '<div class="dialogHeaderTitle">';
html += item.Name;
html += '</div>';