mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update shared collection editor
This commit is contained in:
parent
69fad5e57d
commit
dcb6b103ec
10 changed files with 133 additions and 44 deletions
|
@ -16,12 +16,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.3.54",
|
||||
"_release": "1.3.54",
|
||||
"version": "1.3.65",
|
||||
"_release": "1.3.65",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.3.54",
|
||||
"commit": "5b18c68f85be83718bb5c653da5baeed956bb2bb"
|
||||
"tag": "1.3.65",
|
||||
"commit": "8a512f0acee81e973007eb43566b7d3aebb7a613"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.0",
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
define(['dialogHelper', 'loading', 'connectionManager', 'embyRouter', 'globalize', 'paper-checkbox', 'paper-input', 'paper-icon-button-light', 'emby-select'], function (dialogHelper, loading, connectionManager, embyRouter, globalize) {
|
||||
define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'paper-input', 'paper-icon-button-light', 'emby-select', 'html!./../icons/nav.html', 'css!./../formdialog'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
|
||||
|
||||
var currentServerId;
|
||||
|
||||
|
@ -94,11 +94,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
function onDialogClosed() {
|
||||
|
||||
loading.hide();
|
||||
}
|
||||
|
||||
function triggerChange(select) {
|
||||
select.dispatchEvent(new CustomEvent('change', {}));
|
||||
}
|
||||
|
@ -123,7 +118,7 @@
|
|||
|
||||
var html = '';
|
||||
|
||||
html += '<option value="">' + globalize.translate('OptionNewCollection') + '</option>';
|
||||
html += '<option value="">' + globalize.translate('sharedcomponents#NewCollection') + '</option>';
|
||||
|
||||
html += result.Items.map(function (i) {
|
||||
|
||||
|
@ -142,47 +137,58 @@
|
|||
|
||||
var html = '';
|
||||
|
||||
html += '<div class="dialogContent smoothScrollY">';
|
||||
html += '<div class="dialogContentInner centeredContent">';
|
||||
html += '<form class="newCollectionForm" style="margin:auto;">';
|
||||
|
||||
html += '<div>';
|
||||
html += globalize.translate('CreateCollectionHelp');
|
||||
html += globalize.translate('sharedcomponents#NewCollectionHelp');
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="fldSelectCollection">';
|
||||
html += '<br/>';
|
||||
html += '<br/>';
|
||||
html += '<select is="emby-select" label="' + globalize.translate('LabelSelectCollection') + '" id="selectCollectionToAddTo" autofocus></select>';
|
||||
html += '<select is="emby-select" label="' + globalize.translate('sharedcomponents#LabelCollection') + '" id="selectCollectionToAddTo" autofocus></select>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="newCollectionInfo">';
|
||||
|
||||
html += '<div>';
|
||||
html += '<paper-input type="text" id="txtNewCollectionName" required="required" label="' + globalize.translate('LabelName') + '"></paper-input>';
|
||||
html += '<div class="fieldDescription">' + globalize.translate('NewCollectionNameExample') + '</div>';
|
||||
html += '<paper-input type="text" id="txtNewCollectionName" required="required" label="' + globalize.translate('sharedcomponents#LabelName') + '"></paper-input>';
|
||||
html += '<div class="fieldDescription">' + globalize.translate('sharedcomponents#NewCollectionNameExample') + '</div>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<br />';
|
||||
html += '<br />';
|
||||
|
||||
html += '<div>';
|
||||
html += '<paper-checkbox id="chkEnableInternetMetadata">' + globalize.translate('OptionSearchForInternetMetadata') + '</paper-checkbox>';
|
||||
html += '<paper-checkbox id="chkEnableInternetMetadata">' + globalize.translate('sharedcomponents#SearchForCollectionInternetMetadata') + '</paper-checkbox>';
|
||||
html += '</div>';
|
||||
|
||||
// newCollectionInfo
|
||||
html += '</div>';
|
||||
|
||||
html += '<br />';
|
||||
html += '<br />';
|
||||
html += '<div>';
|
||||
html += '<button type="submit" class="clearButton" data-role="none"><paper-button raised class="submit block">' + globalize.translate('ButtonOk') + '</paper-button></button>';
|
||||
html += '<paper-button raised class="btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</paper-button>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<input type="hidden" class="fldSelectedItemIds" />';
|
||||
|
||||
html += '</form>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function onHelpClick(e) {
|
||||
|
||||
shell.openUrl(this.href);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
function initEditor(content, items) {
|
||||
|
||||
content.querySelector('#selectCollectionToAddTo').addEventListener('change', function () {
|
||||
|
@ -195,6 +201,21 @@
|
|||
}
|
||||
});
|
||||
|
||||
content.querySelector('.btnSubmit').addEventListener('submit', function () {
|
||||
// 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 = content.querySelector('form');
|
||||
form.appendChild(fakeSubmit);
|
||||
fakeSubmit.click();
|
||||
|
||||
// Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
|
||||
setTimeout(function () {
|
||||
form.removeChild(fakeSubmit);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
content.querySelector('.newCollectionForm').addEventListener('submit', onSubmit);
|
||||
|
||||
content.querySelector('.fldSelectedItemIds', content).value = items.join(',');
|
||||
|
@ -221,16 +242,23 @@
|
|||
var items = options.items || {};
|
||||
currentServerId = options.serverId;
|
||||
|
||||
var dlg = dialogHelper.createDialog({
|
||||
size: 'small',
|
||||
removeOnClose: true
|
||||
});
|
||||
var dialogOptions = {
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
};
|
||||
|
||||
dlg.classList.add('ui-body-b');
|
||||
dlg.classList.add('background-theme-b');
|
||||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
} else {
|
||||
dialogOptions.size = 'small';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
var html = '';
|
||||
var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('HeaderNewCollection');
|
||||
var title = items.length ? globalize.translate('sharedcomponents#AddToCollection') : globalize.translate('sharedcomponents#NewCollection');
|
||||
|
||||
html += '<div class="dialogHeader" style="margin:0 0 2em;">';
|
||||
html += '<button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="nav:arrow-back"></iron-icon></button>';
|
||||
|
@ -238,7 +266,7 @@
|
|||
html += title;
|
||||
html += '</div>';
|
||||
|
||||
html += '<a href="https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;display:inline-block;padding:.25em;display:flex;align-items:center;" title="' + globalize.translate('ButtonHelp') + '"><iron-icon icon="info"></iron-icon><span style="margin-left:.25em;">' + globalize.translate('ButtonHelp') + '</span></a>';
|
||||
html += '<a class="btnHelp" href="https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;display:inline-block;padding:.25em;display:flex;align-items:center;" title="' + globalize.translate('sharedcomponents#Help') + '"><iron-icon icon="nav:info"></iron-icon><span style="margin-left:.25em;">' + globalize.translate('sharedcomponents#Help') + '</span></a>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
|
@ -249,14 +277,20 @@
|
|||
|
||||
initEditor(dlg, items);
|
||||
|
||||
dlg.addEventListener('close', onDialogClosed);
|
||||
|
||||
dialogHelper.open(dlg);
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
||||
if (layoutManager.tv) {
|
||||
scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false);
|
||||
}
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
dlg.addEventListener('close', resolve);
|
||||
dialogHelper.open(dlg);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -2,6 +2,18 @@
|
|||
|
||||
var globalOnOpenCallback;
|
||||
|
||||
function enableAnimation() {
|
||||
if (browser.animate) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (browser.mobile || browser.tv) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function dialogHashHandler(dlg, hash, resolve) {
|
||||
|
||||
var self = this;
|
||||
|
@ -150,7 +162,7 @@
|
|||
// Without this, seeing some script errors in Firefox
|
||||
// Also for some reason it won't auto-focus without a delay here, still investigating that
|
||||
|
||||
var delay = browser.animate ? 0 : 300;
|
||||
var delay = enableAnimation() ? 300 : 0;
|
||||
|
||||
setTimeout(function () {
|
||||
focusManager.autoFocus(dlg);
|
||||
|
@ -409,7 +421,7 @@
|
|||
};
|
||||
|
||||
// too buggy in IE, not even worth it
|
||||
if (!browser.animate) {
|
||||
if (!enableAnimation()) {
|
||||
dlg.animationConfig = null;
|
||||
dlg.entryAnimation = null;
|
||||
dlg.exitAnimation = null;
|
||||
|
|
|
@ -14,28 +14,31 @@
|
|||
font-size: inherit;
|
||||
/* General select styles: change as needed */
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
padding: .6em .8em .3em 0;
|
||||
cursor: pointer;
|
||||
outline: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selectLabel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.selectLabelFocus {
|
||||
.selectLabelFocused {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
.emby-select-selectionbar {
|
||||
height: 2px;
|
||||
transform: scale(.01);
|
||||
transition: transform .2s ease-out;
|
||||
transform: scale(.01, 1);
|
||||
transition: transform .25s ease-out;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-bottom: .5em;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
[is="emby-select"]:focus + .emby-select-selectionbar {
|
||||
|
|
|
@ -16,14 +16,25 @@
|
|||
return true;
|
||||
}
|
||||
|
||||
function triggerChange(select) {
|
||||
var evt = document.createEvent("HTMLEvents");
|
||||
evt.initEvent("change", false, true);
|
||||
select.dispatchEvent(evt);
|
||||
}
|
||||
|
||||
function showActionSheeet(select) {
|
||||
|
||||
var labelElem = getLabel(select);
|
||||
var title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
|
||||
|
||||
actionsheet.show({
|
||||
items: select.options,
|
||||
positionTo: select
|
||||
positionTo: select,
|
||||
title: title
|
||||
|
||||
}).then(function (value) {
|
||||
select.value = value;
|
||||
triggerChange(select);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -38,20 +49,23 @@
|
|||
function onFocus(e) {
|
||||
var label = getLabel(this);
|
||||
if (label) {
|
||||
label.classList.add('selectLabelFocus');
|
||||
label.classList.add('selectLabelFocused');
|
||||
label.classList.remove('selectLabelUnfocused');
|
||||
}
|
||||
}
|
||||
|
||||
function onBlur(e) {
|
||||
var label = getLabel(this);
|
||||
if (label) {
|
||||
label.classList.remove('selectLabelFocus');
|
||||
label.classList.add('selectLabelUnfocused');
|
||||
label.classList.remove('selectLabelFocused');
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
|
||||
if (!enableNativeMenu()) {
|
||||
// e.button=0 for primary (left) mouse button click
|
||||
if (!e.button && !enableNativeMenu()) {
|
||||
e.preventDefault();
|
||||
showActionSheeet(this);
|
||||
}
|
||||
|
|
|
@ -36,6 +36,7 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
|
|||
<defs>
|
||||
<g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /></g>
|
||||
<g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></g>
|
||||
<g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /></g>
|
||||
</defs>
|
||||
</svg>
|
||||
</iron-iconset-svg>
|
||||
|
|
|
@ -11,6 +11,11 @@ define(['apphost', 'globalize', 'connectionManager'], function (appHost, globali
|
|||
|
||||
var commands = [];
|
||||
|
||||
commands.push({
|
||||
name: globalize.translate('sharedcomponents#AddToCollection'),
|
||||
id: 'addtocollection'
|
||||
});
|
||||
|
||||
if (item.CanDelete) {
|
||||
commands.push({
|
||||
name: globalize.translate('sharedcomponents#Delete'),
|
||||
|
@ -54,6 +59,18 @@ define(['apphost', 'globalize', 'connectionManager'], function (appHost, globali
|
|||
|
||||
switch (id) {
|
||||
|
||||
case 'addtocollection':
|
||||
{
|
||||
require(['collectionEditor'], function (collectionEditor) {
|
||||
|
||||
new collectionEditor().show({
|
||||
items: [itemId],
|
||||
serverId: serverId
|
||||
|
||||
}).then(reject, reject);
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'download':
|
||||
{
|
||||
require(['fileDownloader'], function (fileDownloader) {
|
||||
|
|
|
@ -54,5 +54,13 @@
|
|||
"HeaderDeleteItem": "Delete Item",
|
||||
"ConfirmDeleteItem": "Deleting this item will delete it from both the file system and your media library. Are you sure you wish to continue?",
|
||||
"Refresh": "Refresh",
|
||||
"RefreshQueued": "Refresh queued."
|
||||
"RefreshQueued": "Refresh queued.",
|
||||
"AddToCollection": "Add to Collection",
|
||||
"NewCollection": "New Collection",
|
||||
"LabelCollection": "Collection:",
|
||||
"Help": "Help",
|
||||
"NewCollectionHelp": "Collections allow you to create personalized groupings of movies and other library content.",
|
||||
"SearchForCollectionInternetMetadata": "Search the internet for artwork and metadata",
|
||||
"LabelName": "Name:",
|
||||
"NewCollectionNameExample": "Example: Star Wars Collection"
|
||||
}
|
|
@ -1767,13 +1767,13 @@ var AppInfo = {};
|
|||
|
||||
define("libjass", [bowerPath + "/libjass/libjass", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency);
|
||||
|
||||
define("emby-select", [embyWebComponentsBowerPath + "/emby-select/emby-select"], returnFirstDependency);
|
||||
define("collectionEditor", [embyWebComponentsBowerPath + "/collectioneditor/collectioneditor"], returnFirstDependency);
|
||||
define("recordingCreator", [embyWebComponentsBowerPath + "/recordingcreator/recordingcreator"], returnFirstDependency);
|
||||
define("recordingEditor", [embyWebComponentsBowerPath + "/recordingcreator/recordingeditor"], returnFirstDependency);
|
||||
define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency);
|
||||
define("backdrop", [embyWebComponentsBowerPath + "/backdrop/backdrop"], returnFirstDependency);
|
||||
define("fetchHelper", [embyWebComponentsBowerPath + "/fetchhelper"], returnFirstDependency);
|
||||
define("emby-select", [embyWebComponentsBowerPath + "/emby-select/emby-select"], returnFirstDependency);
|
||||
|
||||
define("tvguide", [embyWebComponentsBowerPath + "/guide/guide", 'embyRouter'], returnFirstDependency);
|
||||
|
||||
|
|
|
@ -436,7 +436,7 @@ paper-input label, paper-textarea label {
|
|||
color: #ccc;
|
||||
}
|
||||
|
||||
.ui-body-b .selectLabel:not(.selectLabelFocus) {
|
||||
.ui-body-b .selectLabelUnfocused {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
|
@ -586,5 +586,5 @@ paper-progress.mini #progressContainer {
|
|||
}
|
||||
|
||||
.formDialog.background-theme-b {
|
||||
background-color: #202020;
|
||||
background-color: #181818;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue