Skip to content

Commit

Permalink
CLDR-17658 Experiment with virtual scroller, not working yet
Browse files Browse the repository at this point in the history
  • Loading branch information
@btangmu
btangmu committed Jun 5, 2024
1 parent 36999e4 commit a93b2e5
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 110 deletions.
5 changes: 5 additions & 0 deletions tools/cldr-apps/js/src/esm/cldrComponents.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ import {
Tooltip,
UploadDragger,
} from "ant-design-vue";

import VueVirtualScroller from "vue-virtual-scroller";
// Note: 'notification' is a function and is imported as a function in cldrVue.mjs,
// or within a specific app.

Expand Down Expand Up @@ -90,4 +92,7 @@ function setup(app) {
app.component("cldr-value", CldrValue);
}

// some plugins we can pull in wholesale
app.use(VueVirtualScroller);

export { setup };
1 change: 1 addition & 0 deletions tools/cldr-apps/js/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
// module stylesheets need to go here. See cldrVue.mjs
// example: import 'someModule/dist/someModule.css'
import "ant-design-vue/dist/antd.min.css";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

// global stylesheets
import "./css/cldrForum.css";
Expand Down
201 changes: 91 additions & 110 deletions tools/cldr-apps/js/src/views/DashboardWidget.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,113 +79,98 @@
<a-spin size="large" />
</template>
<template v-else>
<DynamicScroller :items="items" :min-item-size="54" class="scroller">
<template v-slot="{ item, index, active }">
<DynamicScrollerItem
:item="item"
:active="active"
:size-dependencies="[item.message]"
:data-index="index"
>
<div class="avatar">
<img
:src="item.avatar"
:key="item.avatar"
alt="avatar"
class="image"
/>
</div>
<div class="text">{{ item.message }}</div>
</DynamicScrollerItem>
</template>
</DynamicScroller>
<template
v-for="entry of data.entries"
:key="'template-' + entry.xpstrid"
<RecycleScroller
class="sroller"
:items="data.entries"
:item-size="32"
key-field="xpstrid"
v-slot="{ item }"
>
<template v-if="anyCatIsShown(entry.cats)">
<p
v-if="!(hideChecked && entry.checked)"
<!-- <template v-if="anyCatIsShown(entry.cats)"> -->
<!--
v-if="true && !(hideChecked && entry.checked)"
:key="'dash-item-' + entry.xpstrid"
:id="'dash-item-' + entry.xpstrid"
:class="
'dash-' +
(lastClicked === entry.xpstrid ? ' last-clicked' : '')
"
>
<span class="dashEntry">
<a
v-bind:href="getLink(locale, entry)"
@click="() => setLastClicked(entry.xpstrid)"
>
<span v-bind:key="cat" v-for="cat of entry.cats">
<span
v-if="!catIsHidden[cat]"
class="category"
:title="describeAbbreviation(cat)"
>{{ abbreviate(cat) }}</span
>
</span>
<span class="section-page" title="section—page">{{
humanize(entry.section + "—" + entry.page)
}}</span>
|
-->
<p
:class="
'dash-' + (lastClicked === item.xpstrid ? ' last-clicked' : '')
"
>
<span class="dashEntry">
<a
v-bind:href="getLink(locale, item)"
@click="() => setLastClicked(item.xpstrid)"
>
<span v-bind:key="cat" v-for="cat of item.cats">
<span
v-if="entry.header"
class="entry-header"
title="entry header"
>{{ entry.header }}</span
>
|
<span class="code" title="code">{{ entry.code }}</span>
|
<cldr-value
class="previous-english"
title="previous English"
lang="en"
dir="ltr"
v-if="entry.previousEnglish"
>{{ entry.previousEnglish }} →</cldr-value
>
<cldr-value
class="english"
lang="en"
dir="ltr"
title="English"
v-if="entry.english"
>{{ entry.english }}</cldr-value
v-if="!catIsHidden[cat]"
class="category"
:title="describeAbbreviation(cat)"
>{{ abbreviate(cat) }}</span
>
</span>
<span class="section-page" title="section—page">{{
humanize(item.section + "—" + item.page)
}}</span>
|
<span
v-if="item.header"
class="entry-header"
title="entry header"
>{{ item.header }}</span
>
|
<span class="code" title="code">{{ item.code }}</span>
|
<cldr-value
class="previous-english"
title="previous English"
lang="en"
dir="ltr"
v-if="item.previousEnglish"
>{{ item.previousEnglish }} →</cldr-value
>
<cldr-value
class="english"
lang="en"
dir="ltr"
title="English"
v-if="item.english"
>{{ item.english }}</cldr-value
>
|
<cldr-value
v-if="item.winning"
class="winning"
title="Winning"
>{{ item.winning }}</cldr-value
>
<template v-if="item.comment">
|
<cldr-value
v-if="entry.winning"
class="winning"
title="Winning"
>{{ entry.winning }}</cldr-value
>
<template v-if="entry.comment">
|
<span v-html="entry.comment" title="comment"></span>
</template>
<span v-if="entry.cats.has('Reports')"
>{{ humanizeReport(entry.code) }} Report</span
>
</a>
</span>
<input
v-if="canBeHidden(entry.cats)"
type="checkbox"
class="right-control"
title="You can hide checked items with the hide checkbox above"
v-model="entry.checked"
@change="
(event) => {
entryCheckmarkChanged(event, entry);
}
"
/>
</p>
</template>
</template>
<span v-html="item.comment" title="comment"></span>
</template>
<span v-if="item.cats.has('Reports')"
>{{ humanizeReport(item.code) }} Report</span
>
</a>
</span>
<input
v-if="canBeHidden(item.cats)"
type="checkbox"
class="right-control"
title="You can hide checked items with the hide checkbox above"
v-model="item.checked"
@change="
(event) => {
entryCheckmarkChanged(event, entry);
}
"
/>
</p>
<!-- todo /template-->
</RecycleScroller>
<p class="bottom-padding">...</p>
</template>
</section>
Expand All @@ -194,6 +179,7 @@
</template>

<script>
import { RecycleScroller } from "vue-virtual-scroller";
import * as cldrCoverage from "../esm/cldrCoverage.mjs";
import * as cldrDash from "../esm/cldrDash.mjs";
import * as cldrGui from "../esm/cldrGui.mjs";
Expand All @@ -203,13 +189,9 @@ import * as cldrReport from "../esm/cldrReport.mjs";
import * as cldrStatus from "../esm/cldrStatus.mjs";
import * as cldrText from "../esm/cldrText.mjs";
import { nextTick } from "vue";
import VueVirtualScroller from "vue-virtual-scroller";
export default {
props: {
items: Array,
},
props: [],
data() {
return {
data: null,
Expand Down Expand Up @@ -463,6 +445,9 @@ export default {
</script>
<style scoped>
.scroller {
}
.st-sad {
font-style: italic;
border: 1px dashed red;
Expand Down Expand Up @@ -577,8 +562,4 @@ a:hover {
.last-clicked {
background-color: #eee; /* light gray */
}
.scroller {
height: 100%;
}
</style>

0 comments on commit a93b2e5

Please sign in to comment.