Skip to content
This repository has been archived by the owner on Jul 12, 2020. It is now read-only.

Commit

Permalink
Cache panel contents after first load (#105)
Browse files Browse the repository at this point in the history
Panels that do not have the preload attribute
have their contents destroyed and recreated on each reopen.

This causes issues such as inner text inputs and inner panels not
remembering their previous state,
and panels with src attribute repeating the same ajax request.

See
MarkBind/markbind#868
MarkBind/markbind#483

Let's have an additional `isCached` property, which is set to true
whenever the content is/will be loaded. Only when isCached is true
will the content be rendered and.

As a side effect, since once the panel is loaded v-show is always used,
the v-else part of the template is not needed anymore,
which also reduces code duplication.
  • Loading branch information
openorclose authored and Chng-Zhi-Xuan committed May 27, 2019
1 parent 386e3f0 commit 282556d
Showing 1 changed file with 12 additions and 17 deletions.
29 changes: 12 additions & 17 deletions src/Panel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
</slot>
</div>
</div>
<template v-if="preloadBool">
<template v-if="preloadBool || isCached">
<div class="card-collapse"
ref="panel"
v-show="localExpanded"
Expand All @@ -57,21 +57,6 @@
<hr v-show="isSeamless" />
</div>
</template>
<template v-else>
<div class="card-collapse"
ref="panel"
v-if="localExpanded"
>
<div class="card-body">
<slot></slot>
<retriever v-if="hasSrc" ref="retriever" :src="src" :fragment="fragment" delay></retriever>
<panel-switch v-show="isExpandableCard && bottomSwitchBool" :is-open="localExpanded"
@click.native.stop.prevent="collapseThenScrollIntoViewIfNeeded()"
@is-open-event="retrieveOnOpen"></panel-switch>
</div>
<hr v-show="isSeamless" />
</div>
</template>
</div>
</span>
</template>
Expand Down Expand Up @@ -229,7 +214,8 @@
return {
onHeaderHover: false,
localExpanded: false,
localMinimized: false
localMinimized: false,
isCached: false
}
},
methods: {
Expand Down Expand Up @@ -270,6 +256,15 @@
},
watch: {
'localExpanded': function (val, oldVal) {
if (this.isCached) {
return;
}
/* When either one of the values is true,
* it means that the data is/will be cached.
*/
if (val || oldVal) {
this.isCached = true;
}
this.$nextTick(function () {
this.retrieveOnOpen(this, val);
})
Expand Down

0 comments on commit 282556d

Please sign in to comment.