WSL/SLF GitLab Repository

Commit efffd63f authored by Dominik's avatar Dominik Committed by Sam
Browse files

added flat map for direct item access, however they are copies and

it doesn't seem to be working be updated for the v-show; also tried changing the visibility attribute, works, but still doesn't prevent any of the remaining renderings to happen. No real performance increase... virtual-scroller is needed.
parent d263a840
......@@ -29,12 +29,14 @@
<template v-slot:label="{ item, active }">
<v-row no-gutters
<v-row v-intersect="onIntersect"
no-gutters
align="center"
style="cursor: pointer; " >
:id="item.key"
:ref="item.key" >
<v-col class="pl-2 pr-4"
:class="item.isFile ? '' : 'shrink'">
:class="item.isFile ? '' : 'shrink'">
{{ item.name }}
</v-col>
......@@ -90,6 +92,7 @@
</v-col>
</v-row>
</template>
</v-treeview>
......@@ -126,6 +129,7 @@ export default {
...mapState([
'content',
'contentLoading',
'contentMapFlat',
]),
},
methods: {
......@@ -162,6 +166,22 @@ export default {
item.open = true;
},
// eslint-disable-next-line no-unused-vars
onIntersect(entries, observer) {
// More information about these options
// is located here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
const observerdEntry = entries[0];
const key = observerdEntry?.target?.id;
const flatMapValue = this.$refs[key]; // this.contentMapFlat[key];
if (flatMapValue) {
flatMapValue.setAttribute('visibility', observerdEntry.isIntersecting ? 'inherit' : 'hidden');
// flatMapValue.isIntersecting = observerdEntry.isIntersecting;
// console.log(`${key} isIntersecting ${observerdEntry.isIntersecting}`);
// this.$forceUpdate();
}
},
},
watch: {
allCollapsed() {
......
......@@ -27,6 +27,7 @@ import {
getPrefixMap,
mergeS3Maps,
sanitaizePrefix,
flattenContentMap,
} from './s3Factory';
export default {
......@@ -85,8 +86,12 @@ export default {
map = mergeS3Maps(state.contentMap, map, parentPrefix);
}
state.contentLoading = false;
this._vm.$set(state, 'contentMap', map);
const flatMap = flattenContentMap(map);
this._vm.$set(state, 'contentMapFlat', flatMap);
state.contentLoading = false;
},
[GET_S3_CONTENT_ERROR](state, reason) {
state.contentLoading = false;
......
......@@ -49,6 +49,7 @@ function createDirectoryEntry(keyInfos, baseUrl, delimiter, childs = null) {
children,
childs: childrenLength,
fileExt: '',
key: directoryName,
};
}
......@@ -116,6 +117,7 @@ export function extractKeyInfos(key, delimiter = '/') {
name: fileKey,
isFile,
fileExt,
key,
};
}
......@@ -378,3 +380,24 @@ export function sanitaizePrefix(prefix, delimiter = '/') {
return sainPrefix;
}
function getFlatEntries(entries) {
let flat = {};
for (let i = 0; i < entries.length; i++) {
const entry = entries[i];
flat[entry.key] = entry;
if (entry.children?.length > 0) {
const flatChildren = getFlatEntries(entry.children);
flat = { ...flat, ...flatChildren };
}
}
return flat;
}
export function flattenContentMap(contentMap) {
const contentValues = Object.values(contentMap);
return getFlatEntries(contentValues);
}
......@@ -24,6 +24,7 @@ export default new Vuex.Store({
aboutError: null,
content: null,
contentMap: null,
contentMapFlat: null,
contentLoading: false,
contentError: null,
imagesPng,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment