mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update prompt dialog
This commit is contained in:
parent
1bc42f10d6
commit
719ed8d8bd
60 changed files with 285 additions and 206 deletions
|
@ -1,89 +1,59 @@
|
|||
define(['dialogHelper', 'layoutManager', 'globalize', 'material-icons', 'css!./style.css', 'emby-button', 'paper-icon-button-light', 'emby-input'], function (dialogHelper, layoutManager, globalize) {
|
||||
define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'emby-input', 'formDialogStyle'], function (dialogHelper, layoutManager, scrollHelper, globalize, require) {
|
||||
|
||||
function getIcon(icon, cssClass, canFocus, autoFocus) {
|
||||
|
||||
var tabIndex = canFocus ? '' : ' tabindex="-1"';
|
||||
autoFocus = autoFocus ? ' autofocus' : '';
|
||||
return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="md-icon promptExitIcon">' + icon + '</i></button>';
|
||||
function setInputProperties(dlg, options) {
|
||||
var txtInput = dlg.querySelector('#txtInput');
|
||||
txtInput.value = options.value || '';
|
||||
txtInput.label(options.label || '');
|
||||
}
|
||||
|
||||
return function (options) {
|
||||
|
||||
if (typeof options === 'string') {
|
||||
options = {
|
||||
title: '',
|
||||
text: options
|
||||
};
|
||||
}
|
||||
function showPrompt(options, template) {
|
||||
|
||||
var dialogOptions = {
|
||||
removeOnClose: true
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
};
|
||||
|
||||
var backButton = false;
|
||||
var raisedButtons = false;
|
||||
|
||||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
backButton = true;
|
||||
raisedButtons = true;
|
||||
} else {
|
||||
|
||||
dialogOptions.modal = false;
|
||||
dialogOptions.entryAnimationDuration = 160;
|
||||
dialogOptions.exitAnimationDuration = 200;
|
||||
dialogOptions.size = 'mini';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('promptDialog');
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
var html = '';
|
||||
var submitValue = '';
|
||||
dlg.innerHTML = globalize.translateHtml(template, 'sharedcomponents');
|
||||
|
||||
html += '<div class="promptDialogContent">';
|
||||
if (backButton) {
|
||||
html += getIcon('', 'btnPromptExit', false);
|
||||
if (layoutManager.tv) {
|
||||
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
|
||||
}
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
||||
if (options.title) {
|
||||
html += '<h2>';
|
||||
html += options.title;
|
||||
html += '</h2>';
|
||||
dlg.querySelector('.dialogContentTitle').innerHTML = options.title;
|
||||
} else {
|
||||
dlg.querySelector('.dialogContentTitle').classList.add('hide');
|
||||
}
|
||||
|
||||
html += '<form>';
|
||||
|
||||
html += '<div class="inputContainer" style="margin-bottom:0;">';
|
||||
html += '<input is="emby-input" type="text" autoFocus class="txtPromptValue" value="' + (options.value || '') + '" label="' + (options.label || '') + '"/>';
|
||||
|
||||
if (options.description) {
|
||||
html += '<div class="fieldDescription">';
|
||||
html += options.description;
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
html += '<br/>';
|
||||
if (raisedButtons) {
|
||||
html += '<button is="emby-button" type="submit" class="raised btnSubmit"><i class="md-icon">check</i><span>' + globalize.translate('sharedcomponents#ButtonOk') + '</span></button>';
|
||||
dlg.querySelector('.fieldDescription').innerHTML = options.description;
|
||||
} else {
|
||||
html += '<div class="buttons">';
|
||||
html += '<button is="emby-button" type="submit" class="btnSubmit">' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
|
||||
html += '<button is="emby-button" type="button" class="btnPromptExit">' + globalize.translate('sharedcomponents#ButtonCancel') + '</button>';
|
||||
html += '</div>';
|
||||
dlg.querySelector('.fieldDescription').classList.add('hide');
|
||||
}
|
||||
html += '</form>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
dlg.innerHTML = html;
|
||||
setInputProperties(dlg, options);
|
||||
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
var submitValue;
|
||||
|
||||
dlg.querySelector('form').addEventListener('submit', function (e) {
|
||||
|
||||
submitValue = dlg.querySelector('.txtPromptValue').value;
|
||||
submitValue = dlg.querySelector('#txtInput').value;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
|
@ -95,11 +65,6 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'material-icons', 'css!./s
|
|||
return false;
|
||||
});
|
||||
|
||||
dlg.querySelector('.btnPromptExit').addEventListener('click', function (e) {
|
||||
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
||||
return dialogHelper.open(dlg).then(function () {
|
||||
var value = submitValue;
|
||||
|
||||
|
@ -109,5 +74,21 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'material-icons', 'css!./s
|
|||
return Promise.reject();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return function (options) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
require(['text!./prompt.template.html'], function (template) {
|
||||
|
||||
if (typeof options === 'string') {
|
||||
options = {
|
||||
title: '',
|
||||
text: options
|
||||
};
|
||||
}
|
||||
showPrompt(options, template).then(resolve, reject);
|
||||
});
|
||||
});
|
||||
};
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue