mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-27 18:52:14 +03:00
Fix posts navigation slowdown when lots of posts are loaded
refs #6274 - adds `active-link-wrapper` mixin that tracks the `active` state of child links and adds/removes a `.active` class on the mixed-in element - removes the passed-in `active` attribute on `gh-posts-list-item` component that forced every item in the content list to be re-rendered each time the currently selected post changed
This commit is contained in:
parent
58e32f6774
commit
ea3bf21a84
@ -1,14 +1,14 @@
|
||||
import Ember from 'ember';
|
||||
import ActiveLinkWrapper from 'ghost/mixins/active-link-wrapper';
|
||||
|
||||
const {$, Component, computed, inject} = Ember;
|
||||
const {alias, equal} = computed;
|
||||
|
||||
export default Component.extend({
|
||||
export default Component.extend(ActiveLinkWrapper, {
|
||||
tagName: 'li',
|
||||
classNameBindings: ['active', 'isFeatured:featured', 'isPage:page'],
|
||||
classNameBindings: ['isFeatured:featured', 'isPage:page'],
|
||||
|
||||
post: null,
|
||||
active: false,
|
||||
previewIsHidden: false,
|
||||
|
||||
isFeatured: alias('post.featured'),
|
||||
|
32
ghost/admin/app/mixins/active-link-wrapper.js
Normal file
32
ghost/admin/app/mixins/active-link-wrapper.js
Normal file
@ -0,0 +1,32 @@
|
||||
// logic borrowed from https://github.com/alexspeller/ember-cli-active-link-wrapper/blob/master/addon/components/active-link.js
|
||||
|
||||
import Ember from 'ember';
|
||||
|
||||
const {computed, run} = Ember;
|
||||
const emberA = Ember.A;
|
||||
|
||||
export default Ember.Mixin.create({
|
||||
|
||||
classNameBindings: ['active'],
|
||||
|
||||
childLinkViews: [],
|
||||
|
||||
active: computed('childLinkViews.@each.active', function () {
|
||||
return emberA(this.get('childLinkViews')).isAny('active');
|
||||
}),
|
||||
|
||||
didRender() {
|
||||
this._super(...arguments);
|
||||
|
||||
run.schedule('afterRender', this, function () {
|
||||
let childLinkElements = this.$('a.ember-view');
|
||||
|
||||
let childLinkViews = childLinkElements.toArray().map((view) =>
|
||||
this._viewRegistry[view.id]
|
||||
);
|
||||
|
||||
this.set('childLinkViews', childLinkViews);
|
||||
});
|
||||
}
|
||||
|
||||
});
|
@ -11,7 +11,7 @@
|
||||
{{#gh-infinite-scroll-box tagName="section" classNames="content-list-content js-content-scrollbox" fetch="loadNextPage"}}
|
||||
<ol class="posts-list">
|
||||
{{#each sortedPosts key="id" as |post|}}
|
||||
{{#gh-posts-list-item post=post active=(is-equal post currentPost) onDoubleClick="openEditor" previewIsHidden=container.previewIsHidden as |component|}}
|
||||
{{#gh-posts-list-item post=post onDoubleClick="openEditor" previewIsHidden=container.previewIsHidden as |component|}}
|
||||
{{#link-to component.viewOrEdit post.id class="permalink" title="Edit this post"}}
|
||||
<h3 class="entry-title">{{post.title}}</h3>
|
||||
<section class="entry-meta">
|
||||
|
Loading…
Reference in New Issue
Block a user