44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

opening a card scrolls to its content div

Browse Source
This commit is contained in:
undergroundwires
2020-07-19 00:43:05 +01:00
parent dd7e1416b4
commit 31d2067f07
1 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/presentation/Scripts/Cards/CardListItem.vue
View File

@@ -4,20 +4,21 @@
v-bind:class="{ v-bind:class="{
'is-collapsed': !isExpanded, 'is-collapsed': !isExpanded,
'is-inactive': activeCategoryId && activeCategoryId != categoryId, 'is-inactive': activeCategoryId && activeCategoryId != categoryId,
'is-expanded': isExpanded}"> 'is-expanded': isExpanded}"
<div class="card__inner"> ref="cardElement">
<span v-if="cardTitle && cardTitle.length > 0">{{cardTitle}}</span> <div class="card__inner">
<span v-else>Oh no 😢</span> <span v-if="cardTitle && cardTitle.length > 0">{{cardTitle}}</span>
<font-awesome-icon :icon="['far', isExpanded ? 'folder-open' : 'folder']" class="card__inner__expand-icon" /> <span v-else>Oh no 😢</span>
<font-awesome-icon :icon="['far', isExpanded ? 'folder-open' : 'folder']" class="card__inner__expand-icon" />
</div>
<div class="card__expander" v-on:click.stop>
<div class="card__expander__content">
<ScriptsTree :categoryId="categoryId"></ScriptsTree>
</div>
<div class="card__expander__close-button">
<font-awesome-icon :icon="['fas', 'times']" v-on:click="onSelected(false)"/>
</div>
</div> </div>
<div class="card__expander" v-on:click.stop>
<div class="card__expander__content">
<ScriptsTree :categoryId="categoryId"></ScriptsTree>
</div>
<div class="card__expander__close-button">
<font-awesome-icon :icon="['fas', 'times']" v-on:click="onSelected(false)"/>
</div>
</div>
</div> </div>
</template> </template>
@@ -41,11 +42,18 @@ export default class CardListItem extends StatefulVue {
public onSelected(isExpanded: boolean) { public onSelected(isExpanded: boolean) {
this.isExpanded = isExpanded; this.isExpanded = isExpanded;
} }
@Watch('activeCategoryId') @Watch('activeCategoryId')
public async onActiveCategoryChanged(value: |number) { public async onActiveCategoryChanged(value: |number) {
this.isExpanded = value === this.categoryId; this.isExpanded = value === this.categoryId;
} }
@Watch('isExpanded')
public async onExpansionChangedAsync(newValue: number, oldValue: number) {
if (!oldValue && newValue) {
await new Promise((r) => setTimeout(r, 400));
const focusElement = this.$refs.cardElement as HTMLElement;
(focusElement as HTMLElement).scrollIntoView({behavior: 'smooth'});
}
}
public async mounted() { public async mounted() {
this.cardTitle = this.categoryId ? await this.getCardTitleAsync(this.categoryId) : undefined; this.cardTitle = this.categoryId ? await this.getCardTitleAsync(this.categoryId) : undefined;