Your IP : 216.73.216.86
this.BX=this.BX||{};this.BX.UI=this.BX.UI||{};(function(t,e,i,s,n,o,r,l,a){"use strict";const d={inject:["widgetOptions","emitter"],data:()=>({selected:false}),methods:{handleSettingsClick(){this.emitter.emit("SettingsButton:onClick",{container:this.$refs["container"],button:this})},getContainer(){return this.$refs["container"]},select(){this.selected=true},deselect(){this.selected=false}},template:`\n\t\t<div \n\t\t\tclass="ui-tile-uploader-settings" \n\t\t\t:class="{ '--selected': this.selected }" \n\t\t\t@click="handleSettingsClick" \n\t\t\tref="container"\n\t\t></div>\n\t`};const u={inject:["uploader","widgetOptions","emitter"],components:{SettingsButton:d},mounted(){this.uploader.assignBrowse(this.$refs.dropArea)},computed:{dropLabel(){return l.Loc.getMessage("TILE_UPLOADER_DROP_FILES_HERE")}},methods:{handleSettingsClick(){this.emitter.emit("onSettingsButtonClick",{button:this.$refs["ui-tile-uploader-settings"]})}},template:`\n\t\t<div class="ui-tile-uploader-drop-area">\n\t\t\t<div class="ui-tile-uploader-drop-box">\n\t\t\t\t<label class="ui-tile-uploader-drop-label" ref="dropArea">{{dropLabel}}</label>\n\t\t\t\t<SettingsButton v-if="widgetOptions.showSettingsButton" />\n\t\t\t</div>\n\t\t</div>\n\t`};const p={props:{error:{type:[Object,String]},alignArrow:{type:Boolean,default:true},popupOptions:{type:Object,default(){return{}}}},emits:["onDestroy"],watch:{error(t){if(this.errorPopup){this.errorPopup.destroy()}this.errorPopup=this.createPopup(t);this.errorPopup.show()}},created(){this.errorPopup=null},mounted(){if(this.error){this.errorPopup=this.createPopup(this.error);this.errorPopup.show()}},beforeUnmount(){if(this.errorPopup){this.errorPopup.destroy();this.errorPopup=null}},methods:{createContent(t){if(l.Type.isStringFilled(t)){return t}else if(l.Type.isObject(t)){return t.message+"<br>"+t.description}return""},createPopup(t){const e=this.createContent(t);let i;if(this.alignArrow&&l.Type.isElementNode(this.popupOptions.bindElement)){const s=this.popupOptions.bindElement;const o=s.offsetWidth;i={cacheable:false,animation:"fading-slide",content:e,events:{onDestroy:()=>{this.$emit("onDestroy",t);this.errorPopup=null},onShow:function(t){const e=t.getTarget();e.getPopupContainer().style.display="block";const i=e.getPopupContainer().offsetWidth;const s=o/2-i/2;const r=n.Popup.getOption("angleLeftOffset")-n.Popup.getOption("angleMinTop");e.setAngle({offset:i/2-r});e.setOffset({offsetLeft:s+n.Popup.getOption("angleLeftOffset")})}}}}else{i={cacheable:false,animation:"fading-slide",content:e,events:{onDestroy:()=>{this.$emit("onDestroy",t);this.errorPopup=null}}}}const s=Object.assign({},i,this.popupOptions);return new n.Popup(s)}},template:"<span></span>"};const m={props:{name:{type:String},type:{type:String},color:{type:String},size:{type:Number,default:36}},mounted(){const t=new s.FileIcon({name:this.name,fileType:this.type,color:this.color,size:this.size});t.renderTo(this.$el)},template:"<span></span>"};const c={name:"InsertIntoTextButton",inject:["emitter"],props:{item:{type:Object,default:{}}},computed:{isInserted(){var t;return((t=this.item.customData)==null?void 0:t.tileSelected)===true}},methods:{click(){this.emitter.emit("onInsertIntoText",{item:this.item})},handleMouseEnter(t){if(this.hintPopup){return}const e=t.currentTarget;const i=e.offsetWidth;this.hintPopup=new n.Popup({content:l.Loc.getMessage("TILE_UPLOADER_INSERT_INTO_THE_TEXT"),cacheable:false,animation:"fading-slide",bindElement:e,offsetTop:0,bindOptions:{position:"top"},darkMode:true,events:{onClose:()=>{this.hintPopup.destroy();this.hintPopup=null},onShow:t=>{const e=t.getTarget();const s=e.getPopupContainer().offsetWidth;const o=i/2-s/2;const r=n.Popup.getOption("angleLeftOffset")-n.Popup.getOption("angleMinTop");e.setAngle({offset:s/2-r});e.setOffset({offsetLeft:o+n.Popup.getOption("angleLeftOffset")})}}});this.hintPopup.show()},handleMouseLeave(t){if(this.hintPopup){this.hintPopup.close();this.hintPopup=null}}},template:`\n\t\t<div \n\t\t\tclass="ui-tile-uploader-insert-into-text-button"\n\t\t\t:class="[{ '--inserted': isInserted }]"\n\t\t\t@mouseenter="handleMouseEnter" \n\t\t\t@mouseleave="handleMouseLeave" \n\t\t\t@click="click"\n\t\t></div>\n\t`};const h={props:{progress:{type:Number,default:0},width:{type:Number,default:45},lineSize:{type:Number,default:3},colorTrack:{type:String,default:"#eeeff0"},colorBar:{type:String,default:"#2fc6f6"},rotation:{type:Boolean,default:true}},mounted(){this.createProgressbar()},watch:{progress(){this.updateProgressbar()}},methods:{createProgressbar(){this.loader=new o.ProgressRound({width:this.width,lineSize:this.lineSize,colorBar:this.colorBar,colorTrack:this.colorTrack,rotation:this.rotation,value:this.progress,color:o.ProgressRound.Color.SUCCESS});this.loader.renderTo(this.$refs.container)},updateProgressbar(){if(!this.loader){this.createProgressbar()}this.loader.update(this.progress)}},template:'<span ref="container"></span>'};const f={components:{UploadLoader:h,ErrorPopup:p,FileIconComponent:m},inject:["uploader","widgetOptions","emitter"],props:{item:{type:Object,default:{}}},data(){return{tileId:`tile-uploader-${l.Text.getRandom().toLowerCase()}`,showError:false}},computed:{FileStatus:()=>a.FileStatus,status(){if(this.item.status===a.FileStatus.UPLOADING){return`${this.item.progress}%`}if(this.item.status===a.FileStatus.LOAD_FAILED||this.item.status===a.FileStatus.UPLOAD_FAILED){return l.Loc.getMessage("TILE_UPLOADER_ERROR_STATUS")}return l.Loc.getMessage("TILE_UPLOADER_WAITING_STATUS")},fileSize(){if([a.FileStatus.LOADING,a.FileStatus.LOAD_FAILED].includes(this.item.status)&&this.item.origin===a.FileOrigin.SERVER){return""}return this.item.sizeFormatted},errorPopupOptions(){const t=this.$refs.container;const e=t.offsetWidth;return{bindElement:t,darkMode:true,offsetTop:6,minWidth:e,maxWidth:500}},clampedFileName(){const t=this.item.name.split(".");if(t.length>1){t.pop()}const e=t.join(".");if(e.length>27){return e.substr(0,17)+"..."+e.substr(-5)}return e},showItemMenuButton(){if(l.Type.isBoolean(this.widgetOptions.showItemMenuButton)){return this.widgetOptions.showItemMenuButton}else{return this.menuItems.length>0}},menuItems(){const t=[];t.push({id:"filesize",text:l.Loc.getMessage("TILE_UPLOADER_FILE_SIZE",{"#filesize#":this.item.sizeFormatted}),disabled:true},{delimiter:true});if(this.widgetOptions.insertIntoText===true){t.push({id:"insert-into-text",text:l.Loc.getMessage("TILE_UPLOADER_INSERT_INTO_THE_TEXT"),onclick:()=>{if(this.menu){this.menu.close()}this.emitter.emit("onInsertIntoText",{item:this.item})}})}if(l.Type.isStringFilled(this.item.downloadUrl)){t.push({id:"download",text:l.Loc.getMessage("TILE_UPLOADER_MENU_DOWNLOAD"),href:this.item.downloadUrl,onclick:()=>{if(this.menu){this.menu.close()}}},{id:"remove",text:l.Loc.getMessage("TILE_UPLOADER_MENU_REMOVE"),onclick:()=>{this.remove()}})}return t},extraAction(){return this.widgetOptions.slots&&this.widgetOptions.slots[r.TileWidgetSlot.ITEM_EXTRA_ACTION]?this.widgetOptions.slots[r.TileWidgetSlot.ITEM_EXTRA_ACTION]:this.widgetOptions.insertIntoText===true?c:null},isSelected(){return this.item.customData.tileSelected===true}},created(){this.menu=null},beforeUnmount(){if(this.menu){this.menu.destroy();this.menu=null}},methods:{remove(){this.uploader.removeFile(this.item.id)},handleMouseEnter(t){if(t.error){this.showError=true}},handleMouseLeave(){this.showError=false},toggleMenu(){setTimeout((()=>{if(this.menu){if(this.menu.getPopupWindow().isShown()){this.menu.close();return}this.menu.destroy()}this.menu=n.MenuManager.create({id:this.tileId,bindElement:this.$refs.menu,angle:true,offsetLeft:13,minWidth:100,cacheable:false,items:this.menuItems,events:{onDestroy:()=>{this.menu=null}}});this.emitter.emit("TileItem:onMenuCreate",{menu:this.menu,item:this.item});this.menu.show()}))}},template:`\n\t<div\n\t\tclass="ui-tile-uploader-item"\n\t\t:class="['ui-tile-uploader-item--' + item.status, { '--image': item.isImage, '--selected': isSelected } ]"\n\t\tref="container"\n\t>\n\t\t<ErrorPopup v-if="item.error && showError" :error="item.error" :popup-options="errorPopupOptions"/>\n\t\t<div \n\t\t\tclass="ui-tile-uploader-item-content"\n\t\t\t@mouseenter="handleMouseEnter(item)" \n\t\t\t@mouseleave="handleMouseLeave(item)"\n\t\t>\n\t\t\t<div v-if="item.status !== FileStatus.COMPLETE" class="ui-tile-uploader-item-state">\n\t\t\t\t<div class="ui-tile-uploader-item-loader" v-if="item.status === FileStatus.UPLOADING">\n\t\t\t\t\t<UploadLoader :progress="item.progress" :width="20" colorTrack="#73d8f8" colorBar="#fff" />\n\t\t\t\t</div>\n\t\t\t\t<div v-else class="ui-tile-uploader-item-state-icon"></div>\n\t\t\t\t<div class="ui-tile-uploader-item-status">\n\t\t\t\t\t<div class="ui-tile-uploader-item-status-name">{{status}}</div>\n\t\t\t\t\t<div v-if="fileSize" class="ui-tile-uploader-item-state-desc">{{fileSize}}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class="ui-tile-uploader-item-state-remove" @click="remove" key="aaa"></div>\n\t\t\t</div>\n\t\t\t<template v-else>\n\t\t\t\t<div class="ui-tile-uploader-item-remove" @click="remove" key="remove"></div>\n\t\t\t\t<div class="ui-tile-uploader-item-actions" key="actions">\n\t\t\t\t\t<div class="ui-tile-uploader-item-actions-pad">\n\t\t\t\t\t\t<div v-if="extraAction" class="ui-tile-uploader-item-extra-actions">\n\t\t\t\t\t\t\t<component :is="extraAction" :item="this.item"></component>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div v-if="showItemMenuButton" class="ui-tile-uploader-item-menu" @click="toggleMenu" ref="menu"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<div class="ui-tile-uploader-item-preview">\n\t\t\t\t<div\n\t\t\t\t\tv-if="item.previewUrl"\n\t\t\t\t\tclass="ui-tile-uploader-item-image"\n\t\t\t\t\t:class="{ 'ui-tile-uploader-item-image-default': item.previewUrl === null }"\n\t\t\t\t\t:style="{ backgroundImage: item.previewUrl !== null ? 'url(' + item.previewUrl + ')' : '' }">\n\t\t\t\t</div>\n\t\t\t\t<div \n\t\t\t\t\tv-else-if="item.name" \n\t\t\t\t\tclass="ui-tile-uploader-item-file-icon"\n\t\t\t\t>\n\t\t\t\t\t<FileIconComponent :name="item.extension ? item.extension : '...'" />\n\t\t\t\t</div>\n\t\t\t\t<div \n\t\t\t\t\tv-else \n\t\t\t\t\tclass="ui-tile-uploader-item-file-default"\n\t\t\t\t>\n\t\t\t\t\t<FileIconComponent :name="item.extension ? item.extension : '...'" :size="36" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div v-if="item.name" class="ui-tile-uploader-item-name-box" :title="item.name">\n\t\t\t\t<div class="ui-tile-uploader-item-name">\n\t\t\t\t\t<span class="ui-tile-uploader-item-name-title">{{clampedFileName}}</span>\x3c!--\n\t\t\t\t\t--\x3e<span v-if="item.extension" class="ui-tile-uploader-item-name-extension">.{{item.extension}}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`};const g={components:{UploadLoader:r.UploadLoader,ErrorPopup:r.ErrorPopup,FileIconComponent:m},emit:["onClick"],props:{hiddenFilesCount:{type:Number,default:0}},computed:{moreButtonCaption(){return l.Loc.getMessage("TILE_UPLOADER_MORE_BUTTON_CAPTION",{"#COUNT#":`<span class="ui-tile-uploader-item-more-count">${this.hiddenFilesCount}</span>`})}},template:`\n\t\t<div class="ui-tile-uploader-item" @click="$emit('onClick')">\n\t\t\t<div class="ui-tile-uploader-item-more">\n\t\t\t\t<div class="ui-tile-uploader-item-more-icon"></div>\n\t\t\t\t<div class="ui-tile-uploader-item-more-label" v-html="moreButtonCaption"></div>\n\t\t\t</div>\n\t\t</div>\n\t`};const v={components:{TileItem:f,TileMoreItem:g},emits:["onUnmount"],props:{autoCollapse:{type:Boolean,default:false},items:{type:Array,default:[]}},data:()=>({pageSize:5,firstHiddenItem:null,lastHiddenItem:null}),created(){this.moreItemBlocked=false;if(!this.autoCollapse){return}if(this.items.length>this.pageSize){this.firstHiddenItem=this.items[this.pageSize];this.lastHiddenItem=this.items[this.items.length-1]}},unmounted(){this.$emit("onUnmount")},computed:{visibleItems(){if(this.firstHiddenItem===null){return this.items}const t=this.items.indexOf(this.firstHiddenItem);if(t===-1){this.resetMoreItem();return this.items}return this.items.slice(0,t)},realtimeItems(){if(this.lastHiddenItem===null){return[]}const t=this.items.indexOf(this.lastHiddenItem);if(t===-1){this.resetMoreItem();return[]}return this.items.slice(t+1)},hiddenFilesCount(){if(this.lastHiddenItem===null){return 0}const t=this.items.indexOf(this.firstHiddenItem);const e=this.items.indexOf(this.lastHiddenItem);if(t===-1||e===-1){this.resetMoreItem();return 0}return e-t+1}},methods:{getMore(){if(this.moreItemBlocked){return}this.pageSize=Math.min(this.pageSize+5,30);const t=this.items.indexOf(this.firstHiddenItem);const e=this.items.indexOf(this.lastHiddenItem);const i=t+this.pageSize;const s=i>e?e+1:i;let n=s-t;for(let i=t,o=0;i<s;i++,o++){this.moreItemBlocked=true;setTimeout((()=>{if(i===e){this.resetMoreItem()}else{this.firstHiddenItem=this.items[i+1]}n--;if(n===0){this.moreItemBlocked=false}}),100*o)}},resetMoreItem(){this.firstHiddenItem=null;this.lastHiddenItem=null}},template:`\n\t\t<div class="ui-tile-uploader-items">\n\t\t\t<transition-group name="ui-tile-uploader-item" type="animation">\n\t\t\t\t<TileItem v-for="item in visibleItems" :key="item.id" :item="item" />\n\t\t\t</transition-group>\n\t\t\t<transition name="ui-tile-uploader-item" type="animation">\n\t\t\t\t<TileMoreItem v-if="hiddenFilesCount > 0" :hidden-files-count="hiddenFilesCount" @onClick="getMore"/>\n\t\t\t</transition>\n\t\t\t<transition-group name="ui-tile-uploader-item" type="animation">\n\t\t\t\t<TileItem v-for="item in realtimeItems" :key="item.id" :item="item" />\n\t\t\t</transition-group>\n\t\t</div>\n\t`};const T={directives:{drop:{beforeMount(t,e,i){if(e.value===false){return}function s(){e.instance.dragOver=true;t.classList.add("--drag-over")}function n(){e.instance.dragOver=false;t.classList.remove("--drag-over")}let o=null;l.Event.bind(t,"dragenter",(t=>{a.hasDataTransferOnlyFiles(t.dataTransfer,false).then((e=>{if(e){t.preventDefault();t.stopPropagation();o=t.target;s()}})).catch((()=>{}))}));l.Event.bind(t,"dragleave",(t=>{t.preventDefault();t.stopPropagation();if(o===t.target){n()}}));l.Event.bind(t,"drop",(t=>{n()}))},unmounted(t,e,i){if(e.value===false){return}e.instance.dragOver=false;l.Event.unbindAll(t,"dragenter");l.Event.unbindAll(t,"dragleave");l.Event.unbindAll(t,"drop")}}},data(){return{dragOver:false}}};const E={name:"TileWidget",extends:i.VueUploaderComponent,components:{DropArea:u,TileList:v,ErrorPopup:p},mixins:[T],data(){return{isMounted:false,autoCollapse:false}},computed:{errorPopupOptions(){return{bindElement:this.$refs.container,closeIcon:true,padding:20,offsetLeft:45,angle:true,darkMode:true,bindOptions:{position:"top",forceTop:true}}},TileWidgetSlot:()=>r.TileWidgetSlot,slots(){const t=l.Type.isPlainObject(this.widgetOptions.slots)?this.widgetOptions.slots:{};return{[r.TileWidgetSlot.BEFORE_TILE_LIST]:t[r.TileWidgetSlot.BEFORE_TILE_LIST],[r.TileWidgetSlot.AFTER_TILE_LIST]:t[r.TileWidgetSlot.AFTER_TILE_LIST],[r.TileWidgetSlot.BEFORE_DROP_AREA]:t[r.TileWidgetSlot.BEFORE_DROP_AREA],[r.TileWidgetSlot.AFTER_DROP_AREA]:t[r.TileWidgetSlot.AFTER_DROP_AREA]}},enableDropzone(){return this.widgetOptions.enableDropzone!==false}},created(){this.autoCollapse=l.Type.isBoolean(this.widgetOptions.autoCollapse)?this.widgetOptions.autoCollapse:this.items.length>0;this.adapter.subscribe("Item:onAdd",(t=>{this.uploaderError=null}));this.adapter.subscribe("Item:onRemove",(t=>{this.uploaderError=null}))},mounted(){if(this.enableDropzone){this.uploader.assignDropzone(this.$refs.container)}this.isMounted=true},methods:{enableAutoCollapse(){this.autoCollapse=true},disableAutoCollapse(){this.autoCollapse=false},handlePopupDestroy(t){if(this.uploaderError===t){this.uploaderError=null}}},template:`\n\t\t<div class="ui-tile-uploader" ref="container" v-drop="enableDropzone">\n\t\t\t<component :is="slots[TileWidgetSlot.BEFORE_TILE_LIST]"></component>\n\t\t\t<TileList \n\t\t\t\tv-if="items.length !== 0" \n\t\t\t\t:items="items" \n\t\t\t\t:auto-collapse="autoCollapse" \n\t\t\t\t@onUnmount="this.autoCollapse = false"\n\t\t\t/>\n\t\t\t<component :is="slots[TileWidgetSlot.AFTER_TILE_LIST]"></component>\n\t\t\t<component :is="slots[TileWidgetSlot.BEFORE_DROP_AREA]"></component>\n\t\t\t<DropArea />\n\t\t\t<component :is="slots[TileWidgetSlot.AFTER_DROP_AREA]"></component>\n\t\t</div>\n\t\t<ErrorPopup\n\t\t\tv-if="uploaderError && isMounted"\n\t\t\t:alignArrow="false"\n\t\t\t:error="uploaderError"\n\t\t\t:popup-options="errorPopupOptions"\n\t\t\t@onDestroy="handlePopupDestroy"\n\t\t/>\n\t`};class I extends i.VueUploaderWidget{constructor(t,e){const i=l.Type.isPlainObject(e)?Object.assign({},e):{};super(t,i)}defineComponent(){return E}}const O={BEFORE_TILE_LIST:"beforeTileList",AFTER_TILE_LIST:"afterTileList",BEFORE_DROP_AREA:"beforeDropArea",AFTER_DROP_AREA:"afterDropArea",ITEM_EXTRA_ACTION:"Item:extraAction"};t.TileWidget=I;t.TileWidgetComponent=E;t.TileWidgetSlot=O;t.TileList=v;t.FileIcon=m;t.ErrorPopup=p;t.UploadLoader=h;t.DragOverMixin=T})(this.BX.UI.Uploader=this.BX.UI.Uploader||{},BX.Event,BX.UI.Uploader,BX.UI.Icons.Generator,BX.Main,BX.UI,BX.UI.Uploader,BX,BX.UI.Uploader);
//# sourceMappingURL=ui.uploader.tile-widget.bundle.map.js