From ea3bf21a84adee85e1a2758bbbca0256487fc052 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 4 Jan 2016 16:50:18 +0000
Subject: [PATCH] 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
---
 .../app/components/gh-posts-list-item.js      |  6 ++--
 ghost/admin/app/mixins/active-link-wrapper.js | 32 +++++++++++++++++++
 ghost/admin/app/templates/posts.hbs           |  2 +-
 3 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 ghost/admin/app/mixins/active-link-wrapper.js

diff --git a/ghost/admin/app/components/gh-posts-list-item.js b/ghost/admin/app/components/gh-posts-list-item.js
index 6e807a1108..b0fe972172 100644
--- a/ghost/admin/app/components/gh-posts-list-item.js
+++ b/ghost/admin/app/components/gh-posts-list-item.js
@@ -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'),
diff --git a/ghost/admin/app/mixins/active-link-wrapper.js b/ghost/admin/app/mixins/active-link-wrapper.js
new file mode 100644
index 0000000000..fa8a2831c5
--- /dev/null
+++ b/ghost/admin/app/mixins/active-link-wrapper.js
@@ -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);
+        });
+    }
+
+});
diff --git a/ghost/admin/app/templates/posts.hbs b/ghost/admin/app/templates/posts.hbs
index 7b216f4b1e..79651ac411 100644
--- a/ghost/admin/app/templates/posts.hbs
+++ b/ghost/admin/app/templates/posts.hbs
@@ -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">