Skip to content

Commit

Permalink
Revert "add bookcard lazy render"
Browse files Browse the repository at this point in the history 
This reverts commit bd8306e.
  • Loading branch information
@SchneeHertz
SchneeHertz committed Aug 8, 2024
1 parent bd8306e commit 04adb5f
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 60 deletions.
80 changes: 35 additions & 45 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,54 +111,48 @@
class="book-card"
v-if="!book.isCollection && !book.collectionHide && (sortValue === 'hidden' || !book.hiddenBook) && !book.folderHide"
:tabindex="index + 1"
v-lazy:[index]="loadBookCardContent"
>
<template v-if="visibilityMap[index]">
<p class="book-title"
@click="openBookDetail(book)"
@contextmenu="onMangaTitleContextMenu($event, book)"
:title="getDisplayTitle(book)"
>{{getDisplayTitle(book)}}</p>
<img
class="book-cover"
:src="book.coverPath"
@click="handleClickCover(book)"
@contextmenu="onBookContextMenu($event, book)"
/>
<el-tag class="book-card-language" size="small" type="danger" v-show="isChineseTranslatedManga(book)">ZH</el-tag>
<el-tag class="book-card-pagecount" size="small" type="danger" v-if="book.pageDiff" @click="searchFromTag('pageDiff')">{{book.pageCount}}|{{book.filecount}}P</el-tag>
<el-tag class="book-card-pagecount" size="small" type="info" v-else>{{ book.pageCount }}P</el-tag>
<el-icon
:size="30"
:color="book.mark ? '#E6A23C' : '#666666'"
class="book-card-mark" @click="switchMark(book)"
><BookmarkTwotone /></el-icon>
<el-button-group class="outer-read-button-group">
<el-button type="success" size="small" class="outer-read-button" plain @click="openLocalBook(book)">{{$t('m.re')}}</el-button>
<el-button type="success" size="small" class="outer-read-button" plain @click="$refs.InternalViewerRef.viewManga(book)">{{$t('m.ad')}}</el-button>
</el-button-group>
<el-tag
class="book-status-tag"
effect="plain"
:type="book.status === 'non-tag' ? 'info' : book.status === 'tagged' ? 'success' : 'warning'"
@click="searchFromTag(book.status)"
>{{book.status}}</el-tag>
<el-rate v-model="book.rating" size="small" allow-half @change="saveBook(book)"/>
</template>
<p class="book-title"
@click="openBookDetail(book)"
@contextmenu="onMangaTitleContextMenu($event, book)"
:title="getDisplayTitle(book)"
>{{getDisplayTitle(book)}}</p>
<img
class="book-cover"
:src="book.coverPath"
@click="handleClickCover(book)"
@contextmenu="onBookContextMenu($event, book)"
/>
<el-tag class="book-card-language" size="small" type="danger" v-show="isChineseTranslatedManga(book)">ZH</el-tag>
<el-tag class="book-card-pagecount" size="small" type="danger" v-if="book.pageDiff" @click="searchFromTag('pageDiff')">{{book.pageCount}}|{{book.filecount}}P</el-tag>
<el-tag class="book-card-pagecount" size="small" type="info" v-else>{{ book.pageCount }}P</el-tag>
<el-icon
:size="30"
:color="book.mark ? '#E6A23C' : '#666666'"
class="book-card-mark" @click="switchMark(book)"
><BookmarkTwotone /></el-icon>
<el-button-group class="outer-read-button-group">
<el-button type="success" size="small" class="outer-read-button" plain @click="openLocalBook(book)">{{$t('m.re')}}</el-button>
<el-button type="success" size="small" class="outer-read-button" plain @click="$refs.InternalViewerRef.viewManga(book)">{{$t('m.ad')}}</el-button>
</el-button-group>
<el-tag
class="book-status-tag"
effect="plain"
:type="book.status === 'non-tag' ? 'info' : book.status === 'tagged' ? 'success' : 'warning'"
@click="searchFromTag(book.status)"
>{{book.status}}</el-tag>
<el-rate v-model="book.rating" size="small" allow-half @change="saveBook(book)"/>
</div>
<div
class="book-card"
v-if="book.isCollection && !book.folderHide"
:tabindex="index + 1"
v-lazy:[index]="loadBookCardContent"
>
<template v-if="visibilityMap[index]">
<el-tag effect="dark" type="warning" class="book-collection-tag">{{$t('m.collection')}}</el-tag>
<p class="book-title" :title="book.title">{{book.title}}</p>
<img class="book-cover" :src="book.coverPath" @click="openCollection(book)"/>
<el-icon :size="30" :color="book.mark ? '#E6A23C' : '#666666'" class="book-card-mark"><BookmarkTwotone /></el-icon>
<el-rate v-model="book.rating" size="small" allow-half disabled/>
</template>
<el-tag effect="dark" type="warning" class="book-collection-tag">{{$t('m.collection')}}</el-tag>
<p class="book-title" :title="book.title">{{book.title}}</p>
<img class="book-cover" :src="book.coverPath" @click="openCollection(book)"/>
<el-icon :size="30" :color="book.mark ? '#E6A23C' : '#666666'" class="book-card-mark"><BookmarkTwotone /></el-icon>
<el-rate v-model="book.rating" size="small" allow-half disabled/>
</div>
</div>
</el-col>
Expand Down Expand Up @@ -613,7 +607,6 @@ export default defineComponent({
expandNodes: [],
progress: 0,
randomTags: [],
visibilityMap: {},
// collection
selectCollection: undefined,
selectCollectionObject: {list:[]},
Expand Down Expand Up @@ -1665,9 +1658,6 @@ export default defineComponent({
scrollMainPageTop () {
document.getElementsByClassName('book-card-area')[0].scrollTop = 0
},
loadBookCardContent (index) {
this.visibilityMap[index] = true
},
// folder tree
Expand Down
15 changes: 0 additions & 15 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,4 @@ app.use(createI18n({
legacy: false,
messages
}))

app.directive('lazy', {
mounted(el, binding) {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
binding.value(binding.arg)
observer.unobserve(el)
}
})
})
observer.observe(el)
}
})

app.mount('#app')

0 comments on commit 04adb5f

Please sign in to comment.