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 image upload forms

Browse source
This commit is contained in:
Luke Pulverenti 2017-09-19 16:07:18 -04:00
parent 30e4949236
commit 6ac1a382f3
7 changed files with 65 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard-ui/bower_components/emby-webcomponents/pagejs/page.js vendored
View file

File diff suppressed because one or more lines are too long

2
dashboard-ui/bower_components/emby-webcomponents/router.js vendored
View file

File diff suppressed because one or more lines are too long

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

@ -1 +1 @@
define(["dialogHelper","jQuery","loading","emby-button","emby-select"],function(dialogHelper,$,loading){"use strict";function onFileReaderError(evt){switch(loading.hide(),evt.target.error.code){case evt.target.error.NOT_FOUND_ERR:require(["toast"],function(toast){toast(Globalize.translate("MessageFileNotFound"))});break;case evt.target.error.ABORT_ERR:break;default:require(["toast"],function(toast){toast(Globalize.translate("MessageFileReadError"))})}}function setFiles(page,files){var file=files[0];if(!file||!file.type.match("image.*"))return $("#imageOutput",page).html(""),$("#fldUpload",page).hide(),void(currentFile=null);currentFile=file;var reader=new FileReader;reader.onerror=onFileReaderError,reader.onloadstart=function(){$("#fldUpload",page).hide()},reader.onabort=function(){loading.hide(),console.log("File read cancelled")},reader.onload=function(theFile){return function(e){var html=['<img style="max-width:300px;max-height:100px;" src="',e.target.result,'" title="',escape(theFile.name),'"/>'].join("");$("#imageOutput",page).html(html),$("#fldUpload",page).show()}}(file),reader.readAsDataURL(file)}function processImageChangeResult(page){hasChanges=!0,history.back()}function onSubmit(){var file=currentFile;if(!file)return!1;if("image/png"!==file.type&&"image/jpeg"!==file.type&&"image/jpeg"!==file.type)return!1;loading.show();var page=$(this).parents(".dialog"),imageType=$("#selectImageType",page).val();return ApiClient.uploadItemImage(currentItemId,imageType,file).then(function(){$("#uploadImage",page).val("").trigger("change"),loading.hide(),processImageChangeResult(page)}),!1}function initEditor(page){$("form",page).off("submit",onSubmit).on("submit",onSubmit),$("#uploadImage",page).on("change",function(){setFiles(page,this.files)}),$("#imageDropZone",page).on("dragover",function(e){return e.preventDefault(),e.originalEvent.dataTransfer.dropEffect="Copy",!1}).on("drop",function(e){return e.preventDefault(),setFiles(page,e.originalEvent.dataTransfer.files),!1})}function showEditor(itemId,options){options=options||{};var xhr=new XMLHttpRequest;xhr.open("GET","components/imageuploader/imageuploader.template.html",!0),xhr.onload=function(e){var template=this.response;currentItemId=itemId;var dlg=dialogHelper.createDialog({size:"fullscreen-border"}),theme=options.theme||"b";dlg.classList.add("ui-body-"+theme),dlg.classList.add("background-theme-"+theme);var html="";html+='<h2 class="dialogHeader">',html+='<button type="button" is="emby-button" icon="arrow-back" class="fab mini btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>',html+='<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">'+Globalize.translate("HeaderUploadImage")+"</div>",html+="</h2>",html+='<div class="editorContent" style="padding:0 1em;">',html+=Globalize.translateDocument(template),html+="</div>",dlg.innerHTML=html,$(dlg).on("close",onDialogClosed),dialogHelper.open(dlg);var editorContent=dlg.querySelector(".editorContent");initEditor(editorContent),$("#selectImageType",dlg).val(options.imageType||"Primary"),$(".btnCloseDialog",dlg).on("click",function(){dialogHelper.close(dlg)})},xhr.send()}function onDialogClosed(){$(this).remove(),loading.hide(),currentDeferred.resolveWith(null,[hasChanges])}var currentItemId,currentFile,currentDeferred,hasChanges=!1;return{show:function(itemId,options){var deferred=jQuery.Deferred();return currentDeferred=deferred,hasChanges=!1,showEditor(itemId,options),deferred.promise()}}});
define(["dialogHelper","dom","loading","scrollHelper","layoutManager","globalize","require","emby-button","emby-select","formDialogStyle"],function(dialogHelper,dom,loading,scrollHelper,layoutManager,globalize,require){"use strict";function onFileReaderError(evt){switch(loading.hide(),evt.target.error.code){case evt.target.error.NOT_FOUND_ERR:require(["toast"],function(toast){toast(globalize.translate("MessageFileNotFound"))});break;case evt.target.error.ABORT_ERR:break;default:require(["toast"],function(toast){toast(globalize.translate("MessageFileReadError"))})}}function setFiles(page,files){var file=files[0];if(!file||!file.type.match("image.*"))return page.querySelector("#imageOutput").innerHTML="",page.querySelector("#fldUpload").classList.add("hide"),void(currentFile=null);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")},reader.onload=function(theFile){return function(e){var html=['<img style="max-width:300px;max-height:100px;" src="',e.target.result,'" title="',escape(theFile.name),'"/>'].join("");page.querySelector("#imageOutput").innerHTML=html,page.querySelector("#fldUpload").classList.remove("hide")}}(file),reader.readAsDataURL(file)}function onSubmit(e){var file=currentFile;if(!file)return!1;if("image/png"!==file.type&&"image/jpeg"!==file.type&&"image/jpeg"!==file.type)return!1;loading.show();var dlg=dom.parentWithClass(this,"dialog"),imageType=dlg.querySelector("#selectImageType").value;return ApiClient.uploadItemImage(currentItemId,imageType,file).then(function(){dlg.querySelector("#uploadImage").value="",loading.hide(),hasChanges=!0,dialogHelper.close(dlg)}),e.preventDefault(),!1}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(itemId,options,resolve,reject){options=options||{},require(["text!./imageuploader.template.html"],function(template){currentItemId=itemId;var dialogOptions={removeOnClose:!0};layoutManager.tv?dialogOptions.size="fullscreen":dialogOptions.size="fullscreen-border";var dlg=dialogHelper.createDialog(dialogOptions);dlg.classList.add("formDialog"),dlg.innerHTML=globalize.translateDocument(template),layoutManager.tv&&scrollHelper.centerFocus.on(dlg,!1),dlg.addEventListener("close",function(){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)})})}var currentItemId,currentFile,hasChanges=!1;return{show:function(itemId,options){return new Promise(function(resolve,reject){hasChanges=!1,showEditor(itemId,options,resolve,reject)})}}});

31
dashboard-ui/components/imageuploader/imageuploader.template.html
View file

@ -1,12 +1,29 @@
<form class="uploadItemImageForm" style="max-width: 100%;">
<h2>${HeaderAddUpdateImage}</h2>
<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;border-radius:500px;">
<span>${Browse}</span>
</button>
</div>
<div>
<div id="userImageDropZone" class="imageDropZone 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/*" id="uploadImage" name="uploadImage" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;opacity:0;" />
</div>
<div id="fldUpload" style="display: none;">
<div id="fldUpload" class="hide">
<br />
<div class="selectContainer">
<select is="emby-select" id="selectImageType" name="selectImageType" label="${LabelImageType}">
@ -28,4 +45,10 @@
</button>
</div>
</div>
</form>
</form>
</div>
</div>

8
dashboard-ui/myprofile.html
View file

@ -22,7 +22,13 @@
<form class="newImageForm userProfileSettingsForm hide" style="margin: 1em auto 0;">
<h1>${HeaderUploadNewImage}</h1>
<div class="flex align-items-center" style="margin:1.5em 0;">
<h1 style="margin:0;">${HeaderUploadNewImage}</h1>
<button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;border-radius:500px;">
<span>${Browse}</span>
</button>
</div>
<div id="fldNewImage">

2
dashboard-ui/scripts/myprofile.js
View file

@ -1 +1 @@
define(["scripts/userpasswordpage","loading","libraryMenu","apphost","emby-linkbutton"],function(Userpasswordpage,loading,libraryMenu,appHost){"use strict";function reloadUser(page){var userId=getParameterByName("userId");loading.show(),ApiClient.getUser(userId).then(function(user){page.querySelector(".username").innerHTML=user.Name;var uploadUserImage=page.querySelector("#uploadUserImage");uploadUserImage.value="",uploadUserImage.dispatchEvent(new CustomEvent("change",{})),libraryMenu.setTitle(user.Name);var imageUrl,fldImage=page.querySelector("#fldImage");imageUrl=user.PrimaryImageTag?ApiClient.getUserImageUrl(user.Id,{height:200,tag:user.PrimaryImageTag,type:"Primary"}):"css/images/logindefault.png",fldImage.classList.remove("hide"),fldImage.innerHTML="<img width='140px' src='"+imageUrl+"' />";var showImageEditing=!1;"Guest"==user.ConnectLinkType?page.querySelector(".connectMessage").classList.remove("hide"):user.PrimaryImageTag?(showImageEditing=!0,page.querySelector(".connectMessage").classList.add("hide")):(showImageEditing=!0,page.querySelector(".connectMessage").classList.add("hide")),Dashboard.getCurrentUser().then(function(loggedInUser){showImageEditing&&appHost.supports("fileinput")&&(loggedInUser.Policy.IsAdministrator||user.Policy.EnableUserPreferenceAccess)?(page.querySelector(".newImageForm").classList.remove("hide"),user.PrimaryImageTag?page.querySelector("#btnDeleteImage").classList.remove("hide"):page.querySelector("#btnDeleteImage").classList.add("hide")):(page.querySelector(".newImageForm").classList.add("hide"),page.querySelector("#btnDeleteImage").classList.add("hide"))}),loading.hide()})}function onFileReaderError(evt){switch(loading.hide(),evt.target.error.code){case evt.target.error.NOT_FOUND_ERR:require(["toast"],function(toast){toast(Globalize.translate("FileNotFound"))});break;case evt.target.error.NOT_READABLE_ERR:require(["toast"],function(toast){toast(Globalize.translate("FileReadError"))});break;case evt.target.error.ABORT_ERR:break;default:require(["toast"],function(toast){toast(Globalize.translate("FileReadError"))})}}function onFileReaderAbort(evt){loading.hide(),require(["toast"],function(toast){toast(Globalize.translate("FileReadCancelled"))})}function setFiles(page,files){var file=files[0];if(!file||!file.type.match("image.*"))return page.querySelector("#userImageOutput").innerHTML="",page.querySelector("#fldUpload").classList.add("hide"),void(currentFile=null);currentFile=file;var reader=new FileReader;reader.onerror=onFileReaderError,reader.onloadstart=function(){page.querySelector("#fldUpload").classList.add("hide")},reader.onabort=onFileReaderAbort,reader.onload=function(e){var html=['<img style="max-width:100%;max-height:100%;" src="',e.target.result,'" title="',escape(file.name),'"/>'].join("");page.querySelector("#userImageOutput").innerHTML=html,page.querySelector("#fldUpload").classList.remove("hide")},reader.readAsDataURL(file)}function onImageDragOver(e){return e.preventDefault(),e.originalEvent.dataTransfer.dropEffect="Copy",!1}var currentFile;return function(view,params){reloadUser(view);var userImageDropZone=(new Userpasswordpage(view,params),view.querySelector("#userImageDropZone"));userImageDropZone.addEventListener("dragOver",onImageDragOver),view.querySelector("#btnDeleteImage").addEventListener("click",function(){require(["confirm"],function(confirm){confirm(Globalize.translate("DeleteImageConfirmation"),Globalize.translate("DeleteImage")).then(function(){loading.show();var userId=getParameterByName("userId");ApiClient.deleteUserImage(userId,"primary").then(function(){loading.hide(),reloadUser(view)})})})}),view.querySelector(".newImageForm").addEventListener("submit",function(e){var file=currentFile;if(!file)return!1;if("image/png"!=file.type&&"image/jpeg"!=file.type&&"image/jpeg"!=file.type)return!1;loading.show();var userId=getParameterByName("userId");return ApiClient.uploadUserImage(userId,"Primary",file).then(function(){loading.hide(),reloadUser(view)}),e.preventDefault(),!1}),view.querySelector("#uploadUserImage").addEventListener("change",function(e){setFiles(view,e.target.files)})}});
define(["scripts/userpasswordpage","loading","libraryMenu","apphost","emby-linkbutton"],function(Userpasswordpage,loading,libraryMenu,appHost){"use strict";function reloadUser(page){var userId=getParameterByName("userId");loading.show(),ApiClient.getUser(userId).then(function(user){page.querySelector(".username").innerHTML=user.Name;var uploadUserImage=page.querySelector("#uploadUserImage");uploadUserImage.value="",uploadUserImage.dispatchEvent(new CustomEvent("change",{})),libraryMenu.setTitle(user.Name);var imageUrl,fldImage=page.querySelector("#fldImage");imageUrl=user.PrimaryImageTag?ApiClient.getUserImageUrl(user.Id,{height:200,tag:user.PrimaryImageTag,type:"Primary"}):"css/images/logindefault.png",fldImage.classList.remove("hide"),fldImage.innerHTML="<img width='140px' src='"+imageUrl+"' />";var showImageEditing=!1;"Guest"==user.ConnectLinkType?page.querySelector(".connectMessage").classList.remove("hide"):user.PrimaryImageTag?(showImageEditing=!0,page.querySelector(".connectMessage").classList.add("hide")):(showImageEditing=!0,page.querySelector(".connectMessage").classList.add("hide")),Dashboard.getCurrentUser().then(function(loggedInUser){showImageEditing&&appHost.supports("fileinput")&&(loggedInUser.Policy.IsAdministrator||user.Policy.EnableUserPreferenceAccess)?(page.querySelector(".newImageForm").classList.remove("hide"),user.PrimaryImageTag?page.querySelector("#btnDeleteImage").classList.remove("hide"):page.querySelector("#btnDeleteImage").classList.add("hide")):(page.querySelector(".newImageForm").classList.add("hide"),page.querySelector("#btnDeleteImage").classList.add("hide"))}),loading.hide()})}function onFileReaderError(evt){switch(loading.hide(),evt.target.error.code){case evt.target.error.NOT_FOUND_ERR:require(["toast"],function(toast){toast(Globalize.translate("FileNotFound"))});break;case evt.target.error.NOT_READABLE_ERR:require(["toast"],function(toast){toast(Globalize.translate("FileReadError"))});break;case evt.target.error.ABORT_ERR:break;default:require(["toast"],function(toast){toast(Globalize.translate("FileReadError"))})}}function onFileReaderAbort(evt){loading.hide(),require(["toast"],function(toast){toast(Globalize.translate("FileReadCancelled"))})}function setFiles(page,files){var file=files[0];if(!file||!file.type.match("image.*"))return page.querySelector("#userImageOutput").innerHTML="",page.querySelector("#fldUpload").classList.add("hide"),void(currentFile=null);currentFile=file;var reader=new FileReader;reader.onerror=onFileReaderError,reader.onloadstart=function(){page.querySelector("#fldUpload").classList.add("hide")},reader.onabort=onFileReaderAbort,reader.onload=function(e){var html=['<img style="max-width:100%;max-height:100%;" src="',e.target.result,'" title="',escape(file.name),'"/>'].join("");page.querySelector("#userImageOutput").innerHTML=html,page.querySelector("#fldUpload").classList.remove("hide")},reader.readAsDataURL(file)}function onImageDragOver(e){return e.preventDefault(),e.originalEvent.dataTransfer.dropEffect="Copy",!1}var currentFile;return function(view,params){reloadUser(view);var userImageDropZone=(new Userpasswordpage(view,params),view.querySelector("#userImageDropZone"));userImageDropZone.addEventListener("dragOver",onImageDragOver),view.querySelector("#btnDeleteImage").addEventListener("click",function(){require(["confirm"],function(confirm){confirm(Globalize.translate("DeleteImageConfirmation"),Globalize.translate("DeleteImage")).then(function(){loading.show();var userId=getParameterByName("userId");ApiClient.deleteUserImage(userId,"primary").then(function(){loading.hide(),reloadUser(view)})})})}),view.querySelector(".btnBrowse").addEventListener("click",function(){view.querySelector("#uploadUserImage").click()}),view.querySelector(".newImageForm").addEventListener("submit",function(e){var file=currentFile;if(!file)return!1;if("image/png"!=file.type&&"image/jpeg"!=file.type&&"image/jpeg"!=file.type)return!1;loading.show();var userId=getParameterByName("userId");return ApiClient.uploadUserImage(userId,"Primary",file).then(function(){loading.hide(),reloadUser(view)}),e.preventDefault(),!1}),view.querySelector("#uploadUserImage").addEventListener("change",function(e){setFiles(view,e.target.files)})}});

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

File diff suppressed because one or more lines are too long