<panel>: Allow content to persist after collapsing #868
Assignees
Labels
a-ReaderUsability
c.Bug 🐛
c.Enhancement
f-Panel
s.UnderDiscussion
The team will evaluate this issue to decide whether it is worth adding
Comments
alyip98
added
a-ReaderUsability
c.Bug 🐛
c.Enhancement
f-Panel
s.UnderDiscussion
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 21, 2019
Previously:
1) Panels are by default conditionally rendered,
so each time a panel is closed and reopened,
its contents are recreated.
2) Else, panels can be preloaded if explicitly wanted.
However, this adds extra rendering time.
Now:
Case 2 remains the same.
Authors can still choose to preload their panels if they wish.
For Case 1, we cache the rendered content so as to prevent re-rendering,
which
a) prevents multiple HTTP requests if using the src attribute
b) solves issues that stem from the destruction and recreation of
components:
MarkBind/markbind#868
MarkBind/markbind#483
Implementation:
Store an additional `isCached` property, which is set to true
whenever the content is fetched.
When `isCached` is true, we switch from
v-if (conditional rendering)
to
v-show (conditional display)
More info: https://vuejs.org/v2/guide/conditional.html#v-show
Future work:
Investigate the use of keep-alive:
https://vuejs.org/v2/guide/components-dynamic-async.html
Tried to surround the content with <keep-alive></keep-alive>
but did not seem to be cached.
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 22, 2019
Previously:
1) Panels are by default conditionally rendered,
so each time a panel is closed and reopened,
its contents are recreated.
2) Else, panels can be preloaded if explicitly wanted.
However, this adds extra rendering time.
Now:
Case 2 remains the same.
Authors can still choose to preload their panels if they wish.
For Case 1, we cache the rendered content so as to prevent re-rendering,
which
a) prevents multiple HTTP requests if using the src attribute
b) solves issues that stem from the destruction and recreation of
components:
MarkBind/markbind#868
MarkBind/markbind#483
Implementation:
Store an additional `isCached` property, which is set to true
whenever the content is fetched.
When `isCached` is true, we switch from
v-if (conditional rendering)
to
v-show (conditional display)
More info: https://vuejs.org/v2/guide/conditional.html#v-show
Future work:
Investigate the use of keep-alive:
https://vuejs.org/v2/guide/components-dynamic-async.html
Tried to surround the content with <keep-alive></keep-alive>
but did not seem to be cached.
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 22, 2019
Previously:
1) Panels are by default conditionally rendered,
so each time a panel is closed and reopened,
its contents are recreated.
2) Else, panels can be preloaded if explicitly wanted.
However, this adds extra rendering time.
Now:
Case 2 remains the same.
Authors can still choose to preload their panels if they wish.
For Case 1, we cache the rendered content so as to prevent re-rendering,
which
a) prevents multiple HTTP requests if using the src attribute
b) solves issues that stem from the destruction and recreation of
components:
MarkBind/markbind#868
MarkBind/markbind#483
Implementation:
Store an additional `isCached` property, which is set to true
whenever the content is fetched.
When `isCached` is true, we switch from
v-if (conditional rendering)
to
v-show (conditional display)
More info: https://vuejs.org/v2/guide/conditional.html#v-show
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.
Future work:
Investigate the use of keep-alive:
https://vuejs.org/v2/guide/components-dynamic-async.html
Tried to surround the content with <keep-alive></keep-alive>
but did not seem to be cached.
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 22, 2019
Previously:
1) Panels are by default conditionally rendered,
so each time a panel is closed and reopened,
its contents are recreated.
2) Else, panels can be preloaded if explicitly wanted.
However, this adds extra rendering time.
Now:
Case 2 remains the same.
Authors can still choose to preload their panels if they wish.
For Case 1, we cache the rendered content so as to prevent re-rendering,
which
a) prevents multiple HTTP requests if using the src attribute
b) solves issues that stem from the destruction and recreation of
components:
MarkBind/markbind#868
MarkBind/markbind#483
Implementation:
Store an additional `isCached` property, which is set to true
whenever the content is fetched.
When `isCached` is true, we switch from
v-if (conditional rendering)
to
v-show (conditional display)
More info: https://vuejs.org/v2/guide/conditional.html#v-show
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.
Future work:
Investigate the use of keep-alive:
https://vuejs.org/v2/guide/components-dynamic-async.html
Tried to surround the content with <keep-alive></keep-alive>
but did not seem to be cached.
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 22, 2019
Previously:
1) Panels are by default conditionally rendered,
so each time a panel is closed and reopened,
its contents are recreated.
2) Else, panels can be preloaded if explicitly wanted.
However, this adds extra rendering time.
Now:
Case 2 remains the same.
Authors can still choose to preload their panels if they wish.
For Case 1, we cache the rendered content so as to prevent re-rendering,
which
a) prevents multiple HTTP requests if using the src attribute
b) solves issues that stem from the destruction and recreation of
components:
MarkBind/markbind#868
MarkBind/markbind#483
Implementation:
Store an additional `isCached` property, which is set to true
whenever the content is fetched.
When `isCached` is true, we switch from
v-if (conditional rendering)
to
v-show (conditional display)
More info: https://vuejs.org/v2/guide/conditional.html#v-show
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.
Future work:
Investigate the use of keep-alive:
https://vuejs.org/v2/guide/components-dynamic-async.html
Tried to surround the content with <keep-alive></keep-alive>
but did not seem to be cached.
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 23, 2019
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.
Chng-Zhi-Xuan
pushed a commit
to MarkBind/vue-strap
that referenced
this issue
May 27, 2019
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Currently, collapsing a panel deletes the elements from the DOM. This is bootstrap-vue behaviour. On expansion, a fresh copy of the elements are added to the DOM. This causes a number of problems:
<question>tags, where readers might want to save their answers for future reference.<modal>and<trigger>retain their on-mouse-over functionality due to it being part of the bootstrap-vue package, and there is probably code to attach the relevant event listeners on creation.Current approach: Add an attribute that allows a panel to keep its contents on collapse
The text was updated successfully, but these errors were encountered: