← Back
Editing: FilesSelectionMixin-1nnlfofj.chunk.mjs
import{u as m,s as g,d as y}from"./preload-helper-DadE4qT2.chunk.mjs";import{N as w}from"./NcEmptyContent-D03x2I6w.chunk.mjs";import{l as d,x as v}from"./index-Dgdobvu3.chunk.mjs";import{n as f,v as b}from"./icons-CFZwNZD8.chunk.mjs";import{f as S}from"./fileFetcher-CFJaIlCO.chunk.mjs";const H={};var C=function(e,t){return e("ul",t._l(t.props.rows,function(i){return e("div",{key:i.key,staticClass:"tiled-row",style:{height:`${i.height}px`}},t._l(i.items,function(o){return e("li",{key:o.id,style:{width:o.ratio?`${i.height*o.ratio}px`:"100%",height:`${i.height}px`}},[t._t("default",null,{row:i,item:o})],2)}),0)}),0)},_=[],T=f(H,C,_,!0,null,"c003b6e3");const k=T.exports;function $(e,t,i=200){if(t===0)return[];const o=[];let n=0,l=0;for(;l<e.length;){const r=[];do r.push(e[l++]);while(l<e.length&&F([...r,e[l]],i)<=t);const a=L(r,t,e.length===l,i);o[n]={items:r.map(h=>({...h,width:a*h.ratio,height:a})),height:a,key:r.map(h=>h.id).join("-")},n+=1}return o}function F(e,t){return e.map(i=>t*i.ratio).reduce((i,o)=>i+o)}function L(e,t,i,o){const n=e.map(r=>r.ratio).reduce((r,a)=>r+a);let l=t/n;return e.length===1&&e[0].width>t&&(l=t/e[0].ratio),i&&(l=Math.min(o+20,l)),l}const z={name:"TiledLayout",components:{TiledRows:k},props:{sections:{type:Array,required:!0},baseHeight:{type:Number,default:200}},data(){return{containerWidth:0,resizeObserver:null}},computed:{tiledSections(){return d.debug("[TiledLayout] Computing rows",{items:this.sections}),this.sections.map(e=>{const t=$(e.items,this.containerWidth,this.baseHeight);return{...e,key:e.id,rows:t.map(i=>({...i,sectionKey:e.id})),height:t.reduce((i,o)=>i+o.height,0)}})}},mounted(){this.resizeObserver=new ResizeObserver(e=>{for(const t of e){const i=t.contentRect;t.target.classList.contains("tiled-container")&&(this.containerWidth=i.width)}}),this.resizeObserver.observe(this.$refs.tiledLayoutContainer)},beforeDestroy(){this.resizeObserver?.disconnect()}};var x=function(){var e=this,t=e._self._c;return t("div",{ref:"tiledLayoutContainer",staticClass:"tiled-container"},[e._t("default",function(){return[t("TiledRows",{attrs:{rows:e.tiledSections}})]},{tiledSections:e.tiledSections})],2)},E=[],I=f(z,x,E,!1,null,"268bbd01");const P=I.exports,M={name:"VirtualScrolling",props:{sections:{type:Array,required:!0},containerElement:{type:HTMLElement,default:null},useWindow:{type:Boolean,default:!1},headerHeight:{type:Number,default:75},renderDistance:{type:Number,default:.5},bottomBufferRatio:{type:Number,default:2},scrollToKey:{type:String,default:""}},data(){return{scrollPosition:0,containerHeight:0,rowsContainerHeight:0,resizeObserver:null}},computed:{visibleSections(){d.debug("[VirtualScrolling] Computing visible section",{sections:this.sections});const e=this.containerHeight,t=this.scrollPosition,i=t+e;let o=0,n=0;const l=this.sections.map(s=>(n+=this.headerHeight,{...s,rows:s.rows.reduce((c,u)=>{o=n,n+=u.height;let p=0;return n<t?p=(t-n)/e:o>i&&(p=(o-i)/e),p>this.renderDistance?c:[...c,{...u,distance:p}]},[])})).filter(s=>s.rows.length>0),r=l.flatMap(({rows:s})=>s).flatMap(({items:s})=>s);r.forEach(s=>s.key=this.rowIdToKeyMap[s.id]);const a=r.map(({key:s})=>s).filter(s=>s!==void 0),h=Object.values(this.rowIdToKeyMap).filter(s=>!a.includes(s));return r.filter(({key:s})=>s===void 0).forEach(s=>s.key=h.pop()??Math.random().toString(36).substr(2)),this.rowIdToKeyMap=r.reduce((s,{id:c,key:u})=>({...s,[`${c}`]:u}),{}),l},totalHeight(){return this.sections.map(e=>this.headerHeight+e.height).reduce((e,t)=>e+t,0)+200},paddingTop(){if(this.visibleSections.length===0)return 0;let e=0;for(const t of this.sections){if(t.key!==this.visibleSections[0].rows[0].sectionKey){e+=this.headerHeight+t.height;continue}for(const i of t.rows){if(i.key===this.visibleSections[0].rows[0].key)return e;e+=i.height}e+=this.headerHeight}return e},rowsContainerStyle(){return{height:`${this.totalHeight}px`,paddingTop:`${this.paddingTop}px`}},isNearBottom(){const e=this.containerHeight*this.bottomBufferRatio;return this.scrollPosition+this.containerHeight>=this.totalHeight-e},container(){return d.debug("[VirtualScrolling] Computing container"),this.containerElement!==null?this.containerElement:this.useWindow?window:this.$refs.container}},watch:{isNearBottom(e){d.debug("[VirtualScrolling] isNearBottom changed",{value:e}),e&&this.$emit("need-content")},visibleSections(){this.isNearBottom&&this.$emit("need-content")},scrollToKey(e){let t=0;for(const i of this.sections){if(i.key!==e){t+=this.headerHeight+i.height;continue}break}d.debug("[VirtualScrolling] Scrolling to",{currentRowTopDistanceFromTop:t}),this.$refs.container.scrollTo({top:t,behavior:"smooth"})}},beforeCreate(){this.rowIdToKeyMap={}},mounted(){this.resizeObserver=new ResizeObserver(e=>{for(const t of e){const i=t.contentRect;t.target===this.container&&(this.containerHeight=i.height),t.target.classList.contains("vs-rows-container")&&(this.rowsContainerHeight=i.height)}}),this.useWindow?(window.addEventListener("resize",this.updateContainerSize,{passive:!0}),this.containerHeight=window.innerHeight):this.resizeObserver.observe(this.container),this.resizeObserver.observe(this.$refs.rowsContainer),this.container?.addEventListener("scroll",this.updateScrollPosition,{passive:!0})},beforeDestroy(){this.useWindow&&window.removeEventListener("resize",this.updateContainerSize),this.resizeObserver?.disconnect(),this.container?.removeEventListener("scroll",this.updateScrollPosition)},methods:{updateScrollPosition(){this._onScrollHandle??=requestAnimationFrame(()=>{this._onScrollHandle=null,this.useWindow?this.scrollPosition=this.container.scrollY:this.scrollPosition=this.container.scrollTop})},updateContainerSize(){this.containerHeight=window.innerHeight}}};var N=function(){var e=this,t=e._self._c;return!e.useWindow&&e.containerElement===null?t("div",{ref:"container",staticClass:"vs-container"},[t("div",{ref:"rowsContainer",staticClass:"vs-rows-container",style:e.rowsContainerStyle},[e._t("default",null,{visibleSections:e.visibleSections}),e._t("loader")],2)]):t("div",{ref:"rowsContainer",staticClass:"vs-rows-container",style:e.rowsContainerStyle},[e._t("default",null,{visibleSections:e.visibleSections}),e._t("loader")],2)},B=[],O=f(M,N,B,!1,null,"cb2732da");const W=O.exports,V={name:"FilesListViewer",components:{PackageVariant:b,NcEmptyContent:w,NcLoadingIcon:v,TiledLayout:P,VirtualScrolling:W},props:{fileIds:{type:Array,default:void 0},fileIdsBySection:{type:Object,default:void 0},sections:{type:Array,default:void 0},loading:{type:Boolean,default:!1},emptyMessage:{type:String,default:""},baseHeight:{type:Number,default:200},sectionHeaderHeight:{type:Number,default:75},scrollToSection:{type:String,default:""},containerElement:{type:[HTMLElement,null],default:null},useWindow:{type:Boolean,default:!1}},data(){return{placeholderFiles:Array(20).fill(0).map((e,t)=>{const i=this.croppedLayout?200:200*(1+Math.random()*2);return{id:t.toString(),width:i,height:200,ratio:i/200}})}},computed:{files(){return this.$store.state.files.files},showPlaceholders(){return this.loading&&(this.fileIds?.length===0||this.sections?.length===0)},itemsBySections(){return this.fileIds!==void 0?this.showPlaceholders?[{id:"",items:this.placeholderFiles}]:[{id:"",items:this.fileIds.filter(e=>this.files[e]).map(this.mapFileToItem)}]:this.sections!==void 0?this.showPlaceholders?[{id:"placeholder",items:this.placeholderFiles}]:this.sections.map(e=>({id:e,items:this.fileIdsBySection[e].filter(t=>this.files[t]).map(this.mapFileToItem)})):[]},photosCount(){return this.itemsBySections.map(({items:e})=>e.length).reduce((e,t)=>e+t,0)},showLoader(){return this.loading&&(this.fileIds?.length!==0||this.sections?.length!==0)},croppedLayout(){return this.$store.state.userConfig.croppedLayout}},mounted(){g("files:node:updated",this.handleFileUpdated),g("files:node:deleted",this.handleFileDeleted)},destroyed(){m("files:node:updated",this.handleFileUpdated),m("files:node:deleted",this.handleFileDeleted)},methods:{needContent(){this.$emit("need-content")},mapFileToItem(e){const t=this.files[e];return{id:t.fileid?.toString(),width:t.attributes["metadata-photos-size"].width,height:t.attributes["metadata-photos-size"].height,ratio:this.croppedLayout?1:t.attributes["metadata-photos-size"].width/t.attributes["metadata-photos-size"].height}},async handleFileUpdated({fileid:e}){const t=await S(this.files[e].path);this.$store.dispatch("appendFiles",[t])},handleFileDeleted({fileid:e}){this.$store.commit("deleteFile",e)}}};var R=function(){var e=this,t=e._self._c;return t("div",{staticClass:"files-list-viewer"},[e.emptyMessage!==""&&e.photosCount===0&&!e.loading?t("NcEmptyContent",{key:"emptycontent",attrs:{name:e.emptyMessage}},[t("PackageVariant",{attrs:{slot:"icon"},slot:"icon"})],1):e._e(),t("TiledLayout",{attrs:{"base-height":e.baseHeight,sections:e.itemsBySections},scopedSlots:e._u([{key:"default",fn:function({tiledSections:i}){return t("VirtualScrolling",{attrs:{"use-window":e.useWindow,"container-element":e.containerElement,sections:i,"scroll-to-key":e.scrollToSection,"header-height":e.sectionHeaderHeight},on:{"need-content":e.needContent},scopedSlots:e._u([{key:"default",fn:function({visibleSections:o}){return e._l(o,function(n){return t("div",{key:n.id},[n.id!==""?[e.showPlaceholders?t("div",{staticClass:"files-list-viewer__placeholder",style:{"flex-basis":"100%",height:`${e.sectionHeaderHeight}px`}}):e._t("default",null,{file:{id:n.id},isHeader:!0})]:e._e(),t("ul",[e._l(n.rows,function(l,r){return e._l(l.items,function(a){return t("li",{key:a.key,class:{"last-tiled-rows":r===n.rows.length-1},style:{"flex-basis":`${a.width-1}px`,height:`${a.height}px`}},[e.showPlaceholders?t("div",{staticClass:"files-list-viewer__placeholder"}):e._t("default",null,{file:a})],2)})})],2)],2)})}}])},[e.loading&&!e.showPlaceholders?t("NcLoadingIcon",{staticClass:"files-list-viewer__loader",attrs:{slot:"loader"},slot:"loader"}):e._e()],1)}}])})],1)},D=[],K=f(V,R,D,!1,null,"2ca16ec8");const G=K.exports,J=y({name:"FilesSelectionMixin",data(){return{selection:{}}},watch:{$route(){this.resetSelection()}},methods:{onFileSelectToggle({id:e,value:t}){this.$set(this.selection,e,t)},onUncheckFiles(e){e.forEach(t=>this.$set(this.selection,t,!1))},resetSelection(){this.selection={}}},computed:{selectedFileIds(){return Object.keys(this.selection).filter(e=>this.selection[e])}}});export{J as F,G as a}; //# sourceMappingURL=FilesSelectionMixin-1nnlfofj.chunk.mjs.map
Save File
Cancel