first commit
This commit is contained in:
1
modules/imageuploader/imageuploader.js
Normal file
1
modules/imageuploader/imageuploader.js
Normal file
@@ -0,0 +1 @@
|
||||
define(["exports","./../emby-apiclient/connectionmanager.js","./../common/globalize.js","./../layoutmanager.js","./../loading/loading.js","./../dialoghelper/dialoghelper.js","./../common/textencoding.js","./../emby-elements/emby-button/emby-button.js","./../emby-elements/emby-select/emby-select.js","./../emby-elements/emby-scroller/emby-scroller.js","./../emby-elements/emby-file-input/emby-file-input.js","./../emby-elements/emby-dialogclosebutton/emby-dialogclosebutton.js"],function(_exports,_connectionmanager,_globalize,_layoutmanager,_loading,_dialoghelper,_textencoding,_embyButton,_embySelect,_embyScroller,_embyFileInput,_embyDialogclosebutton){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,require(["formDialogStyle","css!modules/imageuploader/style.css"]);var currentItem,currentFile,hasChanges=!1;function showAlert(options){Emby.importModule("./modules/common/dialogs/alert.js").then(function(alert){return alert(options)})}function onFileReaderError(evt){switch(_loading.default.hide(),evt.target.error.code){case evt.target.error.NOT_FOUND_ERR:showAlert(_globalize.default.translate("MessageFileReadError"));break;case evt.target.error.ABORT_ERR:break;default:showAlert(_globalize.default.translate("MessageFileReadError"))}}function setFiles(page,files){var reader,theFile,files=(files=function(files){for(var list=[],i=0,length=files.length;i<length;i++)validateImage(files[i])&&list.push(files[i]);return list}(files))[0];files&&files.type.match("image.*")?(currentFile=files,(reader=new FileReader).onerror=onFileReaderError,reader.onloadstart=function(){page.querySelector(".fldUpload").classList.add("hide")},reader.onabort=function(){_loading.default.hide(),console.log("File read cancelled")},reader.onload=(theFile=files,function(e){e=['<img style="max-width:100%;max-height:100%;" src="',e.target.result,'" title="',_textencoding.default.htmlEncode(theFile.name),'"/>'].join("");page.querySelector(".imageOutput").innerHTML=e,page.querySelector(".fldUpload").classList.remove("hide")}),reader.readAsDataURL(files)):(page.querySelector(".imageOutput").innerHTML="",page.querySelector(".fldUpload").classList.add("hide"),currentFile=null)}var supportedImageTypes=["image/png","image/jpg","image/jpeg","image/webp","image/gif"];function validateImage(file){return!!supportedImageTypes.includes(file.type)}function onSubmit(e){e.preventDefault();var dlg,imageType,imageIndex,e=currentFile;return e&&validateImage(e)&&(_loading.default.show(),imageType=(dlg=this.closest(".dialog")).querySelector(".selectImageType").value,imageIndex=dlg.imageIndex,_connectionmanager.default.getApiClient(currentItem).uploadItemImage(currentItem.Id,imageType,imageIndex,e).then(function(){dlg.querySelector(".uploadImage").value="",_loading.default.hide(),hasChanges=!0,_dialoghelper.default.close(dlg)})),!1}function removeImageType(dlg,type){dlg=dlg.querySelector('option[value="'+type+'"]');dlg&&dlg.parentNode.removeChild(dlg)}function showEditor(options,resolve){options=options||{},require(["text!modules/imageuploader/imageuploader.template.html"],function(template){currentItem=options.item;var page,dialogOptions={removeOnClose:!0},dialogOptions=(_layoutmanager.default.tv?dialogOptions.size="fullscreen":dialogOptions.size="fullscreen-border",_dialoghelper.default.createDialog(dialogOptions));dialogOptions.classList.add("formDialog"),dialogOptions.imageIndex=options.imageIndex,dialogOptions.innerHTML=_globalize.default.translateDocument(template,"sharedcomponents"),dialogOptions.querySelector(".uploadImage").setAttribute("accept",supportedImageTypes.join(",")),"TvChannel"!==currentItem.Type&&(removeImageType(dialogOptions,"LogoLight"),removeImageType(dialogOptions,"LogoLightColor")),dialogOptions.addEventListener("close",function(){_loading.default.hide(),resolve(hasChanges)}),options.imageType||dialogOptions.querySelector(".fldSelectImageType").classList.remove("hide"),_dialoghelper.default.open(dialogOptions),(page=dialogOptions).querySelector("form").addEventListener("submit",onSubmit),page.querySelector(".uploadImage").addEventListener("change",function(){setFiles(page,this.files)}),page.querySelector(".btnBrowse").addEventListener("click",function(){var uploadInput=page.querySelector(".uploadImage");uploadInput.focus(),uploadInput.click()}),dialogOptions.querySelector(".selectImageType").value=options.imageType||"Primary"})}_exports.default={show:function(options){return new Promise(function(resolve,reject){hasChanges=!1,showEditor(options,resolve)})}}});
|
||||
55
modules/imageuploader/imageuploader.template.html
Normal file
55
modules/imageuploader/imageuploader.template.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<div class="formDialogHeader">
|
||||
<button type="button" is="emby-dialogclosebutton"></button>
|
||||
<h3 class="formDialogHeaderTitle">
|
||||
${HeaderUploadImage}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div is="emby-scroller" data-horizontal="false" data-forcescrollbar="true" data-focusscroll="true" class="formDialogContent">
|
||||
<div class="scrollSlider">
|
||||
<form class="dialogContentInner uploadItemImageForm padded-left padded-right" style="max-width: 100%;">
|
||||
|
||||
<div class="flex align-items-center" style="margin:0 0 1.5em;">
|
||||
<h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
|
||||
|
||||
<button is="emby-button" type="button" class="raised raised-mini btnBrowse sectionTitleButton">
|
||||
<i class="md-icon button-icon button-icon-left"></i>
|
||||
<span>${Browse}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="imageEditor-dropZone fieldDescription">
|
||||
<output class="imageOutput flex align-items-center justify-content-center" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;"></output>
|
||||
|
||||
<label>
|
||||
<input type="file" accept="image/*" class="uploadImage emby-file-input" name="uploadImage" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;" />
|
||||
<div>${LabelDropImageHere}</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="fldUpload hide">
|
||||
<br />
|
||||
<div class="selectContainer fldSelectImageType hide">
|
||||
<select is="emby-select" class="selectImageType" name="selectImageType" label="${LabelImageType}">
|
||||
<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="LogoLight">${LogoLight}</option>
|
||||
<option value="LogoLightColor">${LogoLightColor}</option>
|
||||
<option value="Menu">${Menu}</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>
|
||||
|
||||
1
modules/imageuploader/style.css
Normal file
1
modules/imageuploader/style.css
Normal file
@@ -0,0 +1 @@
|
||||
.imageEditor-dropZone{border:.2em dashed currentcolor;border-radius:.6em;text-align:center;position:relative;height:12em;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}
|
||||
Reference in New Issue
Block a user