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

move emby-webcomponents to components and reflect paths

This commit is contained in:
vitorsemeano 2019-02-23 18:05:42 +00:00
parent e91cbf8438
commit 6ddc62857d
275 changed files with 20 additions and 20 deletions

View file

@ -0,0 +1,188 @@
define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', 'layoutManager', 'globalize', 'require', 'emby-button', 'emby-select', 'formDialogStyle', 'css!./style'], function (dialogHelper, connectionManager, dom, loading, scrollHelper, layoutManager, globalize, require) {
'use strict';
var currentItemId;
var currentServerId;
var currentFile;
var hasChanges = false;
function onFileReaderError(evt) {
loading.hide();
switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
require(['toast'], function (toast) {
toast(globalize.translate('MessageFileReadError'));
});
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
require(['toast'], function (toast) {
toast(globalize.translate('MessageFileReadError'));
});
break;
}
}
function setFiles(page, files) {
var file = files[0];
if (!file || !file.type.match('image.*')) {
page.querySelector('#imageOutput').innerHTML = '';
page.querySelector('#fldUpload').classList.add('hide');
currentFile = null;
return;
}
currentFile = file;
var reader = new FileReader();
reader.onerror = onFileReaderError;
reader.onloadstart = function () {
page.querySelector('#fldUpload').classList.add('hide');
};
reader.onabort = function () {
loading.hide();
console.log('File read cancelled');
};
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
var html = ['<img style="max-width:100%;max-height:100%;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
page.querySelector('#imageOutput').innerHTML = html;
page.querySelector('#fldUpload').classList.remove('hide');
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
function onSubmit(e) {
var file = currentFile;
if (!file) {
return false;
}
if (file.type !== "image/png" && file.type !== "image/x-png" && file.type !== "image/jpeg") {
require(['toast'], function (toast) {
toast(globalize.translate('MessageImageFileTypeAllowed'));
});
e.preventDefault();
return false;
}
loading.show();
var dlg = dom.parentWithClass(this, 'dialog');
var imageType = dlg.querySelector('#selectImageType').value;
if (imageType === "None") {
require(["toast"], function(toast) {
toast(globalize.translate("MessageImageTypeNotSelected"));
});
e.preventDefault();
return false;
}
connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(function () {
dlg.querySelector('#uploadImage').value = '';
loading.hide();
hasChanges = true;
dialogHelper.close(dlg);
});
e.preventDefault();
return false;
}
function initEditor(page) {
page.querySelector('form').addEventListener('submit', onSubmit);
page.querySelector('#uploadImage').addEventListener("change", function () {
setFiles(page, this.files);
});
page.querySelector('.btnBrowse').addEventListener("click", function () {
page.querySelector('#uploadImage').click();
});
}
function showEditor(options, resolve, reject) {
options = options || {};
require(['text!./imageuploader.template.html'], function (template) {
currentItemId = options.itemId;
currentServerId = options.serverId;
var dialogOptions = {
removeOnClose: true
};
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'fullscreen-border';
}
var dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
dlg.innerHTML = globalize.translateDocument(template, 'core');
if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg, false);
}
// Has to be assigned a z-index after the call to .open()
dlg.addEventListener('close', function () {
if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg, false);
}
loading.hide();
resolve(hasChanges);
});
dialogHelper.open(dlg);
initEditor(dlg);
dlg.querySelector('#selectImageType').value = options.imageType || 'Primary';
dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg);
});
});
}
return {
show: function (options) {
return new Promise(function (resolve, reject) {
hasChanges = false;
showEditor(options, resolve, reject);
});
}
};
});

View file

@ -0,0 +1,56 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<h3 class="formDialogHeaderTitle">
${HeaderUploadImage}
</h3>
</div>
<div class="formDialogContent">
<div class="dialogContentInner">
<form class="uploadItemImageForm" style="max-width: 100%;">
<div class="flex align-items-center" style="margin:1.5em 0;">
<h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
<button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
<i class="md-icon">&#xE2C7;</i>
<span>${Browse}</span>
</button>
</div>
<div>
<div class="imageEditor-dropZone fieldDescription">
<div>${LabelDropImageHere}</div>
<output id="imageOutput" class="flex align-items-center justify-content-center" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;"></output>
<input type="file" accept="image/png,image/x-png,image/jpeg" id="uploadImage" name="uploadImage" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;opacity:0;" />
</div>
<div id="fldUpload" class="hide">
<br />
<div class="selectContainer">
<select is="emby-select" id="selectImageType" name="selectImageType" label="${LabelImageType}">
<option value="None"></option>
<option value="Primary">${Primary}</option>
<option value="Art">${Art}</option>
<option value="Backdrop">${Backdrop}</option>
<option value="Banner">${Banner}</option>
<option value="Box">${Box}</option>
<option value="BoxRear">${BoxRear}</option>
<option value="Disc">${Disc}</option>
<option value="Logo">${Logo}</option>
<option value="Menu">${Menu}</option>
<option value="Screenshot">${Screenshot}</option>
<option value="Thumb">${Thumb}</option>
</select>
</div>
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${Upload}</span>
</button>
</div>
</div>
</form>
</div>
</div>

View file

@ -0,0 +1,11 @@
.imageEditor-dropZone {
border: .2em dashed currentcolor;
border-radius: .25em;
/* padding: 1.6em; */
text-align: center;
position: relative;
height: 12em;
display: flex;
align-items: center;
justify-content: center;
}